[Task 9] Login

[MZabolotnev]

• Main repository - https://github.com/MastersAcademy/fe-react-2024
• Design - https://www.figma.com/file/mRAOMdJiAsD8fHSVnYwUl9/React-web-page
• Branch name - task/09-login

Task: Implement a Login Form

Objective

• Implement a login form with email and password fields.
• The page should match to the provided design.
• Client-side validation is required, including mandatory fields and valid email checks. You can use browser validation or a library of your choice.
• For login, you need to send a request to the API: https://ma-backend-api.mocintra.com/api/v1/auth/login
• Upon successful login, you will receive tokens that need to be stored in the application's memory or session storage.
• After login, redirect to the home page.
• In case of unsuccessful login, display an error to the user.
• When navigating to the cart, check if the user is logged in by sending a request to the endpoint: https://ma-backend-api.mocintra.com/api/v1/auth/verify. This endpoint requires the AccessToken in the Authorization header in the format 'Bearer accessToken'.

• If the user is not logged in or the token is invalid, redirect to the login page. An unauthenticated user should not be able to add items to the cart and should be redirected to the login form.
• The login and logout buttons (for storing and deleting tokens) should function correctly.

Additional Task (Optional):

• Write custom validation for each field. Use a smart form or a library at your discretion.

Useful Links

• Don't forget to use Swagger: https://ma-backend-api.mocintra.com/docs
• Information on routing and guards:
  • https://ui.dev/react-router-protected-routes-authentication
  • https://blog.logrocket.com/authentication-react-router-v6/

Users

[
      {
        id: 1,
        email: '[email protected]',
        password: 'changeme',
        name: 'Jhon',
        role: Role.customer,
        avatar: 'https://i.imgur.com/LDOO4Qs.jpg',
      },
      {
        id: 2,
        email: '[email protected]',
        password: '12345',
        name: 'Maria',
        role: Role.customer,
        avatar: 'https://i.imgur.com/DTfowdu.jpg',
      },
      {
        id: 3,
        email: '[email protected]',
        password: 'admin123',
        name: 'Admin',
        role: Role.admin,
        avatar: 'https://i.imgur.com/yhW6Yw1.jpg',
      },
    ]