Frontend Development Assessment: Registration, Login, and User Details Pages

Objective

The objective of this assessment is to showcase your frontend development skills using HTML, CSS, JavaScript, and React.js. You will be creating a set of responsive and user-friendly pages including a Registration Page, a Login Page with authentication, and a User Details Page.

Requirements

Registration Page:

• Design and implement a registration page.
• Include fields for entering the user's name, email, password, Mobile Number, Age, Address, Gender, and Occupation.
• Implement client-side validation for the form fields (e.g., required fields, valid email format).
• Include a "Register" button that submits the form.

Login Page:

• Design and implement a login page.
• Include fields for entering the user's email/Mobile Number and password.
• Users should be able to log in using email or mobile number.
• Implement client-side validation for the form fields.
• Include a "Login" button that submits the form.

Authentication Logic:

• Implement a basic authentication logic without using a backend or database.
• Upon successful registration, store the user's credentials (email/mobile number and password) securely in memory or using appropriate client-side techniques.
• Implement login functionality by verifying user input against the stored credentials.
• Display appropriate messages for successful login or authentication errors.

User Details Page:

• Create a page that displays user details after successful registration or login.
• Display the user's name and email address on this page.
• Provide a “Logout” button to log out the user and return to the login or registration page.
• Mask the Password on this page and provide a “show password” button to show the password.

Getting Started

1. Clone this repository to your local machine.
2. Install the required dependencies using npm install.
3. Start the development server using npm start.
4. Begin implementing the components as per the requirements mentioned above.
5. Use React.js for building the components and managing state.

Submission

Please submit your completed assignment by creating a pull request to this repository.

The deploy link of Registration Form : https://registration-form-hazel.vercel.app/