build auth modal

frontend/src/components/LoginModal.tsx

@@ -0,0 +1,87 @@
+import { useState, useRef, useEffect } from 'react';
+import { X, Lock, LogIn } from 'lucide-react';
+import { useLogin } from '../hooks/useAuth';
+
+interface Props {
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export function LoginModal({ onClose, onSuccess }: Props) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const login = useLogin();
+  const userRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    userRef.current?.focus();
+  }, []);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    await login.mutateAsync({ username, password });
+    onSuccess?.();
+    onClose();
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 animate-fade-in">
+      <div className="bg-zinc-900 rounded-2xl shadow-2xl w-full max-w-sm border border-zinc-800 animate-scale-in">
+        {/* Header */}
+        <div className="flex items-center justify-between p-5 border-b border-zinc-800">
+          <div className="flex items-center gap-2">
+            <Lock size={16} className="text-accent" />
+            <h2 className="text-base font-semibold">Admin Login</h2>
+          </div>
+          <button onClick={onClose} className="text-zinc-500 hover:text-zinc-300 transition-colors">
+            <X size={18} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-5 space-y-4">
+          <p className="text-sm text-zinc-500">
+            Sign in to upload, edit, and manage memes.
+          </p>
+
+          <div>
+            <label className="block text-xs text-zinc-500 mb-1">Username</label>
+            <input
+              ref={userRef}
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              autoComplete="username"
+              required
+              className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-zinc-500 mb-1">Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete="current-password"
+              required
+              className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          {login.error && (
+            <p className="text-red-400 text-sm">{(login.error as Error).message}</p>
+          )}
+
+          <button
+            type="submit"
+            disabled={!username || !password || login.isPending}
+            className="w-full flex items-center justify-center gap-2 py-2.5 rounded-lg bg-accent hover:bg-accent-hover text-white text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <LogIn size={15} />
+            {login.isPending ? 'Signing in…' : 'Sign In'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/components/MemeDetail.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { X, Minimize2, Trash2, Edit2, Check, Layers } from 'lucide-react';
 import { useMeme, useDeleteMeme, useUpdateMeme } from '../hooks/useMemes';
+import { useAuth } from '../hooks/useAuth';
 import { SharePanel } from './SharePanel';
 import { RescaleModal } from './RescaleModal';
 import { api, type Meme } from '../api/client';
@@ -26,6 +27,8 @@ export function MemeDetail({ memeId, onClose }: Props) {
   const { data, isLoading, refetch } = useMeme(memeId);
   const deleteMeme = useDeleteMeme();
   const updateMeme = useUpdateMeme();
+  const { data: auth } = useAuth();
+  const isAdmin = auth?.authenticated === true;
 
   const [editing, setEditing] = useState(false);
   const [editTitle, setEditTitle] = useState('');
@@ -94,24 +97,26 @@ export function MemeDetail({ memeId, onClose }: Props) {
             <h2 className="text-lg font-semibold truncate flex-1 mr-3">{meme.title}</h2>
           )}
           <div className="flex items-center gap-2 flex-shrink-0">
-            {editing ? (
-              <button
-                onClick={saveEdit}
-                disabled={updateMeme.isPending}
-                className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg bg-accent hover:bg-accent-hover text-white transition-colors"
-              >
-                <Check size={14} /> Save
-              </button>
-            ) : (
-              <button
-                onClick={startEdit}
-                className="text-zinc-500 hover:text-zinc-300 transition-colors p-1"
-                title="Edit"
-              >
-                <Edit2 size={16} />
-              </button>
+            {isAdmin && (
+              editing ? (
+                <button
+                  onClick={saveEdit}
+                  disabled={updateMeme.isPending}
+                  className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg bg-accent hover:bg-accent-hover text-white transition-colors"
+                >
+                  <Check size={14} /> Save
+                </button>
+              ) : (
+                <button
+                  onClick={startEdit}
+                  className="text-zinc-500 hover:text-zinc-300 transition-colors p-1"
+                  title="Edit"
+                >
+                  <Edit2 size={16} />
+                </button>
+              )
             )}
-            {!meme.parent_id && (
+            {isAdmin && !meme.parent_id && (
               <button
                 onClick={() => setShowRescale(true)}
                 className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 transition-colors"
@@ -121,14 +126,16 @@ export function MemeDetail({ memeId, onClose }: Props) {
                 <span className="hidden sm:inline">Rescale</span>
               </button>
             )}
-            <button
-              onClick={handleDelete}
-              disabled={deleteMeme.isPending}
-              className="text-zinc-500 hover:text-red-400 transition-colors p-1"
-              title="Delete"
-            >
-              <Trash2 size={16} />
-            </button>
+            {isAdmin && (
+              <button
+                onClick={handleDelete}
+                disabled={deleteMeme.isPending}
+                className="text-zinc-500 hover:text-red-400 transition-colors p-1"
+                title="Delete"
+              >
+                <Trash2 size={16} />
+              </button>
+            )}
             <button onClick={onClose} className="text-zinc-500 hover:text-zinc-300 transition-colors p-1">
               <X size={20} />
             </button>
@@ -164,7 +171,7 @@ export function MemeDetail({ memeId, onClose }: Props) {
               {/* Description */}
               <section>
                 <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Description</h3>
-                {editing ? (
+                {isAdmin && editing ? (
                   <textarea
                     value={editDesc}
                     onChange={(e) => setEditDesc(e.target.value)}
@@ -180,7 +187,7 @@ export function MemeDetail({ memeId, onClose }: Props) {
               {/* Tags */}
               <section>
                 <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Tags</h3>
-                {editing ? (
+                {isAdmin && editing ? (
                   <input
                     type="text"
                     value={editTags}

frontend/src/hooks/useAuth.ts

@@ -0,0 +1,52 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+
+interface AuthStatus {
+  authenticated: boolean;
+  user?: string;
+}
+
+async function fetchMe(): Promise<AuthStatus> {
+  const res = await fetch('/api/auth/me');
+  return res.json() as Promise<AuthStatus>;
+}
+
+export function useAuth() {
+  return useQuery({
+    queryKey: ['auth'],
+    queryFn: fetchMe,
+    staleTime: 60_000,
+  });
+}
+
+export function useLogin() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ username, password }: { username: string; password: string }) => {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password }),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: 'Login failed' }));
+        throw new Error(err.error ?? 'Login failed');
+      }
+      return res.json();
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['auth'] });
+    },
+  });
+}
+
+export function useLogout() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async () => {
+      await fetch('/api/auth/logout', { method: 'POST' });
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['auth'] });
+    },
+  });
+}

frontend/src/pages/Gallery.tsx

@@ -1,9 +1,11 @@
 import { useState, useCallback } from 'react';
-import { Search, Upload as UploadIcon, X, Share2 } from 'lucide-react';
+import { Search, Upload as UploadIcon, X, Share2, Lock, LogOut } from 'lucide-react';
 import { useMemes, useTags } from '../hooks/useMemes';
+import { useAuth, useLogout } from '../hooks/useAuth';
 import { GalleryGrid } from '../components/GalleryGrid';
 import { MemeDetail } from '../components/MemeDetail';
 import { UploadModal } from '../components/UploadModal';
+import { LoginModal } from '../components/LoginModal';
 import { SharePanel } from '../components/SharePanel';
 import type { Meme } from '../api/client';
 
@@ -14,6 +16,11 @@ export function Gallery() {
   const [selectedMemeId, setSelectedMemeId] = useState<string | null>(null);
   const [quickShareMeme, setQuickShareMeme] = useState<Meme | null>(null);
   const [showUpload, setShowUpload] = useState(false);
+  const [showLogin, setShowLogin] = useState(false);
+
+  const { data: auth } = useAuth();
+  const logout = useLogout();
+  const isAdmin = auth?.authenticated === true;
 
   // Debounce search
   const [searchTimer, setSearchTimer] = useState<ReturnType<typeof setTimeout> | null>(null);
@@ -40,6 +47,14 @@ export function Gallery() {
     setQuickShareMeme(meme);
   }, []);
 
+  function handleUploadClick() {
+    if (isAdmin) {
+      setShowUpload(true);
+    } else {
+      setShowLogin(true);
+    }
+  }
+
   return (
     <div className="min-h-screen bg-zinc-950">
       {/* Topbar */}
@@ -71,14 +86,37 @@ export function Gallery() {
             )}
           </div>
 
-          <div className="ml-auto flex-shrink-0">
+          {/* Right side actions */}
+          <div className="ml-auto flex items-center gap-2 flex-shrink-0">
+            {/* Upload button — always visible, gates on auth */}
             <button
-              onClick={() => setShowUpload(true)}
+              onClick={handleUploadClick}
               className="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-accent hover:bg-accent-hover text-white text-sm font-medium transition-colors"
+              title={isAdmin ? 'Upload meme' : 'Sign in to upload'}
             >
-              <UploadIcon size={15} />
-              <span className="hidden sm:inline">Upload</span>
+              {isAdmin ? <UploadIcon size={15} /> : <Lock size={15} />}
+              <span className="hidden sm:inline">{isAdmin ? 'Upload' : 'Upload'}</span>
             </button>
+
+            {/* Auth state */}
+            {isAdmin ? (
+              <button
+                onClick={() => logout.mutate()}
+                title={`Sign out (${auth?.user})`}
+                className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-400 hover:text-zinc-200 text-sm transition-colors"
+              >
+                <LogOut size={15} />
+                <span className="hidden sm:inline text-xs">{auth?.user}</span>
+              </button>
+            ) : (
+              <button
+                onClick={() => setShowLogin(true)}
+                className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-400 hover:text-zinc-200 text-sm transition-colors"
+                title="Admin login"
+              >
+                <Lock size={15} />
+              </button>
+            )}
           </div>
         </div>
 
@@ -114,7 +152,6 @@ export function Gallery() {
 
       {/* Gallery */}
       <main className="max-w-screen-2xl mx-auto px-4 py-6">
-        {/* Status bar */}
         <div className="flex items-center justify-between mb-4">
           <p className="text-sm text-zinc-500">
             {isLoading
@@ -175,8 +212,16 @@ export function Gallery() {
         </div>
       )}
 
-      {/* Upload modal */}
-      {showUpload && <UploadModal onClose={() => setShowUpload(false)} />}
+      {/* Upload modal (admin only) */}
+      {showUpload && isAdmin && <UploadModal onClose={() => setShowUpload(false)} />}
+
+      {/* Login modal */}
+      {showLogin && (
+        <LoginModal
+          onClose={() => setShowLogin(false)}
+          onSuccess={() => setShowUpload(true)}
+        />
+      )}
     </div>
   );
 }