Add sign-in / sign-up form

frontend/src/auth/SignIn.tsx

@@ -0,0 +1,70 @@
+import { useState, type FormEvent } from 'react';
+import { supabase } from '../lib/supabase';
+
+type Mode = 'signIn' | 'signUp';
+
+export function SignIn() {
+  const [mode, setMode] = useState<Mode>('signIn');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setBusy(true);
+    try {
+      const { error } =
+        mode === 'signIn'
+          ? await supabase.auth.signInWithPassword({ email, password })
+          : await supabase.auth.signUp({ email, password });
+      if (error) setError(error.message);
+      // On success, AuthProvider's onAuthStateChange updates session and the UI switches.
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div style={{ maxWidth: 320, margin: '4rem auto', fontFamily: 'sans-serif' }}>
+      <h1>{mode === 'signIn' ? 'Sign in' : 'Sign up'}</h1>
+      <form onSubmit={onSubmit}>
+        <label style={{ display: 'block', marginBottom: 8 }}>
+          Email
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            style={{ width: '100%', padding: 6 }}
+          />
+        </label>
+        <label style={{ display: 'block', marginBottom: 8 }}>
+          Password
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            minLength={6}
+            style={{ width: '100%', padding: 6 }}
+          />
+        </label>
+        <button type="submit" disabled={busy} style={{ width: '100%', padding: 8 }}>
+          {busy ? 'Working…' : mode === 'signIn' ? 'Sign in' : 'Sign up'}
+        </button>
+      </form>
+      {error && <p style={{ color: 'crimson' }}>{error}</p>}
+      <p>
+        <button
+          type="button"
+          onClick={() => setMode(mode === 'signIn' ? 'signUp' : 'signIn')}
+          style={{ background: 'none', border: 'none', color: '#06f', cursor: 'pointer' }}
+        >
+          {mode === 'signIn' ? "Don't have an account? Sign up" : 'Have an account? Sign in'}
+        </button>
+      </p>
+    </div>
+  );
+}