[Track 3] [FE] Login

[taki-tiler[bot]]

With everything set up, it's coding time! (finally)

(Re-)Note: because this is a new step, don't forget to open a new branch!

Step 1 - Login screen Frontend (FE)

Estimated time: 2 hours

Your task now is to create the Login Screen frontend. That means laying out the view components (inputs, buttons, images...) in the screen. In the frontend steps, you don't need to make web requests, save data locally and etc. Your job here is only layout properly all the view components you'll need in your screen.

Talking about view components, your screen should have a form containing:

• an email input
• a password input
• a submit button

You can use the following image as an inspiration:

Don't mind the styles, borders and colors, you can choose your own, if you want to.

Once you've done, open a PR.

Note: Bear in mind that this task is only the login screen frontend, which means that, for now, you don't have to communicate with server to check the user credentials for example. All you have to do here is to layout properly all the view components you'll need in your screen.

[sandra-n]

Finish

[taki-tiler[bot]]

Step 2 - Login validations

Estimated time: 2 hours

(Re-Re-)Note: Don't forget to open a new branch!

When filling up a form, users (us) can mispell something or forget to fill all the inputs in a form. So in this step you'll create some form validations.

Your login screen should have the following validations:

• Email input:

  • Should have a valid email format: ###@###.com
  • Should not be empty (required field)

• Password input:

  • Minimum of 7 characters, with at least one digit and one alphanumeric
  • Should not be empty (required field)

All these validations should be triggered when the user taps the submit button, showing message errors accordingly. Here are some examples of form validation:

Once you've done, open a PR.

[sandra-n]

Finish

[taki-tiler[bot]]

Click here for your next track