update visibility on pw

src/components/LoginPage/LoginForm.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { FormHelperText, SxProps } from "@mui/material";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+import { FormHelperText, IconButton, InputAdornment, SxProps } from "@mui/material";
 import Button from "@mui/material/Button";
 import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
@@ -41,6 +42,10 @@ const LoginForm: React.FC<{ sx?: SxProps }> = ({ sx }) => {
 
   const [serverError, setServerError] = useState<string>();
 
+  const [showPassword, setShowPassword] = useState(false);
+  const handleClickShowPassword = () => setShowPassword(!showPassword);
+  const handleMouseDownPassword = () => setShowPassword(!showPassword);
+
   const router = useRouter();
 
   const onSubmit: SubmitHandler<LoginFields> = async (data) => {
@@ -76,10 +81,23 @@ const LoginForm: React.FC<{ sx?: SxProps }> = ({ sx }) => {
       />
       <TextField
         label={t("Password")}
-        type="password"
+        type={showPassword ? "text" : "password"}
         {...register("password", { required: t("Please enter a password") })}
         error={Boolean(errors.password)}
         helperText={errors.password?.message}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
+              >
+                {showPassword ? <Visibility /> : <VisibilityOff />}
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
       />
       {serverError && (
         <FormHelperText error>