diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/src/components/AdminLogin.tsx | 26 |
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 |