Compare commits
15 Commits
feature/in
...
v0.1.6.33
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
830e91fdff | ||
|
|
bc95af8027 | ||
|
|
56461fe0bb | ||
|
|
989654f62e | ||
|
|
bf9fbe37c0 | ||
|
|
c83dc7a5e5 | ||
|
|
7999d63e6d | ||
|
|
2bf21fd75f | ||
|
|
e48d823c92 | ||
|
|
84822e79ca | ||
|
|
17856ef09b | ||
|
|
fb833a7976 | ||
|
|
a4e61de53f | ||
|
|
73c1c1cf89 | ||
|
|
83e1281079 |
5
.gitignore
vendored
5
.gitignore
vendored
@@ -55,8 +55,3 @@ docker-compose.yml
|
|||||||
scripts/scrape-bahn-expert-statements.js
|
scripts/scrape-bahn-expert-statements.js
|
||||||
docs/bahn-expert-statements.txt
|
docs/bahn-expert-statements.txt
|
||||||
/public/logos.zip
|
/public/logos.zip
|
||||||
|
|
||||||
# Playwright
|
|
||||||
/test-results/
|
|
||||||
/playwright-report/
|
|
||||||
/blob-report/
|
|
||||||
|
|||||||
@@ -73,7 +73,9 @@ export default async function GenrePage({ params }: PageProps) {
|
|||||||
// Sort
|
// Sort
|
||||||
genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
|
genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
|
||||||
|
|
||||||
const specials = await prisma.special.findMany();
|
const specials = await prisma.special.findMany({
|
||||||
|
where: { hidden: false },
|
||||||
|
});
|
||||||
specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
|
specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
|
||||||
|
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
|
|||||||
@@ -1238,17 +1238,15 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
|
|||||||
return (
|
return (
|
||||||
<div className="container" style={{ justifyContent: 'center' }}>
|
<div className="container" style={{ justifyContent: 'center' }}>
|
||||||
<h1 className="title" style={{ marginBottom: '1rem', fontSize: '1.5rem' }}>{t('login')}</h1>
|
<h1 className="title" style={{ marginBottom: '1rem', fontSize: '1.5rem' }}>{t('login')}</h1>
|
||||||
<form onSubmit={(e) => { e.preventDefault(); handleLogin(); }} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}>
|
<input
|
||||||
<input
|
type="password"
|
||||||
type="password"
|
value={password}
|
||||||
value={password}
|
onChange={e => setPassword(e.target.value)}
|
||||||
onChange={e => setPassword(e.target.value)}
|
className="form-input"
|
||||||
className="form-input"
|
style={{ marginBottom: '1rem', maxWidth: '300px' }}
|
||||||
style={{ marginBottom: '1rem', maxWidth: '300px' }}
|
placeholder={t('password')}
|
||||||
placeholder={t('password')}
|
/>
|
||||||
/>
|
<button onClick={handleLogin} className="btn-primary">{t('loginButton')}</button>
|
||||||
<button type="submit" className="btn-primary">{t('loginButton')}</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,68 +1,11 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useTranslations } from 'next-intl';
|
import CuratorPageInner from '../../curator/page';
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
import { useRouter } from 'next/navigation';
|
|
||||||
|
|
||||||
export default function CuratorPage() {
|
export default function CuratorPage() {
|
||||||
const t = useTranslations('Curator');
|
// Wrapper für die lokalisierte Route /[locale]/curator
|
||||||
const router = useRouter();
|
// Hinweis: Pfad '../../curator/page' zeigt von 'app/[locale]/curator' korrekt auf 'app/curator/page'.
|
||||||
const [username, setUsername] = useState('');
|
return <CuratorPageInner />;
|
||||||
const [password, setPassword] = useState('');
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
|
|
||||||
const handleLogin = (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
// Mock validation matching provided credentials for testing
|
|
||||||
if (username === 'elpatron' && password === 'surf&4033') {
|
|
||||||
router.push('/en/curator/specials');
|
|
||||||
} else {
|
|
||||||
setError('Login failed');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ padding: '2rem', maxWidth: '400px', margin: '0 auto' }}>
|
|
||||||
<h1 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>{t('loginTitle')}</h1>
|
|
||||||
{error && <div style={{ color: 'red', marginBottom: '1rem' }}>{error}</div>}
|
|
||||||
<form onSubmit={handleLogin}>
|
|
||||||
<div style={{ marginBottom: '1rem' }}>
|
|
||||||
<label style={{ display: 'block', marginBottom: '0.5rem' }}>{t('loginUsername')}</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={username}
|
|
||||||
onChange={(e) => setUsername(e.target.value)}
|
|
||||||
placeholder={t('loginUsername')}
|
|
||||||
style={{ width: '100%', padding: '0.5rem', border: '1px solid #ccc', borderRadius: '4px' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div style={{ marginBottom: '1rem' }}>
|
|
||||||
<label style={{ display: 'block', marginBottom: '0.5rem' }}>{t('loginPassword')}</label>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
value={password}
|
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
|
||||||
placeholder={t('loginPassword')}
|
|
||||||
style={{ width: '100%', padding: '0.5rem', border: '1px solid #ccc', borderRadius: '4px' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
style={{
|
|
||||||
background: 'var(--primary, #0070f3)',
|
|
||||||
color: 'white',
|
|
||||||
padding: '0.5rem 1rem',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '4px',
|
|
||||||
cursor: 'pointer'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t('loginButton')}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import CuratorSpecialsClient from '@/app/curator/specials/CuratorSpecialsClient';
|
||||||
|
|
||||||
export default function CuratorSpecialsPage() {
|
export default function CuratorSpecialsPage() {
|
||||||
return (
|
return <CuratorSpecialsClient />;
|
||||||
<div style={{ padding: '2rem' }}>
|
|
||||||
<h1>Curator Specials</h1>
|
|
||||||
<p>Component implementation missing</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
89
app/admin/specials/[id]/page.tsx
Normal file
89
app/admin/specials/[id]/page.tsx
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useParams, useRouter, usePathname } from 'next/navigation';
|
||||||
|
import CurateSpecialEditor, { CurateSpecial } from '@/components/CurateSpecialEditor';
|
||||||
|
|
||||||
|
export default function SpecialEditorPage() {
|
||||||
|
const params = useParams();
|
||||||
|
const router = useRouter();
|
||||||
|
const pathname = usePathname();
|
||||||
|
const specialId = params.id as string;
|
||||||
|
|
||||||
|
// Locale aus dem Pfad ableiten (/en/..., /de/...)
|
||||||
|
const localeFromPath = pathname?.split('/')[1] as 'de' | 'en' | undefined;
|
||||||
|
const locale: 'de' | 'en' = localeFromPath === 'de' || localeFromPath === 'en' ? localeFromPath : 'en';
|
||||||
|
|
||||||
|
const [special, setSpecial] = useState<CurateSpecial | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
const fetchSpecial = async (showLoading = true) => {
|
||||||
|
try {
|
||||||
|
if (showLoading) {
|
||||||
|
setLoading(true);
|
||||||
|
}
|
||||||
|
const res = await fetch(`/api/specials/${specialId}`);
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
setSpecial(data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching special:', error);
|
||||||
|
} finally {
|
||||||
|
if (showLoading) {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchSpecial(true);
|
||||||
|
}, [specialId]);
|
||||||
|
|
||||||
|
const handleSaveStartTime = async (songId: number, startTime: number) => {
|
||||||
|
const res = await fetch(`/api/specials/${specialId}/songs`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ songId, startTime }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
const errorText = await res.text().catch(() => res.statusText || 'Unknown error');
|
||||||
|
console.error('Error updating special song (admin):', res.status, errorText);
|
||||||
|
throw new Error(`Failed to save start time: ${errorText}`);
|
||||||
|
} else {
|
||||||
|
// Reload special data to update the start time in the song list
|
||||||
|
await fetchSpecial(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '2rem', textAlign: 'center' }}>
|
||||||
|
<p>Loading...</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!special) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '2rem', textAlign: 'center' }}>
|
||||||
|
<p>Special not found</p>
|
||||||
|
<button onClick={() => router.push('/admin')}>Back to Admin</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CurateSpecialEditor
|
||||||
|
special={special}
|
||||||
|
locale={locale}
|
||||||
|
onBack={() => router.push('/admin')}
|
||||||
|
onSaveStartTime={handleSaveStartTime}
|
||||||
|
backLabel="← Back to Admin"
|
||||||
|
headerPrefix="Edit Special:"
|
||||||
|
noSongsSubHint="Go back to the admin dashboard to add songs to this special."
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -12,13 +12,7 @@ export async function POST(request: NextRequest) {
|
|||||||
// Default is hash for 'admin123'
|
// Default is hash for 'admin123'
|
||||||
const adminPasswordHash = process.env.ADMIN_PASSWORD || '$2b$10$SHOt9G1qUNIvHoWre7499.eEtp5PtOII0daOQGNV.dhDEuPmOUdsq';
|
const adminPasswordHash = process.env.ADMIN_PASSWORD || '$2b$10$SHOt9G1qUNIvHoWre7499.eEtp5PtOII0daOQGNV.dhDEuPmOUdsq';
|
||||||
|
|
||||||
let isValid = false;
|
const isValid = await bcrypt.compare(password, adminPasswordHash);
|
||||||
if (!adminPasswordHash.startsWith('$2b$')) {
|
|
||||||
// If the env var is not a bcrypt hash (e.g. plain text "admin123"), compare directly
|
|
||||||
isValid = password === adminPasswordHash;
|
|
||||||
} else {
|
|
||||||
isValid = await bcrypt.compare(password, adminPasswordHash);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isValid) {
|
if (isValid) {
|
||||||
return NextResponse.json({ success: true });
|
return NextResponse.json({ success: true });
|
||||||
|
|||||||
95
app/api/covers/[filename]/route.ts
Normal file
95
app/api/covers/[filename]/route.ts
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { stat } from 'fs/promises';
|
||||||
|
import { createReadStream } from 'fs';
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
|
export async function GET(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ filename: string }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const { filename } = await params;
|
||||||
|
|
||||||
|
// Security: Prevent path traversal attacks
|
||||||
|
// Allow alphanumeric, hyphens, underscores, and dots for image filenames
|
||||||
|
// Support common image formats: jpg, jpeg, png, gif, webp
|
||||||
|
const safeFilenamePattern = /^[a-zA-Z0-9_\-\.]+\.(jpg|jpeg|png|gif|webp)$/i;
|
||||||
|
if (!safeFilenamePattern.test(filename)) {
|
||||||
|
return new NextResponse('Invalid filename', { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Additional check: ensure no path separators
|
||||||
|
if (filename.includes('/') || filename.includes('\\') || filename.includes('..')) {
|
||||||
|
return new NextResponse('Invalid filename', { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const filePath = path.join(process.cwd(), 'public/uploads/covers', filename);
|
||||||
|
|
||||||
|
// Security: Verify the resolved path is still within covers directory
|
||||||
|
const coversDir = path.join(process.cwd(), 'public/uploads/covers');
|
||||||
|
const resolvedPath = path.resolve(filePath);
|
||||||
|
if (!resolvedPath.startsWith(coversDir)) {
|
||||||
|
return new NextResponse('Forbidden', { status: 403 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const stats = await stat(filePath);
|
||||||
|
const fileSize = stats.size;
|
||||||
|
|
||||||
|
// Determine content type based on file extension
|
||||||
|
const ext = filename.toLowerCase().split('.').pop();
|
||||||
|
const contentTypeMap: Record<string, string> = {
|
||||||
|
'jpg': 'image/jpeg',
|
||||||
|
'jpeg': 'image/jpeg',
|
||||||
|
'png': 'image/png',
|
||||||
|
'gif': 'image/gif',
|
||||||
|
'webp': 'image/webp',
|
||||||
|
};
|
||||||
|
const contentType = contentTypeMap[ext || ''] || 'image/jpeg';
|
||||||
|
|
||||||
|
const stream = createReadStream(filePath);
|
||||||
|
|
||||||
|
// Convert Node stream to Web stream
|
||||||
|
const readable = new ReadableStream({
|
||||||
|
start(controller) {
|
||||||
|
let isClosed = false;
|
||||||
|
|
||||||
|
stream.on('data', (chunk: any) => {
|
||||||
|
if (isClosed) return;
|
||||||
|
try {
|
||||||
|
controller.enqueue(chunk);
|
||||||
|
} catch (e) {
|
||||||
|
isClosed = true;
|
||||||
|
stream.destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
stream.on('end', () => {
|
||||||
|
if (isClosed) return;
|
||||||
|
isClosed = true;
|
||||||
|
controller.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
stream.on('error', (err: any) => {
|
||||||
|
if (isClosed) return;
|
||||||
|
isClosed = true;
|
||||||
|
controller.error(err);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
stream.destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return new NextResponse(readable, {
|
||||||
|
status: 200,
|
||||||
|
headers: {
|
||||||
|
'Content-Length': fileSize.toString(),
|
||||||
|
'Content-Type': contentType,
|
||||||
|
'Cache-Control': 'public, max-age=3600, must-revalidate',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error serving cover image:', error);
|
||||||
|
return new NextResponse('Internal Server Error', { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,9 +1,14 @@
|
|||||||
import { NextRequest, NextResponse } from 'next/server';
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
import { PrismaClient } from '@prisma/client';
|
import { PrismaClient } from '@prisma/client';
|
||||||
import { requireStaffAuth } from '@/lib/auth';
|
import { requireStaffAuth } from '@/lib/auth';
|
||||||
|
import { access } from 'fs/promises';
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
const prisma = new PrismaClient();
|
const prisma = new PrismaClient();
|
||||||
|
|
||||||
|
// Mark route as dynamic to prevent caching
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
export async function GET(
|
export async function GET(
|
||||||
request: NextRequest,
|
request: NextRequest,
|
||||||
{ params }: { params: Promise<{ id: string }> }
|
{ params }: { params: Promise<{ id: string }> }
|
||||||
@@ -52,7 +57,41 @@ export async function GET(
|
|||||||
return NextResponse.json({ error: 'Special not found' }, { status: 404 });
|
return NextResponse.json({ error: 'Special not found' }, { status: 404 });
|
||||||
}
|
}
|
||||||
|
|
||||||
return NextResponse.json(special);
|
// Filtere Songs ohne vollständige Song-Daten und prüfe Datei-Existenz
|
||||||
|
// Dies verhindert Fehler im Frontend, wenn Songs gelöscht wurden, Daten fehlen
|
||||||
|
// oder Dateien noch nicht im Container verfügbar sind (Volume Mount Delay)
|
||||||
|
const uploadsDir = path.join(process.cwd(), 'public/uploads');
|
||||||
|
|
||||||
|
const filteredSongs = await Promise.all(
|
||||||
|
special.songs
|
||||||
|
.filter(ss => ss.song && ss.song.filename)
|
||||||
|
.map(async (ss) => {
|
||||||
|
const filePath = path.join(uploadsDir, ss.song.filename);
|
||||||
|
try {
|
||||||
|
// Prüfe ob Datei existiert und zugänglich ist
|
||||||
|
await access(filePath);
|
||||||
|
return ss;
|
||||||
|
} catch (error) {
|
||||||
|
// Datei existiert nicht oder ist nicht zugänglich
|
||||||
|
console.warn(`[API] Song file not available: ${ss.song.filename} (may be syncing)`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// Entferne null-Werte (Songs ohne verfügbare Dateien)
|
||||||
|
const availableSongs = filteredSongs.filter((ss): ss is typeof special.songs[0] => ss !== null);
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
...special,
|
||||||
|
songs: availableSongs,
|
||||||
|
}, {
|
||||||
|
headers: {
|
||||||
|
'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
|
||||||
|
'Pragma': 'no-cache',
|
||||||
|
'Expires': '0',
|
||||||
|
},
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
2181
app/curator/CuratorPageClient.tsx
Normal file
2181
app/curator/CuratorPageClient.tsx
Normal file
File diff suppressed because it is too large
Load Diff
171
app/curator/help/CuratorHelpClient.tsx
Normal file
171
app/curator/help/CuratorHelpClient.tsx
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useTranslations, useLocale } from 'next-intl';
|
||||||
|
import { Link } from '@/lib/navigation';
|
||||||
|
|
||||||
|
export default function CuratorHelpClient() {
|
||||||
|
const t = useTranslations('CuratorHelp');
|
||||||
|
const locale = useLocale();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
|
||||||
|
<header style={{ marginBottom: '2rem' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>{t('title')}</h1>
|
||||||
|
<Link
|
||||||
|
href="/curator"
|
||||||
|
style={{
|
||||||
|
padding: '0.5rem 1rem',
|
||||||
|
background: '#6b7280',
|
||||||
|
color: 'white',
|
||||||
|
textDecoration: 'none',
|
||||||
|
borderRadius: '0.375rem',
|
||||||
|
fontSize: '0.9rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('backToDashboard')}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
|
||||||
|
{/* Einführung */}
|
||||||
|
<section>
|
||||||
|
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
||||||
|
{t('introductionTitle')}
|
||||||
|
</h2>
|
||||||
|
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
||||||
|
<p style={{ marginBottom: '1rem' }}>{t('introductionText')}</p>
|
||||||
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('permissionsTitle')}</h3>
|
||||||
|
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('permission1')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('permission2')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('permission3')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('permission4')}</li>
|
||||||
|
</ul>
|
||||||
|
<p style={{ marginTop: '1rem', padding: '0.75rem', background: '#fef3c7', borderRadius: '0.375rem', border: '1px solid #fbbf24' }}>
|
||||||
|
<strong>{t('note')}:</strong> {t('permissionNote')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Song-Upload */}
|
||||||
|
<section>
|
||||||
|
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
||||||
|
{t('uploadTitle')}
|
||||||
|
</h2>
|
||||||
|
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
||||||
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('uploadStepsTitle')}</h3>
|
||||||
|
<ol style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep1')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep2')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep3')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep4')}</li>
|
||||||
|
</ol>
|
||||||
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('uploadBestPracticesTitle')}</h3>
|
||||||
|
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice1')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice2')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice3')}</li>
|
||||||
|
</ul>
|
||||||
|
<p style={{ marginTop: '1rem', padding: '0.75rem', background: '#dbeafe', borderRadius: '0.375rem', border: '1px solid #3b82f6' }}>
|
||||||
|
<strong>{t('tip')}:</strong> {t('uploadTip')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Song-Bearbeitung */}
|
||||||
|
<section>
|
||||||
|
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
||||||
|
{t('editingTitle')}
|
||||||
|
</h2>
|
||||||
|
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
||||||
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('singleEditTitle')}</h3>
|
||||||
|
<p style={{ marginBottom: '1rem' }}>{t('singleEditText')}</p>
|
||||||
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('batchEditTitle')}</h3>
|
||||||
|
<p style={{ marginBottom: '1rem' }}>{t('batchEditText')}</p>
|
||||||
|
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature1')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature2')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature3')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature4')}</li>
|
||||||
|
</ul>
|
||||||
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('genreSpecialAssignmentTitle')}</h3>
|
||||||
|
<p style={{ marginBottom: '1rem' }}>{t('genreSpecialAssignmentText')}</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Specials kuratieren */}
|
||||||
|
<section>
|
||||||
|
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
||||||
|
{t('curateSpecialsHelpTitle')}
|
||||||
|
</h2>
|
||||||
|
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
||||||
|
<p style={{ marginBottom: '1rem' }}>{t('curateSpecialsHelpIntro')}</p>
|
||||||
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>
|
||||||
|
{t('curateSpecialsHelpStepsTitle')}
|
||||||
|
</h3>
|
||||||
|
<ol style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep1')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep2')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep3')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep4')}</li>
|
||||||
|
</ol>
|
||||||
|
<p style={{ marginTop: '1rem', padding: '0.75rem', background: '#fef3c7', borderRadius: '0.375rem', border: '1px solid #fbbf24' }}>
|
||||||
|
<strong>{t('note')}:</strong> {t('curateSpecialsPermissionsNote')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Kommentar-Verwaltung */}
|
||||||
|
<section>
|
||||||
|
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
||||||
|
{t('commentsTitle')}
|
||||||
|
</h2>
|
||||||
|
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
||||||
|
<p style={{ marginBottom: '1rem' }}>{t('commentsText')}</p>
|
||||||
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('commentsActionsTitle')}</h3>
|
||||||
|
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}><strong>{t('markAsRead')}:</strong> {t('markAsReadText')}</li>
|
||||||
|
<li style={{ marginBottom: '0.5rem' }}><strong>{t('archive')}:</strong> {t('archiveText')}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Best Practices */}
|
||||||
|
<section>
|
||||||
|
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
||||||
|
{t('bestPracticesTitle')}
|
||||||
|
</h2>
|
||||||
|
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
||||||
|
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
||||||
|
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice1')}</li>
|
||||||
|
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice2')}</li>
|
||||||
|
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice3')}</li>
|
||||||
|
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice4')}</li>
|
||||||
|
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice5')}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Troubleshooting */}
|
||||||
|
<section>
|
||||||
|
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
||||||
|
{t('troubleshootingTitle')}
|
||||||
|
</h2>
|
||||||
|
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
||||||
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ1')}</h3>
|
||||||
|
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA1')}</p>
|
||||||
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ2')}</h3>
|
||||||
|
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA2')}</p>
|
||||||
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ3')}</h3>
|
||||||
|
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA3')}</p>
|
||||||
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ4')}</h3>
|
||||||
|
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA4')}</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
8
app/curator/help/page.tsx
Normal file
8
app/curator/help/page.tsx
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
|
import CuratorHelpClient from './CuratorHelpClient';
|
||||||
|
|
||||||
|
export default function CuratorHelpPage() {
|
||||||
|
return <CuratorHelpClient />;
|
||||||
|
}
|
||||||
|
|
||||||
11
app/curator/page.tsx
Normal file
11
app/curator/page.tsx
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
// Server-Wrapper für die Kuratoren-Seite.
|
||||||
|
// Markiert die Route als dynamisch und rendert die eigentliche Client-Komponente.
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
|
import CuratorPageClient from './CuratorPageClient';
|
||||||
|
|
||||||
|
export default function CuratorPage() {
|
||||||
|
return <CuratorPageClient />;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
156
app/curator/specials/CuratorSpecialsClient.tsx
Normal file
156
app/curator/specials/CuratorSpecialsClient.tsx
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useRouter, usePathname } from 'next/navigation';
|
||||||
|
import { useLocale, useTranslations } from 'next-intl';
|
||||||
|
import { Link } from '@/lib/navigation';
|
||||||
|
import { getCuratorAuthHeaders } from '@/lib/curatorAuth';
|
||||||
|
import { getLocalizedValue } from '@/lib/i18n';
|
||||||
|
|
||||||
|
interface CuratorSpecial {
|
||||||
|
id: number;
|
||||||
|
name: string | { de?: string; en?: string };
|
||||||
|
songCount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CuratorSpecialsClient() {
|
||||||
|
const router = useRouter();
|
||||||
|
const pathname = usePathname();
|
||||||
|
const urlLocale = pathname?.split('/')[1] as 'de' | 'en' | undefined;
|
||||||
|
const intlLocale = useLocale() as 'de' | 'en';
|
||||||
|
const locale: 'de' | 'en' = urlLocale === 'de' || urlLocale === 'en' ? urlLocale : intlLocale;
|
||||||
|
const t = useTranslations('Curator');
|
||||||
|
|
||||||
|
const [specials, setSpecials] = useState<CuratorSpecial[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchSpecials = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const res = await fetch('/api/curator/specials', {
|
||||||
|
headers: getCuratorAuthHeaders(),
|
||||||
|
});
|
||||||
|
if (!res.ok) {
|
||||||
|
if (res.status === 403) {
|
||||||
|
setError(t('specialForbidden'));
|
||||||
|
} else {
|
||||||
|
setError('Failed to load specials');
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const data = await res.json();
|
||||||
|
setSpecials(data);
|
||||||
|
} catch (e) {
|
||||||
|
setError('Failed to load specials');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchSpecials();
|
||||||
|
}, [t]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
|
||||||
|
<p>{t('loading')}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
|
||||||
|
<p style={{ color: 'red' }}>{error}</p>
|
||||||
|
<Link
|
||||||
|
href="/curator"
|
||||||
|
style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
marginTop: '1rem',
|
||||||
|
padding: '0.5rem 1rem',
|
||||||
|
background: '#6b7280',
|
||||||
|
color: 'white',
|
||||||
|
textDecoration: 'none',
|
||||||
|
borderRadius: '0.375rem',
|
||||||
|
fontSize: '0.9rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('backToDashboard') || 'Back to Dashboard'}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
|
||||||
|
<header style={{ marginBottom: '2rem' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>
|
||||||
|
{t('curateSpecialsTitle') || 'Curate Specials'}
|
||||||
|
</h1>
|
||||||
|
<Link
|
||||||
|
href="/curator"
|
||||||
|
style={{
|
||||||
|
padding: '0.5rem 1rem',
|
||||||
|
background: '#6b7280',
|
||||||
|
color: 'white',
|
||||||
|
textDecoration: 'none',
|
||||||
|
borderRadius: '0.375rem',
|
||||||
|
fontSize: '0.9rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('backToDashboard') || 'Back to Dashboard'}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{specials.length === 0 ? (
|
||||||
|
<div style={{ padding: '2rem', textAlign: 'center', color: '#666' }}>
|
||||||
|
<p>{t('noSpecialsAssigned') || 'No specials assigned to you.'}</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||||
|
{specials.map((special) => (
|
||||||
|
<Link
|
||||||
|
key={special.id}
|
||||||
|
href={`/curator/specials/${special.id}`}
|
||||||
|
style={{
|
||||||
|
display: 'block',
|
||||||
|
padding: '1.5rem',
|
||||||
|
background: '#f9fafb',
|
||||||
|
border: '1px solid #e5e7eb',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
textDecoration: 'none',
|
||||||
|
color: 'inherit',
|
||||||
|
transition: 'all 0.2s',
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.background = '#f3f4f6';
|
||||||
|
e.currentTarget.style.borderColor = '#d1d5db';
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.background = '#f9fafb';
|
||||||
|
e.currentTarget.style.borderColor = '#e5e7eb';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<div>
|
||||||
|
<h2 style={{ fontSize: '1.25rem', marginBottom: '0.5rem', color: '#111827' }}>
|
||||||
|
{getLocalizedValue(special.name, locale)}
|
||||||
|
</h2>
|
||||||
|
<p style={{ fontSize: '0.875rem', color: '#6b7280' }}>
|
||||||
|
{special.songCount} {special.songCount === 1 ? 'song' : 'songs'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '1.5rem', color: '#10b981' }}>→</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
178
app/curator/specials/[id]/page.tsx
Normal file
178
app/curator/specials/[id]/page.tsx
Normal file
@@ -0,0 +1,178 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useParams, useRouter, usePathname } from 'next/navigation';
|
||||||
|
import { useLocale, useTranslations } from 'next-intl';
|
||||||
|
import CurateSpecialEditor, { CurateSpecial } from '@/components/CurateSpecialEditor';
|
||||||
|
import { getCuratorAuthHeaders } from '@/lib/curatorAuth';
|
||||||
|
import HelpTooltip from '@/components/HelpTooltip';
|
||||||
|
|
||||||
|
export default function CuratorSpecialEditorPage() {
|
||||||
|
const params = useParams();
|
||||||
|
const router = useRouter();
|
||||||
|
const pathname = usePathname();
|
||||||
|
const urlLocale = pathname?.split('/')[1] as 'de' | 'en' | undefined;
|
||||||
|
const intlLocale = useLocale() as 'de' | 'en';
|
||||||
|
const locale: 'de' | 'en' = urlLocale === 'de' || urlLocale === 'en' ? urlLocale : intlLocale;
|
||||||
|
const t = useTranslations('Curator');
|
||||||
|
const tHelp = useTranslations('CuratorHelp');
|
||||||
|
|
||||||
|
const specialId = params?.id as string;
|
||||||
|
|
||||||
|
const [special, setSpecial] = useState<CurateSpecial | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const fetchSpecial = async (showLoading = true) => {
|
||||||
|
try {
|
||||||
|
if (showLoading) {
|
||||||
|
setLoading(true);
|
||||||
|
}
|
||||||
|
const res = await fetch(`/api/curator/specials/${specialId}`, {
|
||||||
|
headers: getCuratorAuthHeaders(),
|
||||||
|
cache: 'no-store',
|
||||||
|
});
|
||||||
|
if (res.status === 403) {
|
||||||
|
setError(t('specialForbidden'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!res.ok) {
|
||||||
|
setError('Failed to load special');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const data = await res.json();
|
||||||
|
setSpecial(data);
|
||||||
|
} catch (e) {
|
||||||
|
setError('Failed to load special');
|
||||||
|
} finally {
|
||||||
|
if (showLoading) {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (specialId) {
|
||||||
|
fetchSpecial(true);
|
||||||
|
}
|
||||||
|
}, [specialId, t]);
|
||||||
|
|
||||||
|
const handleSaveStartTime = async (songId: number, startTime: number) => {
|
||||||
|
const res = await fetch(`/api/curator/specials/${specialId}/songs`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
...getCuratorAuthHeaders(),
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ songId, startTime }),
|
||||||
|
});
|
||||||
|
if (res.status === 403) {
|
||||||
|
setError(t('specialForbidden'));
|
||||||
|
} else if (!res.ok) {
|
||||||
|
setError('Failed to save changes');
|
||||||
|
} else {
|
||||||
|
// Reload special data to update the start time in the song list
|
||||||
|
await fetchSpecial(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '2rem', textAlign: 'center' }}>
|
||||||
|
<p>{t('loadingData')}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '2rem', textAlign: 'center' }}>
|
||||||
|
<p>{error}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => router.push(`/${locale}/curator`)}
|
||||||
|
style={{
|
||||||
|
marginTop: '1rem',
|
||||||
|
padding: '0.5rem 1rem',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
border: 'none',
|
||||||
|
background: '#e5e7eb',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('backToDashboard')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!special) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '2rem', textAlign: 'center' }}>
|
||||||
|
<p>{t('specialNotFound')}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => router.push(`/${locale}/curator`)}
|
||||||
|
style={{
|
||||||
|
marginTop: '1rem',
|
||||||
|
padding: '0.5rem 1rem',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
border: 'none',
|
||||||
|
background: '#e5e7eb',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('backToDashboard')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||||
|
<h1 style={{ fontSize: '1.75rem', fontWeight: 'bold' }}>
|
||||||
|
{t('curateSpecialHeaderPrefix')}
|
||||||
|
</h1>
|
||||||
|
<HelpTooltip
|
||||||
|
shortText={tHelp('tooltipCurateSpecialEditorShort')}
|
||||||
|
longText={tHelp('tooltipCurateSpecialEditorLong')}
|
||||||
|
position="bottom"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => router.push(`/${locale}/curator/specials`)}
|
||||||
|
style={{
|
||||||
|
padding: '0.5rem 1rem',
|
||||||
|
background: '#e5e7eb',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
border: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '0.9rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('backToCuratorSpecials')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CurateSpecialEditor
|
||||||
|
special={special}
|
||||||
|
locale={locale}
|
||||||
|
onBack={() => router.push(`/${locale}/curator/specials`)}
|
||||||
|
onSaveStartTime={handleSaveStartTime}
|
||||||
|
backLabel={t('backToCuratorSpecials')}
|
||||||
|
headerPrefix={t('curateSpecialHeaderPrefix')}
|
||||||
|
noSongsHint={t('curateSpecialNoSongs')}
|
||||||
|
noSongsSubHint={t('curateSpecialNoSongsSub')}
|
||||||
|
instructionsText={t('curateSpecialInstructions')}
|
||||||
|
savingLabel={t('saving')}
|
||||||
|
saveChangesLabel={t('saveChanges')}
|
||||||
|
savedLabel={t('saved')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
13
app/curator/specials/page.tsx
Normal file
13
app/curator/specials/page.tsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
// Root /curator/specials route without locale:
|
||||||
|
// redirect users to the default English locale version.
|
||||||
|
|
||||||
|
import { redirect } from 'next/navigation';
|
||||||
|
|
||||||
|
export default function CuratorSpecialsPage() {
|
||||||
|
redirect('/en/curator/specials');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -62,11 +62,14 @@ export default function CurateSpecialEditor({
|
|||||||
saveChangesLabel = '💾 Save Changes',
|
saveChangesLabel = '💾 Save Changes',
|
||||||
savedLabel = '✓ Saved',
|
savedLabel = '✓ Saved',
|
||||||
}: CurateSpecialEditorProps) {
|
}: CurateSpecialEditorProps) {
|
||||||
|
// Filtere Songs ohne vollständige Song-Daten (song, song.filename)
|
||||||
|
const validSongs = special.songs.filter(ss => ss.song && ss.song.filename);
|
||||||
|
|
||||||
const [selectedSongId, setSelectedSongId] = useState<number | null>(
|
const [selectedSongId, setSelectedSongId] = useState<number | null>(
|
||||||
special.songs.length > 0 ? special.songs[0].songId : null
|
validSongs.length > 0 ? validSongs[0].songId : null
|
||||||
);
|
);
|
||||||
const [pendingStartTime, setPendingStartTime] = useState<number | null>(
|
const [pendingStartTime, setPendingStartTime] = useState<number | null>(
|
||||||
special.songs.length > 0 ? special.songs[0].startTime : null
|
validSongs.length > 0 ? validSongs[0].startTime : null
|
||||||
);
|
);
|
||||||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
|
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
@@ -77,7 +80,7 @@ export default function CurateSpecialEditor({
|
|||||||
const unlockSteps = JSON.parse(special.unlockSteps);
|
const unlockSteps = JSON.parse(special.unlockSteps);
|
||||||
const totalDuration = unlockSteps[unlockSteps.length - 1];
|
const totalDuration = unlockSteps[unlockSteps.length - 1];
|
||||||
|
|
||||||
const selectedSpecialSong = special.songs.find(ss => ss.songId === selectedSongId) ?? null;
|
const selectedSpecialSong = validSongs.find(ss => ss.songId === selectedSongId) ?? null;
|
||||||
|
|
||||||
const handleStartTimeChange = (newStartTime: number) => {
|
const handleStartTimeChange = (newStartTime: number) => {
|
||||||
setPendingStartTime(newStartTime);
|
setPendingStartTime(newStartTime);
|
||||||
@@ -111,7 +114,7 @@ export default function CurateSpecialEditor({
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{special.songs.length === 0 ? (
|
{validSongs.length === 0 ? (
|
||||||
<div style={{ padding: '2rem', background: '#f3f4f6', borderRadius: '0.5rem', textAlign: 'center' }}>
|
<div style={{ padding: '2rem', background: '#f3f4f6', borderRadius: '0.5rem', textAlign: 'center' }}>
|
||||||
<p>{noSongsHint}</p>
|
<p>{noSongsHint}</p>
|
||||||
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
||||||
@@ -125,7 +128,7 @@ export default function CurateSpecialEditor({
|
|||||||
Select Song to Curate
|
Select Song to Curate
|
||||||
</h2>
|
</h2>
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '1rem' }}>
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '1rem' }}>
|
||||||
{special.songs.map(ss => (
|
{validSongs.map(ss => (
|
||||||
<div
|
<div
|
||||||
key={ss.songId}
|
key={ss.songId}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@@ -152,7 +155,7 @@ export default function CurateSpecialEditor({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{selectedSpecialSong && (
|
{selectedSpecialSong && selectedSpecialSong.song && selectedSpecialSong.song.filename ? (
|
||||||
<div>
|
<div>
|
||||||
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>
|
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>
|
||||||
Curate: {selectedSpecialSong.song.title}
|
Curate: {selectedSpecialSong.song.title}
|
||||||
@@ -181,7 +184,7 @@ export default function CurateSpecialEditor({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<WaveformEditor
|
<WaveformEditor
|
||||||
audioUrl={`/uploads/${selectedSpecialSong.song.filename}`}
|
audioUrl={`/api/audio/${selectedSpecialSong.song.filename}`}
|
||||||
startTime={pendingStartTime ?? selectedSpecialSong.startTime}
|
startTime={pendingStartTime ?? selectedSpecialSong.startTime}
|
||||||
duration={totalDuration}
|
duration={totalDuration}
|
||||||
unlockSteps={unlockSteps}
|
unlockSteps={unlockSteps}
|
||||||
@@ -189,7 +192,13 @@ export default function CurateSpecialEditor({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
) : selectedSpecialSong ? (
|
||||||
|
<div style={{ padding: '2rem', background: '#fee2e2', borderRadius: '0.5rem', textAlign: 'center' }}>
|
||||||
|
<p style={{ color: '#991b1b', fontWeight: 'bold' }}>
|
||||||
|
Fehler: Song-Daten unvollständig. Bitte wählen Sie einen anderen Song.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,88 +0,0 @@
|
|||||||
# Integration Testing
|
|
||||||
|
|
||||||
Hördle uses [Playwright](https://playwright.dev/) for end-to-end (E2E) integration testing. These tests ensure that critical flows like gameplay, authentication, and admin management function correctly across different browsers.
|
|
||||||
|
|
||||||
## Prerequisites
|
|
||||||
|
|
||||||
Ensure you have the Playwright browsers installed:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx playwright install
|
|
||||||
```
|
|
||||||
|
|
||||||
## Running Tests
|
|
||||||
|
|
||||||
### Headless Mode (CI/CLI)
|
|
||||||
|
|
||||||
To run all tests in headless mode (Chromium, Firefox, WebKit):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run test:e2e
|
|
||||||
```
|
|
||||||
|
|
||||||
### UI Mode (Interactive)
|
|
||||||
|
|
||||||
To run tests with a UI to inspect traces and watch execution:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run test:e2e:ui
|
|
||||||
```
|
|
||||||
|
|
||||||
### Specific Test File
|
|
||||||
|
|
||||||
To run a specific test file:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx playwright test tests/gameplay.spec.ts
|
|
||||||
```
|
|
||||||
|
|
||||||
### Specific Project (Browser)
|
|
||||||
|
|
||||||
To run tests only on a specific browser (e.g., Chromium):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx playwright test --project=chromium
|
|
||||||
```
|
|
||||||
|
|
||||||
## Configuration
|
|
||||||
|
|
||||||
The Playwright configuration is located in `playwright.config.ts`. It sets up the base URL (default: `http://localhost:3000`) and the web server command to start the app if it's not running.
|
|
||||||
|
|
||||||
### Environment Variables
|
|
||||||
|
|
||||||
* **`ADMIN_PASSWORD`**: The tests assume the admin password is `'admin123'`.
|
|
||||||
* In `app/api/admin/login/route.ts`, the login logic has been enhanced to check if `ADMIN_PASSWORD` is a bcrypt hash (starts with `$2b$`) or plain text.
|
|
||||||
* For local testing, you can set `ADMIN_PASSWORD="admin123"` in your `.env` or `.env.local` (though the default fallback in the code also handles this).
|
|
||||||
* **Curator Credentials**: The mock Curator login page (`app/[locale]/curator/page.tsx`) mocks validation for testing.
|
|
||||||
* Username: `elpatron`
|
|
||||||
* Password: `surf&4033`
|
|
||||||
|
|
||||||
## Test Structure
|
|
||||||
|
|
||||||
Tests are located in the `tests/` directory:
|
|
||||||
|
|
||||||
* **`auth.spec.ts`**: Verifies public access and admin login flows.
|
|
||||||
* **`admin.spec.ts`**: Checks the Admin Dashboard, including access protection and visibility of sections (Dashboard, Daily Puzzles, etc.).
|
|
||||||
* **`curator.spec.ts`**: Verifies the Curator login form and authentication flows (valid/invalid credentials).
|
|
||||||
* **`gameplay.spec.ts`**: Tests the core game loop: loading the game, playing audio, interaction with the prompt, and submitting a guess.
|
|
||||||
|
|
||||||
## Troubleshooting & Known Issues
|
|
||||||
|
|
||||||
### Next.js Development Overlay (`nextjs-portal`)
|
|
||||||
|
|
||||||
In development mode (`npm run dev`), Next.js injects an overlay (`<nextjs-portal>`) for hot reloading feedback. This overlay can sometimes intercept clicks intended for UI elements, causing tests to fail with "element is not clickable" or timeout errors.
|
|
||||||
|
|
||||||
**Solution:**
|
|
||||||
We inject a CSS style in the `beforeEach` hook of our tests to hide this overlay:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
test.beforeEach(async ({ page }) => {
|
|
||||||
await page.addStyleTag({ content: 'nextjs-portal, #nextjs-dev-overlay, [data-nextjs-dev-overlay] { display: none !important; }' });
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### WebKit (Safari) Stability
|
|
||||||
|
|
||||||
WebKit can be slower or more sensitive to timing in some environments. If tests fail on WebKit but pass on other browsers:
|
|
||||||
1. Try increasing the timeout in `playwright.config.ts`.
|
|
||||||
2. Use `await page.waitForTimeout(500)` or specific assertions like `await expect(page).toHaveURL(...)` to allow for transition times, as implemented in `tests/admin.spec.ts`.
|
|
||||||
68
package-lock.json
generated
68
package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "hoerdle",
|
"name": "hoerdle",
|
||||||
"version": "0.1.6.26",
|
"version": "0.1.6.11",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "hoerdle",
|
"name": "hoerdle",
|
||||||
"version": "0.1.6.26",
|
"version": "0.1.6.11",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@prisma/client": "^6.19.0",
|
"@prisma/client": "^6.19.0",
|
||||||
"bcryptjs": "^3.0.3",
|
"bcryptjs": "^3.0.3",
|
||||||
@@ -21,7 +21,6 @@
|
|||||||
"unist-util-visit-parents": "^6.0.2"
|
"unist-util-visit-parents": "^6.0.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@playwright/test": "^1.57.0",
|
|
||||||
"@types/bcryptjs": "^2.4.6",
|
"@types/bcryptjs": "^2.4.6",
|
||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^19",
|
"@types/react": "^19",
|
||||||
@@ -1293,22 +1292,6 @@
|
|||||||
"node": ">=12.4.0"
|
"node": ">=12.4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@playwright/test": {
|
|
||||||
"version": "1.57.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.57.0.tgz",
|
|
||||||
"integrity": "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==",
|
|
||||||
"devOptional": true,
|
|
||||||
"license": "Apache-2.0",
|
|
||||||
"dependencies": {
|
|
||||||
"playwright": "1.57.0"
|
|
||||||
},
|
|
||||||
"bin": {
|
|
||||||
"playwright": "cli.js"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=18"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@prisma/client": {
|
"node_modules/@prisma/client": {
|
||||||
"version": "6.19.0",
|
"version": "6.19.0",
|
||||||
"resolved": "https://registry.npmjs.org/@prisma/client/-/client-6.19.0.tgz",
|
"resolved": "https://registry.npmjs.org/@prisma/client/-/client-6.19.0.tgz",
|
||||||
@@ -4057,21 +4040,6 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/fsevents": {
|
|
||||||
"version": "2.3.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
|
||||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
|
||||||
"dev": true,
|
|
||||||
"hasInstallScript": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"os": [
|
|
||||||
"darwin"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/function-bind": {
|
"node_modules/function-bind": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||||
@@ -6449,38 +6417,6 @@
|
|||||||
"pathe": "^2.0.3"
|
"pathe": "^2.0.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/playwright": {
|
|
||||||
"version": "1.57.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
|
|
||||||
"integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==",
|
|
||||||
"devOptional": true,
|
|
||||||
"license": "Apache-2.0",
|
|
||||||
"dependencies": {
|
|
||||||
"playwright-core": "1.57.0"
|
|
||||||
},
|
|
||||||
"bin": {
|
|
||||||
"playwright": "cli.js"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=18"
|
|
||||||
},
|
|
||||||
"optionalDependencies": {
|
|
||||||
"fsevents": "2.3.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/playwright-core": {
|
|
||||||
"version": "1.57.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0.tgz",
|
|
||||||
"integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==",
|
|
||||||
"devOptional": true,
|
|
||||||
"license": "Apache-2.0",
|
|
||||||
"bin": {
|
|
||||||
"playwright-core": "cli.js"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=18"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/po-parser": {
|
"node_modules/po-parser": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/po-parser/-/po-parser-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/po-parser/-/po-parser-1.0.2.tgz",
|
||||||
|
|||||||
@@ -1,14 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "hoerdle",
|
"name": "hoerdle",
|
||||||
"version": "0.1.6.26",
|
"version": "0.1.6.33",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "prisma migrate deploy && next start",
|
"start": "prisma migrate deploy && next start",
|
||||||
"lint": "eslint",
|
"lint": "eslint"
|
||||||
"test:e2e": "playwright test",
|
|
||||||
"test:e2e:ui": "playwright test --ui"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@prisma/client": "^6.19.0",
|
"@prisma/client": "^6.19.0",
|
||||||
@@ -24,7 +22,6 @@
|
|||||||
"unist-util-visit-parents": "^6.0.2"
|
"unist-util-visit-parents": "^6.0.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@playwright/test": "^1.57.0",
|
|
||||||
"@types/bcryptjs": "^2.4.6",
|
"@types/bcryptjs": "^2.4.6",
|
||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^19",
|
"@types/react": "^19",
|
||||||
|
|||||||
@@ -1,42 +0,0 @@
|
|||||||
import { defineConfig, devices } from '@playwright/test';
|
|
||||||
import path from 'path';
|
|
||||||
|
|
||||||
const PORT = 3000;
|
|
||||||
const baseURL = `http://localhost:${PORT}`;
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
testDir: './tests',
|
|
||||||
fullyParallel: true,
|
|
||||||
forbidOnly: !!process.env.CI,
|
|
||||||
/* Maximum time one test can run for. */
|
|
||||||
timeout: 60 * 1000,
|
|
||||||
expect: {
|
|
||||||
timeout: 20000
|
|
||||||
},
|
|
||||||
retries: process.env.CI ? 2 : 0,
|
|
||||||
workers: process.env.CI ? 1 : undefined,
|
|
||||||
reporter: 'html',
|
|
||||||
use: {
|
|
||||||
baseURL,
|
|
||||||
trace: 'on-first-retry',
|
|
||||||
},
|
|
||||||
projects: [
|
|
||||||
{
|
|
||||||
name: 'chromium',
|
|
||||||
use: { ...devices['Desktop Chrome'] },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'firefox',
|
|
||||||
use: { ...devices['Desktop Firefox'] },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'webkit',
|
|
||||||
use: { ...devices['Desktop Safari'] },
|
|
||||||
},
|
|
||||||
],
|
|
||||||
webServer: {
|
|
||||||
command: 'npm run dev',
|
|
||||||
url: baseURL,
|
|
||||||
reuseExistingServer: !process.env.CI,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -9,6 +9,79 @@ if [ -f "$HOME/.restic-env" ]; then
|
|||||||
. "$HOME/.restic-env"
|
. "$HOME/.restic-env"
|
||||||
fi
|
fi
|
||||||
|
|
||||||
|
# Extract Gotify variables from .env file if not set (ignore comments and empty lines)
|
||||||
|
if [ -z "$GOTIFY_URL" ] && [ -f ".env" ]; then
|
||||||
|
GOTIFY_URL=$(grep -v '^#' .env | grep -v '^$' | grep '^GOTIFY_URL=' | head -1 | cut -d'=' -f2- | tr -d '"' | tr -d "'" | xargs || echo "")
|
||||||
|
fi
|
||||||
|
|
||||||
|
if [ -z "$GOTIFY_APP_TOKEN" ] && [ -f ".env" ]; then
|
||||||
|
GOTIFY_APP_TOKEN=$(grep -v '^#' .env | grep -v '^$' | grep '^GOTIFY_APP_TOKEN=' | head -1 | cut -d'=' -f2- | tr -d '"' | tr -d "'" | xargs || echo "")
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Extract Gotify variables from docker-compose.yml if not set
|
||||||
|
if [ -z "$GOTIFY_URL" ] && [ -f "docker-compose.yml" ]; then
|
||||||
|
GOTIFY_URL=$(grep -oP 'GOTIFY_URL=\K[^\s]+' docker-compose.yml | head -1 | tr -d '"' | tr -d "'" || echo "")
|
||||||
|
fi
|
||||||
|
|
||||||
|
if [ -z "$GOTIFY_APP_TOKEN" ] && [ -f "docker-compose.yml" ]; then
|
||||||
|
GOTIFY_APP_TOKEN=$(grep -oP 'GOTIFY_APP_TOKEN=\K[^\s]+' docker-compose.yml | head -1 | tr -d '"' | tr -d "'" || echo "")
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Function to send Gotify notification
|
||||||
|
send_gotify_notification() {
|
||||||
|
local title="$1"
|
||||||
|
local message="$2"
|
||||||
|
local priority="${3:-5}"
|
||||||
|
|
||||||
|
# Check if Gotify is configured
|
||||||
|
if [ -z "$GOTIFY_URL" ] || [ -z "$GOTIFY_APP_TOKEN" ]; then
|
||||||
|
echo "⚠️ Gotify not configured (GOTIFY_URL or GOTIFY_APP_TOKEN not set), skipping notification"
|
||||||
|
return 0
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo "📢 Sending Gotify notification..."
|
||||||
|
|
||||||
|
# Send notification (fire and forget, don't fail on error)
|
||||||
|
# Use jq if available for proper JSON encoding, otherwise use simple approach
|
||||||
|
if command -v jq >/dev/null 2>&1; then
|
||||||
|
local json_payload
|
||||||
|
json_payload=$(jq -n \
|
||||||
|
--arg title "$title" \
|
||||||
|
--arg message "$message" \
|
||||||
|
--argjson priority "$priority" \
|
||||||
|
'{title: $title, message: $message, priority: $priority}')
|
||||||
|
|
||||||
|
local curl_exit_code=0
|
||||||
|
curl -sSf -X POST "${GOTIFY_URL}/message?token=${GOTIFY_APP_TOKEN}" \
|
||||||
|
-H "Content-Type: application/json" \
|
||||||
|
-d "$json_payload" \
|
||||||
|
>/dev/null 2>&1 || curl_exit_code=$?
|
||||||
|
|
||||||
|
if [ $curl_exit_code -eq 0 ]; then
|
||||||
|
echo "✅ Gotify notification sent successfully"
|
||||||
|
else
|
||||||
|
echo "⚠️ Failed to send Gotify notification (curl exit code: $curl_exit_code)"
|
||||||
|
fi
|
||||||
|
else
|
||||||
|
# Fallback: simple JSON encoding (replace " with \" and newlines with \n)
|
||||||
|
local escaped_title escaped_message
|
||||||
|
escaped_title=$(echo "$title" | sed 's/"/\\"/g')
|
||||||
|
escaped_message=$(echo "$message" | sed 's/"/\\"/g' | sed ':a;N;$!ba;s/\n/\\n/g')
|
||||||
|
|
||||||
|
local curl_exit_code=0
|
||||||
|
curl -sSf -X POST "${GOTIFY_URL}/message?token=${GOTIFY_APP_TOKEN}" \
|
||||||
|
-H "Content-Type: application/json" \
|
||||||
|
-d "{\"title\":\"${escaped_title}\",\"message\":\"${escaped_message}\",\"priority\":${priority}}" \
|
||||||
|
>/dev/null 2>&1 || curl_exit_code=$?
|
||||||
|
|
||||||
|
if [ $curl_exit_code -eq 0 ]; then
|
||||||
|
echo "✅ Gotify notification sent successfully"
|
||||||
|
else
|
||||||
|
echo "⚠️ Failed to send Gotify notification (curl exit code: $curl_exit_code)"
|
||||||
|
fi
|
||||||
|
fi
|
||||||
|
}
|
||||||
|
|
||||||
echo "💾 Creating Restic backup..."
|
echo "💾 Creating Restic backup..."
|
||||||
|
|
||||||
if ! command -v restic >/dev/null 2>&1; then
|
if ! command -v restic >/dev/null 2>&1; then
|
||||||
@@ -71,12 +144,32 @@ restic -r "$RESTIC_REPO" backup \
|
|||||||
|
|
||||||
if [ $RESTIC_EXIT_CODE -eq 0 ]; then
|
if [ $RESTIC_EXIT_CODE -eq 0 ]; then
|
||||||
echo "✅ Restic backup completed successfully"
|
echo "✅ Restic backup completed successfully"
|
||||||
|
|
||||||
|
# Send success notification
|
||||||
|
send_gotify_notification \
|
||||||
|
"Hördle Backup: Erfolgreich" \
|
||||||
|
"Restic Backup wurde erfolgreich abgeschlossen.\nDatum: ${CURRENT_DATE}\nCommit: ${CURRENT_COMMIT_SHORT}" \
|
||||||
|
5
|
||||||
|
|
||||||
exit 0
|
exit 0
|
||||||
elif [ $RESTIC_EXIT_CODE -eq 3 ]; then
|
elif [ $RESTIC_EXIT_CODE -eq 3 ]; then
|
||||||
echo "⚠️ Restic backup completed with warnings (some files could not be read), continuing..."
|
echo "⚠️ Restic backup completed with warnings (some files could not be read), continuing..."
|
||||||
|
|
||||||
|
# Send warning notification
|
||||||
|
send_gotify_notification \
|
||||||
|
"Hördle Backup: Mit Warnungen" \
|
||||||
|
"Restic Backup wurde mit Warnungen abgeschlossen (einige Dateien konnten nicht gelesen werden).\nDatum: ${CURRENT_DATE}\nCommit: ${CURRENT_COMMIT_SHORT}" \
|
||||||
|
7
|
||||||
|
|
||||||
exit 0
|
exit 0
|
||||||
else
|
else
|
||||||
echo "⚠️ Restic backup failed (exit code: $RESTIC_EXIT_CODE), continuing deployment..."
|
echo "⚠️ Restic backup failed (exit code: $RESTIC_EXIT_CODE), continuing deployment..."
|
||||||
|
|
||||||
|
# Send error notification
|
||||||
|
send_gotify_notification \
|
||||||
|
"Hördle Backup: Fehlgeschlagen" \
|
||||||
|
"Restic Backup ist fehlgeschlagen (Exit Code: ${RESTIC_EXIT_CODE}).\nDatum: ${CURRENT_DATE}\nCommit: ${CURRENT_COMMIT_SHORT}" \
|
||||||
|
9
|
||||||
|
|
||||||
exit 0
|
exit 0
|
||||||
fi
|
fi
|
||||||
|
|
||||||
|
|||||||
@@ -1,29 +0,0 @@
|
|||||||
import { test, expect } from '@playwright/test';
|
|
||||||
|
|
||||||
test.describe('Admin Dashboard', () => {
|
|
||||||
// Use a beforeEach hook to log in before each test
|
|
||||||
test.beforeEach(async ({ page }) => {
|
|
||||||
await page.goto('/en/admin');
|
|
||||||
await page.addStyleTag({ content: 'nextjs-portal, #nextjs-dev-overlay, [data-nextjs-dev-overlay] { display: none !important; }' });
|
|
||||||
|
|
||||||
// Check if login is needed
|
|
||||||
const passwordInput = page.getByPlaceholder('Password');
|
|
||||||
if (await passwordInput.isVisible()) {
|
|
||||||
await passwordInput.fill('admin123'); // Default dev password
|
|
||||||
await page.getByRole('button', { name: 'Login' }).dispatchEvent('click');
|
|
||||||
await page.waitForTimeout(500); // Wait for transition
|
|
||||||
await expect(page).toHaveURL(/\/(admin|en\/admin)/);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Can access Admin Dashboard', async ({ page }) => {
|
|
||||||
// Song Library was moved, check for Dashboard title and other sections
|
|
||||||
await expect(page.getByRole('heading', { name: 'Hördle Admin Dashboard' })).toBeVisible();
|
|
||||||
await expect(page.getByText('Manage Specials')).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Shows Daily Puzzles section', async ({ page }) => {
|
|
||||||
// "Today's Daily Puzzles" is the text in en.json
|
|
||||||
await expect(page.getByText("Today's Daily Puzzles")).toBeVisible();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
import { test, expect } from '@playwright/test';
|
|
||||||
|
|
||||||
test.describe('Authentication', () => {
|
|
||||||
test('Public pages should be accessible without login', async ({ page }) => {
|
|
||||||
await page.goto('/');
|
|
||||||
await expect(page).toHaveTitle(/Hördle/);
|
|
||||||
await expect(page.getByRole('button', { name: 'Start' })).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Admin page should be protected', async ({ page }) => {
|
|
||||||
await page.goto('/en/admin');
|
|
||||||
// We expect to see the Login form, NOT the dashboard content
|
|
||||||
await expect(page.getByPlaceholder('Password')).toBeVisible();
|
|
||||||
await expect(page.getByText('Manage Specials')).not.toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Admin login flow', async ({ page }) => {
|
|
||||||
// Navigate to admin login
|
|
||||||
await page.goto('/en/admin');
|
|
||||||
await page.addStyleTag({ content: 'nextjs-portal, #nextjs-dev-overlay, [data-nextjs-dev-overlay] { display: none !important; }' });
|
|
||||||
|
|
||||||
const passwordInput = page.getByPlaceholder('Password');
|
|
||||||
const usernameInput = page.getByPlaceholder('Username');
|
|
||||||
|
|
||||||
// Admin page should have password input (and maybe username if curator logic is shared, but usually just password)
|
|
||||||
// Adjust based on actual UI. admin/page.tsx has only password.
|
|
||||||
|
|
||||||
page.on('dialog', dialog => console.log(`Dialog message: ${dialog.message()}`));
|
|
||||||
|
|
||||||
await expect(passwordInput).toBeVisible();
|
|
||||||
await passwordInput.fill('admin123');
|
|
||||||
await page.getByRole('button', { name: 'Login' }).dispatchEvent('click');
|
|
||||||
await expect(page).toHaveURL(/\/(admin|en\/admin)/);
|
|
||||||
|
|
||||||
// Should now be on admin page
|
|
||||||
await expect(page.getByRole('heading', { name: 'Hördle Admin Dashboard' })).toBeVisible();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
import { test, expect } from '@playwright/test';
|
|
||||||
|
|
||||||
test.describe('Curator Dashboard', () => {
|
|
||||||
test('Curator login form should be displayed', async ({ page }) => {
|
|
||||||
await page.goto('/en/curator');
|
|
||||||
// Check for login form elements
|
|
||||||
await expect(page.getByPlaceholder('Username')).toBeVisible();
|
|
||||||
await expect(page.getByPlaceholder('Password')).toBeVisible();
|
|
||||||
await expect(page.getByRole('button', { name: 'Log in' })).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Curator login attempt (valid credentials)', async ({ page }) => {
|
|
||||||
await page.goto('/en/curator');
|
|
||||||
|
|
||||||
await page.getByPlaceholder('Username').fill('elpatron');
|
|
||||||
await page.getByPlaceholder('Password').fill('surf&4033');
|
|
||||||
await page.getByRole('button', { name: 'Log in' }).click();
|
|
||||||
|
|
||||||
// Should redirect to specials dashboard
|
|
||||||
await expect(page).toHaveURL(/\/curator\/specials/);
|
|
||||||
await expect(page.getByText('Curator Specials')).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Valid login cannot be tested without seed data in this environment
|
|
||||||
test('Curator login attempt (invalid credentials)', async ({ page }) => {
|
|
||||||
await page.goto('/en/curator');
|
|
||||||
await page.addStyleTag({ content: 'nextjs-portal { display: none !important; }' });
|
|
||||||
|
|
||||||
await page.getByPlaceholder('Username').fill('invalid_user');
|
|
||||||
await page.getByPlaceholder('Password').fill('invalid_pass');
|
|
||||||
await page.getByRole('button', { name: 'Log in' }).click();
|
|
||||||
|
|
||||||
// Should show error message
|
|
||||||
await expect(page.getByText('Login failed')).toBeVisible();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
import { test, expect } from '@playwright/test';
|
|
||||||
|
|
||||||
test.describe('Gameplay', () => {
|
|
||||||
test.beforeEach(async ({ page }) => {
|
|
||||||
// Capture console logs
|
|
||||||
page.on('console', msg => console.log(`BROWSER LOG: ${msg.text()}`));
|
|
||||||
|
|
||||||
await page.goto('/');
|
|
||||||
await page.addStyleTag({ content: 'nextjs-portal, #nextjs-dev-overlay, [data-nextjs-dev-overlay] { display: none !important; }' });
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Game loads correctly', async ({ page }) => {
|
|
||||||
await expect(page.locator('h1')).toBeVisible(); // Logo or main header
|
|
||||||
await expect(page.getByRole('button', { name: 'Start' })).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Can play audio', async ({ page }) => {
|
|
||||||
const startButton = page.getByRole('button', { name: 'Start' });
|
|
||||||
await startButton.click({ force: true });
|
|
||||||
|
|
||||||
// In CI/Headless, audio might not play, so button might not change to "Skip".
|
|
||||||
// We check that the button is still there and interactive, or changed.
|
|
||||||
await expect(page.getByRole('button', { name: /Start|Skip/ })).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Can submit a guess', async ({ page }) => {
|
|
||||||
// Mock the songs API to ensure we have data to search for
|
|
||||||
await page.route('/api/public-songs', async route => {
|
|
||||||
await route.fulfill({
|
|
||||||
status: 200,
|
|
||||||
contentType: 'application/json',
|
|
||||||
body: JSON.stringify([
|
|
||||||
{ id: 1, title: 'Test Song', artist: 'Test Artist' },
|
|
||||||
{ id: 2, title: 'Another Song', artist: 'Another Artist' }
|
|
||||||
])
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Reload page to pick up the mocked route if necessary,
|
|
||||||
// but easier to reload or just navigate again.
|
|
||||||
await page.reload();
|
|
||||||
|
|
||||||
const input = page.getByPlaceholder(/search/i);
|
|
||||||
await expect(input).toBeVisible();
|
|
||||||
|
|
||||||
await input.fill('Test Song');
|
|
||||||
|
|
||||||
// Wait for suggestions to appear
|
|
||||||
const suggestion = page.getByText('Test Artist');
|
|
||||||
// Click suggestion. Use dispatchEvent to bypass potential overlays/interception.
|
|
||||||
await page.locator('li.suggestion-item').first().dispatchEvent('click');
|
|
||||||
|
|
||||||
// Logic in GuessInput: handleSelect -> onGuess -> setQuery('').
|
|
||||||
// or matches the selection if we were just selecting.
|
|
||||||
// Logic in GuessInput: handleSelect -> onGuess -> setQuery('').
|
|
||||||
// So checking for empty value is correct.
|
|
||||||
await expect(input).toHaveValue('');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user