From 969b02d0fe636507acf5ee8d99240d6bb8fae010 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Wed, 6 Nov 2024 11:22:19 -0500
Subject: Move the logout button into `/me`. Make the self link a little more
 prominent.

---
 ui/routes/(app)/me/+page.svelte | 17 ++++++++++++++++-
 ui/routes/+layout.svelte        |  6 +++---
 2 files changed, 19 insertions(+), 4 deletions(-)

(limited to 'ui/routes')

diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 30da6f0..8d24a61 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -1,5 +1,7 @@
 <script>
-  import { changePassword } from '$lib/apiServer.js';
+  import { goto } from '$app/navigation';
+  import { changePassword, logOut } from '$lib/apiServer.js';
+  import { currentUser } from '$lib/store';
 
   import Invites from '$lib/components/Invites.svelte';
 
@@ -11,6 +13,15 @@
   let valid = $derived(newPassword === confirmPassword && newPassword !== currentPassword);
   let disabled = $derived(pending || !valid);
 
+  async function onLogOut(event) {
+    event.preventDefault();
+    const response = await logOut();
+    if (200 <= response.status && response.status < 300) {
+      currentUser.update(() => null);
+      goto('/login');
+    }
+  }
+
   async function onPasswordChange(event) {
     event.preventDefault();
     pending = true;
@@ -24,6 +35,10 @@
   }
 </script>
 
+<form onsubmit={onLogOut}>
+  <button class="btn variant-filled" type="submit">log out</button>
+</form>
+
 <form onsubmit={onPasswordChange} bind:this={passwordForm}>
   <label
     >current password
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 094cacb..ef3e823 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -7,8 +7,6 @@
   import { AppBar } from '@skeletonlabs/skeleton';
   import { currentUser } from '$lib/store';
 
-  import CurrentUser from '$lib/components/CurrentUser.svelte';
-
   let pageContext = $state({
     showMenu: false
   });
@@ -35,7 +33,9 @@
   <a href="/">understory</a>
   <svelte:fragment slot="trail">
     {#if $currentUser}
-      <CurrentUser />
+      <div class="rounded-full bg-secondary-400 px-2 py-1">
+        <a href="/me">@{$currentUser.username}</a>
+      </div>
     {/if}
   </svelte:fragment>
 </AppBar>
-- 
cgit v1.2.3