[Track 3/8] [FE] Login

[taki-tiler]

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 about the styles, borders and colors. Later on, you'll be asked to work on the styles and UI components.

TIP: you will have to name your typescript React components with the extension .tsx to be able to use the html-like React syntax (jsx). But as the project goes, you may want to create some other files on your code that are not necesarily React components with this syntax. On those, you can use the traditional .ts extension.

Create a feature branch with a meaningful name for this task, and once you've done it, 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.

[henriquegeribello]

Finish

[taki-tiler]

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.

NOTE: as usual, create a new branch and open a Pull Request after you've done it.

By the way, every task from now on should be made on a new branch. This has several benefits, such as:

• CR process becomes easier and more effective with less code
• Allows possible version rollbacks without having to worry with the feature branches commits.

[henriquegeribello]

Finish

[taki-tiler]

Click here for your next track