frontend/src/components/user/Register.vue

<template>
	<div>
		<h2 class="title">Register</h2>
		<div class="box">
			<form id="registerform" @submit.prevent="submit">
				<div class="field">
					<div class="control">
						<input v-focus type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
					</div>
				</div>
				<div class="field">
					<div class="control">
						<input type="text" class="input" name="email" placeholder="E-mail address" v-model="credentials.email" required>
					</div>
				</div>
				<div class="field">
					<div class="control">
						<input type="password" class="input" name="password1" placeholder="Password" v-model="credentials.password" required>
					</div>
				</div>
				<div class="field">
					<div class="control">
						<input type="password" class="input" name="password2" placeholder="Retype password" v-model="credentials.password2" required>
					</div>
				</div>

				<div class="field is-grouped">
					<div class="control">
						<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': loading}">Register</button>
						<router-link :to="{ name: 'login' }" class="button">Login</router-link>
					</div>
				</div>
				<div class="notification is-info" v-if="loading">
					Loading...
				</div>
				<div class="notification is-danger" v-if="error">
					{{ error }}
				</div>
			</form>
		</div>
	</div>
</template>

<script>
	import auth from '../../auth'
	import router from '../../router'

	export default {
		data() {
			return {
				credentials: {
					username: '',
					email: '',
					password: '',
					password2: '',
				},
				error: '',
				loading: false
			}
		},
		beforeMount() {
			// Check if the user is already logged in, if so, redirect him to the homepage
			if (auth.user.authenticated) {
				router.push({name: 'home'})
			}
		},
		methods: {
			submit() {
				this.loading = true

				this.error = ''

				if (this.credentials.password2 !== this.credentials.password) {
					this.loading = false
					this.error = 'Passwords don\'t match'
					return
				}

				let credentials = {
					username: this.credentials.username,
					email: this.credentials.email,
					password: this.credentials.password
				}

				auth.register(this, credentials, 'home')
			}
		}
	}
</script>

<style scoped>
	.button {
		margin: 0 0.4em 0 0;
	}
</style>