Move login to its own route.

This - in passing - fixes the problem where the client failed to subscribe after logging in, by causing the whole subscription process to be re-run when returning to the main interface.

3 files changed, 10 insertions, 4 deletions

diff --git a/ui/lib/components/LogIn.svelte b/ui/lib/components/LogIn.svelte
index 2836e6d..e1cda8a 100644
--- a/ui/lib/components/LogIn.svelte
+++ b/ui/lib/components/LogIn.svelte
@@ -1,4 +1,5 @@
 <script>
+    import { goto } from '$app/navigation';
     import { logIn } from '$lib/apiServer';
     import { currentUser } from '$lib/store';
 
@@ -6,13 +7,14 @@
     let username = '';
     let password = '';
 
-    async function handleLogin(event) {
+    async function handleLogin() {
         disabled = true;
         const response = await logIn(username, password);
         if (200 <= response.status && response.status < 300) {
             currentUser.update(() => ({ username }));
             username = '';
             password = '';
+            goto('/');
         }
         disabled = false;
     }
diff --git a/ui/lib/components/LogOut.svelte b/ui/lib/components/LogOut.svelte
index 01bef1b..ba0861a 100644
--- a/ui/lib/components/LogOut.svelte
+++ b/ui/lib/components/LogOut.svelte
@@ -1,17 +1,21 @@
 <script>
+    import { goto } from '$app/navigation';
     import { logOut} from '$lib/apiServer';
     import { currentUser } from '$lib/store';
 
-    async function handleLogout(event) {
+    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}>
-    @{$currentUser.username}
+    {#if $currentUser}
+        @{$currentUser.username}
+    {/if}
     <button
         class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
         type="submit"
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 0da78d4..b2746e0 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -4,7 +4,7 @@
 
     export let channel = null;
     let input;
-    let value;
+    let value = '';
     let sending = false;
 
     $: disabled = (channel === null);