feat(auth): add sign up flow with email domain validation and password confirm

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

src/components/LoginPage.tsx

@@ -1,32 +1,61 @@
 import React, { useState } from 'react';
-import { Database, Loader2, LogIn } from 'lucide-react';
+import { Database, Loader2, LogIn, UserPlus } from 'lucide-react';
-import { signIn } from '../lib/auth';
+import { signIn, signUp } from '../lib/auth';
 
 interface LoginPageProps {
   onLogin: () => void;
 }
 
 export function LoginPage({ onLogin }: LoginPageProps) {
+  const [mode, setMode] = useState<'signin' | 'signup'>('signin');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [successMsg, setSuccessMsg] = useState<string | null>(null);
+
+  const switchMode = (next: 'signin' | 'signup') => {
+    setMode(next);
+    setError(null);
+    setSuccessMsg(null);
+    setPassword('');
+    setConfirmPassword('');
+  };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    setLoading(true);
     setError(null);
+    setSuccessMsg(null);
 
+    if (mode === 'signup' && password !== confirmPassword) {
+      setError('Passwords do not match.');
+      return;
+    }
+    if (mode === 'signup' && password.length < 8) {
+      setError('Password must be at least 8 characters.');
+      return;
+    }
+
+    setLoading(true);
     try {
-      await signIn(email.trim(), password);
+      if (mode === 'signup') {
-      onLogin();
+        await signUp(email.trim(), password);
+        setSuccessMsg('Account created! Check your email to confirm, then sign in.');
+        switchMode('signin');
+      } else {
+        await signIn(email.trim(), password);
+        onLogin();
+      }
     } catch (err: any) {
-      setError(err.message || 'Login failed.');
+      setError(err.message || 'Something went wrong.');
     } finally {
       setLoading(false);
     }
   };
 
+  const isSignUp = mode === 'signup';
+
   return (
     <div className="min-h-screen bg-slate-900 flex items-center justify-center p-4">
       <div className="w-full max-w-sm">
@@ -35,7 +64,31 @@ export function LoginPage({ onLogin }: LoginPageProps) {
             <Database className="w-8 h-8 text-white" />
           </div>
           <h1 className="text-2xl font-bold text-white">CRAZE Data Quality</h1>
-          <p className="text-slate-400 text-sm mt-1">Sign in with your CRAZE account</p>
+          <p className="text-slate-400 text-sm mt-1">
+            {isSignUp ? 'Create your CRAZE account' : 'Sign in with your CRAZE account'}
+          </p>
+        </div>
+
+        {/* Mode toggle */}
+        <div className="flex bg-slate-800 border border-slate-700 rounded-lg p-1 mb-4">
+          <button
+            type="button"
+            onClick={() => switchMode('signin')}
+            className={`flex-1 py-2 text-sm font-medium rounded-md transition-colors ${
+              !isSignUp ? 'bg-blue-600 text-white' : 'text-slate-400 hover:text-white'
+            }`}
+          >
+            Sign in
+          </button>
+          <button
+            type="button"
+            onClick={() => switchMode('signup')}
+            className={`flex-1 py-2 text-sm font-medium rounded-md transition-colors ${
+              isSignUp ? 'bg-blue-600 text-white' : 'text-slate-400 hover:text-white'
+            }`}
+          >
+            Create account
+          </button>
         </div>
 
         <form onSubmit={handleSubmit} className="bg-slate-800 border border-slate-700 rounded-xl p-6 shadow-2xl space-y-4">
@@ -44,6 +97,11 @@ export function LoginPage({ onLogin }: LoginPageProps) {
               {error}
             </div>
           )}
+          {successMsg && (
+            <div className="bg-green-500/10 border border-green-500/30 text-green-400 text-sm rounded-md px-4 py-3">
+              {successMsg}
+            </div>
+          )}
 
           <div>
             <label className="block text-sm font-medium text-slate-300 mb-1.5">Email</label>
@@ -70,18 +128,34 @@ export function LoginPage({ onLogin }: LoginPageProps) {
             />
           </div>
 
+          {isSignUp && (
+            <div>
+              <label className="block text-sm font-medium text-slate-300 mb-1.5">Confirm password</label>
+              <input
+                type="password"
+                value={confirmPassword}
+                onChange={e => setConfirmPassword(e.target.value)}
+                placeholder="••••••••"
+                required
+                className="w-full bg-slate-900 border border-slate-700 rounded-md px-3 py-2.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+              />
+            </div>
+          )}
+
           <button
             type="submit"
             disabled={loading}
             className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-60 disabled:cursor-not-allowed text-white font-medium py-2.5 rounded-md transition-colors text-sm mt-2"
           >
-            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <LogIn className="w-4 h-4" />}
+            {loading
-            {loading ? 'Signing in...' : 'Sign in'}
+              ? <Loader2 className="w-4 h-4 animate-spin" />
+              : isSignUp ? <UserPlus className="w-4 h-4" /> : <LogIn className="w-4 h-4" />}
+            {loading ? (isSignUp ? 'Creating account...' : 'Signing in...') : isSignUp ? 'Create account' : 'Sign in'}
           </button>
         </form>
 
         <p className="text-center text-slate-600 text-xs mt-6">
-          Access restricted to @craze.de accounts
+          Access restricted to @craze-group.com accounts
         </p>
       </div>
     </div>

src/lib/auth.ts

@@ -8,6 +8,26 @@ export interface AuthSession {
   user: { id: string; email: string };
 }
 
+export async function signUp(email: string, password: string): Promise<void> {
+  if (!email.toLowerCase().endsWith(ALLOWED_DOMAIN)) {
+    throw new Error(`Only ${ALLOWED_DOMAIN} email addresses are allowed.`);
+  }
+
+  const response = await fetch(`${SUPABASE_URL}/auth/v1/signup`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'apikey': SUPABASE_ANON_KEY,
+    },
+    body: JSON.stringify({ email, password }),
+  });
+
+  if (!response.ok) {
+    const err = await response.json().catch(() => ({}));
+    throw new Error(err.error_description || err.message || 'Registration failed.');
+  }
+}
+
 export async function signIn(email: string, password: string): Promise<AuthSession> {
   if (!email.toLowerCase().endsWith(ALLOWED_DOMAIN)) {
     throw new Error(`Only ${ALLOWED_DOMAIN} email addresses are allowed.`);