From c94afb0a9570bf1c6d34fe1b62b1ebc9854827dd Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Thu, 15 Jan 2026 13:42:12 +0000
Subject: [PATCH] Update components/password.tsx

---
 components/password.tsx | 47 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 components/password.tsx

diff --git a/components/password.tsx b/components/password.tsx
new file mode 100644
index 0000000..cc2270a
--- /dev/null
+++ b/components/password.tsx
@@ -0,0 +1,47 @@
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React from "react";
+import { useState } from "react";
+
+import { Control, Path } from "react-hook-form";
+import { FieldValues } from "react-hook-form";
+
+export interface CommonReactHookFormProps<T extends FieldValues> {
+  name: Path<T>;
+  control: Control<T, any>;
+}
+
+interface PasswordProps
+  extends React.InputHTMLAttributes<
+    HTMLInputElement & CommonReactHookFormProps<FieldValues>
+  > {}
+
+function Password(props: PasswordProps) {
+  const [show, setShow] = useState(false);
+  return (
+    <div className="relative">
+      <input
+        id="password"
+        autoComplete="current-password"
+        className="block w-full bg-brand-dark-input rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset ring-zinc-800 text-white placeholder:text-gray-400 focus:ring-2 focus:ring-neutral-400 focus:outline-none sm:text-sm sm:leading-6"
+        {...props}
+        type={show ? "text" : "password"}
+      />
+      <div className="absolute right-3 top-[30%]">
+        {!show && (
+          <EyeIcon
+            onClick={() => setShow(true)}
+            className="text-gray-400 cursor-pointer h-4"
+          />
+        )}
+        {show && (
+          <EyeOffIcon
+            onClick={() => setShow(false)}
+            className="text-gray-400 cursor-pointer h-4"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Password;