Florian Wilde
a9314acbb4
Nach einem Passwortwechsel fliegen alle anderen Geräte raus; ein gesperrtes Konto wird sofort abgemeldet. Die letzte Administration lässt sich nicht entmachten, und sich selbst kann niemand sperren. Das öffentliche Profil zeigt Zahlen und zuletzt Gesehenes — keine Notizen, keine Watchlist, keine E-Mail-Adresse. Was privat gemeint ist, bleibt privat. Es braucht die Freigabe des Nutzers und die des Betreibers.
758 lines
25 KiB
TypeScript
758 lines
25 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useTransition } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { clsx } from "clsx";
|
|
import {
|
|
changePasswordAction,
|
|
createApiKeyAction,
|
|
deleteChannelAction,
|
|
importDataAction,
|
|
revokeApiKeyAction,
|
|
runSyncAction,
|
|
saveChannelAction,
|
|
setInstanceNameAction,
|
|
setPublicProfilesAction,
|
|
setRegistrationAction,
|
|
setUserActiveAction,
|
|
setUserRoleAction,
|
|
testChannelAction,
|
|
toggleChannelAction,
|
|
updateProfileAction,
|
|
} from "@/app/actions/settings";
|
|
import { useToasts } from "@/components/Toasts";
|
|
import { formatDate } from "@/lib/labels";
|
|
|
|
/** Wiederverwendete Bausteine der Einstellungsseiten. */
|
|
|
|
function Field({
|
|
id,
|
|
label,
|
|
hint,
|
|
...props
|
|
}: React.InputHTMLAttributes<HTMLInputElement> & { id: string; label: string; hint?: string }) {
|
|
return (
|
|
<div className="space-y-1.5">
|
|
<label htmlFor={id} className="block text-sm font-medium text-[var(--fl-muted)]">
|
|
{label}
|
|
</label>
|
|
<input id={id} name={id} className="fl-input" {...props} />
|
|
{hint && <p className="text-xs text-[var(--fl-faint)]">{hint}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Toggle({
|
|
checked,
|
|
onChange,
|
|
label,
|
|
hint,
|
|
disabled,
|
|
}: {
|
|
checked: boolean;
|
|
onChange: (value: boolean) => void;
|
|
label: string;
|
|
hint?: string;
|
|
disabled?: boolean;
|
|
}) {
|
|
return (
|
|
<label className="flex cursor-pointer items-start gap-3">
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
disabled={disabled}
|
|
onChange={(event) => onChange(event.target.checked)}
|
|
className="sr-only"
|
|
/>
|
|
<span
|
|
aria-hidden
|
|
className={clsx(
|
|
"mt-0.5 h-5 w-9 shrink-0 rounded-full p-0.5 transition-colors",
|
|
checked ? "" : "bg-[var(--fl-surface-2)] ring-1 ring-[var(--fl-border-strong)]",
|
|
)}
|
|
style={checked ? { backgroundImage: "var(--fl-gradient)" } : undefined}
|
|
>
|
|
<span
|
|
className={clsx(
|
|
"block h-4 w-4 rounded-full bg-[var(--fl-text)] transition-transform",
|
|
checked && "translate-x-4",
|
|
)}
|
|
/>
|
|
</span>
|
|
<span className="min-w-0">
|
|
<span className="block text-sm font-medium">{label}</span>
|
|
{hint && <span className="block text-xs text-[var(--fl-faint)]">{hint}</span>}
|
|
</span>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Profil
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export function ProfileForm({
|
|
user,
|
|
publicProfilesEnabled,
|
|
}: {
|
|
user: {
|
|
name: string;
|
|
email: string;
|
|
region: string;
|
|
publicProfile: boolean;
|
|
profileSlug: string | null;
|
|
notifyNewEpisode: boolean;
|
|
notifyRelease: boolean;
|
|
notifyAvailability: boolean;
|
|
};
|
|
publicProfilesEnabled: boolean;
|
|
}) {
|
|
const router = useRouter();
|
|
const { report } = useToasts();
|
|
const [pending, startTransition] = useTransition();
|
|
const [state, setState] = useState(user);
|
|
|
|
return (
|
|
<form
|
|
action={() =>
|
|
startTransition(async () => {
|
|
report(
|
|
await updateProfileAction({
|
|
name: state.name,
|
|
region: state.region,
|
|
publicProfile: state.publicProfile,
|
|
profileSlug: state.profileSlug || null,
|
|
notifyNewEpisode: state.notifyNewEpisode,
|
|
notifyRelease: state.notifyRelease,
|
|
notifyAvailability: state.notifyAvailability,
|
|
}),
|
|
);
|
|
router.refresh();
|
|
})
|
|
}
|
|
className="space-y-5"
|
|
>
|
|
<Field
|
|
id="name"
|
|
label="Anzeigename"
|
|
value={state.name}
|
|
onChange={(event) => setState({ ...state, name: event.target.value })}
|
|
required
|
|
/>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="block text-sm font-medium text-[var(--fl-muted)]">E-Mail-Adresse</label>
|
|
<p className="fl-input text-[var(--fl-faint)]">{user.email}</p>
|
|
</div>
|
|
|
|
<Field
|
|
id="region"
|
|
label="Region"
|
|
value={state.region}
|
|
maxLength={2}
|
|
onChange={(event) => setState({ ...state, region: event.target.value.toUpperCase() })}
|
|
hint="Zwei Buchstaben nach ISO 3166 — bestimmt, welche Streamingdienste angezeigt werden (DE, AT, CH …)."
|
|
/>
|
|
|
|
<fieldset className="space-y-3">
|
|
<legend className="mb-1 text-sm font-medium text-[var(--fl-muted)]">
|
|
Wovon soll Flimmer dir berichten?
|
|
</legend>
|
|
<Toggle
|
|
checked={state.notifyNewEpisode}
|
|
onChange={(value) => setState({ ...state, notifyNewEpisode: value })}
|
|
label="Neue Episoden"
|
|
hint="Wenn bei einer Serie in deiner Bibliothek eine Folge dazukommt."
|
|
/>
|
|
<Toggle
|
|
checked={state.notifyRelease}
|
|
onChange={(value) => setState({ ...state, notifyRelease: value })}
|
|
label="Neue Releases"
|
|
hint="Kinostart oder Heimkinostart eines Films auf deiner Watchlist."
|
|
/>
|
|
<Toggle
|
|
checked={state.notifyAvailability}
|
|
onChange={(value) => setState({ ...state, notifyAvailability: value })}
|
|
label="Neu verfügbar"
|
|
hint="Wenn ein Watchlist-Titel auf einem Dienst in deiner Region auftaucht."
|
|
/>
|
|
</fieldset>
|
|
|
|
{publicProfilesEnabled && (
|
|
<fieldset className="space-y-3">
|
|
<legend className="mb-1 text-sm font-medium text-[var(--fl-muted)]">
|
|
Öffentliches Profil
|
|
</legend>
|
|
<Toggle
|
|
checked={state.publicProfile}
|
|
onChange={(value) => setState({ ...state, publicProfile: value })}
|
|
label="Profil öffentlich zeigen"
|
|
hint="Eine schlichte Seite mit deinen Zahlen und zuletzt gesehenen Titeln — ohne Notizen."
|
|
/>
|
|
{state.publicProfile && (
|
|
<Field
|
|
id="profileSlug"
|
|
label="Adresse"
|
|
value={state.profileSlug ?? ""}
|
|
onChange={(event) => setState({ ...state, profileSlug: event.target.value })}
|
|
placeholder="dein-name"
|
|
hint="Erreichbar unter /u/<adresse>"
|
|
/>
|
|
)}
|
|
</fieldset>
|
|
)}
|
|
|
|
<button type="submit" disabled={pending} className="fl-btn fl-btn-primary">
|
|
{pending ? "Einen Moment …" : "Speichern"}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
export function PasswordForm() {
|
|
const { report } = useToasts();
|
|
const [pending, startTransition] = useTransition();
|
|
|
|
return (
|
|
<form
|
|
action={(formData) =>
|
|
startTransition(async () => {
|
|
const result = await changePasswordAction({
|
|
current: String(formData.get("current") ?? ""),
|
|
next: String(formData.get("next") ?? ""),
|
|
repeat: String(formData.get("repeat") ?? ""),
|
|
});
|
|
report(result);
|
|
if (result.ok) window.location.href = "/anmelden";
|
|
})
|
|
}
|
|
className="space-y-4"
|
|
>
|
|
<Field id="current" label="Bisheriges Passwort" type="password" autoComplete="current-password" required />
|
|
<Field
|
|
id="next"
|
|
label="Neues Passwort"
|
|
type="password"
|
|
autoComplete="new-password"
|
|
required
|
|
hint="Mindestens 10 Zeichen."
|
|
/>
|
|
<Field id="repeat" label="Neues Passwort wiederholen" type="password" autoComplete="new-password" required />
|
|
<p className="text-xs text-[var(--fl-faint)]">
|
|
Nach dem Wechsel wirst du auf allen Geräten abgemeldet.
|
|
</p>
|
|
<button type="submit" disabled={pending} className="fl-btn fl-btn-ghost">
|
|
Passwort ändern
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// API-Schlüssel
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export function ApiKeys({
|
|
keys,
|
|
}: {
|
|
keys: { id: string; name: string; prefix: string; lastUsedAt: Date | null; createdAt: Date }[];
|
|
}) {
|
|
const router = useRouter();
|
|
const { report } = useToasts();
|
|
const [pending, startTransition] = useTransition();
|
|
const [secret, setSecret] = useState<string | null>(null);
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<form
|
|
action={(formData) => {
|
|
const name = String(formData.get("keyName") ?? "").trim();
|
|
if (!name) return;
|
|
startTransition(async () => {
|
|
const result = await createApiKeyAction(name);
|
|
report(result);
|
|
if (result.secret) setSecret(result.secret);
|
|
router.refresh();
|
|
});
|
|
}}
|
|
className="flex flex-wrap items-end gap-2"
|
|
>
|
|
<div className="min-w-48 flex-1 space-y-1.5">
|
|
<label htmlFor="keyName" className="block text-sm font-medium text-[var(--fl-muted)]">
|
|
Neuer Schlüssel
|
|
</label>
|
|
<input id="keyName" name="keyName" placeholder="z. B. Handy-Skript" className="fl-input" />
|
|
</div>
|
|
<button type="submit" disabled={pending} className="fl-btn fl-btn-primary">
|
|
Anlegen
|
|
</button>
|
|
</form>
|
|
|
|
{secret && (
|
|
<div
|
|
role="alert"
|
|
className="rounded-xl border p-3"
|
|
style={{
|
|
borderColor: "color-mix(in oklab, var(--fl-warning) 45%, transparent)",
|
|
backgroundColor: "color-mix(in oklab, var(--fl-warning) 10%, transparent)",
|
|
}}
|
|
>
|
|
<p className="text-sm font-medium text-[var(--fl-warning)]">
|
|
Einmalig sichtbar — jetzt kopieren:
|
|
</p>
|
|
<code className="mt-2 block break-all rounded-lg bg-[var(--fl-surface-2)] p-2 font-mono text-xs">
|
|
{secret}
|
|
</code>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
void navigator.clipboard?.writeText(secret);
|
|
report({ ok: true, message: "In die Zwischenablage kopiert" });
|
|
}}
|
|
className="fl-btn fl-btn-ghost mt-2 px-3 py-1.5 text-sm"
|
|
>
|
|
Kopieren
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{keys.length === 0 ? (
|
|
<p className="text-sm text-[var(--fl-faint)]">Noch kein Schlüssel angelegt.</p>
|
|
) : (
|
|
<ul className="divide-y divide-[var(--fl-border)]">
|
|
{keys.map((key) => (
|
|
<li key={key.id} className="flex flex-wrap items-center gap-3 py-3">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-medium">{key.name}</p>
|
|
<p className="font-mono text-xs text-[var(--fl-faint)]">
|
|
{key.prefix}… · angelegt {formatDate(key.createdAt)}
|
|
{key.lastUsedAt ? ` · zuletzt benutzt ${formatDate(key.lastUsedAt)}` : " · nie benutzt"}
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
disabled={pending}
|
|
onClick={() =>
|
|
startTransition(async () => {
|
|
report(await revokeApiKeyAction(key.id));
|
|
router.refresh();
|
|
})
|
|
}
|
|
className="text-sm text-[var(--fl-faint)] underline-offset-4 hover:text-[var(--fl-danger)] hover:underline"
|
|
>
|
|
Zurückziehen
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Benachrichtigungskanäle
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const CHANNEL_FIELDS: Record<string, { key: string; label: string; placeholder: string }[]> = {
|
|
EMAIL: [{ key: "email", label: "Abweichende Adresse", placeholder: "leer = Konto-Adresse" }],
|
|
NTFY: [
|
|
{ key: "server", label: "Server", placeholder: "https://ntfy.sh" },
|
|
{ key: "topic", label: "Topic", placeholder: "flimmer-abc123" },
|
|
{ key: "token", label: "Zugriffstoken", placeholder: "optional" },
|
|
],
|
|
GOTIFY: [
|
|
{ key: "url", label: "Server", placeholder: "https://gotify.example.com" },
|
|
{ key: "token", label: "Anwendungs-Token", placeholder: "AxB..." },
|
|
],
|
|
WEBHOOK: [
|
|
{ key: "webhookUrl", label: "Adresse", placeholder: "https://discord.com/api/webhooks/…" },
|
|
],
|
|
};
|
|
|
|
const CHANNEL_LABEL: Record<string, string> = {
|
|
EMAIL: "E-Mail",
|
|
NTFY: "ntfy",
|
|
GOTIFY: "Gotify",
|
|
WEBHOOK: "Webhook (Discord, Slack, …)",
|
|
};
|
|
|
|
export function ChannelList({
|
|
channels,
|
|
smtpReady,
|
|
}: {
|
|
channels: { id: string; kind: string; name: string; config: Record<string, string>; enabled: boolean }[];
|
|
smtpReady: boolean;
|
|
}) {
|
|
const router = useRouter();
|
|
const { report } = useToasts();
|
|
const [pending, startTransition] = useTransition();
|
|
const [kind, setKind] = useState<string>("NTFY");
|
|
const [config, setConfig] = useState<Record<string, string>>({});
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{channels.length > 0 && (
|
|
<ul className="divide-y divide-[var(--fl-border)]">
|
|
{channels.map((channel) => (
|
|
<li key={channel.id} className="flex flex-wrap items-center gap-3 py-3">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-medium">
|
|
{channel.name}
|
|
<span className="ml-2 text-xs font-normal text-[var(--fl-faint)]">
|
|
{CHANNEL_LABEL[channel.kind] ?? channel.kind}
|
|
</span>
|
|
</p>
|
|
<p className="truncate text-xs text-[var(--fl-faint)]">
|
|
{Object.entries(channel.config)
|
|
.filter(([key]) => key !== "token")
|
|
.map(([key, value]) => `${key}: ${value}`)
|
|
.join(" · ") || "ohne weitere Angaben"}
|
|
</p>
|
|
</div>
|
|
|
|
<Toggle
|
|
checked={channel.enabled}
|
|
onChange={(value) =>
|
|
startTransition(async () => {
|
|
report(await toggleChannelAction(channel.id, value));
|
|
router.refresh();
|
|
})
|
|
}
|
|
label=""
|
|
/>
|
|
<button
|
|
type="button"
|
|
disabled={pending}
|
|
onClick={() =>
|
|
startTransition(async () => {
|
|
report(await testChannelAction(channel.id));
|
|
})
|
|
}
|
|
className="fl-btn fl-btn-ghost px-3 py-1.5 text-sm"
|
|
>
|
|
Testen
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={pending}
|
|
onClick={() =>
|
|
startTransition(async () => {
|
|
report(await deleteChannelAction(channel.id));
|
|
router.refresh();
|
|
})
|
|
}
|
|
className="text-sm text-[var(--fl-faint)] underline-offset-4 hover:text-[var(--fl-danger)] hover:underline"
|
|
>
|
|
Entfernen
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
<form
|
|
action={(formData) => {
|
|
const name = String(formData.get("channelName") ?? "").trim();
|
|
if (!name) return;
|
|
startTransition(async () => {
|
|
report(await saveChannelAction({ kind, name, config }));
|
|
setConfig({});
|
|
router.refresh();
|
|
});
|
|
}}
|
|
className="space-y-4 border-t border-[var(--fl-border)] pt-5"
|
|
>
|
|
<h3 className="text-sm font-semibold">Kanal hinzufügen</h3>
|
|
|
|
<div className="space-y-1.5">
|
|
<label htmlFor="kind" className="block text-sm font-medium text-[var(--fl-muted)]">
|
|
Art
|
|
</label>
|
|
<select
|
|
id="kind"
|
|
value={kind}
|
|
onChange={(event) => {
|
|
setKind(event.target.value);
|
|
setConfig({});
|
|
}}
|
|
className="fl-input"
|
|
>
|
|
{Object.entries(CHANNEL_LABEL).map(([value, label]) => (
|
|
<option key={value} value={value}>
|
|
{label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{kind === "EMAIL" && !smtpReady && (
|
|
<p className="text-xs text-[var(--fl-warning)]">
|
|
Für diese Instanz ist kein SMTP-Zugang eingerichtet — E-Mails können nicht verschickt
|
|
werden.
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<Field id="channelName" label="Name" placeholder="z. B. Handy" required />
|
|
|
|
{(CHANNEL_FIELDS[kind] ?? []).map((field) => (
|
|
<div key={field.key} className="space-y-1.5">
|
|
<label
|
|
htmlFor={`cfg-${field.key}`}
|
|
className="block text-sm font-medium text-[var(--fl-muted)]"
|
|
>
|
|
{field.label}
|
|
</label>
|
|
<input
|
|
id={`cfg-${field.key}`}
|
|
value={config[field.key] ?? ""}
|
|
onChange={(event) => setConfig({ ...config, [field.key]: event.target.value })}
|
|
placeholder={field.placeholder}
|
|
className="fl-input"
|
|
/>
|
|
</div>
|
|
))}
|
|
|
|
<button type="submit" disabled={pending} className="fl-btn fl-btn-primary">
|
|
Kanal anlegen
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Import
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export function ImportForm() {
|
|
const router = useRouter();
|
|
const { report } = useToasts();
|
|
const [pending, startTransition] = useTransition();
|
|
const [format, setFormat] = useState<"csv" | "trakt">("csv");
|
|
const [summary, setSummary] = useState<string[] | null>(null);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex gap-2">
|
|
{(["csv", "trakt"] as const).map((option) => (
|
|
<button
|
|
key={option}
|
|
type="button"
|
|
onClick={() => setFormat(option)}
|
|
aria-pressed={format === option}
|
|
className="rounded-full border px-4 py-2 text-sm font-medium transition-colors"
|
|
style={
|
|
format === option
|
|
? {
|
|
backgroundImage: "var(--fl-gradient)",
|
|
color: "var(--fl-on-accent)",
|
|
borderColor: "transparent",
|
|
}
|
|
: { borderColor: "var(--fl-border)", color: "var(--fl-muted)" }
|
|
}
|
|
>
|
|
{option === "csv" ? "CSV" : "Trakt.tv (JSON)"}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<p className="text-sm text-[var(--fl-muted)]">
|
|
{format === "csv"
|
|
? "Die Kopfzeile braucht mindestens eine Spalte mit dem Titel. Erkannt werden außerdem Typ, Status, Bewertung, TMDB, Jahr und Notiz."
|
|
: "Ein Export aus Trakt.tv — Watchlist, History, Ratings oder Collection. Flimmer sucht selbst die Einträge heraus."}
|
|
</p>
|
|
|
|
<input
|
|
type="file"
|
|
accept={format === "csv" ? ".csv,text/csv" : ".json,application/json"}
|
|
onChange={(event) => {
|
|
const file = event.target.files?.[0];
|
|
if (!file) return;
|
|
setSummary(null);
|
|
|
|
startTransition(async () => {
|
|
const content = await file.text();
|
|
const result = await importDataAction(format, content);
|
|
report({ ok: result.ok, message: result.message });
|
|
|
|
if (result.summary) {
|
|
setSummary([
|
|
`${result.summary.processed} Zeilen gelesen`,
|
|
`${result.summary.added} neu aufgenommen`,
|
|
`${result.summary.skipped} übersprungen (schon vorhanden oder unvollständig)`,
|
|
...result.summary.errors.slice(0, 5),
|
|
]);
|
|
}
|
|
router.refresh();
|
|
});
|
|
}}
|
|
disabled={pending}
|
|
className="fl-input file:mr-3 file:rounded-lg file:border-0 file:bg-[var(--fl-surface-2)] file:px-3 file:py-1.5 file:text-sm file:text-[var(--fl-text)]"
|
|
/>
|
|
|
|
<p className="text-xs text-[var(--fl-faint)]">
|
|
Der Import überschreibt nichts: Titel, die schon in deiner Bibliothek liegen, bleiben
|
|
unangetastet.
|
|
</p>
|
|
|
|
{summary && (
|
|
<ul className="rounded-xl border border-[var(--fl-border)] p-3 text-sm text-[var(--fl-muted)]">
|
|
{summary.map((line, index) => (
|
|
<li key={index}>{line}</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Verwaltung
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export function AdminSettings({
|
|
registrationEnabled,
|
|
publicProfilesEnabled,
|
|
instanceName,
|
|
}: {
|
|
registrationEnabled: boolean;
|
|
publicProfilesEnabled: boolean;
|
|
instanceName: string;
|
|
}) {
|
|
const router = useRouter();
|
|
const { report } = useToasts();
|
|
const [pending, startTransition] = useTransition();
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<form
|
|
action={(formData) =>
|
|
startTransition(async () => {
|
|
report(await setInstanceNameAction(String(formData.get("instanceName") ?? "")));
|
|
router.refresh();
|
|
})
|
|
}
|
|
className="flex flex-wrap items-end gap-2"
|
|
>
|
|
<div className="min-w-48 flex-1">
|
|
<Field id="instanceName" label="Name der Instanz" defaultValue={instanceName} />
|
|
</div>
|
|
<button type="submit" disabled={pending} className="fl-btn fl-btn-ghost">
|
|
Speichern
|
|
</button>
|
|
</form>
|
|
|
|
<Toggle
|
|
checked={registrationEnabled}
|
|
onChange={(value) =>
|
|
startTransition(async () => {
|
|
report(await setRegistrationAction(value));
|
|
router.refresh();
|
|
})
|
|
}
|
|
label="Registrierung offen"
|
|
hint="Solange es kein einziges Konto gibt, bleibt die Registrierung unabhängig davon offen."
|
|
/>
|
|
|
|
<Toggle
|
|
checked={publicProfilesEnabled}
|
|
onChange={(value) =>
|
|
startTransition(async () => {
|
|
report(await setPublicProfilesAction(value));
|
|
router.refresh();
|
|
})
|
|
}
|
|
label="Öffentliche Profile erlauben"
|
|
hint="Schaltet die Profilseiten instanzweit ab, unabhängig von der Einstellung der Nutzer."
|
|
/>
|
|
|
|
<div className="border-t border-[var(--fl-border)] pt-5">
|
|
<button
|
|
type="button"
|
|
disabled={pending}
|
|
onClick={() =>
|
|
startTransition(async () => {
|
|
report(await runSyncAction());
|
|
router.refresh();
|
|
})
|
|
}
|
|
className="fl-btn fl-btn-primary"
|
|
>
|
|
{pending ? "Läuft …" : "Abgleich jetzt starten"}
|
|
</button>
|
|
<p className="mt-2 text-xs text-[var(--fl-faint)]">
|
|
Frischt laufende Serien bei TMDB auf, verschickt fällige Benachrichtigungen und räumt den
|
|
Papierkorb. Kann eine Weile dauern.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function UserRow({
|
|
user,
|
|
isSelf,
|
|
}: {
|
|
user: { id: string; name: string; email: string; role: string; isActive: boolean; entries: number };
|
|
isSelf: boolean;
|
|
}) {
|
|
const router = useRouter();
|
|
const { report } = useToasts();
|
|
const [pending, startTransition] = useTransition();
|
|
|
|
return (
|
|
<li className="flex flex-wrap items-center gap-3 py-3">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-medium">
|
|
{user.name}
|
|
{user.role === "ADMIN" && (
|
|
<span
|
|
className="ml-2 rounded-full px-2 py-0.5 text-[0.65rem] font-semibold text-[var(--fl-on-accent)]"
|
|
style={{ backgroundImage: "var(--fl-gradient)" }}
|
|
>
|
|
Verwaltung
|
|
</span>
|
|
)}
|
|
{!user.isActive && (
|
|
<span className="ml-2 text-[0.65rem] font-semibold text-[var(--fl-danger)]">gesperrt</span>
|
|
)}
|
|
</p>
|
|
<p className="truncate text-xs text-[var(--fl-faint)]">
|
|
{user.email} · {user.entries} {user.entries === 1 ? "Titel" : "Titel"}
|
|
</p>
|
|
</div>
|
|
|
|
{!isSelf && (
|
|
<>
|
|
<button
|
|
type="button"
|
|
disabled={pending}
|
|
onClick={() =>
|
|
startTransition(async () => {
|
|
report(await setUserRoleAction(user.id, user.role === "ADMIN" ? "USER" : "ADMIN"));
|
|
router.refresh();
|
|
})
|
|
}
|
|
className="fl-btn fl-btn-ghost px-3 py-1.5 text-sm"
|
|
>
|
|
{user.role === "ADMIN" ? "Rechte entziehen" : "Zur Verwaltung"}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={pending}
|
|
onClick={() =>
|
|
startTransition(async () => {
|
|
report(await setUserActiveAction(user.id, !user.isActive));
|
|
router.refresh();
|
|
})
|
|
}
|
|
className="text-sm text-[var(--fl-faint)] underline-offset-4 hover:text-[var(--fl-text)] hover:underline"
|
|
>
|
|
{user.isActive ? "Sperren" : "Freigeben"}
|
|
</button>
|
|
</>
|
|
)}
|
|
</li>
|
|
);
|
|
}
|