Forgot password backend logic + frontend design #73

AbeerDas · 2024-10-22T17:35:55Z

Notion Ticket Link

Reset Password Page Design Implementation

NEW COMMIT DETAILS

Do the reset password thing but then after it should show a page with a button that counts down from 30 seconds, then sends another email when clicked again. This button should not be clickable before 30 seconds passes. The pages should look like this. Check login dev handoff page for more information if needed.

When clicked this should be the notification that shows up top-center:

I also fixed all the bugs listed by everyone on the thread (thanks everyone). Including the one about the hover showing colours for some of the buttons. Now no colour shows, the cursor just points.

I was thinking in the future we add standardization for the snackbar placement (top-center for all), snackbar colours (Gaurav says there would be three: Sucess, Error, and Info [e.g. the one in this example]). We should also have standardized fonts.

Also, I changed the bodySmall to 12.5px because we do not use 12px anywhere on our designs and having it be 12.5px is the variable that matches the figma designs and it would be better.

Implementation Description

This PR implements the design for the Reset Password page as specified in the Notion ticket. The functionality includes sending a reset link to the user's email and providing navigation options based on the user's authentication state.

Steps to Test

Logout: Run the frontend and backend and then ensure you are logged out
Navigate to http://localhost:3000/forgot-password.
- Expected Result: The page should load successfully.
- - Should be the same as the figma designs (shown below)

Enter the email you use to log in and click "Send reset link...".
- Expected Result: You should be redirected to a confirmation frame, and the confirmation message should display the email you just entered.
- - Should look the same as the figma designs (shown below)

4. Click "Not your email?".

Expected Result: You should be taken back to the previous page.

5. Click "Remember Your Password?".

Expected Result: You should be redirected back to the main page.

After logging in, navigate back to http://localhost:3000/forgot-password.
- Expected Result: You should be redirected to the Home Page, preventing access to the Forgot Password page while logged in.

Review Focus Areas

Code Standards: Since this is my first pull request, I would appreciate feedback on adherence to coding standards. Are there better practices for using variables/hooks?
Styling Format: Is the styling format applied in this PR acceptable for future implementations?
Backend Routes: Does the backend implementation for additional routes meet our standards and expectations?
Try catch block: ForgotPasswordPage line 34 I wrote setIsEmailSent(false) (little redundant), however I am not sure what else to put there so maybe look into that

Checklist

My PR title is descriptive and uses imperative tense.
My commit messages are clear, descriptive, and written in imperative tense. Commits are atomic, and trivial ones are squashed or fixed into more meaningful commits.
I have run the appropriate linter(s).
I have requested a review from the Product Lead and relevant developers who have context on this PR or will build upon it.

…into jeffrey/course-unit-view

carolynzhang18 · 2024-11-04T22:38:01Z

@AbeerDas Is the button colour supposed to become blue on hover, or should it be a darker green? I'm seeing this on hover right now:

I just wanna check with you that that's what was intended in the design :D

carolynzhang18

Great first PR!! 😎 Everything works as described and matches the design! 💪

I left a few comments - we can go over them at tonight's work sesh :D

Some general things:

There's a few linter errors - could you run ./scripts/run_linter (assuming you have Docker running - if not, you can run yarn fix under frontend/ and backend/)? You might need to resolve some of the linter complaints manually, but this should be quick :)
We have some theming set up for the app already - there are some styles you've hardcoded that we should be able to replace with things already in our theme :)

carolynzhang18 · 2024-11-04T22:47:52Z

frontend/src/APIClients/BaseAPIClient.ts

@@ -33,7 +33,7 @@ baseAPIClient.interceptors.request.use(async (config: AxiosRequestConfig) => {
        decodedToken.exp <= Math.round(new Date().getTime() / 1000))
    ) {
      const { data } = await axios.post(
-        `${process.env.REACT_APP_BACKEND_URL}/auth/refresh`,
+        `${process.env.REACT_APP_BACKEND_URL}auth/refresh`,


hmmmm this might break things 🤔
I have REACT_APP_BACKEND_URL="http://localhost:8080" as my env variable, which wouldn't pair well without the /

carolynzhang18 · 2024-11-04T22:52:15Z

package.json

+{
+  "devDependencies": {
+    "nodemon": "^3.1.7"
+  }
+}


was this file added by accident? :D

carolynzhang18 · 2024-11-04T23:05:38Z

frontend/src/App.tsx

+const link = document.createElement("link");
+link.href = "https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;600&display=swap";
+link.rel = "stylesheet";
+document.head.appendChild(link);
+
+const theme = createTheme({
+  typography: {
+    fontFamily: "'Lexend Deca', sans-serif",
+  },
+});


Design question - is Lexend Deca the only font used throughout our app?
If yes, I think it would be better to plop this theming into frontend/src/theme/theme.ts :)
If no... then we might need to get more creative lol

carolynzhang18 · 2024-11-04T23:27:46Z

frontend/src/App.tsx

+      <ThemeProvider theme={theme}>
+        <CssBaseline />


We have ThemeProvider in index.tsx that's grabbing the theme from frontend/src/theme/theme.ts already. It'd be best to only have this in one place, so adding onto my comment above - if we can put the new font in our existing theme, then we can use our existing theming!

ji-mmyliu

Looks and works great! After Carolyn's comments resolved and linter run, LGTM 🚀

jasondsouza35

looks great to me! everything works like it should so i think that's awesome!

one small thing i noticed, not really sure if it's important, but is nice for consistency. When you hover over the "Not your email...." link, the background of that is slightly highlighted but when you hover over the "Remember your password..." link, that's not the case. Take a look and let me know what you think. Besides that, there seems to be some github linting things coming up but i dont think that's a huge deal.

Awesome work abeer! 💯

…rint/extend-a-family into abeer/forgot-password

Astoriaaaa · 2024-11-07T19:44:13Z

Everything looks good to me. All functionalities work!! There was the issue with the background when hovering on the "send reset link to email" but I think Carolyn commented on that. Great work 🤩

carolynzhang18

WOOHOO SUPER DUPER AMAZING 🧑‍🍳🧑‍🍳🧑‍🍳

98ZhaoJeffrey and others added 5 commits October 7, 2024 21:56

add course unit sidebar

718228b

init commit

17697a2

added additional navigation

6260129

reset password now only sends when logged out

5329189

Added AlternateEmailIcon

e783755

AbeerDas requested a review from carolynzhang18 October 22, 2024 17:35

carolynzhang18 mentioned this pull request Oct 28, 2024

added new route for forgot password page #69

Closed

4 tasks

98ZhaoJeffrey added 2 commits October 30, 2024 20:51

minor fixes

e93a5a9

Merge branch 'main' of https://github.com/uwblueprint/extend-a-family …

8d13ebf

…into jeffrey/course-unit-view

carolynzhang18 requested review from ji-mmyliu and Astoriaaaa November 4, 2024 22:26

carolynzhang18 reviewed Nov 5, 2024

View reviewed changes

carolynzhang18 requested a review from jasondsouza35 November 5, 2024 01:21

ji-mmyliu approved these changes Nov 5, 2024

View reviewed changes

jasondsouza35 approved these changes Nov 5, 2024

View reviewed changes

AbeerDas added 3 commits November 4, 2024 22:30

implemented resend button

9b548f3

Merge branch 'jeffrey/course-unit-view' of https://github.com/uwbluep…

13e1960

…rint/extend-a-family into abeer/forgot-password

added standardized theme

085a1a0

added snackbar

02e239a

carolynzhang18 approved these changes Nov 11, 2024

View reviewed changes

AbeerDas merged commit 0c0d12d into main Nov 11, 2024
1 of 2 checks passed

AbeerDas deleted the abeer/forgot-password branch November 11, 2024 23:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Forgot password backend logic + frontend design #73

Forgot password backend logic + frontend design #73

AbeerDas commented Oct 22, 2024 •

edited

Loading

carolynzhang18 commented Nov 4, 2024

carolynzhang18 left a comment

carolynzhang18 Nov 4, 2024

carolynzhang18 Nov 4, 2024

carolynzhang18 Nov 4, 2024

carolynzhang18 Nov 4, 2024

ji-mmyliu left a comment

jasondsouza35 left a comment

Astoriaaaa commented Nov 7, 2024

carolynzhang18 left a comment

Forgot password backend logic + frontend design #73

Forgot password backend logic + frontend design #73

Conversation

AbeerDas commented Oct 22, 2024 • edited Loading

Notion Ticket Link

NEW COMMIT DETAILS

Implementation Description

Steps to Test

Review Focus Areas

Checklist

carolynzhang18 commented Nov 4, 2024

carolynzhang18 left a comment

Choose a reason for hiding this comment

carolynzhang18 Nov 4, 2024

Choose a reason for hiding this comment

carolynzhang18 Nov 4, 2024

Choose a reason for hiding this comment

carolynzhang18 Nov 4, 2024

Choose a reason for hiding this comment

carolynzhang18 Nov 4, 2024

Choose a reason for hiding this comment

ji-mmyliu left a comment

Choose a reason for hiding this comment

jasondsouza35 left a comment

Choose a reason for hiding this comment

Astoriaaaa commented Nov 7, 2024

carolynzhang18 left a comment

Choose a reason for hiding this comment

AbeerDas commented Oct 22, 2024 •

edited

Loading