Login Page UI and Functionality

[alejandroo-pc]

As a user, I want to be able to log into the application and be redirected to a home page. I also wanted to be prompted with errors if credentials are invalid.

Since the login and sign up pages use the same styling (different input fields) you can refer to styling on the sign up page for consistency.

Acceptance Criteria

UI/Basic functionality

• Login button on landing page should link to login page
• Login page styling should follow the Figma designs here
  • Fields for username and password
• when a user enters a password, the characters should be hidden for security
  • here is an example
• User should be redirected to sign up page if they do not have an account

Login functionality

! 2 test users has been created in the app + their username/password can be found in the team's Slack canvas

You will implement the logic to login a user.

• a POST request to http://localhost:8000/api/v1/users/login
  • use fetch() to make the request
  • the fetch body should include the username and password.
• when the password or username is incorrect a user should expect an error message
  • prompt "invalid username or password"
  • use react-toastify
• on a successful entry of username and password
  • a user should automatically be redirected to the homepage
  • save the user's account details using useState at the top of the component tree (all further fetch requests require a bearer token in an Authorization header.