TEAM 2 - Sign-in page development

[panchi64]

The sign-in page combines two UI forms: the Login and the Sign-up.

The Sign-Up and login are expected to be on the same page, with the ability to switch between them. The idea is to containerize the code into their respective parts by separating the Sign-Up and Login components into their own js file and tying them all together in a file that contains the logic for hiding and showing said components.

Sign Up involves validating user information and sending a request to create an account, while Login verifies existing credentials to grant access to the app. They are distinct components but are found on the same page.

User Interface: A tab switcher at the top of the Login/Sign Up components could be beneficial, allowing users to choose between registering and logging in. The UI should hide/show the relevant fields based on the selected tab. The Login component should also have a “link” to the sign-up component below the button that requests a login, in case the user doesn’t notice the tabs but does notice the “Sign-Up link” (basically as a redundancy method).

UI Design:

• The Login component should have fields for:
  • email
  • password
  • error popup
  • login button
  • link to redirect to the Sign-Up component
• The signup component should have fields for:
  • email
  • first name
  • last name
  • password
  • password confirmation
  • error popup

Workflow: When entering the app, the default view is Sign In. If users don't have credentials, they can click "Create Account" or the Sign-Up tab to be shown the sign-up component.

The Login and Sign-In components should focus on their respective fields and buttons. The tab selector should change according to the selected tab.

Code Reusability: By combining the components and not their full code, there is better control/legibility over when and how they are displayed, not needing to deal with boilerplate code.

An example of how this could look:

[Jonathan-Rod]

• [x] The Login component should have fields for:

  • [x] email
  • [x] password
  • [x] error popup
  • [x] login submit button
  • [x] link to redirect to the Sign-Up component

• [x] The signup component should have fields for:

  • [x] email
  • [x] first name
  • [x] last name
  • [x] password
  • [x] password confirmation
  • [x] error popup
  • [x] signup submit button
  • [x] link to redirect to the login component