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

feat: add copy function to visibility input

Browse Source
This commit is contained in:
Anh (Daniel) Le 2024-07-17 14:59:16 +07:00
parent c0587b9409
commit 38c16fe839
No known key found for this signature in database
1 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
);
};