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

frontend/src/routes/settings/+layout.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">
   import { page } from "$app/stores";
   import type { LayoutData } from "./$types";
-  import { Button, ListGroup, ListGroupItem, Modal, ModalBody, ModalFooter } from "sveltestrap";
+  import {
+    Badge,
+    Button,
+    ListGroup,
+    ListGroupItem,
+    Modal,
+    ModalBody,
+    ModalFooter,
+  } from "sveltestrap";
   import { userStore } from "$lib/store";
   import { goto } from "$app/navigation";
   import { addToast } from "$lib/toast";
@@ -20,6 +28,9 @@
     addToast({ header: "Logged out", body: "Successfully logged out!" });
     goto("/");
   };
+
+  let unreadWarnings: number;
+  $: unreadWarnings = data.warnings.filter((w) => !w.read).length;
 </script>
 
 <svelte:head>
@@ -58,6 +69,16 @@
         >
           Tokens
         </ListGroupItem>
+        <ListGroupItem
+          tag="a"
+          active={$page.url.pathname === "/settings/warnings"}
+          href="/settings/warnings"
+        >
+          Warnings
+          {#if unreadWarnings !== 0}
+            <Badge color="danger">{unreadWarnings}</Badge>
+          {/if}
+        </ListGroupItem>
         <ListGroupItem
           tag="a"
           active={$page.url.pathname === "/settings/export"}

frontend/src/routes/settings/+layout.ts

@@ -1,4 +1,10 @@
-import { ErrorCode, type APIError, type Invite, type MeUser } from "$lib/api/entities";
+import {
+  ErrorCode,
+  type Warning,
+  type APIError,
+  type Invite,
+  type MeUser,
+} from "$lib/api/entities";
 import { apiFetchClient } from "$lib/api/fetch";
 import type { LayoutLoad } from "./$types";
 
@@ -6,6 +12,7 @@ export const ssr = false;
 
 export const load = (async ({ parent }) => {
   const user = await apiFetchClient<MeUser>("/users/@me");
+  const warnings = await apiFetchClient<Warning[]>("/auth/warnings?all=true");
 
   let invites: Invite[] = [];
   let invitesEnabled = true;
@@ -24,5 +31,6 @@ export const load = (async ({ parent }) => {
     user,
     invites,
     invitesEnabled,
+    warnings,
   };
 }) satisfies LayoutLoad;

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>