Merge branch 'development' of https://github.com/ruiqi7/peer-prep into feature/user-authentication

# Conflicts:
#	frontend/src/components/ChangePasswordModal/index.tsx

Author: ruiqi7

frontend/src/components/ChangePasswordModal/index.tsx

@@ -13,6 +13,7 @@ import { passwordValidator } from "../../utils/validators";
 import PasswordTextField from "../PasswordTextField";
 import {
   PASSWORD_MISMATCH_ERROR_MESSAGE,
+  PASSWORD_REQUIRED_ERROR_MESSAGE,
   USE_PROFILE_ERROR_MESSAGE,
 } from "../../utils/constants";
 
@@ -33,7 +34,6 @@ const ChangePasswordModal: React.FC<ChangePasswordModalProps> = (props) => {
     formState: { errors, dirtyFields, isDirty, isValid },
     watch,
     trigger,
-    reset,
   } = useForm<{
     oldPassword: string;
     newPassword: string;
@@ -51,14 +51,7 @@ const ChangePasswordModal: React.FC<ChangePasswordModalProps> = (props) => {
   const { updatePassword } = profile;
 
   return (
-    <Dialog
-      fullWidth
-      open={open}
-      onClose={() => {
-        onClose();
-        reset();
-      }}
-    >
+    <Dialog fullWidth open={open} onClose={onClose}>
       <DialogTitle fontSize={24} sx={{ paddingBottom: 0 }}>
         Change password
       </DialogTitle>
@@ -71,7 +64,6 @@ const ChangePasswordModal: React.FC<ChangePasswordModalProps> = (props) => {
                 newPassword: data.newPassword,
               });
               onClose();
-              reset();
             })}
           >
             <PasswordTextField
@@ -82,7 +74,10 @@ const ChangePasswordModal: React.FC<ChangePasswordModalProps> = (props) => {
               sx={(theme) => ({ marginTop: theme.spacing(1) })}
               {...register("oldPassword", {
                 setValueAs: (value: string) => value.trim(),
+                required: PASSWORD_REQUIRED_ERROR_MESSAGE,
               })}
+              error={!!errors.oldPassword}
+              helperText={errors.oldPassword?.message}
             />
             <PasswordTextField
               displayTooltip
@@ -133,10 +128,7 @@ const ChangePasswordModal: React.FC<ChangePasswordModalProps> = (props) => {
                 fullWidth
                 variant="contained"
                 color="secondary"
-                onClick={() => {
-                  onClose();
-                  reset();
-                }}
+                onClick={onClose}
               >
                 Cancel
               </Button>

frontend/src/components/EditProfileModal/index.tsx

@@ -32,7 +32,6 @@ const EditProfileModal: React.FC<EditProfileModalProps> = (props) => {
     register,
     formState: { errors, isValid, isDirty },
     handleSubmit,
-    reset,
   } = useForm<{
     firstName: string;
     lastName: string;
@@ -55,13 +54,7 @@ const EditProfileModal: React.FC<EditProfileModalProps> = (props) => {
   const { updateProfile } = profile;
 
   return (
-    <Dialog
-      open={open}
-      onClose={() => {
-        onClose();
-        reset();
-      }}
-    >
+    <Dialog open={open} onClose={onClose}>
       <DialogTitle fontSize={24} sx={{ paddingBottom: 0 }}>
         Edit profile
       </DialogTitle>
@@ -71,7 +64,6 @@ const EditProfileModal: React.FC<EditProfileModalProps> = (props) => {
             onSubmit={handleSubmit((data) => {
               updateProfile(data);
               onClose();
-              reset();
             })}
           >
             <TextField
@@ -120,10 +112,7 @@ const EditProfileModal: React.FC<EditProfileModalProps> = (props) => {
                 fullWidth
                 variant="contained"
                 color="secondary"
-                onClick={() => {
-                  onClose();
-                  reset();
-                }}
+                onClick={onClose}
               >
                 Cancel
               </Button>

frontend/src/pages/Profile/index.tsx

@@ -105,17 +105,19 @@ const ProfilePage: React.FC = () => {
         <Box sx={(theme) => ({ flex: 3, paddingLeft: theme.spacing(4) })}>
           <Typography variant="h4">Questions attempted</Typography>
         </Box>
-        <EditProfileModal
-          open={editProfileOpen}
-          onClose={() => setEditProfileModalOpen(false)}
-          currFirstName={user.firstName}
-          currLastName={user.lastName}
-          currBiography={user.biography}
-        />
-        <ChangePasswordModal
-          open={passwordModalOpen}
-          onClose={() => setPasswordModalOpen(false)}
-        />
+        {editProfileOpen &&
+          <EditProfileModal
+            open={editProfileOpen}
+            onClose={() => setEditProfileModalOpen(false)}
+            currFirstName={user.firstName}
+            currLastName={user.lastName}
+            currBiography={user.biography}
+          />}
+        {passwordModalOpen && 
+          <ChangePasswordModal
+            open={passwordModalOpen}
+            onClose={() => setPasswordModalOpen(false)}
+          />}
       </Box>
     </AppMargin>
   );