From 66d3fcf2e22f057bacce8d97d43a13c1c5a9ad09 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 29 Oct 2024 23:29:22 -0400
Subject: Add `change password` UI + API.

The protocol here re-checks the caller's password, as a "I left myself logged in" anti-pranking check.
---
 ui/lib/apiServer.js                  |  4 ++++
 ui/lib/components/CurrentUser.svelte | 26 +++++++++++++++++++++++
 ui/lib/components/LogOut.svelte      | 26 -----------------------
 ui/routes/(app)/+layout.svelte       |  4 ----
 ui/routes/(app)/me/+page.svelte      | 41 ++++++++++++++++++++++++++++++++++++
 ui/routes/+layout.svelte             |  8 +++----
 6 files changed, 74 insertions(+), 35 deletions(-)
 create mode 100644 ui/lib/components/CurrentUser.svelte
 delete mode 100644 ui/lib/components/LogOut.svelte
 create mode 100644 ui/routes/(app)/me/+page.svelte

(limited to 'ui')

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/CurrentUser.svelte b/ui/lib/components/CurrentUser.svelte
new file mode 100644
index 0000000..4b1b974
--- /dev/null
+++ b/ui/lib/components/CurrentUser.svelte
@@ -0,0 +1,26 @@
+<script>
+    import { goto } from '$app/navigation';
+    import { logOut} from '$lib/apiServer';
+    import { currentUser } from '$lib/store';
+
+    async function handleLogout() {
+        const response = await logOut();
+        if (200 <= response.status && response.status < 300) {
+            currentUser.update(() => null);
+            goto('/login');
+        }
+    }
+</script>
+
+<form on:submit|preventDefault={handleLogout}>
+    {#if $currentUser}
+        <a href="/me">@{$currentUser.username}</a>
+    {/if}
+    <button
+        class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
+        type="submit"
+    >log out</button>
+</form>
+
+<style>
+</style>
diff --git a/ui/lib/components/LogOut.svelte b/ui/lib/components/LogOut.svelte
deleted file mode 100644
index ba0861a..0000000
--- a/ui/lib/components/LogOut.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-    import { goto } from '$app/navigation';
-    import { logOut} from '$lib/apiServer';
-    import { currentUser } from '$lib/store';
-
-    async function handleLogout() {
-        const response = await logOut();
-        if (200 <= response.status && response.status < 300) {
-            currentUser.update(() => null);
-            goto('/login');
-        }
-    }
-</script>
-
-<form on:submit|preventDefault={handleLogout}>
-    {#if $currentUser}
-        @{$currentUser.username}
-    {/if}
-    <button
-        class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
-        type="submit"
-    >log out</button>
-</form>
-
-<style>
-</style>
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>
-- 
cgit v1.2.3


From cdb40ca671a85704f751179d13277a7db816b569 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 29 Oct 2024 23:53:23 -0400
Subject: Incrementally less jank invite listing.

---
 ui/lib/components/Invite.svelte  | 41 +++++++---------------------------------
 ui/lib/components/Invites.svelte | 28 +++++++++++++++++++++++++++
 ui/routes/(app)/me/+page.svelte  |  4 ++--
 3 files changed, 37 insertions(+), 36 deletions(-)
 create mode 100644 ui/lib/components/Invites.svelte

(limited to 'ui')

diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte
index f4babad..7fdc753 100644
--- a/ui/lib/components/Invite.svelte
+++ b/ui/lib/components/Invite.svelte
@@ -1,40 +1,13 @@
 <script>
-	import { base } from '$app/paths';
-	import { createInvite } from '$lib/apiServer';
 	import { clipboard } from '@skeletonlabs/skeleton';
 
-	let invite = null;
-	$: inviteUrl = invite ? new URL(`/invite/${invite.id}`, document.location) : null;
-	$: inviteUrl, console.log("invite url", inviteUrl);
+	export let id;
+	$: inviteUrl = new URL(`/invite/${id}`, document.location);
+</script>
 
-	async function onSubmit() {
-		let response = await createInvite();
-		if (response.status == 200) {
-			invite = response.data;
-		}
-		console.log("base url", base);
-	}
+<button
+	class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
+	use:clipboard={inviteUrl}>Copy</button>
+<span data-clipboard="inviteUrl">{inviteUrl}</span>
 
-	async function onReset() {
-		invite = null;
-	}
-</script>
 
-<form
-	on:submit|preventDefault={onSubmit}
-	on:reset|preventDefault={onReset}>
-	{#if inviteUrl}
-	<button
-		class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
-		use:clipboard={inviteUrl}
-		type="reset">
-		Copy Invite
-	</button>
-	{:else}
-	<button
-		class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
-		type="submit">
-		Invite
-	</button>
-	{/if}
-</form>
diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte
new file mode 100644
index 0000000..df51afb
--- /dev/null
+++ b/ui/lib/components/Invites.svelte
@@ -0,0 +1,28 @@
+<script>
+	import { writable } from 'svelte/store';
+	import { createInvite } from '$lib/apiServer';
+	import Invite from '$lib/components/Invite.svelte';
+
+	let invites = writable([]);
+	$: $invites, console.log("invites", $invites);
+
+	async function onSubmit() {
+		let response = await createInvite();
+		if (response.status == 200) {
+			invites.update(val => [...val, response.data]);
+		}
+	}
+</script>
+
+<ul>
+	{#each $invites as invite}
+	<li><Invite id={invite.id} /></li>
+	{/each}
+</ul>
+<form on:submit|preventDefault={onSubmit}>
+	<button
+		class="btn variant-filled"
+		type="submit">
+		Create Invitation
+	</button>
+</form>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index fb612b8..7559dbe 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { changePassword } from '$lib/apiServer.js';
 
-	import Invite from '$lib/components/Invite.svelte';
+	import Invites from '$lib/components/Invites.svelte';
 
 	let currentPassword, newPassword, confirmPassword, passwordForm;
 	let pending = false;
@@ -38,4 +38,4 @@
 	</button>
 </form>
 
-<Invite />
+<Invites />
-- 
cgit v1.2.3