Open taki-tiler[bot] opened 2 months ago
next
(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:
Password input:
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:
next
Click here for your next track
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:
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.