Add oauth authorize route and separate lazy component and lazy delay

src/App.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Router, Route, Link, navigate } from "svelte-navigator";
-  import Lazy from "./lib/Lazy.svelte";
+  import LazyComponent from "./lib/LazyComponent.svelte";
   import { loginStore, type LoginStore } from "./stores/login";
 
   function logoutAction() {
@@ -33,16 +33,16 @@
 
     <main>
       <Route path="login">
-        <Lazy component={() => import("./routes/login/LoginRoute.svelte")} delayMs={500}>Loading...</Lazy>
+        <LazyComponent component={() => import("./routes/login/LoginRoute.svelte")} delayMs={500}>Loading...</LazyComponent>
       </Route>
-      <Route path="oauth">
-        <Lazy component={() => import("./routes/oauth/OAuthRoute.svelte")} delayMs={500}>Loading...</Lazy>
+      <Route path="oauth/*">
+        <LazyComponent component={() => import("./routes/oauth/OAuthRoute.svelte")} delayMs={500}>Loading...</LazyComponent>
       </Route>
       <Route path="profile">
-        <Lazy component={() => import("./routes/profile/ProfileRoute.svelte")} delayMs={500}>Loading...</Lazy>
+        <LazyComponent component={() => import("./routes/profile/ProfileRoute.svelte")} delayMs={500}>Loading...</LazyComponent>
       </Route>
       <Route path="settings">
-        <Lazy component={() => import("./routes/settings/SettingsRoute.svelte")} delayMs={500}>Loading...</Lazy>
+        <LazyComponent component={() => import("./routes/settings/SettingsRoute.svelte")} delayMs={500}>Loading...</LazyComponent>
       </Route>
       <Route>
         <h3>Default</h3>

src/api/oauth.ts

@@ -0,0 +1,7 @@
+import { sendSessionRequest } from "./api";
+
+export async function getOAuthApp(id: string) {
+  let z = await sendSessionRequest("/v1/marigold/app/" + id, { method: "GET" });
+  if (z.status != 200) throw new Error("Request failed");
+  return await z.json();
+}

src/lib/LazyComponent.svelte

@@ -1,34 +1,29 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import LazyDelay from "./LazyDelay.svelte";
 
   export let component: () => Promise<any>;
   export let delayMs = null;
 
   let loadedComponent = null;
-  let timeout;
-  let showFallback = !delayMs;
 
-  let props;
+  let props: { [index: string]: any; };
   $: {
     const { component, delayMs, ...restProps } = $$props;
     props = restProps;
   }
 
   onMount(() => {
-    if (delayMs) {
-      timeout = setTimeout(() => {
-        showFallback = true;
-      }, delayMs);
-    }
     component().then((module) => {
       loadedComponent = module.default;
     });
-    return () => clearTimeout(timeout);
   });
 </script>
 
 {#if loadedComponent}
   <svelte:component this={loadedComponent} {...props} />
-{:else if showFallback}
-  <slot />
+{:else}
+  <LazyDelay {delayMs}>
+    <slot />
+  </LazyDelay>
 {/if}

src/lib/LazyDelay.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  export let delayMs = null;
+
+  let timeout: string | number | NodeJS.Timeout;
+  let showFallback = !delayMs;
+
+  onMount(() => {
+    if (delayMs) {
+      timeout = setTimeout(() => {
+        showFallback = true;
+      }, delayMs);
+    }
+    return () => clearTimeout(timeout);
+  });
+</script>
+
+{#if showFallback}
+  <slot />
+{/if}

src/routes/oauth/Authorize.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { navigate, useLocation } from "svelte-navigator";
+  import { getUser } from "~/api/login";
+  import { getOAuthApp } from "~/api/oauth";
+  import LazyComponent from "~/lib/LazyComponent.svelte";
+  import LazyDelay from "~/lib/LazyDelay.svelte";
+
+  let location = useLocation();
+  let app;
+
+  onMount(async () => {
+    try {
+      await getUser("@me");
+    } catch (_) {
+      let params = new URLSearchParams();
+      params.set("back", window.location.pathname + window.location.search);
+      navigate("/login" + params.toString());
+    }
+    try {
+      let params = new URLSearchParams($location.search);
+      app = await getOAuthApp(params.get("client_id"));
+    } catch (_) {
+      navigate("/oauth/invalid-app");
+    }
+  });
+</script>
+
+<div>
+  {#if app}
+    <div>
+      <h2>{app.app_name}</h2>
+      <div>{app.app_desc}</div>
+    </div>
+  {:else}
+    <LazyDelay delayMs={500} />
+  {/if}
+</div>

src/routes/oauth/OAuthRoute.svelte

@@ -1,23 +1,13 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { navigate, useLocation } from "svelte-navigator";
-  import { getUser } from "~/api/login";
-
-  let location = useLocation();
-
-  onMount(async () => {
-    try {
-      await getUser("@me");
-    } catch (_) {
-      let params = new URLSearchParams();
-      params.set("back", window.location.pathname + window.location.search);
-      navigate("/login" + params.toString());
-    }
-    try {
-      let params = new URLSearchParams($location.search);
-      await getOAuthApp(params.get("client_id"));
-    } catch (_) {
-      navigate("/oauth/invalid-app");
-    }
-  });
+  import { Route, Router } from "svelte-navigator";
+  import Authorize from "./Authorize.svelte";
 </script>
+
+<Router primary={false}>
+  <Route path="authorize">
+    <Authorize />
+  </Route>
+  <Route path="invalid-app">
+    <p>Invalid app</p>
+  </Route>
+</Router>