From affe4a55413adfa74417bc660de8f570561a010c Mon Sep 17 00:00:00 2001
From: MrMelon54 <github@mrmelon54.com>
Date: Mon, 24 Oct 2022 15:39:25 +0100
Subject: [PATCH] Add oauth authorize route and separate lazy component and
 lazy delay

---
 src/App.svelte                                | 12 +++---
 src/api/oauth.ts                              |  7 ++++
 src/lib/{Lazy.svelte => LazyComponent.svelte} | 17 +++------
 src/lib/LazyDelay.svelte                      | 21 ++++++++++
 src/routes/oauth/Authorize.svelte             | 38 +++++++++++++++++++
 src/routes/oauth/OAuthRoute.svelte            | 32 ++++++----------
 6 files changed, 89 insertions(+), 38 deletions(-)
 rename src/lib/{Lazy.svelte => LazyComponent.svelte} (65%)
 create mode 100644 src/lib/LazyDelay.svelte
 create mode 100644 src/routes/oauth/Authorize.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 23c3de8..4314846 100644
--- a/src/App.svelte
+++ b/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>
diff --git a/src/api/oauth.ts b/src/api/oauth.ts
index e69de29..2310771 100644
--- a/src/api/oauth.ts
+++ b/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();
+}
diff --git a/src/lib/Lazy.svelte b/src/lib/LazyComponent.svelte
similarity index 65%
rename from src/lib/Lazy.svelte
rename to src/lib/LazyComponent.svelte
index e4644c7..5222716 100644
--- a/src/lib/Lazy.svelte
+++ b/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}
diff --git a/src/lib/LazyDelay.svelte b/src/lib/LazyDelay.svelte
new file mode 100644
index 0000000..57ad071
--- /dev/null
+++ b/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}
diff --git a/src/routes/oauth/Authorize.svelte b/src/routes/oauth/Authorize.svelte
new file mode 100644
index 0000000..68ecd49
--- /dev/null
+++ b/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>
diff --git a/src/routes/oauth/OAuthRoute.svelte b/src/routes/oauth/OAuthRoute.svelte
index f5e5bb0..a5b40b4 100644
--- a/src/routes/oauth/OAuthRoute.svelte
+++ b/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>