feat: add password visibility button to authentication pages

components/Input/index.tsx

@@ -1,11 +1,12 @@
-import { forwardRef, InputHTMLAttributes } from "react";
+import { forwardRef, InputHTMLAttributes, ReactNode } from "react";
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
   text: string;
   autocomplete?: string;
   fgColor: string;
   bgColor: string;
   enabled?: boolean;
+  right?: ReactNode;
 }
 
 export default forwardRef<HTMLInputElement, Props>(function Input(
@@ -20,6 +21,7 @@ export default forwardRef<HTMLInputElement, Props>(function Input(
     bgColor,
     onChange,
     enabled,
+    right,
     ...rest
   },
   ref
@@ -43,20 +45,23 @@ export default forwardRef<HTMLInputElement, Props>(function Input(
       >
         {text}
       </label>
-      <div className="mt-2">
+      <div
+        className={`text-iregular mt-2 flex items-center ${textColor} ${backColor} appearance-none rounded-full border border-gray-300 px-3 py-2 pl-6 placeholder-gray-400 shadow-sm sm:text-sm`}
+      >
         <input
           id={id}
           name={name}
           type={type}
           autoComplete={autocomplete}
           value={value}
           required
-          className={`text-iregular ${textColor} ${backColor} block w-full appearance-none rounded-full border border-gray-300 px-3 py-2 pl-6 placeholder-gray-400 shadow-sm focus:outline-none sm:text-sm`}
+          className="w-full bg-transparent outline-none"
           onChange={onChange}
           disabled={enabled == false}
           ref={ref}
           {...rest}
         />
+        {right}
       </div>
     </div>
   );

components/PasswordInput/index.tsx

@@ -0,0 +1,55 @@
+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 cursor-pointer"
+          onClick={togglePasswordVisibility}
+          icon={isPasswordVisible ? faEyeSlash : faEye}
+        />
+      }
+      ref={ref}
+    />
+  );
+});

layout/Login/components/LoginForm/index.tsx

@@ -7,6 +7,7 @@ import Text from "@layout/moonstone/authentication/Text";
 
 import Form from "@components/Form";
 import Input from "@components/Input";
+import PasswordInput from "@components/PasswordInput";
 
 export default function LoginForm() {
   const { errors, login, isLoading } = useAuth();
@@ -35,16 +36,14 @@ export default function LoginForm() {
           autoComplete="email"
           ref={emailRef}
         />
-        <Input
-          text="YOUR PASSWORD"
-          id="password"
-          name="password"
-          type="password"
-          fgColor="white"
-          bgColor="primary"
-          autoComplete="current-password"
-          ref={passwordRef}
-        />
+        <div>
+          <PasswordInput
+            text="YOUR PASSWORD"
+            fgColor="white"
+            bgColor="primary"
+            ref={passwordRef}
+          />
+        </div>
         <Text
           padding="6"
           text="Forgot your password?"

layout/ResetPassword/components/ResetPasswordForm/index.tsx

@@ -9,7 +9,7 @@ import Button from "@components/Button";
 import ImageButton from "@components/ImageButton";
 
 import Form from "@components/Form";
-import Input from "@components/Input";
+import PasswordInput from "@components/PasswordInput";
 
 export default function ResetPasswordForm() {
   const router = useRouter();
@@ -51,22 +51,16 @@ export default function ResetPasswordForm() {
     <>
       {success === null && (
         <Form onSubmit={onSubmit}>
-          <Input
+          <PasswordInput
             text="PASSWORD"
-            id="password"
-            name="password"
-            type="password"
-            autoComplete="current-password"
             fgColor="white"
             bgColor="primary"
             ref={passwordRef}
           />
-          <Input
+          <PasswordInput
             text="CONFIRM PASSWORD"
             id="confirm"
             name="confirm"
-            type="password"
-            autoComplete="current-password"
             fgColor="white"
             bgColor="primary"
             ref={passwordConfirmationRef}

layout/SignUp/components/SignUpForm/index.tsx

@@ -5,6 +5,7 @@ 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";
 
@@ -92,25 +93,11 @@ export default function SignUpForm() {
           bgColor="primary"
           onChange={(e) => updateNickname(e.currentTarget.value)}
         />
-        <Input
-          text="PASSWORD"
-          id="password"
-          name="password"
-          type="password"
-          autoComplete="current-password"
-          fgColor="white"
-          bgColor="primary"
-          onChange={(e) => updatePassword(e.currentTarget.value)}
-        />
-        <Input
+        <PasswordInput text="PASSWORD" fgColor="white" bgColor="primary" />
+        <PasswordInput
           text="CONFIRM PASSWORD"
-          id="password"
-          name="password"
-          type="password"
-          autoComplete="current-password"
           fgColor="white"
           bgColor="primary"
-          onChange={(e) => updatePasswordConfirmation(e.currentTarget.value)}
         />
         <Button
           text={scanning ? "STOP SCANNING" : "SCAN QR"}

pages/register/[uuid].js

@@ -9,6 +9,7 @@ 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";
@@ -68,25 +69,11 @@ function Register() {
             bgColor="primary"
             onChange={(e) => updateNickname(e.currentTarget.value)}
           />
-          <Input
-            text="PASSWORD"
-            id="password"
-            name="password"
-            type="password"
-            autoComplete="current-password"
-            fgColor="white"
-            bgColor="primary"
-            onChange={(e) => updatePassword(e.currentTarget.value)}
-          />
-          <Input
+          <PasswordInput text="PASSWORD" fgColor="white" bgColor="primary" />
+          <PasswordInput
             text="CONFIRM PASSWORD"
-            id="password"
-            name="password"
-            type="password"
-            autoComplete="current-password"
             fgColor="white"
             bgColor="primary"
-            onChange={(e) => updatePasswordConfirmation(e.currentTarget.value)}
           />
           <Button
             type="submit"