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(null) - const togglePasswordVisibility = () => { - setIsPasswordVisible((prevVisibility) => !prevVisibility); - }; + const togglePasswordVisibility = () => { + setIsPasswordVisible((prevVisibility) => !prevVisibility); + }; - const inputType = isPasswordVisible ? "text" : "password"; - return ( -
- - -
- ); + 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 ( +
+ + + +
+ ); };