confirm password

CS3219-AY2324S1 · Nov 13, 2023 · 3df2ead · 3df2ead
1 parent cef6645
commit 3df2ead
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 19 deletions.
diff --git a/client/src/components/Auth/Authbar.js b/client/src/components/Auth/Authbar.js
@@ -1,27 +1,24 @@
 import {
     Box,
-    Image,
-    Center,
+    Link,
     Flex,
   } from '@chakra-ui/react';
   import { Logo } from '../Footer/Footer'
-import { useNavigate } from 'react-router-dom';
 
   const AuthBar = () => {
-
-    const navigator = useNavigate();
 
     return(
       <>
         <Box 
           sx={{ position: '-webkit-sticky', /* Safari */ position: 'sticky', top: '0', }}
-
           style={{ zIndex: 10 }}
           maxH={'20'}
         >
           <Flex ml={'10'}>
           <Box  pt={3} >
-            <Logo onClick={() => {navigator('/')}} />
+          <Link href={'/'}>
+            <Logo />
+          </Link>
           </Box>
           </Flex>
         </Box>

diff --git a/client/src/pages/Authentication/EditProfile.js b/client/src/pages/Authentication/EditProfile.js
@@ -63,8 +63,8 @@ function EditProfileModal(props) {
     if (data.password.length === 0) {
       delete data.password;
     }
-
-    if (!error && errorPassword == null) {
+    console.log(errorPasswordConfirmation)
+    if (!error && errorPassword == null && (errorPasswordConfirmation == null || passwordInputValue.length === 0)) {
       editProfile(data).then(() => {
         toast({
           title: 'Profile Edited',
@@ -109,8 +109,13 @@ function EditProfileModal(props) {
 
     //----------------------------------------------------------
   //for password
-  const [showPassword, setShowPassword] = useState(false)
+  const [showPassword, setShowPassword] = useState(false);
+  const [confirmShowPassword, setConfirmShowPassword] = useState(false);
+  const [passwordConfirm, setPasswordConfirm] = useState('');
+
+
   const [errorPassword, setErrorPassword] = useState(null);
+  const [errorPasswordConfirmation, setErrorPasswordConfirmation] = useState(null);
   const [passwordInputValue, setPasswordInputValue] = useState('');
   const handlePasswordChange = (event) => {
     const newPassword = event.target.value;
@@ -121,9 +126,10 @@ function EditProfileModal(props) {
     const hasDigit = /\d/.test(newPassword);
     const hasSpecialChar = /[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/.test(newPassword);
 
-
     if (newPassword.length === 0) {
       setErrorPassword(null);
+      setPasswordConfirm('');
+      setErrorPasswordConfirmation(null);
     } else if (
       (newPassword.length < minLength) ||
       !hasLowerCase ||
@@ -142,10 +148,35 @@ function EditProfileModal(props) {
       setError('password');
     } else {
       setErrorPassword(null);
+      setErrorPasswordConfirmation(null);
     }
+
     setPasswordInputValue(newPassword);
   };
 
+  const handlePasswordConfirmChange = (event) => {
+    const newPassword = event.target.value;
+    console.log(event.target.id)
+
+    const passwordCriteriaMessage = "Please ensure both passwords are the same";
+
+    if (newPassword !== passwordInputValue && event.target.id === 'passwordConfirm') {
+      setErrorPasswordConfirmation(
+        passwordCriteriaMessage
+      );
+    } else if (newPassword !== passwordConfirm && event.target.id === 'password') {
+      setErrorPasswordConfirmation(
+        passwordCriteriaMessage
+      );
+    } else {
+      setErrorPasswordConfirmation(null);
+    }
+
+    if (event.target.id === 'passwordConfirm') {
+      setPasswordConfirm(newPassword);
+    }
+  };
+
 
   return (
     <>
@@ -177,8 +208,8 @@ function EditProfileModal(props) {
           <Divider my={10} />
           <Text mb='20px' fontSize={'lg'} fontWeight={'semibold'}>Password</Text>
           <InputGroup>
-          <Input {...register('password', {
-                  })} type={showPassword ? 'text' : 'password'} value={passwordInputValue} onChange={handlePasswordChange} maxLength={128} />
+          <Input id='password' {...register('password', {
+                  })} type={showPassword ? 'text' : 'password'} value={passwordInputValue} onChange={(e) => {handlePasswordChange(e); handlePasswordConfirmChange(e)}} maxLength={128} />
           <InputRightElement h={'full'}>
                   <Button
                     variant={'ghost'}
@@ -188,6 +219,19 @@ function EditProfileModal(props) {
           </InputRightElement>
           </InputGroup>
           {passwordInputValue.length > 0 && <Text color={"#cc0000"} whiteSpace={'pre-wrap'}>{errorPassword}</Text>}
+          {passwordInputValue.length > 0 && errorPassword == null && <><Text mb='20px' pt={10} fontSize={'lg'} fontWeight={'semibold'}>Confirm Password</Text>
+          <InputGroup >
+          <Input id='passwordConfirm' type={confirmShowPassword ? 'text' : 'password'} 
+                  onChange={handlePasswordConfirmChange} value={passwordConfirm} maxLength={128} />
+          <InputRightElement h={'full'}>
+                  <Button
+                    variant={'ghost'}
+                    onClick={() => setConfirmShowPassword((showPassword) => !showPassword)}>
+                    {confirmShowPassword ? <ViewIcon /> : <ViewOffIcon />}
+                  </Button>
+          </InputRightElement>
+          </InputGroup></>}
+          {passwordInputValue.length > 0 && errorPasswordConfirmation !== null && <Text color={"#cc0000"} whiteSpace={'pre-wrap'}>{errorPasswordConfirmation}</Text>}
           <p style={{ color: 'gray', fontSize: '14px', marginTop: 20}}>Note: If you wish to keep the password unchanged, please leave the password field blank.</p>
           <Box display={'flex'} justifyContent={'flex-end'} py={16}>
           </Box>

diff --git a/client/src/pages/Authentication/Register.js b/client/src/pages/Authentication/Register.js
@@ -26,7 +26,7 @@ import * as React from 'react';
 
 
 export default function Register() {
-  const [showPassword, setShowPassword] = useState(false)
+
   const navigate = useNavigate();
 
   const [loggedIn, setLoggedIn] = useState(false);
@@ -66,7 +66,7 @@ export default function Register() {
       lastName: data.lastName
    }
 
-   if (errorUsername == null && errorPassword == null) {
+   if (errorUsername == null && errorPassword == null && errorPasswordConfirmation == null) {
     await createUser(info)
     .then((obj) => {
       toast({
@@ -119,8 +119,14 @@ export default function Register() {
   //----------------------------------------------------------
   //for password
 
+  const [showPassword, setShowPassword] = useState(false);
+  const [confirmShowPassword, setConfirmShowPassword] = useState(false);
+  const [passwordConfirm, setPasswordConfirm] = useState('');
+
+
   const [errorPassword, setErrorPassword] = useState(null);
-  const [passwordInputValue, setPasswordInputValue] = useState("");
+  const [errorPasswordConfirmation, setErrorPasswordConfirmation] = useState(null);
+  const [passwordInputValue, setPasswordInputValue] = useState('');
 
   const handlePasswordChange = (event) => {
     const newPassword = event.target.value;
@@ -131,7 +137,9 @@ export default function Register() {
     const hasDigit = /\d/.test(newPassword);
     const hasSpecialChar = /[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/.test(newPassword);
 
-    if (
+    if (newPassword.length === 0) {
+      setErrorPassword(null);
+    } else if (
       newPassword.length < minLength ||
       !hasLowerCase ||
       !hasUpperCase ||
@@ -153,6 +161,31 @@ export default function Register() {
     setPasswordInputValue(newPassword);
   };
 
+  const handlePasswordConfirmChange = (event) => {
+    const newPassword = event.target.value;
+    console.log(event.target.id)
+
+    const passwordCriteriaMessage = "Please ensure both passwords are the same";
+
+    if (newPassword !== passwordInputValue && event.target.id === 'passwordConfirm') {
+      setErrorPasswordConfirmation(
+        passwordCriteriaMessage
+      );
+    } else if (newPassword !== passwordConfirm && event.target.id === 'password') {
+      setErrorPasswordConfirmation(
+        passwordCriteriaMessage
+      );
+    } else {
+      setErrorPasswordConfirmation(null);
+    }
+
+    if (event.target.id === 'passwordConfirm') {
+      setPasswordConfirm(newPassword);
+    }
+  };
+
+
+
 
   return (
     <Flex
@@ -214,7 +247,7 @@ export default function Register() {
               <InputGroup>
                 <Input {...register('password', {
                     required: true,
-                  })} type={showPassword ? 'text' : 'password'} value={passwordInputValue} onChange={handlePasswordChange} maxLength={128} />
+                  })} type={showPassword ? 'text' : 'password'} value={passwordInputValue} onChange={(e) => {handlePasswordChange(e); handlePasswordConfirmChange(e)}} maxLength={128} />
                 <InputRightElement h={'full'}>
                   <Button
                     variant={'ghost'}
@@ -223,8 +256,24 @@ export default function Register() {
                   </Button>
                 </InputRightElement>
               </InputGroup>
+              </FormControl>
               <Text color={"#cc0000"} whiteSpace={'pre-wrap'}>{errorPassword}</Text>
-            </FormControl>
+              {<>
+              <FormControl id="passwordConfirm" isRequired>
+                  <FormLabel>Confirm password</FormLabel>
+                <InputGroup >
+                <Input type={confirmShowPassword ? 'text' : 'password'} 
+                        onChange={handlePasswordConfirmChange} value={passwordConfirm} maxLength={128} />
+                <InputRightElement h={'full'}>
+                        <Button
+                          variant={'ghost'}
+                          onClick={() => setConfirmShowPassword((showPassword) => !showPassword)}>
+                          {confirmShowPassword ? <ViewIcon /> : <ViewOffIcon />}
+                        </Button>
+                </InputRightElement>
+                </InputGroup></FormControl></>}
+                {errorPasswordConfirmation !== null && <Text color={"#cc0000"} whiteSpace={'pre-wrap'}>{errorPasswordConfirmation}</Text>}
+
             {regError && <Text color={"#cc0000"}>{regError}</Text>}
             <Stack spacing={10} pt={2}>
               <Button