2026-10-01 20:16:27 +02:00
|
|
|
import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
|
|
|
import { useEffect, useState } from "react";
|
2026-09-16 20:34:08 +02:00
|
|
|
|
|
|
|
|
import { useT } from "../i18n";
|
|
|
|
|
import { api, ApiError } from "../lib/api";
|
|
|
|
|
import { useMe } from "../lib/auth";
|
2026-10-01 20:16:27 +02:00
|
|
|
import type { AdminMail, AdminUser } from "../lib/types";
|
2026-09-16 20:34:08 +02:00
|
|
|
|
|
|
|
|
const GIB = 1024 ** 3;
|
|
|
|
|
|
|
|
|
|
const inputClass =
|
|
|
|
|
"w-full rounded-lg border border-app-border bg-app-surface px-3 py-2 text-app-fg placeholder:text-app-faint focus:border-app-accent focus:outline-none";
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The admin application. Three states: signed out (login), signed in without the
|
|
|
|
|
* administrator flag (refused), signed in as an administrator (the panel).
|
|
|
|
|
*
|
|
|
|
|
* The login here is the ordinary session login — same cookie, same endpoint as
|
|
|
|
|
* the mail client. What makes this a separate thing is that the bundle is served
|
|
|
|
|
* only on the admin listener, and every action it performs hits /api/admin/*,
|
|
|
|
|
* which the public listener refuses outright.
|
|
|
|
|
*/
|
|
|
|
|
export function AdminApp() {
|
|
|
|
|
const t = useT();
|
|
|
|
|
const me = useMe();
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="min-h-screen bg-app-bg text-app-fg">
|
|
|
|
|
<header className="border-b border-app-border px-6 py-3">
|
|
|
|
|
<h1 className="font-semibold">{t("admin.title")}</h1>
|
|
|
|
|
</header>
|
2026-10-01 20:16:27 +02:00
|
|
|
{/* Two columns once there is room: instance settings and users on the
|
|
|
|
|
left, outgoing system mail on the right. Signed out, it stays narrow. */}
|
|
|
|
|
<main className={`mx-auto px-6 py-10 ${me.data?.is_admin ? "max-w-6xl" : "max-w-2xl"}`}>
|
2026-09-16 20:34:08 +02:00
|
|
|
{me.isPending && <p className="text-sm text-app-muted">{t("common.loading")}</p>}
|
|
|
|
|
{!me.isPending && !me.data && <SignIn />}
|
|
|
|
|
{me.data && !me.data.is_admin && <NotAdmin handle={me.data.handle} />}
|
2026-10-01 20:16:27 +02:00
|
|
|
{me.data?.is_admin && (
|
|
|
|
|
<div className="grid gap-y-10 lg:grid-cols-2">
|
|
|
|
|
<div className="min-w-0 lg:pr-12">
|
|
|
|
|
<Panel handle={me.data.handle} />
|
|
|
|
|
<Users selfId={me.data.id} />
|
|
|
|
|
</div>
|
|
|
|
|
{/* The divider runs the full height of the taller column. */}
|
|
|
|
|
<div className="min-w-0 lg:border-l lg:border-app-border lg:pl-12">
|
|
|
|
|
<SystemMail />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
2026-09-16 20:34:08 +02:00
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function SignIn() {
|
|
|
|
|
const t = useT();
|
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
|
const [handle, setHandle] = useState("");
|
|
|
|
|
const [password, setPassword] = useState("");
|
|
|
|
|
const [totp, setTotp] = useState("");
|
|
|
|
|
const [needTotp, setNeedTotp] = useState(false);
|
|
|
|
|
|
|
|
|
|
const login = useMutation({
|
|
|
|
|
mutationFn: () => api.login(handle, password, needTotp ? totp : undefined),
|
|
|
|
|
onSuccess: (user) => queryClient.setQueryData(["me"], user),
|
|
|
|
|
onError: (error) => {
|
|
|
|
|
if (error instanceof ApiError && (error.code === "totp_required" || error.code === "totp_invalid")) {
|
|
|
|
|
setNeedTotp(true);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const error = login.error instanceof ApiError ? login.error : null;
|
|
|
|
|
const showError = error && !(needTotp && error.code === "totp_required");
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<section className="mx-auto max-w-sm">
|
|
|
|
|
<h2 className="mb-1 text-2xl font-semibold">{t("admin.signInTitle")}</h2>
|
|
|
|
|
<p className="mb-6 text-sm text-app-muted">{t("admin.signInHint")}</p>
|
|
|
|
|
<form
|
|
|
|
|
className="space-y-3"
|
|
|
|
|
onSubmit={(e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
login.mutate();
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
className={inputClass}
|
|
|
|
|
placeholder={t("auth.handlePlaceholder")}
|
|
|
|
|
value={handle}
|
|
|
|
|
onChange={(e) => setHandle(e.target.value)}
|
|
|
|
|
disabled={needTotp}
|
|
|
|
|
autoFocus
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
className={inputClass}
|
|
|
|
|
type="password"
|
|
|
|
|
placeholder={t("auth.password")}
|
|
|
|
|
value={password}
|
|
|
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
|
|
|
disabled={needTotp}
|
|
|
|
|
/>
|
|
|
|
|
{needTotp && (
|
|
|
|
|
<div className="space-y-1">
|
|
|
|
|
<input
|
|
|
|
|
className={`${inputClass} tracking-widest`}
|
|
|
|
|
placeholder="123456"
|
|
|
|
|
inputMode="numeric"
|
|
|
|
|
autoComplete="one-time-code"
|
|
|
|
|
value={totp}
|
|
|
|
|
onChange={(e) => setTotp(e.target.value)}
|
|
|
|
|
autoFocus
|
|
|
|
|
/>
|
|
|
|
|
<p className="text-xs text-app-muted">{t("auth.totpPrompt")}</p>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
<button
|
|
|
|
|
className="w-full rounded-lg bg-app-accent py-2 font-medium text-app-accent-fg hover:opacity-90 disabled:opacity-50"
|
|
|
|
|
disabled={login.isPending}
|
|
|
|
|
type="submit"
|
|
|
|
|
>
|
|
|
|
|
{login.isPending ? t("auth.signingIn") : t("auth.signIn")}
|
|
|
|
|
</button>
|
|
|
|
|
{showError && <p className="text-sm text-red-500">{error.message}</p>}
|
|
|
|
|
</form>
|
|
|
|
|
</section>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function SignOutButton() {
|
|
|
|
|
const t = useT();
|
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
|
const logout = useMutation({
|
|
|
|
|
mutationFn: api.logout,
|
|
|
|
|
onSuccess: () => queryClient.setQueryData(["me"], null),
|
|
|
|
|
});
|
|
|
|
|
return (
|
|
|
|
|
<button
|
|
|
|
|
className="rounded border border-app-border px-3 py-1 text-sm text-app-muted hover:bg-app-hover"
|
|
|
|
|
onClick={() => logout.mutate()}
|
|
|
|
|
>
|
|
|
|
|
{t("admin.signOut")}
|
|
|
|
|
</button>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function NotAdmin({ handle }: { handle: string }) {
|
|
|
|
|
const t = useT();
|
|
|
|
|
return (
|
|
|
|
|
<section className="space-y-3">
|
|
|
|
|
<h2 className="text-2xl font-semibold">{t("admin.notAdminTitle")}</h2>
|
|
|
|
|
<p className="text-sm text-app-muted">{t("admin.notAdmin", { handle })}</p>
|
|
|
|
|
<SignOutButton />
|
|
|
|
|
</section>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Panel({ handle }: { handle: string }) {
|
|
|
|
|
const t = useT();
|
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
|
const settings = useQuery({ queryKey: ["adminSettings"], queryFn: api.adminSettings });
|
|
|
|
|
|
|
|
|
|
// The quota field is a draft until Save — unlike the toggle, you do not want a
|
|
|
|
|
// write per keystroke. `null` means "not edited yet, show the server's value".
|
|
|
|
|
const [quotaDraft, setQuotaDraft] = useState<string | null>(null);
|
|
|
|
|
|
|
|
|
|
const save = useMutation({
|
|
|
|
|
mutationFn: api.saveAdminSettings,
|
|
|
|
|
onSuccess: (data) => {
|
|
|
|
|
queryClient.setQueryData(["adminSettings"], data);
|
|
|
|
|
setQuotaDraft(null);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const open = settings.data?.registration_open ?? false;
|
|
|
|
|
const serverQuotaGib = settings.data ? settings.data.default_quota_bytes / GIB : 0;
|
|
|
|
|
const quotaValue = quotaDraft ?? String(Number(serverQuotaGib.toFixed(3)));
|
|
|
|
|
const quotaGib = Number(quotaValue);
|
|
|
|
|
const quotaValid = Number.isFinite(quotaGib) && quotaGib > 0;
|
|
|
|
|
const quotaDirty = quotaDraft !== null && quotaGib !== serverQuotaGib;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<section className="space-y-3">
|
|
|
|
|
<div className="flex items-center justify-between">
|
|
|
|
|
<p className="text-sm text-app-muted">{t("admin.signedInAs", { handle })}</p>
|
|
|
|
|
<SignOutButton />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{settings.isPending && <p className="text-sm text-app-muted">{t("common.loading")}</p>}
|
|
|
|
|
{settings.error instanceof ApiError && (
|
|
|
|
|
<p className="text-sm text-red-500">{settings.error.message}</p>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
{settings.data && (
|
|
|
|
|
<>
|
|
|
|
|
<div className="border-b border-app-border py-2">
|
|
|
|
|
<div className="flex items-center justify-between text-sm">
|
|
|
|
|
<span className="text-app-muted">{t("admin.registration")}</span>
|
|
|
|
|
<div className="flex gap-1 rounded-lg border border-app-border p-0.5">
|
|
|
|
|
{([true, false] as const).map((value) => (
|
|
|
|
|
<button
|
|
|
|
|
key={String(value)}
|
|
|
|
|
disabled={save.isPending}
|
|
|
|
|
onClick={() => save.mutate({ registration_open: value })}
|
|
|
|
|
className={`rounded px-3 py-1 disabled:opacity-50 ${
|
|
|
|
|
open === value
|
|
|
|
|
? "bg-app-active font-medium text-app-fg"
|
|
|
|
|
: "text-app-muted hover:bg-app-hover"
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
{t(value ? "admin.registrationOn" : "admin.registrationOff")}
|
|
|
|
|
</button>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<p className="mt-1 text-xs text-app-faint">{t("admin.registrationHelp")}</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="border-b border-app-border py-2">
|
|
|
|
|
<div className="flex items-center justify-between text-sm">
|
|
|
|
|
<span className="text-app-muted">{t("admin.defaultQuota")}</span>
|
|
|
|
|
<div className="flex items-center gap-2">
|
|
|
|
|
<input
|
|
|
|
|
className="w-28 rounded border border-app-border bg-app-surface px-2 py-1 text-right focus:border-app-accent focus:outline-none"
|
|
|
|
|
type="number"
|
|
|
|
|
min="0.1"
|
|
|
|
|
step="0.5"
|
|
|
|
|
value={quotaValue}
|
|
|
|
|
onChange={(e) => setQuotaDraft(e.target.value)}
|
|
|
|
|
/>
|
|
|
|
|
<span className="text-app-muted">GiB</span>
|
|
|
|
|
<button
|
|
|
|
|
className="rounded bg-app-accent px-3 py-1 font-medium text-app-accent-fg hover:opacity-90 disabled:opacity-50"
|
|
|
|
|
disabled={!quotaDirty || !quotaValid || save.isPending}
|
|
|
|
|
onClick={() => save.mutate({ default_quota_bytes: Math.round(quotaGib * GIB) })}
|
|
|
|
|
>
|
|
|
|
|
{save.isPending ? t("admin.saving") : t("admin.save")}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<p className="mt-1 text-xs text-app-faint">{t("admin.quotaHelp")}</p>
|
|
|
|
|
{!quotaValid && <p className="mt-1 text-xs text-red-500">{t("admin.quotaInvalid")}</p>}
|
|
|
|
|
{save.error instanceof ApiError && (
|
|
|
|
|
<p className="mt-1 text-xs text-red-500">{save.error.message}</p>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</section>
|
|
|
|
|
);
|
|
|
|
|
}
|
2026-10-01 20:16:27 +02:00
|
|
|
|
|
|
|
|
type MailDraft = Omit<AdminMail, "has_password" | "configured">;
|
|
|
|
|
|
|
|
|
|
/** The SMTP account the server sends password-reset links from. */
|
|
|
|
|
function SystemMail() {
|
|
|
|
|
const t = useT();
|
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
|
const mail = useQuery({ queryKey: ["adminMail"], queryFn: api.adminMail });
|
|
|
|
|
// Edits are a draft until Save; null means "show what the server has".
|
|
|
|
|
const [draft, setDraft] = useState<MailDraft | null>(null);
|
|
|
|
|
const [password, setPassword] = useState("");
|
|
|
|
|
const [testTo, setTestTo] = useState("");
|
|
|
|
|
|
|
|
|
|
const save = useMutation({
|
|
|
|
|
mutationFn: (body: Parameters<typeof api.saveAdminMail>[0]) => api.saveAdminMail(body),
|
|
|
|
|
onSuccess: (data) => {
|
|
|
|
|
queryClient.setQueryData(["adminMail"], data);
|
|
|
|
|
setDraft(null);
|
|
|
|
|
setPassword("");
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
const test = useMutation({ mutationFn: () => api.testAdminMail(testTo.trim()) });
|
|
|
|
|
|
|
|
|
|
if (!mail.data) {
|
|
|
|
|
return mail.error instanceof ApiError ? (
|
|
|
|
|
<p className="text-sm text-red-500">{mail.error.message}</p>
|
|
|
|
|
) : null;
|
|
|
|
|
}
|
|
|
|
|
const server = mail.data;
|
|
|
|
|
const value: MailDraft = draft ?? {
|
|
|
|
|
smtp_host: server.smtp_host,
|
|
|
|
|
smtp_port: server.smtp_port,
|
|
|
|
|
smtp_security: server.smtp_security,
|
|
|
|
|
smtp_username: server.smtp_username,
|
|
|
|
|
smtp_from: server.smtp_from,
|
|
|
|
|
public_url: server.public_url,
|
|
|
|
|
};
|
|
|
|
|
const set = (patch: Partial<MailDraft>) => setDraft({ ...value, ...patch });
|
|
|
|
|
const dirty = draft !== null || password !== "";
|
|
|
|
|
const field =
|
|
|
|
|
"w-full rounded border border-app-border bg-app-surface px-2 py-1.5 text-sm focus:border-app-accent focus:outline-none";
|
|
|
|
|
const label = "block space-y-1 text-sm";
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<section className="space-y-3">
|
|
|
|
|
<h2 className="text-lg font-semibold">{t("admin.mail")}</h2>
|
|
|
|
|
<p className="text-xs text-app-faint">{t("admin.mailHelp")}</p>
|
|
|
|
|
<p className={`text-sm ${server.configured ? "text-emerald-600" : "text-amber-600"}`}>
|
|
|
|
|
{server.configured ? t("admin.mailOn") : t("admin.mailOff")}
|
|
|
|
|
</p>
|
|
|
|
|
<form
|
|
|
|
|
className="space-y-3"
|
|
|
|
|
onSubmit={(e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
save.mutate({ ...value, ...(password ? { smtp_password: password } : {}) });
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div className="grid grid-cols-[1fr_6rem_8rem] gap-2">
|
|
|
|
|
<label className={label}>
|
|
|
|
|
<span className="text-app-muted">{t("admin.smtpHost")}</span>
|
|
|
|
|
<input
|
|
|
|
|
className={field}
|
|
|
|
|
value={value.smtp_host}
|
|
|
|
|
placeholder="smtp.example.com"
|
|
|
|
|
onChange={(e) => set({ smtp_host: e.target.value })}
|
|
|
|
|
/>
|
|
|
|
|
</label>
|
|
|
|
|
<label className={label}>
|
|
|
|
|
<span className="text-app-muted">{t("admin.smtpPort")}</span>
|
|
|
|
|
<input
|
|
|
|
|
className={field}
|
|
|
|
|
type="number"
|
|
|
|
|
min="1"
|
|
|
|
|
max="65535"
|
|
|
|
|
value={value.smtp_port}
|
|
|
|
|
onChange={(e) => set({ smtp_port: Number(e.target.value) })}
|
|
|
|
|
/>
|
|
|
|
|
</label>
|
|
|
|
|
<label className={label}>
|
|
|
|
|
<span className="text-app-muted">{t("admin.smtpSecurity")}</span>
|
|
|
|
|
<select
|
|
|
|
|
className={field}
|
|
|
|
|
value={value.smtp_security}
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
const security = e.target.value as MailDraft["smtp_security"];
|
|
|
|
|
// Follow the usual port for the mode, unless a custom one was typed.
|
|
|
|
|
const usual = { starttls: 587, ssl: 465, none: 25 };
|
|
|
|
|
const port = Object.values(usual).includes(value.smtp_port) ? usual[security] : value.smtp_port;
|
|
|
|
|
set({ smtp_security: security, smtp_port: port });
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<option value="starttls">{t("admin.smtpStarttls")}</option>
|
|
|
|
|
<option value="ssl">{t("admin.smtpSsl")}</option>
|
|
|
|
|
<option value="none">{t("admin.smtpNone")}</option>
|
|
|
|
|
</select>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
|
|
|
<label className={label}>
|
|
|
|
|
<span className="text-app-muted">{t("admin.smtpUsername")}</span>
|
|
|
|
|
<input
|
|
|
|
|
className={field}
|
|
|
|
|
autoComplete="off"
|
|
|
|
|
value={value.smtp_username}
|
|
|
|
|
placeholder="postmaster@example.com"
|
|
|
|
|
onChange={(e) => set({ smtp_username: e.target.value })}
|
|
|
|
|
/>
|
|
|
|
|
</label>
|
|
|
|
|
<label className={label}>
|
|
|
|
|
<span className="text-app-muted">{t("admin.smtpPassword")}</span>
|
|
|
|
|
<input
|
|
|
|
|
className={field}
|
|
|
|
|
type="password"
|
|
|
|
|
autoComplete="new-password"
|
|
|
|
|
value={password}
|
|
|
|
|
placeholder={server.has_password ? t("admin.smtpPasswordKept") : ""}
|
|
|
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
|
|
|
/>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<label className={label}>
|
|
|
|
|
<span className="text-app-muted">{t("admin.smtpFrom")}</span>
|
|
|
|
|
<input
|
|
|
|
|
className={field}
|
|
|
|
|
type="email"
|
|
|
|
|
value={value.smtp_from}
|
|
|
|
|
placeholder="postmaster@example.com"
|
|
|
|
|
onChange={(e) => set({ smtp_from: e.target.value })}
|
|
|
|
|
/>
|
|
|
|
|
</label>
|
|
|
|
|
<label className={label}>
|
|
|
|
|
<span className="text-app-muted">{t("admin.publicUrl")}</span>
|
|
|
|
|
<input
|
|
|
|
|
className={field}
|
|
|
|
|
value={value.public_url}
|
|
|
|
|
placeholder="https://mail.example.com"
|
|
|
|
|
onChange={(e) => set({ public_url: e.target.value })}
|
|
|
|
|
/>
|
|
|
|
|
<span className="block text-xs text-app-faint">{t("admin.publicUrlHint")}</span>
|
|
|
|
|
</label>
|
|
|
|
|
<div className="flex items-center justify-between gap-2">
|
|
|
|
|
{server.has_password ? (
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
className="text-xs text-app-muted underline hover:text-app-fg disabled:opacity-50"
|
|
|
|
|
disabled={save.isPending}
|
|
|
|
|
onClick={() => save.mutate({ smtp_password: "" })}
|
|
|
|
|
>
|
|
|
|
|
{t("admin.smtpPasswordRemove")}
|
|
|
|
|
</button>
|
|
|
|
|
) : (
|
|
|
|
|
<span />
|
|
|
|
|
)}
|
|
|
|
|
<button
|
|
|
|
|
type="submit"
|
|
|
|
|
className="rounded bg-app-accent px-3 py-1 text-sm font-medium text-app-accent-fg hover:opacity-90 disabled:opacity-50"
|
|
|
|
|
disabled={!dirty || save.isPending}
|
|
|
|
|
>
|
|
|
|
|
{save.isPending ? t("admin.saving") : t("admin.save")}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
{save.error instanceof ApiError && <p className="text-xs text-red-500">{save.error.message}</p>}
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<form
|
|
|
|
|
className="flex items-center gap-2 border-t border-app-border pt-3 text-sm"
|
|
|
|
|
onSubmit={(e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
test.mutate();
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<span className="shrink-0 text-app-muted">{t("admin.testTo")}</span>
|
|
|
|
|
<input
|
|
|
|
|
className={field}
|
|
|
|
|
type="email"
|
|
|
|
|
value={testTo}
|
|
|
|
|
placeholder="you@example.com"
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
setTestTo(e.target.value);
|
|
|
|
|
test.reset();
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<button
|
|
|
|
|
type="submit"
|
|
|
|
|
className="shrink-0 rounded border border-app-border px-3 py-1 hover:bg-app-hover disabled:opacity-50"
|
|
|
|
|
disabled={!server.configured || !testTo.trim() || test.isPending || dirty}
|
|
|
|
|
>
|
|
|
|
|
{test.isPending ? t("auth.sending") : t("admin.sendTest")}
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
|
|
|
|
{test.isSuccess && <p className="text-xs text-emerald-600">{t("admin.testSent")}</p>}
|
|
|
|
|
{test.error instanceof ApiError && <p className="text-xs text-red-500">{test.error.message}</p>}
|
|
|
|
|
</section>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function formatBytes(bytes: number): string {
|
|
|
|
|
if (bytes >= GIB) return `${Number((bytes / GIB).toFixed(2))} GiB`;
|
|
|
|
|
return `${Number((bytes / 1024 ** 2).toFixed(1))} MiB`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** Find a user by login, mail address or name, and open them to manage. */
|
|
|
|
|
function Users({ selfId }: { selfId: string }) {
|
|
|
|
|
const t = useT();
|
|
|
|
|
const [term, setTerm] = useState("");
|
|
|
|
|
const [query, setQuery] = useState("");
|
|
|
|
|
const [openId, setOpenId] = useState<string | null>(null);
|
|
|
|
|
|
|
|
|
|
// Search as you type, but not on every keystroke.
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const id = window.setTimeout(() => setQuery(term.trim()), 250);
|
|
|
|
|
return () => window.clearTimeout(id);
|
|
|
|
|
}, [term]);
|
|
|
|
|
|
|
|
|
|
// Only search results are listed: nothing until something is typed.
|
|
|
|
|
const users = useQuery({
|
|
|
|
|
queryKey: ["adminUsers", query],
|
|
|
|
|
queryFn: () => api.adminUsers(query),
|
|
|
|
|
enabled: query !== "",
|
|
|
|
|
placeholderData: keepPreviousData,
|
|
|
|
|
});
|
|
|
|
|
const results = query ? users.data : undefined;
|
|
|
|
|
const open = results?.find((u) => u.id === openId) ?? null;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<section className="mt-10 space-y-3">
|
|
|
|
|
<h2 className="text-lg font-semibold">{t("admin.users")}</h2>
|
|
|
|
|
<input
|
|
|
|
|
className={inputClass}
|
|
|
|
|
type="search"
|
|
|
|
|
placeholder={t("admin.userSearch")}
|
|
|
|
|
value={term}
|
|
|
|
|
onChange={(e) => setTerm(e.target.value)}
|
|
|
|
|
/>
|
|
|
|
|
{users.error instanceof ApiError && (
|
|
|
|
|
<p className="text-sm text-red-500">{users.error.message}</p>
|
|
|
|
|
)}
|
|
|
|
|
{results && results.length === 0 && (
|
|
|
|
|
<p className="text-sm text-app-muted">{t("admin.noUsers")}</p>
|
|
|
|
|
)}
|
|
|
|
|
{results && results.length > 0 && (
|
|
|
|
|
<ul className="divide-y divide-app-border rounded-lg border border-app-border">
|
|
|
|
|
{results.map((u) => (
|
|
|
|
|
<li key={u.id}>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
onClick={() => setOpenId(u.id)}
|
|
|
|
|
className="flex w-full items-center gap-3 px-3 py-2 text-left hover:bg-app-hover"
|
|
|
|
|
>
|
|
|
|
|
<span className="min-w-0 flex-1">
|
|
|
|
|
<span className="flex items-center gap-1.5">
|
|
|
|
|
<span className="truncate font-medium">{u.handle}</span>
|
|
|
|
|
<Badges user={u} self={u.id === selfId} />
|
|
|
|
|
</span>
|
|
|
|
|
<span className="block truncate text-xs text-app-muted">
|
|
|
|
|
{u.accounts.length ? u.accounts.join(", ") : t("admin.noMailAccounts")}
|
|
|
|
|
</span>
|
|
|
|
|
</span>
|
|
|
|
|
<span className="shrink-0 text-xs tabular-nums text-app-muted">
|
|
|
|
|
{t("admin.usage", {
|
|
|
|
|
used: formatBytes(u.used_bytes),
|
|
|
|
|
quota: formatBytes(u.quota_bytes),
|
|
|
|
|
})}
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
</li>
|
|
|
|
|
))}
|
|
|
|
|
</ul>
|
|
|
|
|
)}
|
|
|
|
|
{open && <UserDialog user={open} self={open.id === selfId} onClose={() => setOpenId(null)} />}
|
|
|
|
|
</section>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Badges({ user, self }: { user: AdminUser; self: boolean }) {
|
|
|
|
|
const t = useT();
|
|
|
|
|
const badge = "shrink-0 rounded px-1.5 text-[11px] font-medium";
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{self && <span className={`${badge} bg-app-hover text-app-muted`}>{t("admin.you")}</span>}
|
|
|
|
|
{user.is_admin && (
|
|
|
|
|
<span className={`${badge} bg-app-accent/15 text-app-accent`}>{t("admin.adminBadge")}</span>
|
|
|
|
|
)}
|
|
|
|
|
{user.blocked_at && (
|
|
|
|
|
<span className={`${badge} bg-red-500/15 text-red-500`}>{t("admin.blockedBadge")}</span>
|
|
|
|
|
)}
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** One user: change their quota, block or unblock them, or delete them. */
|
|
|
|
|
function UserDialog({
|
|
|
|
|
user,
|
|
|
|
|
self,
|
|
|
|
|
onClose,
|
|
|
|
|
}: {
|
|
|
|
|
user: AdminUser;
|
|
|
|
|
self: boolean;
|
|
|
|
|
onClose: () => void;
|
|
|
|
|
}) {
|
|
|
|
|
const t = useT();
|
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
|
const [quotaDraft, setQuotaDraft] = useState<string | null>(null);
|
|
|
|
|
const [confirm, setConfirm] = useState<null | "block" | "delete">(null);
|
|
|
|
|
|
|
|
|
|
const refresh = () => queryClient.invalidateQueries({ queryKey: ["adminUsers"] });
|
|
|
|
|
const update = useMutation({
|
|
|
|
|
mutationFn: (body: { quota_bytes?: number; blocked?: boolean }) =>
|
|
|
|
|
api.updateAdminUser(user.id, body),
|
|
|
|
|
onSuccess: () => {
|
|
|
|
|
setQuotaDraft(null);
|
|
|
|
|
setConfirm(null);
|
|
|
|
|
void refresh();
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
const remove = useMutation({
|
|
|
|
|
mutationFn: () => api.deleteAdminUser(user.id),
|
|
|
|
|
onSuccess: () => {
|
|
|
|
|
onClose();
|
|
|
|
|
void refresh();
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const onKey = (e: KeyboardEvent) => {
|
|
|
|
|
if (e.key !== "Escape") return;
|
|
|
|
|
if (confirm) setConfirm(null);
|
|
|
|
|
else onClose();
|
|
|
|
|
};
|
|
|
|
|
window.addEventListener("keydown", onKey);
|
|
|
|
|
return () => window.removeEventListener("keydown", onKey);
|
|
|
|
|
}, [confirm, onClose]);
|
|
|
|
|
|
|
|
|
|
const serverGib = user.quota_bytes / GIB;
|
|
|
|
|
const quotaValue = quotaDraft ?? String(Number(serverGib.toFixed(3)));
|
|
|
|
|
const quotaGib = Number(quotaValue);
|
|
|
|
|
const quotaValid = Number.isFinite(quotaGib) && quotaGib > 0;
|
|
|
|
|
const quotaDirty = quotaDraft !== null && quotaGib !== serverGib;
|
|
|
|
|
const busy = update.isPending || remove.isPending;
|
|
|
|
|
const error = [update.error, remove.error].find((e) => e instanceof ApiError) as
|
|
|
|
|
| ApiError
|
|
|
|
|
| undefined;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="fixed inset-0 z-40 flex items-center justify-center bg-black/40 p-4" onClick={onClose}>
|
|
|
|
|
<div
|
|
|
|
|
role="dialog"
|
|
|
|
|
aria-modal="true"
|
|
|
|
|
aria-label={user.handle}
|
|
|
|
|
className="relative w-full max-w-md rounded-xl border border-app-border bg-app-elevated p-5 shadow-2xl"
|
|
|
|
|
onClick={(e) => e.stopPropagation()}
|
|
|
|
|
>
|
|
|
|
|
<div className="mb-4 flex items-start gap-3">
|
|
|
|
|
<div className="min-w-0 flex-1">
|
|
|
|
|
<h3 className="flex items-center gap-1.5 font-semibold">
|
|
|
|
|
<span className="truncate">{user.handle}</span>
|
|
|
|
|
<Badges user={user} self={self} />
|
|
|
|
|
</h3>
|
|
|
|
|
<p className="mt-0.5 text-xs text-app-muted">
|
|
|
|
|
{user.accounts.length ? user.accounts.join(", ") : t("admin.noMailAccounts")}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
onClick={onClose}
|
|
|
|
|
title={t("admin.close")}
|
|
|
|
|
aria-label={t("admin.close")}
|
|
|
|
|
className="rounded p-1 text-app-muted hover:bg-app-hover hover:text-app-fg"
|
|
|
|
|
>
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden>
|
|
|
|
|
<path d="M4 4l8 8M12 4l-8 8" />
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="border-y border-app-border py-3">
|
|
|
|
|
<div className="flex items-center justify-between gap-2 text-sm">
|
|
|
|
|
<span className="text-app-muted">{t("admin.userQuota")}</span>
|
|
|
|
|
<div className="flex items-center gap-2">
|
|
|
|
|
<input
|
|
|
|
|
className="w-24 rounded border border-app-border bg-app-surface px-2 py-1 text-right focus:border-app-accent focus:outline-none"
|
|
|
|
|
type="number"
|
|
|
|
|
min="0.1"
|
|
|
|
|
step="0.5"
|
|
|
|
|
value={quotaValue}
|
|
|
|
|
onChange={(e) => setQuotaDraft(e.target.value)}
|
|
|
|
|
/>
|
|
|
|
|
<span className="text-app-muted">GiB</span>
|
|
|
|
|
<button
|
|
|
|
|
className="rounded bg-app-accent px-3 py-1 font-medium text-app-accent-fg hover:opacity-90 disabled:opacity-50"
|
|
|
|
|
disabled={!quotaDirty || !quotaValid || busy}
|
|
|
|
|
onClick={() => update.mutate({ quota_bytes: Math.round(quotaGib * GIB) })}
|
|
|
|
|
>
|
|
|
|
|
{update.isPending && quotaDirty ? t("admin.saving") : t("admin.save")}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<p className="mt-1 text-xs text-app-faint">
|
|
|
|
|
{t("admin.usage", {
|
|
|
|
|
used: formatBytes(user.used_bytes),
|
|
|
|
|
quota: formatBytes(user.quota_bytes),
|
|
|
|
|
})}
|
|
|
|
|
</p>
|
|
|
|
|
{!quotaValid && <p className="mt-1 text-xs text-red-500">{t("admin.quotaInvalid")}</p>}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{user.blocked_at && (
|
|
|
|
|
<p className="mt-3 text-sm text-red-500">
|
|
|
|
|
{t("admin.blockedSince", { date: new Date(user.blocked_at).toLocaleString() })}
|
|
|
|
|
</p>
|
|
|
|
|
)}
|
|
|
|
|
{self ? (
|
|
|
|
|
<p className="mt-3 text-xs text-app-muted">{t("admin.selfNote")}</p>
|
|
|
|
|
) : (
|
|
|
|
|
<div className="mt-4 flex flex-wrap justify-end gap-2">
|
|
|
|
|
{user.blocked_at ? (
|
|
|
|
|
<button
|
|
|
|
|
className="rounded-lg border border-app-border px-3 py-1.5 text-sm hover:bg-app-hover disabled:opacity-50"
|
|
|
|
|
disabled={busy}
|
|
|
|
|
onClick={() => update.mutate({ blocked: false })}
|
|
|
|
|
>
|
|
|
|
|
{t("admin.unblock")}
|
|
|
|
|
</button>
|
|
|
|
|
) : (
|
|
|
|
|
<button
|
|
|
|
|
className="rounded-lg border border-app-border px-3 py-1.5 text-sm hover:bg-app-hover disabled:opacity-50"
|
|
|
|
|
disabled={busy}
|
|
|
|
|
onClick={() => setConfirm("block")}
|
|
|
|
|
>
|
|
|
|
|
{t("admin.block")}
|
|
|
|
|
</button>
|
|
|
|
|
)}
|
|
|
|
|
<button
|
|
|
|
|
className="rounded-lg bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50"
|
|
|
|
|
disabled={busy}
|
|
|
|
|
onClick={() => setConfirm("delete")}
|
|
|
|
|
>
|
|
|
|
|
{t("admin.deleteUser")}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
{error && <p className="mt-2 text-xs text-red-500">{error.message}</p>}
|
|
|
|
|
|
|
|
|
|
{confirm && (
|
|
|
|
|
<div
|
|
|
|
|
className="absolute inset-0 flex items-center justify-center rounded-xl bg-black/40 p-4"
|
|
|
|
|
onClick={() => setConfirm(null)}
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
role="alertdialog"
|
|
|
|
|
aria-modal="true"
|
|
|
|
|
className="w-full max-w-sm rounded-lg border border-app-border bg-app-elevated p-4 shadow-2xl"
|
|
|
|
|
onClick={(e) => e.stopPropagation()}
|
|
|
|
|
>
|
|
|
|
|
<p className="mb-4 text-sm">
|
|
|
|
|
{t(confirm === "block" ? "admin.blockConfirm" : "admin.deleteConfirm", {
|
|
|
|
|
handle: user.handle,
|
|
|
|
|
})}
|
|
|
|
|
</p>
|
|
|
|
|
<div className="flex justify-end gap-2">
|
|
|
|
|
<button
|
|
|
|
|
className="rounded-md px-3 py-1.5 text-sm text-app-muted hover:bg-app-hover"
|
|
|
|
|
onClick={() => setConfirm(null)}
|
|
|
|
|
autoFocus
|
|
|
|
|
>
|
|
|
|
|
{t("admin.cancel")}
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
className="rounded-md bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50"
|
|
|
|
|
disabled={busy}
|
|
|
|
|
onClick={() =>
|
|
|
|
|
confirm === "block" ? update.mutate({ blocked: true }) : remove.mutate()
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
{t(confirm === "block" ? "admin.block" : "admin.deleteUser")}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
