4 files changed, 18 insertions, 80 deletions
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 0a8c58d..86bc330 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -56,7 +56,7 @@
 </script>
 
 <svelte:head>
-  <title>understory</title>
+  <title>pilcrow</title>
 </svelte:head>
 
 {#if loading}
@@ -71,7 +71,7 @@
         <CreateChannelForm />
       </div>
     </nav>
-    <main>
+    <main class="pl-4">
       {@render children?.()}
     </main>
   </div>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 8d24a61..aded292 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -1,79 +1,17 @@
 <script>
-  import { goto } from '$app/navigation';
-  import { changePassword, logOut } from '$lib/apiServer.js';
-  import { currentUser } from '$lib/store';
-
+  import LogOut from '$lib/components/LogOut.svelte';
   import Invites from '$lib/components/Invites.svelte';
-
-  let currentPassword = $state(''),
-    newPassword = $state(''),
-    confirmPassword = $state(''),
-    passwordForm;
-  let pending = $state(false);
-  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;
-    let response = await changePassword(currentPassword, newPassword);
-    switch (response.status) {
-      case 200:
-        passwordForm.reset();
-        break;
-    }
-    pending = false;
-  }
+  import ChangePassword from '$lib/components/ChangePassword.svelte';
 </script>
 
-<form onsubmit={onLogOut}>
-  <button class="btn variant-filled" type="submit">log out</button>
-</form>
-
-<form onsubmit={onPasswordChange} bind:this={passwordForm}>
-  <label
-    >current password
-    <input
-      class="input"
-      name="currentPassword"
-      type="password"
-      placeholder="password"
-      bind:value={currentPassword}
-    />
-  </label>
-
-  <label
-    >new password
-    <input
-      class="input"
-      name="newPassword"
-      type="password"
-      placeholder="password"
-      bind:value={newPassword}
-    />
-  </label>
-
-  <label
-    >confirm new password
-    <input
-      class="input"
-      name="confirmPassword"
-      type="password"
-      placeholder="password"
-      bind:value={confirmPassword}
-    />
-  </label>
+<div class="mb-4">
+  <ChangePassword />
+</div>
 
-  <button class="btn variant-filled" type="submit" {disabled}> change password </button>
-</form>
+<div class="mb-4">
+  <Invites />
+</div>
 
-<Invites />
+<div>
+  <LogOut />
+</div>
diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index 18bf437..4433bd6 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -11,10 +11,10 @@
   let pending = false;
   let disabled = $derived(pending);
 
-  async function onSubmit(event) {
+  async function onSubmit(event, inviteId) {
     event.preventDefault();
     pending = true;
-    const response = await acceptInvite(data.invite.id, username, password);
+    const response = await acceptInvite(inviteId, username, password);
     if (200 <= response.status && response.status < 300) {
       username = '';
       password = '';
@@ -32,5 +32,5 @@
   <div class="card m-4 p-4">
     <p>Hi there! {invite.issuer} invites you to the conversation.</p>
   </div>
-  <LogIn {disabled} bind:username bind:password onsubmit={onSubmit} />
+  <LogIn {disabled} bind:username bind:password onsubmit={(event) => onSubmit(event, invite.id)} />
 {/await}
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index ef3e823..8940659 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -30,10 +30,10 @@
       <img class="w-8 h-8" alt="logo" src={logo} />
     </button>
   </svelte:fragment>
-  <a href="/">understory</a>
+  <a href="/">pilcrow</a>
   <svelte:fragment slot="trail">
     {#if $currentUser}
-      <div class="rounded-full bg-secondary-400 px-2 py-1">
+      <div class="rounded-full bg-secondary-400 px-3 py-1">
         <a href="/me">@{$currentUser.username}</a>
       </div>
     {/if}