integrate UserControls into main navbar
This commit is contained in:
parent
698ae8d15e
commit
d3845eb85f
3 changed files with 90 additions and 126 deletions
|
@ -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>
|
|
|
@ -1,17 +1,52 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { afterNavigate, beforeNavigate } from "$app/navigation";
|
import { afterNavigate } from "$app/navigation";
|
||||||
import UserControls from "$lib/components/navbar/UserControls.svelte";
|
|
||||||
|
|
||||||
import "./style.css";
|
import "./style.css";
|
||||||
|
|
||||||
let isExpanded = false;
|
import { get_session_token, clear_session_token } from "$lib/auth";
|
||||||
|
import { currentUser } from "$lib/stores/current_user";
|
||||||
|
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
|
// TODO: ideally we'd not store this in the user session,
|
||||||
|
// and we'd be able to handle this in the load() function
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
|
||||||
|
let navbarExpanded = false;
|
||||||
|
|
||||||
function toggleExpanded() {
|
function toggleExpanded() {
|
||||||
isExpanded = !isExpanded;
|
navbarExpanded = !navbarExpanded;
|
||||||
}
|
}
|
||||||
|
|
||||||
afterNavigate(() => {
|
afterNavigate(() => {
|
||||||
isExpanded = false;
|
navbarExpanded = false;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -20,12 +55,13 @@
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="outer-container">
|
<div class="outer-container">
|
||||||
<div class="navbar" class:expanded={isExpanded}>
|
<div class="navbar" class:expanded={navbarExpanded}>
|
||||||
<div class="navbar-left">
|
<a href="/" class="navbar-header">
|
||||||
<a href="/" class="navbar-header">
|
<img alt="logo" src="/ship.svg" height="32px'" />
|
||||||
<img alt="logo" src="/ship.svg" height="32px'" />
|
PlanetWars
|
||||||
PlanetWars
|
</a>
|
||||||
</a>
|
<div class="navbar-expand" on:click={toggleExpanded}>expand</div>
|
||||||
|
<div class="navbar-items">
|
||||||
<div class="navbar-item">
|
<div class="navbar-item">
|
||||||
<a href="/editor">Editor</a>
|
<a href="/editor">Editor</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -36,13 +72,25 @@
|
||||||
<a href="/docs/rules">How to play</a>
|
<a href="/docs/rules">How to play</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="navbar-divider" />
|
<div class="navbar-divider" />
|
||||||
<div class="navbar-item">
|
{#if $currentUser}
|
||||||
<UserControls />
|
<div class="navbar-item">
|
||||||
</div>
|
<a class="current-user-name" href="/users/{$currentUser['username']}">
|
||||||
|
{$currentUser["username"]}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
|
<div class="sign-out" on:click={signOut}>Sign out</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="navbar-item">
|
||||||
|
<a class="account-href" href="/login">Sign in</a>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<a class="account-href" href="/register">Sign up</a>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="navbar-right">
|
|
||||||
</div> -->
|
|
||||||
<div class="navbar-expand" on:click={toggleExpanded}>expand</div>
|
|
||||||
</div>
|
</div>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
@ -70,7 +118,7 @@
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-left {
|
.navbar-items {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -104,7 +152,7 @@
|
||||||
}
|
}
|
||||||
.navbar-item {
|
.navbar-item {
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
padding: 0 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
.navbar-item a {
|
.navbar-item a {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -113,6 +161,24 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar-item a:hover {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-user-name {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sign-out {
|
||||||
|
color: #ccc;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sign-out:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-expand {
|
.navbar-expand {
|
||||||
color: white;
|
color: white;
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -120,7 +186,7 @@
|
||||||
height: $navbarHeight;
|
height: $navbarHeight;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
.navbar-item {
|
.navbar-items {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -130,24 +196,14 @@
|
||||||
|
|
||||||
.navbar.expanded {
|
.navbar.expanded {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar.expanded .navbar-left {
|
.navbar.expanded .navbar-items {
|
||||||
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
width: 100%;
|
||||||
|
|
||||||
.navbar.expanded .navbar-item {
|
|
||||||
display: block;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-right {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar.expanded .navbar-right {
|
|
||||||
display: flex;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-expand {
|
.navbar-expand {
|
||||||
|
|
|
@ -23,10 +23,6 @@
|
||||||
export let owner;
|
export let owner;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
<title>{bot["name"]}</title>
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="header-title-line">
|
<div class="header-title-line">
|
||||||
<h1 class="bot-name">{bot["name"]}</h1>
|
<h1 class="bot-name">{bot["name"]}</h1>
|
||||||
|
|
Loading…
Reference in a new issue