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>
   );

layout/Login/components/LoginForm/index.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 
 import { useAuth } from "@context/Auth";
 
@@ -8,10 +8,14 @@ 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";
+
 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();
@@ -22,6 +26,10 @@ export default function LoginForm() {
     login({ email, password });
   };
 
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+
   return (
     <div className="mt-8">
       <Form onSubmit={onFinish}>
@@ -35,16 +43,25 @@ 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>
+          <Input
+            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>
         <Text
           padding="6"
           text="Forgot your password?"

layout/ResetPassword/components/ResetPasswordForm/index.tsx

@@ -11,6 +11,9 @@ 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";
+
 export default function ResetPasswordForm() {
   const router = useRouter();
   const { token } = router.query;
@@ -20,6 +23,9 @@ 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();
@@ -47,6 +53,14 @@ export default function ResetPasswordForm() {
       });
   }
 
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+
+  const toggleConfirmPasswordVisibility = () => {
+    setIsConfirmPasswordVisible(!isConfirmPasswordVisible);
+  };
+
   return (
     <>
       {success === null && (
@@ -55,20 +69,34 @@ export default function ResetPasswordForm() {
             text="PASSWORD"
             id="password"
             name="password"
-            type="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
             text="CONFIRM PASSWORD"
             id="confirm"
             name="confirm"
-            type="password"
+            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">

layout/SignUp/components/SignUpForm/index.tsx

@@ -8,6 +8,9 @@ import Input from "@components/Input";
 
 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();
 
@@ -18,6 +21,10 @@ 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);
@@ -63,6 +70,14 @@ export default function SignUpForm() {
     }
   };
 
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+
+  const toggleConfirmPasswordVisibility = () => {
+    setIsConfirmPasswordVisible(!isConfirmPasswordVisible);
+  };
+
   return (
     <>
       <Form onSubmit={onFinish}>
@@ -96,21 +111,35 @@ export default function SignUpForm() {
           text="PASSWORD"
           id="password"
           name="password"
-          type="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
           text="CONFIRM PASSWORD"
           id="password"
           name="password"
-          type="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"}

pages/register/[uuid].js

@@ -13,6 +13,9 @@ import Input from "@components/Input";
 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();
@@ -24,6 +27,10 @@ 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({
@@ -72,21 +79,35 @@ function Register() {
             text="PASSWORD"
             id="password"
             name="password"
-            type="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
             text="CONFIRM PASSWORD"
             id="password"
             name="password"
-            type="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"