From f132600ebfc2f6ba5c9e847a4d01798b3f8f08cb Mon Sep 17 00:00:00 2001
From: Abdulmalik Yusuf <31839174+abdulmalikyusuf@users.noreply.github.com>
Date: Fri, 23 Aug 2024 22:23:39 +0100
Subject: [PATCH] Feat: added password visibility toggle to input fields.

---
 .../account/_component.tsx/password-field.tsx | 55 +++++++++++++++++++
 .../account/_component.tsx/password.tsx       | 38 +++++--------
 2 files changed, 68 insertions(+), 25 deletions(-)
 create mode 100644 src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password-field.tsx

diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password-field.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password-field.tsx
new file mode 100644
index 000000000..a4cb327d4
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password-field.tsx
@@ -0,0 +1,55 @@
+import { Eye, EyeOff } from "lucide-react";
+import { useState } from "react";
+import { UseFormRegister } from "react-hook-form";
+
+import { cn } from "~/lib/utils";
+import { PasswordFormData } from "./schema";
+
+type PasswordFieldProperties = {
+  register: UseFormRegister<PasswordFormData>;
+  name: "currentPassword" | "newPassword" | "confirmPassword";
+  errorMessage: string | undefined;
+};
+
+function PasswordField({
+  register,
+  name,
+  errorMessage,
+}: PasswordFieldProperties) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const togglePasswordVisibility = () => {
+    setShowPassword((previousState) => !previousState);
+  };
+  return (
+    <div
+      className={cn(
+        "flex h-10 w-full items-center gap-2 rounded-md border border-border bg-background px-4 py-2 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
+        errorMessage && "border-red-500",
+      )}
+    >
+      <input
+        className={cn(
+          "w-full bg-transparent text-sm text-foreground transition-colors placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        )}
+        placeholder="Enter new password"
+        type={showPassword ? "text" : "password"}
+        {...register(name)}
+      />
+      <button
+        type="button"
+        onClick={togglePasswordVisibility}
+        tabIndex={-1}
+        className="ml-2 text-gray-600 hover:text-gray-800 focus:outline-none"
+      >
+        {showPassword ? (
+          <EyeOff className="size-4" />
+        ) : (
+          <Eye className="size-4" />
+        )}
+      </button>
+    </div>
+  );
+}
+
+export default PasswordField;
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
index 4b5a99a26..5a5de1eee 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
@@ -10,7 +10,7 @@ import { getApiUrl } from "~/actions/getApiUrl";
 import CustomButton from "~/components/common/common-button/common-button";
 import PasswordSuccessfulModal from "~/components/common/modals/password-successful";
 import { toast } from "~/components/ui/use-toast";
-import { cn } from "~/lib/utils";
+import PasswordField from "./password-field";
 import { passwordSchema, type PasswordFormData } from "./schema";
 
 const Password = () => {
@@ -77,14 +77,10 @@ const Password = () => {
                 Current Password
               </label>
               <div className="flex w-full items-center">
-                <input
-                  className={cn(
-                    "flex h-10 w-full flex-col gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm text-foreground ring-offset-background transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-                    errors.currentPassword && "border-red-500",
-                  )}
-                  placeholder="Enter current password"
-                  type="password"
-                  {...register("currentPassword")}
+                <PasswordField
+                  register={register}
+                  name="currentPassword"
+                  errorMessage={errors?.currentPassword?.message}
                 />
               </div>
             </div>
@@ -100,14 +96,10 @@ const Password = () => {
                 New Password
               </label>
               <div className="flex w-full items-center">
-                <input
-                  className={cn(
-                    "flex h-10 w-full flex-col gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm text-foreground ring-offset-background transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-                    errors.newPassword && "border-red-500",
-                  )}
-                  placeholder="Enter new password"
-                  type="password"
-                  {...register("newPassword")}
+                <PasswordField
+                  register={register}
+                  name="newPassword"
+                  errorMessage={errors?.newPassword?.message}
                 />
               </div>
             </div>
@@ -123,14 +115,10 @@ const Password = () => {
                 Confirm new password
               </label>
               <div className="flex w-full items-center">
-                <input
-                  className={cn(
-                    "flex h-10 w-full flex-col gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm text-foreground ring-offset-background transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-                    errors.confirmPassword && "border-red-500",
-                  )}
-                  placeholder="Confrim new Password"
-                  type="password"
-                  {...register("confirmPassword")}
+                <PasswordField
+                  register={register}
+                  name="confirmPassword"
+                  errorMessage={errors?.confirmPassword?.message}
                 />
               </div>
             </div>