client passwords

app/client/[token]/page.tsx

@@ -15,6 +15,7 @@ import {
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Montserrat } from 'next/font/google';
+import { ReviewPasswordGate } from '@/components/clients/ReviewPasswordGate';
 
 const montserrat = Montserrat({
   subsets: ['latin'],
@@ -121,6 +122,7 @@ export default function ClientPortalPage({
   const [sessionLabel, setSessionLabel] = useState<string>('');
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [requiresPassword, setRequiresPassword] = useState(false);
   const [collapsedEpisodes, setCollapsedEpisodes] = useState<Set<string>>(new Set());
 
   const toggleEpisode = (ep: string) => {
@@ -134,22 +136,37 @@ export default function ClientPortalPage({
   useEffect(() => {
     params.then(({ token: t }) => {
       setToken(t);
-      fetch(`/api/client/${t}/project`)
-        .then((r) => {
-          if (!r.ok) throw new Error('Invalid or expired review link');
-          return r.json();
-        })
-        .then((data) => {
-          setProject(data.project);
-          setShots(data.shots ?? []);
-          setAssetTasks(data.assetTasks ?? []);
-          setSessionLabel(data.sessionLabel ?? '');
-        })
-        .catch((e) => setError(e.message))
-        .finally(() => setLoading(false));
+      loadProject(t);
     });
   }, [params]);
 
+  const loadProject = (t: string) => {
+    setLoading(true);
+    setError(null);
+    fetch(`/api/client/${t}/project`)
+      .then(async (r) => {
+        if (r.status === 401) {
+          const data = await r.json().catch(() => ({}));
+          if (data.requiresPassword) {
+            setRequiresPassword(true);
+            return null;
+          }
+        }
+        if (!r.ok) throw new Error('Invalid or expired review link');
+        return r.json();
+      })
+      .then((data) => {
+        if (!data) return;
+        setProject(data.project);
+        setShots(data.shots ?? []);
+        setAssetTasks(data.assetTasks ?? []);
+        setSessionLabel(data.sessionLabel ?? '');
+        setRequiresPassword(false);
+      })
+      .catch((e) => setError(e.message))
+      .finally(() => setLoading(false));
+  };
+
   if (loading) {
     return (
       <div className="min-h-screen bg-zinc-950 flex items-center justify-center">
@@ -158,6 +175,15 @@ export default function ClientPortalPage({
     );
   }
 
+  if (requiresPassword) {
+    return (
+      <ReviewPasswordGate
+        token={token}
+        onUnlocked={() => loadProject(token)}
+      />
+    );
+  }
+
   if (error || !project) {
     return (
       <div className="min-h-screen bg-zinc-950 flex flex-col items-center justify-center gap-4 text-center px-4">