feat: consolidate admin features into centralized administration page
All checks were successful
CI / update (push) Successful in 1m10s

- Created administration page at /{recipeLang}/administration accessible only to rezepte_users
- Moved alt-text generator from /admin to /{recipeLang}/admin/alt-text-generator
- Added "Administration" link to user profile dropdown for rezepte_users
- Removed "Unübersetzt" link from main navigation (now accessed via administration page)
- Administration page provides card-based UI with links to:
  - Untranslated Recipes management
  - AI Alt-Text Generator
- Both features now integrated into recipe language routing structure
- Added server-side authentication to all admin routes
This commit is contained in:
2026-01-05 22:54:20 +01:00
parent 6b3aed582e
commit 3a2a4ec928
7 changed files with 174 additions and 6 deletions

View File

@@ -51,7 +51,7 @@ function isActive(path) {
{/snippet}
{#snippet right_side()}
<UserHeader {user}></UserHeader>
<UserHeader {user} recipeLang={data.recipeLang} lang={data.lang}></UserHeader>
{/snippet}
{@render children()}

View File

@@ -0,0 +1,21 @@
import type { PageServerLoad } from './$types';
import { redirect, error } from '@sveltejs/kit';
export const load: PageServerLoad = async ({ locals, url }) => {
const session = await locals.auth();
// Redirect to login if not authenticated
if (!session?.user?.nickname) {
const callbackUrl = encodeURIComponent(url.pathname);
throw redirect(302, `/login?callbackUrl=${callbackUrl}`);
}
// Check user group permission
if (!session.user.groups?.includes('rezepte_users')) {
throw error(403, 'Zugriff verweigert. Du hast keine Berechtigung für diesen Bereich.');
}
return {
user: session.user
};
};

View File

@@ -0,0 +1,21 @@
import type { PageServerLoad } from './$types';
import { redirect, error } from '@sveltejs/kit';
export const load: PageServerLoad = async ({ locals, params, url }) => {
const session = await locals.auth();
// Redirect to login if not authenticated
if (!session?.user?.nickname) {
const callbackUrl = encodeURIComponent(url.pathname);
throw redirect(302, `/login?callbackUrl=${callbackUrl}`);
}
// Check user group permission
if (!session.user.groups?.includes('rezepte_users')) {
throw error(403, 'Zugriff verweigert. Du hast keine Berechtigung für diesen Bereich.');
}
return {
user: session.user
};
};

View File

@@ -0,0 +1,126 @@
<script lang="ts">
import type { PageData } from './$types';
import '$lib/css/nordtheme.css';
let { data }: { data: PageData } = $props();
const isEnglish = data.lang === 'en';
const pageTitle = isEnglish ? 'Administration' : 'Administration';
const pageDescription = isEnglish
? 'Manage recipes and content'
: 'Rezepte und Inhalte verwalten';
const links = [
{
title: isEnglish ? 'Untranslated Recipes' : 'Unübersetzte Rezepte',
description: isEnglish
? 'View and manage recipes that need translation'
: 'Rezepte ansehen und verwalten, die übersetzt werden müssen',
href: '/rezepte/untranslated',
icon: '🌐'
},
{
title: isEnglish ? 'Alt-Text Generator' : 'Alt-Text Generator',
description: isEnglish
? 'Generate alternative text for recipe images using AI'
: 'Alternativtext für Rezeptbilder mit KI generieren',
href: `/${data.recipeLang}/admin/alt-text-generator`,
icon: '🖼️'
}
];
</script>
<style>
h1 {
text-align: center;
margin-bottom: 0;
font-size: 4rem;
}
.subheading {
text-align: center;
margin-top: 0;
font-size: 1.5rem;
color: var(--nord3);
}
.admin-container {
max-width: 1000px;
margin: 2rem auto;
padding: 1.5rem;
}
.admin-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.admin-card {
background: var(--nord1);
border-radius: 8px;
padding: 2rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: transform 200ms, box-shadow 200ms;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 1rem;
}
.admin-card:hover,
.admin-card:focus {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
background: hsl(from var(--nord1) h calc(s * 1.1) calc(l * 1.05));
}
.admin-card-icon {
font-size: 3rem;
text-align: center;
}
.admin-card-title {
font-size: 1.5rem;
font-weight: bold;
margin: 0;
text-align: center;
}
.admin-card-description {
font-size: 1rem;
color: var(--nord4);
text-align: center;
margin: 0;
}
@media(prefers-color-scheme: light) {
.admin-card {
background: var(--nord6);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.admin-card:hover,
.admin-card:focus {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background: hsl(from var(--nord6) h calc(s * 1.1) calc(l * 0.98));
}
.admin-card-description {
color: var(--nord2);
}
.subheading {
color: var(--nord2);
}
}
</style>
<svelte:head>
<title>{pageTitle}</title>
</svelte:head>
<h1>{pageTitle}</h1>
<p class="subheading">{pageDescription}</p>
<div class="admin-container">
<div class="admin-grid">
{#each links as link (link.href)}
<a href={link.href} class="admin-card">
<div class="admin-card-icon">{link.icon}</div>
<h2 class="admin-card-title">{link.title}</h2>
<p class="admin-card-description">{link.description}</p>
</a>
{/each}
</div>
</div>

View File

@@ -24,9 +24,6 @@
<li><a href="/rezepte/category" class:active={isActive('/rezepte/category')}>Kategorie</a></li>
<li><a href="/rezepte/icon" class:active={isActive('/rezepte/icon')}>Icon</a></li>
<li><a href="/rezepte/tag" class:active={isActive('/rezepte/tag')}>Tags</a></li>
{#if user?.groups?.includes('rezepte_users')}
<li><a href="/rezepte/untranslated" class:active={isActive('/rezepte/untranslated')}>Unübersetzt</a></li>
{/if}
</ul>
{/snippet}
@@ -39,7 +36,7 @@
{/snippet}
{#snippet right_side()}
<UserHeader {user}></UserHeader>
<UserHeader {user} recipeLang="rezepte" lang="de"></UserHeader>
{/snippet}
{@render children()}