Refactor Galerie component to use image IDs for keys and update image loading logic; add new scripts for generating previews and migrating public gallery to metadata with authentication checks.

components/Gallery.vue

@@ -18,12 +18,12 @@
       <div class="grid sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2">
         <div
           v-for="image in images"
-          :key="image.filename"
+          :key="image.id"
           class="group relative w-20 h-20 rounded-md overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
           @click="openLightbox(image)"
         >
           <img 
-            :src="`/galerie/${image.filename}`"
+            :src="getPreviewUrl(image)"
             :alt="image.title"
             class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
           >
@@ -49,7 +49,7 @@
             <X :size="24" />
           </button>
           <img
-            :src="`/galerie/${lightboxImage.filename}`"
+            :src="getOriginalUrl(lightboxImage)"
             :alt="lightboxImage.title"
             class="max-w-[80vw] max-h-[80vh] object-contain rounded-lg"
             @click.stop
@@ -66,16 +66,19 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { X } from 'lucide-vue-next'
 
 const images = ref([])
 const lightboxImage = ref(null)
 
+const getPreviewUrl = (img) => `/api/media/galerie/${img.id}?preview=true`
+const getOriginalUrl = (img) => `/api/media/galerie/${img.id}`
+
 const loadImages = async () => {
   try {
-    const response = await $fetch('/api/galerie')
-    images.value = response || []
+  const response = await $fetch('/api/galerie/list')
+  images.value = response?.images || []
   } catch (error) {
     console.error('Fehler beim Laden der Galerie-Bilder:', error)
     images.value = []

scripts/generate-galerie-previews.js

@@ -0,0 +1,107 @@
+import fs from 'fs/promises'
+import path from 'path'
+import sharp from 'sharp'
+
+const getDataPath = (filename) => {
+  const cwd = process.cwd()
+  if (cwd.endsWith('.output')) return path.join(cwd, '../server/data', filename)
+  return path.join(cwd, 'server/data', filename)
+}
+
+const GALERIE_DIR = getDataPath('galerie')
+const GALERIE_METADATA = getDataPath('galerie-metadata.json')
+
+async function readJsonArray(file) {
+  try {
+    const data = await fs.readFile(file, 'utf-8')
+    const parsed = JSON.parse(data)
+    return Array.isArray(parsed) ? parsed : []
+  } catch (e) {
+    if (e.code === 'ENOENT') return []
+    throw e
+  }
+}
+
+async function writeJson(file, obj) {
+  await fs.writeFile(file, JSON.stringify(obj, null, 2), 'utf-8')
+}
+
+async function ensureDirs() {
+  await fs.mkdir(path.join(GALERIE_DIR, 'originals'), { recursive: true })
+  await fs.mkdir(path.join(GALERIE_DIR, 'previews'), { recursive: true })
+}
+
+async function fileExists(p) {
+  try {
+    await fs.access(p)
+    return true
+  } catch {
+    return false
+  }
+}
+
+async function generatePreviewForEntry(entry, size) {
+  const original = path.join(GALERIE_DIR, 'originals', entry.filename)
+  if (!(await fileExists(original))) return { ok: false, reason: 'missing original' }
+
+  const previewFilename = entry.previewFilename && String(entry.previewFilename).trim() !== ''
+    ? entry.previewFilename
+    : `preview_${entry.filename}`
+
+  const preview = path.join(GALERIE_DIR, 'previews', previewFilename)
+
+  await sharp(original)
+    .rotate()
+    .resize(size, size, {
+      fit: 'cover',
+      withoutEnlargement: true
+    })
+    .jpeg({ quality: 82, mozjpeg: true })
+    .toFile(preview)
+
+  return { ok: true, previewFilename }
+}
+
+async function main() {
+  const size = Number(process.env.GALERIE_PREVIEW_SIZE || 300)
+  await ensureDirs()
+
+  const entries = await readJsonArray(GALERIE_METADATA)
+  if (entries.length === 0) {
+    console.log('Keine Galerie-Metadaten gefunden.')
+    return
+  }
+
+  let changed = 0
+  let generated = 0
+  let skipped = 0
+
+  for (const entry of entries) {
+    if (!entry || !entry.filename) {
+      skipped++
+      continue
+    }
+
+    const res = await generatePreviewForEntry(entry, size)
+    if (!res.ok) {
+      skipped++
+      continue
+    }
+
+    generated++
+
+    if (entry.previewFilename !== res.previewFilename) {
+      entry.previewFilename = res.previewFilename
+      changed++
+    }
+  }
+
+  if (changed > 0) await writeJson(GALERIE_METADATA, entries)
+
+  console.log(`Previews erzeugt: ${generated}, übersprungen: ${skipped}, metadata-updates: ${changed}`)
+}
+
+main().catch(e => {
+  console.error(e)
+  process.exit(1)
+})

scripts/migrate-public-galerie-to-metadata.js

@@ -0,0 +1,96 @@
+import fs from 'fs/promises'
+import path from 'path'
+import { randomUUID } from 'crypto'
+
+const allowed = new Set(['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg'])
+
+const getDataPath = (filename) => {
+  const cwd = process.cwd()
+  if (cwd.endsWith('.output')) return path.join(cwd, '../server/data', filename)
+  return path.join(cwd, 'server/data', filename)
+}
+
+const GALERIE_DIR = getDataPath('galerie')
+const GALERIE_METADATA = getDataPath('galerie-metadata.json')
+const PUBLIC_GALERIE_DIR = path.join(process.cwd(), 'public', 'galerie')
+
+function titleFromFilename(filename) {
+  const nameWithoutExt = path.parse(filename).name
+  return nameWithoutExt.replace(/[-_]/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
+}
+
+async function readJsonArray(file) {
+  try {
+    const data = await fs.readFile(file, 'utf-8')
+    const parsed = JSON.parse(data)
+    return Array.isArray(parsed) ? parsed : []
+  } catch (e) {
+    if (e.code === 'ENOENT') return []
+    throw e
+  }
+}
+
+async function ensureDirs() {
+  await fs.mkdir(path.join(GALERIE_DIR, 'originals'), { recursive: true })
+  await fs.mkdir(path.join(GALERIE_DIR, 'previews'), { recursive: true })
+}
+
+async function main() {
+  await ensureDirs()
+
+  const entries = await readJsonArray(GALERIE_METADATA)
+  const existingByName = new Map(entries.map(e => [e.filename, e]))
+
+  let files = []
+  try {
+    files = await fs.readdir(PUBLIC_GALERIE_DIR)
+  } catch (e) {
+    console.error('public/galerie nicht gefunden:', PUBLIC_GALERIE_DIR)
+    process.exit(1)
+  }
+
+  const candidates = files.filter(f => allowed.has(path.extname(f).toLowerCase()))
+  let migrated = 0
+  let skipped = 0
+
+  for (const filename of candidates) {
+    if (existingByName.has(filename)) {
+      skipped++
+      continue
+    }
+
+    const id = randomUUID()
+    const title = titleFromFilename(filename)
+
+    const src = path.join(PUBLIC_GALERIE_DIR, filename)
+    const dest = path.join(GALERIE_DIR, 'originals', filename)
+
+    await fs.rename(src, dest)
+
+    const meta = {
+      id,
+      filename,
+      previewFilename: `preview_${filename}`,
+      title,
+      description: '',
+      isPublic: true,
+      uploadedBy: 'migration',
+      uploadedAt: new Date().toISOString(),
+      originalName: filename
+    }
+
+    entries.push(meta)
+    existingByName.set(filename, meta)
+    migrated++
+  }
+
+  await fs.writeFile(GALERIE_METADATA, JSON.stringify(entries, null, 2), 'utf-8')
+
+  console.log(`Fertig. Migriert: ${migrated}, übersprungen: ${skipped}`)
+  console.log('Hinweis: previews werden nicht automatisch erzeugt. Für echte previews bitte neu hochladen oder ein separates preview-generator script verwenden.')
+}
+
+main().catch(e => {
+  console.error(e)
+  process.exit(1)
+})

server/api/media/galerie/[id].get.js

@@ -0,0 +1,83 @@
+import fs from 'fs/promises'
+import path from 'path'
+import { getUserFromToken, verifyToken } from '../../../utils/auth.js'
+
+const getDataPath = (filename) => {
+  const cwd = process.cwd()
+  if (cwd.endsWith('.output')) return path.join(cwd, '../server/data', filename)
+  return path.join(cwd, 'server/data', filename)
+}
+
+const GALERIE_DIR = getDataPath('galerie')
+const GALERIE_METADATA = getDataPath('galerie-metadata.json')
+
+async function readGalerieMetadata() {
+  try {
+    const data = await fs.readFile(GALERIE_METADATA, 'utf-8')
+    return JSON.parse(data)
+  } catch (error) {
+    if (error.code === 'ENOENT') return []
+    throw error
+  }
+}
+
+async function isLoggedIn(event) {
+  const token = getCookie(event, 'auth_token') || getHeader(event, 'authorization')?.replace('Bearer ', '')
+  if (!token) return false
+  const decoded = verifyToken(token)
+  if (!decoded) return false
+  const user = await getUserFromToken(token)
+  return !!(user && user.active)
+}
+
+export default defineEventHandler(async (event) => {
+  const imageId = getRouterParam(event, 'id')
+  const query = getQuery(event)
+  const preview = query.preview === 'true'
+
+  if (!imageId) {
+    throw createError({ statusCode: 400, statusMessage: 'Bild-ID erforderlich' })
+  }
+
+  const metadata = await readGalerieMetadata()
+  const image = metadata.find(img => img.id === imageId)
+  if (!image) {
+    throw createError({ statusCode: 404, statusMessage: 'Bild nicht gefunden' })
+  }
+
+  if (!image.isPublic) {
+    const ok = await isLoggedIn(event)
+    if (!ok) throw createError({ statusCode: 403, statusMessage: 'Keine Berechtigung' })
+  }
+
+  const filename = preview ? image.previewFilename : image.filename
+  const sanitized = path.basename(path.normalize(String(filename || '')))
+  if (!sanitized || sanitized.includes('..')) {
+    throw createError({ statusCode: 400, statusMessage: 'Ungültiger Dateiname' })
+  }
+
+  const subdir = preview ? 'previews' : 'originals'
+  const filePath = path.join(GALERIE_DIR, subdir, sanitized)
+
+  try {
+    await fs.access(filePath)
+  } catch (e) {
+    throw createError({ statusCode: 404, statusMessage: 'Bilddatei nicht gefunden' })
+  }
+
+  const ext = path.extname(sanitized).toLowerCase()
+  const mimeTypes = {
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png': 'image/png',
+    '.gif': 'image/gif',
+    '.webp': 'image/webp',
+    '.svg': 'image/svg+xml'
+  }
+  const contentType = mimeTypes[ext] || 'application/octet-stream'
+
+  const buf = await fs.readFile(filePath)
+  setHeader(event, 'Content-Type', contentType)
+  setHeader(event, 'Cache-Control', image.isPublic ? 'public, max-age=31536000, immutable' : 'private, max-age=0, no-store')
+  return buf
+})

server/api/media/internal/[...path].get.js

@@ -0,0 +1,66 @@
+import fs from 'fs'
+import fsp from 'fs/promises'
+import path from 'path'
+
+// Minimal auth check using existing auth cookie/session
+function isAuthenticated(event) {
+  try {
+    const token = getCookie(event, 'auth_token') || getCookie(event, 'session_token')
+    return token && String(token).trim() !== ''
+  } catch (e) {
+    return false
+  }
+}
+
+// Resolve file path within a non-public internal media directory
+function resolveInternalPath(reqPath) {
+  const baseDir = path.join(process.cwd(), 'server', 'private', 'gallery-internal')
+  // prevent path traversal
+  const safe = path.normalize(reqPath).replace(/^\/+/, '')
+  return path.join(baseDir, safe)
+}
+
+export default defineEventHandler(async (event) => {
+  // auth gate
+  if (!isAuthenticated(event)) {
+    throw createError({ statusCode: 401, statusMessage: 'Nicht autorisiert' })
+  }
+
+  const param = event.context.params?.path
+  const reqPath = Array.isArray(param) ? param.join('/') : String(param || '')
+  if (!reqPath) {
+    throw createError({ statusCode: 400, statusMessage: 'Bildpfad fehlt' })
+  }
+
+  const filePath = resolveInternalPath(reqPath)
+  // check existence and ensure it stays within baseDir
+  const baseDir = path.join(process.cwd(), 'server', 'private', 'gallery-internal')
+  const resolved = path.resolve(filePath)
+  if (!resolved.startsWith(path.resolve(baseDir))) {
+    throw createError({ statusCode: 400, statusMessage: 'Ungültiger Pfad' })
+  }
+
+  try {
+    const stat = await fsp.stat(resolved)
+    if (!stat.isFile()) throw new Error('not a file')
+  } catch (e) {
+    throw createError({ statusCode: 404, statusMessage: 'Datei nicht gefunden' })
+  }
+
+  // determine content type by extension
+  const ext = path.extname(resolved).toLowerCase()
+  const contentType = (
+    ext === '.jpg' || ext === '.jpeg' ? 'image/jpeg' :
+    ext === '.png' ? 'image/png' :
+    ext === '.gif' ? 'image/gif' :
+    ext === '.webp' ? 'image/webp' :
+    ext === '.svg' ? 'image/svg+xml' :
+    'application/octet-stream'
+  )
+
+  // stream the file
+  const stream = fs.createReadStream(resolved)
+  setHeader(event, 'Content-Type', contentType)
+  setHeader(event, 'Cache-Control', 'private, max-age=0, no-store')
+  return sendStream(event, stream)
+})