Forget password option throws 404 error.

[khallow7]

Issue When I try to forget my password, it just throws a 404-error page.

To Reproduce Steps to reproduce the behavior:

1. Go to sign in page
2. Click on forget password option
3. See error

Expected behavior It should open page for forget password, so people can reset their password.

Screenshots

[mark-eke]

@srish can i work on this task?

[mehreeee]

Hello @srish can I work with @mark-eke on this task? I have a few ideas that could work

[mehreeee]

@mark-eke just saw that this task has been assigned to you. Can I join in?

[fiddyhamma]

hello @mark-eke do you have a visual design on what the page for a forgot password should look like? We can work on this together if you don't mind

[fiddyhamma]

Here's a simple UI design I can create but maintaining the style guide for zubhub link to design on dribble https://dribbble.com/shots/5451490-Forgot-Password-UI-Design# @mark-eke @khallow7 what do you think?

[Mbeute23]

Hello @fiddyhamma and @mark-eke Greetings. I just joint today and its now am succeeding to joint a contribution to fixed am issue and i saw that this was one of the priority . Can we work together to fixed the issues?

[jumokeadeoyo]

Hi, i would love to create a design for the forget password page to make it easier for the devs. Can i work on this task @srish

[ladyami]

I've been a User for many years before I became a designer, and I've seen firsthand how frustrating it can be to forget your password. You're trying to get something done, but you're stuck behind a screen that won't let you in. It's enough to make anyone scream. That's why I was so Interested in this task and excited when I saw the task to design a new forget password screen. I wanted to create something easy to use and intuitive so that people could get back to their lives as quickly as possible.

Design:

I decided to redesign the password recovery screen as a step-by-step process. By dividing the process into three screens, users can focus on one task at a time, reducing confusion and frustration.

1. Enter your email address or phone number. This is the most important step because it's how we'll be able to identify a User account and send the user a password reset code.

2. Enter the code sent to your email or phone. This is a security measure to make sure that only the rightful account owner can reset the password.

3. Create a new password. This is the user's chance to create a new password that's strong and secure.

Conclusion:

The forgotten password screen was created to be both user-friendly and secure. It was designed to ensure that only the rightful owner of the account can reset their password. Each screen contains clear and concise instructions to guide users through the process. This design is user-centric, secure and thoughtful. Its goal is to improve people's efficiency and simplify their lives.

https://www.figma.com/file/chyDOPhWpfcVIXd3JmBNqL/Zubhub-forget-password?type=design&node-id=0%3A1&mode=design&t=8M1t4tDKsNwfd1MA-1

@srish What is your opinion on the design, and how can a designer know if a design is approved?

[PascalAnuche]

I was able to come up with an idea regarding the "forgot password" feature. I followed a due step in ensuring that users are able to reset their password without running into problems.

For the process a user needs to reset their password, when they click on the forgot password feature on the login page

I) It will link them to a page where they'd need to enter the email they used in registering for their account with Zubhub.

ii) As they have entered their email and clicked on the CTA button, a reset code will be sent to their email which they use to reset a new password

iii) They will be able to input the new code that has been sent to their email and update their password. When they've done so, their password will automatically be updated

iv) As they've updated their password, a successful modal will pop up to notify the users that their password is successfully updated, and they can click on the CTA button to go back to the login page.

I ensured that the users had a seamless experience, secure and the designs visually appealling when updating their passwords.

CC: @srish

[KramStyles]

hello @mark-eke do you have a visual design on what the page for a forgot password should look like? We can work on this together if you don't mind

I believe there's an existing forgot password page. I need to find the problem and reconnect it back.

[KramStyles]

@mark-eke just saw that this task has been assigned to you. Can I join in?

Would be great. Are you a dev or a designer?

[benndip]

Hello @srish and @tuxology I have opened a PR here: https://github.com/unstructuredstudio/zubhub/pull/780 that fixes this issue.

Actually, the screens were already designed, I just had to dig deep into the code and connect them. But since we didn't know that the screens were already coded, new screens were designed here:https://www.figma.com/file/dmqEyKOYzc6hA7G4MoWDrs/Zubhub-Design-Contributions?type=design&node-id=0-1&mode=design&t=VCx9mrkjPVgExcvX-0 by Stephanie Uzoukwu on Figma which I wanted to follow.

But I didn't follow it anymore once I found out that the screens were already coded some time ago.

@khallow7 Please can Stephanie Uzoukwu and I improve more on the Figma designs that she did? So that I adjust what the old developer did to fit what she has done ??

[aqsaaqeel]

Hello @srish and @tuxology I have opened a PR here: https://github.com/unstructuredstudio/zubhub/pull/780 that fixes this issue.

Actually, the screens were already designed, I just had to dig deep into the code and connect them. But since we didn't know that the screens were already coded, new screens were designed here:https://www.figma.com/file/dmqEyKOYzc6hA7G4MoWDrs/Zubhub-Design-Contributions?type=design&node-id=0-1&mode=design&t=VCx9mrkjPVgExcvX-0 by Stephanie Uzoukwu on Figma which I wanted to follow.

But I didn't follow it anymore once I found out that the screens were already coded some time ago.

@khallow7 Please can Stephanie Uzoukwu and I improve more on the Figma designs that she did? So that I adjust what the old developer did to fit what she has done ??

Nice catch @benndip I also went through the entire issue but when I went through the code I found that the pages and the flow for the forgot password are already implemented. We just need to make it so that the user can reset their password

[Mbeute23]

I Came up with some design ideas regarding the "forgot password" issue. I came up with some steps which will guide the user to be able to reset his or her password whenever they forgot it.

I got 6 detail steps which is mainly a 3 steps but i decided to break it more detaily.

1. Click on Log in to login to your account.

2. Click on forgot password button which will direct the user to enter their email address then click verify email address.

3. A page to input the verification code will come telling the user to input the code sent to their email.

4. A page showing how the user has inputed the the code sent to their email.

5. Clicking on verify code button will direct the user to reset password which they will input their new password and confirm it.

6. Lastly, clicking on reset password button will direct the user to a page telling them they have successfully change their password so they can click on the sign in button to log in.

Each steps show a clear understanding of the flow which is user-friendly and guide the user through the process which is visually appealing.

https://www.figma.com/file/ByALA1tM5mTZCfLz5Kr3Ko/Outreachy-Zubhub-Design-(Contribution-to-issues)?type=design&node-id=0%3A1&mode=design&t=gVeqFKvNWKvuYr6x-1 Here is the figma file to the main design for the developer who will like to implement the design.

@srish pls what do you think about the design?