Merge pull request #71 from cheehongw/password-strength

Password strength

Author: Eclipse-Dominator

frontend/src/components/auth/LoginForm.tsx

@@ -57,7 +57,7 @@ export default function LoginForm() {
 
           <FormControl id='password' isRequired>
             <FormLabel>Password</FormLabel>
-            <Input type='text'
+            <Input type='password'
               name="password"
               value={password}
               onChange={(e) => { setPassword(e.target.value) }}

frontend/src/components/auth/ResgistrationForm.tsx

@@ -14,32 +14,61 @@ import { setUser } from '../../reducers/authSlice';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { register } from '../../api/auth';
+import { AxiosError } from 'axios';
 
 export default function RegistrationForm() {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [rePassword, setRePassword] = useState('');
   const dispatch = useDispatch()
   const navigate = useNavigate()
   const toast = useToast();
 
 
+  const ensureSamePassword = (password: string, rePassword: string) => {
+    if (password !== rePassword) {
+      throw Error('Make sure you re-type your new password correctly!')
+    }
+  }
+
+  const ensureStrongPassword = (password: string) => {
+    if (password.length < 8) {
+      throw Error('Password must be 8 characters or more!')
+    }
+  }
+
   //TODO: require integration with backend API
-  const onSubmit = (e: any) => {
+  const onSubmit = async (e: any) => {
     e.preventDefault();
-    register(username, password).then(response => {
+    try {
+      ensureSamePassword(password.trim(), rePassword.trim());
+      ensureStrongPassword(password.trim());
+      
+      const response = await register(username.trim(), password.trim());
       const user = response.data.user;
 
       dispatch(setUser(user));
       navigate('/');
-    }).catch((err) => {
+    } catch (err: any) {
       console.log(err);
-      toast({
-        title: 'Failed to Login',
-        description: 'Incorrect username or password',
-        status: 'error',
-        isClosable: true,
-      });
-    })
+      if (err instanceof AxiosError) {
+        toast({
+          title: 'Failed to Register!',
+          description: 'User is taken!',
+          status: 'error',
+          isClosable: true,
+        });
+      } else {
+        toast({
+          title: 'Failed to Register!',
+          description: err.message,
+          status: 'error',
+          isClosable: true,
+        });
+
+      }
+
+    }
   }
 
   return (
@@ -58,13 +87,23 @@ export default function RegistrationForm() {
 
           <FormControl id='password' isRequired>
             <FormLabel>Password</FormLabel>
-            <Input type='text'
+            <Input type='password'
               name="password"
               value={password}
               onChange={(e) => { setPassword(e.target.value) }}
             />
           </FormControl>
 
+          <FormControl id='repassword' isRequired>
+            <FormLabel>Re-type Password</FormLabel>
+            <Input type='password'
+              name="repassword"
+              value={rePassword}
+              onChange={(e) => { setRePassword(e.target.value) }}
+            />
+          </FormControl>
+
+
           <HStack>
 
             <Button colorScheme="blue" type="submit">

frontend/src/components/profile_page/ChangePasswordCard/ChangePasswordCard.component.tsx

@@ -51,22 +51,22 @@ export default function ChangePasswordCard() {
             <FormControl id='newPassword'>
               <FormLabel>New Password</FormLabel>
               <Input type='text'
-                name="newPassword"
+                name="password"
                 value={newPassword}
                 onChange={(e) => { setNewPassword(e.target.value) }}
               />
             </FormControl>
             <FormControl id='retypePassword'>
               <FormLabel>Re-type Password</FormLabel>
-              <Input type='text'
+              <Input type='password'
                 name="retypePassword"
                 value={retypePassword}
                 onChange={(e) => { setRetypePassword(e.target.value) }}
               />
             </FormControl>
             <FormControl id='currPassword'>
               <FormLabel>Current Password</FormLabel>
-              <Input type='text'
+              <Input type='password'
                 name="currPassword"
                 value={currPassword}
                 onChange={(e) => { setCurrPassword(e.target.value) }}