Weboberflaeche mit Spielerkonto, Import und Verwaltung
Die Spieler-Detailseite beantwortet die Kernfrage direkt: drei grosse Zaehler, rot sobald ein Topf im Minus ist, darunter ob ein neuer CC oder ein Redesign gerade moeglich ist. Inaktive CCs zeigen ihren Grund und bieten genau die passende Aktion an - gratis reaktivieren oder bezahlt. Beim Redesign steht der Kulanz-Topf an erster Stelle, damit er zuerst aufgebraucht wird. Der Import fuehrt ueber Spaltenzuordnung und Vorschau; gebucht wird erst nach Bestaetigung.
This commit is contained in:
@@ -0,0 +1,203 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Notice from '../components/Notice';
|
||||
import { ApiError, api } from '../lib/api';
|
||||
import { useSession } from '../lib/session';
|
||||
|
||||
export default function Account() {
|
||||
const { user, refresh } = useSession();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [current, setCurrent] = useState('');
|
||||
const [next, setNext] = useState('');
|
||||
const [repeat, setRepeat] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [flash, setFlash] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const [totpSetup, setTotpSetup] = useState<{ qr: string; secret: string } | null>(null);
|
||||
const [totpCode, setTotpCode] = useState('');
|
||||
|
||||
const changePassword = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
|
||||
if (next !== repeat) {
|
||||
setError('Die beiden neuen Passwoerter stimmen nicht ueberein');
|
||||
return;
|
||||
}
|
||||
|
||||
setBusy(true);
|
||||
try {
|
||||
await api('/api/account/password', {
|
||||
method: 'POST',
|
||||
body: { currentPassword: current, newPassword: next },
|
||||
});
|
||||
setCurrent('');
|
||||
setNext('');
|
||||
setRepeat('');
|
||||
await refresh();
|
||||
setFlash('Passwort geaendert. Andere Sitzungen wurden beendet.');
|
||||
if (user?.mustChangePassword) navigate('/', { replace: true });
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : 'Aenderung fehlgeschlagen');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const startTotp = async () => {
|
||||
setError(null);
|
||||
try {
|
||||
const result = await api<{ qr: string; secret: string }>('/api/account/totp/setup', {
|
||||
method: 'POST',
|
||||
body: {},
|
||||
});
|
||||
setTotpSetup(result);
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : 'Einrichtung fehlgeschlagen');
|
||||
}
|
||||
};
|
||||
|
||||
const enableTotp = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
await api('/api/account/totp/enable', { method: 'POST', body: { code: totpCode } });
|
||||
setTotpSetup(null);
|
||||
setTotpCode('');
|
||||
await refresh();
|
||||
setFlash('Zwei-Faktor-Anmeldung ist aktiv.');
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : 'Code wurde nicht akzeptiert');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const disableTotp = async () => {
|
||||
const password = window.prompt('Zum Deaktivieren bitte das Passwort eingeben:');
|
||||
if (!password) return;
|
||||
setError(null);
|
||||
try {
|
||||
await api('/api/account/totp/disable', { method: 'POST', body: { password } });
|
||||
await refresh();
|
||||
setFlash('Zwei-Faktor-Anmeldung wurde deaktiviert.');
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : 'Deaktivieren fehlgeschlagen');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page narrow">
|
||||
<div className="page-head">
|
||||
<h1>Mein Konto</h1>
|
||||
</div>
|
||||
|
||||
{user?.mustChangePassword && (
|
||||
<Notice kind="warn">
|
||||
Dieses Konto verwendet noch ein vergebenes Erstpasswort. Bitte jetzt aendern — die
|
||||
uebrigen Seiten sind bis dahin gesperrt.
|
||||
</Notice>
|
||||
)}
|
||||
|
||||
{error && <Notice kind="error" onDismiss={() => setError(null)}>{error}</Notice>}
|
||||
{flash && <Notice kind="success" onDismiss={() => setFlash(null)}>{flash}</Notice>}
|
||||
|
||||
<section className="block">
|
||||
<h2>Passwort aendern</h2>
|
||||
<form onSubmit={changePassword}>
|
||||
<label htmlFor="current">Aktuelles Passwort</label>
|
||||
<input
|
||||
id="current"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
value={current}
|
||||
onChange={(event) => setCurrent(event.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<label htmlFor="next">Neues Passwort</label>
|
||||
<input
|
||||
id="next"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={next}
|
||||
onChange={(event) => setNext(event.target.value)}
|
||||
required
|
||||
/>
|
||||
<p className="muted small">
|
||||
Mindestens 12 Zeichen, Gross- und Kleinbuchstaben sowie eine Ziffer.
|
||||
</p>
|
||||
|
||||
<label htmlFor="repeat">Neues Passwort wiederholen</label>
|
||||
<input
|
||||
id="repeat"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={repeat}
|
||||
onChange={(event) => setRepeat(event.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<button type="submit" className="btn btn-primary" disabled={busy}>
|
||||
{busy ? 'Speichere …' : 'Passwort aendern'}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="block">
|
||||
<h2>Zwei-Faktor-Anmeldung</h2>
|
||||
|
||||
{user?.totpEnabled ? (
|
||||
<>
|
||||
<Notice kind="success">Zwei-Faktor-Anmeldung ist fuer dieses Konto aktiv.</Notice>
|
||||
<button type="button" className="btn btn-danger" onClick={() => void disableTotp()}>
|
||||
Deaktivieren
|
||||
</button>
|
||||
</>
|
||||
) : totpSetup ? (
|
||||
<form onSubmit={enableTotp}>
|
||||
<p className="muted">
|
||||
QR-Code in der Authenticator-App scannen und den angezeigten Code eintragen.
|
||||
</p>
|
||||
<img className="qr" src={totpSetup.qr} alt="QR-Code zur Einrichtung" />
|
||||
<p className="muted small">
|
||||
Falls Scannen nicht geht, Schluessel manuell eintragen:{' '}
|
||||
<code className="mono">{totpSetup.secret}</code>
|
||||
</p>
|
||||
|
||||
<label htmlFor="totp">Code aus der App</label>
|
||||
<input
|
||||
id="totp"
|
||||
inputMode="numeric"
|
||||
value={totpCode}
|
||||
onChange={(event) => setTotpCode(event.target.value)}
|
||||
maxLength={10}
|
||||
required
|
||||
/>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="button" className="btn btn-ghost" onClick={() => setTotpSetup(null)}>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={busy}>
|
||||
Aktivieren
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<>
|
||||
<p className="muted">
|
||||
Schuetzt das Konto zusaetzlich mit einem Einmalcode. Fuer Administratoren empfohlen.
|
||||
</p>
|
||||
<button type="button" className="btn" onClick={() => void startTotp()}>
|
||||
Einrichten
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,507 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import Modal from '../components/Modal';
|
||||
import Notice from '../components/Notice';
|
||||
import { ApiError, api } from '../lib/api';
|
||||
import { formatDate } from '../lib/format';
|
||||
import { useSession } from '../lib/session';
|
||||
import type { AdminUser, AuditEntry, ProductMapping, ProductTarget, Role } from '../lib/types';
|
||||
|
||||
type Tab = 'users' | 'mappings' | 'audit';
|
||||
|
||||
const TARGET_LABEL: Record<ProductTarget, string> = {
|
||||
CC_PACKAGE: 'CC-Paket',
|
||||
REDESIGN_PACKAGE: 'Redesign-Paket',
|
||||
IGNORE: 'Ignorieren',
|
||||
};
|
||||
|
||||
export default function Admin() {
|
||||
const [tab, setTab] = useState<Tab>('users');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [flash, setFlash] = useState<string | null>(null);
|
||||
|
||||
const notify = (message: string) => {
|
||||
setFlash(message);
|
||||
window.setTimeout(() => setFlash(null), 4000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-head">
|
||||
<h1>Verwaltung</h1>
|
||||
</div>
|
||||
|
||||
<div className="tabs">
|
||||
<button
|
||||
type="button"
|
||||
className={tab === 'users' ? 'tab is-active' : 'tab'}
|
||||
onClick={() => setTab('users')}
|
||||
>
|
||||
Nutzer
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={tab === 'mappings' ? 'tab is-active' : 'tab'}
|
||||
onClick={() => setTab('mappings')}
|
||||
>
|
||||
Produkt-Mappings
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={tab === 'audit' ? 'tab is-active' : 'tab'}
|
||||
onClick={() => setTab('audit')}
|
||||
>
|
||||
Audit-Log
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && <Notice kind="error" onDismiss={() => setError(null)}>{error}</Notice>}
|
||||
{flash && <Notice kind="success" onDismiss={() => setFlash(null)}>{flash}</Notice>}
|
||||
|
||||
{tab === 'users' && <UsersTab onError={setError} onDone={notify} />}
|
||||
{tab === 'mappings' && <MappingsTab onError={setError} onDone={notify} />}
|
||||
{tab === 'audit' && <AuditTab onError={setError} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface TabProps {
|
||||
onError: (message: string) => void;
|
||||
onDone: (message: string) => void;
|
||||
}
|
||||
|
||||
function UsersTab({ onError, onDone }: TabProps) {
|
||||
const { user: me } = useSession();
|
||||
const [users, setUsers] = useState<AdminUser[]>([]);
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const result = await api<{ items: AdminUser[] }>('/api/admin/users');
|
||||
setUsers(result.items);
|
||||
} catch (err) {
|
||||
onError(err instanceof ApiError ? err.message : 'Laden fehlgeschlagen');
|
||||
}
|
||||
}, [onError]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
const act = async (action: () => Promise<unknown>, message: string) => {
|
||||
try {
|
||||
await action();
|
||||
await load();
|
||||
onDone(message);
|
||||
} catch (err) {
|
||||
onError(err instanceof ApiError ? err.message : 'Aktion fehlgeschlagen');
|
||||
}
|
||||
};
|
||||
|
||||
const resetPassword = (target: AdminUser) => {
|
||||
const password = window.prompt(
|
||||
`Neues Passwort fuer "${target.username}" (min. 12 Zeichen, Gross/Klein, Ziffer):`,
|
||||
);
|
||||
if (!password) return;
|
||||
void act(
|
||||
() =>
|
||||
api(`/api/admin/users/${target.id}/reset-password`, {
|
||||
method: 'POST',
|
||||
body: { newPassword: password },
|
||||
}),
|
||||
`Passwort fuer "${target.username}" gesetzt. Muss beim naechsten Login geaendert werden.`,
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="block">
|
||||
<div className="block-head">
|
||||
<h2>Nutzer</h2>
|
||||
<button type="button" className="btn btn-primary" onClick={() => setCreating(true)}>
|
||||
Nutzer anlegen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Notice kind="info">
|
||||
Es gibt keine oeffentliche Registrierung. Konten werden ausschliesslich hier angelegt.
|
||||
</Notice>
|
||||
|
||||
<div className="table-wrap">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Benutzername</th>
|
||||
<th>Rolle</th>
|
||||
<th>Status</th>
|
||||
<th>2FA</th>
|
||||
<th>Letzter Login</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((row) => (
|
||||
<tr key={row.id} className={row.isActive ? undefined : 'is-skipped'}>
|
||||
<td>
|
||||
<strong>{row.username}</strong>
|
||||
{row.id === me?.id && <span className="badge">du</span>}
|
||||
{row.mustChangePassword && <span className="badge badge-paid">Erstpasswort</span>}
|
||||
</td>
|
||||
<td>
|
||||
<select
|
||||
value={row.role}
|
||||
disabled={row.id === me?.id}
|
||||
onChange={(event) =>
|
||||
void act(
|
||||
() =>
|
||||
api(`/api/admin/users/${row.id}`, {
|
||||
method: 'PATCH',
|
||||
body: { role: event.target.value as Role },
|
||||
}),
|
||||
`Rolle von "${row.username}" geaendert.`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<option value="VIEWER">Viewer</option>
|
||||
<option value="EDITOR">Editor</option>
|
||||
<option value="ADMIN">Admin</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>{row.isActive ? 'aktiv' : 'gesperrt'}</td>
|
||||
<td className="muted">{row.totpEnabled ? 'ja' : 'nein'}</td>
|
||||
<td className="muted small">{formatDate(row.lastLoginAt)}</td>
|
||||
<td className="row-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-tiny btn-ghost"
|
||||
onClick={() => resetPassword(row)}
|
||||
>
|
||||
Passwort
|
||||
</button>
|
||||
{row.id !== me?.id && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-tiny btn-ghost"
|
||||
onClick={() =>
|
||||
void act(
|
||||
() =>
|
||||
api(`/api/admin/users/${row.id}`, {
|
||||
method: 'PATCH',
|
||||
body: { isActive: !row.isActive },
|
||||
}),
|
||||
row.isActive
|
||||
? `"${row.username}" gesperrt.`
|
||||
: `"${row.username}" entsperrt.`,
|
||||
)
|
||||
}
|
||||
>
|
||||
{row.isActive ? 'Sperren' : 'Entsperren'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-tiny btn-danger"
|
||||
onClick={() => {
|
||||
if (!window.confirm(`Konto "${row.username}" wirklich loeschen?`)) return;
|
||||
void act(
|
||||
() => api(`/api/admin/users/${row.id}`, { method: 'DELETE' }),
|
||||
`"${row.username}" geloescht.`,
|
||||
);
|
||||
}}
|
||||
>
|
||||
Loeschen
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{creating && (
|
||||
<CreateUserModal
|
||||
onClose={() => setCreating(false)}
|
||||
onCreated={(username) => {
|
||||
setCreating(false);
|
||||
void load();
|
||||
onDone(`Konto "${username}" angelegt.`);
|
||||
}}
|
||||
onError={onError}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CreateUserModal({
|
||||
onClose,
|
||||
onCreated,
|
||||
onError,
|
||||
}: {
|
||||
onClose: () => void;
|
||||
onCreated: (username: string) => void;
|
||||
onError: (message: string) => void;
|
||||
}) {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [role, setRole] = useState<Role>('EDITOR');
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const submit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
setBusy(true);
|
||||
try {
|
||||
await api('/api/admin/users', { method: 'POST', body: { username, password, role } });
|
||||
onCreated(username);
|
||||
} catch (err) {
|
||||
onError(err instanceof ApiError ? err.message : 'Anlegen fehlgeschlagen');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal title="Nutzer anlegen" onClose={onClose}>
|
||||
<form onSubmit={submit}>
|
||||
<label htmlFor="new-username">Benutzername</label>
|
||||
<input
|
||||
id="new-username"
|
||||
value={username}
|
||||
onChange={(event) => setUsername(event.target.value)}
|
||||
autoFocus
|
||||
required
|
||||
/>
|
||||
|
||||
<label htmlFor="new-password">Erstpasswort</label>
|
||||
<input
|
||||
id="new-password"
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
required
|
||||
/>
|
||||
<p className="muted small">
|
||||
Min. 12 Zeichen, Gross- und Kleinbuchstaben, eine Ziffer. Muss beim ersten Login
|
||||
geaendert werden.
|
||||
</p>
|
||||
|
||||
<label htmlFor="new-role">Rolle</label>
|
||||
<select
|
||||
id="new-role"
|
||||
value={role}
|
||||
onChange={(event) => setRole(event.target.value as Role)}
|
||||
>
|
||||
<option value="VIEWER">Viewer — nur lesen</option>
|
||||
<option value="EDITOR">Editor — Spieler, Guthaben, CCs</option>
|
||||
<option value="ADMIN">Admin — alles inkl. Import und Nutzer</option>
|
||||
</select>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="button" className="btn btn-ghost" onClick={onClose}>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={busy}>
|
||||
{busy ? 'Lege an …' : 'Anlegen'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function MappingsTab({ onError, onDone }: TabProps) {
|
||||
const [items, setItems] = useState<ProductMapping[]>([]);
|
||||
const [pattern, setPattern] = useState('');
|
||||
const [target, setTarget] = useState<ProductTarget>('CC_PACKAGE');
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const result = await api<{ items: ProductMapping[] }>('/api/admin/product-mappings');
|
||||
setItems(result.items);
|
||||
} catch (err) {
|
||||
onError(err instanceof ApiError ? err.message : 'Laden fehlgeschlagen');
|
||||
}
|
||||
}, [onError]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
const add = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
try {
|
||||
await api('/api/admin/product-mappings', {
|
||||
method: 'POST',
|
||||
body: { matchPattern: pattern, target },
|
||||
});
|
||||
setPattern('');
|
||||
await load();
|
||||
onDone('Mapping angelegt.');
|
||||
} catch (err) {
|
||||
onError(err instanceof ApiError ? err.message : 'Anlegen fehlgeschlagen');
|
||||
}
|
||||
};
|
||||
|
||||
const remove = async (row: ProductMapping) => {
|
||||
if (!window.confirm(`Mapping "${row.matchPattern}" loeschen?`)) return;
|
||||
try {
|
||||
await api(`/api/admin/product-mappings/${row.id}`, { method: 'DELETE' });
|
||||
await load();
|
||||
onDone('Mapping geloescht.');
|
||||
} catch (err) {
|
||||
onError(err instanceof ApiError ? err.message : 'Loeschen fehlgeschlagen');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="block">
|
||||
<h2>Produkt-Mappings</h2>
|
||||
<Notice kind="info">
|
||||
Beim Import wird der Produktname gegen diese Muster geprueft (Teiltreffer, Gross- und
|
||||
Kleinschreibung egal). Das erste passende Muster mit der niedrigsten Prioritaet gewinnt.
|
||||
</Notice>
|
||||
|
||||
<form className="inline-form" onSubmit={add}>
|
||||
<input
|
||||
placeholder="Muster, z. B. cc-paket"
|
||||
value={pattern}
|
||||
onChange={(event) => setPattern(event.target.value)}
|
||||
required
|
||||
/>
|
||||
<select value={target} onChange={(event) => setTarget(event.target.value as ProductTarget)}>
|
||||
<option value="CC_PACKAGE">CC-Paket</option>
|
||||
<option value="REDESIGN_PACKAGE">Redesign-Paket</option>
|
||||
<option value="IGNORE">Ignorieren</option>
|
||||
</select>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Hinzufuegen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="table-wrap">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Muster</th>
|
||||
<th>Bedeutung</th>
|
||||
<th className="num">Prioritaet</th>
|
||||
<th>Aktiv</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((row) => (
|
||||
<tr key={row.id} className={row.isActive ? undefined : 'is-skipped'}>
|
||||
<td className="mono">{row.matchPattern}</td>
|
||||
<td>{TARGET_LABEL[row.target]}</td>
|
||||
<td className="num muted">{row.priority}</td>
|
||||
<td className="muted">{row.isActive ? 'ja' : 'nein'}</td>
|
||||
<td className="row-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-tiny btn-danger"
|
||||
onClick={() => void remove(row)}
|
||||
>
|
||||
Loeschen
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{items.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="empty">
|
||||
Noch keine Mappings.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function AuditTab({ onError }: { onError: (message: string) => void }) {
|
||||
const [items, setItems] = useState<AuditEntry[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [filter, setFilter] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
const timer = setTimeout(async () => {
|
||||
try {
|
||||
const params = new URLSearchParams({ take: '150' });
|
||||
if (filter) params.set('action', filter);
|
||||
const result = await api<{ items: AuditEntry[]; total: number }>(
|
||||
`/api/admin/audit?${params}`,
|
||||
{ signal: controller.signal },
|
||||
);
|
||||
setItems(result.items);
|
||||
setTotal(result.total);
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||||
onError(err instanceof ApiError ? err.message : 'Laden fehlgeschlagen');
|
||||
}
|
||||
}, 250);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
controller.abort();
|
||||
};
|
||||
}, [filter, onError]);
|
||||
|
||||
return (
|
||||
<section className="block">
|
||||
<h2>Audit-Log</h2>
|
||||
|
||||
<input
|
||||
className="search"
|
||||
placeholder="Nach Aktion filtern, z. B. credit. oder character."
|
||||
value={filter}
|
||||
onChange={(event) => setFilter(event.target.value)}
|
||||
/>
|
||||
|
||||
<div className="table-wrap scroll">
|
||||
<table className="table small">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Zeitpunkt</th>
|
||||
<th>Wer</th>
|
||||
<th>Aktion</th>
|
||||
<th>Ziel</th>
|
||||
<th>Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((entry) => (
|
||||
<tr key={entry.id}>
|
||||
<td className="muted small">{formatDate(entry.createdAt)}</td>
|
||||
<td>{entry.actor?.username ?? entry.actorName ?? '—'}</td>
|
||||
<td className="mono">{entry.action}</td>
|
||||
<td className="muted">
|
||||
{entry.targetType}
|
||||
{entry.targetId ? ` #${entry.targetId}` : ''}
|
||||
</td>
|
||||
<td className="muted small details">
|
||||
{entry.details ? JSON.stringify(entry.details) : '—'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{items.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="empty">
|
||||
Keine Eintraege.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{total > items.length && (
|
||||
<p className="muted">
|
||||
{items.length} von {total} Eintraegen angezeigt.
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Modal from '../components/Modal';
|
||||
import Notice from '../components/Notice';
|
||||
import { ApiError, api } from '../lib/api';
|
||||
import { useSession } from '../lib/session';
|
||||
import type { PlayerSummary } from '../lib/types';
|
||||
|
||||
interface SearchResult {
|
||||
total: number;
|
||||
items: PlayerSummary[];
|
||||
}
|
||||
|
||||
function Counter({ value, title }: { value: number; title: string }) {
|
||||
return (
|
||||
<span className={`mini-counter${value < 0 ? ' is-negative' : ''}`} title={title}>
|
||||
{value}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Dashboard() {
|
||||
const { can } = useSession();
|
||||
const [query, setQuery] = useState('');
|
||||
const [result, setResult] = useState<SearchResult>({ total: 0, items: [] });
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
const load = useCallback(async (search: string, signal?: AbortSignal) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = new URLSearchParams({ q: search, take: '100' });
|
||||
const data = await api<SearchResult>(`/api/players?${params}`, signal ? { signal } : {});
|
||||
setResult(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||||
setError(err instanceof ApiError ? err.message : 'Laden fehlgeschlagen');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Tippen entprellen, damit nicht jeder Anschlag eine Anfrage ausloest.
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
const timer = setTimeout(() => void load(query, controller.signal), 250);
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
controller.abort();
|
||||
};
|
||||
}, [query, load]);
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-head">
|
||||
<h1>Spieler</h1>
|
||||
{can('EDITOR') && (
|
||||
<button type="button" className="btn btn-primary" onClick={() => setCreating(true)}>
|
||||
Spieler anlegen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
className="search"
|
||||
type="search"
|
||||
placeholder="Name, SteamID oder Forum-Name suchen …"
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
{error && <Notice kind="error">{error}</Notice>}
|
||||
|
||||
<div className="table-wrap">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Spieler</th>
|
||||
<th>SteamID</th>
|
||||
<th className="num">CC</th>
|
||||
<th className="num">Redesign</th>
|
||||
<th className="num">Kulanz</th>
|
||||
<th className="num">Aktive CCs</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{result.items.map((player) => (
|
||||
<tr key={player.id}>
|
||||
<td>
|
||||
<Link to={`/players/${player.id}`} className="link-strong">
|
||||
{player.displayName}
|
||||
</Link>
|
||||
{player.forumName && <span className="muted"> · {player.forumName}</span>}
|
||||
</td>
|
||||
<td className="mono muted">{player.steamId ?? '—'}</td>
|
||||
<td className="num">
|
||||
<Counter value={player.balances.CC} title="CC-Guthaben" />
|
||||
</td>
|
||||
<td className="num">
|
||||
<Counter value={player.balances.REDESIGN_PAID} title="Redesign-Guthaben" />
|
||||
</td>
|
||||
<td className="num">
|
||||
<Counter value={player.balances.REDESIGN_KULANZ} title="Kulanz-Guthaben" />
|
||||
</td>
|
||||
<td className="num muted">
|
||||
{player.activeCharacterCount} / {player.characterCount}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
{!loading && result.items.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={6} className="empty">
|
||||
{query ? 'Kein Treffer.' : 'Noch keine Spieler erfasst.'}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{loading && <p className="muted">Lade …</p>}
|
||||
{!loading && result.total > result.items.length && (
|
||||
<p className="muted">
|
||||
{result.items.length} von {result.total} angezeigt — Suche eingrenzen.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{creating && (
|
||||
<CreatePlayerModal
|
||||
onClose={() => setCreating(false)}
|
||||
onCreated={() => {
|
||||
setCreating(false);
|
||||
void load(query);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CreatePlayerModal({ onClose, onCreated }: { onClose: () => void; onCreated: () => void }) {
|
||||
const [displayName, setDisplayName] = useState('');
|
||||
const [steamId, setSteamId] = useState('');
|
||||
const [forumName, setForumName] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const submit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
await api('/api/players', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
displayName,
|
||||
steamId: steamId.trim() || null,
|
||||
forumName: forumName.trim() || null,
|
||||
},
|
||||
});
|
||||
onCreated();
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : 'Anlegen fehlgeschlagen');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal title="Spieler anlegen" onClose={onClose}>
|
||||
<form onSubmit={submit}>
|
||||
{error && <Notice kind="error">{error}</Notice>}
|
||||
|
||||
<label htmlFor="displayName">Anzeigename</label>
|
||||
<input
|
||||
id="displayName"
|
||||
value={displayName}
|
||||
onChange={(event) => setDisplayName(event.target.value)}
|
||||
autoFocus
|
||||
required
|
||||
/>
|
||||
|
||||
<label htmlFor="steamId">SteamID (optional)</label>
|
||||
<input id="steamId" value={steamId} onChange={(event) => setSteamId(event.target.value)} />
|
||||
|
||||
<label htmlFor="forumName">Forum-Name (optional)</label>
|
||||
<input
|
||||
id="forumName"
|
||||
value={forumName}
|
||||
onChange={(event) => setForumName(event.target.value)}
|
||||
/>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="button" className="btn btn-ghost" onClick={onClose}>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={busy}>
|
||||
{busy ? 'Lege an …' : 'Anlegen'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,388 @@
|
||||
import { useState } from 'react';
|
||||
import Notice from '../components/Notice';
|
||||
import { ApiError, api, uploadFile } from '../lib/api';
|
||||
import { PLAN_LABEL, formatDate } from '../lib/format';
|
||||
import type { ImportPlan, ImportRecord } from '../lib/types';
|
||||
|
||||
interface UploadResult {
|
||||
importId: number;
|
||||
columns: string[];
|
||||
rowCount: number;
|
||||
sample: Record<string, string>[];
|
||||
}
|
||||
|
||||
interface MappingForm {
|
||||
playerKey: string;
|
||||
playerName: string;
|
||||
product: string;
|
||||
orderId: string;
|
||||
purchasedAt: string;
|
||||
createMissingPlayers: boolean;
|
||||
}
|
||||
|
||||
const EMPTY_MAPPING: MappingForm = {
|
||||
playerKey: '',
|
||||
playerName: '',
|
||||
product: '',
|
||||
orderId: '',
|
||||
purchasedAt: '',
|
||||
createMissingPlayers: false,
|
||||
};
|
||||
|
||||
// Trifft die ueblichen Spaltennamen, damit das Formular meist schon passt.
|
||||
const GUESSES: Record<keyof Omit<MappingForm, 'createMissingPlayers'>, string[]> = {
|
||||
playerKey: ['steamid', 'steam_id', 'steam', 'identifier', 'user', 'kunde'],
|
||||
playerName: ['name', 'username', 'displayname', 'spieler'],
|
||||
product: ['product', 'produkt', 'item', 'artikel', 'package', 'paket'],
|
||||
orderId: ['order', 'bestell', 'transaction', 'id', 'purchase'],
|
||||
purchasedAt: ['date', 'datum', 'created', 'time', 'kauf'],
|
||||
};
|
||||
|
||||
function guessMapping(columns: string[]): MappingForm {
|
||||
const result = { ...EMPTY_MAPPING };
|
||||
for (const [field, needles] of Object.entries(GUESSES) as [
|
||||
keyof typeof GUESSES,
|
||||
string[],
|
||||
][]) {
|
||||
const hit = columns.find((column) =>
|
||||
needles.some((needle) => column.toLowerCase().includes(needle)),
|
||||
);
|
||||
if (hit) result[field] = hit;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export default function Import() {
|
||||
const [upload, setUpload] = useState<UploadResult | null>(null);
|
||||
const [mapping, setMapping] = useState<MappingForm>(EMPTY_MAPPING);
|
||||
const [preview, setPreview] = useState<{
|
||||
summary: Record<ImportPlan, number>;
|
||||
import: ImportRecord;
|
||||
} | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [flash, setFlash] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const reset = () => {
|
||||
setUpload(null);
|
||||
setPreview(null);
|
||||
setMapping(EMPTY_MAPPING);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const handleUpload = async (file: File) => {
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
setPreview(null);
|
||||
try {
|
||||
const result = await uploadFile<UploadResult>('/api/imports', file);
|
||||
setUpload(result);
|
||||
setMapping(guessMapping(result.columns));
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : 'Upload fehlgeschlagen');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePreview = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
if (!upload) return;
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
const body = {
|
||||
playerKey: mapping.playerKey,
|
||||
product: mapping.product,
|
||||
createMissingPlayers: mapping.createMissingPlayers,
|
||||
...(mapping.playerName ? { playerName: mapping.playerName } : {}),
|
||||
...(mapping.orderId ? { orderId: mapping.orderId } : {}),
|
||||
...(mapping.purchasedAt ? { purchasedAt: mapping.purchasedAt } : {}),
|
||||
};
|
||||
const result = await api<{ summary: Record<ImportPlan, number>; import: ImportRecord }>(
|
||||
`/api/imports/${upload.importId}/mapping`,
|
||||
{ method: 'POST', body },
|
||||
);
|
||||
setPreview(result);
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : 'Vorschau fehlgeschlagen');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCommit = async () => {
|
||||
if (!upload) return;
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
const result = await api<{ booked: number; createdPlayers: number }>(
|
||||
`/api/imports/${upload.importId}/commit`,
|
||||
{ method: 'POST', body: {} },
|
||||
);
|
||||
setFlash(
|
||||
`${result.booked} Buchungen angelegt` +
|
||||
(result.createdPlayers > 0 ? `, ${result.createdPlayers} Spieler neu erfasst.` : '.'),
|
||||
);
|
||||
reset();
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : 'Buchen fehlgeschlagen');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDiscard = async () => {
|
||||
if (!upload) return;
|
||||
try {
|
||||
await api(`/api/imports/${upload.importId}/discard`, { method: 'POST', body: {} });
|
||||
} finally {
|
||||
reset();
|
||||
}
|
||||
};
|
||||
|
||||
const bookable = preview
|
||||
? preview.summary.BOOK + preview.summary.CREATE_PLAYER_AND_BOOK
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-head">
|
||||
<h1>Import</h1>
|
||||
</div>
|
||||
|
||||
{error && <Notice kind="error" onDismiss={() => setError(null)}>{error}</Notice>}
|
||||
{flash && <Notice kind="success" onDismiss={() => setFlash(null)}>{flash}</Notice>}
|
||||
|
||||
{!upload && (
|
||||
<section className="block">
|
||||
<Notice kind="info">
|
||||
CSV oder JSON hochladen. Danach werden die Spalten zugeordnet und eine Vorschau
|
||||
gezeigt — gebucht wird erst nach Bestaetigung. Bereits importierte Bestell-IDs
|
||||
werden automatisch uebersprungen.
|
||||
</Notice>
|
||||
|
||||
<label className="file-drop">
|
||||
<input
|
||||
type="file"
|
||||
accept=".csv,.json,.tsv,.txt"
|
||||
onChange={(event) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) void handleUpload(file);
|
||||
}}
|
||||
disabled={busy}
|
||||
/>
|
||||
<span>{busy ? 'Lade hoch …' : 'Datei auswaehlen'}</span>
|
||||
</label>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{upload && !preview && (
|
||||
<section className="block">
|
||||
<h2>Spalten zuordnen</h2>
|
||||
<p className="muted">
|
||||
{upload.rowCount} Zeilen aus <strong>{upload.columns.length}</strong> Spalten gelesen.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handlePreview}>
|
||||
<div className="grid-2">
|
||||
<MappingSelect
|
||||
label="Spieler-Kennung (Pflicht)"
|
||||
value={mapping.playerKey}
|
||||
columns={upload.columns}
|
||||
required
|
||||
onChange={(value) => setMapping({ ...mapping, playerKey: value })}
|
||||
/>
|
||||
<MappingSelect
|
||||
label="Produktname (Pflicht)"
|
||||
value={mapping.product}
|
||||
columns={upload.columns}
|
||||
required
|
||||
onChange={(value) => setMapping({ ...mapping, product: value })}
|
||||
/>
|
||||
<MappingSelect
|
||||
label="Anzeigename"
|
||||
value={mapping.playerName}
|
||||
columns={upload.columns}
|
||||
onChange={(value) => setMapping({ ...mapping, playerName: value })}
|
||||
/>
|
||||
<MappingSelect
|
||||
label="Bestell-ID (fuer Dedup)"
|
||||
value={mapping.orderId}
|
||||
columns={upload.columns}
|
||||
onChange={(value) => setMapping({ ...mapping, orderId: value })}
|
||||
/>
|
||||
<MappingSelect
|
||||
label="Kaufdatum"
|
||||
value={mapping.purchasedAt}
|
||||
columns={upload.columns}
|
||||
onChange={(value) => setMapping({ ...mapping, purchasedAt: value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label className="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapping.createMissingPlayers}
|
||||
onChange={(event) =>
|
||||
setMapping({ ...mapping, createMissingPlayers: event.target.checked })
|
||||
}
|
||||
/>
|
||||
<span>Unbekannte Spieler automatisch anlegen</span>
|
||||
</label>
|
||||
|
||||
{!mapping.orderId && (
|
||||
<Notice kind="warn">
|
||||
Ohne Bestell-ID kann ein zweiter Import dieselben Kaeufe erneut buchen.
|
||||
</Notice>
|
||||
)}
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="button" className="btn btn-ghost" onClick={() => void handleDiscard()}>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={busy}>
|
||||
{busy ? 'Berechne …' : 'Vorschau erzeugen'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h3>Beispielzeilen</h3>
|
||||
<div className="table-wrap">
|
||||
<table className="table small">
|
||||
<thead>
|
||||
<tr>
|
||||
{upload.columns.map((column) => (
|
||||
<th key={column}>{column}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{upload.sample.map((row, index) => (
|
||||
<tr key={index}>
|
||||
{upload.columns.map((column) => (
|
||||
<td key={column} className="muted">
|
||||
{row[column] ?? ''}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{preview && (
|
||||
<section className="block">
|
||||
<h2>Vorschau</h2>
|
||||
|
||||
<div className="summary-grid">
|
||||
{(Object.keys(PLAN_LABEL) as ImportPlan[]).map((plan) => (
|
||||
<div
|
||||
key={plan}
|
||||
className={`summary-card${
|
||||
plan === 'BOOK' || plan === 'CREATE_PLAYER_AND_BOOK' ? ' is-active' : ''
|
||||
}`}
|
||||
>
|
||||
<span className="summary-value">{preview.summary[plan] ?? 0}</span>
|
||||
<span className="summary-label">{PLAN_LABEL[plan]}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{bookable === 0 ? (
|
||||
<Notice kind="warn">
|
||||
Keine Zeile wuerde gebucht. Pruefe die Spaltenzuordnung oder die Produkt-Mappings
|
||||
in der Verwaltung.
|
||||
</Notice>
|
||||
) : (
|
||||
<Notice kind="info">
|
||||
{bookable} Zeilen werden gebucht. Ein CC-Paket erzeugt dabei automatisch ein
|
||||
CC-Guthaben <em>und</em> ein bezahltes Redesign-Guthaben.
|
||||
</Notice>
|
||||
)}
|
||||
|
||||
<div className="table-wrap scroll">
|
||||
<table className="table small">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Spieler</th>
|
||||
<th>Produkt</th>
|
||||
<th>Bestell-ID</th>
|
||||
<th>Datum</th>
|
||||
<th>Ergebnis</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(preview.import.rows ?? []).map((row) => (
|
||||
<tr key={row.id} className={row.plan.startsWith('SKIP') ? 'is-skipped' : undefined}>
|
||||
<td className="muted">{row.lineNo}</td>
|
||||
<td>
|
||||
{row.playerName || row.playerKey || '—'}
|
||||
{row.resolvedPlayerId === null && row.plan === 'CREATE_PLAYER_AND_BOOK' && (
|
||||
<span className="badge badge-new">neu</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="muted">{row.productName ?? '—'}</td>
|
||||
<td className="mono muted">{row.externalId ?? '—'}</td>
|
||||
<td className="muted">{formatDate(row.purchasedAt)}</td>
|
||||
<td className={row.plan.startsWith('SKIP') ? 'muted' : 'pos'}>
|
||||
{PLAN_LABEL[row.plan]}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="button" className="btn btn-ghost" onClick={() => void handleDiscard()}>
|
||||
Verwerfen
|
||||
</button>
|
||||
<button type="button" className="btn btn-ghost" onClick={() => setPreview(null)}>
|
||||
Zuordnung aendern
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
disabled={busy || bookable === 0}
|
||||
onClick={() => void handleCommit()}
|
||||
>
|
||||
{busy ? 'Buche …' : `${bookable} Zeilen buchen`}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MappingSelect({
|
||||
label,
|
||||
value,
|
||||
columns,
|
||||
required,
|
||||
onChange,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
columns: string[];
|
||||
required?: boolean;
|
||||
onChange: (value: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="field">
|
||||
<label>{label}</label>
|
||||
<select value={value} onChange={(event) => onChange(event.target.value)} required={required}>
|
||||
<option value="">— nicht zuordnen —</option>
|
||||
{columns.map((column) => (
|
||||
<option key={column} value={column}>
|
||||
{column}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Notice from '../components/Notice';
|
||||
import { ApiError, api } from '../lib/api';
|
||||
import { useSession } from '../lib/session';
|
||||
import type { SessionUser } from '../lib/types';
|
||||
|
||||
interface LoginResponse {
|
||||
totpRequired: boolean;
|
||||
challenge?: string;
|
||||
user?: SessionUser;
|
||||
}
|
||||
|
||||
export default function Login() {
|
||||
const { setUser } = useSession();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [code, setCode] = useState('');
|
||||
const [challenge, setChallenge] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const finish = (user: SessionUser) => {
|
||||
setUser(user);
|
||||
navigate(user.mustChangePassword ? '/account' : '/', { replace: true });
|
||||
};
|
||||
|
||||
const submitPassword = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
const result = await api<LoginResponse>('/api/auth/login', {
|
||||
method: 'POST',
|
||||
body: { username, password },
|
||||
});
|
||||
|
||||
if (result.totpRequired && result.challenge) {
|
||||
setChallenge(result.challenge);
|
||||
} else if (result.user) {
|
||||
finish(result.user);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : 'Anmeldung fehlgeschlagen');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const submitTotp = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
const result = await api<{ user: SessionUser }>('/api/auth/login/totp', {
|
||||
method: 'POST',
|
||||
body: { challenge, code },
|
||||
});
|
||||
finish(result.user);
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : 'Anmeldung fehlgeschlagen');
|
||||
if (err instanceof ApiError && err.code === 'UNAUTHORIZED' && err.message.includes('abgelaufen')) {
|
||||
setChallenge(null);
|
||||
setCode('');
|
||||
}
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="login-page">
|
||||
<div className="login-card">
|
||||
<h1>CC-Manager</h1>
|
||||
<p className="login-sub">
|
||||
{challenge ? 'Bestaetigungscode eingeben' : 'Bitte anmelden'}
|
||||
</p>
|
||||
|
||||
{error && <Notice kind="error">{error}</Notice>}
|
||||
|
||||
{challenge ? (
|
||||
<form onSubmit={submitTotp}>
|
||||
<label htmlFor="code">Code aus der Authenticator-App</label>
|
||||
<input
|
||||
id="code"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
value={code}
|
||||
onChange={(event) => setCode(event.target.value)}
|
||||
maxLength={10}
|
||||
autoFocus
|
||||
required
|
||||
/>
|
||||
<button type="submit" className="btn btn-primary btn-block" disabled={busy}>
|
||||
{busy ? 'Pruefe …' : 'Bestaetigen'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-block"
|
||||
onClick={() => {
|
||||
setChallenge(null);
|
||||
setCode('');
|
||||
setError(null);
|
||||
}}
|
||||
>
|
||||
Zurueck
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={submitPassword}>
|
||||
<label htmlFor="username">Benutzername</label>
|
||||
<input
|
||||
id="username"
|
||||
autoComplete="username"
|
||||
value={username}
|
||||
onChange={(event) => setUsername(event.target.value)}
|
||||
autoFocus
|
||||
required
|
||||
/>
|
||||
|
||||
<label htmlFor="password">Passwort</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<button type="submit" className="btn btn-primary btn-block" disabled={busy}>
|
||||
{busy ? 'Melde an …' : 'Anmelden'}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,730 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
import BalanceCards from '../components/BalanceCards';
|
||||
import Modal from '../components/Modal';
|
||||
import Notice from '../components/Notice';
|
||||
import { ApiError, api } from '../lib/api';
|
||||
import { KIND_LABEL, REASON_LABEL, SOURCE_LABEL, formatAmount, formatDate } from '../lib/format';
|
||||
import { useSession } from '../lib/session';
|
||||
import type { Character, CreditKind, LedgerEntry, PlayerDetail as Detail } from '../lib/types';
|
||||
|
||||
type DialogState =
|
||||
| { type: 'none' }
|
||||
| { type: 'newCharacter' }
|
||||
| { type: 'redesign'; character: Character }
|
||||
| { type: 'deactivate'; character: Character }
|
||||
| { type: 'reactivatePaid'; character: Character }
|
||||
| { type: 'revert'; character: Character }
|
||||
| { type: 'reverse'; entry: LedgerEntry };
|
||||
|
||||
export default function PlayerDetail() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const playerId = Number(id);
|
||||
const { can } = useSession();
|
||||
|
||||
const [detail, setDetail] = useState<Detail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [flash, setFlash] = useState<string | null>(null);
|
||||
const [dialog, setDialog] = useState<DialogState>({ type: 'none' });
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
setDetail(await api<Detail>(`/api/players/${playerId}`));
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : 'Laden fehlgeschlagen');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [playerId]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
const run = async (action: () => Promise<unknown>, message: string) => {
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
await action();
|
||||
await load();
|
||||
setDialog({ type: 'none' });
|
||||
setFlash(message);
|
||||
window.setTimeout(() => setFlash(null), 4000);
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : 'Aktion fehlgeschlagen');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <p className="muted">Lade …</p>;
|
||||
if (!detail) return <Notice kind="error">{error ?? 'Spieler nicht gefunden'}</Notice>;
|
||||
|
||||
const editor = can('EDITOR');
|
||||
const active = detail.characters.filter((c) => c.status === 'ACTIVE');
|
||||
const inactive = detail.characters.filter((c) => c.status === 'INACTIVE');
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-head">
|
||||
<div>
|
||||
<Link to="/" className="back-link">
|
||||
← Alle Spieler
|
||||
</Link>
|
||||
<h1>{detail.player.displayName}</h1>
|
||||
<p className="muted mono">
|
||||
{detail.player.steamId ?? 'keine SteamID'}
|
||||
{detail.player.forumName && ` · Forum: ${detail.player.forumName}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <Notice kind="error" onDismiss={() => setError(null)}>{error}</Notice>}
|
||||
{flash && <Notice kind="success" onDismiss={() => setFlash(null)}>{flash}</Notice>}
|
||||
|
||||
<BalanceCards balances={detail.balances} />
|
||||
|
||||
{editor && (
|
||||
<section className="action-bar">
|
||||
<button
|
||||
type="button"
|
||||
className="btn"
|
||||
disabled={busy}
|
||||
onClick={() =>
|
||||
void run(
|
||||
() => api(`/api/players/${playerId}/credits/cc-package`, { method: 'POST', body: {} }),
|
||||
'CC-Paket eingetragen: +1 CC und +1 Redesign.',
|
||||
)
|
||||
}
|
||||
>
|
||||
+ CC-Paket
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn"
|
||||
disabled={busy}
|
||||
onClick={() =>
|
||||
void run(
|
||||
() =>
|
||||
api(`/api/players/${playerId}/credits/redesign-package`, {
|
||||
method: 'POST',
|
||||
body: {},
|
||||
}),
|
||||
'Redesign-Paket eingetragen: +1 Redesign.',
|
||||
)
|
||||
}
|
||||
>
|
||||
+ Redesign-Paket
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn"
|
||||
disabled={busy}
|
||||
onClick={() =>
|
||||
void run(
|
||||
() => api(`/api/players/${playerId}/credits/kulanz`, { method: 'POST', body: {} }),
|
||||
'Kulanz-Redesign eingetragen: +1 Kulanz.',
|
||||
)
|
||||
}
|
||||
>
|
||||
+ Kulanz
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
disabled={busy}
|
||||
onClick={() => setDialog({ type: 'newCharacter' })}
|
||||
>
|
||||
Neuer CC
|
||||
</button>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="block">
|
||||
<h2>Aktive CCs ({active.length})</h2>
|
||||
{active.length === 0 ? (
|
||||
<p className="muted">Keine aktiven CCs.</p>
|
||||
) : (
|
||||
<ul className="cc-list">
|
||||
{active.map((character) => (
|
||||
<li key={character.id} className="cc-item">
|
||||
<div>
|
||||
<strong>{character.name}</strong>
|
||||
{character.predecessor && (
|
||||
<span className="muted"> · Nachfolger von {character.predecessor.name}</span>
|
||||
)}
|
||||
{character.loreText && <p className="lore">{character.loreText}</p>}
|
||||
<span className="muted small">Seit {formatDate(character.createdAt)}</span>
|
||||
</div>
|
||||
{editor && (
|
||||
<div className="cc-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-small"
|
||||
onClick={() => setDialog({ type: 'redesign', character })}
|
||||
>
|
||||
Redesign
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-small btn-ghost"
|
||||
onClick={() => setDialog({ type: 'deactivate', character })}
|
||||
>
|
||||
Deaktivieren
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-small btn-danger"
|
||||
onClick={() => setDialog({ type: 'revert', character })}
|
||||
>
|
||||
Zuruecknehmen
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="block">
|
||||
<h2>Inaktive CCs ({inactive.length})</h2>
|
||||
{inactive.length === 0 ? (
|
||||
<p className="muted">Keine inaktiven CCs.</p>
|
||||
) : (
|
||||
<ul className="cc-list">
|
||||
{inactive.map((character) => {
|
||||
const free = character.inactiveReason === 'PLAYER_INACTIVITY';
|
||||
return (
|
||||
<li key={character.id} className="cc-item is-inactive">
|
||||
<div>
|
||||
<strong>{character.name}</strong>
|
||||
<span className={`badge ${free ? 'badge-free' : 'badge-paid'}`}>
|
||||
{character.inactiveReason
|
||||
? REASON_LABEL[character.inactiveReason]
|
||||
: 'Unbekannt'}
|
||||
</span>
|
||||
{character.successors.length > 0 && (
|
||||
<span className="muted">
|
||||
{' '}
|
||||
· Ersetzt durch {character.successors.map((s) => s.name).join(', ')}
|
||||
</span>
|
||||
)}
|
||||
<p className="muted small">
|
||||
{free
|
||||
? 'Kommt gratis zurueck — kostet kein Guthaben.'
|
||||
: 'Reaktivierung kostet ein Redesign- oder CC-Guthaben.'}
|
||||
</p>
|
||||
</div>
|
||||
{editor && (
|
||||
<div className="cc-actions">
|
||||
{free ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-small btn-primary"
|
||||
disabled={busy}
|
||||
onClick={() =>
|
||||
void run(
|
||||
() =>
|
||||
api(`/api/characters/${character.id}/reactivate-free`, {
|
||||
method: 'POST',
|
||||
body: {},
|
||||
}),
|
||||
`"${character.name}" ist wieder aktiv — kostenlos.`,
|
||||
)
|
||||
}
|
||||
>
|
||||
Gratis reaktivieren
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-small"
|
||||
onClick={() => setDialog({ type: 'reactivatePaid', character })}
|
||||
>
|
||||
Bezahlt reaktivieren
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="block">
|
||||
<h2>Guthaben-Historie</h2>
|
||||
<div className="table-wrap">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Zeitpunkt</th>
|
||||
<th>Topf</th>
|
||||
<th className="num">Menge</th>
|
||||
<th>Anlass</th>
|
||||
<th>Notiz</th>
|
||||
<th>Von</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{detail.ledger.map((entry) => (
|
||||
<tr key={entry.id} className={entry.reversedBy ? 'is-reversed' : undefined}>
|
||||
<td className="muted small">{formatDate(entry.createdAt)}</td>
|
||||
<td>{KIND_LABEL[entry.kind]}</td>
|
||||
<td className={`num ${entry.amount < 0 ? 'neg' : 'pos'}`}>
|
||||
{formatAmount(entry.amount)}
|
||||
</td>
|
||||
<td>{SOURCE_LABEL[entry.source]}</td>
|
||||
<td className="muted small">
|
||||
{entry.note ?? '—'}
|
||||
{entry.character && ` (${entry.character.name})`}
|
||||
</td>
|
||||
<td className="muted small">{entry.createdBy?.username ?? 'System'}</td>
|
||||
<td className="num">
|
||||
{editor &&
|
||||
!entry.reversedBy &&
|
||||
entry.source !== 'CONSUME' &&
|
||||
entry.source !== 'REVERSAL' && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-tiny btn-ghost"
|
||||
onClick={() => setDialog({ type: 'reverse', entry })}
|
||||
>
|
||||
Storno
|
||||
</button>
|
||||
)}
|
||||
{entry.reversedBy && <span className="muted small">storniert</span>}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{detail.ledger.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={7} className="empty">
|
||||
Noch keine Buchungen.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{detail.ledgerTotal > detail.ledger.length && (
|
||||
<p className="muted">
|
||||
{detail.ledger.length} von {detail.ledgerTotal} Buchungen angezeigt.
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{dialog.type === 'newCharacter' && (
|
||||
<CharacterFormModal
|
||||
title="Neuen CC anlegen"
|
||||
submitLabel="Anlegen"
|
||||
hint="Kostet 1 CC-Guthaben. Kulanz-Guthaben ist dafuer nicht einsetzbar."
|
||||
busy={busy}
|
||||
onClose={() => setDialog({ type: 'none' })}
|
||||
onSubmit={(values) =>
|
||||
void run(
|
||||
() =>
|
||||
api(`/api/players/${playerId}/characters`, {
|
||||
method: 'POST',
|
||||
body: values,
|
||||
}),
|
||||
`CC "${values.name}" angelegt — 1 CC-Guthaben verbraucht.`,
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{dialog.type === 'redesign' && (
|
||||
<CharacterFormModal
|
||||
title={`Redesign von "${dialog.character.name}"`}
|
||||
submitLabel="Redesign durchfuehren"
|
||||
hint={`"${dialog.character.name}" wird inaktiv (redesignt), der neue CC tritt an seine Stelle.`}
|
||||
busy={busy}
|
||||
withKind={['REDESIGN_KULANZ', 'REDESIGN_PAID']}
|
||||
balances={detail.balances}
|
||||
onClose={() => setDialog({ type: 'none' })}
|
||||
onSubmit={(values) =>
|
||||
void run(
|
||||
() =>
|
||||
api(`/api/characters/${dialog.character.id}/redesign`, {
|
||||
method: 'POST',
|
||||
body: values,
|
||||
}),
|
||||
`Redesign gebucht: "${dialog.character.name}" → "${values.name}".`,
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{dialog.type === 'deactivate' && (
|
||||
<DeactivateModal
|
||||
character={dialog.character}
|
||||
busy={busy}
|
||||
onClose={() => setDialog({ type: 'none' })}
|
||||
onSubmit={(reason) =>
|
||||
void run(
|
||||
() =>
|
||||
api(`/api/characters/${dialog.character.id}/deactivate`, {
|
||||
method: 'POST',
|
||||
body: { reason },
|
||||
}),
|
||||
`"${dialog.character.name}" ist jetzt inaktiv.`,
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{dialog.type === 'reactivatePaid' && (
|
||||
<KindChoiceModal
|
||||
title={`"${dialog.character.name}" reaktivieren`}
|
||||
hint="Dieser CC existiert im Original nicht mehr. Die Reaktivierung kostet ein Guthaben."
|
||||
kinds={['REDESIGN_KULANZ', 'REDESIGN_PAID', 'CC']}
|
||||
balances={detail.balances}
|
||||
busy={busy}
|
||||
onClose={() => setDialog({ type: 'none' })}
|
||||
onSubmit={(useKind) =>
|
||||
void run(
|
||||
() =>
|
||||
api(`/api/characters/${dialog.character.id}/reactivate-paid`, {
|
||||
method: 'POST',
|
||||
body: { useKind },
|
||||
}),
|
||||
`"${dialog.character.name}" ist wieder aktiv.`,
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{dialog.type === 'revert' && (
|
||||
<ReasonModal
|
||||
title={`"${dialog.character.name}" zuruecknehmen`}
|
||||
hint="Der CC wird geloescht, verbrauchte Guthaben werden zurueckgebucht. Fuer Fehleintraege gedacht."
|
||||
confirmLabel="Zuruecknehmen"
|
||||
danger
|
||||
busy={busy}
|
||||
onClose={() => setDialog({ type: 'none' })}
|
||||
onSubmit={(reason) =>
|
||||
void run(
|
||||
() =>
|
||||
api(`/api/characters/${dialog.character.id}/revert`, {
|
||||
method: 'POST',
|
||||
body: { reason },
|
||||
}),
|
||||
`"${dialog.character.name}" wurde zurueckgenommen.`,
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{dialog.type === 'reverse' && (
|
||||
<ReasonModal
|
||||
title="Buchung stornieren"
|
||||
hint="Es wird eine Gegenbuchung erzeugt. Bei einem CC-Paket betrifft das beide Zeilen."
|
||||
confirmLabel="Stornieren"
|
||||
busy={busy}
|
||||
onClose={() => setDialog({ type: 'none' })}
|
||||
onSubmit={(reason) =>
|
||||
void run(
|
||||
() =>
|
||||
api(`/api/credits/${dialog.entry.id}/reverse`, {
|
||||
method: 'POST',
|
||||
body: { reason },
|
||||
}),
|
||||
'Buchung storniert.',
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface CharacterValues {
|
||||
name: string;
|
||||
loreText?: string;
|
||||
useKind?: CreditKind;
|
||||
}
|
||||
|
||||
function CharacterFormModal({
|
||||
title,
|
||||
submitLabel,
|
||||
hint,
|
||||
busy,
|
||||
withKind,
|
||||
balances,
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: {
|
||||
title: string;
|
||||
submitLabel: string;
|
||||
hint: string;
|
||||
busy: boolean;
|
||||
withKind?: CreditKind[];
|
||||
balances?: { CC: number; REDESIGN_PAID: number; REDESIGN_KULANZ: number };
|
||||
onClose: () => void;
|
||||
onSubmit: (values: CharacterValues) => void;
|
||||
}) {
|
||||
const [name, setName] = useState('');
|
||||
const [loreText, setLoreText] = useState('');
|
||||
// Kulanz steht bewusst vorne: sie soll zuerst aufgebraucht werden.
|
||||
const [useKind, setUseKind] = useState<CreditKind>(withKind?.[0] ?? 'CC');
|
||||
|
||||
return (
|
||||
<Modal title={title} onClose={onClose}>
|
||||
<form
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
onSubmit({
|
||||
name,
|
||||
...(loreText.trim() ? { loreText: loreText.trim() } : {}),
|
||||
...(withKind ? { useKind } : {}),
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Notice kind="info">{hint}</Notice>
|
||||
|
||||
<label htmlFor="cc-name">Name des CCs</label>
|
||||
<input
|
||||
id="cc-name"
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
autoFocus
|
||||
required
|
||||
/>
|
||||
|
||||
<label htmlFor="cc-lore">Lore / Notiz (optional)</label>
|
||||
<textarea
|
||||
id="cc-lore"
|
||||
rows={3}
|
||||
value={loreText}
|
||||
onChange={(event) => setLoreText(event.target.value)}
|
||||
/>
|
||||
|
||||
{withKind && balances && (
|
||||
<>
|
||||
<label>Welches Guthaben soll verbraucht werden?</label>
|
||||
<div className="radio-group">
|
||||
{withKind.map((kind) => (
|
||||
<label key={kind} className="radio">
|
||||
<input
|
||||
type="radio"
|
||||
name="useKind"
|
||||
value={kind}
|
||||
checked={useKind === kind}
|
||||
onChange={() => setUseKind(kind)}
|
||||
/>
|
||||
<span>
|
||||
{KIND_LABEL[kind]}
|
||||
<span className={balances[kind] < 1 ? 'neg' : 'muted'}>
|
||||
{' '}
|
||||
({balances[kind]} verfuegbar)
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="button" className="btn btn-ghost" onClick={onClose}>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={busy}>
|
||||
{busy ? 'Speichere …' : submitLabel}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function KindChoiceModal({
|
||||
title,
|
||||
hint,
|
||||
kinds,
|
||||
balances,
|
||||
busy,
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: {
|
||||
title: string;
|
||||
hint: string;
|
||||
kinds: CreditKind[];
|
||||
balances: { CC: number; REDESIGN_PAID: number; REDESIGN_KULANZ: number };
|
||||
busy: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (kind: CreditKind) => void;
|
||||
}) {
|
||||
const [useKind, setUseKind] = useState<CreditKind>(kinds[0] ?? 'CC');
|
||||
|
||||
return (
|
||||
<Modal title={title} onClose={onClose}>
|
||||
<form
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
onSubmit(useKind);
|
||||
}}
|
||||
>
|
||||
<Notice kind="info">{hint}</Notice>
|
||||
|
||||
<div className="radio-group">
|
||||
{kinds.map((kind) => (
|
||||
<label key={kind} className="radio">
|
||||
<input
|
||||
type="radio"
|
||||
name="useKind"
|
||||
value={kind}
|
||||
checked={useKind === kind}
|
||||
onChange={() => setUseKind(kind)}
|
||||
/>
|
||||
<span>
|
||||
{KIND_LABEL[kind]}
|
||||
<span className={balances[kind] < 1 ? 'neg' : 'muted'}>
|
||||
{' '}
|
||||
({balances[kind]} verfuegbar)
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="button" className="btn btn-ghost" onClick={onClose}>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={busy}>
|
||||
{busy ? 'Speichere …' : 'Bestaetigen'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function DeactivateModal({
|
||||
character,
|
||||
busy,
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: {
|
||||
character: Character;
|
||||
busy: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (reason: 'PLAYER_INACTIVITY' | 'OTHER') => void;
|
||||
}) {
|
||||
const [reason, setReason] = useState<'PLAYER_INACTIVITY' | 'OTHER'>('PLAYER_INACTIVITY');
|
||||
|
||||
return (
|
||||
<Modal title={`"${character.name}" deaktivieren`} onClose={onClose}>
|
||||
<form
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
onSubmit(reason);
|
||||
}}
|
||||
>
|
||||
<Notice kind="info">
|
||||
Der Grund entscheidet, ob die spaetere Reaktivierung kostenlos ist.
|
||||
</Notice>
|
||||
|
||||
<div className="radio-group">
|
||||
<label className="radio">
|
||||
<input
|
||||
type="radio"
|
||||
name="reason"
|
||||
checked={reason === 'PLAYER_INACTIVITY'}
|
||||
onChange={() => setReason('PLAYER_INACTIVITY')}
|
||||
/>
|
||||
<span>
|
||||
<strong>Spieler-Inaktivitaet</strong>
|
||||
<span className="muted"> — vom Server geputzt, kommt gratis zurueck</span>
|
||||
</span>
|
||||
</label>
|
||||
<label className="radio">
|
||||
<input
|
||||
type="radio"
|
||||
name="reason"
|
||||
checked={reason === 'OTHER'}
|
||||
onChange={() => setReason('OTHER')}
|
||||
/>
|
||||
<span>
|
||||
<strong>Sonstiger Grund</strong>
|
||||
<span className="muted"> — Reaktivierung kostet ein Guthaben</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="button" className="btn btn-ghost" onClick={onClose}>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={busy}>
|
||||
{busy ? 'Speichere …' : 'Deaktivieren'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function ReasonModal({
|
||||
title,
|
||||
hint,
|
||||
confirmLabel,
|
||||
danger,
|
||||
busy,
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: {
|
||||
title: string;
|
||||
hint: string;
|
||||
confirmLabel: string;
|
||||
danger?: boolean;
|
||||
busy: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (reason: string) => void;
|
||||
}) {
|
||||
const [reason, setReason] = useState('');
|
||||
|
||||
return (
|
||||
<Modal title={title} onClose={onClose}>
|
||||
<form
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
onSubmit(reason);
|
||||
}}
|
||||
>
|
||||
<Notice kind={danger ? 'warn' : 'info'}>{hint}</Notice>
|
||||
|
||||
<label htmlFor="reason">Begruendung</label>
|
||||
<input
|
||||
id="reason"
|
||||
value={reason}
|
||||
onChange={(event) => setReason(event.target.value)}
|
||||
placeholder="z. B. versehentlich doppelt eingetragen"
|
||||
autoFocus
|
||||
required
|
||||
/>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="button" className="btn btn-ghost" onClick={onClose}>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className={`btn ${danger ? 'btn-danger' : 'btn-primary'}`}
|
||||
disabled={busy}
|
||||
>
|
||||
{busy ? 'Speichere …' : confirmLabel}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user