feat(auth): add email/password login restricted to @craze.de accounts

- src/lib/auth.ts: signIn/signOut/getStoredSession via Supabase Auth REST API
- src/components/LoginPage.tsx: login form with domain validation UI
- src/components/TopBar.tsx: show logged-in user email + sign out button
- src/App.tsx: gate entire app behind auth — shows LoginPage if no session

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

src/App.tsx

@@ -8,8 +8,21 @@ import { MatrixView } from './components/MatrixView';
 import { UploadReload } from './components/UploadReload';
 import { EditPanel } from './components/EditPanel';
 import { getAllSyncedRows, saveRowToSupabase } from './lib/supabase';
+import { getStoredSession, signOut, type AuthSession } from './lib/auth';
+import { LoginPage } from './components/LoginPage';
 
 export default function App() {
+  const [session, setSession] = useState<AuthSession | null>(() => getStoredSession());
+
+  const handleSignOut = () => {
+    signOut();
+    setSession(null);
+  };
+
+  if (!session) {
+    return <LoginPage onLogin={() => setSession(getStoredSession())} />;
+  }
+
   const [appState, setAppState] = useState<AppState>({
     headers: [],
     data: [],
@@ -192,11 +205,13 @@ export default function App() {
 
   return (
     <div className="h-screen bg-slate-900 text-slate-200 flex flex-col font-sans overflow-hidden">
-      <TopBar 
+      <TopBar
-        stats={stats} 
+        stats={stats}
-        onExport={handleExport} 
+        onExport={handleExport}
-        hasData={appState.data.length > 0} 
+        hasData={appState.data.length > 0}
         hasUnsavedChanges={appState.hasUnsavedChanges}
+        userEmail={session.user.email}
+        onSignOut={handleSignOut}
       />
       <div className="flex flex-1 overflow-hidden">
         <Sidebar activeModule={activeModule} setActiveModule={setActiveModule} />

src/components/LoginPage.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { Database, Loader2, LogIn } from 'lucide-react';
+import { signIn } from '../lib/auth';
+
+interface LoginPageProps {
+  onLogin: () => void;
+}
+
+export function LoginPage({ onLogin }: LoginPageProps) {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      await signIn(email.trim(), password);
+      onLogin();
+    } catch (err: any) {
+      setError(err.message || 'Login failed.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-900 flex items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        <div className="flex flex-col items-center mb-8">
+          <div className="bg-blue-600 p-3 rounded-xl mb-4">
+            <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>
+        </div>
+
+        <form onSubmit={handleSubmit} className="bg-slate-800 border border-slate-700 rounded-xl p-6 shadow-2xl space-y-4">
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/30 text-red-400 text-sm rounded-md px-4 py-3">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1.5">Email</label>
+            <input
+              type="email"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              placeholder="you@craze.de"
+              required
+              autoFocus
+              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>
+
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1.5">Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={e => setPassword(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 ? 'Signing in...' : 'Sign in'}
+          </button>
+        </form>
+
+        <p className="text-center text-slate-600 text-xs mt-6">
+          Access restricted to @craze.de accounts
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/TopBar.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
-import { Download, Database } from 'lucide-react';
+import { Download, Database, LogOut } from 'lucide-react';
 
 interface TopBarProps {
   stats: any;
   onExport: () => void;
   hasData: boolean;
   hasUnsavedChanges: boolean;
+  userEmail?: string;
+  onSignOut?: () => void;
 }
 
-export function TopBar({ stats, onExport, hasData, hasUnsavedChanges }: TopBarProps) {
+export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail, onSignOut }: TopBarProps) {
   return (
     <header className="bg-slate-800 border-b border-slate-700 h-16 flex items-center justify-between px-6 shrink-0 z-10">
       <div className="flex items-center gap-3">
@@ -50,8 +52,8 @@ export function TopBar({ stats, onExport, hasData, hasUnsavedChanges }: TopBarPr
           <button
             onClick={onExport}
             className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors ${
-              hasUnsavedChanges 
+              hasUnsavedChanges
-                ? 'bg-blue-600 hover:bg-blue-700 text-white' 
+                ? 'bg-blue-600 hover:bg-blue-700 text-white'
                 : 'bg-slate-700 hover:bg-slate-600 text-slate-200'
             }`}
           >
@@ -60,6 +62,18 @@ export function TopBar({ stats, onExport, hasData, hasUnsavedChanges }: TopBarPr
             {hasUnsavedChanges && <span className="w-2 h-2 rounded-full bg-red-500 ml-1 animate-pulse" />}
           </button>
         )}
+        {userEmail && (
+          <div className="flex items-center gap-2 border-l border-slate-700 pl-3">
+            <span className="text-xs text-slate-400">{userEmail}</span>
+            <button
+              onClick={onSignOut}
+              title="Sign out"
+              className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-700 rounded-md transition-colors"
+            >
+              <LogOut className="w-4 h-4" />
+            </button>
+          </div>
+        )}
       </div>
     </header>
   );

src/lib/auth.ts

@@ -0,0 +1,51 @@
+const SUPABASE_URL = 'https://hwithddwaapyhnfwcesj.supabase.co';
+const SUPABASE_ANON_KEY = 'sb_publishable_fGXkh0bSrAOqSk2jWKAzSg_NJD9YPCv';
+const ALLOWED_DOMAIN = '@craze.de';
+const SESSION_KEY = 'craze_auth_session';
+
+export interface AuthSession {
+  access_token: string;
+  user: { id: string; email: string };
+}
+
+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.`);
+  }
+
+  const response = await fetch(`${SUPABASE_URL}/auth/v1/token?grant_type=password`, {
+    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 || 'Invalid email or password.');
+  }
+
+  const data = await response.json();
+  const session: AuthSession = {
+    access_token: data.access_token,
+    user: { id: data.user.id, email: data.user.email },
+  };
+
+  localStorage.setItem(SESSION_KEY, JSON.stringify(session));
+  return session;
+}
+
+export function signOut(): void {
+  localStorage.removeItem(SESSION_KEY);
+}
+
+export function getStoredSession(): AuthSession | null {
+  try {
+    const raw = localStorage.getItem(SESSION_KEY);
+    return raw ? (JSON.parse(raw) as AuthSession) : null;
+  } catch {
+    return null;
+  }
+}