DESIGN - Settings Page

[alexbhchoi]

Title
Settings Page

Context/Motivation
The purpose of this ticket is to implement a Settings Page that allows users to make edits to their profile once their account is already set up. This page will store the option for users to upload a profile photo, as this is not a mandatory step in the Login Page. We want to keep this page simple and intuitive. Think of this ticket as an extension/build off of your “Settings_v1” prototype in the Figma. With that, you will have to model all flows and make it a hi-fi.

Scope

1. Profile Picture
   -- Profile picture display
   -- Upload Image button
   -- Remove button
   -- Text to explain upload restraints
   -- After uploading profile picture → pop-up preview panel
   ---- Show cropped image (circle)
   ---- Save button
   ---- Remove button
   ---- Update the profile preview component in the settings page
2. Fields
   -- First name
   -- Last name
   -- Email address
   -- Save changes button (only appears after fields are changed)
   -- Discard changes button (only appears after fields are changed)
   -- Password (hidden with dots or stars by default)
   -- Change password button
   -- After clicking change password → pop-up panel
   ------- Enter current password
   ------- Enter new password
   ------------ Show password credentials
   ------- Confirm new password
   ------------ Show password credentials
   ------- Save changes
   ------- RYAN — if you think there is a better way to implement this, go for it.

Acceptance Criteria

• User can upload, preview, and save or remove a profile photo.
• User can edit their name, email, and password.
• Inline validation is shown for invalid email formats, empty names, empty passwords/passwords with missing components
• Loading and error states are defined for photo upload
• There is a placeholder profile picture when there is no image uploaded.

Priority
HIGH (easy ticket)

References:
Settings_v1 in Figma File