Add the ability to change password from edit profile form

[mehreeee]

There is no option for users to be able to change passwords. If the user needs to change the password, they should do it by entering old and new passwords… then the dev can perform a check. I suggest there should be another page or feature for users to be able to change passwords.

[Boluwatifey1]

Hi @mehreeee i discovered that too and i made a design for it but it was closed by @srish

i added a change icon field beside the old password

[aqsaaqeel]

There is no option for users to be able to change passwords. If the user needs to change the password, they should do it by entering old and new passwords… then the dev can perform a check. I suggest there should be another page or feature for users to be able to change passwords.

hey @mehreeee I think there used to be a change password feature but was removed, not sure about it you can check with mentors. But the basic idea behind not having a change password feature is that the average age of our users is very young. So, our main goal is to make it very simple for them to use. Right now, they can view their current password so that takes away the need to be able to change the password. Hope this makes sense!

cc: @srish @tuxology

[coderatomy]

Support for this is in place both backend and frontend. The only limitation is here. I think this can't stop designers from working on the issue. Let's just make everything ready.

[mehreeee]

There is no option for users to be able to change passwords. If the user needs to change the password, they should do it by entering old and new passwords… then the dev can perform a check. I suggest there should be another page or feature for users to be able to change passwords.

hey @mehreeee I think there used to be a change password feature but was removed, not sure about it you can check with mentors. But the basic idea behind not having a change password feature is that the average age of our users is very young. So, our main goal is to make it very simple for them to use. Right now, they can view their current password so that takes away the need to be able to change the password. Hope this makes sense!

cc: @srish @tuxology

Yeah I understand what you mean, but it's also important to consider that parents or guardians may set up accounts for their children, and providing the ability to change passwords can give them a sense of ownership and security over their accounts.

[mehreeee]

Hi @srish @coderatomy Here is a mockup of what I am proposing.

I've incorporated a settings button on the side panel to address this issue. When clicked, it unveils a panel allowing users to monitor the number of devices logged into the same account. For instance, if a child has multiple iPads or tablets, parents can easily keep tabs. Additionally, if there's a need to change the password, or update a phone number or email, this feature handles it seamlessly. Keep in mind, this is just a mockup, so other elements can be included or removed as needed. A feedback would be appreciated. Thank you.

[coderatomy]

Yeah! This looks good. Nice work @mehreeee. Just one thing. Will this mean that will this mean that editting profile will be moved to here?

[mehreeee]

Yeah! This looks good. Nice work @mehreeee. Just one thing. Will this mean that will this mean that editting profile will be moved to here?

Yeah that is what I’m suggesting. Since we’re using Reddit’s model that allows users to remain anonymous to an extent, I would have suggested that if we click on the profile avatar, Users should only be able to change their profile picture.

[srish]

Yes, https://github.com/unstructuredstudio/zubhub/issues/904#issuecomment-1762934593 makes sense. Some minor suggestions: Instead of "new password" say "change password". Beneath current password add a text "Forgot Password?" and link it to the reset password route.

[coderatomy]

Nice. Taking over

[mehreeee]

Hi @srish @coderatomy this is what I came up with. The forgot password text is a clickable link to reset the password I also added another field for users to retype new passwords. This is good UX because it helps confirm that the user intended to choose a specific password. This prevents accidental typos or mistakes that could result in a forgotten password later. The act of typing the password twice reinforces the memory of the new password. This can help users remember their password more easily, especially if it's a complex one.

The "Retype New Password" field should pop up when the "Change Password" field is selected.

[Boluwatifey1]

Hi @srish @coderatomy this is what I came up with. The forgot password text is a clickable link to reset the password I also added another field for users to retype new passwords. This is good UX because it helps confirm that the user intended to choose a specific password. This prevents accidental typos or mistakes that could result in a forgotten password later. The act of typing the password twice reinforces the memory of the new password. This can help users remember their password more easily, especially if it's a complex one.

this is a nice design, i like the fact that user can retype their password for confirmation

[mehreeee]

Hi @srish @coderatomy this is what I came up with. The forgot password text is a clickable link to reset the password I also added another field for users to retype new passwords. This is good UX because it helps confirm that the user intended to choose a specific password. This prevents accidental typos or mistakes that could result in a forgotten password later. The act of typing the password twice reinforces the memory of the new password. This can help users remember their password more easily, especially if it's a complex one.

this is a nice design, i like the fact that user can retype their password for confirmation

Thank you @Boluwatifey1

[Boluwatifey1]

I and @julietmadu made a similar design for issue #837 but it was closed because they did not want user to be able to edit their profile picture ,we also made a change password field but the retype password field is actually a better idea

[yokwejuste]

Hi @mehreeee i discovered that too and i made a design for it but it was closed by @srish

i added a change icon field beside the old password

I think we need a separate edit for the password not mixed up with other updates.

[yokwejuste]

Hi @srish @coderatomy Here is a mockup of what I am proposing.

I've incorporated a settings button on the side panel to address this issue. When clicked, it unveils a panel allowing users to monitor the number of devices logged into the same account. For instance, if a child has multiple iPads or tablets, parents can easily keep tabs. Additionally, if there's a need to change the password, or update a phone number or email, this feature handles it seamlessly. Keep in mind, this is just a mockup, so other elements can be included or removed as needed. A feedback would be appreciated. Thank you.

Great job @mehreeee,

I love it, but some questions:

• Why the 2FA?
• The connected are the devices we signed in to? I don't think this is a priority for now, since implementing this will be a little complex and we will need an email service which we don't yet have.
• I guess you mean change email or phone number, focusing on the UX the change should be one after another

[mehreeee]

Hi @srish @coderatomy this is what I came up with. The forgot password text is a clickable link to reset the password I also added another field for users to retype new passwords. This is good UX because it helps confirm that the user intended to choose a specific password. This prevents accidental typos or mistakes that could result in a forgotten password later. The act of typing the password twice reinforces the memory of the new password. This can help users remember their password more easily, especially if it's a complex one.

this is a nice design, i like the fact that user can retype their password for confirmation

Thank you @Boluwatifey1

Hi @yokwejuste I made changes to the design and implemented what @srish said here https://github.com/unstructuredstudio/zubhub/issues/904#issuecomment-1765470583

[mehreeee]

Hi @srish @coderatomy Here is a mockup of what I am proposing. I've incorporated a settings button on the side panel to address this issue. When clicked, it unveils a panel allowing users to monitor the number of devices logged into the same account. For instance, if a child has multiple iPads or tablets, parents can easily keep tabs. Additionally, if there's a need to change the password, or update a phone number or email, this feature handles it seamlessly. Keep in mind, this is just a mockup, so other elements can be included or removed as needed. A feedback would be appreciated. Thank you.

Great job @mehreeee,

I love it, but some questions:

• Why the 2FA?
• The connected are the devices we signed in to? I don't think this is a priority for now, since implementing this will be a little complex and we will need an email service which we don't yet have.
• I guess you mean change email or phone number, focusing on the UX the change should be one after another

I understand the complexity. They were just mockups of what I felt the UX should be. The main idea was a separate page for changing passwords, emails, and phone numbers. I guess they can fit on the same page for now and focus on the more important things.

[yokwejuste]

Yes, #904 (comment) makes sense. Some minor suggestions: Instead of "new password" say "change password". Beneath current password add a text "Forgot Password?" and link it to the reset password route.

@srish @tuxology I'm suggesting we should go in for a page for Password change and one for user updates. This will also be different endpoints on the backend for updates and password change.

[mehreeee]

Yes, #904 (comment) makes sense. Some minor suggestions: Instead of "new password" say "change password". Beneath current password add a text "Forgot Password?" and link it to the reset password route.

@srish @tuxology I'm suggesting we should go in for a page for Password change and one for user updates. This will also be different endpoints on the backend for updates and password change.

I agree. This is the point I've been trying to explain. We can take out the 2FA, Connected devices and email setups for now.

[DonPresh]

Hi @srish @coderatomy this is what I came up with. The forgot password text is a clickable link to reset the password I also added another field for users to retype new passwords. This is good UX because it helps confirm that the user intended to choose a specific password. This prevents accidental typos or mistakes that could result in a forgotten password later. The act of typing the password twice reinforces the memory of the new password. This can help users remember their password more easily, especially if it's a complex one.

this is a nice design, i like the fact that user can retype their password for confirmation

Thank you @Boluwatifey1

Hi @yokwejuste I made changes to the design and implemented what @srish said here #904 (comment)

@mehreeee I like this. Just a few corrections I think you should make: -The part where you said "Tell us something fun" should be inside the text box (I'm imagining that description is for the bio textbox) -"Forgot password" should be directed under "current password" text box so it's clear to users that, the action required is directed linked to "current password" -Just a UI observation, Make your spacing consistent.

Other than these corrections, love your designs.

[mehreeee]

Hi @srish @coderatomy this is what I came up with. The forgot password text is a clickable link to reset the password I also added another field for users to retype new passwords. This is good UX because it helps confirm that the user intended to choose a specific password. This prevents accidental typos or mistakes that could result in a forgotten password later. The act of typing the password twice reinforces the memory of the new password. This can help users remember their password more easily, especially if it's a complex one.

this is a nice design, i like the fact that user can retype their password for confirmation

Thank you @Boluwatifey1

Hi @yokwejuste I made changes to the design and implemented what @srish said here #904 (comment)

@mehreeee I like this. Just a few corrections I think you should make: -The part where you said "Tell us something fun" should be inside the text box (I'm imagining that description is for the bio textbox) -"Forgot password" should be directed under "current password" text box so it's clear to users that, the action required is directed linked to "current password" -Just a UI observation, Make your spacing consistent.

Other than these corrections, love your designs.

Thank you @DonPresh I have effected the corrections.

Quick question does the "forgot password" text look better directly under the current password text box or at the end of the text box?

[DonPresh]

@mehreeee end of text box

[coderatomy]

Hey @srish @yokwejuste @DonPresh @mehreeee. I still have one doubt here that maybe you can help me solve. I saw we have support for changing password from /password-reset password-reset-confirm. Does this mean we are completely shifting from that? If yes, then what will become of it?

[mehreeee]

Hey @srish @yokwejuste @DonPresh @mehreeee. I still have one doubt here that maybe you can help me solve. I saw we have support for changing password from /password-reset password-reset-confirm. Does this mean we are completely shifting from that? If not, then what will become of it?

I'm not sure I understand your question.

[yokwejuste]

Hey @srish @yokwejuste @DonPresh @mehreeee. I still have one doubt here that maybe you can help me solve. I saw we have support for changing password from /password-reset password-reset-confirm. Does this mean we are completely shifting from that? If yes, then what will become of it?

Hey @coderatomy is that on the frontend or backend ?

[srish]

Let's go with the design implemented by @mehreeee and @Boluwatifey1 one in which there is an option to retype password too https://github.com/unstructuredstudio/zubhub/issues/904#issuecomment-1765843102

[coderatomy]

Hey @mehreeee. Can you share the figma link for your mock up

[mehreeee]

Hey @mehreeee. Can you share the figma link for your mock up

Sure here's the Figma link https://www.figma.com/file/55Wfr1bOEevZHlAu1DLzkv/Edit-profile-(Copy)?type=design&node-id=0%3A1&mode=design&t=xnFb5TurQjULxKRO-1

[JulietMadu]

@coderatomy does it automatically update for mobile too? If no , I can work on the mobile version @srish

[coderatomy]

You can just take over with this @JulietMadu, if that's fine with you