feat: add session management page - closes #1

src/lib/server/sessions.ts

@@ -5,15 +5,16 @@ import { users } from './db';
 type SessionData = {
   userId: string;
   userAgent: string;
+  ip: string;
 };
 
-const sessions: Map<string, SessionData> = new Map();
+const sessions: Map<string, SessionData & { publicId: string }> = new Map();
 
 export function createSession(data: SessionData) {
-  const token = nanoid();
-  sessions.set(token, data);
-  setTimeout(() => sessions.delete(token), parseInt(env.SESSION_LIFETIME) * 1000 || 86_400_000);
-  return token;
+  const sessionId = nanoid();
+  sessions.set(sessionId, { ...data, publicId: nanoid() });
+  setTimeout(() => sessions.delete(sessionId), parseInt(env.SESSION_LIFETIME) * 1000 || 86_400_000);
+  return sessionId;
 }
 
 export async function getUserFromSession(sessionId?: string) {
@@ -25,7 +26,26 @@ export async function getUserFromSession(sessionId?: string) {
   return await users.getById(data.userId);
 }
 
-export function deleteSession(sessionId?: string) {
-  if (!sessionId) return;
-  sessions.delete(sessionId);
+export function deleteSession(criteria: { sessionId?: string; publicId?: string }) {
+  let deleted = false;
+
+  if (criteria.sessionId) {
+    deleted = sessions.delete(criteria.sessionId);
+  } else {
+    for (let [k, v] of sessions) {
+      if (v.publicId == criteria.publicId) {
+        // surprisingly, deleting while iterating is fine with ES6 iterables
+        deleted = sessions.delete(k);
+      }
+    }
+  }
+
+  return deleted;
+}
+
+export function getUserSessions(userId: string) {
+  return sessions
+    .values()
+    .filter((s) => s.userId == userId)
+    .toArray();
 }

src/lib/v2/snippets/ListPage.svelte

@@ -2,7 +2,7 @@
   import { Button } from 'bits-ui';
   import IconPlus from '~icons/tabler/plus';
 
-  let { createHref = null, msgAdd, children } = $props();
+  let { createHref = null, msgAdd = '', children } = $props();
 </script>
 
 {#if createHref}

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;

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>

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

@@ -91,6 +91,7 @@ export const actions = {
       createSession({
         userAgent: request.headers.get('user-agent') ?? 'UNKNOWN',
         userId: user.id,
+        ip,
       }),
       {
         path: '/',

src/routes/logout/+page.server.ts

@@ -2,7 +2,7 @@ import { deleteSession } from '$lib/server/sessions';
 import { redirect, type ServerLoad } from '@sveltejs/kit';
 
 export const load: ServerLoad = async ({ cookies }) => {
-  deleteSession(cookies.get('session'));
+  deleteSession({ sessionId: cookies.get('session') });
   cookies.delete('session', { path: '/' });
   redirect(302, '/login');
 };