Update forget password functionality

guanquann · guanquann · commit 43d20eaf4035 · 2024-10-19T01:30:29.000+08:00
diff --git a/backend/user-service/controller/user-controller.ts b/backend/user-service/controller/user-controller.ts
@@ -12,6 +12,7 @@ import {
   updateUserById as _updateUserById,
   updateUserPrivilegeById as _updateUserPrivilegeById,
   updateUserVerification as _updateUserVerification,
+  updateUserPassword as _updateUserPassword,
 } from "../model/repository";
 import {
   validateEmail,
@@ -25,8 +26,13 @@ import { upload } from "../config/multer";
 import { uploadFileToFirebase } from "../utils/utils";
 import redisClient from "../config/redis";
 import crypto from "crypto";
-import { sendAccVerificationMail } from "../utils/mailer";
-import { ACCOUNT_VERIFICATION_SUBJ } from "../utils/constants";
+import { sendMail } from "../utils/mailer";
+import {
+  ACCOUNT_VERIFICATION_SUBJ,
+  ACCOUNT_VERIFICATION_TEMPLATE,
+  RESET_PASSWORD_SUBJ,
+  RESET_PASSWORD_TEMPLATE,
+} from "../utils/constants";
 
 export async function createUser(
   req: Request,
@@ -114,10 +120,11 @@ export const sendVerificationMail = async (
 
     const emailToken = crypto.randomBytes(16).toString("hex");
     await redisClient.set(email, emailToken, { EX: 60 * 5 }); // expire in 5 minutes
-    await sendAccVerificationMail(
+    await sendMail(
       email,
       ACCOUNT_VERIFICATION_SUBJ,
       user.username,
+      ACCOUNT_VERIFICATION_TEMPLATE,
       emailToken
     );
 
@@ -334,6 +341,87 @@ export async function updateUser(
   }
 }
 
+export const sendResetPasswordMail = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  try {
+    const { email } = req.body;
+    const user = await _findUserByEmail(email);
+
+    if (!user) {
+      return res.status(404).json({ message: `User not found` });
+    }
+
+    const emailToken = crypto.randomBytes(16).toString("hex");
+    await redisClient.set(email, emailToken, { EX: 60 * 5 }); // expire in 5 minutes
+    await sendMail(
+      email,
+      RESET_PASSWORD_SUBJ,
+      user.username,
+      RESET_PASSWORD_TEMPLATE,
+      emailToken
+    );
+
+    return res.status(200).json({
+      message: "Reset password email sent. Please check your inbox.",
+      data: { email, id: user.id },
+    });
+  } catch (error) {
+    return res.status(500).json({
+      message: "Unknown error when sending reset password email!",
+      error,
+    });
+  }
+};
+
+export const resetPassword = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  try {
+    const { email, token, password } = req.body;
+
+    const user = await _findUserByEmail(email);
+    if (!user) {
+      return res.status(404).json({ message: `User not found` });
+    }
+
+    const expectedToken = await redisClient.get(email);
+
+    if (expectedToken !== token) {
+      return res
+        .status(400)
+        .json({ message: "Invalid token. Please request for a new one." });
+    }
+
+    const { isValid: isValidPassword, message: passwordMessage } =
+      validatePassword(password);
+    if (!isValidPassword) {
+      return res.status(400).json({ message: passwordMessage });
+    }
+
+    const salt = bcrypt.genSaltSync(10);
+    const hashedPassword = bcrypt.hashSync(password, salt);
+
+    const updatedUser = await _updateUserPassword(email, hashedPassword);
+
+    if (!updatedUser) {
+      return res
+        .status(404)
+        .json({ message: `User's password not reset.` });
+    }
+
+    return res
+      .status(200)
+      .json({ message: `User's password successfully reset.` });
+  } catch (error) {
+    return res
+      .status(500)
+      .json({ message: "Unknown error when resetting user password!", error });
+  }
+};
+
 export async function updateUserPrivilege(
   req: Request,
   res: Response
diff --git a/backend/user-service/model/repository.ts b/backend/user-service/model/repository.ts
@@ -31,6 +31,7 @@ export async function createUser(
     email,
     password,
     isAdmin,
+    isVerified,
   });
   return user.save();
 }
@@ -114,6 +115,21 @@ export async function updateUserVerification(
   );
 }
 
+export async function updateUserPassword(
+  email: string,
+  password: string
+): Promise<IUser | null> {
+  return UserModel.findOneAndUpdate(
+    { email },
+    {
+      $set: {
+        password,
+      },
+    },
+    { new: true } // return the updated user
+  );
+}
+
 export async function deleteUserById(userId: string): Promise<IUser | null> {
   return UserModel.findByIdAndDelete(userId);
 }
diff --git a/backend/user-service/routes/user-routes.ts b/backend/user-service/routes/user-routes.ts
@@ -10,12 +10,15 @@ import {
   updateUser,
   updateUserPrivilege,
   verifyUser,
+  sendResetPasswordMail,
+  resetPassword,
 } from "../controller/user-controller";
 import {
   verifyAccessToken,
   verifyIsAdmin,
   verifyIsOwnerOrAdmin,
 } from "../middleware/basic-access-control";
+import { send } from "process";
 
 const router = express.Router();
 
@@ -34,6 +37,10 @@ router.post("/images", createImageLink);
 
 router.post("/send-verification-email", sendVerificationMail);
 
+router.post("/send-reset-password-email", sendResetPasswordMail);
+
+router.post("/reset-password", resetPassword);
+
 router.get("/:id", getUser);
 
 router.get("/verify-email/:email/:token", verifyUser);
diff --git a/backend/user-service/swagger.yml b/backend/user-service/swagger.yml
@@ -71,11 +71,22 @@ components:
         password:
           type: string
           required: true
-    EmailVerification:
+    Email:
       properties:
         email:
           type: string
           required: true
+    ResetPassword:
+      properties:
+        email:
+          type: string
+          required: true
+        token:
+          type: string
+          required: true
+        password:
+          type: string
+          required: true
     UserResponse:
       properties:
         message:
@@ -347,7 +358,73 @@ paths:
         content:
           application/json:
             schema:
-              $ref: "#/components/schemas/EmailVerification"
+              $ref: "#/components/schemas/Email"
+      responses:
+        200:
+          description: Successful Response
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  message:
+                    type: string
+                    description: Message
+        404:
+          description: Not Found
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
+        500:
+          description: Internal Server Error
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ServerErrorResponse"
+  /api/users/send-reset-password-email:
+    post:
+      summary: Send reset password email
+      tags:
+        - users
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/Email"
+      responses:
+        200:
+          description: Successful Response
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  message:
+                    type: string
+                    description: Message
+        404:
+          description: Not Found
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
+        500:
+          description: Internal Server Error
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ServerErrorResponse"
+  /api/users/reset-password:
+    post:
+      summary: Reset password
+      tags:
+        - users
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/ResetPassword"
       responses:
         200:
           description: Successful Response
diff --git a/backend/user-service/utils/constants.ts b/backend/user-service/utils/constants.ts
@@ -17,3 +17,23 @@ export const ACCOUNT_VERIFICATION_TEMPLATE = `
   </body>
 </html>
 `;
+
+export const RESET_PASSWORD_SUBJ = "Password Reset Link";
+
+export const RESET_PASSWORD_TEMPLATE = `
+<html>
+  <head>
+    <title>Password Reset</title>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <p>Hello {{username}}!</p>
+    <p>
+      You have requested to reset your password. Please use this token: <strong>{{token}}</strong> to reset your password.
+    </p>
+    <p>If you did not request for a password reset, please ignore this email.</p>
+    <p>Regards,</p>
+    <p>Peerprep G28</p>
+  </body>
+</html>
+`;
diff --git a/backend/user-service/utils/mailer.ts b/backend/user-service/utils/mailer.ts
@@ -1,7 +1,6 @@
 import nodemailer from "nodemailer";
 import dotenv from "dotenv";
 import Handlebars from "handlebars";
-import { ACCOUNT_VERIFICATION_TEMPLATE } from "./constants";
 
 dotenv.config();
 
@@ -14,13 +13,14 @@ const transporter = nodemailer.createTransport({
   auth: { user: USER, pass: PASS },
 });
 
-export const sendAccVerificationMail = async (
+export const sendMail = async (
   to: string,
   subject: string,
   username: string,
+  htmlTemplate: string,
   token: string
 ) => {
-  const template = Handlebars.compile(ACCOUNT_VERIFICATION_TEMPLATE);
+  const template = Handlebars.compile(htmlTemplate);
   const replacement = { username, token };
   const html = template(replacement);
   const options = {
diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx
@@ -18,7 +18,6 @@ type AuthContextType = {
   ) => void;
   login: (email: string, password: string) => void;
   logout: () => void;
-  resetPassword: (email: string) => void;
   user: User | null;
   setUser: React.Dispatch<React.SetStateAction<User | null>>;
   loading: boolean;
@@ -102,19 +101,20 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     toast.success(SUCCESS_LOG_OUT);
   };
 
-  const resetPassword = (email: string) => {
-    userClient.post("/users/reset-password", { email }).then(() => {
-      toast.success("Reset link sent to your email");
-    });
-  };
-
   if (loading) {
     return <Loader />;
   }
 
   return (
     <AuthContext.Provider
-      value={{ signup, login, logout, user, setUser, resetPassword, loading }}
+      value={{
+        signup,
+        login,
+        logout,
+        user,
+        setUser,
+        loading,
+      }}
     >
       {children}
     </AuthContext.Provider>
diff --git a/frontend/src/pages/ForgetPassword/index.module.css b/frontend/src/pages/ForgetPassword/index.module.css
@@ -0,0 +1,8 @@
+.fullheight {
+  display: flex;
+}
+
+.center {
+  justify-content: center;
+  align-items: center;
+}
diff --git a/frontend/src/pages/ForgetPassword/index.tsx b/frontend/src/pages/ForgetPassword/index.tsx
diff --git a/frontend/src/pages/LogIn/index.tsx b/frontend/src/pages/LogIn/index.tsx
