[Track 3/9] [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/2 - 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.

[90felipe09]

finish

[taki-tiler[bot]]

Step 2/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:

  • Should not be empty (required field)
  • Minimum of 7 characters
  • Should have at least one digit and one letter

All these validations should be triggered when the user taps the submit button, showing error messages accordingly.

Once you've done, open a PR.

[90felipe09]

Finish

[taki-tiler[bot]]

Click here for your next track