PasswordField Initial Functionality completed

This commit is contained in:
Simon 2024-07-01 20:24:17 -04:00
parent 6f0453ab1d
commit a098f99c2d
2 changed files with 15 additions and 9 deletions

View File

@ -1,4 +1,4 @@
import { TextField, styled } from "@mui/material";
import { InputAdornment, TextField, TextFieldProps, styled } from "@mui/material";
import { useState } from 'react'
export const CustomInput = styled(TextField)({
@ -41,7 +41,7 @@ export const CustomInput = styled(TextField)({
});
export const PasswordField = ({ ...props }) => {
export const PasswordField: React.FunctionComponent<TextFieldProps> = ({ ...props }) => {
const [canViewPassword, setCanViewPassword] = useState(false);
return (
<div style={{
@ -50,15 +50,20 @@ export const PasswordField = ({ ...props }) => {
<CustomInput
type={canViewPassword ? 'text' : 'password'}
id="standard-adornment-password"
InputProps={{
endAdornment: (
<InputAdornment position="end" style={{
cursor: 'pointer'
}} onClick={() => {
setCanViewPassword((prevState) => !prevState)
}}>
{canViewPassword ? '🙀' : '😸'}
</InputAdornment>
)
}}
{...props}
/>
<button type='button' style={{
position: 'absolute',
right: 0,
top: '50%'
}} onClick={() => {
setCanViewPassword((prevState) => !prevState)
}}>{canViewPassword ? '🙀' : '😸'}</button>
</div>
)
}

1
src/components/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './PasswordField/PasswordField';