Skip to content

Frontend Login Page + Components #87

@aaronashby

Description

@aaronashby

See Figma for more details (Mid-Fi, Login/auth section):
https://www.figma.com/design/Xlgn5mdVa3GEx8aw2z3QfL/FCC?node-id=1627-2075&t=ezc9fHahYQ5uQoa2-0

  • Implement the signup form frontend to match the latest Figma design. This includes layout, colors, typography, and spacing for all states. Use Tailwind + shadcn components (prioritize existing components) and other design system elements within our codebase.

  • Build the page, include the background

  • Build the password + confirm password fields with proper error states (e.g., “Passwords do not match”) as shown in Figma.

  • Reference the image below (BCAN's design, use as inspiration but use our colorscheme) for password completion checks (e.g., must contain at least 1 number, min length, etc.) and implement dynamic checkmarks/feedback while the user types.

  • No backend changes; just wire up basic client-side validation and UI behavior.

Reference

Image

Notes

If design changes, it will likely only be for the password completion checks and be very subtle, we can loop back.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions