Added user sign up and login.

assets/components/auth/login.vue

@@ -0,0 +1,116 @@
+<template>
+	<form
+		class="login"
+		@submit.prevent="login"
+	>
+		<div
+			v-if="error"
+			class="feedback error"
+		>{{ error }}</div>
+
+		<div
+			v-if="success"
+			class="feedback success"
+		>Login successful, redirecting</div>
+
+		<template v-else>
+			<input
+				v-model="username"
+				placeholder="Username or e-mail"
+				type="text"
+				class="input"
+				required
+			>
+
+			<input
+				v-model="password"
+				placeholder="Password"
+				type="password"
+				class="input"
+				required
+			>
+
+			<button
+				type="submit"
+				class="button button-primary"
+			>Log in</button>
+
+			<router-link
+				to="/signup"
+				class="link link-external signup"
+			>Sign up</router-link>
+		</template>
+	</form>
+</template>
+
+<script>
+async function login() {
+	this.error = null;
+	this.success = false;
+
+	try {
+		await this.$store.dispatch('login', {
+			username: this.username,
+			password: this.password,
+		});
+
+		this.success = true;
+
+		setTimeout(() => {
+			this.$router.replace(this.$route.query.ref || { name: 'home' });
+		}, 1000);
+	} catch (error) {
+		this.error = error.message;
+	}
+}
+
+export default {
+	data() {
+		return {
+			username: null,
+			password: null,
+			success: false,
+			error: null,
+		};
+	},
+	methods: {
+		login,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.login {
+	width: 20rem;
+	display: flex;
+	flex-direction: column;
+	margin: auto;
+}
+
+.input {
+	margin: 0 0 .5rem 0;
+}
+
+.feedback {
+	padding: 1rem;
+	text-align: center;
+	font-weight: bold;
+}
+
+.error {
+	color: var(--error);
+}
+
+.success {
+	color: var(--shadow-strong);
+}
+
+.button {
+	margin: 0 0 .25rem 0;
+}
+
+.signup {
+	padding: .5rem;
+	text-align: center;
+}
+</style>

assets/components/auth/signup.vue

@@ -0,0 +1,126 @@
+<template>
+	<form
+		class="signup"
+		@submit.prevent="signup"
+	>
+		<div
+			v-if="error"
+			class="feedback error"
+		>{{ error }}</div>
+
+		<div
+			v-if="success"
+			class="feedback success"
+		>Signup successful, redirecting</div>
+
+		<template v-else>
+			<input
+				v-model="username"
+				placeholder="Username"
+				type="text"
+				class="input"
+				required
+			>
+
+			<input
+				v-model="email"
+				placeholder="E-mail"
+				type="email"
+				class="input"
+				required
+			>
+
+			<input
+				v-model="password"
+				placeholder="Password"
+				type="password"
+				class="input"
+				required
+			>
+
+			<button
+				type="submit"
+				class="button button-primary"
+			>Sign up</button>
+
+			<router-link
+				to="/login"
+				class="link link-external login"
+			>Log in</router-link>
+		</template>
+	</form>
+</template>
+
+<script>
+async function signup() {
+	this.error = null;
+	this.success = false;
+
+	try {
+		await this.$store.dispatch('signup', {
+			username: this.username,
+			email: this.email,
+			password: this.password,
+		});
+
+		this.success = true;
+
+		setTimeout(() => {
+			this.$router.replace(this.$route.query.ref || { name: 'home' });
+		}, 1000);
+	} catch (error) {
+		this.error = error.message;
+	}
+}
+
+export default {
+	data() {
+		return {
+			username: null,
+			email: null,
+			password: null,
+			success: false,
+			error: null,
+		};
+	},
+	methods: {
+		signup,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.signup {
+	width: 20rem;
+	display: flex;
+	flex-direction: column;
+	margin: auto;
+}
+
+.input {
+	margin: 0 0 .5rem 0;
+}
+
+.feedback {
+	padding: 1rem;
+	text-align: center;
+	font-weight: bold;
+}
+
+.error {
+	color: var(--error);
+}
+
+.success {
+	color: var(--shadow-strong);
+}
+
+.button {
+	margin: 0 0 .25rem 0;
+}
+
+.login {
+	padding: .5rem;
+	text-align: center;
+}
+</style>