cloudlink/frontend/src/pages/RegisterPage.tsx

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 {
  generateKdfSalt,
  deriveKeyFromPassword,
  generateMasterKey,
  encryptMasterKey,
  generateX25519Keypair,
  encryptPrivateKey,
} from '../crypto';
import { socket } from '../lib/ws';

export default function RegisterPage() {
  const navigate = useNavigate();
  const { setAuth, setMasterKey, setKeyPair, setUsername } = useAuthStore();
  const [username, setUsernameField] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  async function submit(e: FormEvent) {
    e.preventDefault();
    setError('');
    if (password !== confirm) { setError('Passwords do not match'); return; }
    if (password.length < 12) { setError('Password must be at least 12 characters'); return; }

    setLoading(true);
    try {
      // All crypto material generated client-side — nothing sensitive leaves the browser in plaintext
      const kdfSalt = await generateKdfSalt();
      const derivedKey = await deriveKeyFromPassword(password, kdfSalt);
      const masterKey = await generateMasterKey();
      const encryptedMasterKey = await encryptMasterKey(masterKey, derivedKey);

      // X25519 keypair for ECDH conversation key exchange
      const { publicKeyB64, privateKey, pkcs8Bytes } = await generateX25519Keypair();
      const encryptedPrivKey = await encryptPrivateKey(pkcs8Bytes, masterKey);

      const res = await api.post('/auth/register', {
        username,
        email,
        password,
        kdfSalt,
        encryptedMasterKey,
        publicKey: publicKeyB64,
        encryptedPrivateKey: encryptedPrivKey,
      });

      const { accessToken, refreshToken, userId } = res.data;
      setAuth({ accessToken, refreshToken, userId, email });
      setMasterKey(masterKey);
      setKeyPair(publicKeyB64, privateKey);
      setUsername(username);

      socket.connect(accessToken);
      navigate('/messages');
    } catch (err: any) {
      setError(err.response?.data?.error || err.message || 'Registration 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">Create your encrypted account</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">Create account</h2>
          {error && <p className="text-red-400 text-sm">{error}</p>}

          <Field label="Username" type="text" value={username} onChange={setUsernameField} />
          <Field label="Email" type="email" value={email} onChange={setEmail} />
          <Field label="Password (min 12 chars)" type="password" value={password} onChange={setPassword} />
          <Field label="Confirm password" type="password" value={confirm} onChange={setConfirm} />

          <p className="text-xs text-slate-500">
            Your password derives the encryption key. If you forget it, your data cannot be recovered.
          </p>

          <button type="submit" disabled={loading} className="btn-primary w-full">
            {loading ? 'Generating keys…' : 'Create account'}
          </button>
        </form>

        <p className="text-center text-sm text-slate-400 mt-4">
          Already have an account?{' '}
          <Link to="/login" className="text-accent hover:underline">Sign in</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>
  );
}