feat: add warnings page, add delete user + acknowledge report options

frontend/src/routes/settings/warnings/+page.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { APIError } from "$lib/api/entities";
+  import { apiFetchClient } from "$lib/api/fetch";
+  import ErrorAlert from "$lib/components/ErrorAlert.svelte";
+  import { addToast } from "$lib/toast";
+  import { DateTime } from "luxon";
+  import { Button, Card, CardBody, CardFooter, CardHeader } from "sveltestrap";
+  import type { PageData } from "./$types";
+
+  export let data: PageData;
+  let error: APIError | null = null;
+
+  const acknowledgeWarning = async (idx: number) => {
+    try {
+      await apiFetchClient<any>(`/auth/warnings/${data.warnings[idx].id}/ack`, "POST");
+      addToast({
+        header: "Acknowledged",
+        body: `Marked warning #${data.warnings[idx].id} as read.`,
+      });
+      data.warnings[idx].read = true;
+      data.warnings = data.warnings;
+    } catch (e) {
+      error = e as APIError;
+    }
+  };
+</script>
+
+<h1>Warnings ({data.warnings.length})</h1>
+
+{#if error}
+  <ErrorAlert {error} />
+{/if}
+
+<div>
+  {#each data.warnings as warning, index}
+    <Card class="my-2">
+      <CardHeader>
+        <strong>#{warning.id}</strong> ({DateTime.fromISO(warning.created_at)
+          .toLocal()
+          .toLocaleString(DateTime.DATETIME_MED)})
+      </CardHeader>
+      <CardBody>
+        <blockquote class="blockquote">{warning.reason}</blockquote>
+      </CardBody>
+      {#if !warning.read}
+        <CardFooter>
+          <Button color="secondary" outline on:click={() => acknowledgeWarning(index)}
+            >Mark as read</Button
+          >
+        </CardFooter>
+      {/if}
+    </Card>
+  {:else}
+    You have no warnings!
+  {/each}
+</div>