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

Merge pull request #228 from anh-ld/feat/add-input-copy-button

Browse Source 
feat: add copy function to visibility input
This commit is contained in:
Mauricio Siu
2024-07-17 22:28:21 -06:00
committed by GitHub
parent 135fabb852 87e90cb30b
commit b373aca0ff
1 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,13 @@
import { EyeIcon, EyeOffIcon } from "lucide-react"; import copy from "copy-to-clipboard";
import { useState } from "react"; import { Clipboard, EyeIcon, EyeOffIcon } from "lucide-react";
import { useRef, useState } from "react";
import { toast } from "sonner";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { Input, type InputProps } from "../ui/input"; import { Input, type InputProps } from "../ui/input";
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 togglePasswordVisibility = () => { const togglePasswordVisibility = () => {
setIsPasswordVisible((prevVisibility) => !prevVisibility); setIsPasswordVisible((prevVisibility) => !prevVisibility);
@@ -13,7 +16,16 @@ export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
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 type={inputType} {...props} /> <Input ref={inputRef} type={inputType} {...props} />
<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"}> <Button onClick={togglePasswordVisibility} variant={"secondary"}>
{inputType === "password" ? ( {inputType === "password" ? (
<EyeIcon className="size-4 text-muted-foreground" /> <EyeIcon className="size-4 text-muted-foreground" />