From 87ed5245247cc9569651dffd4c46b664152391ff Mon Sep 17 00:00:00 2001
From: SKairinos <skairinos@gmail.com>
Date: Tue, 20 Jun 2023 18:07:15 +0100
Subject: [PATCH] fix: simplify password field

---
 src/components/form/NewPasswordField.tsx | 85 ------------------------
 src/components/form/PasswordField.tsx    | 45 +++++++++++++
 src/components/form/index.ts             |  4 +-
 3 files changed, 47 insertions(+), 87 deletions(-)
 delete mode 100644 src/components/form/NewPasswordField.tsx
 create mode 100644 src/components/form/PasswordField.tsx

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<TextFieldProps, (
-  'type' |
-  'name'
-)> { }
-
-interface RepeatPasswordFieldProps extends Omit<PasswordFieldProps, (
-  'validate'
-)> { }
-
-export interface NewPasswordFieldProps {
-  passwordFieldProps?: PasswordFieldProps,
-  repeatPasswordFieldProps?: RepeatPasswordFieldProps
-}
-
-const NewPasswordField: React.FC<NewPasswordFieldProps> = ({
-  // 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<YupStringSchema>();
-
-  const endAdornment: InputBaseProps['endAdornment'] = (
-    <InputAdornment position='end'>
-      <SecurityIcon />
-    </InputAdornment>
-  );
-
-  passwordFieldProps.onKeyUp = wrap({
-    after: (event: React.KeyboardEvent<HTMLDivElement>) => {
-      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 <>
-    <TextField
-      type='password'
-      name='password'
-      required
-      {...passwordFieldProps}
-    />
-    <TextField
-      type='password'
-      name='repeatPassword'
-      required
-      validate={validate}
-      {...repeatPasswordFieldProps}
-    />
-  </>;
-};
-
-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<TextFieldProps, (
+  'type' |
+  'name' |
+  'required'
+)> {
+  name?: string;
+}
+
+const PasswordField: React.FC<PasswordFieldProps> = ({
+  name = 'password',
+  InputProps = {},
+  validate = YupString(),
+  ...otherTextFieldProps
+}) => {
+  return (
+    <TextField
+      required
+      type='password'
+      name={name}
+      validate={validate}
+      InputProps={{
+        ...InputProps,
+        endAdornment: (
+          <InputAdornment position='end'>
+            <SecurityIcon />
+          </InputAdornment>
+        )
+      }}
+      {...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
 };