Added user sign up and login.

assets/components/header/header.vue

@@ -95,11 +95,26 @@
 				<template v-slot:tooltip>
 					<div class="menu">
 						<ul class="menu-items noselect">
-							<li
-								class="menu-item disabled"
+							<router-link
+								v-if="!me"
+								to="/login"
+								class="menu-item"
 								@click.stop
 							>
-								<Icon icon="enter2" />Sign in
+								<Icon icon="enter2" />Log in
+							</router-link>
+
+							<li
+								v-if="me"
+								class="menu-username"
+							>{{ me.username }}</li>
+
+							<li
+								v-if="me"
+								class="menu-item"
+								@click.stop="$store.dispatch('logout')"
+							>
+								<Icon icon="enter2" />Log out
 							</li>
 
 							<li
@@ -200,6 +215,10 @@ function theme(state) {
 	return state.ui.theme;
 }
 
+function me(state) {
+	return state.auth.user;
+}
+
 function setTheme(newTheme) {
 	this.$store.dispatch('setTheme', newTheme);
 }
@@ -224,6 +243,7 @@ export default {
 		...mapState({
 			sfw,
 			theme,
+			me,
 		}),
 	},
 	methods: {
@@ -403,6 +423,8 @@ export default {
 .menu-item {
 	display: flex;
 	padding: .75rem 1rem .75rem .75rem;
+	color: inherit;
+	text-decoration: none;
 
 	.icon {
 		fill: var(--darken);
@@ -428,6 +450,15 @@ export default {
 	}
 }
 
+.menu-username {
+	font-weight: bold;
+	color: var(--shadow-strong);
+	font-size: .9rem;
+	padding: .75rem 1rem;
+	border-bottom: solid 1px var(--shadow-hint);
+	text-align: center;
+}
+
 .search-compact {
     display: none;
     height: 100%;