Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: use copy-to-clipboard for visibility input

Browse Source
This commit is contained in:
Anh (Daniel) Le 2024-07-18 09:44:45 +07:00
parent e4c243d7a6
commit 87e90cb30b
No known key found for this signature in database
1 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/shared/toggle-visibility-input.tsx
View File

@ -1,8 +1,9 @@
import { EyeIcon, EyeOffIcon, Clipboard } from "lucide-react";
import copy from "copy-to-clipboard";
import { Clipboard, EyeIcon, EyeOffIcon } from "lucide-react";
import { useRef, useState } from "react";
import { toast } from "sonner";
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);
@ -12,23 +13,17 @@ export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
setIsPasswordVisible((prevVisibility) => !prevVisibility);
};
const copyToClipboard = () => {
if (!inputRef.current) return;
const inputElement = inputRef.current;
const text = inputElement.value;
inputElement.select();
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}>
<Button
variant={"secondary"}
onClick={() => {
copy(inputRef.current?.value || "");
toast.success("Value is copied to clipboard");
}}
>
<Clipboard className="size-4 text-muted-foreground" />
</Button>
<Button onClick={togglePasswordVisibility} variant={"secondary"}>