From 57ecc2ef878affad104c3df11c0f7e3829a5f8cd Mon Sep 17 00:00:00 2001
From: Wind-Explorer <windexplorer@outlook.com>
Date: Fri, 28 Jun 2024 08:51:04 +0800
Subject: [PATCH] Added show password button for password fields

---
 client/src/components/NextUIFormikInput.tsx | 18 +++++++++
 client/src/icons.tsx                        | 43 +++++++++++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/client/src/components/NextUIFormikInput.tsx b/client/src/components/NextUIFormikInput.tsx
index cc670ee..97bd714 100644
--- a/client/src/components/NextUIFormikInput.tsx
+++ b/client/src/components/NextUIFormikInput.tsx
@@ -1,5 +1,7 @@
 import { Input } from "@nextui-org/react";
 import { useField } from "formik";
+import { useState } from "react";
+import { EyeIcon, EyeSlashIcon } from "../icons";
 
 interface NextUIFormikInputProps {
   label: string;
@@ -16,15 +18,31 @@ const NextUIFormikInput = ({
   ...props
 }: NextUIFormikInputProps) => {
   const [field, meta] = useField(props.name);
+  const [inputType, setInputType] = useState(props.type);
 
   return (
     <Input
       {...field}
       {...props}
       label={label}
+      type={inputType}
       isInvalid={meta.touched && !!meta.error}
       errorMessage={meta.touched && meta.error ? meta.error : ""}
       startContent={startContent}
+      endContent={
+        props.type == "password" ? (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                setInputType(inputType == "text" ? "password" : "text");
+              }}
+            >
+              {inputType == "password" ? <EyeSlashIcon /> : <EyeIcon />}
+            </button>
+          </>
+        ) : null
+      }
     />
   );
 };
diff --git a/client/src/icons.tsx b/client/src/icons.tsx
index cb12019..1ed7fb3 100644
--- a/client/src/icons.tsx
+++ b/client/src/icons.tsx
@@ -54,3 +54,46 @@ export const LockClosedIcon = () => {
     </svg>
   );
 };
+
+export const EyeSlashIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
+      />
+    </svg>
+  );
+};
+
+export const EyeIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
+      />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+      />
+    </svg>
+  );
+};