Hide passwords

Author: cheehongw

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

@@ -19,11 +19,18 @@ 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!')
@@ -34,7 +41,9 @@ export default function RegistrationForm() {
   const onSubmit = async (e: any) => {
     e.preventDefault();
     try {
+      ensureSamePassword(password.trim(), rePassword.trim());
       ensureStrongPassword(password.trim());
+      
       const response = await register(username.trim(), password.trim());
       const user = response.data.user;
 
@@ -78,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) }}