traxxx/assets/components/auth/login.vue

<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
				v-if="$store.state.auth.signup"
				:to="{ name: 'signup', query: { ref: $route.query.ref } }"
				class="link link-external signup"
			>Sign up</router-link>
		</template>
	</form>
</template>

<script>
async function login() {
	this.error = null;
	this.success = false;

	try {
		const user = await this.$store.dispatch('login', {
			username: this.username,
			password: this.password,
		});

		this.success = true;

		setTimeout(() => {
			this.$router.replace(this.$route.query.ref || { name: 'user', params: { username: user.username } });
		}, 1000);
	} catch (error) {
		this.error = error.message;
	}
}

function mounted() {
	if (!this.$store.state.auth.login) {
		this.$router.replace({ name: 'not-found' });
	}
}

export default {
	data() {
		return {
			username: null,
			password: null,
			success: false,
			error: null,
		};
	},
	mounted,
	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>