Merge pull request #22 from feliciagan/edit_profile

add edit profile and password functionality

Author: ruiqi7

backend/user-service/controller/user-controller.ts

@@ -26,15 +26,15 @@ export async function createUser(
   res: Response
 ): Promise<Response> {
   try {
-    const { username, email, password } = req.body;
+    const { username, email, password, firstName, lastName } = req.body;
     const existingUser = await _findUserByUsernameOrEmail(username, email);
     if (existingUser) {
       return res
         .status(409)
         .json({ message: "username or email already exists" });
     }
 
-    if (username && email && password) {
+    if (username && email && password && firstName && lastName) {
       const { isValid: isValidUsername, message: usernameMessage } =
         validateUsername(username);
       if (!isValidUsername) {
@@ -55,15 +55,37 @@ export async function createUser(
 
       const salt = bcrypt.genSaltSync(10);
       const hashedPassword = bcrypt.hashSync(password, salt);
-      const createdUser = await _createUser(username, email, hashedPassword);
+
+      const { isValid: isValidFirstName, message: firstNameMessage } =
+        validateName(firstName, "first name");
+      if (!isValidFirstName) {
+        return res.status(400).json({ message: firstNameMessage });
+      }
+
+      const { isValid: isValidLastName, message: lastNameMessage } =
+        validateName(lastName, "last name");
+      if (!isValidLastName) {
+        return res.status(400).json({ message: lastNameMessage });
+      }
+
+      const createdUser = await _createUser(
+        username,
+        email,
+        hashedPassword,
+        firstName,
+        lastName
+      );
       return res.status(201).json({
         message: `Created new user ${username} successfully`,
         data: formatUserResponse(createdUser),
       });
     } else {
       return res
         .status(400)
-        .json({ message: "username and/or email and/or password are missing" });
+        .json({
+          message:
+            "username and/or email and/or password and/or first name and/or last name are missing",
+        });
     }
   } catch (err) {
     console.error(err);
@@ -120,18 +142,15 @@ export async function updateUser(
 ): Promise<Response> {
   try {
     const {
-      username,
-      email,
-      password,
+      oldPassword,
+      newPassword,
       profilePictureUrl,
       firstName,
       lastName,
       biography,
     } = req.body;
     if (
-      username ||
-      email ||
-      password ||
+      (oldPassword && newPassword) ||
       profilePictureUrl ||
       firstName ||
       lastName ||
@@ -148,42 +167,23 @@ export async function updateUser(
         return res.status(404).json({ message: `User ${userId} not found` });
       }
 
-      if (username) {
-        const { isValid: isValidUsername, message: usernameMessage } =
-          validateUsername(username);
-        if (!isValidUsername) {
-          return res.status(400).json({ message: usernameMessage });
-        }
-
-        const existingUser = await _findUserByUsername(username);
-        if (existingUser && existingUser.id !== userId) {
-          return res.status(409).json({ message: "username already exists" });
-        }
-      }
-
-      if (email) {
-        const { isValid: isValidEmail, message: emailMessage } =
-          validateEmail(email);
-        if (!isValidEmail) {
-          return res.status(400).json({ message: emailMessage });
-        }
-
-        const existingUser = await _findUserByEmail(email);
-        if (existingUser && existingUser.id !== userId) {
-          return res.status(409).json({ message: "email already exists" });
+      let hashedPassword: string | undefined;
+      if (oldPassword && newPassword) {
+        const match = await bcrypt.compare(oldPassword, user.password);
+        if (!match) {
+          return res
+            .status(403)
+            .json({ message: "Wrong current password given" });
         }
-      }
 
-      let hashedPassword: string | undefined;
-      if (password) {
         const { isValid: isValidPassword, message: passwordMessage } =
-          validatePassword(password);
+          validatePassword(newPassword);
         if (!isValidPassword) {
           return res.status(400).json({ message: passwordMessage });
         }
 
         const salt = bcrypt.genSaltSync(10);
-        hashedPassword = bcrypt.hashSync(password, salt);
+        hashedPassword = bcrypt.hashSync(newPassword, salt);
       }
 
       if (firstName) {
@@ -212,8 +212,6 @@ export async function updateUser(
 
       const updatedUser = await _updateUserById(
         userId,
-        username,
-        email,
         hashedPassword,
         profilePictureUrl,
         firstName,

backend/user-service/model/repository.ts

@@ -1,7 +1,6 @@
 import UserModel, { IUser } from "./user-model";
 import "dotenv/config";
 import { connect } from "mongoose";
-import { faker } from "@faker-js/faker";
 
 export async function connectToDB() {
   const mongoDBUri: string | undefined = process.env.DB_CLOUD_URI;
@@ -17,14 +16,16 @@ export async function createUser(
   username: string,
   email: string,
   password: string,
+  firstName: string,
+  lastName: string,
   isAdmin: boolean = false
 ): Promise<IUser> {
   return new UserModel({
     username,
     email,
     password,
-    firstName: faker.person.firstName(),
-    lastName: faker.person.lastName(),
+    firstName,
+    lastName,
     isAdmin,
   }).save();
 }
@@ -58,8 +59,6 @@ export async function findAllUsers(): Promise<IUser[]> {
 
 export async function updateUserById(
   userId: string,
-  username: string,
-  email: string,
   password: string | undefined,
   profilePictureUrl: string,
   firstName: string,
@@ -70,8 +69,6 @@ export async function updateUserById(
     userId,
     {
       $set: {
-        username,
-        email,
         password,
         profilePictureUrl,
         firstName,

backend/user-service/model/user-model.ts

@@ -8,8 +8,8 @@ export interface IUser extends Document {
   isAdmin: boolean;
 
   profilePictureUrl?: string;
-  firstName?: string;
-  lastName?: string;
+  firstName: string;
+  lastName: string;
   biography?: string;
 }
 
@@ -43,11 +43,11 @@ const UserModelSchema: Schema<IUser> = new mongoose.Schema({
   },
   firstName: {
     type: String,
-    required: false,
+    required: true,
   },
   lastName: {
     type: String,
-    required: false,
+    required: true,
   },
   biography: {
     type: String,

backend/user-service/swagger.yml

@@ -173,6 +173,58 @@ paths:
           required: true
           schema:
             type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                oldPassword:
+                  type: string
+                  required: false
+                newPassword:
+                  type: string
+                  required: false
+                firstName:
+                  type: string
+                  required: false
+                lastName:
+                  type: string
+                  required: false
+                biography:
+                  type: string
+                  required: false
+      responses:
+        200:
+          description: Successful Response
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/UserResponse"
+        400:
+          description: Bad Request
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
+        403:
+          description: Forbidden
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
+        404: 
+          description: Not Found
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
+        500: 
+          description: Internal Server Error
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
     delete:
       summary: Delete a user account
       tags:

frontend/src/components/ChangePasswordModal/index.tsx

@@ -0,0 +1,104 @@
+import { forwardRef, useState } from 'react';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import PasswordTextField from '../PasswordTextField';
+//import { userClient } from '../../utils/api';
+//import axios from 'axios';
+//import { FAILED_PW_UPDATE_MESSAGE, SUCCESS_PW_UPDATE_MESSAGE } from '../../utils/constants';
+
+interface ChangePasswordModalProps {
+  handleClose: () => void;
+  userId: string;
+  onUpdate: (message: string, isSuccess: boolean) => void;
+}
+
+const ChangePasswordModal = forwardRef<HTMLDivElement, ChangePasswordModalProps>((props, ref) => {
+  const { handleClose } = props;
+  //const { handleClose, userId, onUpdate } = props;
+  const [currPassword, setCurrPassword] = useState<string>('');
+  const [newPassword, setNewPassword] = useState<string>('');
+  const [confirmPassword, setConfirmPassword] = useState<string>('');
+
+  const [isCurrPasswordValid, setIsCurrPasswordValid] = useState<boolean>(false);
+  const [isNewPasswordValid, setIsNewPasswordValid] = useState<boolean>(false);
+  const [isConfirmPasswordValid, setIsConfirmPasswordValid] = useState<boolean>(false);
+  
+  const isUpdateDisabled = !(isCurrPasswordValid && isNewPasswordValid && isConfirmPasswordValid);
+
+  const handleSubmit = async () => {
+    //TODO: test with token (only tested without)
+    /*const accessToken = localStorage.getItem("token");
+
+    try {
+      await userClient.patch(
+        `/users/${userId}`,
+        {
+          oldPassword: currPassword,
+          newPassword: newPassword,
+        }, 
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            "Content-Type": "application/json",
+          },
+        });
+      handleClose();
+      onUpdate(SUCCESS_PW_UPDATE_MESSAGE, true);
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        const message =
+          error.response?.data.message || FAILED_PW_UPDATE_MESSAGE;
+        onUpdate(message, false);
+      } else {
+        onUpdate(FAILED_PW_UPDATE_MESSAGE, false);
+      }
+    }*/
+  };
+
+  return (
+    <Box 
+      ref={ref}
+      sx={(theme) => ({
+        backgroundColor: theme.palette.common.white,
+        display: "flex",
+        width: 600,
+        flexDirection: "column",
+        alignItems: "center",
+        borderRadius: '16px',
+        padding: "40px",
+      })}
+    >
+      <Typography component="h1" variant="h3">
+        Change Password
+      </Typography>
+      <PasswordTextField 
+        label="Current password" 
+        passwordVal={false} 
+        password={currPassword} 
+        setPassword={setCurrPassword} 
+        isMatch={false} 
+        setValidity={setIsCurrPasswordValid} />
+      <PasswordTextField 
+        label="New password" 
+        passwordVal={true} 
+        password={newPassword} 
+        setPassword={setNewPassword} 
+        isMatch={true} 
+        passwordToMatch={confirmPassword}
+        setValidity={setIsNewPasswordValid} />
+      <PasswordTextField 
+        label="Confirm new password" 
+        passwordVal={false} 
+        password={confirmPassword} 
+        setPassword={setConfirmPassword} 
+        isMatch={true} 
+        passwordToMatch={newPassword} 
+        setValidity={setIsConfirmPasswordValid} />
+      <Stack direction="row" spacing={2} sx={{marginTop: 2, width: '100%'}}>
+        <Button variant="contained" color="secondary" onClick={handleClose} sx={{ flexGrow: 1 }}>Cancel</Button>
+        <Button variant="contained" disabled={isUpdateDisabled} onClick={handleSubmit} sx={{ flexGrow: 1 }}>Update</Button>
+      </Stack>
+    </Box>
+  );
+});
+
+export default ChangePasswordModal;