From 1e325913875642916d526bde52cea0728c0515bb Mon Sep 17 00:00:00 2001
From: axel <contact@axel.moe>
Date: Sat, 19 Apr 2025 00:58:43 +0200
Subject: [PATCH] feat: add session management page - closes #1

---
 .../dash/account/sessions/+page.server.ts     | 21 +++++++++
 src/routes/dash/account/sessions/+page.svelte | 47 +++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 src/routes/dash/account/sessions/+page.server.ts
 create mode 100644 src/routes/dash/account/sessions/+page.svelte

diff --git a/src/routes/dash/account/sessions/+page.server.ts b/src/routes/dash/account/sessions/+page.server.ts
new file mode 100644
index 0000000..d0ea62e
--- /dev/null
+++ b/src/routes/dash/account/sessions/+page.server.ts
@@ -0,0 +1,21 @@
+import { FORBIDDEN, SUCCESS } from '$lib/server/commonResponses';
+import { deleteSession, getUserSessions } from '$lib/server/sessions';
+import { fail, type Actions, type ServerLoad } from '@sveltejs/kit';
+
+export const load: ServerLoad = async ({ locals: { guard } }) => {
+  const user = guard.requiresAuth().orRedirects().getUser();
+  return {
+    sessions: getUserSessions(user.id),
+  };
+};
+
+export const actions = {
+  delete: async ({ locals: { guard }, request }) => {
+    if (guard.requiresAuth().isFailed()) return FORBIDDEN;
+
+    const id = (await request.formData()).get('id');
+
+    const deleted = deleteSession({ publicId: id?.toString() });
+    return deleted ? SUCCESS : fail(404, { error: 'Could not find session.' });
+  },
+} satisfies Actions;
diff --git a/src/routes/dash/account/sessions/+page.svelte b/src/routes/dash/account/sessions/+page.svelte
new file mode 100644
index 0000000..6a8142d
--- /dev/null
+++ b/src/routes/dash/account/sessions/+page.svelte
@@ -0,0 +1,47 @@
+<script>
+  import { browser } from '$app/environment';
+  import { pageTitle } from '$lib/v2/globalStores.js';
+  import ListPage from '$lib/v2/snippets/ListPage.svelte';
+  import { Button, Separator } from 'bits-ui';
+  import IconPlugConnectedX from '~icons/tabler/plug-connected-x';
+
+  let { data, form } = $props();
+
+  $pageTitle = 'My active sessions';
+
+  $effect(() => {
+    if (form?.success && browser) {
+      window.location.reload();
+    }
+  });
+</script>
+
+<ListPage>
+  <div class="flex flex-col gap-10 sm:mx-auto sm:w-4/5">
+    {#each data.sessions as session}
+      <div
+        class="flex flex-col gap-5 w-full rounded-xl sm:rounded-2xl border border-neutral-600
+          px-6 py-5 sm:px-10 sm:py-8 bg-neutral-950 shadow-xl text-neutral-500 text-sm text-justify"
+      >
+        <p>User-Agent: <span class="text-neutral-200 font-semibold">{session.userAgent}</span></p>
+        <p>IP Address: <span class="text-neutral-200 font-semibold">{session.ip}</span></p>
+        <Separator.Root class="bg-neutral-600 h-px w-full"></Separator.Root>
+        <div class="flex items-center justify-end gap-5 text-xs sm:text-sm">
+          <p>Don't recognize this?</p>
+          <form method="POST" action="?/delete">
+            <input type="hidden" name="id" value={session.publicId} />
+            <Button.Root
+              class="flex items-center justify-center gap-2 bg-neutral-100 text-neutral-950 rounded-full px-4 p-2
+              border border-white cursor-pointer transition-all ease-in-out duration-300
+              hover:scale-95 hover:bg-neutral-400"
+            >
+              End session
+              <IconPlugConnectedX />
+            </Button.Root>
+          </form>
+        </div>
+      </div>
+    {/each}
+    <div class="h-10"></div>
+  </div>
+</ListPage>