Hoist the UI one step up further

1 files changed, 22 insertions, 0 deletions

diff --git a/ui/lib/components/LogOut.svelte b/ui/lib/components/LogOut.svelte
new file mode 100644
index 0000000..01bef1b
--- /dev/null
+++ b/ui/lib/components/LogOut.svelte
@@ -0,0 +1,22 @@
+<script>
+    import { logOut} from '$lib/apiServer';
+    import { currentUser } from '$lib/store';
+
+    async function handleLogout(event) {
+        const response = await logOut();
+        if (200 <= response.status && response.status < 300) {
+            currentUser.update(() => null);
+        }
+    }
+</script>
+
+<form on:submit|preventDefault={handleLogout}>
+    @{$currentUser.username}
+    <button
+        class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
+        type="submit"
+    >log out</button>
+</form>
+
+<style>
+</style>