From 2d43e1c34852e4a95b4512715888f438b405270a Mon Sep 17 00:00:00 2001
From: Maddy Guthridge <hello@maddyguthridge.com>
Date: Sun, 29 Sep 2024 21:32:01 +1000
Subject: [PATCH 1/3] Split admin panel into distinct components

---
 src/routes/admin/+page.svelte       | 105 +++++-----------------------
 src/routes/admin/GitSettings.svelte |  93 ++++++++++++++++++++++++
 src/routes/admin/ReloadData.svelte  |   9 +++
 3 files changed, 118 insertions(+), 89 deletions(-)
 create mode 100644 src/routes/admin/GitSettings.svelte
 create mode 100644 src/routes/admin/ReloadData.svelte

diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index ebdc403b..d9a7741c 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -1,37 +1,25 @@
 <script lang="ts">
-  import api from '$endpoints';
-  import Background from '$components/Background.svelte';
-  import Navbar from '$components/navbar';
-  import Paper from '$components/Paper.svelte';
-  import consts from '$lib/consts';
-
-  export let data: import('./$types').PageData;
-
-  // Git setup
-  let gitUrl = '';
-
-  async function submitSwitchToGit() {
-    await api().admin.git.init(gitUrl);
-  }
-
-  // Git controls
-  let commitMessage = '';
-
-  async function gitCommit() {
-    await api().admin.git.commit(commitMessage);
-  }
+  import Background from "$components/Background.svelte";
+  import Navbar from "$components/navbar";
+  import Paper from "$components/Paper.svelte";
+  import consts from "$lib/consts";
+  import GitSettings from "./GitSettings.svelte";
+  import ChangePassword from "./ChangePassword.svelte";
+  import ReloadData from "./ReloadData.svelte";
+
+  export let data: import("./$types").PageData;
 </script>
 
 <svelte:head>
   <title>Admin - {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>
 
 <Navbar
-  path={[{ txt: 'Admin', url: 'admin' }]}
+  path={[{ txt: "Admin", url: "admin" }]}
   config={data.globals.config}
   loggedIn={true}
 />
@@ -42,70 +30,9 @@
   <div id="paper-container">
     <Paper>
       <div id="contents">
-        <div>
-          {#if data.repo}
-          <h2>Git status</h2>
-          <p>Current branch: {data.repo.branch}</p>
-          <p>Current commit: {data.repo.commit}</p>
-          <p>
-            {#if data.repo.behind}
-              {data.repo.behind} commits behind.
-            {/if}
-            {#if data.repo.ahead}
-              {data.repo.ahead} commits ahead.
-            {/if}
-          </p>
-
-          <!-- Push/pull -->
-          {#if data.repo.behind}
-          <button on:click={() => api().admin.git.push()}>Push</button>
-          {:else if data.repo.ahead}
-          <button on:click={() => api().admin.git.pull()}>Pull</button>
-          {/if}
-
-          <!-- Commit -->
-           {#if !data.repo.clean}
-
-           <h3>Changes</h3>
-
-           <ul>
-             {#each data.repo.changes as change}
-              {#if change.from}
-              <li>Rename {change.from} to ({change.path})</li>
-              {:else if change.index === '?'}
-              <li>Create {change.path}</li>
-              {:else if change.index === 'D'}
-              <li>Delete {change.path}</li>
-              {:else}
-              <li>Update {change.path}</li>
-              {/if}
-             {/each}
-           </ul>
-
-           <form on:submit|preventDefault={gitCommit}>
-             <input required type="text" name="commit-message" id="commit-message" placeholder="Commit message" bind:value={commitMessage}>
-             <input type="submit" value="Commit changes">
-           </form>
-           {/if}
-
-          {:else}
-          <h2>Git is currently not in use</h2>
-
-          You can use a Git repository to back up your portfolio data. Enter the
-          clone URL for an empty Git repository and it will be set up for you.
-
-          <form on:submit|preventDefault={submitSwitchToGit}>
-            <input required type="text" name="git-url" id="git-url" placeholder="git@github.com:MaddyGuthridge/Minifolio.git" bind:value={gitUrl}>
-            <input type="submit" value="Switch to a Git repository">
-          </form>
-          {/if}
-        </div>
-        <div>
-          <h2>Reload data from disk</h2>
-          If you have edited your data manually, you can use this button to
-          refresh it.
-          <button on:click={() => api().admin.data.refresh()}>Refresh data</button>
-        </div>
+        <GitSettings {data} />
+        <ChangePassword username={"admin"} />
+        <ReloadData />
       </div>
     </Paper>
   </div>
diff --git a/src/routes/admin/GitSettings.svelte b/src/routes/admin/GitSettings.svelte
new file mode 100644
index 00000000..a357b3ef
--- /dev/null
+++ b/src/routes/admin/GitSettings.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+  import api from "$endpoints";
+
+  export let data: import("./$types").PageData;
+
+  // Git setup
+  let gitUrl = "";
+
+  async function submitSwitchToGit() {
+    await api().admin.git.init(gitUrl);
+  }
+
+  // Git controls
+  let commitMessage = "";
+
+  async function gitCommit() {
+    await api().admin.git.commit(commitMessage);
+  }
+</script>
+
+<div>
+  {#if data.repo}
+    <h2>Git status</h2>
+    <p>Current branch: {data.repo.branch}</p>
+    <p>Current commit: {data.repo.commit}</p>
+    <p>
+      {#if data.repo.behind}
+        {data.repo.behind} commits behind.
+      {/if}
+      {#if data.repo.ahead}
+        {data.repo.ahead} commits ahead.
+      {/if}
+    </p>
+
+    <!-- Push/pull -->
+    {#if data.repo.behind}
+      <button on:click={() => api().admin.git.push()}>Push</button>
+    {:else if data.repo.ahead}
+      <button on:click={() => api().admin.git.pull()}>Pull</button>
+    {/if}
+
+    <!-- Commit -->
+    {#if data.repo.clean}
+      <h3>Changes</h3>
+      Working tree clean.
+    {:else}
+      <h3>Changes</h3>
+
+      <ul>
+        {#each data.repo.changes as change}
+          {#if change.from}
+            <li>Rename {change.from} to ({change.path})</li>
+          {:else if change.index === "?"}
+            <li>Create {change.path}</li>
+          {:else if change.index === "D"}
+            <li>Delete {change.path}</li>
+          {:else}
+            <li>Update {change.path}</li>
+          {/if}
+        {/each}
+      </ul>
+
+      <form on:submit|preventDefault={gitCommit}>
+        <input
+          required
+          type="text"
+          name="commit-message"
+          id="commit-message"
+          placeholder="Commit message"
+          bind:value={commitMessage}
+        />
+        <input type="submit" value="Commit changes" />
+      </form>
+    {/if}
+  {:else}
+    <h2>Git is currently not in use</h2>
+
+    You can use a Git repository to back up your portfolio data. Enter the clone
+    URL for an empty Git repository and it will be set up for you.
+
+    <form on:submit|preventDefault={submitSwitchToGit}>
+      <input
+        required
+        type="text"
+        name="git-url"
+        id="git-url"
+        placeholder="git@github.com:MaddyGuthridge/Minifolio.git"
+        bind:value={gitUrl}
+      />
+      <input type="submit" value="Switch to a Git repository" />
+    </form>
+  {/if}
+</div>
diff --git a/src/routes/admin/ReloadData.svelte b/src/routes/admin/ReloadData.svelte
new file mode 100644
index 00000000..ddb7c460
--- /dev/null
+++ b/src/routes/admin/ReloadData.svelte
@@ -0,0 +1,9 @@
+<script>
+  import api from "$endpoints";
+</script>
+
+<div>
+  <h2>Reload data from disk</h2>
+  If you have edited your data manually, you can use this button to refresh it.
+  <button on:click={() => api().admin.data.refresh()}>Refresh data</button>
+</div>

From 819178067d7598e9b063e8607b3ea0efa40b7294 Mon Sep 17 00:00:00 2001
From: Maddy Guthridge <hello@maddyguthridge.com>
Date: Sun, 29 Sep 2024 21:32:07 +1000
Subject: [PATCH 2/3] Implement password changing

---
 src/routes/admin/ChangePassword.svelte | 63 ++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/routes/admin/ChangePassword.svelte

diff --git a/src/routes/admin/ChangePassword.svelte b/src/routes/admin/ChangePassword.svelte
new file mode 100644
index 00000000..9730348c
--- /dev/null
+++ b/src/routes/admin/ChangePassword.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import api from "$endpoints";
+
+  export let username: string;
+  let originalPassword = "";
+  let newPassword = "";
+  let repeatNewPassword = "";
+
+  async function submitChangePassword() {
+    await api().admin.auth.change(username, originalPassword, newPassword);
+    originalPassword = "";
+    newPassword = "";
+    repeatNewPassword = "";
+  }
+</script>
+
+<div>
+  <h2>Change authentication</h2>
+  <form on:submit={submitChangePassword}>
+    <p>
+      Username
+      <br />
+      <input placeholder="Your account username" bind:value={username} />
+    </p>
+    <p>
+      Original password
+      <br />
+      <input
+        type="password"
+        placeholder="Your original password"
+        bind:value={originalPassword}
+      />
+    </p>
+    <p>
+      New password
+      <br />
+      <input
+        type="password"
+        placeholder="A unique and secure password"
+        bind:value={newPassword}
+      />
+    </p>
+    <p>
+      Repeat new password
+      <br />
+      <input
+        type="password"
+        placeholder="Your new password again"
+        bind:value={repeatNewPassword}
+      />
+    </p>
+    {#if newPassword != repeatNewPassword}
+      <p>New passwords much match</p>
+    {/if}
+    <p>
+      <input
+        type="submit"
+        value="Change password"
+        disabled={newPassword != repeatNewPassword}
+      />
+    </p>
+  </form>
+</div>

From 7ddf8aa3d88b91d065186eab9e8093d0d2f71a3a Mon Sep 17 00:00:00 2001
From: Maddy Guthridge <hello@maddyguthridge.com>
Date: Sun, 29 Sep 2024 22:16:49 +1000
Subject: [PATCH 3/3] QOL: make login page redirect to previous page on success

---
 src/components/navbar/Navbar.svelte    | 36 ++++++++------
 src/routes/admin/+page.svelte          |  2 +
 src/routes/admin/LogOutAll.svelte      | 15 ++++++
 src/routes/admin/login/+page.server.ts |  3 +-
 src/routes/admin/login/+page.svelte    | 65 ++++++++++++++++++--------
 5 files changed, 88 insertions(+), 33 deletions(-)
 create mode 100644 src/routes/admin/LogOutAll.svelte

diff --git a/src/components/navbar/Navbar.svelte b/src/components/navbar/Navbar.svelte
index 3ff6c13d..efe77aad 100644
--- a/src/components/navbar/Navbar.svelte
+++ b/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 />
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index d9a7741c..75e2d9d9 100644
--- a/src/routes/admin/+page.svelte
+++ b/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>
diff --git a/src/routes/admin/LogOutAll.svelte b/src/routes/admin/LogOutAll.svelte
new file mode 100644
index 00000000..d099f452
--- /dev/null
+++ b/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>
diff --git a/src/routes/admin/login/+page.server.ts b/src/routes/admin/login/+page.server.ts
index 92f2dd1e..a28b8f4b 100644
--- a/src/routes/admin/login/+page.server.ts
+++ b/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 };
diff --git a/src/routes/admin/login/+page.svelte b/src/routes/admin/login/+page.svelte
index 87124ebb..1a49adc4 100644
--- a/src/routes/admin/login/+page.svelte
+++ b/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,8 +44,8 @@
   config={data.globals.config}
   loggedIn={false}
   path={[
-    { txt: 'Admin', url: 'admin' },
-    { txt: 'Login', url: 'login' },
+    { txt: "Admin", url: "admin" },
+    { txt: "Login", url: "login" },
   ]}
 />
 
@@ -41,17 +53,32 @@
   <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>