Initial CloudLink scaffold: E2E encrypted PWA with messaging and cloud drive

- Zero-knowledge architecture: all encryption/decryption client-side via Web Crypto API
- AES-GCM 256 for messages, files, and key wrapping; PBKDF2 for password-based key derivation
- Node.js/TypeScript backend: JWT auth with refresh rotation, argon2id passwords, TOTP 2FA
- PostgreSQL schema: encrypted blobs only, server never stores plaintext
- Real-time messaging via WebSocket relay (server routes ciphertext, cannot read it)
- Encrypted file upload/download with per-file keys wrapped by user master key
- React PWA frontend: Vite + Tailwind + service worker for offline support
- Docker Compose: postgres + backend + frontend + nginx with TLS

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,135 @@
+import { useState, FormEvent } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Shield } from 'lucide-react';
+import api from '../lib/api';
+import { useAuthStore } from '../lib/store';
+import { deriveKeyFromPassword, decryptMasterKey } from '../crypto';
+import { socket } from '../lib/ws';
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const { setAuth, setMasterKey, setUsername } = useAuthStore();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [totpCode, setTotpCode] = useState('');
+  const [require2fa, setRequire2fa] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  async function submit(e: FormEvent) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const res = await api.post('/auth/login', {
+        email,
+        password,
+        ...(totpCode ? { totpCode } : {}),
+      });
+
+      if (res.data.require2fa) {
+        setRequire2fa(true);
+        setLoading(false);
+        return;
+      }
+
+      const { accessToken, refreshToken, userId, kdfSalt, encryptedMasterKey, username } =
+        res.data;
+
+      // Derive key from password — never leaves the browser
+      const derived = await deriveKeyFromPassword(password, kdfSalt);
+      const masterKey = await decryptMasterKey(encryptedMasterKey, derived);
+
+      setAuth({ accessToken, refreshToken, userId });
+      setMasterKey(masterKey);
+      setUsername(username);
+
+      socket.connect(accessToken);
+      navigate('/messages');
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Login failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        <div className="flex flex-col items-center mb-8">
+          <Shield className="w-12 h-12 text-accent mb-3" />
+          <h1 className="text-2xl font-bold">CloudLink</h1>
+          <p className="text-slate-400 text-sm mt-1">End-to-end encrypted</p>
+        </div>
+
+        <form onSubmit={submit} className="bg-surface-1 rounded-xl p-6 space-y-4 border border-slate-700">
+          <h2 className="font-semibold text-lg">Sign in</h2>
+
+          {error && <p className="text-red-400 text-sm">{error}</p>}
+
+          {!require2fa ? (
+            <>
+              <Field label="Email" type="email" value={email} onChange={setEmail} />
+              <Field label="Password" type="password" value={password} onChange={setPassword} />
+            </>
+          ) : (
+            <div>
+              <label className="block text-sm text-slate-400 mb-1">Authenticator code</label>
+              <input
+                className="input w-full"
+                type="text"
+                inputMode="numeric"
+                maxLength={6}
+                placeholder="000000"
+                value={totpCode}
+                onChange={(e) => setTotpCode(e.target.value)}
+                autoFocus
+              />
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="btn-primary w-full"
+          >
+            {loading ? 'Signing in…' : require2fa ? 'Verify' : 'Sign in'}
+          </button>
+        </form>
+
+        <p className="text-center text-sm text-slate-400 mt-4">
+          No account?{' '}
+          <Link to="/register" className="text-accent hover:underline">
+            Register
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function Field({
+  label,
+  type,
+  value,
+  onChange,
+}: {
+  label: string;
+  type: string;
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <div>
+      <label className="block text-sm text-slate-400 mb-1">{label}</label>
+      <input
+        className="input w-full"
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        required
+      />
+    </div>
+  );
+}