feat: add eye icon toggle to source PC API key field

Allows verifying the pasted key is correct before saving.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Summit Dental Care
2026-06-22 23:34:07 -04:00
parent 8572f44386
commit cee84bcd61

View File

@@ -33,6 +33,7 @@ const HOUR_OPTIONS = Array.from({ length: 24 }, (_, h) => {
export function NetworkBackupManager() { export function NetworkBackupManager() {
const { toast } = useToast(); const { toast } = useToast();
const [showKey, setShowKey] = useState(false); const [showKey, setShowKey] = useState(false);
const [showReceiverKey, setShowReceiverKey] = useState(false);
const [confirmRegenOpen, setConfirmRegenOpen] = useState(false); const [confirmRegenOpen, setConfirmRegenOpen] = useState(false);
// receiver form state (initialised from query) // receiver form state (initialised from query)
@@ -239,12 +240,23 @@ export function NetworkBackupManager() {
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-medium text-gray-600">Source PC API Key</label> <label className="text-xs font-medium text-gray-600">Source PC API Key</label>
<Input <div className="flex items-center gap-2">
type="password" <Input
placeholder="Paste the key from the source PC" type={showReceiverKey ? "text" : "password"}
value={receiverApiKey} placeholder="Paste the key from the source PC"
onChange={(e) => setReceiverApiKey(e.target.value)} value={receiverApiKey}
/> onChange={(e) => setReceiverApiKey(e.target.value)}
/>
<Button
variant="outline"
size="icon"
title={showReceiverKey ? "Hide key" : "Show key"}
onClick={() => setShowReceiverKey((v) => !v)}
type="button"
>
{showReceiverKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
</Button>
</div>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">