QOL: make login page redirect to previous page on success

Author: MaddyGuthridge

src/components/navbar/Navbar.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { dev } from '$app/environment';
-  import { goto } from '$app/navigation';
-  import api from '$endpoints';
-  import type { ConfigJson } from '$lib/server/data/config';
-  import Separator from '$components/Separator.svelte';
+  import { dev } from "$app/environment";
+  import { goto } from "$app/navigation";
+  import api from "$endpoints";
+  import type { ConfigJson } from "$lib/server/data/config";
+  import Separator from "$components/Separator.svelte";
 
-  export let path: { url: string, txt: string }[];
+  export let path: { url: string; txt: string }[];
   export let config: ConfigJson;
   /** Whether the user is logged in. Set to undefined if auth is disabled */
   export let loggedIn: boolean | undefined;
@@ -16,16 +16,26 @@
     location.reload();
   }
 
+  /**
+   * Go to the login page, with the from parameter determining the origin page.
+   */
+  async function gotoLogin() {
+    await goto(`/admin/login?from=${window.location.pathname}`);
+  }
+
   /** Clear all data, and take the user to the firstrun page */
   async function clear() {
     await api().debug.clear();
-    await goto('/admin/firstrun');
+    await goto("/admin/firstrun");
   }
 
   // This function needs to accept `path` as an input, otherwise the links
   // stop being reactive due to cacheing or something
-  function pathTo(path: { url: string, txt: string }[], i: number) {
-    return path.slice(0, i + 1).map(p => p.url).join('/');
+  function pathTo(path: { url: string; txt: string }[], i: number) {
+    return path
+      .slice(0, i + 1)
+      .map((p) => p.url)
+      .join("/");
   }
 </script>
 
@@ -38,7 +48,7 @@
         <a href="/">{config.siteShortName}</a> /
         {#each path.slice(0, -1) as p, i}
           <a href="/{pathTo(path, i)}">{p.txt}</a>
-          {'/ '}
+          {"/ "}
         {/each}
         {path[path.length - 1].txt}
       </h1>
@@ -48,14 +58,14 @@
   <!-- Control buttons -->
   <span id="control-buttons">
     {#if loggedIn}
-      <button on:click={() => goto('/admin')}> Admin </button>
+      <button on:click={() => goto("/admin")}> Admin </button>
       <button on:click={logOut}> Log out </button>
     {:else if loggedIn !== undefined}
       <!-- Only include a login button if logging in is enabled -->
-      <button on:click={() => goto('/admin/login')}> Log in </button>
+      <button on:click={gotoLogin}> Log in </button>
     {/if}
     <!-- About button navigates to about page -->
-    <button on:click={() => goto('/about')}> About </button>
+    <button on:click={() => goto("/about")}> About </button>
     <!-- In dev mode, add a quick shortcut to delete everything -->
     {#if dev}
       <Separator />

src/routes/admin/+page.svelte

@@ -6,6 +6,7 @@
   import GitSettings from "./GitSettings.svelte";
   import ChangePassword from "./ChangePassword.svelte";
   import ReloadData from "./ReloadData.svelte";
+    import LogOutAll from "./LogOutAll.svelte";
 
   export let data: import("./$types").PageData;
 </script>
@@ -32,6 +33,7 @@
       <div id="contents">
         <GitSettings {data} />
         <ChangePassword username={"admin"} />
+        <LogOutAll />
         <ReloadData />
       </div>
     </Paper>

src/routes/admin/LogOutAll.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import api from "$endpoints";
+
+  async function logOut() {
+    await api().admin.auth.revoke();
+    goto("/admin/login");
+  }
+</script>
+
+<div>
+  <h2>Log out of all sessions</h2>
+  <p>This will sign you out on all of your devices (including this one).</p>
+  <button on:click={logOut}>Log out of all sessions</button>
+</div>

src/routes/admin/login/+page.server.ts

@@ -12,7 +12,8 @@ export async function load(req) {
     loggedIn = true;
   } catch { /* empty */ }
   if (loggedIn) {
-    redirect(303, '/admin');
+    // If they are logged in, redirect them to the `from` URL if it exists.
+    redirect(303, req.url.searchParams.get("from") || '/');
   }
   const globals = await getPortfolioGlobals();
   return { globals };

src/routes/admin/login/+page.svelte

@@ -1,29 +1,41 @@
 <script lang="ts">
-  import api from '$endpoints';
-  import Background from '$components/Background.svelte';
-  import Navbar from '$components/navbar/Navbar.svelte';
-  import Paper from '$components/Paper.svelte';
-  import { goto } from '$app/navigation';
-  import consts from '$lib/consts';
+  import api from "$endpoints";
+  import Background from "$components/Background.svelte";
+  import Navbar from "$components/navbar/Navbar.svelte";
+  import Paper from "$components/Paper.svelte";
+  import { goto } from "$app/navigation";
+  import consts from "$lib/consts";
+  import { onMount } from "svelte";
 
-  export let data: import('./$types').PageData;
+  export let data: import("./$types").PageData;
 
-  let username = '';
-  let password = '';
+  let previousPage: string;
+
+  let username = "";
+  let password = "";
+
+  onMount(() => {
+    previousPage =
+      new URLSearchParams(window.location.search).get("from") || "/";
+    // Avoid circular redirects
+    if (previousPage.endsWith("/admin/login")) {
+      previousPage = "/";
+    }
+  });
 
   async function doLogin() {
     await api().admin.auth.login(username, password);
     // TODO: Cleanly handle and display errors
-    await goto('/admin');
+    await goto(previousPage);
   }
 </script>
 
 <svelte:head>
   <title>login - {data.globals.config.siteName}</title>
-  <meta name="generator" content="{consts.APP_NAME}">
-  <meta name="theme-color" content="{data.globals.config.color}">
+  <meta name="generator" content={consts.APP_NAME} />
+  <meta name="theme-color" content={data.globals.config.color} />
   <!-- Prevent web crawlers from indexing the admin page -->
-  <meta name="robots" content="noindex">
+  <meta name="robots" content="noindex" />
 </svelte:head>
 
 <Background color={data.globals.config.color}></Background>
@@ -32,26 +44,41 @@
   config={data.globals.config}
   loggedIn={false}
   path={[
-    { txt: 'Admin', url: 'admin' },
-    { txt: 'Login', url: 'login' },
+    { txt: "Admin", url: "admin" },
+    { txt: "Login", url: "login" },
   ]}
 />
 
 <div class="center">
   <Paper>
     <main>
       <div class="center">
-        <h1 style="font-size: 3rem"> Login </h1>
+        <h1 style="font-size: 3rem">Login</h1>
       </div>
 
       <form>
         <h3>Username</h3>
-        <input type="text" id="username" bind:value={username} placeholder="Username" />
+        <input
+          type="text"
+          id="username"
+          bind:value={username}
+          placeholder="Username"
+        />
 
         <h3>Password</h3>
-        <input type="password" id="password" bind:value={password} placeholder="Your complex and secure password" />
+        <input
+          type="password"
+          id="password"
+          bind:value={password}
+          placeholder="Your complex and secure password"
+        />
         <p></p>
-        <input type="submit" id="submit-main" value="Log in" on:click={doLogin} />
+        <input
+          type="submit"
+          id="submit-main"
+          value="Log in"
+          on:click={doLogin}
+        />
       </form>
     </main>
   </Paper>