AdrianGub
commented
11 months ago - [x] Login and Register functionalities will appear in the same page.
- [x] The background will contain a blurred image.
- [x] The main container will appear in the middle of the screen.
- [x] The main container will be divided into two sections.
- [x] The form section will be white.
- [x] The information section will be bluish.
- [x] Clicking the rounded button on the bluish side will scroll sections and swap from login to register and viceversa.
- [x] The information section will include a clickable link labeled '<< Return to main page' that redirects the user to the main page. It will become more white if hovered.
- [x] The form section will be titled "Login".
- [x] The first element of the form will be an input text field requiring the Username or Email of the user.
- [x] The second element of the form will be an input text field requiring the Password of the user.
- [x] The Password will be hidden by default.
- [x] Below the Password input text field will appear an orange button with a crossed out eye in it.
- [x] If that button is pressed, the eye and password will be fully visible.
- [x] The third element of the form will be a "LOGIN" button.
- [x] If the "LOGIN" button is pressed and any of the input text field empty, an alert will appear displaying the following text "Complete the form.".
- [x] If the "LOGIN" button is pressed and the Username/Email don't match with the password, an alert will appear displaying the following text "Invalid username, email, or password.".
- [x] The information section will contain a text saying "Hello! Don't have an account yet? Register and start exploring!".
- [x] The form section will be titled "Create Account".
- [x] The first element of the form will be an input text field requiring the Username of the user.
- [x] The username requirements can be found below the Username input text field. The requirements are "The username must be between 8 and 16 characters."
- [x] The second element of the form will be an input text field requiring the Email of the user.
- [x] The email requirements can be found below the Email input text field. The requirements are "Only the following domains are valid: example.com, yourdomain.com, gmail.com, hotmail.com".
- [x] The third element of the form will be an input text field requiring the Password of the user.
- [x] The password requirements can be found below the Password input text field. The requirements are "The password must be at least 8 characters long, contain one uppercase letter, one lowercase letter, one number, and one symbol.".
- [x] The fourth element of the form will be an input text field requiring the Password of the user again in order to confirm it.
- [x] Password and Password Confirmation input text fields will contain the crossed out eye button to hide/show passwords. Those are the same as in the Login.
- [x] The fifth element of the form will be a Password Strength meter.
- [x] The Password Strength meter will get completed dynamically once the user accomplishes all the requirements of the Password.
- [x] The sixth element of the form will be a "REGISTER" button.
- [x] If the "REGISTER" button is pressed and any of the input text field empty, an alert will appear displaying the following text "Complete the form.".
- [x] If the "REGISTER" button is pressed and the passwords do not match, an alert will appear displaying "Passwords do not match".
- [x] If the "REGISTER" button is pressed and the username does not meet with the requirements, an alert will appear displaying "Username not valid.".
- [x] If the "REGISTER" button is pressed and the username already exists, an alert will appear displaying "Username already exists.".
- [x] If the "REGISTER" button is pressed and the email does not meet with the requirements, an alert will appear displaying "Email not valid.".
- [x] If the "REGISTER" button is pressed and the email already exists, an alert will appear displaying "Email already exists.".
- [x] In case any input text field does not match with the requirements, the border will turn red.
- [x] The information section will contain a text saying "Welcome Back! Already have an account? Login and explore!".