mirror of
https://github.com/kccleoc/seedpgp-web.git
synced 2026-03-07 01:47:52 +08:00
c2aeb4ce83
This commit addresses several issues and implements new features for the Seed Blender based on user feedback. - **Flexible QR Scanning**: `QRScanner` is now content-agnostic. `SeedBlender` detects QR content type (Plain Text, Krux, SeedPGP) and triggers the appropriate workflow. - **Per-Row Decryption**: Replaces the global security panel with a per-row password input for encrypted mnemonics, allowing multiple different encrypted seeds to be used. - **Data Loss Warning**: Implements a confirmation dialog that warns the user if they try to switch tabs with unsaved data in the blender, preventing accidental data loss. - **Final Mnemonic Actions**: Adds 'Transfer to Backup' and 'Export as QR' buttons to the final mnemonic display, allowing the user to utilize the generated seed. - **Refactors `SeedBlender` state management** around a `MnemonicEntry` interface for robustness and clarity.
826 lines
37 KiB
TypeScript
826 lines
37 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import {
|
|
QrCode,
|
|
RefreshCw,
|
|
CheckCircle2,
|
|
Lock,
|
|
AlertCircle,
|
|
Unlock,
|
|
EyeOff,
|
|
FileKey,
|
|
Info,
|
|
} from 'lucide-react';
|
|
import { PgpKeyInput } from './components/PgpKeyInput';
|
|
import { QrDisplay } from './components/QrDisplay';
|
|
import QRScanner from './components/QRScanner';
|
|
import { validateBip39Mnemonic } from './lib/bip39';
|
|
import { buildPlaintext, encryptToSeed, decryptFromSeed, detectEncryptionMode } from './lib/seedpgp';
|
|
import * as openpgp from 'openpgp';
|
|
import { SecurityWarnings } from './components/SecurityWarnings';
|
|
import { getSessionKey, encryptJsonToBlob, destroySessionKey, EncryptedBlob } from './lib/sessionCrypto';
|
|
import Header from './components/Header';
|
|
import { StorageDetails } from './components/StorageDetails';
|
|
import { ClipboardDetails } from './components/ClipboardDetails';
|
|
import Footer from './components/Footer';
|
|
import { SeedBlender } from './components/SeedBlender';
|
|
|
|
console.log("OpenPGP.js version:", openpgp.config.versionString);
|
|
|
|
interface StorageItem {
|
|
key: string;
|
|
value: string;
|
|
size: number;
|
|
isSensitive: boolean;
|
|
}
|
|
|
|
interface ClipboardEvent {
|
|
timestamp: Date;
|
|
field: string;
|
|
length: number;
|
|
}
|
|
|
|
function App() {
|
|
const [activeTab, setActiveTab] = useState<'backup' | 'restore' | 'seedblender'>('backup');
|
|
const [mnemonic, setMnemonic] = useState('');
|
|
const [backupMessagePassword, setBackupMessagePassword] = useState('');
|
|
const [restoreMessagePassword, setRestoreMessagePassword] = useState('');
|
|
|
|
const [isBlenderDirty, setIsBlenderDirty] = useState(false);
|
|
|
|
const [publicKeyInput, setPublicKeyInput] = useState('');
|
|
const [privateKeyInput, setPrivateKeyInput] = useState('');
|
|
const [privateKeyPassphrase, setPrivateKeyPassphrase] = useState('');
|
|
const [hasBip39Passphrase, setHasBip39Passphrase] = useState(false);
|
|
const [qrPayload, setQrPayload] = useState('');
|
|
const [recipientFpr, setRecipientFpr] = useState('');
|
|
const [restoreInput, setRestoreInput] = useState('');
|
|
const [decryptedRestoredMnemonic, setDecryptedRestoredMnemonic] = useState<string | null>(null);
|
|
const [error, setError] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [copied, setCopied] = useState(false);
|
|
const [showQRScanner, setShowQRScanner] = useState(false);
|
|
const [isReadOnly, setIsReadOnly] = useState(false);
|
|
const [encryptedMnemonicCache, setEncryptedMnemonicCache] = useState<EncryptedBlob | null>(null);
|
|
const [showSecurityModal, setShowSecurityModal] = useState(false);
|
|
const [showStorageModal, setShowStorageModal] = useState(false);
|
|
const [showClipboardModal, setShowClipboardModal] = useState(false);
|
|
const [localItems, setLocalItems] = useState<StorageItem[]>([]);
|
|
const [sessionItems, setSessionItems] = useState<StorageItem[]>([]);
|
|
const [clipboardEvents, setClipboardEvents] = useState<ClipboardEvent[]>([]);
|
|
const [showLockConfirm, setShowLockConfirm] = useState(false);
|
|
|
|
// Krux integration state
|
|
const [encryptionMode, setEncryptionMode] = useState<'pgp' | 'krux'>('pgp');
|
|
const [kruxLabel, setKruxLabel] = useState('Seed Backup');
|
|
const [kruxIterations, setKruxIterations] = useState(200000);
|
|
const [detectedMode, setDetectedMode] = useState<'pgp' | 'krux' | null>(null);
|
|
|
|
const SENSITIVE_PATTERNS = ['key', 'mnemonic', 'seed', 'private', 'secret', 'pgp', 'password'];
|
|
|
|
const isSensitiveKey = (key: string): boolean => {
|
|
const lowerKey = key.toLowerCase();
|
|
return SENSITIVE_PATTERNS.some(pattern => lowerKey.includes(pattern));
|
|
};
|
|
|
|
const getStorageItems = (storage: Storage): StorageItem[] => {
|
|
const items: StorageItem[] = [];
|
|
for (let i = 0; i < storage.length; i++) {
|
|
const key = storage.key(i);
|
|
if (key) {
|
|
const value = storage.getItem(key) || '';
|
|
items.push({
|
|
key,
|
|
value: value.substring(0, 50) + (value.length > 50 ? '...' : ''),
|
|
size: new Blob([value]).size,
|
|
isSensitive: isSensitiveKey(key)
|
|
});
|
|
}
|
|
}
|
|
return items.sort((a, b) => (b.isSensitive ? 1 : 0) - (a.isSensitive ? 1 : 0));
|
|
};
|
|
|
|
const refreshStorage = () => {
|
|
setLocalItems(getStorageItems(localStorage));
|
|
setSessionItems(getStorageItems(sessionStorage));
|
|
};
|
|
|
|
useEffect(() => {
|
|
refreshStorage();
|
|
const interval = setInterval(refreshStorage, 2000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
|
|
|
|
// Cleanup session key on component unmount
|
|
useEffect(() => {
|
|
return () => {
|
|
destroySessionKey();
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const handleCopy = (e: ClipboardEvent & Event) => {
|
|
const target = e.target as HTMLElement;
|
|
|
|
// Get selection to measure length
|
|
const selection = window.getSelection()?.toString() || '';
|
|
const length = selection.length;
|
|
|
|
if (length === 0) return; // Nothing copied
|
|
|
|
// Detect field name
|
|
let field = 'Unknown field';
|
|
|
|
if (target.tagName === 'TEXTAREA' || target.tagName === 'INPUT') {
|
|
// Try multiple ways to identify the field
|
|
field =
|
|
target.getAttribute('aria-label') ||
|
|
target.getAttribute('name') ||
|
|
target.getAttribute('id') ||
|
|
(target as HTMLInputElement).type ||
|
|
target.tagName.toLowerCase();
|
|
|
|
// Check parent labels
|
|
const label = target.closest('label') ||
|
|
document.querySelector(`label[for="${target.id}"]`);
|
|
if (label) {
|
|
field = label.textContent?.trim() || field;
|
|
}
|
|
|
|
// Check for data-sensitive attribute
|
|
const sensitiveAttr = target.getAttribute('data-sensitive') ||
|
|
target.closest('[data-sensitive]')?.getAttribute('data-sensitive');
|
|
if (sensitiveAttr) {
|
|
field = sensitiveAttr;
|
|
}
|
|
|
|
// Detect if it looks like sensitive data
|
|
const isSensitive = /mnemonic|seed|key|private|password|secret/i.test(
|
|
target.className + ' ' + field + ' ' + (target.getAttribute('placeholder') || '')
|
|
);
|
|
|
|
if (isSensitive && field === target.tagName.toLowerCase()) {
|
|
// Try to guess from placeholder
|
|
const placeholder = target.getAttribute('placeholder');
|
|
if (placeholder) {
|
|
field = placeholder.substring(0, 40) + '...';
|
|
}
|
|
}
|
|
}
|
|
|
|
setClipboardEvents(prev => [
|
|
{ timestamp: new Date(), field, length },
|
|
...prev.slice(0, 9) // Keep last 10 events
|
|
]);
|
|
};
|
|
|
|
document.addEventListener('copy', handleCopy as EventListener);
|
|
return () => document.removeEventListener('copy', handleCopy as EventListener);
|
|
}, []);
|
|
|
|
// Detect encryption mode from restore input
|
|
useEffect(() => {
|
|
if (activeTab === 'restore' && restoreInput.trim()) {
|
|
const detected = detectEncryptionMode(restoreInput);
|
|
setDetectedMode(detected);
|
|
// Auto-switch mode if not already set
|
|
if (detected !== encryptionMode) {
|
|
setEncryptionMode(detected);
|
|
}
|
|
} else {
|
|
setDetectedMode(null);
|
|
}
|
|
}, [restoreInput, activeTab, encryptionMode]);
|
|
|
|
const clearClipboard = async () => {
|
|
try {
|
|
// Actually clear the system clipboard
|
|
await navigator.clipboard.writeText('');
|
|
|
|
// Clear history
|
|
setClipboardEvents([]);
|
|
|
|
// Show success briefly
|
|
alert('✅ Clipboard cleared and history wiped');
|
|
} catch (err) {
|
|
// Fallback for browsers that don't support clipboard API
|
|
const dummy = document.createElement('textarea');
|
|
dummy.value = '';
|
|
document.body.appendChild(dummy);
|
|
dummy.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(dummy);
|
|
|
|
setClipboardEvents([]);
|
|
alert('✅ History cleared (clipboard may require manual clearing)');
|
|
}
|
|
};
|
|
|
|
|
|
const copyToClipboard = async (text: string) => {
|
|
if (isReadOnly) {
|
|
setError("Copy to clipboard is disabled in Read-only mode.");
|
|
return;
|
|
}
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
setCopied(true);
|
|
window.setTimeout(() => setCopied(false), 1500);
|
|
} catch {
|
|
const ta = document.createElement("textarea");
|
|
ta.value = text;
|
|
ta.style.position = "fixed";
|
|
ta.style.left = "-9999px";
|
|
document.body.appendChild(ta);
|
|
ta.focus();
|
|
ta.select();
|
|
document.execCommand("copy");
|
|
document.body.removeChild(ta);
|
|
setCopied(true);
|
|
window.setTimeout(() => setCopied(false), 1500);
|
|
}
|
|
};
|
|
|
|
const handleBackup = async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
setQrPayload('');
|
|
setRecipientFpr('');
|
|
|
|
try {
|
|
const validation = validateBip39Mnemonic(mnemonic);
|
|
if (!validation.valid) {
|
|
throw new Error(validation.error);
|
|
}
|
|
|
|
const plaintext = buildPlaintext(mnemonic, hasBip39Passphrase);
|
|
|
|
const result = await encryptToSeed({
|
|
plaintext,
|
|
publicKeyArmored: publicKeyInput || undefined,
|
|
messagePassword: backupMessagePassword || undefined,
|
|
mode: encryptionMode,
|
|
kruxLabel: encryptionMode === 'krux' ? kruxLabel : undefined,
|
|
kruxIterations: encryptionMode === 'krux' ? kruxIterations : undefined,
|
|
});
|
|
|
|
setQrPayload(result.framed);
|
|
if (result.recipientFingerprint) {
|
|
setRecipientFpr(result.recipientFingerprint);
|
|
}
|
|
|
|
// Initialize session key before encrypting
|
|
await getSessionKey();
|
|
// Encrypt mnemonic with session key and clear plaintext state
|
|
const blob = await encryptJsonToBlob({ mnemonic, timestamp: Date.now() });
|
|
setEncryptedMnemonicCache(blob);
|
|
setMnemonic(''); // Clear plaintext mnemonic
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Encryption failed');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRestore = async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
setDecryptedRestoredMnemonic(null);
|
|
|
|
try {
|
|
// Auto-detect mode if not manually set
|
|
const modeToUse = detectedMode || encryptionMode;
|
|
|
|
const result = await decryptFromSeed({
|
|
frameText: restoreInput,
|
|
privateKeyArmored: privateKeyInput || undefined,
|
|
privateKeyPassphrase: privateKeyPassphrase || undefined,
|
|
messagePassword: restoreMessagePassword || undefined,
|
|
mode: modeToUse,
|
|
});
|
|
|
|
// Encrypt the restored mnemonic with the session key
|
|
await getSessionKey();
|
|
const blob = await encryptJsonToBlob({ mnemonic: result.w, timestamp: Date.now() });
|
|
setEncryptedMnemonicCache(blob);
|
|
|
|
// Temporarily display the mnemonic and then clear it
|
|
setDecryptedRestoredMnemonic(result.w);
|
|
setTimeout(() => {
|
|
setDecryptedRestoredMnemonic(null);
|
|
}, 10000); // Auto-clear after 10 seconds
|
|
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Decryption failed');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleLockAndClear = () => {
|
|
destroySessionKey();
|
|
setEncryptedMnemonicCache(null);
|
|
setMnemonic('');
|
|
setBackupMessagePassword('');
|
|
setRestoreMessagePassword('');
|
|
setPublicKeyInput('');
|
|
setPrivateKeyInput('');
|
|
setPrivateKeyPassphrase('');
|
|
setQrPayload('');
|
|
setRecipientFpr('');
|
|
setRestoreInput('');
|
|
setDecryptedRestoredMnemonic(null);
|
|
setError('');
|
|
setCopied(false);
|
|
setShowQRScanner(false);
|
|
};
|
|
|
|
const handleToggleLock = () => {
|
|
if (!isReadOnly) {
|
|
// About to lock - show confirmation
|
|
setShowLockConfirm(true);
|
|
} else {
|
|
// Unlocking - no confirmation needed
|
|
setIsReadOnly(false);
|
|
}
|
|
};
|
|
|
|
const confirmLock = () => {
|
|
setIsReadOnly(true);
|
|
setShowLockConfirm(false);
|
|
};
|
|
|
|
const handleRequestTabChange = (newTab: 'backup' | 'restore' | 'seedblender') => {
|
|
if (activeTab === 'seedblender' && isBlenderDirty) {
|
|
if (window.confirm("You have unsaved data in the Seed Blender. Are you sure you want to leave? All progress will be lost.")) {
|
|
setActiveTab(newTab);
|
|
setIsBlenderDirty(false); // Reset dirty state on leaving
|
|
}
|
|
// else: user cancelled, do nothing
|
|
} else {
|
|
setActiveTab(newTab);
|
|
}
|
|
};
|
|
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-800 text-slate-100">
|
|
<Header
|
|
onOpenSecurityModal={() => setShowSecurityModal(true)}
|
|
localItems={localItems}
|
|
sessionItems={sessionItems}
|
|
onOpenStorageModal={() => setShowStorageModal(true)}
|
|
events={clipboardEvents}
|
|
onOpenClipboardModal={() => setShowClipboardModal(true)}
|
|
activeTab={activeTab}
|
|
onRequestTabChange={handleRequestTabChange}
|
|
encryptedMnemonicCache={encryptedMnemonicCache}
|
|
handleLockAndClear={handleLockAndClear}
|
|
appVersion={__APP_VERSION__}
|
|
isLocked={isReadOnly}
|
|
onToggleLock={handleToggleLock}
|
|
/>
|
|
<main className="max-w-7xl mx-auto px-6 py-4">
|
|
<div className="p-6 md:p-8 space-y-6">
|
|
{/* Error Display */}
|
|
{error && (
|
|
<div className="p-4 bg-red-50 border-l-4 border-red-500 rounded-r-xl flex gap-3 text-red-800 text-sm items-start animate-in slide-in-from-top-2">
|
|
<AlertCircle className="shrink-0 mt-0.5" size={20} />
|
|
<div>
|
|
<p className="font-bold mb-1">Error</p>
|
|
<p className="whitespace-pre-wrap">{error}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Info Banner */}
|
|
{recipientFpr && activeTab === 'backup' && (
|
|
<div className="p-3 bg-teal-50 border border-teal-200 rounded-lg flex items-start gap-3 text-teal-800 text-xs animate-in fade-in">
|
|
<Info size={16} className="shrink-0 mt-0.5" />
|
|
<div>
|
|
<strong>Recipient Key:</strong> <code className="bg-teal-100 px-1.5 py-0.5 rounded font-mono">{recipientFpr}</code>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Main Content Grid */}
|
|
<div className="grid gap-6 md:grid-cols-3 md:items-start">
|
|
<div className="md:col-span-2 space-y-6">
|
|
{activeTab === 'backup' ? (
|
|
<>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-semibold text-slate-200">BIP39 Mnemonic</label>
|
|
<textarea
|
|
className={`w-full h-32 p-4 bg-slate-50 border border-slate-200 rounded-xl text-sm font-mono text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all resize-none ${
|
|
isReadOnly ? 'blur-sm select-none' : ''
|
|
}`}
|
|
|
|
data-sensitive="BIP39 Mnemonic"
|
|
placeholder="Enter your 12 or 24 word seed phrase..."
|
|
value={mnemonic}
|
|
onChange={(e) => setMnemonic(e.target.value)}
|
|
readOnly={isReadOnly}
|
|
/>
|
|
</div>
|
|
|
|
<PgpKeyInput
|
|
label="PGP Public Key (Optional)"
|
|
icon={FileKey}
|
|
placeholder="-----BEGIN PGP PUBLIC KEY BLOCK----- Paste or drag & drop your public key..."
|
|
value={publicKeyInput}
|
|
onChange={setPublicKeyInput}
|
|
readOnly={isReadOnly}
|
|
/>
|
|
</>
|
|
) : activeTab === 'restore' ? (
|
|
<>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setShowQRScanner(true)}
|
|
disabled={isReadOnly}
|
|
className="flex-1 py-3 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-xl font-semibold flex items-center justify-center gap-2 hover:from-purple-700 hover:to-purple-800 transition-all shadow-lg disabled:opacity-50"
|
|
>
|
|
<QrCode size={18} />
|
|
Scan QR Code
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-semibold text-slate-200">SEEDPGP1 Payload</label>
|
|
<textarea
|
|
className={`w-full h-32 p-4 bg-slate-50 border border-slate-200 rounded-xl text-xs font-mono text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all resize-none ${
|
|
isReadOnly ? 'blur-sm select-none' : ''
|
|
}`}
|
|
|
|
placeholder="SEEDPGP1:0:ABCD:..."
|
|
value={restoreInput}
|
|
onChange={(e) => setRestoreInput(e.target.value)}
|
|
readOnly={isReadOnly}
|
|
/>
|
|
</div>
|
|
|
|
<PgpKeyInput
|
|
label="PGP Private Key (Optional)"
|
|
icon={FileKey}
|
|
data-sensitive="PGP Private Key"
|
|
placeholder="-----BEGIN PGP PRIVATE KEY BLOCK----- Paste or drag & drop your private key..."
|
|
value={privateKeyInput}
|
|
onChange={setPrivateKeyInput}
|
|
readOnly={isReadOnly}
|
|
/>
|
|
|
|
{privateKeyInput && (
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Private Key Passphrase</label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-3 text-slate-400" size={16} />
|
|
<input
|
|
type="password"
|
|
data-sensitive="Message Password"
|
|
className={`w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all ${
|
|
isReadOnly ? 'blur-sm select-none' : ''
|
|
}`}
|
|
placeholder="Unlock private key..."
|
|
value={privateKeyPassphrase}
|
|
onChange={(e) => setPrivateKeyPassphrase(e.target.value)}
|
|
readOnly={isReadOnly}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<SeedBlender
|
|
onDirtyStateChange={setIsBlenderDirty}
|
|
setMnemonicForBackup={setMnemonic}
|
|
requestTabChange={handleRequestTabChange}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Security Panel */}
|
|
{activeTab !== 'seedblender' && (
|
|
<div className="space-y-2"> {/* Added space-y-2 wrapper */}
|
|
<label className="text-sm font-semibold text-slate-200 flex items-center gap-2">
|
|
<Lock size={14} /> SECURITY OPTIONS
|
|
</label>
|
|
|
|
<div className="p-5 bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl border-2 border-slate-200 shadow-inner space-y-4">
|
|
{/* Removed h3 */}
|
|
|
|
{/* Encryption Mode Toggle */}
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Encryption Mode</label>
|
|
<select
|
|
value={encryptionMode}
|
|
onChange={(e) => setEncryptionMode(e.target.value as 'pgp' | 'krux')}
|
|
disabled={isReadOnly}
|
|
className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all"
|
|
>
|
|
<option value="pgp">PGP (Asymmetric)</option>
|
|
<option value="krux">Krux KEF (Passphrase)</option>
|
|
</select>
|
|
<p className="text-[10px] text-slate-500 mt-1">
|
|
{encryptionMode === 'pgp'
|
|
? 'Uses PGP keys or password'
|
|
: 'Uses passphrase only (Krux compatible)'}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Krux-specific fields */}
|
|
{encryptionMode === 'krux' && activeTab === 'backup' && (
|
|
<>
|
|
<div className="space-y-2 pt-2">
|
|
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Krux Label</label>
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
className={`w-full pl-3 pr-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all ${
|
|
isReadOnly ? 'blur-sm select-none' : ''
|
|
}`}
|
|
placeholder="e.g., My Seed 2026"
|
|
value={kruxLabel}
|
|
onChange={(e) => setKruxLabel(e.target.value)}
|
|
readOnly={isReadOnly}
|
|
/>
|
|
</div>
|
|
<p className="text-[10px] text-slate-500 mt-1">Label for identification (max 252 bytes)</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider">PBKDF2 Iterations</label>
|
|
<div className="relative">
|
|
<input
|
|
type="number"
|
|
className={`w-full pl-3 pr-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all ${
|
|
isReadOnly ? 'blur-sm select-none' : ''
|
|
}`}
|
|
placeholder="e.g., 200000"
|
|
value={kruxIterations}
|
|
onChange={(e) => setKruxIterations(Number(e.target.value))}
|
|
min={10000}
|
|
step={10000}
|
|
readOnly={isReadOnly}
|
|
/>
|
|
</div>
|
|
<p className="text-[10px] text-slate-500 mt-1">Higher = more secure but slower (default: 200,000)</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Message Password</label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-3 text-slate-400" size={16} />
|
|
<input
|
|
type="password"
|
|
className={`w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all ${
|
|
isReadOnly ? 'blur-sm select-none' : ''
|
|
}`}
|
|
placeholder={encryptionMode === 'krux' ? "Required for Krux encryption" : "Optional password..."}
|
|
value={activeTab === 'backup' ? backupMessagePassword : restoreMessagePassword}
|
|
onChange={(e) => activeTab === 'backup' ? setBackupMessagePassword(e.target.value) : setRestoreMessagePassword(e.target.value)}
|
|
readOnly={isReadOnly}
|
|
/>
|
|
</div>
|
|
<p className="text-[10px] text-slate-500 mt-1">
|
|
{encryptionMode === 'krux'
|
|
? 'Required passphrase for Krux encryption'
|
|
: 'Symmetric encryption password (SKESK)'}
|
|
</p>
|
|
</div>
|
|
|
|
|
|
{activeTab === 'backup' && (
|
|
<div className="pt-3 border-t border-slate-300">
|
|
<label className="flex items-center gap-2 cursor-pointer group">
|
|
<input
|
|
type="checkbox"
|
|
checked={hasBip39Passphrase}
|
|
onChange={(e) => setHasBip39Passphrase(e.target.checked)}
|
|
disabled={isReadOnly}
|
|
className="rounded text-teal-600 focus:ring-2 focus:ring-teal-500 transition-all"
|
|
/>
|
|
<span className="text-xs font-medium text-slate-700 group-hover:text-slate-900 transition-colors">
|
|
BIP39 25th word active
|
|
</span>
|
|
</label>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
|
|
{/* Action Button */}
|
|
{activeTab === 'backup' ? (
|
|
<button
|
|
onClick={handleBackup}
|
|
disabled={!mnemonic || loading || isReadOnly}
|
|
className="w-full py-4 bg-gradient-to-r from-teal-500 to-cyan-600 text-white rounded-xl font-bold flex items-center justify-center gap-2 hover:from-teal-600 hover:to-cyan-700 transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:from-teal-500 disabled:hover:to-cyan-600"
|
|
>
|
|
{loading ? (
|
|
<RefreshCw className="animate-spin" size={20} />
|
|
) : (
|
|
<QrCode size={20} />
|
|
)}
|
|
{loading ? 'Generating...' : 'Generate QR Backup'}
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={handleRestore}
|
|
disabled={!restoreInput || loading || isReadOnly}
|
|
className="w-full py-4 bg-gradient-to-r from-slate-800 to-slate-900 text-white rounded-xl font-bold flex items-center justify-center gap-2 hover:from-slate-900 hover:to-black transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{loading ? (
|
|
<RefreshCw className="animate-spin" size={20} />
|
|
) : (
|
|
<Unlock size={20} />
|
|
)}
|
|
{loading ? 'Decrypting...' : 'Decrypt & Restore'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)} </div>
|
|
|
|
{/* QR Output */}
|
|
{qrPayload && activeTab === 'backup' && (
|
|
<div className="pt-6 border-t border-slate-200 space-y-6 animate-in fade-in slide-in-from-bottom-4">
|
|
<div className={isReadOnly ? 'blur-lg' : ''}>
|
|
<QrDisplay value={qrPayload} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider">
|
|
Raw payload (copy for backup)
|
|
</label>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => copyToClipboard(qrPayload)}
|
|
className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-900 text-white text-xs font-semibold hover:bg-black transition-colors"
|
|
>
|
|
{copied ? <CheckCircle2 size={14} /> : <QrCode size={14} />}
|
|
{copied ? "Copied" : "Copy"}
|
|
</button>
|
|
</div>
|
|
|
|
<textarea
|
|
readOnly
|
|
value={qrPayload}
|
|
onFocus={(e) => e.currentTarget.select()}
|
|
className="w-full h-28 p-3 bg-slate-900 rounded-xl font-mono text-[10px] text-green-400 placeholder:text-slate-500 border border-slate-700 shadow-inner leading-relaxed resize-none focus:outline-none focus:ring-2 focus:ring-teal-500"
|
|
/>
|
|
<p className="text-[11px] text-slate-500">
|
|
Tip: click the box to select all, or use Copy.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Restored Mnemonic */}
|
|
{decryptedRestoredMnemonic && activeTab === 'restore' && (
|
|
<div className="pt-6 border-t border-slate-200 animate-in zoom-in-95">
|
|
<div className="p-6 bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-300 rounded-2xl shadow-lg">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<span className="font-bold text-green-700 flex items-center gap-2 text-lg">
|
|
<CheckCircle2 size={22} /> Mnemonic Recovered
|
|
</span>
|
|
<button
|
|
onClick={() => setDecryptedRestoredMnemonic(null)}
|
|
className="p-2.5 hover:bg-green-100 rounded-xl transition-all text-green-700 hover:shadow"
|
|
>
|
|
<EyeOff size={22} /> Hide
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 bg-white rounded-xl border-2 border-green-200 shadow-sm">
|
|
<p className={`font-mono text-center text-lg text-slate-800 tracking-wide leading-relaxed break-words ${
|
|
isReadOnly ? 'blur-md select-none' : ''
|
|
}`}>
|
|
{decryptedRestoredMnemonic}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
<Footer
|
|
appVersion={__APP_VERSION__}
|
|
buildHash={__BUILD_HASH__}
|
|
buildTimestamp={__BUILD_TIMESTAMP__}
|
|
/>
|
|
|
|
{/* QR Scanner Modal */}
|
|
{showQRScanner && (
|
|
<QRScanner
|
|
onScanSuccess={(scannedText) => {
|
|
setRestoreInput(scannedText);
|
|
setShowQRScanner(false);
|
|
setError('');
|
|
}}
|
|
onClose={() => setShowQRScanner(false)}
|
|
/>
|
|
)}
|
|
|
|
{/* Security Modal */}
|
|
{showSecurityModal && (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
|
|
onClick={() => setShowSecurityModal(false)}
|
|
>
|
|
<div
|
|
className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<h3 className="text-lg font-semibold text-white mb-4">Security Limitations</h3>
|
|
<div className="text-sm text-slate-300 space-y-2">
|
|
<SecurityWarnings />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Storage Modal */}
|
|
{showStorageModal && (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
|
|
onClick={() => setShowStorageModal(false)}
|
|
>
|
|
<div
|
|
className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<h3 className="text-lg font-semibold text-white mb-4">Storage Details</h3>
|
|
<div className="text-sm text-slate-300 space-y-2">
|
|
<StorageDetails localItems={localItems} sessionItems={sessionItems} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Clipboard Modal */}
|
|
{showClipboardModal && (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
|
|
onClick={() => setShowClipboardModal(false)}
|
|
>
|
|
<div
|
|
className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<h3 className="text-lg font-semibold text-white mb-4">Clipboard Activity</h3>
|
|
<div className="text-sm text-slate-300 space-y-2">
|
|
<ClipboardDetails events={clipboardEvents} onClear={clearClipboard} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Lock Confirmation Modal */}
|
|
{showLockConfirm && (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
|
|
onClick={() => setShowLockConfirm(false)}
|
|
>
|
|
<div
|
|
className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
|
<Lock className="w-5 h-5 text-amber-500" />
|
|
Lock Sensitive Data?
|
|
</h3>
|
|
<div className="text-sm text-slate-300 space-y-3 mb-6">
|
|
<p>This will:</p>
|
|
<ul className="list-disc list-inside space-y-1 text-slate-400">
|
|
<li>Blur all sensitive data (mnemonics, keys, passwords)</li>
|
|
<li>Disable all inputs</li>
|
|
<li>Prevent clipboard operations</li>
|
|
</ul>
|
|
<p className="text-xs text-slate-500 mt-2">
|
|
Use this when showing the app to others or stepping away from your device.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<button
|
|
className="flex-1 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors"
|
|
onClick={() => setShowLockConfirm(false)}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
className="flex-1 py-2 bg-amber-500 hover:bg-amber-600 text-white font-semibold rounded-lg transition-colors"
|
|
onClick={confirmLock}
|
|
>
|
|
Lock Data
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App; |