Factor out the elements of the `/me` page, and style them a little.

1 files changed, 18 insertions, 0 deletions

diff --git a/ui/lib/components/LogOut.svelte b/ui/lib/components/LogOut.svelte
new file mode 100644
index 0000000..25dd5e9
--- /dev/null
+++ b/ui/lib/components/LogOut.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { goto } from '$app/navigation';
+  import { logOut } from '$lib/apiServer.js';
+  import { currentUser } from '$lib/store';
+
+  async function onsubmit(event) {
+    event.preventDefault();
+    const response = await logOut();
+    if (200 <= response.status && response.status < 300) {
+      currentUser.update(() => null);
+      goto('/login');
+    }
+  }
+</script>
+
+<form {onsubmit}>
+  <button class="btn bg-orange-400" type="submit">log out</button>
+</form>