frontend: add reports list

backend/db/report.go

@@ -12,7 +12,9 @@ import (
 type Report struct {
 	ID         int64   `json:"id"`
 	UserID     xid.ID  `json:"user_id"`
+	UserName   string  `json:"user_name"`
 	MemberID   *xid.ID `json:"member_id"`
+	MemberName *string `json:"member_name"`
 	Reason     string  `json:"reason"`
 	ReporterID xid.ID  `json:"reporter_id"`
 
@@ -25,7 +27,12 @@ type Report struct {
 const ReportPageSize = 100
 
 func (db *DB) Reports(ctx context.Context, closed bool, before int) (rs []Report, err error) {
-	builder := sq.Select("*").From("reports").Limit(ReportPageSize).OrderBy("id DESC")
+	builder := sq.Select("*",
+		"(SELECT username FROM users WHERE id = reports.user_id) AS user_name",
+		"(SELECT name FROM members WHERE id = reports.member_id) AS member_name").
+		From("reports").
+		Limit(ReportPageSize).
+		OrderBy("id DESC")
 	if before != 0 {
 		builder = builder.Where("id < ?", before)
 	}

frontend/src/lib/api/entities.ts

@@ -84,7 +84,9 @@ export interface Invite {
 export interface Report {
   id: string;
   user_id: string;
+  user_name: string;
   member_id: string | null;
+  member_name: string | null;
   reason: string;
   reporter_id: string;
 

frontend/src/routes/reports/+page.svelte

@@ -1,5 +1,40 @@
 <script lang="ts">
+  import { DateTime } from "luxon";
+  import { Button, Card, CardBody, CardFooter, CardHeader } from "sveltestrap";
   import type { PageData } from "./$types";
 
   export let data: PageData;
 </script>
+
+<svelte:head>
+  <title>Reports - pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+  <h1>Reports</h1>
+
+  <div>
+    {#each data.reports as report}
+      <Card>
+        <CardHeader>
+          <strong>#{report.id}</strong> on <a href="/@{report.user_name}">@{report.user_name}</a>
+          ({report.user_id}) {#if report.member_id}
+            (member: <a href="/@{report.user_name}/{report.member_name}">{report.member_name}</a>,
+            {report.member_id})
+          {/if}
+        </CardHeader>
+        <CardBody>
+          <blockquote class="blockquote">{report.reason}</blockquote>
+        </CardBody>
+        <CardFooter>
+          Created {DateTime.fromISO(report.created_at)
+            .toLocal()
+            .toLocaleString(DateTime.DATETIME_MED)} &bull;
+          <Button outline color="warning" size="sm">Warn user</Button>
+          <Button outline color="danger" size="sm">Deactivate user</Button>
+          <Button outline color="secondary" size="sm">Ignore report</Button>
+        </CardFooter>
+      </Card>
+    {/each}
+  </div>
+</div>

frontend/src/routes/reports/+page.ts

@@ -1,9 +1,17 @@
-import type { Report } from "$lib/api/entities";
+import { ErrorCode, type APIError, type Report } from "$lib/api/entities";
 import { apiFetchClient } from "$lib/api/fetch";
+import { error } from "@sveltejs/kit";
 
 export const load = async () => {
+  try {
     const reports = await apiFetchClient<Report[]>("/admin/reports");
     return { page: 0, isClosed: false, userId: null, reporterId: null, reports } as PageLoadData;
+  } catch (e) {
+    if ((e as APIError).code === ErrorCode.Forbidden) {
+      throw error(400, "You're not an admin");
+    }
+    throw e;
+  }
 };
 
 interface PageLoadData {