From 38c16fe8398f83675c0afdde83ffc54ec4fca34b Mon Sep 17 00:00:00 2001
From: "Anh (Daniel) Le" <ledzanh@gmail.com>
Date: Wed, 17 Jul 2024 14:59:16 +0700
Subject: [PATCH] feat: add copy function to visibility input

---
 components/shared/toggle-visibility-input.tsx | 56 ++++++++++++-------
 1 file changed, 37 insertions(+), 19 deletions(-)

diff --git a/components/shared/toggle-visibility-input.tsx b/components/shared/toggle-visibility-input.tsx
index aef09880e..078a2f264 100644
--- a/components/shared/toggle-visibility-input.tsx
+++ b/components/shared/toggle-visibility-input.tsx
@@ -1,26 +1,44 @@
-import { EyeIcon, EyeOffIcon } from "lucide-react";
-import { useState } from "react";
+import { EyeIcon, EyeOffIcon, Clipboard } from "lucide-react";
+import { useRef, useState } from "react";
 import { Button } from "../ui/button";
 import { Input, type InputProps } from "../ui/input";
+import { toast } from "sonner";
 
 export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
-	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null)
 
-	const togglePasswordVisibility = () => {
-		setIsPasswordVisible((prevVisibility) => !prevVisibility);
-	};
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible((prevVisibility) => !prevVisibility);
+  };
 
-	const inputType = isPasswordVisible ? "text" : "password";
-	return (
-		<div className="flex w-full items-center space-x-2">
-			<Input type={inputType} {...props} />
-			<Button onClick={togglePasswordVisibility} variant={"secondary"}>
-				{inputType === "password" ? (
-					<EyeIcon className="size-4 text-muted-foreground" />
-				) : (
-					<EyeOffIcon className="size-4 text-muted-foreground" />
-				)}
-			</Button>
-		</div>
-	);
+  const copyToClipboard = () => {
+    if (!inputRef.current) return;
+
+    const inputElement = inputRef.current;
+    const text = inputElement.value;
+
+    inputElement.select();
+    inputElement.setSelectionRange(0, 99999);
+    navigator.clipboard.writeText(text);
+
+    toast.success("Value is copied to clipboard");
+  }
+
+  const inputType = isPasswordVisible ? "text" : "password";
+  return (
+    <div className="flex w-full items-center space-x-2">
+      <Input ref={inputRef} type={inputType} {...props} />
+      <Button variant={"secondary"} onClick={copyToClipboard}>
+        <Clipboard className="size-4 text-muted-foreground" />
+      </Button>
+      <Button onClick={togglePasswordVisibility} variant={"secondary"}>
+        {inputType === "password" ? (
+          <EyeIcon className="size-4 text-muted-foreground" />
+        ) : (
+          <EyeOffIcon className="size-4 text-muted-foreground" />
+        )}
+      </Button>
+    </div>
+  );
 };