Fix reset password bug

Fix UI bug - wrong error message, does not redirect if token has expired. Include password requirements. Fix session bug - destroys session so link is no longer valid after succesful password reset Email format tells user to use the same browser (else it would not work)
CS3219-AY2425S1 · Nov 9, 2024 · 5de7e8b · 5de7e8b
1 parent 0d89455
commit 5de7e8b
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 8 deletions.
diff --git a/frontend/peerprep/app/@landing/sign-in/forgot-password/reset/page.tsx b/frontend/peerprep/app/@landing/sign-in/forgot-password/reset/page.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { Input } from "@nextui-org/input";
 import { useRouter, useSearchParams } from "next/navigation";
-import { CircularProgress } from "@nextui-org/react";
+import { CircularProgress, Tooltip } from "@nextui-org/react";
 
 import BoxIcon from "@/components/boxicons";
 import { EyeFilledIcon, EyeSlashFilledIcon } from "@/components/icons";
@@ -40,8 +40,7 @@ export default function ResetPasswordPage() {
 
     if (!validatePassword(password)) {
       setToast({
-        message:
-          "Password must be at least 8 characters long and contain at least one number",
+        message: "Password does not meet requirements",
         type: "error",
       });
       setIsLoading(false);
@@ -73,17 +72,40 @@ export default function ResetPasswordPage() {
           message: response.message || "Failed to reset password",
           type: "error",
         });
+        router.push("/sign-in");
       }
     } catch (error) {
       setToast({
         message: "An error occurred. Please try again.",
         type: "error",
       });
+      router.push("/sign-in");
     }
 
     setIsLoading(false);
   };
 
+  const passwordRequirements = (
+    <Tooltip
+      content={
+        <ul className="list-disc pl-2 py-1 text-xs">
+          <li>At least 12 characters long</li>
+          <li>Contains at least one uppercase letter</li>
+          <li>Contains at least one lowercase letter</li>
+          <li>Contains at least one digit</li>
+          <li>Contains at least one special character (e.g., @$#!%*?&)</li>
+        </ul>
+      }
+      placement="right"
+      showArrow
+    >
+      <div className="flex flex-row gap-1 items-center w-fit dark:hover:text-gray-300 hover:text-gray-500">
+        <BoxIcon name="bx-info-circle" size="12px" />
+        &nbsp;Password requirements
+      </div>
+    </Tooltip>
+  );
+
   return (
     <div className="flex items-center justify-center mt-20">
       {toast && (
@@ -109,6 +131,7 @@ export default function ResetPasswordPage() {
         </div>
 
         <div className="flex flex-col gap-4 w-fill">
+          {passwordRequirements}
           <Input
             label="New Password"
             variant="faded"
@@ -119,7 +142,7 @@ export default function ResetPasswordPage() {
                 type="button"
                 onClick={toggleVisibility}
               >
-                {isVisible ? <EyeSlashFilledIcon /> : <EyeFilledIcon />}
+                {isVisible ? <EyeFilledIcon /> : <EyeSlashFilledIcon />}
               </button>
             }
             type={isVisible ? "text" : "password"}
@@ -128,9 +151,10 @@ export default function ResetPasswordPage() {
             isInvalid={isFormSubmitted && !validatePassword(password)}
             errorMessage={
               isFormSubmitted && !validatePassword(password)
-                ? "Password must be at least 8 characters and contain at least one number"
+                ? "Password does not meet requirements"
                 : ""
             }
+            isDisabled={isLoading}
           />
 
           <Input
@@ -143,7 +167,7 @@ export default function ResetPasswordPage() {
                 type="button"
                 onClick={toggleConfirmVisibility}
               >
-                {isConfirmVisible ? <EyeSlashFilledIcon /> : <EyeFilledIcon />}
+                {isConfirmVisible ? <EyeFilledIcon /> : <EyeSlashFilledIcon />}
               </button>
             }
             type={isConfirmVisible ? "text" : "password"}
@@ -156,6 +180,7 @@ export default function ResetPasswordPage() {
                 : ""
             }
             onKeyDown={handleKeyDown}
+            isDisabled={isLoading}
           />
         </div>
 

diff --git a/frontend/peerprep/auth/actions.ts b/frontend/peerprep/auth/actions.ts
@@ -760,6 +760,7 @@ export const resetPassword = async (newPassword: string) => {
     });
 
     if (response.ok) {
+      await session.destroy();
       return { status: "success", message: "Password updated successfully" };
     } else {
       const errorData = await response.json();

diff --git a/user-service/controller/auth-controller.js b/user-service/controller/auth-controller.js
@@ -23,7 +23,7 @@ const sendPasswordResetLink = async (email, username, resetLink) => {
       <div style="font-family: Arial, sans-serif; color: #333; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #eee; border-radius: 10px;">
       <h2 style="text-align: center; color: #6A0CE2;">Reset Your Password</h2>
       <p style="font-size: 16px;">Hello <span style="color: #6A0CE2; font-weight: bold;">${username}</span>,</p>
-      <p style="font-size: 16px;">We received a request to reset your password. Click the button below to create a new password:</p>
+      <p style="font-size: 16px;">We received a request to reset your password. Please ensure that you opening the link from the same browser you made the request. Click the button below to create a new password:</p>
       <div style="text-align: center; margin: 20px 0;">
           <a href="${resetLink}" style="background-color: #6A0CE2; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; display: inline-block; font-weight: bold;">Reset Password</a>
       </div>

diff --git a/user-service/controller/user-controller.js b/user-service/controller/user-controller.js
@@ -293,7 +293,7 @@ export async function updateUser(req, res) {
         const salt = bcrypt.genSaltSync(10);
         hashedPassword = bcrypt.hashSync(password, salt);
       } else {
-        console.log(`[USER] Update failed - Unauthorized password update ${userId}`);
+        console.log(`[USER] Update failed - Unauthorized password update - ID: ${userId}`);
         return res.status(403).json({ message: "Unauthorized password update" });
       }
     }