|
| 1 | +import { useMemo, useState } from "react"; |
| 2 | +import { CheckIcon, CopyIcon, KeyRoundIcon, RefreshCwIcon } from "lucide-react"; |
| 3 | + |
| 4 | +import { useTimedReset } from "@app/hooks"; |
| 5 | + |
| 6 | +import { Button } from "../Button"; |
| 7 | +import { Checkbox } from "../Checkbox"; |
| 8 | +import { UnstableIconButton } from "../IconButton"; |
| 9 | +import { Label } from "../Label"; |
| 10 | +import { Popover, PopoverContent, PopoverTrigger } from "../Popover"; |
| 11 | + |
| 12 | +type PasswordOptionsType = { |
| 13 | + length: number; |
| 14 | + useUppercase: boolean; |
| 15 | + useLowercase: boolean; |
| 16 | + useNumbers: boolean; |
| 17 | + useSpecialChars: boolean; |
| 18 | +}; |
| 19 | + |
| 20 | +export type PasswordGeneratorProps = { |
| 21 | + onUsePassword?: (password: string) => void; |
| 22 | + isDisabled?: boolean; |
| 23 | + minLength?: number; |
| 24 | + maxLength?: number; |
| 25 | +}; |
| 26 | + |
| 27 | +export const PasswordGenerator = ({ |
| 28 | + onUsePassword, |
| 29 | + isDisabled = false, |
| 30 | + minLength = 12, |
| 31 | + maxLength = 64 |
| 32 | +}: PasswordGeneratorProps) => { |
| 33 | + const [isOpen, setIsOpen] = useState(false); |
| 34 | + const [, isCopying, setCopyText] = useTimedReset<string>({ |
| 35 | + initialState: "Copy" |
| 36 | + }); |
| 37 | + const [refresh, setRefresh] = useState(false); |
| 38 | + const [passwordOptions, setPasswordOptions] = useState<PasswordOptionsType>({ |
| 39 | + length: minLength, |
| 40 | + useUppercase: true, |
| 41 | + useLowercase: true, |
| 42 | + useNumbers: true, |
| 43 | + useSpecialChars: true |
| 44 | + }); |
| 45 | + |
| 46 | + const password = useMemo(() => { |
| 47 | + const charset = { |
| 48 | + uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", |
| 49 | + lowercase: "abcdefghijklmnopqrstuvwxyz", |
| 50 | + numbers: "0123456789", |
| 51 | + specialChars: "-_.~!*" |
| 52 | + }; |
| 53 | + |
| 54 | + let availableChars = ""; |
| 55 | + if (passwordOptions.useUppercase) availableChars += charset.uppercase; |
| 56 | + if (passwordOptions.useLowercase) availableChars += charset.lowercase; |
| 57 | + if (passwordOptions.useNumbers) availableChars += charset.numbers; |
| 58 | + if (passwordOptions.useSpecialChars) availableChars += charset.specialChars; |
| 59 | + |
| 60 | + if (availableChars === "") availableChars = charset.lowercase + charset.numbers; |
| 61 | + |
| 62 | + const randomBytes = new Uint32Array(passwordOptions.length); |
| 63 | + crypto.getRandomValues(randomBytes); |
| 64 | + let newPassword = ""; |
| 65 | + for (let i = 0; i < passwordOptions.length; i += 1) { |
| 66 | + newPassword += availableChars[randomBytes[i] % availableChars.length]; |
| 67 | + } |
| 68 | + |
| 69 | + return newPassword; |
| 70 | + // eslint-disable-next-line react-hooks/exhaustive-deps |
| 71 | + }, [passwordOptions, refresh]); |
| 72 | + |
| 73 | + const copyToClipboard = () => { |
| 74 | + navigator.clipboard |
| 75 | + .writeText(password) |
| 76 | + .then(() => { |
| 77 | + setCopyText("Copied"); |
| 78 | + }) |
| 79 | + .catch(() => { |
| 80 | + setCopyText("Copy failed"); |
| 81 | + }); |
| 82 | + }; |
| 83 | + |
| 84 | + const usePassword = () => { |
| 85 | + onUsePassword?.(password); |
| 86 | + setIsOpen(false); |
| 87 | + }; |
| 88 | + |
| 89 | + return ( |
| 90 | + <Popover open={isOpen} onOpenChange={setIsOpen}> |
| 91 | + <PopoverTrigger asChild> |
| 92 | + <UnstableIconButton variant="outline" size="md" isDisabled={isDisabled}> |
| 93 | + <KeyRoundIcon /> |
| 94 | + </UnstableIconButton> |
| 95 | + </PopoverTrigger> |
| 96 | + <PopoverContent className="w-[30rem]" align="end"> |
| 97 | + <div className="flex flex-col gap-4"> |
| 98 | + <div> |
| 99 | + <p className="text-sm font-medium">Generate Random Value</p> |
| 100 | + <p className="mt-0.5 text-xs text-muted">Generate strong unique values</p> |
| 101 | + </div> |
| 102 | + |
| 103 | + <div className="rounded-md border border-border bg-container/50 p-3"> |
| 104 | + <div className="flex items-center justify-between gap-2"> |
| 105 | + <p className="flex-1 font-mono text-sm break-all select-all">{password}</p> |
| 106 | + <div className="flex shrink-0 gap-1"> |
| 107 | + <UnstableIconButton |
| 108 | + variant="ghost" |
| 109 | + size="xs" |
| 110 | + onClick={() => setRefresh((prev) => !prev)} |
| 111 | + > |
| 112 | + <RefreshCwIcon /> |
| 113 | + </UnstableIconButton> |
| 114 | + <UnstableIconButton variant="ghost" size="xs" onClick={copyToClipboard}> |
| 115 | + {isCopying ? <CheckIcon /> : <CopyIcon />} |
| 116 | + </UnstableIconButton> |
| 117 | + </div> |
| 118 | + </div> |
| 119 | + </div> |
| 120 | + |
| 121 | + <div> |
| 122 | + <div className="mb-2 flex items-center justify-between"> |
| 123 | + <Label className="text-xs text-accent">Length: {passwordOptions.length}</Label> |
| 124 | + </div> |
| 125 | + <input |
| 126 | + type="range" |
| 127 | + min={minLength} |
| 128 | + max={maxLength} |
| 129 | + value={passwordOptions.length} |
| 130 | + onChange={(e) => |
| 131 | + setPasswordOptions({ ...passwordOptions, length: Number(e.target.value) }) |
| 132 | + } |
| 133 | + className="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-foreground/10 accent-project [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-foreground [&::-webkit-slider-thumb]:shadow-sm" |
| 134 | + /> |
| 135 | + </div> |
| 136 | + |
| 137 | + <div className="flex flex-wrap gap-6"> |
| 138 | + <Label className="flex cursor-pointer items-center gap-1.5 text-xs"> |
| 139 | + <Checkbox |
| 140 | + variant="project" |
| 141 | + isChecked={passwordOptions.useUppercase} |
| 142 | + onCheckedChange={(checked) => |
| 143 | + setPasswordOptions({ ...passwordOptions, useUppercase: checked as boolean }) |
| 144 | + } |
| 145 | + /> |
| 146 | + A-Z |
| 147 | + </Label> |
| 148 | + <Label className="flex cursor-pointer items-center gap-1.5 text-xs"> |
| 149 | + <Checkbox |
| 150 | + variant="project" |
| 151 | + isChecked={passwordOptions.useLowercase} |
| 152 | + onCheckedChange={(checked) => |
| 153 | + setPasswordOptions({ ...passwordOptions, useLowercase: checked as boolean }) |
| 154 | + } |
| 155 | + /> |
| 156 | + a-z |
| 157 | + </Label> |
| 158 | + <Label className="flex cursor-pointer items-center gap-1.5 text-xs"> |
| 159 | + <Checkbox |
| 160 | + variant="project" |
| 161 | + isChecked={passwordOptions.useNumbers} |
| 162 | + onCheckedChange={(checked) => |
| 163 | + setPasswordOptions({ ...passwordOptions, useNumbers: checked as boolean }) |
| 164 | + } |
| 165 | + /> |
| 166 | + 0-9 |
| 167 | + </Label> |
| 168 | + <Label className="flex cursor-pointer items-center gap-1.5 text-xs"> |
| 169 | + <Checkbox |
| 170 | + variant="project" |
| 171 | + isChecked={passwordOptions.useSpecialChars} |
| 172 | + onCheckedChange={(checked) => |
| 173 | + setPasswordOptions({ ...passwordOptions, useSpecialChars: checked as boolean }) |
| 174 | + } |
| 175 | + /> |
| 176 | + -_.~!* |
| 177 | + </Label> |
| 178 | + </div> |
| 179 | + |
| 180 | + {onUsePassword && ( |
| 181 | + <Button variant="project" size="xs" onClick={usePassword} className="w-full"> |
| 182 | + Use Value |
| 183 | + </Button> |
| 184 | + )} |
| 185 | + </div> |
| 186 | + </PopoverContent> |
| 187 | + </Popover> |
| 188 | + ); |
| 189 | +}; |
0 commit comments