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.

3 files changed, 15 insertions, 22 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>