fix: change frontend error object to APIError

frontend/src/app.d.ts

@@ -1,8 +1,15 @@
 // See https://kit.svelte.dev/docs/types#app
+
+import type { ErrorCode } from "$lib/api/entities";
+
 // for information about these interfaces
 declare global {
   namespace App {
-    // interface Error {}
+    interface Error {
+      code: ErrorCode;
+      message?: string | undefined;
+      details?: string | undefined;
+    }
     // interface Locals {}
     // interface PageData {}
     // interface Platform {}

frontend/src/routes/+error.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
   import { page } from "$app/stores";
+    import { ErrorCode } from "$lib/api/entities";
 </script>
 
 <h1>An error occurred ({$page.status})</h1>
 
-{#if $page.status === 404}
+{#if $page.error?.code === ErrorCode.NotFound}
   <p>
     The page you were looking for was not found. If you're sure the page exists, check for any typos
     in the address.
   </p>
-{:else if $page.status === 429}
+{:else if $page.error?.code === ErrorCode.Forbidden || $page.error?.code === ErrorCode.InvalidToken}
+  <p>You're not logged in, or you aren't allowed to access this page.</p>
+{:else if $page.error?.code === 429}
   <p>You've exceeded a rate limit, please try again later.</p>
-{:else if $page.status === 500}
+{:else if $page.error?.code === 500}
   <p>An internal error occurred. Please try again later.</p>
   <p>
     If this error keeps happening, please <a
@@ -22,4 +25,4 @@
   </p>
 {/if}
 
-<p>Error message: <code>{$page.error?.message}</code></p>
+<p>Error code: <code>{$page.error?.code}</code></p>

frontend/src/routes/@[username]/+error.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
   import { page } from "$app/stores";
+  import { ErrorCode } from "$lib/api/entities";
 </script>
 
+{#if $page.error?.code === ErrorCode.Forbidden || $page.error?.code === ErrorCode.InvalidToken}
+  <h1>Not logged in</h1>
+  <p>
+    Either you aren't logged in, or your login has expired. Please <a href="/auth/login"
+      >log in again</a
+    >.
+  </p>
+{:else}
   <h1>An error occurred ({$page.status})</h1>
 
   {#if $page.status === 404}
@@ -20,3 +29,4 @@
   {/if}
 
   <p>Error message: <code>{$page.error?.message}</code></p>
+{/if}

frontend/src/routes/@[username]/+page.server.ts

@@ -11,7 +11,7 @@ export const load = async ({ params }) => {
     return resp;
   } catch (e) {
     if ((e as APIError).code === ErrorCode.UserNotFound) {
-      throw error(404, (e as APIError).message);
+      throw error(404, e as APIError);
     }
 
     throw e;

frontend/src/routes/@[username]/+page.svelte

@@ -196,7 +196,7 @@
           <hr />
           <p>
             <em>
-              Your profile is empty! You can customize it by going to the <a href="/edit/profile"
+              Your profile is empty! You can customize it by going to the <a href="/@{data.name}/edit"
                 >edit profile</a
               > page.</em
             > <span class="text-muted">(only you can see this)</span>

frontend/src/routes/@[username]/[memberName]/+page.server.ts

@@ -14,9 +14,9 @@ export const load = async ({ params }) => {
       (e as APIError).code === ErrorCode.UserNotFound ||
       (e as APIError).code === ErrorCode.MemberNotFound
     ) {
-      throw error(404, (e as APIError).message);
+      throw error(404, e as APIError);
     }
 
-    throw error(500, (e as APIError).message);
+    throw error(500, e as APIError);
   }
 };

frontend/src/routes/@[username]/edit/+layout.ts

@@ -1,23 +1,28 @@
 import type { PrideFlag, APIError, MeUser, PronounsJson } from "$lib/api/entities";
 import { apiFetchClient } from "$lib/api/fetch";
-import { error } from "@sveltejs/kit";
+import { error, redirect, type Redirect } from "@sveltejs/kit";
 
 import pronounsRaw from "$lib/pronouns.json";
 const pronouns = pronounsRaw as PronounsJson;
 
 export const ssr = false;
 
-export const load = async () => {
+export const load = async ({ params }) => {
   try {
     const user = await apiFetchClient<MeUser>(`/users/@me`);
     const flags = await apiFetchClient<PrideFlag[]>("/users/@me/flags");
 
+    if (params.username !== user.name) {
+      throw redirect(303, `/@${user.name}/edit`);
+    }
+
     return {
       user,
       pronouns: pronouns.autocomplete,
       flags,
     };
   } catch (e) {
-    throw error((e as APIError).code, (e as APIError).message);
+    if ("code" in e) throw error(500, e as APIError);
+    throw e;
   }
 };

frontend/src/routes/[username]/+page.server.ts

@@ -11,7 +11,7 @@ export const load = async ({ params }) => {
     throw redirect(303, `/@${resp.name}`);
   } catch (e) {
     if ((e as APIError).code === ErrorCode.UserNotFound) {
-      throw error(404, (e as APIError).message);
+      throw error(404, e as APIError);
     }
 
     throw e;

frontend/src/routes/edit/member/[id]/+page.svelte

@@ -768,7 +768,7 @@
             <Icon name="exclamation-triangle-fill" aria-hidden />
             Your member list is currently hidden, so <strong>this setting has no effect</strong>. If
             you want to make your member list visible again,
-            <a href="/edit/profile">edit your user profile</a>.
+            <a href="/@{data.user.name}/other">edit your user profile</a>.
             <br />
           {/if}
           <Icon name="info-circle-fill" aria-hidden />

frontend/src/routes/edit/member/[id]/+page.ts

@@ -20,6 +20,6 @@ export const load = async ({ params }) => {
       flags,
     };
   } catch (e) {
-    throw error((e as APIError).code, (e as APIError).message);
+    throw error((e as APIError).code, e as APIError);
   }
 };

frontend/src/routes/edit/profile/+page.ts

@@ -1,11 +1,17 @@
-import type { MeUser } from "$lib/api/entities";
+import { ErrorCode, type APIError, type MeUser } from "$lib/api/entities";
 import { apiFetchClient } from "$lib/api/fetch";
-import { redirect } from "@sveltejs/kit";
+import { error, redirect } from "@sveltejs/kit";
 
 export const ssr = false;
 
 export const load = async () => {
+  try {
     const resp = await apiFetchClient<MeUser>(`/users/@me`);
 
     throw redirect(303, `/@${resp.name}/edit`);
+  } catch (e) {
+    if ((e as APIError).code === ErrorCode.Forbidden || (e as APIError).code === ErrorCode.InvalidToken) {
+      throw error(403, e as APIError)
+    }
+  }
 };

frontend/src/routes/pronouns/[...pronouns]/+page.ts

@@ -1,6 +1,6 @@
 import { error } from "@sveltejs/kit";
 import type { PageLoad } from "./$types";
-import type { PronounsJson } from "$lib/api/entities";
+import { ErrorCode, type PronounsJson } from "$lib/api/entities";
 
 import pronounsRaw from "$lib/pronouns.json";
 const pronouns = pronounsRaw as PronounsJson;
@@ -10,7 +10,7 @@ export const load = (async ({ params }) => {
 
   const arr = param.split("/");
   if (arr.length === 0 || params.pronouns === "") {
-    throw error(404, "Pronouns not found");
+    throw error(404, { code: ErrorCode.NotFound, message: "Pronouns not found" });
   }
 
   if (arr.length === 5) {
@@ -46,5 +46,5 @@ export const load = (async ({ params }) => {
     };
   }
 
-  throw error(404, "Pronouns not found");
+  throw error(404, { code: ErrorCode.NotFound, message: "Pronouns not found" });
 }) satisfies PageLoad;

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

@@ -10,7 +10,6 @@ export const load = async ({ url }) => {
   const reporterId = searchParams.get("reporter_id");
   const isClosed = searchParams.get("closed") === "true";
 
-  try {
   let reports: Report[];
   if (userId) {
     const params = new URLSearchParams();
@@ -35,12 +34,6 @@ export const load = async ({ url }) => {
   }
 
   return { before, isClosed, userId, reporterId, reports } as PageLoadData;
-  } catch (e) {
-    if ((e as APIError).code === ErrorCode.Forbidden) {
-      throw error(400, "You're not an admin");
-    }
-    throw e;
-  }
 };
 
 interface PageLoadData {

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

@@ -158,7 +158,7 @@
       <p class="text-center">
         <FallbackImage width={200} urls={userAvatars(data.user)} alt="Your avatar" />
         <br />
-        To change your avatar, go to <a href="/edit/profile">edit profile</a>.
+        To change your avatar, go to <a href="/@{data.user.name}/edit">edit profile</a>.
       </p>
     </div>
   </div>

frontend/src/routes/settings/export/+page.ts

@@ -10,6 +10,6 @@ export const load = async () => {
   } catch (e) {
     if ((e as APIError).code === ErrorCode.NotFound) return { exportData: null };
 
-    throw error((e as APIError).code, (e as APIError).message);
+    throw error(500, e as APIError);
   }
 };