Add oauth authorize route and separate lazy component and lazy delay
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
9a761e6c3c
commit
affe4a5541
|
@ -1,6 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Router, Route, Link, navigate } from "svelte-navigator";
|
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";
|
import { loginStore, type LoginStore } from "./stores/login";
|
||||||
|
|
||||||
function logoutAction() {
|
function logoutAction() {
|
||||||
|
@ -33,16 +33,16 @@
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<Route path="login">
|
<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>
|
||||||
<Route path="oauth">
|
<Route path="oauth/*">
|
||||||
<Lazy component={() => import("./routes/oauth/OAuthRoute.svelte")} delayMs={500}>Loading...</Lazy>
|
<LazyComponent component={() => import("./routes/oauth/OAuthRoute.svelte")} delayMs={500}>Loading...</LazyComponent>
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="profile">
|
<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>
|
||||||
<Route path="settings">
|
<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>
|
||||||
<Route>
|
<Route>
|
||||||
<h3>Default</h3>
|
<h3>Default</h3>
|
||||||
|
|
|
@ -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();
|
||||||
|
}
|
|
@ -1,34 +1,29 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
|
import LazyDelay from "./LazyDelay.svelte";
|
||||||
|
|
||||||
export let component: () => Promise<any>;
|
export let component: () => Promise<any>;
|
||||||
export let delayMs = null;
|
export let delayMs = null;
|
||||||
|
|
||||||
let loadedComponent = null;
|
let loadedComponent = null;
|
||||||
let timeout;
|
|
||||||
let showFallback = !delayMs;
|
|
||||||
|
|
||||||
let props;
|
let props: { [index: string]: any; };
|
||||||
$: {
|
$: {
|
||||||
const { component, delayMs, ...restProps } = $$props;
|
const { component, delayMs, ...restProps } = $$props;
|
||||||
props = restProps;
|
props = restProps;
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
if (delayMs) {
|
|
||||||
timeout = setTimeout(() => {
|
|
||||||
showFallback = true;
|
|
||||||
}, delayMs);
|
|
||||||
}
|
|
||||||
component().then((module) => {
|
component().then((module) => {
|
||||||
loadedComponent = module.default;
|
loadedComponent = module.default;
|
||||||
});
|
});
|
||||||
return () => clearTimeout(timeout);
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if loadedComponent}
|
{#if loadedComponent}
|
||||||
<svelte:component this={loadedComponent} {...props} />
|
<svelte:component this={loadedComponent} {...props} />
|
||||||
{:else if showFallback}
|
{:else}
|
||||||
<slot />
|
<LazyDelay {delayMs}>
|
||||||
|
<slot />
|
||||||
|
</LazyDelay>
|
||||||
{/if}
|
{/if}
|
|
@ -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}
|
|
@ -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>
|
|
@ -1,23 +1,13 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from "svelte";
|
import { Route, Router } from "svelte-navigator";
|
||||||
import { navigate, useLocation } from "svelte-navigator";
|
import Authorize from "./Authorize.svelte";
|
||||||
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");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<Router primary={false}>
|
||||||
|
<Route path="authorize">
|
||||||
|
<Authorize />
|
||||||
|
</Route>
|
||||||
|
<Route path="invalid-app">
|
||||||
|
<p>Invalid app</p>
|
||||||
|
</Route>
|
||||||
|
</Router>
|
||||||
|
|
Reference in New Issue