Login Page

[JonoSommers]

Description:
The Login Page should display 'Cardfolio' at the top of the page with two buttons below (middle of page), one for logging in and one for creating an account. The buttons will pull up forms for the user to fill out, which will include a username field and a password field. Below the fields in both forms is a submit button to either login, or confirm account creation details. Upon a successful account creation, a default binder will be created for the user and will be visible in the Binders Container upon a successful login.

Details:

• 'Login' button that pulls up login form (contains username input fields). Contains a 'Submit' button below the input fields to redirect the user to the home page upon a successful login.
• If a username or password is not found it will display a message ('An account with those details was not found. Please try again or create an account.')
• 'Create Account' button that pulls up create account form (contains username input fields). Contains a 'Submit' button below the input fields for the user to confirm account details (their chosen username). It will then display a message before directing the user back to the login page where they can input their newly created account details into the login form.
• Upon successful account creation, a default binder will be created for the user, and will be displayed on the Home Page in the binders container after logging in.
• If a user tries to create an account with a username that already exists, a message will be displayed ('An account with that username already exists, please try something else.')

Example request body for 'Login' and 'Create Account':

{
  "username": "exampleUser",
}

Example response body for 'Create Account':

{
  "message": "Your account has been successfully created. You will now be directed back to the login page."
}

Acceptance Criteria:

• The Login and Create Account forms function as expected:

  • Submitting valid login details redirects the user to the home page.
  • Submitting valid account creation details shows a success message and redirects the user to the login page.
  • An error message is displayed if login or account creation fails (e.g., incorrect username / duplicate username).

• Upon successful account creation, a default binder is created and displayed in the Binders Container after the user logs in.

• All UI elements (buttons, forms, error messages) are visually correct and responsive.

• All relevant tests (UI, form validation, successful login, error handling) pass successfully.