Don't leave field binding vars uninitialized.

This was causing problems for changing passwords: if the user didn't type anything in the "original password" field, the code path to sending that field to the server was just straight-up omitting the field from the message, rather than setting it to empty string, causing a 422 Unprocessable Entity.

On investigation we had latent bugs related to this in a bunch of spots.

7 files changed, 31 insertions, 38 deletions

diff --git a/ui/lib/apiServer.js b/ui/lib/apiServer.js
index 19dcf60..5c6e5ef 100644
--- a/ui/lib/apiServer.js
+++ b/ui/lib/apiServer.js
@@ -10,20 +10,12 @@ export async function boot() {
   return apiServer.get('/boot');
 }
 
-export async function setup(username, password) {
-  const data = {
-    name: username,
-    password,
-  };
-  return apiServer.post('/setup', data);
+export async function setup(name, password) {
+  return apiServer.post('/setup', { name, password });
 }
 
-export async function logIn(username, password) {
-  const data = {
-    name: username,
-    password,
-  };
-  return apiServer.post('/auth/login', data);
+export async function logIn(name, password) {
+  return apiServer.post('/auth/login', { name, password });
 }
 
 export async function logOut() {
@@ -46,7 +38,7 @@ export async function deleteMessage(messageId) {
   // TODO
 }
 
-export async function createInvite(inviteId) {
+export async function createInvite() {
   return apiServer.post(`/invite`, {});
 }
 
diff --git a/ui/lib/components/CreateChannelForm.svelte b/ui/lib/components/CreateChannelForm.svelte
index ddcf486..b716736 100644
--- a/ui/lib/components/CreateChannelForm.svelte
+++ b/ui/lib/components/CreateChannelForm.svelte
@@ -1,16 +1,17 @@
 <script>
     import { createChannel } from '$lib/apiServer';
 
-    let name = '';
-    let disabled = false;
+    let name = "";
+    let pending = false;
+    $: disabled = pending;
 
     async function handleSubmit(event) {
-        disabled = true;
+        pending = true;
         const response = await createChannel(name);
         if (200 <= response.status && response.status < 300) {
             name = '';
         }
-        disabled = false;
+        pending = false;
     }
 </script>
 
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index b2746e0..03ac7fa 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -5,16 +5,16 @@
     export let channel = null;
     let input;
     let value = '';
-    let sending = false;
+    let pending = false;
 
-    $: disabled = (channel === null);
+    $: disabled = pending || (channel === null);
 
     async function handleSubmit() {
         if (channel !== null) {
-            sending = true;
+            pending = true;
             // TODO try/catch:
             await postToChannel(channel, value);
-            sending = false;
+            pending = false;
             value = '';
             await tick();
             input.focus();
@@ -23,6 +23,6 @@
 </script>
 
 <form on:submit|preventDefault={handleSubmit} class="flex flex-row flex-nowrap">
-    <input bind:this={input} bind:value={value} disabled={sending || disabled} type="search" class="flex-auto h-6 input rounded-r-none" />
+    <input bind:this={input} bind:value={value} disabled={disabled} type="search" class="flex-auto h-6 input rounded-r-none" />
     <button color="primary variant-filled-secondary" type="submit" class="flex-none w-6 h-6 btn-icon variant-filled rounded-l-none">&raquo;</button>
 </form>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 7559dbe..82af3c7 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -3,7 +3,7 @@
 
 	import Invites from '$lib/components/Invites.svelte';
 
-	let currentPassword, newPassword, confirmPassword, passwordForm;
+	let currentPassword = "", newPassword = "", confirmPassword = "", passwordForm;
 	let pending = false;
 	$: valid = (newPassword === confirmPassword) && (newPassword !== currentPassword);
 	$: disabled = pending || !valid;
diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index 798dfb7..7ae388a 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -6,19 +6,19 @@
 
     export let data;
 
-    let disabled;
-    let username;
-    let password;
+    let username = "", password = "";
+    let pending = false;
+    $: disabled = pending;
 
     async function onSubmit() {
-        disabled = true;
+        pending = true;
         const response = await acceptInvite(data.invite.id, username, password);
         if (200 <= response.status && response.status < 300) {
             username = '';
             password = '';
             goto('/');
         }
-        disabled = false;
+        pending = false;
     }
 </script>
 
diff --git a/ui/routes/(login)/login/+page.svelte b/ui/routes/(login)/login/+page.svelte
index 29dba54..0387e4a 100644
--- a/ui/routes/(login)/login/+page.svelte
+++ b/ui/routes/(login)/login/+page.svelte
@@ -4,19 +4,19 @@
 
     import LogIn from '$lib/components/LogIn.svelte';
 
-    let disabled;
-    let username;
-    let password;
+    let username = "", password = "";
+    let pending = false;
+    $: disabled = pending;
 
     async function onSubmit() {
-        disabled = true;
+        pending = true;
         const response = await logIn(username, password);
         if (200 <= response.status && response.status < 300) {
             username = '';
             password = '';
             goto('/');
         }
-        disabled = false;
+        pending = false;
     }
 </script>
 
diff --git a/ui/routes/(login)/setup/+page.svelte b/ui/routes/(login)/setup/+page.svelte
index 2503502..a1974b8 100644
--- a/ui/routes/(login)/setup/+page.svelte
+++ b/ui/routes/(login)/setup/+page.svelte
@@ -4,19 +4,19 @@
 
     import LogIn from '$lib/components/LogIn.svelte';
 
-    let disabled;
-    let username;
-    let password;
+    let username = "", password = "";
+    let pending = false;
+    $: disabled = pending;
 
     async function onSubmit() {
-        disabled = true;
+        pending = true;
         const response = await setup(username, password);
         if (200 <= response.status && response.status < 300) {
             username = '';
             password = '';
             goto('/');
         }
-        disabled = false;
+        pending = false;
     }
 </script>