1. Create Your Own Login Page (Points: 6)

For this challenge, your team needs redesign the Carleton Central login page.

Checkout: client/src/pages/Login/Login.tsx to get started.

Additionally, today the email and password values used when clicking “sign in” are hard coded to be admin@email.com and password.

Utilize React’s useState hook to store custom values for email and password and update the attemptLogin login function to use the newly stored values.


Acceptance Criteria:

The new login page must satisfy atleast (2) of these (4) possible criteria:

  • Replace the image of Carleton University with something new
  • Improve the styling of the “Sign in” button (improved colors, fonts, animation, etc)
  • Move the “login panel” (the white box with inputs) to the left side of the screen
  • Improve the “error message” styling. Ex: The message that appears when you enter a wrong email-password combination

Additionally, the team must demonstrate that their sign in inputs are not hardcoded with values of admin@email.com and password.