Create password page #95

AbeerDas · 2025-02-04T01:33:42Z

Notion Ticket Link

Create Password Design Implementation

Figma File

Implementation Description

Confirmed with Carolyn that the backend logic is already handled, so this PR focuses solely on design implementation.
Implemented the designs for the Create Password page and the Confirmation page.
- These are the pages respectively:

Added the Help Modal specifically for the "Learner" role.
- This is the button:

These are the modals:

Added new requirements and checks since the creation of the ticket:
- An eye icon to toggle password visibility.
- An additional condition to ensure the Confirm Password matches the initial password.
Updated button hover colors used to be lighter colours, now it should be the darker

Steps to Test

Log in as a Learner (You can confirm you are a learner because the new homepage navbar changes based on your user type)
Navigate to /create-password.
Test the password conditions:
- Ensure the cross icon changes to a checkmark as each condition is met (e.g., 8 characters, one uppercase letter, etc.).
Verify that button colors match the role (e.g., blue for Learners).
Open the Help Modal and compare it to the Figma designs.
Double-check button colors on the modal.
Click Next to proceed to the Confirmation Page.
Go back and create a password that meets all conditions.
Confirm that the Confirmation Page appears after successful password creation.
Log in as an Admin (check if homepage navbar colour is orange)
Verify that the button color is dark orange.
Ensure the Help Button does not appear for Admins.
Test all functionality as an Admin (since the code is shared, it should behave the same as for Learners).
If everything works as expected, then we are chilling

What should reviewers focus on?

The coded designs were reviewed by Gaurav very quickly so more than that we are mainly focused on the code
*** * Is the code formatted proeprly? Let us know where additional changes could be made

Checklist

My PR name is descriptive and in imperative tense
My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
I have run the appropriate linter(s)
I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

…the border for what problem are you facing

github-actions · 2025-02-04T01:36:16Z

Visit the preview URL for this PR (updated for commit c85b5c2):

https://extendafamily-7613e--pr95-create-password-page-wlip7tb8.web.app

_{(expires Sun, 16 Feb 2025 04:23:09 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: f8bb7b5cd838ab636347dc54fd0ab08ab3715d31}

carolynzhang18 · 2025-02-05T07:56:36Z

changing the colours for Hover in theme.ts breaks the Hover colours used elsewhere (which match the specs in the figma file) :O

from what I see in our colour palette, the ordering from lightest to darkest is Light < Hover < Default < Pressed... I'm thinking we'll want to use Pressed to achieve a darker colour for the hover effect.

we should confirm the palette with Gaurav again :D

carolynzhang18

SUPER AMAZING WORK EVERYTHING WORKS WELL!!! 🧑‍🍳🧑‍🍳

I left a few minor comments :D A summary of the more important ones:

If a user is on the Create Password Page, this means they are a newly invited Admin or Learner that just logged in for the first time. So, after creating their password, they can be sent directly to the HOME_PAGE.
The original functionality in the onSubmitNewPasswordClick event handler of the Create Password Page needs to be kept! This ensures the user's new password actually makes it to our backend, etc. Could the previous logic be restored?

We can discuss more at the work session if needed :)

frontend/package-lock.json

carolynzhang18 · 2025-02-05T07:30:31Z

frontend/src/components/images/logo.svg

there's a similar image frontend/src/assets/logoColoured.png already! would it be possible to use that instead?

carolynzhang18 · 2025-02-05T08:05:51Z

frontend/src/theme/theme.ts

    Light: "#F5FDFF",
-    Hover: "#CCF5FF",
+    Hover: "#005566",
    Default: "#006877",
    Pressed: "#00363F",


we probably want to keep these colours as is and just use the Pressed variant as the darker shade? this might be a Gaurav question :)

carolynzhang18 · 2025-02-05T08:25:13Z

frontend/src/createAdminAccount.ts

I'm guessing this file is for testing? 😃
I should have mentioned in the ticket there are /inviteLearner and /inviteAdmin routes available for you to invite new users - my bad!
what you have here works too, just remember to remove it before merging :))

frontend/src/components/pages/CreatePasswordConfirmationPage.tsx

carolynzhang18 · 2025-02-05T08:55:17Z

frontend/src/components/auth/PasswordCheck.tsx

+  useEffect(() => {
+    validatePassword(newPassword);
+  }, [newPassword]);
+
+  useEffect(() => {
+    const passwordsMatch =
+      newPassword === confirmPassword && newPassword.trim() !== "";
+
+    setPasswordCriteria((prev) => ({
+      ...prev,
+      passwordsMatch,
+    }));
+
+    const isValid =
+      passwordCriteria.minLength &&
+      passwordCriteria.uppercase &&
+      passwordCriteria.lowercase &&
+      passwordCriteria.specialChar &&
+      passwordsMatch;
+
+    onValidationChange(isValid);
+  }, [newPassword, confirmPassword, passwordCriteria, onValidationChange]);


nit: instead of having these as useEffects, you can move the logic in each into its own event handler:
function handleNewPasswordChange(newPassword) { ... }
function handleConfirmPasswordChange(confirmPassword) { ... }

and fire these in the onChange event of the respective input fields
(I can show you what I mean at the next work session if this doesn't make sense!)

functionality-wise shouldn't make a difference, but I believe it's better practice to use event handlers instead of useEffects when possible - https://react.dev/learn/keeping-components-pure#recap

carolynzhang18 · 2025-02-05T09:07:58Z

frontend/src/components/pages/CreatePasswordPage.tsx

-  const onSubmitNewPasswordClick = async () => {
-    const changePasswordSuccess = await AuthAPIClient.updateTemporaryPassword(
-      authenticatedUser.email,
-      newPassword,
-      authenticatedUser.role,
-    );
-    if (!changePasswordSuccess) {
-      setAuthenticatedUser(null);
-      localStorage.removeItem(AUTHENTICATED_USER_KEY);
-      await AuthAPIClient.logout(authenticatedUser.id);
+  const theme = useTheme();

-      // change this later to not use an alert
+  const onSubmitNewPasswordClick = () => {
+    if (isFormValid) {
+      setIsPasswordConfirmed(true);
+    } else {
      // eslint-disable-next-line no-alert
-      alert("Error occurred when changing your password. Please log in again.");
-      return;
+      alert("Passwords do not match or do not meet the criteria.");
    }
+  };

-    const updateStatusSuccess = await AuthAPIClient.updateUserStatus("Active");
-    if (!updateStatusSuccess) {
-      // change this later to not use an alert
-      // eslint-disable-next-line no-alert
-      alert('Failed to update user status to "Active"');
-      return;
-    }
+  const handleOpenHelpModal = () => setIsHelpModalOpen(true);
+  const handleCloseHelpModal = () => setIsHelpModalOpen(false);

-    setAuthenticatedUser({
-      ...authenticatedUser,
-      status: "Active",
-    });


we should keep the existing logic in onSubmitNewPasswordClick (the red stuff above that was deleted) - this includes the API calls to update the user's password + to update the user's status + to update the authenticatedUser that we need to make the update work :)

carolynzhang18 · 2025-02-05T09:10:56Z

frontend/src/components/pages/CreatePasswordPage.tsx

+            variant="headlineLarge"
+            gutterBottom
+            sx={{
+              fontWeight: theme.typography.headlineLarge?.fontWeight,


this line is likely redundant - variant="headlineLarge" should plop the entire style definition, including the fontWeight, of headlineLarge

carolynzhang18 · 2025-02-05T09:18:46Z

frontend/src/components/help/CreatePasswordHelpModal.tsx

+              fontSize: theme.typography.headlineMedium.fontSize,
+              fontStyle: "normal",
+              fontWeight: theme.typography.headlineMedium.fontWeight,
+              lineHeight: theme.typography.headlineMedium.lineHeight,


you can do <Typography variant="headlineMedium" ... and you won't need to write out each of these as styles separately :)

jasondsouza35 · 2025-02-09T04:22:00Z

frontend/src/components/pages/CreatePasswordConfirmationPage.tsx

+  const history = useHistory();
+  const theme = useTheme();
+  const handleBackToHome = () => {
+    user.status = "Active";


need to change the user's status on the database itself to active because it'll just stay as invited :(

AbeerDas and others added 11 commits November 18, 2024 21:17

init commit

3cf2562

added frontend pages + modals

5759ff1

Created separate component for password check

7477a0d

added an eye icon to show/hide password and changed the text size in …

16393e7

…the border for what problem are you facing

added new themes and made designs more consistent

ffef2b5

main merge commits

f4f03f0

added theme.ts styling and fixed file typo

0469489

fixed eslint errors

7128275

changed to palette colours

0301ea8

changed all hover states for colours

0954d6c

added user based themes for the button colours

6637e98

AbeerDas assigned AbeerDas and jasondsouza35 Feb 4, 2025

Prevent active users from accessing create password page + linter

b3c0a98

carolynzhang18 force-pushed the create-password-page branch from 504d372 to b3c0a98 Compare February 5, 2025 09:02

carolynzhang18 reviewed Feb 5, 2025

View reviewed changes

carolynzhang18 requested a review from ji-mmyliu February 5, 2025 09:28

got rid of an uncessary file and made the user redirect to the home page

c85b5c2

jasondsouza35 reviewed Feb 9, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create password page #95

Create password page #95

AbeerDas commented Feb 4, 2025 •

edited

Loading

github-actions bot commented Feb 4, 2025 •

edited

Loading

carolynzhang18 commented Feb 5, 2025

carolynzhang18 left a comment •

edited

Loading

carolynzhang18 Feb 5, 2025

carolynzhang18 Feb 5, 2025

carolynzhang18 Feb 5, 2025

carolynzhang18 Feb 5, 2025

carolynzhang18 Feb 5, 2025

carolynzhang18 Feb 5, 2025

carolynzhang18 Feb 5, 2025

jasondsouza35 Feb 9, 2025

Create password page #95

Are you sure you want to change the base?

Create password page #95

Conversation

AbeerDas commented Feb 4, 2025 • edited Loading

Notion Ticket Link

Implementation Description

Steps to Test

What should reviewers focus on?

Checklist

github-actions bot commented Feb 4, 2025 • edited Loading

carolynzhang18 commented Feb 5, 2025

carolynzhang18 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AbeerDas commented Feb 4, 2025 •

edited

Loading

github-actions bot commented Feb 4, 2025 •

edited

Loading

carolynzhang18 left a comment •

edited

Loading