diff --git a/src/components/form/NewPasswordField.tsx b/src/components/form/NewPasswordField.tsx deleted file mode 100644 index ddd649f7..00000000 --- a/src/components/form/NewPasswordField.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import { - InputAdornment, - InputBaseProps -} from '@mui/material'; -import { - Security as SecurityIcon -} from '@mui/icons-material'; -import { - string as YupString, - StringSchema as YupStringSchema -} from 'yup'; - -import { wrap } from '../../helpers'; -import TextField, { TextFieldProps } from './TextField'; - -interface PasswordFieldProps extends Omit { } - -interface RepeatPasswordFieldProps extends Omit { } - -export interface NewPasswordFieldProps { - passwordFieldProps?: PasswordFieldProps, - repeatPasswordFieldProps?: RepeatPasswordFieldProps -} - -const NewPasswordField: React.FC = ({ - // eslint-disable-next-line @typescript-eslint/consistent-type-assertions - passwordFieldProps = {} as PasswordFieldProps, - // eslint-disable-next-line @typescript-eslint/consistent-type-assertions - repeatPasswordFieldProps = {} as RepeatPasswordFieldProps -}) => { - const [validate, setValidate] = React.useState(); - - const endAdornment: InputBaseProps['endAdornment'] = ( - - - - ); - - passwordFieldProps.onKeyUp = wrap({ - after: (event: React.KeyboardEvent) => { - setValidate(YupString().test( - 'matches-password', - 'doesn\'t match password', - (repeatPassword) => { - const password = (event.target as HTMLTextAreaElement).value; - return password === repeatPassword; - } - )); - } - }, passwordFieldProps.onKeyUp); - - passwordFieldProps['InputProps'] = { - endAdornment, - ...('InputProps' in passwordFieldProps && passwordFieldProps.InputProps) - }; - - repeatPasswordFieldProps['InputProps'] = { - endAdornment, - ...('InputProps' in repeatPasswordFieldProps && repeatPasswordFieldProps.InputProps) - }; - - return <> - - - ; -}; - -export default NewPasswordField; diff --git a/src/components/form/PasswordField.tsx b/src/components/form/PasswordField.tsx new file mode 100644 index 00000000..86e12953 --- /dev/null +++ b/src/components/form/PasswordField.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { + InputAdornment +} from '@mui/material'; +import { + Security as SecurityIcon +} from '@mui/icons-material'; +import { string as YupString } from 'yup'; + +import TextField, { TextFieldProps } from './TextField'; + +export interface PasswordFieldProps extends Omit { + name?: string; +} + +const PasswordField: React.FC = ({ + name = 'password', + InputProps = {}, + validate = YupString(), + ...otherTextFieldProps +}) => { + return ( + + + + ) + }} + {...otherTextFieldProps} + /> + ); +}; + +export default PasswordField; diff --git a/src/components/form/index.ts b/src/components/form/index.ts index d209e7bb..99488265 100644 --- a/src/components/form/index.ts +++ b/src/components/form/index.ts @@ -2,7 +2,7 @@ import AutocompleteField, { AutocompleteFieldProps } from './AutocompleteField'; import CheckboxField, { CheckboxFieldProps } from './CheckboxField'; import EmailField, { EmailFieldProps } from './EmailField'; import Form, { FormProps } from './Form'; -import NewPasswordField, { NewPasswordFieldProps } from './NewPasswordField'; +import PasswordField, { PasswordFieldProps } from './PasswordField'; import SubmitButton, { SubmitButtonProps } from './SubmitButton'; import TextField, { TextFieldProps } from './TextField'; @@ -11,7 +11,7 @@ export { CheckboxField, type CheckboxFieldProps, EmailField, type EmailFieldProps, Form, type FormProps, - NewPasswordField, type NewPasswordFieldProps, + PasswordField, type PasswordFieldProps, SubmitButton, type SubmitButtonProps, TextField, type TextFieldProps };