5 files changed, 49 insertions, 10 deletions
diff --git a/ui/lib/apiServer.js b/ui/lib/apiServer.js
index db554e2..19dcf60 100644
--- a/ui/lib/apiServer.js
+++ b/ui/lib/apiServer.js
@@ -30,6 +30,10 @@ export async function logOut() {
   return apiServer.post('/auth/logout', {});
 }
 
+export async function changePassword(password, to) {
+  return apiServer.post('/password', { password, to });
+}
+
 export async function createChannel(name) {
   return apiServer.post('/channels', { name });
 }
diff --git a/ui/lib/components/LogOut.svelte b/ui/lib/components/CurrentUser.svelte
index ba0861a..4b1b974 100644
--- a/ui/lib/components/LogOut.svelte
+++ b/ui/lib/components/CurrentUser.svelte
@@ -14,7 +14,7 @@
 
 <form on:submit|preventDefault={handleLogout}>
     {#if $currentUser}
-        @{$currentUser.username}
+        <a href="/me">@{$currentUser.username}</a>
     {/if}
     <button
         class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 9abaaf4..08c6694 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -86,8 +86,4 @@
         max-height: 100%;
         overflow: scroll;
     }
-    #interface .active-channel {
-        border: 1px solid grey;
-        border-radius: 1.25rem;
-    }
 </style>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
new file mode 100644
index 0000000..fb612b8
--- /dev/null
+++ b/ui/routes/(app)/me/+page.svelte
@@ -0,0 +1,41 @@
+<script>
+	import { changePassword } from '$lib/apiServer.js';
+
+	import Invite from '$lib/components/Invite.svelte';
+
+	let currentPassword, newPassword, confirmPassword, passwordForm;
+	let pending = false;
+	$: valid = (newPassword === confirmPassword) && (newPassword !== currentPassword);
+	$: disabled = pending || !valid;
+
+	async function onPasswordChange() {
+		pending = true;
+		let response = await changePassword(currentPassword, newPassword);
+		switch (response.status) {
+			case 200:
+				passwordForm.reset();
+				break;
+		}
+		pending = false;
+	}
+</script>
+
+<form on:submit|preventDefault={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>
+
+	<button class="btn variant-filled" type="submit" disabled={disabled}>
+		change password
+	</button>
+</form>
+
+<Invite />
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index fdd3883..711b8bd 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -3,18 +3,16 @@
   import "../app.css";
 
   import { currentUser } from '$lib/store';
-  import LogOut from '$lib/components/LogOut.svelte';
-  import Invite from '$lib/components/Invite.svelte';
+  import CurrentUser from '$lib/components/CurrentUser.svelte';
 </script>
 
 <div id="app">
     <AppBar>
         <svelte:fragment slot="lead">🌳</svelte:fragment>
-            <a href="/">understory</a>
+        <a href="/">understory</a>
         <svelte:fragment slot="trail">
             {#if $currentUser}
-                <Invite />
-                <LogOut />
+                <CurrentUser />
             {/if}
         </svelte:fragment>
     </AppBar>