feat: Sprint 1 slice 1 — API signup + web signup/chat shell

- api: Fastify POST /auth/signup (validation, scrypt hash, in-memory store) - web: React+Vite SignUp form and chat shell with dev proxy - 35 tests green (api 5, web 2, e2e 28)
2026-08-15 19:53:13 +01:00
parent 2f53b1901b
commit 9733ba6e3c
21 changed files with 1706 additions and 14 deletions
@@ -0,0 +1,28 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SignUp } from '../src/components/SignUp.tsx';
+
+describe('SignUp', () => {
+  it('submits the email and password', async () => {
+    const onSignUp = vi.fn().mockResolvedValue(undefined);
+    render(<SignUp onSignUp={onSignUp} />);
+
+    await userEvent.type(screen.getByLabelText('Email'), 'a@example.com');
+    await userEvent.type(screen.getByLabelText('Password'), 'password123');
+    await userEvent.click(screen.getByRole('button', { name: 'Sign up' }));
+
+    expect(onSignUp).toHaveBeenCalledWith('a@example.com', 'password123');
+  });
+
+  it('shows an error when signup fails', async () => {
+    const onSignUp = vi.fn().mockRejectedValue(new Error('email_exists'));
+    render(<SignUp onSignUp={onSignUp} />);
+
+    await userEvent.type(screen.getByLabelText('Email'), 'a@example.com');
+    await userEvent.type(screen.getByLabelText('Password'), 'password123');
+    await userEvent.click(screen.getByRole('button', { name: 'Sign up' }));
+
+    expect(await screen.findByRole('alert')).toHaveTextContent('email_exists');
+  });
+});
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wursor</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -2,5 +2,26 @@
  "name": "@wursor/web",
  "private": true,
  "type": "module",
-  "scripts": {}
+  "scripts": {
+    "test": "vitest run",
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.4",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.0.5",
+    "jsdom": "^30.0.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.2.1",
+    "vitest": "^3.2.7"
+  }
 }
@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { SignUp } from './components/SignUp.tsx';
+
+async function signUp(email: string, password: string): Promise<void> {
+  const res = await fetch('/auth/signup', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, password }),
+  });
+  if (!res.ok) {
+    const body = (await res.json().catch(() => null)) as { error?: string } | null;
+    throw new Error(body?.error ?? 'Sign up failed');
+  }
+}
+
+export function App() {
+  const [signedUp, setSignedUp] = useState(false);
+
+  if (signedUp) {
+    return (
+      <div className="wursor-welcome">
+        <p>Describe what you want.</p>
+        <input className="wursor-chat-input" placeholder="Describe what you want…" />
+      </div>
+    );
+  }
+
+  return (
+    <SignUp
+      onSignUp={async (email, password) => {
+        await signUp(email, password);
+        setSignedUp(true);
+      }}
+    />
+  );
+}
@@ -0,0 +1,42 @@
+import { useState, type FormEvent } from 'react';
+
+type SignUpProps = {
+  onSignUp: (email: string, password: string) => Promise<void>;
+};
+
+export function SignUp({ onSignUp }: SignUpProps) {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      await onSignUp(email, password);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Something went wrong');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <form className="wursor-signup" onSubmit={submit}>
+      <input name="email" type="email" aria-label="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
+      <input
+        name="password"
+        type="password"
+        aria-label="Password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      {error ? <p role="alert">{error}</p> : null}
+      <button type="submit" disabled={submitting}>
+        Sign up
+      </button>
+    </form>
+  );
+}
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App.tsx';
+import './styles/global.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,8 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, sans-serif;
+}
@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+  cleanup();
+});
@@ -0,0 +1,15 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/auth': 'http://localhost:3000',
+    },
+  },
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test-setup.ts'],
+  },
+});