import { AlertTriangle, Eye, EyeOff, RefreshCw } from "lucide-react";
import * as React from "react";
import { generateBackupPassphrase } from "@/shared/api/tauriIdentity";
import { useEncryptedBackup } from "@/features/settings/EncryptedBackupProvider";
import { Button } from "@/shared/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/shared/ui/dialog";
import { Input } from "@/shared/ui/input";
import { Popover, PopoverAnchor, PopoverContent } from "@/shared/ui/popover";
import { downloadDisabled, MIN_PASSPHRASE_LEN } from "../lib/encryptedBackup";
/** Word-count bounds mirroring `key_backup.rs` (Rust clamps regardless). */
const MIN_GENERATED_WORDS = 3;
const MAX_GENERATED_WORDS = 10;
const DEFAULT_GENERATED_WORDS = 3;
const SEPARATOR_OPTIONS = [
{ label: "Spaces", value: " " },
{ label: "Hyphens", value: "-" },
{ label: "Periods", value: "." },
{ label: "Commas", value: "," },
] as const;
const DEFAULT_SEPARATOR = SEPARATOR_OPTIONS[0].value;
/**
* Indeterminate KDF progress. Scrypt does not expose intermediate progress,
* so randomized increments consume a shrinking fraction of the remaining
* distance. The bar moves quickly at first and can never reach completion.
*/
function FakeKdfProgressBar() {
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
let animationFrame = 0;
let nextAdvanceAt = 0;
const advance = (now: number) => {
if (now >= nextAdvanceAt) {
setProgress((current) => {
const remaining = 90 - current;
const fraction = 0.08 + Math.random() * 0.22;
return Math.min(90, current + Math.max(0.25, remaining * fraction));
});
nextAdvanceAt = now + 180 + Math.random() * 420;
}
animationFrame = window.requestAnimationFrame(advance);
};
animationFrame = window.requestAnimationFrame(advance);
return () => window.cancelAnimationFrame(animationFrame);
}, []);
return (
);
}
/**
* 1Password-style memorable-password generator popover with word-count and
* separator fields, anchored to a refresh icon inset in the password field
* (the anchor assumes a `relative` parent). The first click opens the
* popover and generates; further clicks on the icon re-roll while the
* popover stays open — only click-outside or Esc closes it. There is no
* candidate preview: every generation writes the passphrase straight into
* the parent's password field via `onGenerated`.
*/
function PassphraseGeneratorPopover({
disabled = false,
onRequestGenerate,
onGenerated,
}: {
disabled?: boolean;
onRequestGenerate?: () => void;
onGenerated: (value: string) => void;
}) {
const [open, setOpen] = React.useState(false);
const [words, setWords] = React.useState(DEFAULT_GENERATED_WORDS);
const [separator, setSeparator] = React.useState(DEFAULT_SEPARATOR);
const [error, setError] = React.useState(null);
const anchorRef = React.useRef(null);
const mountedRef = React.useRef(true);
// Read via a ref so `generate` stays reference-stable even though parents
// pass an inline `onGenerated`. Otherwise each generated password would
// re-render the parent, rebuild `generate`, and re-fire the open/controls
// effect below — an infinite generate loop while the popover is open.
const onGeneratedRef = React.useRef(onGenerated);
React.useEffect(() => {
onGeneratedRef.current = onGenerated;
}, [onGenerated]);
React.useEffect(() => {
mountedRef.current = true;
return () => {
mountedRef.current = false;
};
}, []);
const generate = React.useCallback(async (wordCount: number, sep: string) => {
setError(null);
try {
const passphrase = await generateBackupPassphrase({
words: wordCount,
separator: sep,
});
if (mountedRef.current) onGeneratedRef.current(passphrase);
} catch (err) {
if (!mountedRef.current) return;
setError(
err instanceof Error ? err.message : "Failed to generate a password.",
);
}
}, []);
// Fill the password field on every open and whenever a control changes.
React.useEffect(() => {
if (open) void generate(words, separator);
}, [open, words, separator, generate]);
return (
{/* Anchor (not Trigger): Radix triggers toggle on click, but repeat
clicks here must generate a fresh password while the popover stays
open. Only click-outside or Esc closes it. */}
{
// Clicking the anchor icon is "outside" the content — keep the
// popover open so that click re-rolls instead of closing.
if (
event.target instanceof Node &&
anchorRef.current?.contains(event.target)
) {
event.preventDefault();
}
}}
onOpenAutoFocus={(event) => event.preventDefault()}
>
) : null}
);
}
/**
* Password-first encrypted key download flow for Settings. The raw private
* key never enters this component. Rust creates the
* NIP-49 payload locally, then the native save dialog produces the user-owned
* file.
*
* The flow is a single password input; a refresh icon inset in the field
* opens a 1Password-style generator popover (word count + separator).
* Encryption starts eagerly once the password is valid, so Download usually
* opens the save dialog instantly; clicking mid-encryption queues the
* download until the KDF finishes.
*/
export function EncryptedBackupCreator({
onOpenChange,
open,
}: {
onOpenChange: (open: boolean) => void;
open: boolean;
}) {
const { state, dispatch, isSaving, saveError } = useEncryptedBackup();
const [isRevealed, setIsRevealed] = React.useState(false);
// A queued download hides the form; mask the password before it can return
// in any error state.
React.useEffect(() => {
if (state.downloadPending) setIsRevealed(false);
}, [state.downloadPending]);
React.useEffect(() => {
if (state.ncryptsec) onOpenChange(false);
}, [onOpenChange, state.ncryptsec]);
return (
);
}