aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server/src/lib/components/navbar/UserControls.svelte
diff options
context:
space:
mode:
authorIlion Beyst <ilion.beyst@gmail.com>2022-03-21 20:05:49 +0100
committerIlion Beyst <ilion.beyst@gmail.com>2022-03-21 20:05:49 +0100
commit6ab8db31c38eb9bf50485bea4cfc3b09add3daad (patch)
treebe7375f2ac8e58212f3b5c928a5fd01aa8ecce8c /web/pw-server/src/lib/components/navbar/UserControls.svelte
parent579f16fc51c6a8b5ff34b1afee8c2518b05e22d3 (diff)
downloadplanetwars.dev-6ab8db31c38eb9bf50485bea4cfc3b09add3daad.tar.xz
planetwars.dev-6ab8db31c38eb9bf50485bea4cfc3b09add3daad.zip
implement navbar user controls
Diffstat (limited to 'web/pw-server/src/lib/components/navbar/UserControls.svelte')
-rw-r--r--web/pw-server/src/lib/components/navbar/UserControls.svelte75
1 files changed, 75 insertions, 0 deletions
diff --git a/web/pw-server/src/lib/components/navbar/UserControls.svelte b/web/pw-server/src/lib/components/navbar/UserControls.svelte
new file mode 100644
index 0000000..e9dbab1
--- /dev/null
+++ b/web/pw-server/src/lib/components/navbar/UserControls.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+ import { get_session_token } from "$lib/auth";
+
+ import { onMount } from "svelte";
+
+ let user = null;
+
+ onMount(async () => {
+ const session_token = get_session_token();
+ if (!session_token) {
+ return;
+ }
+
+ let response = await fetch("/api/users/me", {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${session_token}`,
+ },
+ });
+
+ if (!response.ok) {
+ throw response.statusText;
+ }
+
+ user = await response.json();
+ });
+
+ function signOut() {
+ // TODO: destroy session on server
+ user = null;
+ }
+</script>
+
+<div class="user-controls">
+ {#if user}
+ <div class="current-user-name">
+ {user["username"]}
+ </div>
+ <div class="sign-out" on:click={signOut}>Sign out</div>
+ {:else}
+ <a class="account-href" href="login">Sign in</a>
+ <a class="account-href" href="register">Sign up</a>
+ {/if}
+</div>
+
+<style lang="scss">
+ @mixin navbar-item {
+ font-size: 18px;
+ font-family: Helvetica, sans-serif;
+ padding: 4px 8px;
+ }
+
+ .account-href {
+ @include navbar-item;
+ color: #eee;
+ text-decoration: none;
+ }
+
+ .current-user-name {
+ @include navbar-item;
+ color: #fff;
+ }
+
+ .sign-out {
+ @include navbar-item;
+ color: #ccc;
+ cursor: pointer;
+ }
+
+ .user-controls {
+ display: flex;
+ align-items: center;
+ }
+</style>