Show and hide password for better usability (#333)

Author: paazmaya

integration_tests/pages/LoginPage.ts

@@ -4,4 +4,6 @@ export class LoginPage extends BasePage {
   email = this.page.getByTestId("email");
   password = this.page.getByTestId("password");
   loginBtn = this.page.getByTestId("loginBtn");
+  showPasswordBtn = this.page.locator("[aria-label='toggle password visibility']");
 }
+

integration_tests/test/login.spec.ts

@@ -19,3 +19,13 @@ test("can login", async ({ loginPage }) => {
     password: "123456",
   });
 });
+
+test("show and hide password", async ({ loginPage }) => {
+  await loginPage.password.type("123456");
+
+  await loginPage.showPasswordBtn.click();
+  expect(await loginPage.password.getAttribute('type')).toBe('text');
+
+  await loginPage.showPasswordBtn.click();
+  expect(await loginPage.password.getAttribute('type')).toBe('password');
+});

src/components/LoginForm.tsx

@@ -12,6 +12,7 @@ import { useUserDispatch, login } from "../contexts";
 import { LOCATOR_LOGIN_FORM, routes } from "../constants";
 import { useSnackbar } from "notistack";
 import { TextValidator, ValidatorForm } from "react-material-ui-form-validator";
+import PasswordField from "../components/PasswordField";
 
 const LoginForm = () => {
   const location = useLocation();
@@ -36,8 +37,6 @@ const LoginForm = () => {
       );
   };
 
-  const errorForTwoChar = "Enter at least two characters.";
-
   return (
     <ValidatorForm onSubmit={handleSubmit} instantValidate>
       <Card variant="outlined">
@@ -64,22 +63,9 @@ const LoginForm = () => {
             </Grid>
 
             <Grid item>
-              <TextValidator
-                validators={["minStringLength:2"]}
-                errorMessages={[errorForTwoChar]}
-                id="password"
-                name="password"
-                value={password}
-                label={"Password"}
-                type="password"
-                variant="outlined"
-                required
-                fullWidth
-                inputProps={{
-                  onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
-                    setPassword(event.target.value),
-                  "data-testid": "password",
-                }}
+              <PasswordField
+                password={password}
+                setPassword={setPassword}
               />
             </Grid>
           </Grid>

src/components/PasswordField.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import {
+  IconButton,
+  InputAdornment,
+} from "@mui/material";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+import { TextValidator } from "react-material-ui-form-validator";
+
+interface PasswordFieldProps {
+    password: string;
+    setPassword: React.Dispatch<React.SetStateAction<string>>;
+    label?: string;
+}
+
+const PasswordField = ({password, setPassword, label = "Password" }: PasswordFieldProps) => {
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
+
+  const handleMouseDownPassword = (
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => {
+    event.preventDefault();
+  };
+
+  const errorForTwoChar = "Enter at least two characters.";
+
+  return (
+    <TextValidator
+      validators={["minStringLength:2"]}
+      errorMessages={[errorForTwoChar]}
+      id="password"
+      name="password"
+      value={password}
+      label={label}
+      type={showPassword ? "text" : "password"}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton
+              aria-label="toggle password visibility"
+              onClick={handleClickShowPassword}
+              onMouseDown={handleMouseDownPassword}
+              edge="end"
+            >
+              {showPassword ? <VisibilityOff /> : <Visibility />}
+            </IconButton>
+          </InputAdornment>
+        ),
+      }}
+      variant="outlined"
+      required
+      fullWidth
+      inputProps={{
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
+          setPassword(event.target.value),
+        "data-testid": "password",
+      }}
+    />
+  );
+};
+
+export default PasswordField;

src/components/RegisterForm.tsx

@@ -1,11 +1,18 @@
 import React, { useState, FormEvent } from "react";
-import { Button, Grid, Card, CardContent, CardActions } from "@mui/material";
+import {
+  Button,
+  Grid,
+  Card,
+  CardContent,
+  CardActions,
+} from "@mui/material";
 import { useUserDispatch, login } from "../contexts";
 import { usersService } from "../services";
 import { useSnackbar } from "notistack";
 import { TextValidator, ValidatorForm } from "react-material-ui-form-validator";
 import { useNavigate } from "react-router-dom";
 import { routes } from "../constants";
+import PasswordField from "../components/PasswordField";
 
 const RegisterForm = () => {
   const navigate = useNavigate();
@@ -32,7 +39,7 @@ const RegisterForm = () => {
         }),
       );
   };
-
+  
   const errorForTwoChar = "Enter at least two characters.";
 
   return (
@@ -98,22 +105,9 @@ const RegisterForm = () => {
               />
             </Grid>
             <Grid item>
-              <TextValidator
-                validators={["minStringLength:2"]}
-                errorMessages={[errorForTwoChar]}
-                id="password"
-                name="password"
-                value={password}
-                label={"Password"}
-                type="password"
-                variant="outlined"
-                required
-                fullWidth
-                inputProps={{
-                  onChange: (event: React.FormEvent<HTMLInputElement>) =>
-                    setPassword(event.target.value),
-                  "data-testid": "password",
-                }}
+              <PasswordField
+                password={password}
+                setPassword={setPassword}
               />
             </Grid>
           </Grid>

src/pages/ProfilePage.tsx

@@ -27,6 +27,7 @@ import { useSnackbar } from "notistack";
 import ProjectSelect from "../components/ProjectSelect";
 import { TextValidator, ValidatorForm } from "react-material-ui-form-validator";
 import { Role } from "../types";
+import PasswordField from "../components/PasswordField";
 
 const ProfilePage = () => {
   const { enqueueSnackbar } = useSnackbar();
@@ -201,23 +202,10 @@ const ProfilePage = () => {
                   <CardContent>
                     <Grid container spacing={2}>
                       <Grid item xs={12}>
-                        <TextValidator
-                          validators={["minStringLength:2"]}
-                          errorMessages={[errorForTwoChar]}
-                          id="password"
-                          name="password"
-                          value={password}
+                        <PasswordField
+                          password={password}
+                          setPassword={setPassword}
                           label={"New password"}
-                          type="password"
-                          variant="outlined"
-                          required
-                          fullWidth
-                          inputProps={{
-                            onChange: (
-                              event: React.ChangeEvent<HTMLInputElement>,
-                            ) => setPassword(event.target.value),
-                            "data-testid": "password",
-                          }}
                         />
                       </Grid>
                     </Grid>