feat(frontend): don't break signup pages on reload

Foxnouns.Backend/Controllers/Authentication/FediverseAuthController.cs

@@ -94,8 +94,7 @@ public class FediverseAuthController(
     public async Task<IActionResult> RegisterAsync([FromBody] OauthRegisterRequest req)
     {
         FediverseTicketData? ticketData = await keyCacheService.GetKeyAsync<FediverseTicketData>(
-            $"fediverse:{req.Ticket}",
-            true
+            $"fediverse:{req.Ticket}"
         );
         if (ticketData == null)
             throw new ApiError.BadRequest("Invalid ticket", "ticket", req.Ticket);

Foxnouns.Backend/Controllers/Moderation/ReportsController.cs

@@ -229,6 +229,7 @@ public class ReportsController(
             .Reports.Include(r => r.Reporter)
             .Include(r => r.TargetUser)
             .Include(r => r.TargetMember)
+            .Include(r => r.AuditLogEntry)
             .FirstOrDefaultAsync(r => r.Id == id, ct);
         if (report == null)
             throw new ApiError.NotFound("No report with that ID found.");
@@ -243,6 +244,9 @@ public class ReportsController(
                 ),
                 Member: report.TargetMember != null
                     ? memberRenderer.RenderMember(report.TargetMember)
+                    : null,
+                AuditLogEntry: report.AuditLogEntry != null
+                    ? moderationRenderer.RenderAuditLogEntry(report.AuditLogEntry)
                     : null
             )
         );

Foxnouns.Backend/Dto/Moderation.cs

@@ -39,7 +39,9 @@ public record ReportResponse(
 public record ReportDetailResponse(
     ReportResponse Report,
     UserResponse User,
-    [property: JsonProperty(NullValueHandling = NullValueHandling.Ignore)] MemberResponse? Member
+    [property: JsonProperty(NullValueHandling = NullValueHandling.Ignore)] MemberResponse? Member,
+    [property: JsonProperty(NullValueHandling = NullValueHandling.Ignore)]
+        AuditLogResponse? AuditLogEntry
 );
 
 public record AuditLogResponse(

Foxnouns.Frontend/src/lib/actions/callback.ts

@@ -4,10 +4,12 @@ import type { AddAccountResponse, CallbackResponse } from "$api/models";
 import { setToken } from "$lib";
 import log from "$lib/log";
 import { isRedirect, redirect, type ServerLoadEvent } from "@sveltejs/kit";
+import type { TicketData } from "../../routes/auth/callback/register/[ticket]/+page.server";
 
 export default function createCallbackLoader(
 	callbackType: string,
 	bodyFn?: (event: ServerLoadEvent) => Promise<unknown>,
+	returnData?: boolean,
 ) {
 	return async (event: ServerLoadEvent) => {
 		const { parent, fetch, cookies } = event;
@@ -53,12 +55,23 @@ export default function createCallbackLoader(
 				redirect(303, `/@${resp.user!.username}`);
 			}
 
-			return {
-				hasAccount: false,
-				isLinkRequest: false,
-				ticket: resp.ticket!,
-				remoteUser: resp.remote_username!,
-			};
+			if (returnData)
+				return {
+					ticket: resp.ticket!,
+					remoteUser: resp.remote_username!,
+				};
+
+			const ticket = btoa(
+				JSON.stringify({
+					type: callbackType,
+					ticket: resp.ticket!,
+					remoteUsername: resp.remote_username!,
+				} satisfies TicketData),
+			)
+				.replaceAll("+", "-")
+				.replaceAll("/", "_");
+
+			redirect(303, "/auth/callback/register/" + ticket);
 		} catch (e) {
 			if (isRedirect(e)) throw e;
 			if (e instanceof ApiError) return { isLinkRequest: false, error: e.obj };

Foxnouns.Frontend/src/lib/api/models/moderation.ts

@@ -75,6 +75,7 @@ export type ReportDetails = {
 	report: Report;
 	user: User;
 	member?: Member;
+	audit_log_entry?: AuditLogEntry;
 };
 
 export type QueriedUser = {

Foxnouns.Frontend/src/lib/components/Footer.svelte

@@ -23,8 +23,8 @@
 		</div>
 		<div class="align-end">
 			<ul class="list-unstyled">
-				<li>{meta.users.total} <strong>users</strong></li>
-				<li>{meta.members} <strong>members</strong></li>
+				<li>{meta.users.total.toLocaleString()} <strong>users</strong></li>
+				<li>{meta.members.toLocaleString()} <strong>members</strong></li>
 			</ul>
 		</div>
 	</div>

Foxnouns.Frontend/src/lib/components/admin/ClosedReportAuditLog.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { AuditLogEntryType, type AuditLogEntry } from "$api/models/moderation";
+	import { idTimestamp } from "$lib";
+	import { renderMarkdown } from "$lib/markdown";
+	import { DateTime } from "luxon";
+	import AuditLogEntity from "./AuditLogEntity.svelte";
+
+	type Props = { entry: AuditLogEntry };
+	let { entry }: Props = $props();
+</script>
+
+<div class="row">
+	<h3 id="report-status">
+		Closed by <AuditLogEntity entity={entry.moderator} /> at
+		{idTimestamp(entry.id).toLocaleString(DateTime.DATETIME_MED)}
+	</h3>
+	<p>
+		{#if entry.type === AuditLogEntryType.IgnoreReport}
+			Report was ignored
+		{:else if entry.type === AuditLogEntryType.WarnUser || entry.type === AuditLogEntryType.WarnUserAndClearProfile}
+			User was warned
+			{#if entry.cleared_fields && entry.cleared_fields.length > 0}
+				<br />Cleared fields: {entry.cleared_fields.join(", ")}
+			{/if}
+		{:else if entry.type === AuditLogEntryType.SuspendUser}
+			User was suspended
+		{/if}
+	</p>
+	<h4>Reason</h4>
+	<p>
+		{#if entry.reason}
+			{@html renderMarkdown(entry.reason)}
+		{:else}
+			<em class="text-secondary">(no reason given)</em>
+		{/if}
+	</p>
+</div>

Foxnouns.Frontend/src/lib/i18n/locales/en.json

@@ -46,7 +46,7 @@
 		"remote-fediverse-account-label": "Your Fediverse account",
 		"register-username-label": "Username",
 		"register-button": "Register account",
-		"register-with-mastodon": "Register with a Fediverse account",
+		"register-with-fediverse": "Register with a Fediverse account",
 		"log-in-with-fediverse-error-blurb": "Is your instance returning an error?",
 		"log-in-with-fediverse-force-refresh-button": "Force a refresh on our end",
 		"register-with-discord": "Register with a Discord account",

Foxnouns.Frontend/src/routes/admin/reports/[id]/+page.server.ts

@@ -7,7 +7,12 @@ export const load = async ({ params, fetch, cookies }) => {
 		fetch,
 		cookies,
 	});
-	return { report: resp.report, user: resp.user, member: resp.member };
+	return {
+		report: resp.report,
+		user: resp.user,
+		member: resp.member,
+		auditLogEntry: resp.audit_log_entry,
+	};
 };
 
 export const actions = createModactions();

Foxnouns.Frontend/src/routes/admin/reports/[id]/+page.svelte

@@ -2,6 +2,7 @@
 	import type { Member } from "$api/models/member";
 	import type { User } from "$api/models/user";
 	import ActionForm from "$components/admin/ActionForm.svelte";
+	import ClosedReportAuditLog from "$components/admin/ClosedReportAuditLog.svelte";
 	import PartialProfileCard from "$components/admin/PartialProfileCard.svelte";
 	import ProfileHeader from "$components/profile/ProfileHeader.svelte";
 	import MemberCard from "$components/profile/user/MemberCard.svelte";
@@ -10,13 +11,21 @@
 
 	type Props = { data: PageData; form: ActionData };
 	let { data, form }: Props = $props();
-	let { report, user, member } = $derived(data);
+	let { report, user, auditLogEntry } = $derived(data);
 </script>
 
 <svelte:head>
 	<title>Report on @{user.username} • pronouns.cc</title>
 </svelte:head>
 
+{#if report.status === "CLOSED"}
+	<div class="alert alert-secondary">
+		This report has already been handled. <a href="#report-status" class="alert-link"
+			>See audit log entry</a
+		>
+	</div>
+{/if}
+
 <div class="row">
 	<div class="col-md">
 		<h3>Target user</h3>
@@ -55,15 +64,26 @@
 	</div>
 </div>
 
-<div class="row">
-	<h3>Take action</h3>
-	<ActionForm
-		userId={report.target_user.id}
-		reportId={report.id}
-		memberId={report.target_member?.id}
-		{form}
-	/>
-</div>
+{#if report.status === "OPEN"}
+	<div class="row">
+		<h3>Take action</h3>
+		<ActionForm
+			userId={report.target_user.id}
+			reportId={report.id}
+			memberId={report.target_member?.id}
+			{form}
+		/>
+	</div>
+{:else if report.status === "CLOSED" && auditLogEntry}
+	<ClosedReportAuditLog entry={auditLogEntry} />
+{:else}
+	<div class="row">
+		<h3>Closed by an unknown moderator</h3>
+		<p>
+			<em>This should not happen!</em>
+		</p>
+	</div>
+{/if}
 
 {#if report.snapshot}
 	<h3>Profile at time of report</h3>

Foxnouns.Frontend/src/routes/auth/callback/discord/+page.server.ts

@@ -1,8 +1,3 @@
 import createCallbackLoader from "$lib/actions/callback";
-import createRegisterAction from "$lib/actions/register";
 
 export const load = createCallbackLoader("discord");
-
-export const actions = {
-	default: createRegisterAction("/auth/discord/register"),
-};

Foxnouns.Frontend/src/routes/auth/callback/discord/+page.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import Error from "$components/Error.svelte";
 	import NewAuthMethod from "$components/settings/NewAuthMethod.svelte";
-	import OauthRegistrationForm from "$components/settings/OauthRegistrationForm.svelte";
 	import { t } from "$lib/i18n";
-	import type { ActionData, PageData } from "./$types";
+	import type { PageData } from "./$types";
 
-	type Props = { data: PageData; form: ActionData };
-	let { data, form }: Props = $props();
+	type Props = { data: PageData };
+	let { data }: Props = $props();
 </script>
 
 <svelte:head>
@@ -17,15 +16,7 @@
 	{#if data.error}
 		<h1>{$t("auth.register-with-discord")}</h1>
 		<Error error={data.error} />
-	{:else if data.isLinkRequest}
-		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{:else}
-		<OauthRegistrationForm
-			title={$t("auth.register-with-discord")}
-			remoteLabel={$t("auth.remote-discord-account-label")}
-			remoteUser={data.remoteUser!}
-			ticket={data.ticket!}
-			error={form?.error}
-		/>
+		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{/if}
 </div>

Foxnouns.Frontend/src/routes/auth/callback/google/+page.server.ts

@@ -1,8 +1,3 @@
 import createCallbackLoader from "$lib/actions/callback";
-import createRegisterAction from "$lib/actions/register";
 
 export const load = createCallbackLoader("google");
-
-export const actions = {
-	default: createRegisterAction("/auth/google/register"),
-};

Foxnouns.Frontend/src/routes/auth/callback/google/+page.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import Error from "$components/Error.svelte";
 	import NewAuthMethod from "$components/settings/NewAuthMethod.svelte";
-	import OauthRegistrationForm from "$components/settings/OauthRegistrationForm.svelte";
 	import { t } from "$lib/i18n";
-	import type { ActionData, PageData } from "./$types";
+	import type { PageData } from "./$types";
 
-	type Props = { data: PageData; form: ActionData };
-	let { data, form }: Props = $props();
+	type Props = { data: PageData };
+	let { data }: Props = $props();
 </script>
 
 <svelte:head>
@@ -17,15 +16,7 @@
 	{#if data.error}
 		<h1>{$t("auth.register-with-google")}</h1>
 		<Error error={data.error} />
-	{:else if data.isLinkRequest}
-		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{:else}
-		<OauthRegistrationForm
-			title={$t("auth.register-with-google")}
-			remoteLabel={$t("auth.remote-google-account-label")}
-			remoteUser={data.remoteUser!}
-			ticket={data.ticket!}
-			error={form?.error}
-		/>
+		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{/if}
 </div>

Foxnouns.Frontend/src/routes/auth/callback/mastodon/[instance]/+page.server.ts

@@ -1,6 +1,5 @@
 import ApiError, { ErrorCode } from "$api/error";
 import createCallbackLoader from "$lib/actions/callback";
-import createRegisterAction from "$lib/actions/register";
 
 export const load = createCallbackLoader("fediverse", async ({ params, url }) => {
 	const code = url.searchParams.get("code") as string | null;
@@ -10,7 +9,3 @@ export const load = createCallbackLoader("fediverse", async ({ params, url }) =>
 
 	return { code: code || token, state, instance: params.instance! };
 });
-
-export const actions = {
-	default: createRegisterAction("/auth/fediverse/register"),
-};

Foxnouns.Frontend/src/routes/auth/callback/mastodon/[instance]/+page.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-	import type { ActionData, PageData } from "./$types";
-	import { t } from "$lib/i18n";
 	import Error from "$components/Error.svelte";
-	import OauthRegistrationForm from "$components/settings/OauthRegistrationForm.svelte";
 	import NewAuthMethod from "$components/settings/NewAuthMethod.svelte";
+	import { t } from "$lib/i18n";
+	import type { PageData } from "./$types";
 
-	type Props = { data: PageData; form: ActionData };
-	let { data, form }: Props = $props();
+	type Props = { data: PageData };
+	let { data }: Props = $props();
 </script>
 
 <svelte:head>
@@ -17,15 +16,7 @@
 	{#if data.error}
 		<h1>{$t("auth.register-with-mastodon")}</h1>
 		<Error error={data.error} />
-	{:else if data.isLinkRequest}
-		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{:else}
-		<OauthRegistrationForm
-			title={$t("auth.register-with-mastodon")}
-			remoteLabel={$t("auth.remote-fediverse-account-label")}
-			remoteUser={data.remoteUser!}
-			ticket={data.ticket!}
-			error={form?.error}
-		/>
+		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{/if}
 </div>

Foxnouns.Frontend/src/routes/auth/callback/register/[ticket]/+page.server.ts

@@ -3,10 +3,23 @@ import ApiError, { ErrorCode, type RawApiError } from "$api/error";
 import type { AuthResponse } from "$api/models/auth";
 import { setToken } from "$lib";
 import log from "$lib/log";
-import { isRedirect, redirect, type RequestEvent } from "@sveltejs/kit";
+import { isRedirect, redirect } from "@sveltejs/kit";
+
+export type TicketData = {
+	type: string;
+	ticket: string;
+	remoteUsername: string;
+};
+
+export const load = async ({ params }) => {
+	const data = JSON.parse(atob(params.ticket)) as TicketData;
+	return data;
+};
+
+export const actions = {
+	default: async ({ request, fetch, cookies, params }) => {
+		const type = (JSON.parse(atob(params.ticket)) as TicketData).type;
 
-export default function createRegisterAction(callbackUrl: string) {
-	return async function ({ request, fetch, cookies }: RequestEvent) {
 		const data = await request.formData();
 		const username = data.get("username") as string | null;
 		const ticket = data.get("ticket") as string | null;
@@ -17,7 +30,7 @@ export default function createRegisterAction(callbackUrl: string) {
 			};
 
 		try {
-			const resp = await apiRequest<AuthResponse>("POST", callbackUrl, {
+			const resp = await apiRequest<AuthResponse>("POST", `/auth/${type}/register`, {
 				body: { username, ticket },
 				isInternal: true,
 				fetch,
@@ -31,5 +44,5 @@ export default function createRegisterAction(callbackUrl: string) {
 			if (e instanceof ApiError) return { error: e.obj };
 			throw e;
 		}
-	};
-}
+	},
+};

Foxnouns.Frontend/src/routes/auth/callback/register/[ticket]/+page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import OauthRegistrationForm from "$components/settings/OauthRegistrationForm.svelte";
+	import { t } from "$lib/i18n";
+	import type { ActionData, PageData } from "./$types";
+
+	type Props = { data: PageData; form: ActionData };
+	let { data, form }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{$t(`auth.register-with-${data.type}`)} • pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+	<OauthRegistrationForm
+		title={$t(`auth.register-with-${data.type}`)}
+		remoteLabel={$t(`auth.remote-${data.type}-account-label`)}
+		remoteUser={data.remoteUsername}
+		ticket={data.ticket}
+		error={form?.error}
+	/>
+</div>

Foxnouns.Frontend/src/routes/auth/callback/tumblr/+page.server.ts

@@ -1,8 +1,3 @@
 import createCallbackLoader from "$lib/actions/callback";
-import createRegisterAction from "$lib/actions/register";
 
 export const load = createCallbackLoader("tumblr");
-
-export const actions = {
-	default: createRegisterAction("/auth/tumblr/register"),
-};

Foxnouns.Frontend/src/routes/auth/callback/tumblr/+page.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import Error from "$components/Error.svelte";
 	import NewAuthMethod from "$components/settings/NewAuthMethod.svelte";
-	import OauthRegistrationForm from "$components/settings/OauthRegistrationForm.svelte";
 	import { t } from "$lib/i18n";
-	import type { ActionData, PageData } from "./$types";
+	import type { PageData } from "./$types";
 
-	type Props = { data: PageData; form: ActionData };
-	let { data, form }: Props = $props();
+	type Props = { data: PageData };
+	let { data }: Props = $props();
 </script>
 
 <svelte:head>
@@ -17,15 +16,7 @@
 	{#if data.error}
 		<h1>{$t("auth.register-with-tumblr")}</h1>
 		<Error error={data.error} />
-	{:else if data.isLinkRequest}
-		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{:else}
-		<OauthRegistrationForm
-			title={$t("auth.register-with-tumblr")}
-			remoteLabel={$t("auth.remote-tumblr-account-label")}
-			remoteUser={data.remoteUser!}
-			ticket={data.ticket!}
-			error={form?.error}
-		/>
+		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{/if}
 </div>