Toggle password visibility

1 files changed, 23 insertions, 3 deletions

diff --git a/client/src/components/AdminLogin.tsx b/client/src/components/AdminLogin.tsx
index bfc96d2..f1f676f 100644
--- a/client/src/components/AdminLogin.tsx
+++ b/client/src/components/AdminLogin.tsx
@@ -1,6 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Button, Paper, TextField, Typography } from '@mui/material';
+import {
+  Button,
+  Paper,
+  TextField,
+  Typography,
+  IconButton,
+  InputAdornment,
+} from '@mui/material';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
 import { useForm } from 'react-hook-form';
 import { useAppDispatch } from '../hooks';
 import { setAdmin } from '../slices/auth/adminSlice';
@@ -14,6 +22,7 @@ function GuestLogin() {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const [login] = useLoginAdminMutation();
+  const [showPassword, setShowPassword] = useState(false);
 
   const {
     register,
@@ -49,6 +58,8 @@ function GuestLogin() {
     }
   };
 
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
+
   return (
     <form
       style={{
@@ -89,9 +100,18 @@ function GuestLogin() {
         <TextField
           label="Password"
           variant="outlined"
-          type="password"
+          type={showPassword ? 'text' : 'password'}
           margin="normal"
           fullWidth
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton onClick={handleClickShowPassword}>
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
           error={!!errors.password}
           helperText={errors.password?.message}
           required