From 5f796368ac90cfa33342d1e2dfd6360a0d0cce7b Mon Sep 17 00:00:00 2001
From: CodeAunt <zhouzili98@hotmail.com>
Date: Tue, 2 May 2023 15:05:08 +0800
Subject: [PATCH] add view button for password input field

---
 .../src/components/inputComponent/index.tsx   | 50 ++++++++++++++++---
 1 file changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 6f76f6773..164d00704 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -9,6 +9,7 @@ export default function InputComponent({
 	password,
 }: InputComponentType) {
 	const [myValue, setMyValue] = useState(value ?? "");
+	const [pwdVisable, setPwdVisable] = useState(false)
 	useEffect(() => {
 		if (disabled) {
 			setMyValue("");
@@ -16,24 +17,61 @@ export default function InputComponent({
 		}
 	}, [disabled, onChange]);
 	return (
-		<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+		<div className={disabled ? "relative pointer-events-none cursor-not-allowed" : "relative"}>
 			<input
-				type="text"
+				type={password && !pwdVisable ? "password" : "text"}
 				value={myValue}
 				className={classNames(
 					"block w-full form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
 					disabled ? " bg-gray-200 dark:bg-gray-700" : "",
-                    password && myValue.length>0?"password":""
 				)}
 				placeholder="Type a text"
-				onCopy={(e)=>{
-					if(password) e.preventDefault();
-				}}
 				onChange={(e) => {
 					setMyValue(e.target.value);
 					onChange(e.target.value);
 				}}
 			/>
+			<button
+        className="absolute inset-y-0 right-0 items-center px-4 text-gray-600"
+        onClick={() => {setPwdVisable(!pwdVisable)}}
+      >
+        {password && (pwdVisable ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-5 h-5"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+            />
+          </svg>
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-5 h-5"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M2.036 12.322a1.012 1.012 0 010-.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 11-6 0 3 3 0 016 0z"
+            />
+          </svg>
+        ))}
+      </button>
 		</div>
 	);
 }