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}