Use the HideableTextFormField component

tan12082001 · Dec 6, 2023 · 0eb5b60 · 0eb5b60
1 parent 1ca662f
commit 0eb5b60
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 15 deletions.
diff --git a/src/components/Form/FormComponent.js b/src/components/Form/FormComponent.js
@@ -51,7 +51,7 @@ const StyledForm = styled(Form)`
   }
 
   & > .margin {
-    gird-colum: span 2;
+    gird-column: span 2;
     margin-left: 15%;
     margin-right: 15%;
   }

diff --git a/src/components/Form/HideableTextFormField.js b/src/components/Form/HideableTextFormField.js
@@ -24,9 +24,8 @@ const HideableTextFormField = ({
   // apiKey,
   ...props
 }) => {
-  const [field, meta] = useField(props);
+  const [field, meta] = useField(name);
   const [showKey, setShowKey] = useState(false);
-
   const handleToggle = () => {
     setShowKey(!showKey);
   };
@@ -69,15 +68,6 @@ HideableTextFormField.propTypes = {
   // apiKey: PropTypes.string,
 };
 
-HideableTextFormField.defaultProps = {
-  lpiSrc: '',
-  rpiSrc: '',
-  className: '',
-  name: '',
-  id: '',
-  // apiKey: '',
-};
-
 const VisibiltyToggleIconsArea = styled.div`
   display: flex;
   margin-right: 1rem;

diff --git a/src/pages/Auth/SignIn/SigninForm.js b/src/pages/Auth/SignIn/SigninForm.js
@@ -7,6 +7,7 @@ import { TextInputField } from '../../../components/Form/FormField';
 // import { useEffect } from 'react';
 import { userLogin } from '../../../redux/thunk';
 // import { useSelector } from 'react-redux';
+import HideableTextFormField from '../../../components/Form/HideableTextFormField';
 
 const SignInForm = () => {
   const dispatch = useDispatch();
@@ -24,7 +25,7 @@ const SignInForm = () => {
       className="sign-in-form"
     >
       <TextInputField label="Email" name="email" placeholder="eg. example@example.com" />
-      <TextInputField label="Password" name="password" placeholder="eg. A1@_3er" />
+      <HideableTextFormField label="Password" name="password" />
       <FormSubmitButton type="submit" className="sign-up-submit">
         Log In
       </FormSubmitButton>

diff --git a/src/pages/Auth/SignUp/SignupForm.js b/src/pages/Auth/SignUp/SignupForm.js
@@ -6,6 +6,7 @@ import FormSubmitButton from '../../../components/Button/FormSubmitButton';
 import { TextInputField } from '../../../components/Form/FormField';
 // import { useEffect } from 'react';
 import { userSignUp } from '../../../redux/thunk';
+import HideableTextFormField from '../../../components/Form/HideableTextFormField';
 
 const SignUpForm = () => {
   const dispatch = useDispatch();
@@ -24,8 +25,8 @@ const SignUpForm = () => {
     >
       <TextInputField label="Name" name="userName" placeholder="eg. Jane Doe" />
       <TextInputField label="Email" name="email" placeholder="eg. example@example.com" />
-      <TextInputField label="Password" name="password" placeholder="eg. A1@_3er" />
-      <TextInputField label="Confirm Password" name="confirm_password" />
+      <HideableTextFormField label="Password" name="password" className="password_block" />
+      <HideableTextFormField label="Confirm Password" name="confirm_password" />
       <FormSubmitButton type="submit" className="sign-up-submit">
         Sign Up
       </FormSubmitButton>