From 099dc1e9b797967609dead06d4025081fce51944 Mon Sep 17 00:00:00 2001 From: SKairinos Date: Wed, 26 Jun 2024 12:17:11 +0000 Subject: [PATCH] add visibility icon --- src/components/form/PasswordField.tsx | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/form/PasswordField.tsx b/src/components/form/PasswordField.tsx index e92a4449..593af687 100644 --- a/src/components/form/PasswordField.tsx +++ b/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,9 +22,11 @@ const PasswordField: FC = ({ InputProps = {}, ...otherTextFieldProps }) => { + const [isVisible, setIsVisible] = useState(false) + return ( = ({ InputProps={{ endAdornment: ( - + { + setIsVisible(previousIsVisible => !previousIsVisible) + }} + edge="end" + > + {isVisible ? : } + ), ...InputProps,