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() {
const { toast } = useToast();
const [showKey, setShowKey] = useState(false);
const [showReceiverKey, setShowReceiverKey] = useState(false);
const [confirmRegenOpen, setConfirmRegenOpen] = useState(false);
// receiver form state (initialised from query)
@@ -239,12 +240,23 @@ export function NetworkBackupManager() {
<div className="space-y-2">
<label className="text-xs font-medium text-gray-600">Source PC API Key</label>
<Input
type="password"
placeholder="Paste the key from the source PC"
value={receiverApiKey}
onChange={(e) => setReceiverApiKey(e.target.value)}
/>
<div className="flex items-center gap-2">
<Input
type={showReceiverKey ? "text" : "password"}
placeholder="Paste the key from the source PC"
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 className="flex gap-2">