Skip to content

Comments

Change Password and Edit Personal Info For Settings Page#339

Open
adityapat24 wants to merge 1 commit intomainfrom
309-dev---implement-finish-settings-page-designs
Open

Change Password and Edit Personal Info For Settings Page#339
adityapat24 wants to merge 1 commit intomainfrom
309-dev---implement-finish-settings-page-designs

Conversation

@adityapat24
Copy link
Contributor

ℹ️ Issue

Closes #309

📝 Description

Implemented new designs for change password and edit personal information on the sign up page

Briefly list the changes made to the code:

  1. Added new model for change password and re-used logic from sign up page to determine whether password was invalid
  2. Allowed user to edit personal information once edit button is clicked
  3. Fixed bug in sign up and change password with the eye (behavior was flipped)

✔️ Verification

Manual Testing on Frontend
image
image

🏕️ (Optional) Future Work / Notes

Needs connection to backend, right now using dummy info on frontend for edit personal information and does not do anything when save is clicked for changing password

@adityapat24 adityapat24 linked an issue Feb 24, 2026 that may be closed by this pull request
Copy link
Contributor

@janekamata janekamata left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have a few small fixes I think would be good to address

required
placeholder="Re-enter your password"
value={reEnterPassword}
onChange={(e) => setReEnterPassword(e.target.value)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you should add the passwords match as an error for this so that it's clear the form can't be submitted when the password don't match. It would be like what I did here: signup/login streamlining pr commit

{ label: "Email Address", value: "john.doe@gmail.com" },
]}
/>
{isEditingPersonalInfo ? (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For me, the edit info doesn't look right compared to the design. Maybe you're just missing the bg color? Here's what I see:

Image


function CloseIcon({ className }: { className?: string }) {
return (
<svg
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would recommend using react font awesome icons instead of this svg. There are examples in our code already like in DateFilter.tsx with faXmark

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DEV - Implement Finish Settings Page Designs

2 participants