add error messages for not being able to fetch initial information

frontend/public/global.css

@@ -142,5 +142,5 @@ button:focus {
 }
 
 .grayed-text {
-	color: var(--color-red);
+	color: var(--grayed-text-color);
 }

frontend/src/api/APIClient.js

@@ -4,18 +4,18 @@ class APIClient {
         this.token = token;
     }
 
-    async getRequest(path) {
+    async getRequest(path, throwOnError=false) {
         const res = await fetch(`${this.baseUrl}${path}`, {
             headers: {
                 "Authorization": this.token
             }
         });
-        if (!res.ok)
+        if (!res.ok && throwOnError)
             throw new Error("APIClient.getRequest(): request failed with non-200 http code");
         return (await res.json());
     }
 
-    async postRequest(path, body) {
+    async postRequest(path, body, throwOnError=true) {
         const res = await fetch(`${this.baseUrl}${path}`, {
             method: "POST",
             headers: {
@@ -24,7 +24,7 @@ class APIClient {
             },
             body: JSON.stringify(body)
         });
-        if (!res.ok)
+        if (!res.ok && throwOnError)
             throw new Error("APIClient.postRequest(): request failed with non-200 http code");
         return (await res.json());
     }

frontend/src/components/App.svelte

@@ -2,6 +2,7 @@
 	import { apiClient } from "../api/common";
 	import ChatView from "./ChatView.svelte";
 import FuzzyView from "./FuzzyView.svelte";
+import MessageDisplay from "./MessageDisplay.svelte";
 
 	let messageStore = {};
 	let selectedGuild = null;
@@ -10,13 +11,33 @@ import FuzzyView from "./FuzzyView.svelte";
 	let user = null;
 	let view = { type: "CHAT" };
 
-	apiClient.getRequest("/users/@self")
+	apiClient.getRequest("/users/@self", false)
 		.then((res) => {
+			let userErrorMessage = "";
+			if (res.error) {
+				userErrorMessage = "Something went wrong while trying to fetch current user info.";
+				if (res.message === "ERROR_UNAUTHORIZED" || res.message === "ERROR_FORBIDDEN") {
+					userErrorMessage = "You're not logged in or your session is invalid.";
+				}
+				view = { type: "MESSAGE_DISPLAY", header: "Error", content: userErrorMessage };
+				return;
+			}
+
 			user = res.user;
 		});
 
 	apiClient.getRequest("/users/@self/guilds")
 		.then((res) => {
+			let userErrorMessage = "";
+			if (res.error) {
+				userErrorMessage = "Something went wrong while trying to fetch guild info.";
+				if (res.message === "ERROR_UNAUTHORIZED" || res.message === "ERROR_FORBIDDEN") {
+					userErrorMessage = "You're not logged in or your session is invalid.";
+				}
+				view = { type: "MESSAGE_DISPLAY", header: "Error", content: userErrorMessage };
+				return;
+			}
+
 			guilds = res.guilds
 				.map(e => {
 					// we only want text channels
@@ -145,5 +166,7 @@ import FuzzyView from "./FuzzyView.svelte";
 		<FuzzyView on:selected={fuzzySelectedGuild} elements={guilds} title="Select a guild" />
 	{:else if view.type === "CHANNEL_FUZZY"}
 		<FuzzyView on:selected={fuzzySelectedChannel} elements={selectedGuild ? selectedGuild.channels : []} title={`Select a channel in ${selectedGuild ? selectedGuild.name : "[unknown guild]"}`} />
+	{:else if view.type === "MESSAGE_DISPLAY"}
+		<MessageDisplay header={ view.header } content={ view.content } ></MessageDisplay>
 	{/if}
 </main>

frontend/src/components/MessageDisplay.svelte

@@ -0,0 +1,10 @@
+<script>
+    export let header;
+    export let content;
+</script>
+
+<div class="card full-card">
+    <span class="main-panel-header"><b>{ header }</b></span>
+    <br>
+    <p>{ content }</p>
+</div>