Task 18: Login and Register

yogeshtakeo commented 1 year ago

Task: Create Login, Register, and Home Pages with Authentication in React using TypeScript

Objective: Develop login and register pages with form handling and password validation checks, and create a home page that can only be accessed when the user is registered and logged on using authentication in React with TypeScript.

Task Overview

Set up a new React project using a tool of your choice (e.g., Create React App).
Create separate login and register pages with appropriate form fields.
Implement form handling with TypeScript to capture user input and log the credentials.
Include password validation checks with TypeScript to ensure password strength.
Create a home page that requires authentication to access.

Task Details

Project Setup:
- Set up a new React project using Create React App or any other tool you prefer.
- Configure TypeScript in the project by updating the configuration files and installing the necessary types.
Create Login Page:
- Create a login page component (LoginPage) that renders a login form.
- Include form fields for email and password with TypeScript types.
- Implement form handling with TypeScript to capture user input.
- Log the credentials to the console after handling the form submission.
- Optionally, implement password validation checks with TypeScript (e.g., minimum length, special characters).
Create Register Page:
- Create a register page component (RegisterPage) that renders a registration form.
- Include form fields for name, email, password, and password confirmation with TypeScript types.
- Implement form handling with TypeScript to capture user input.
- Log the credentials to the console after handling the form submission.
- Implement password validation checks with TypeScript (e.g., minimum length, special characters, password match).
Create Home Page:
- Create a home page component (HomePage) that can only be accessed when the user is registered and logged on.
- Implement authentication functionality with TypeScript to determine if the user is logged in.
- If the user is logged in, render the content of the home page. Otherwise, redirect them to the login page.
Implement React Router:
- Set up React Router in your application.
- Configure routes for the login, register, and home pages.
- Ensure that the appropriate page is rendered when the corresponding route is accessed.
Test and Refine:
- Start the development server and run the React project.
- Verify that the login and register pages are rendered correctly.
- Test the form handling functionality by entering credentials and checking if they are logged in the console.
- Test the password validation checks by entering passwords of different strengths.
- Test the home page authentication by logging in and accessing the home page.
- Make adjustments and refinements to the design, form fields, authentication, or functionality as needed.

Task Submission

Share the code files (LoginPage.tsx, RegisterPage.tsx, HomePage.tsx, etc.) with the implemented login, register, and home pages, including form handling, password validation checks, and authentication with TypeScript.
Optionally, provide screenshots or a live demo link showcasing the login, register, and home pages in action.
Share the code files, screenshots, or links with your Technical expert.