Add invite code gate page before login

Users must enter "taboola-npo-cz" to access the app. Code is saved in localStorage so it only needs to be entered once per browser.

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

chatkit/frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { Header } from "./components/Header";
+import { InviteGate } from "./components/InviteGate";
 import { LoginForm } from "./components/LoginForm";
 import { StepIndicator } from "./components/StepIndicator";
 import { FileUploadPanel } from "./components/step1/FileUploadPanel";
@@ -8,6 +9,8 @@ import { PromptEditor } from "./components/step2/PromptEditor";
 import { ReportViewer } from "./components/step3/ReportViewer";
 import { apiGet, apiPost, getToken, clearToken } from "./lib/api";
 
+const INVITE_CODE = "taboola-npo-cz";
+
 interface User {
   id: number;
   email: string;
@@ -15,6 +18,7 @@ interface User {
 }
 
 export default function App() {
+  const [invited, setInvited] = useState(() => localStorage.getItem("invite_code") === INVITE_CODE);
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
   const [currentStep, setCurrentStep] = useState<1 | 2 | 3>(1);
@@ -131,6 +135,19 @@ export default function App() {
     );
   }
 
+  // Invite code gate
+  if (!invited) {
+    return (
+      <InviteGate
+        onSuccess={() => {
+          localStorage.setItem("invite_code", INVITE_CODE);
+          setInvited(true);
+        }}
+        correctCode={INVITE_CODE}
+      />
+    );
+  }
+
   // Login gate
   if (!user) {
     return <LoginForm onLogin={setUser} />;

chatkit/frontend/src/components/InviteGate.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { CLASSLENS_ICON } from "../lib/icon";
+
+interface InviteGateProps {
+  onSuccess: () => void;
+  correctCode: string;
+}
+
+export function InviteGate({ onSuccess, correctCode }: InviteGateProps) {
+  const [code, setCode] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (code.trim() === correctCode) {
+      onSuccess();
+    } else {
+      setError("邀請碼不正確，請再試一次");
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#0f1419] via-[#1a2332] to-[#0f1419]">
+      <div className="relative">
+        <div className="absolute -top-20 -left-20 w-40 h-40 bg-[var(--color-primary)]/20 rounded-full blur-3xl" />
+        <div className="absolute -bottom-20 -right-20 w-40 h-40 bg-[var(--color-accent)]/20 rounded-full blur-3xl" />
+
+        <div className="relative bg-[var(--color-surface)] border border-[var(--color-border)] rounded-2xl p-8 max-w-md w-full shadow-2xl">
+          <div className="text-center mb-8">
+            <img
+              src={CLASSLENS_ICON}
+              alt="ClassLens"
+              className="w-24 h-24 mx-auto mb-4 rounded-2xl shadow-lg"
+            />
+            <h1 className="text-2xl font-bold text-[var(--color-text)] font-display">
+              ClassLens
+            </h1>
+            <p className="text-[var(--color-text-muted)] mt-2">
+              請輸入邀請碼以繼續
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-[var(--color-text-muted)] mb-2">
+                邀請碼
+              </label>
+              <input
+                type="text"
+                value={code}
+                onChange={(e) => { setCode(e.target.value); setError(""); }}
+                placeholder="請輸入邀請碼..."
+                required
+                className="input text-center tracking-widest"
+                autoFocus
+              />
+            </div>
+
+            {error && (
+              <p className="text-sm text-red-400 text-center flex items-center justify-center gap-1">
+                <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                {error}
+              </p>
+            )}
+
+            <button
+              type="submit"
+              className="w-full py-3 px-4 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-accent)] text-white font-semibold rounded-xl hover:opacity-90 transition-opacity"
+            >
+              進入
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}