Created PasswordInput component

cesium · Nov 13, 2023 · 1a85bd6 · 1a85bd6
1 parent 7800951
commit 1a85bd6
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 131 deletions.
diff --git a/components/PasswordInput/index.tsx b/components/PasswordInput/index.tsx
@@ -0,0 +1,57 @@
+import { forwardRef, InputHTMLAttributes, useState } from "react";
+
+import Input from "@components/Input";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  text?: string;
+  autocomplete?: string;
+  fgColor: string;
+  bgColor: string;
+  enabled?: boolean;
+}
+
+export default forwardRef<HTMLInputElement, Props>(function PasswordInput(
+  {
+    text = "PASSWORD",
+    id = "password",
+    name = "password",
+    type = "password",
+    autocomplete = "current-password",
+    fgColor,
+    bgColor,
+    ...rest
+  },
+  ref
+) {
+
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+
+  return (
+    <Input
+      {...rest}
+      text={text}
+      id={id}
+      name={name}
+      type={isPasswordVisible ? "text" : "password"}
+      fgColor="white"
+      bgColor="primary"
+      autoComplete="current-password"
+      right={
+        <FontAwesomeIcon
+          className="mx-2"
+          onClick={togglePasswordVisibility}
+          icon={isPasswordVisible ? faEyeSlash : faEye}
+        />
+      }
+      ref={ref}
+    />
+  );
+});
diff --git a/layout/Login/components/LoginForm/index.tsx b/layout/Login/components/LoginForm/index.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useRef } from "react";
 
 import { useAuth } from "@context/Auth";
 
@@ -7,15 +7,12 @@ import Text from "@layout/moonstone/authentication/Text";
 
 import Form from "@components/Form";
 import Input from "@components/Input";
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import PasswordInput from "@components/PasswordInput";
 
 export default function LoginForm() {
   const { errors, login, isLoading } = useAuth();
   const emailRef = useRef(null);
   const passwordRef = useRef(null);
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
   const onFinish = (event) => {
     event.preventDefault();
@@ -26,9 +23,6 @@ export default function LoginForm() {
     login({ email, password });
   };
 
-  const togglePasswordVisibility = () => {
-    setIsPasswordVisible(!isPasswordVisible);
-  };
 
   return (
     <div className="mt-8">
@@ -44,21 +38,10 @@ export default function LoginForm() {
           ref={emailRef}
         />
         <div>
-          <Input
+          <PasswordInput
             text="YOUR PASSWORD"
-            id="password"
-            name="password"
-            type={isPasswordVisible ? "text" : "password"}
             fgColor="white"
             bgColor="primary"
-            autoComplete="current-password"
-            right={
-              <FontAwesomeIcon
-                className="mx-2"
-                onClick={togglePasswordVisibility}
-                icon={isPasswordVisible ? faEyeSlash : faEye}
-              />
-            }
             ref={passwordRef}
           />
         </div>

diff --git a/layout/ResetPassword/components/ResetPasswordForm/index.tsx b/layout/ResetPassword/components/ResetPasswordForm/index.tsx
@@ -9,10 +9,7 @@ import Button from "@components/Button";
 import ImageButton from "@components/ImageButton";
 
 import Form from "@components/Form";
-import Input from "@components/Input";
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import PasswordInput from "@components/PasswordInput";
 
 export default function ResetPasswordForm() {
   const router = useRouter();
@@ -23,9 +20,6 @@ export default function ResetPasswordForm() {
   const passwordRef = useRef(null);
   const passwordConfirmationRef = useRef(null);
   const [errorMsg, updateErrorMsg] = useState(null);
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-  const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] =
-    useState(false);
 
   function onSubmit(event) {
     event.preventDefault();
@@ -53,50 +47,22 @@ export default function ResetPasswordForm() {
       });
   }
 
-  const togglePasswordVisibility = () => {
-    setIsPasswordVisible(!isPasswordVisible);
-  };
-
-  const toggleConfirmPasswordVisibility = () => {
-    setIsConfirmPasswordVisible(!isConfirmPasswordVisible);
-  };
-
   return (
     <>
       {success === null && (
         <Form onSubmit={onSubmit}>
-          <Input
+          <PasswordInput
             text="PASSWORD"
-            id="password"
-            name="password"
-            type={isPasswordVisible ? "text" : "password"}
-            autoComplete="current-password"
             fgColor="white"
             bgColor="primary"
-            right={
-              <FontAwesomeIcon
-                className="mx-2"
-                onClick={togglePasswordVisibility}
-                icon={isPasswordVisible ? faEyeSlash : faEye}
-              />
-            }
             ref={passwordRef}
           />
-          <Input
+          <PasswordInput
             text="CONFIRM PASSWORD"
             id="confirm"
             name="confirm"
-            type={isConfirmPasswordVisible ? "text" : "password"}
-            autoComplete="current-password"
             fgColor="white"
             bgColor="primary"
-            right={
-              <FontAwesomeIcon
-                className="mx-2"
-                onClick={toggleConfirmPasswordVisibility}
-                icon={isConfirmPasswordVisible ? faEyeSlash : faEye}
-              />
-            }
             ref={passwordConfirmationRef}
           />
           <p className="mt-10 mb-10 text-center font-iregular text-failure">

diff --git a/layout/SignUp/components/SignUpForm/index.tsx b/layout/SignUp/components/SignUpForm/index.tsx
@@ -5,12 +5,10 @@ import { useAuth } from "@context/Auth";
 import Button from "@components/Button";
 import Form from "@components/Form";
 import Input from "@components/Input";
+import PasswordInput from "@components/PasswordInput";
 
 import BarebonesQRScanner from "@components/QRScanner/BarebonesQRScanner";
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
-
 export default function SignUpForm() {
   const { sign_up, isLoading, errors } = useAuth();
 
@@ -21,10 +19,6 @@ export default function SignUpForm() {
   const [password_confirmation, updatePasswordConfirmation] = useState("");
   const [uuid, setUUID] = useState();
 
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-  const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] =
-    useState(false);
-
   const [local_error, updateError] = useState("");
   const [scanned, updateScanned] = useState(false);
   const [scanning, updateScanning] = useState(false);
@@ -70,14 +64,6 @@ export default function SignUpForm() {
     }
   };
 
-  const togglePasswordVisibility = () => {
-    setIsPasswordVisible(!isPasswordVisible);
-  };
-
-  const toggleConfirmPasswordVisibility = () => {
-    setIsConfirmPasswordVisible(!isConfirmPasswordVisible);
-  };
-
   return (
     <>
       <Form onSubmit={onFinish}>
@@ -107,39 +93,15 @@ export default function SignUpForm() {
           bgColor="primary"
           onChange={(e) => updateNickname(e.currentTarget.value)}
         />
-        <Input
+        <PasswordInput
           text="PASSWORD"
-          id="password"
-          name="password"
-          type={isPasswordVisible ? "text" : "password"}
-          autoComplete="current-password"
           fgColor="white"
           bgColor="primary"
-          onChange={(e) => updatePassword(e.currentTarget.value)}
-          right={
-            <FontAwesomeIcon
-              className="mx-2"
-              onClick={togglePasswordVisibility}
-              icon={isPasswordVisible ? faEyeSlash : faEye}
-            />
-          }
         />
-        <Input
+        <PasswordInput
           text="CONFIRM PASSWORD"
-          id="password"
-          name="password"
-          type={isConfirmPasswordVisible ? "text" : "password"}
-          autoComplete="current-password"
           fgColor="white"
           bgColor="primary"
-          onChange={(e) => updatePasswordConfirmation(e.currentTarget.value)}
-          right={
-            <FontAwesomeIcon
-              className="mx-2"
-              onClick={toggleConfirmPasswordVisibility}
-              icon={isConfirmPasswordVisible ? faEyeSlash : faEye}
-            />
-          }
         />
         <Button
           text={scanning ? "STOP SCANNING" : "SCAN QR"}

diff --git a/pages/register/[uuid].js b/pages/register/[uuid].js
@@ -9,13 +9,11 @@ import Card from "@components/Card";
 import Return from "@components/Return";
 import Form from "@components/Form";
 import Input from "@components/Input";
+import PasswordInput from "@components/PasswordInput";
 
 import Title from "@layout/moonstone/authentication/Title";
 import Text from "@layout/moonstone/authentication/Text";
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
-
 function Register() {
   const { sign_up, errors, isLoading } = useAuth();
   const router = useRouter();
@@ -27,10 +25,6 @@ function Register() {
   const [password, updatePassword] = useState("");
   const [password_confirmation, updatePasswordConfirmation] = useState("");
 
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-  const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] =
-    useState(false);
-
   const onFinish = (e) => {
     e.preventDefault();
     sign_up({
@@ -75,39 +69,15 @@ function Register() {
             bgColor="primary"
             onChange={(e) => updateNickname(e.currentTarget.value)}
           />
-          <Input
+          <PasswordInput
             text="PASSWORD"
-            id="password"
-            name="password"
-            type={isPasswordVisible ? "text" : "password"}
-            autoComplete="current-password"
             fgColor="white"
             bgColor="primary"
-            onChange={(e) => updatePassword(e.currentTarget.value)}
-            right={
-              <FontAwesomeIcon
-                className="mx-2"
-                onClick={togglePasswordVisibility}
-                icon={isPasswordVisible ? faEyeSlash : faEye}
-              />
-            }
           />
-          <Input
+          <PasswordInput
             text="CONFIRM PASSWORD"
-            id="password"
-            name="password"
-            type={isConfirmPasswordVisible ? "text" : "password"}
-            autoComplete="current-password"
             fgColor="white"
             bgColor="primary"
-            onChange={(e) => updatePasswordConfirmation(e.currentTarget.value)}
-            right={
-              <FontAwesomeIcon
-                className="mx-2"
-                onClick={toggleConfirmPasswordVisibility}
-                icon={isConfirmPasswordVisible ? faEyeSlash : faEye}
-              />
-            }
           />
           <Button
             type="submit"