Retrieve logged-in user after refresh/redirect

arches_lingo/src/arches_lingo/App.vue

@@ -1,25 +1,17 @@
 <script setup lang="ts">
-import { provide, ref } from "vue";
-
 import Toast from "primevue/toast";
 
-import { userKey } from "@/arches_lingo/constants.ts";
-import HomePage from "@/arches_lingo/pages/HomePage.vue";
-import LoginPage from "@/arches_lingo/pages/login/LoginPage.vue";
-
-import type { User } from "@/arches_lingo/types";
+import ProgressSpinner from "primevue/progressspinner";
 
-const user = ref<User | null>(null);
-const setUser = (userToSet: User | null) => {
-    user.value = userToSet;
-};
-provide(userKey, { user, setUser });
+import PageSwitcher from "@/arches_lingo/pages/PageSwitcher.vue";
 </script>
 
 <template>
-    <div style="font-family: sans-serif">
-        <HomePage v-if="user" />
-        <LoginPage v-else />
-    </div>
+    <Suspense>
+        <PageSwitcher />
+        <template #fallback>
+            <ProgressSpinner style="display: flex; margin-top: 8rem" />
+        </template>
+    </Suspense>
     <Toast />
 </template>

arches_lingo/src/arches_lingo/api.ts

@@ -41,3 +41,16 @@ export const logout = async () => {
         throw new Error((error as Error).message || response.statusText);
     }
 };
+
+export const fetchUser = async () => {
+    const response = await fetch(arches.urls.api_user);
+    try {
+        const parsed = await response.json();
+        if (response.ok) {
+            return parsed;
+        }
+        throw new Error(parsed.message);
+    } catch (error) {
+        throw new Error((error as Error).message || response.statusText);
+    }
+};

arches_lingo/src/arches_lingo/pages/PageSwitcher.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { provide, ref } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import { useToast } from "primevue/usetoast";
+
+import { fetchUser } from "@/arches_lingo/api.ts";
+import {
+    DEFAULT_ERROR_TOAST_LIFE,
+    ERROR,
+    userKey,
+} from "@/arches_lingo/constants.ts";
+import HomePage from "@/arches_lingo/pages/HomePage.vue";
+import LoginPage from "@/arches_lingo/pages/login/LoginPage.vue";
+
+import type { User } from "@/arches_lingo/types";
+
+const { $gettext } = useGettext();
+const toast = useToast();
+
+const user = ref<User | null>(null);
+const setUser = (userToSet: User | null) => {
+    user.value = userToSet;
+};
+provide(userKey, { user, setUser });
+
+try {
+    setUser(await fetchUser());
+} catch (error) {
+    toast.add({
+        severity: ERROR,
+        life: DEFAULT_ERROR_TOAST_LIFE,
+        summary: $gettext("Login required"), // most likely case is inactive user
+        detail: error instanceof Error ? error.message : undefined,
+    });
+}
+</script>
+
+<template>
+    <div style="font-family: sans-serif">
+        <HomePage v-if="user && user.username !== 'anonymous'" />
+        <LoginPage v-else />
+    </div>
+</template>