blob: 184a40acbdd5bfeabc6472c2b29080ded9530da5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<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>
|
