Add view tokens for non-public gallery images and per-mode gate pages.

<img> tags cannot send Authorization headers, so non-public gallery photos
were invisible even to authorized viewers. The server now mints short-lived
HMAC view tokens (gallery-scoped, hour-bucketed) and embeds them in every
file URL for non-public galleries. Access denials return distinct 403
messages per visibility mode, and the frontend renders a matching gate page
(private, link-only, ticket-holders, login prompt) with an inline login
modal so visitors never leave the gallery page.

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

frontend/src/app/(public)/photos/[slug]/GalleryClient.tsx

@@ -2,17 +2,19 @@
 
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
 import { useLanguage } from '@/context/LanguageContext';
 import { useAuth } from '@/context/AuthContext';
 import { photosApi, PhotoGallery, Photo } from '@/lib/api';
 import Button from '@/components/ui/Button';
 import { ImageGridSkeleton } from '@/components/ui/Skeleton';
 import Lightbox from '@/components/Lightbox';
+import LoginModal from '@/components/LoginModal';
 import {
   ArrowDownTrayIcon,
   CalendarIcon,
   CameraIcon,
+  LinkIcon,
   LockClosedIcon,
   TicketIcon,
 } from '@heroicons/react/24/outline';
@@ -25,15 +27,13 @@ interface GalleryClientProps {
   initial: { gallery: PhotoGallery; photos: Photo[] } | null;
 }
 
-type DeniedState = 'login' | 'ticket' | 'notfound' | null;
+type DeniedState = 'login' | 'ticket' | 'private' | 'link' | 'notfound' | null;
 
 export default function GalleryClient({ slug, eventSlug, initial }: GalleryClientProps) {
   const { locale } = useLanguage();
   const es = locale === 'es';
   const { user, isLoading: authLoading } = useAuth();
   const searchParams = useSearchParams();
-  const pathname = usePathname();
-  const router = useRouter();
   const shareToken = searchParams.get('token') || undefined;
 
   const [gallery, setGallery] = useState<PhotoGallery | null>(initial?.gallery ?? null);
@@ -41,6 +41,7 @@ export default function GalleryClient({ slug, eventSlug, initial }: GalleryClien
   const [loading, setLoading] = useState(!initial);
   const [denied, setDenied] = useState<DeniedState>(null);
   const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+  const [loginOpen, setLoginOpen] = useState(false);
 
   // Server-rendered public galleries need no client fetch. Everything else
   // (link/ticket/private) is fetched here with the share token and/or the
@@ -62,9 +63,13 @@ export default function GalleryClient({ slug, eventSlug, initial }: GalleryClien
       })
       .catch((err: Error) => {
         if (cancelled) return;
+        // The photo-api returns a distinct message per visibility mode so
+        // each gets its own gate page (see accessDenial in access.go).
         const msg = err.message || '';
         if (msg.includes('Authentication required')) setDenied('login');
         else if (msg.includes('attendees')) setDenied('ticket');
+        else if (msg.includes('private')) setDenied('private');
+        else if (msg.includes('share link')) setDenied('link');
         else setDenied('notfound');
       })
       .finally(() => !cancelled && setLoading(false));
@@ -83,44 +88,117 @@ export default function GalleryClient({ slug, eventSlug, initial }: GalleryClien
     );
   }
 
+  // Gate pages for restricted galleries. After a successful login in the
+  // pop-up, AuthContext's user changes, which re-runs the fetch effect —
+  // the gate resolves by itself when access is granted.
+  const loginModal = (
+    <LoginModal
+      open={loginOpen}
+      onClose={() => setLoginOpen(false)}
+      message={
+        es
+          ? 'Inicia sesión para ver esta galería.'
+          : 'Log in to view this gallery.'
+      }
+    />
+  );
+
   if (denied === 'login') {
-    const redirect = encodeURIComponent(`${pathname}${shareToken ? `?token=${shareToken}` : ''}`);
     return (
-      <GateMessage
-        icon={LockClosedIcon}
-        title={es ? 'Inicia sesión para ver esta galería' : 'Log in to view this gallery'}
-        body={
-          es
-            ? 'Esta galería es para asistentes del evento. Inicia sesión con la cuenta que usaste para reservar.'
-            : 'This gallery is for event attendees. Log in with the account you used to book.'
-        }
-        action={
-          <Button onClick={() => router.push(`/login?redirect=${redirect}`)}>
-            {es ? 'Iniciar sesión' : 'Log in'}
-          </Button>
-        }
-      />
+      <>
+        <GateMessage
+          icon={TicketIcon}
+          title={es ? 'Solo para asistentes' : 'Attendees only'}
+          body={
+            es
+              ? 'Esta galería es para asistentes del evento. Inicia sesión con la cuenta que usaste para reservar.'
+              : 'This gallery is for event attendees. Log in with the account you used to book.'
+          }
+          action={
+            <Button onClick={() => setLoginOpen(true)}>{es ? 'Iniciar sesión' : 'Log in'}</Button>
+          }
+        />
+        {loginModal}
+      </>
     );
   }
 
   if (denied === 'ticket') {
     return (
-      <GateMessage
-        icon={TicketIcon}
-        title={es ? 'Solo para asistentes' : 'Attendees only'}
-        body={
-          es
-            ? 'Esta galería es para quienes asistieron al evento con una entrada confirmada.'
-            : 'This gallery is only available to people who attended the event with a confirmed ticket.'
-        }
-        action={
-          eventSlug || gallery?.event ? (
-            <Link href={`/events/${eventSlug || gallery?.event?.slug}`}>
-              <Button variant="outline">{es ? 'Ver el evento' : 'View the event'}</Button>
-            </Link>
-          ) : undefined
-        }
-      />
+      <>
+        <GateMessage
+          icon={TicketIcon}
+          title={es ? 'Solo para asistentes' : 'Attendees only'}
+          body={
+            es
+              ? 'Esta galería es para quienes asistieron al evento con una entrada confirmada. ¿Reservaste con otra cuenta?'
+              : 'This gallery is only available to people who attended the event with a confirmed ticket. Booked with a different account?'
+          }
+          action={
+            <div className="flex flex-wrap justify-center gap-3">
+              {(eventSlug || gallery?.event) && (
+                <Link href={`/events/${eventSlug || gallery?.event?.slug}`}>
+                  <Button variant="outline">{es ? 'Ver el evento' : 'View the event'}</Button>
+                </Link>
+              )}
+              <Button onClick={() => setLoginOpen(true)}>
+                {es ? 'Cambiar de cuenta' : 'Switch account'}
+              </Button>
+            </div>
+          }
+        />
+        {loginModal}
+      </>
+    );
+  }
+
+  if (denied === 'private') {
+    return (
+      <>
+        <GateMessage
+          icon={LockClosedIcon}
+          title={es ? 'Esta galería es privada' : 'This gallery is private'}
+          body={
+            es
+              ? 'Solo los organizadores pueden verla. Si eres parte del equipo, inicia sesión.'
+              : 'Only the organizers can see it. If that’s you, log in.'
+          }
+          action={
+            <div className="flex flex-wrap justify-center gap-3">
+              <Link href="/photos">
+                <Button variant="outline">{es ? 'Ver galerías públicas' : 'Browse public galleries'}</Button>
+              </Link>
+              <Button onClick={() => setLoginOpen(true)}>{es ? 'Iniciar sesión' : 'Log in'}</Button>
+            </div>
+          }
+        />
+        {loginModal}
+      </>
+    );
+  }
+
+  if (denied === 'link') {
+    return (
+      <>
+        <GateMessage
+          icon={LinkIcon}
+          title={es ? 'Esta galería necesita su enlace' : 'This gallery needs its share link'}
+          body={
+            es
+              ? 'Solo se puede abrir con el enlace que compartieron los organizadores. Pídeles el enlace completo, o inicia sesión si eres parte del equipo.'
+              : 'It can only be opened with the link the organizers shared. Ask them for the full link, or log in if you’re part of the team.'
+          }
+          action={
+            <div className="flex flex-wrap justify-center gap-3">
+              <Link href="/photos">
+                <Button variant="outline">{es ? 'Ver galerías públicas' : 'Browse public galleries'}</Button>
+              </Link>
+              <Button onClick={() => setLoginOpen(true)}>{es ? 'Iniciar sesión' : 'Log in'}</Button>
+            </div>
+          }
+        />
+        {loginModal}
+      </>
     );
   }