soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Added opaque join-token support across backend and frontend: new migration/model/service/endpoints, guest controllers now resolve tokens, and the demo seeder seeds a token. Tenant event details list/manage tokens with copy/revoke actions, and the guest PWA uses tokens end-to-end (routing, storage, uploads, achievements, etc.). Docs TODO updated to reflect completed steps.

Browse Source
This commit is contained in:
Codex Agent
2025-10-12 10:32:37 +02:00
parent d04e234ca0
commit 9394c3171e
73 changed files with 3277 additions and 911 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
resources/js/admin/pages/EventMembersPage.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { ArrowLeft, Loader2, Mail, Sparkles, Trash2, Users } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
@@ -35,6 +36,11 @@ const emptyInvite: InviteForm = {
};
export default function EventMembersPage() {
const { t, i18n } = useTranslation(['management', 'dashboard']);
const locale = React.useMemo(
() => (i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE'),
[i18n.language]
);
const params = useParams<{ slug?: string }>();
const [searchParams] = useSearchParams();
const slug = params.slug ?? searchParams.get('slug') ?? null;
@@ -48,9 +54,52 @@ export default function EventMembersPage() {
const [inviting, setInviting] = React.useState(false);
const [membersUnavailable, setMembersUnavailable] = React.useState(false);
const formatDate = React.useCallback(
(value: string | null | undefined) => {
if (!value) return '--';
const date = new Date(value);
if (Number.isNaN(date.getTime())) return '--';
return date.toLocaleDateString(locale, { day: '2-digit', month: 'short', year: 'numeric' });
},
[locale]
);
const roleLabels = React.useMemo(
() => ({
tenant_admin: t('management.members.roles.tenantAdmin', 'Tenant-Admin'),
member: t('management.members.roles.member', 'Mitglied'),
guest: t('management.members.roles.guest', 'Gast'),
}),
[t]
);
const statusLabels = React.useMemo(
() => ({
published: t('management.members.statuses.published', 'Veröffentlicht'),
draft: t('management.members.statuses.draft', 'Entwurf'),
active: t('management.members.statuses.active', 'Aktiv'),
}),
[t]
);
const resolveRole = React.useCallback(
(role: string) => roleLabels[role as keyof typeof roleLabels] ?? role,
[roleLabels]
);
const resolveMemberStatus = React.useCallback(
(status?: string | null) => {
if (!status) {
return statusLabels.active;
}
return statusLabels[status as keyof typeof statusLabels] ?? status;
},
[statusLabels]
);
React.useEffect(() => {
if (!slug) {
setError('Kein Event-Slug angegeben.');
setError(t('management.members.errors.missingSlug', 'Kein Event-Slug angegeben.'));
setLoading(false);
return;
}
@@ -71,7 +120,7 @@ export default function EventMembersPage() {
if (err instanceof Error && err.message.includes('Mitgliederverwaltung')) {
setMembersUnavailable(true);
} else if (!isAuthError(err)) {
setError('Mitglieder konnten nicht geladen werden.');
setError(t('management.members.errors.load', 'Mitglieder konnten nicht geladen werden.'));
}
} finally {
if (!cancelled) {
@@ -83,13 +132,13 @@ export default function EventMembersPage() {
return () => {
cancelled = true;
};
}, [slug]);
}, [slug, t]);
async function handleInvite(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
if (!slug) return;
if (!invite.email.trim()) {
setError('Bitte gib eine E-Mail-Adresse ein.');
setError(t('management.members.errors.emailRequired', 'Bitte gib eine E-Mail-Adresse ein.'));
return;
}
setInviting(true);
@@ -106,7 +155,7 @@ export default function EventMembersPage() {
if (err instanceof Error && err.message.includes('Mitgliederverwaltung')) {
setMembersUnavailable(true);
} else if (!isAuthError(err)) {
setError('Einladung konnte nicht verschickt werden.');
setError(t('management.members.errors.invite', 'Einladung konnte nicht verschickt werden.'));
}
} finally {
setInviting(false);
@@ -121,7 +170,7 @@ export default function EventMembersPage() {
setMembers((prev) => prev.filter((entry) => entry.id !== member.id));
} catch (err) {
if (!isAuthError(err)) {
setError('Mitglied konnte nicht entfernt werden.');
setError(t('management.members.errors.remove', 'Mitglied konnte nicht entfernt werden.'));
}
}
}
@@ -129,19 +178,19 @@ export default function EventMembersPage() {
const actions = (
<Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)} className="border-pink-200 text-pink-600">
<ArrowLeft className="h-4 w-4" />
Zurueck zur Uebersicht
{t('management.members.actions.back', 'Zurück zur Übersicht')}
</Button>
);
return (
<AdminLayout
title="Event Mitglieder"
subtitle="Verwalte Moderatoren, Admins und Helfer fuer dieses Event."
title={t('management.members.title', 'Event-Mitglieder')}
subtitle={t('management.members.subtitle', 'Verwalte Moderatoren, Admins und Helfer für dieses Event.')}
actions={actions}
>
{error && (
<Alert variant="destructive">
<AlertTitle>Fehler</AlertTitle>
<AlertTitle>{t('dashboard.alerts.errorTitle', 'Fehler')}</AlertTitle>
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
@@ -150,34 +199,38 @@ export default function EventMembersPage() {
<MembersSkeleton />
) : !event ? (
<Alert variant="destructive">
<AlertTitle>Event nicht gefunden</AlertTitle>
<AlertDescription>Bitte kehre zur Eventliste zurueck.</AlertDescription>
<AlertTitle>{t('management.members.alerts.notFoundTitle', 'Event nicht gefunden')}</AlertTitle>
<AlertDescription>{t('management.members.alerts.notFoundDescription', 'Bitte kehre zur Eventliste zurück.')}</AlertDescription>
</Alert>
) : (
<>
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
<CardHeader>
<CardTitle className="text-xl text-slate-900">{renderName(event.name)}</CardTitle>
<CardTitle className="text-xl text-slate-900">{renderName(event.name, t)}</CardTitle>
<CardDescription className="text-sm text-slate-600">
Status: {event.status === 'published' ? 'Veroeffentlicht' : 'Entwurf'}
{t('management.members.eventStatus', {
status: event.status === 'published' ? statusLabels.published : statusLabels.draft,
})}
</CardDescription>
</CardHeader>
<CardContent className="grid gap-6 lg:grid-cols-2">
<section className="space-y-3">
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
<Sparkles className="h-4 w-4 text-pink-500" />
Mitglieder
{t('management.members.sections.list.title', 'Mitglieder')}
</h3>
{membersUnavailable ? (
<Alert>
<AlertTitle>Feature noch nicht aktiviert</AlertTitle>
<AlertTitle>{t('management.members.alerts.lockedTitle', 'Feature noch nicht aktiviert')}</AlertTitle>
<AlertDescription>
Die Mitgliederverwaltung ist fuer dieses Event noch nicht verfuegbar. Bitte kontaktiere den Support,
um das Feature freizuschalten.
{t(
'management.members.alerts.lockedDescription',
'Die Mitgliederverwaltung ist für dieses Event noch nicht verfügbar. Bitte kontaktiere den Support, um das Feature freizuschalten.'
)}
</AlertDescription>
</Alert>
) : members.length === 0 ? (
<EmptyState message="Noch keine Mitglieder eingeladen." />
<EmptyState message={t('management.members.sections.list.empty', 'Noch keine Mitglieder eingeladen.')} />
) : (
<div className="space-y-2">
{members.map((member) => (
@@ -189,13 +242,23 @@ export default function EventMembersPage() {
<p className="text-sm font-semibold text-slate-900">{member.name}</p>
<p className="text-xs text-slate-600">{member.email}</p>
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
<span>Status: {member.status ?? 'aktiv'}</span>
{member.joined_at && <span>Beigetreten: {formatDate(member.joined_at)}</span>}
<span>
{t('management.members.labels.status', {
status: resolveMemberStatus(member.status),
})}
</span>
{member.joined_at && (
<span>
{t('management.members.labels.joined', {
date: formatDate(member.joined_at),
})}
</span>
)}
</div>
</div>
<div className="flex items-center gap-2">
<Badge variant="outline" className="border-pink-200 text-pink-600">
{mapRole(member.role)}
{resolveRole(member.role)}
</Badge>
<Button variant="outline" size="sm" onClick={() => void handleRemove(member)}>
<Trash2 className="h-4 w-4" />
@@ -210,48 +273,48 @@ export default function EventMembersPage() {
<section className="space-y-3">
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
<Users className="h-4 w-4 text-emerald-500" />
Neues Mitglied einladen
{t('management.members.sections.invite.title', 'Neues Mitglied einladen')}
</h3>
<form className="space-y-3 rounded-2xl border border-emerald-100 bg-white/90 p-4 shadow-sm" onSubmit={handleInvite}>
<div className="space-y-2">
<Label htmlFor="invite-email">E-Mail</Label>
<Label htmlFor="invite-email">{t('management.members.form.emailLabel', 'E-Mail')}</Label>
<Input
id="invite-email"
type="email"
placeholder="person@example.com"
placeholder={t('management.members.form.emailPlaceholder', 'person@example.com')}
value={invite.email}
onChange={(event) => setInvite((prev) => ({ ...prev, email: event.target.value }))}
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="invite-name">Name (optional)</Label>
<Label htmlFor="invite-name">{t('management.members.form.nameLabel', 'Name (optional)')}</Label>
<Input
id="invite-name"
placeholder="Name"
placeholder={t('management.members.form.namePlaceholder', 'Name')}
value={invite.name}
onChange={(event) => setInvite((prev) => ({ ...prev, name: event.target.value }))}
/>
</div>
<div className="space-y-2">
<Label htmlFor="invite-role">Rolle</Label>
<Label htmlFor="invite-role">{t('management.members.form.roleLabel', 'Rolle')}</Label>
<Select
value={invite.role}
onValueChange={(value) => setInvite((prev) => ({ ...prev, role: value }))}
>
<SelectTrigger id="invite-role">
<SelectValue placeholder="Rolle waehlen" />
<SelectValue placeholder={t('management.members.form.rolePlaceholder', 'Rolle wählen')} />
</SelectTrigger>
<SelectContent>
<SelectItem value="tenant_admin">Tenant-Admin</SelectItem>
<SelectItem value="member">Mitglied</SelectItem>
<SelectItem value="guest">Gast</SelectItem>
<SelectItem value="tenant_admin">{roleLabels.tenant_admin}</SelectItem>
<SelectItem value="member">{roleLabels.member}</SelectItem>
<SelectItem value="guest">{roleLabels.guest}</SelectItem>
</SelectContent>
</Select>
</div>
<Button type="submit" className="w-full" disabled={inviting}>
{inviting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Mail className="h-4 w-4" />}
{' '}Einladung senden
{' '}{t('management.members.form.submit', 'Einladung senden')}
</Button>
</form>
</section>
@@ -281,29 +344,9 @@ function MembersSkeleton() {
);
}
function renderName(name: TenantEvent['name']): string {
function renderName(name: TenantEvent['name'], translate: (key: string, defaultValue: string) => string): string {
if (typeof name === 'string') {
return name;
}
return name?.de ?? name?.en ?? Object.values(name ?? {})[0] ?? 'Unbenanntes Event';
}
function mapRole(role: string): string {
switch (role) {
case 'tenant_admin':
return 'Tenant-Admin';
case 'member':
return 'Mitglied';
case 'guest':
return 'Gast';
default:
return role;
}
}
function formatDate(value: string | null | undefined): string {
if (!value) return '--';
const date = new Date(value);
if (Number.isNaN(date.getTime())) return '--';
return date.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', year: 'numeric' });
return name?.de ?? name?.en ?? Object.values(name ?? {})[0] ?? translate('management.members.events.untitled', 'Unbenanntes Event');
}