add visibility icon

src/components/form/PasswordField.tsx

@@ -1,6 +1,9 @@
-import { Security as SecurityIcon } from "@mui/icons-material"
-import { InputAdornment } from "@mui/material"
-import type { FC } from "react"
+import {
+  Visibility as VisibilityIcon,
+  VisibilityOff as VisibilityOffIcon,
+} from "@mui/icons-material"
+import { IconButton, InputAdornment } from "@mui/material"
+import { useState, type FC } from "react"
 import { string as YupString } from "yup"
 
 import TextField, { type TextFieldProps } from "./TextField"
@@ -19,17 +22,26 @@ const PasswordField: FC<PasswordFieldProps> = ({
   InputProps = {},
   ...otherTextFieldProps
 }) => {
+  const [isVisible, setIsVisible] = useState(false)
+
   return (
     <TextField
-      type="password"
+      type={isVisible ? "text" : "password"}
       name={name}
       label={label}
       schema={schema}
       placeholder={placeholder}
       InputProps={{
         endAdornment: (
           <InputAdornment position="end">
-            <SecurityIcon />
+            <IconButton
+              onClick={() => {
+                setIsVisible(previousIsVisible => !previousIsVisible)
+              }}
+              edge="end"
+            >
+              {isVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
+            </IconButton>
           </InputAdornment>
         ),
         ...InputProps,