Password Manager experiment built on ATProto Spaces
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461import React, { useState, useEffect } from 'react';import { Lock, Unlock, KeyRound, ShieldCheck, AlertCircle, Sparkles, Sliders, ChevronDown, ChevronUp, Eye, EyeOff, LogOut, Globe, CheckCircle2, Copy, ExternalLink} from 'lucide-react';import { useVault } from '../context/VaultContext.js';
export const LockScreen: React.FC = () => { const { did, isInitialized, initializeVault, unlockVault, loadDemoVault, isLoading, error, kdfSettings, setKdfSettings, oauthSession, isOAuthLoading, isAtprotoConnected, handle, spaceUri, connectWithOAuth, disconnectOAuth } = useVault();
const [identifier, setIdentifier] = useState('https://spaces-alpha.host.bsky.network'); const [mode, setMode] = useState<'unlock' | 'create'>('unlock'); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const [showKdfSettings, setShowKdfSettings] = useState(false); const [localError, setLocalError] = useState<string | null>(null); const [copiedDid, setCopiedDid] = useState(false); const [isSigningIn, setIsSigningIn] = useState(false);
useEffect(() => { if (isInitialized) { setMode('unlock'); } else { setMode('create'); } }, [isInitialized]);
const handleOAuthConnect = async (e: React.FormEvent) => { e.preventDefault(); if (!identifier.trim()) return; setLocalError(null); setIsSigningIn(true); try { await connectWithOAuth(identifier.trim()); } catch (err: any) { setLocalError(err.message || 'Failed to connect via OAuth'); } finally { setIsSigningIn(false); } };
const handleVaultSubmit = async (e: React.FormEvent) => { e.preventDefault(); setLocalError(null);
if (!password) { setLocalError('Please enter your master password.'); return; }
try { if (mode === 'create') { if (password.length < 8) { setLocalError('Master password must be at least 8 characters long.'); return; } if (password !== confirmPassword) { setLocalError('Master passwords do not match.'); return; } await initializeVault(password, kdfSettings); } else { await unlockVault(password); } } catch (err: any) { console.warn('Authentication attempt failed:', err); } };
const handleCopyDid = () => { navigator.clipboard.writeText(did); setCopiedDid(true); setTimeout(() => setCopiedDid(false), 2000); };
const handleDemoVault = async () => { setLocalError(null); try { await loadDemoVault(); } catch (err: any) { setLocalError(err.message || 'Failed to load demo vault'); } };
const currentDisplayError = localError || error;
return ( <div className="min-h-screen flex items-center justify-center bg-radial from-slate-900 via-slate-950 to-black p-4 sm:p-6 text-slate-100"> <div className="w-full max-w-md"> <div className="text-center mb-8"> <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-tr from-cyan-600 via-teal-500 to-sky-400 shadow-xl shadow-cyan-500/20 mb-4 border border-cyan-300/30"> <ShieldCheck className="w-9 h-9 text-slate-950 stroke-[2.2]" /> </div> <h1 className="text-3xl font-bold tracking-tight bg-gradient-to-r from-white via-slate-200 to-slate-400 bg-clip-text text-transparent"> 2password </h1> <p className="text-sm text-slate-400 mt-1.5 font-medium"> Zero-Knowledge Vault natively secured by AT Protocol & Spaces </p> </div>
<div className="bg-slate-900/80 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-6 sm:p-8 space-y-6"> {currentDisplayError && ( <div className="flex items-start gap-3 p-3.5 rounded-xl bg-rose-500/10 border border-rose-500/30 text-rose-300 text-xs animate-shake"> <AlertCircle className="w-4 h-4 text-rose-400 shrink-0 mt-0.5" /> <div className="flex-1 leading-relaxed"> <span className="font-semibold block">Notice</span> {currentDisplayError} </div> </div> )}
{!isAtprotoConnected && !did.includes('demo') ? ( <div className="space-y-5"> <div className="text-center space-y-1"> <h2 className="text-base font-semibold text-slate-200 flex items-center justify-center gap-2"> <Globe className="w-4 h-4 text-cyan-400" /> Connect with AT Protocol </h2> <p className="text-xs text-slate-400 leading-relaxed"> Log in via ATProto OAuth to securely link your Space and derive your identity salt. </p> </div>
<form onSubmit={handleOAuthConnect} className="space-y-4"> <div> <label className="block text-xs font-medium text-slate-300 mb-1.5"> Handle, DID, or PDS Host </label> <input type="text" value={identifier} onChange={(e) => setIdentifier(e.target.value)} placeholder="alice.bsky.social or https://spaces-alpha.host.bsky.network" className="w-full px-3.5 py-2.5 bg-slate-950/60 border border-slate-700/80 rounded-xl text-sm text-slate-200 placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition-colors" required />
<div className="mt-2 flex items-center gap-2"> <span className="text-[10px] text-slate-500">Quick connect:</span> <button type="button" onClick={() => setIdentifier('https://spaces-alpha.host.bsky.network')} className="text-[10px] px-2 py-0.5 rounded bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white transition-colors" > spaces-alpha </button> <button type="button" onClick={() => setIdentifier('https://bsky.social')} className="text-[10px] px-2 py-0.5 rounded bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white transition-colors" > bsky.social </button> </div> </div>
<button type="submit" disabled={isSigningIn || isOAuthLoading} className="w-full py-3 px-4 rounded-xl bg-gradient-to-r from-cyan-500 to-teal-500 hover:from-cyan-400 hover:to-teal-400 text-slate-950 font-bold text-sm shadow-lg shadow-cyan-500/20 hover:shadow-cyan-500/30 transition-all flex items-center justify-center gap-2 disabled:opacity-50 cursor-pointer" > {isSigningIn || isOAuthLoading ? ( <> <div className="w-4 h-4 border-2 border-slate-950 border-t-transparent rounded-full animate-spin" /> <span>Redirecting to PDS OAuth…</span> </> ) : ( <> <ExternalLink className="w-4 h-4 stroke-[2.5]" /> <span>Connect with AT Protocol</span> </> )} </button> </form>
<div className="relative my-2"> <div className="absolute inset-0 flex items-center"> <div className="w-full border-t border-slate-800" /> </div> <div className="relative flex justify-center text-[11px] uppercase tracking-wider"> <span className="bg-slate-900 px-3 text-slate-500 font-medium">Or</span> </div> </div>
<button type="button" onClick={handleDemoVault} disabled={isLoading} className="w-full py-2.5 px-4 rounded-xl bg-slate-950 hover:bg-slate-800/80 border border-slate-700/80 hover:border-cyan-500/50 text-slate-200 text-xs font-semibold transition-all flex items-center justify-center gap-2 group cursor-pointer shadow-sm" > <Sparkles className="w-4 h-4 text-cyan-400 group-hover:scale-110 transition-transform" /> <span>Try Demo Vault (Local / Offline Mode)</span> </button> </div> ) : ( <div className="space-y-6"> <div className="p-3 rounded-xl bg-slate-950/70 border border-teal-500/30 flex items-center justify-between"> <div className="flex items-center gap-2.5 min-w-0"> <span className="relative flex h-2.5 w-2.5 shrink-0"> <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-teal-400 opacity-75" /> <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-teal-500" /> </span> <div className="min-w-0"> <div className="flex items-center gap-1.5"> <span className="text-xs font-bold text-slate-200 truncate"> {handle ? `@${handle}` : 'ATProto Connected'} </span> <CheckCircle2 className="w-3.5 h-3.5 text-teal-400 shrink-0" /> </div> <div className="flex items-center gap-1"> <span className="text-[10px] font-mono text-slate-400 truncate max-w-[170px]" title={did}> {did} </span> <button type="button" onClick={handleCopyDid} className="text-slate-500 hover:text-slate-300 transition-colors" title="Copy DID" > {copiedDid ? <CheckCircle2 className="w-2.5 h-2.5 text-teal-400" /> : <Copy className="w-2.5 h-2.5" />} </button> </div> {spaceUri && ( <div className="text-[9px] font-mono text-teal-400/90 truncate max-w-[170px] mt-0.5" title={`Secret ATProto Space: ${spaceUri}`}> 🔒 Space: {typeof spaceUri === 'string' ? spaceUri.split('/').pop() : ''} </div> )} </div> </div>
<button type="button" onClick={disconnectOAuth} className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white transition-all flex items-center gap-1 shrink-0" > <LogOut className="w-3 h-3" /> <span>Disconnect</span> </button> </div>
<div className="flex rounded-xl bg-slate-950/80 p-1 border border-slate-800"> <button type="button" onClick={() => { setMode('unlock'); setLocalError(null); }} className={`flex-1 py-2 text-xs font-semibold rounded-lg transition-all flex items-center justify-center gap-1.5 ${ mode === 'unlock' ? 'bg-gradient-to-r from-cyan-600 to-teal-600 text-white shadow-md' : 'text-slate-400 hover:text-slate-200' }`} > <Lock className="w-3.5 h-3.5" /> Unlock Vault </button> <button type="button" onClick={() => { setMode('create'); setLocalError(null); }} className={`flex-1 py-2 text-xs font-semibold rounded-lg transition-all flex items-center justify-center gap-1.5 ${ mode === 'create' ? 'bg-gradient-to-r from-cyan-600 to-teal-600 text-white shadow-md' : 'text-slate-400 hover:text-slate-200' }`} > <KeyRound className="w-3.5 h-3.5" /> New Vault </button> </div>
<form onSubmit={handleVaultSubmit} className="space-y-4"> <div> <div className="flex items-center justify-between mb-1.5"> <label className="text-xs font-medium text-slate-300"> Master Password </label> <span className="text-[10px] text-cyan-400 font-mono"> Zero-Knowledge AES-256 </span> </div> <div className="relative"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-500"> <Lock className="w-4 h-4" /> </div> <input type={showPassword ? 'text' : 'password'} value={password} onChange={(e) => setPassword(e.target.value)} placeholder={mode === 'create' ? 'Create a strong master password' : 'Enter your master password'} className="w-full pl-9 pr-10 py-2.5 bg-slate-950/60 border border-slate-700/80 rounded-xl text-sm text-slate-200 placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition-colors" required /> <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute inset-y-0 right-0 pr-3 flex items-center text-slate-400 hover:text-slate-200 transition-colors" aria-label={showPassword ? 'Hide password' : 'Show password'} > {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />} </button> </div> </div>
{mode === 'create' && ( <div> <label className="block text-xs font-medium text-slate-300 mb-1.5"> Confirm Master Password </label> <div className="relative"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-500"> <Lock className="w-4 h-4" /> </div> <input type={showPassword ? 'text' : 'password'} value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} placeholder="Repeat master password" className="w-full pl-9 pr-3 py-2.5 bg-slate-950/60 border border-slate-700/80 rounded-xl text-sm text-slate-200 placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition-colors" required /> </div> </div> )}
<div className="pt-1"> <button type="button" onClick={() => setShowKdfSettings(!showKdfSettings)} className="w-full flex items-center justify-between text-xs text-slate-400 hover:text-slate-200 py-1 transition-colors" > <span className="flex items-center gap-1.5"> <Sliders className="w-3.5 h-3.5 text-cyan-400" /> Argon2id KDF Parameters </span> <span className="flex items-center gap-1 font-mono text-[10px] text-slate-500"> {kdfSettings.iterations} iters / {Math.round(kdfSettings.memory / 1024)} MB {showKdfSettings ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />} </span> </button>
{showKdfSettings && ( <div className="mt-2.5 p-3 rounded-xl bg-slate-950/90 border border-slate-800 space-y-3 text-xs"> <div className="flex items-center justify-between"> <span className="text-slate-400">Iterations (Time cost):</span> <div className="flex items-center gap-2"> <input type="range" min="1" max="8" step="1" value={kdfSettings.iterations} disabled={mode === 'unlock' && isInitialized} onChange={(e) => setKdfSettings((prev) => ({ ...prev, iterations: Number(e.target.value) })) } className="w-24 accent-cyan-500" /> <span className="font-mono text-cyan-400 w-4 text-right"> {kdfSettings.iterations} </span> </div> </div>
<div className="flex items-center justify-between"> <span className="text-slate-400">Memory (KiB):</span> <div className="flex items-center gap-2"> <select value={kdfSettings.memory} disabled={mode === 'unlock' && isInitialized} onChange={(e) => setKdfSettings((prev) => ({ ...prev, memory: Number(e.target.value) })) } className="bg-slate-900 border border-slate-700 rounded-lg px-2 py-1 font-mono text-[11px] text-slate-200" > <option value={16384}>16 MB (Fast / Mobile)</option> <option value={32768}>32 MB (Balanced)</option> <option value={65536}>64 MB (Standard RFC)</option> <option value={131072}>128 MB (High Security)</option> </select> </div> </div>
<div className="flex items-center justify-between"> <span className="text-slate-400">Parallelism (Lanes):</span> <span className="font-mono text-cyan-400">{kdfSettings.parallelism}</span> </div> </div> )} </div>
<button type="submit" disabled={isLoading} className="w-full py-3 px-4 rounded-xl bg-gradient-to-r from-cyan-500 to-teal-500 hover:from-cyan-400 hover:to-teal-400 text-slate-950 font-bold text-sm shadow-lg shadow-cyan-500/20 hover:shadow-cyan-500/30 transition-all flex items-center justify-center gap-2 disabled:opacity-50 cursor-pointer" > {isLoading ? ( <> <div className="w-4 h-4 border-2 border-slate-950 border-t-transparent rounded-full animate-spin" /> <span>{mode === 'create' ? 'Deriving Master Key & Initializing...' : 'Verifying & Unlocking...'}</span> </> ) : mode === 'create' ? ( <> <KeyRound className="w-4 h-4 stroke-[2.5]" /> <span>Create & Initialize Vault in Space</span> </> ) : ( <> <Unlock className="w-4 h-4 stroke-[2.5]" /> <span>Unlock Vault</span> </> )} </button> </form> </div> )} </div>
<p className="text-center text-xs text-slate-600 mt-6"> Encrypted client-side with AES-256-GCM. Master keys never leave this browser. </p> </div> </div> );};