2 files changed, 19 insertions, 4 deletions
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>