diff options
author | Ilion Beyst <ilion.beyst@gmail.com> | 2022-11-04 07:17:59 +0100 |
---|---|---|
committer | Ilion Beyst <ilion.beyst@gmail.com> | 2022-11-04 07:31:29 +0100 |
commit | d3845eb85fc8f75562a6e121c5e437763ffeea63 (patch) | |
tree | 2687a24ae62e62ad7d4fad12830fd403eb8472a0 /web/pw-server/src/lib/components/navbar/UserControls.svelte | |
parent | 698ae8d15e4b231ecaa0d168c2c4d5d941b06fdd (diff) | |
download | planetwars.dev-d3845eb85fc8f75562a6e121c5e437763ffeea63.tar.xz planetwars.dev-d3845eb85fc8f75562a6e121c5e437763ffeea63.zip |
integrate UserControls into main navbar
Diffstat (limited to 'web/pw-server/src/lib/components/navbar/UserControls.svelte')
-rw-r--r-- | web/pw-server/src/lib/components/navbar/UserControls.svelte | 88 |
1 files changed, 0 insertions, 88 deletions
diff --git a/web/pw-server/src/lib/components/navbar/UserControls.svelte b/web/pw-server/src/lib/components/navbar/UserControls.svelte deleted file mode 100644 index 184a40a..0000000 --- a/web/pw-server/src/lib/components/navbar/UserControls.svelte +++ /dev/null @@ -1,88 +0,0 @@ -<script lang="ts"> - import { get_session_token, clear_session_token } from "$lib/auth"; - import { currentUser } from "$lib/stores/current_user"; - - import { onMount } from "svelte"; - - onMount(async () => { - // TODO: currentUser won't be set if the navbar component is not created. - 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; - } - - const user = await response.json(); - currentUser.set(user); - }); - - function signOut() { - // TODO: destroy session on server - currentUser.set(null); - clear_session_token(); - } -</script> - -<div class="user-controls"> - {#if $currentUser} - <a class="current-user-name" href="/users/{$currentUser['username']}"> - {$currentUser["username"]} - </a> - <!-- svelte-ignore a11y-click-events-have-key-events --> - <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; - font-weight: 400; - } - - .account-href { - @include navbar-item; - color: #eee; - text-decoration: none; - } - - .current-user-name { - @include navbar-item; - text-decoration: none; - color: #fff; - } - - .sign-out { - @include navbar-item; - color: #ccc; - cursor: pointer; - } - - .user-controls { - display: flex; - align-items: center; - } - - // TODO: pretty hacky - @media screen and (max-width: 600px) { - .user-controls { - flex-direction: column; - align-items: flex-start; - } - } -</style> |