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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user