Move change password feature to a new tab

[srish]

@NdibeRaymond raised an important point here #968 (comment) about why the change password feature should not be available on the edit profile page but on a different tab related to account settings.

So, this issue is about designing the new account settings tab. The "Account settings" menu option can be added on the user sidebar above the logout option. Upon clicking the account settings menu, it should open the change password form.

Ideally, we have a UX design for this feature first before the implementation step.

[mehreeee]

Hi @srish like I suggested in #904, we can add a settings button to the side navigation panel for this feature. Here are my suggestions, let me know what you think

[DonPresh]

@mehreeee nice designs.
However, the button in your first iteration looks greyed out and unclickable.
Still can't view the second one yet.

[mehreeee]

@mehreeee nice designs. However, the button in your first iteration looks greyed out and unclickable. Still can't view the second one yet.

Thank you Presh. Sorry that was a mistake. I've rectified it now

[DonPresh]

@mehreeee nice designs. However, the button in your first iteration looks greyed out and unclickable. Still can't view the second one yet.

Thank you Presh. Sorry that was a mistake. I've rectified it now

This looks better. Good job!

[DonPresh]

@mehree and @srish These are the different ways i feel we could solve this problem

First suggestion:

Second suggestion:

Third suggestion

The Visual designs are still going to be worked on. Pls review. Thank you.

[Dumzy006]

Nice work @mehreeee @DonPresh

To add to what you guys have designed, on the change password page , I feel a forgot password link should be beneath the current password input field for users that can't remember their current password and wants to change it. When they click on it, they are redirected to a "Password Reset" page where they are prompted to enter their email address. After entering their email, they should receive a confirmation message indicating that a password reset link has been sent to their email.

For the change password, I came up with suggestions that shows you the password strength as you type your new password, a real-time password strength indicator. This indicator displays the password's strength as users type their new password, providing immediate feedback on password security it also enhances user awareness and encourages the creation of stronger and more secure passwords.

See screenshot below @srish

Used red to represent weak

Used green to represent strong

[mehreeee]

@mehree and @srish These are the different ways i feel we could solve this problem

First suggestion:

Second suggestion:

Third suggestion

The Visual designs are still going to be worked on. Pls review. Thank you.

Nice design @DonPresh

[mehreeee]

Nice work @mehreeee @DonPresh

To add to what you guys have designed, on the change password page , I feel a forgot password link should be beneath the current password input field for users that can't remember their current password and wants to change it. When they click on it, they are redirected to a "Password Reset" page where they are prompted to enter their email address. After entering their email, they should receive a confirmation message indicating that a password reset link has been sent to their email.

For the change password, I came up with suggestions that shows you the password strength as you type your new password, a real-time password strength indicator. This indicator displays the password strength as users type their new password.

See screenshot below @srish

Used red to represent weak

Used green to represent strong

Nice work @Dumzy006 funny I just thought about the same this morning. I've been iterating since last night. Well done.

[DonPresh]

Nice work guys @Dumzy006 @mehreeee .
I like the use of green to indicate strength and weakness

[aqsaaqeel]

I love the design @Dumzy006 but can we have "Password too short" as indicators instead of weak, as it is more understandable for young users

[DonPresh]

I love the design @Dumzy006 but can we have "Password too short" as indicators instead of weak, as it is more understandable for young users

@aqsaaqeel what about a situation where the password is actually weak? I agree with re-wording for our young users but if it's weak, they should also know it's weak and have indicators for when their password is strong as @Dumzy006 has already shown.

[Marhiposa]

Nice work guys @mehreeee @DonPresh @Dumzy006

[mehreeee]

Nice work guys @mehreeee @DonPresh @Dumzy006

Thank you 🙏

[brrkrmn]

great job @Dumzy006 @DonPresh @mehreeee 👏🏻
Are we going to show a link to the 'change password' page in the edit profile as suggested here? #968 (comment)

[mehreeee]

great job @Dumzy006 @DonPresh @mehreeee 👏🏻 Are we going to show a link to the 'change password' page in the edit profile as suggested here? #968 (comment)

Thank you @brrkrmn I don't think there's a need to put a link to change password in the edit profile page, rather it should be on the change password page. That's why I removed the 'current password' form field from the edit profile page on the last frame of my design here #984 (comment).

[brrkrmn]

oh got it @mehreeee thanks. Guess I missed this last frame, looks great

[roznaj]

Hi, @srish
Amazing ideas and design as always guys 🚀, I am glad @mehreeee mentioned password requirements and meter.

I want to note that, there should be some consistency throughout the site, that is if we iterate on the design/UX of the change password we should not forget at the level of Registration.
Also, Zubhub already has some sort of a "strength meter". It starts with the password being too short and then later when I am about to create an account I am told I can't create an account because the password is too weak.
It is an issue I was thinking about opening but I thought it would be considered a minor issue and never submitted it. Can I create an issue for that?

Talking about the account settings:

1. When the user clicks on the edit profile, it can be redirected to the account settings tab. There the user can see everything about the account like profile, password and option to delete the account.

2. Or just move juts the password and that ability to delete the account

Talking about password validation rules:

[aqsaaqeel]

I love the design @Dumzy006 but can we have "Password too short" as indicators instead of weak, as it is more understandable for young users

@aqsaaqeel what about a situation where the password is actually weak? I agree with re-wording for our young users but if it's weak, they should also know it's weak and have indicators for when their password is strong as @Dumzy006 has already shown.

Currently, we only want to show validation for when a password length > 8 to avoid complexity. So having one warning message should work.

cc: @srish @tuxology

[coderatomy]

Nice work @roznaj. We shall consider a few of those to display, just to keep the design simpler

[srish]

Thanks everyone for your collaboration on this task!

Let's go with @roznaj's first design here #984 (comment).

The edit button would need to be removed from profile page accordingly. And, let's have "Settings" menu option right above logout option in the sidebar.

Dev taking up ensure that design elements remain consistent with current components such as radius, color scheme, size, etc.

[aqsaaqeel]

Working on this.

[coderatomy]

hey @aqsaaqeel, please look up at the linked PR.

[aqsaaqeel]

hey @aqsaaqeel, please look up at the linked PR.

There is none

[aqsaaqeel]

@roznaj can you share the figma file of your design