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: format toggle visibility input

Browse Source
This commit is contained in:
Anh (Daniel) Le
2024-07-18 00:15:43 +07:00
parent c3bca21d14
commit e4c243d7a6
1 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,39 +5,39 @@ import { Input, type InputProps } from "../ui/input";
import { toast } from "sonner"; import { toast } from "sonner";
export const ToggleVisibilityInput = ({ ...props }: InputProps) => { export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
const [isPasswordVisible, setIsPasswordVisible] = useState(false); const [isPasswordVisible, setIsPasswordVisible] = useState(false);
const inputRef = useRef<HTMLInputElement>(null) const inputRef = useRef<HTMLInputElement>(null);
const togglePasswordVisibility = () => { const togglePasswordVisibility = () => {
setIsPasswordVisible((prevVisibility) => !prevVisibility); setIsPasswordVisible((prevVisibility) => !prevVisibility);
}; };
const copyToClipboard = () => { const copyToClipboard = () => {
if (!inputRef.current) return; if (!inputRef.current) return;
const inputElement = inputRef.current; const inputElement = inputRef.current;
const text = inputElement.value; const text = inputElement.value;
inputElement.select(); inputElement.select();
navigator.clipboard.writeText(text); navigator.clipboard.writeText(text);
toast.success("Value is copied to clipboard"); toast.success("Value is copied to clipboard");
} };
const inputType = isPasswordVisible ? "text" : "password"; const inputType = isPasswordVisible ? "text" : "password";
return ( return (
<div className="flex w-full items-center space-x-2"> <div className="flex w-full items-center space-x-2">
<Input ref={inputRef} type={inputType} {...props} /> <Input ref={inputRef} type={inputType} {...props} />
<Button variant={"secondary"} onClick={copyToClipboard}> <Button variant={"secondary"} onClick={copyToClipboard}>
<Clipboard className="size-4 text-muted-foreground" /> <Clipboard className="size-4 text-muted-foreground" />
</Button> </Button>
<Button onClick={togglePasswordVisibility} variant={"secondary"}> <Button onClick={togglePasswordVisibility} variant={"secondary"}>
{inputType === "password" ? ( {inputType === "password" ? (
<EyeIcon className="size-4 text-muted-foreground" /> <EyeIcon className="size-4 text-muted-foreground" />
) : ( ) : (
<EyeOffIcon className="size-4 text-muted-foreground" /> <EyeOffIcon className="size-4 text-muted-foreground" />
)} )}
</Button> </Button>
</div> </div>
); );
}; };