Add login, role-based portals, and browser-local admin image upload

2026-06-27 16:33:20 -05:00
parent e4b30d6dfd
commit 26559d4cf8
6 changed files with 485 additions and 0 deletions
@@ -0,0 +1,128 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/hooks/useAuth';
+
+const IMAGES_KEY = 'la-huasca-admin-images';
+
+export default function AdminPage() {
+  const { isAdmin, hydrated } = useAuth();
+  const router = useRouter();
+  const [images, setImages] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (!hydrated) return;
+    if (!isAdmin) {
+      router.push('/login');
+      return;
+    }
+    const stored = localStorage.getItem(IMAGES_KEY);
+    if (stored) {
+      try {
+        setImages(JSON.parse(stored));
+      } catch {
+        setImages([]);
+      }
+    }
+  }, [isAdmin, hydrated, router]);
+
+  useEffect(() => {
+    localStorage.setItem(IMAGES_KEY, JSON.stringify(images));
+  }, [images]);
+
+  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files) return;
+    Array.from(files).forEach((file) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result as string;
+        setImages((prev) => [...prev, result]);
+      };
+      reader.readAsDataURL(file);
+    });
+    e.target.value = '';
+  };
+
+  const handleDelete = (index: number) => {
+    setImages((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  if (!hydrated || !isAdmin) {
+    return (
+      <main style={{ padding: '2rem' }}>
+        <p>Please log in as admin to access this page.</p>
+      </main>
+    );
+  }
+
+  return (
+    <main style={{ padding: '2rem' }}>
+      <h1>Admin Portal</h1>
+      <p>Total uploaded images: <strong>{images.length}</strong></p>
+      <label
+        style={{
+          display: 'inline-block',
+          padding: '0.75rem 1rem',
+          background: '#1a1a1a',
+          color: '#fff',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          marginBottom: '1rem',
+        }}
+      >
+        Upload images
+        <input
+          type="file"
+          accept="image/*"
+          multiple
+          onChange={handleUpload}
+          style={{ display: 'none' }}
+        />
+      </label>
+      {images.length === 0 ? (
+        <p style={{ color: 'dimgray' }}>No images uploaded yet.</p>
+      ) : (
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+            gap: '1rem',
+          }}
+        >
+          {images.map((src, i) => (
+            <div
+              key={i}
+              style={{
+                border: '1px solid #ddd',
+                borderRadius: '8px',
+                overflow: 'hidden',
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              <img
+                src={src}
+                alt={`Uploaded preview ${i + 1}`}
+                style={{ width: '100%', height: '160px', objectFit: 'cover' }}
+              />
+              <button
+                onClick={() => handleDelete(i)}
+                style={{
+                  padding: '0.5rem',
+                  background: 'crimson',
+                  color: '#fff',
+                  border: 'none',
+                  cursor: 'pointer',
+                }}
+              >
+                Delete
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}