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() {
|
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">
|
||||||
|
|||||||
Reference in New Issue
Block a user