<style lang="scss" scoped>
	@import '../../styles/colors.scss';
</style>

<template>
	<section id="register"
		class="hero is-fullheight">
		<Navbar/>
		<div class="hero-body">
			<div class="container">
				<h1 class="title">
					Dashboard Access
				</h1>
				<h2 class="subtitle">
					Register for a new account
				</h2>
				<div class="columns">
					<div class="column is-4">
						<b-field>
							<b-input v-model="username"
								type="text"
								placeholder="Username"/>
						</b-field>
						<b-field>
							<b-input v-model="password"
								type="password"
								placeholder="Password"
								password-reveal/>
						</b-field>
						<b-field>
							<b-input v-model="rePassword"
								type="password"
								placeholder="Re-type Password"
								password-reveal
								@keyup.enter.native="register"/>
						</b-field>

						<p class="control has-addons is-pulled-right">
							<router-link to="/login"
								class="is-text">Already have an account?</router-link>
							<a :class="{ 'is-loading': isLoading }"
								class="button is-themed"
								@click="register">Register</a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</section>
</template>

<script>
import Navbar from '../../components/navbar/Navbar.vue';

export default {
	name: 'Register',
	components: { Navbar },
	data() {
		return {
			username: null,
			password: null,
			rePassword: null,
			isLoading: false
		};
	},
	metaInfo() {
		return { title: 'Register' };
	},
	mounted() {
		this.$ga.page({
			page: '/register',
			title: 'Register',
			location: window.location.href
		});
	},
	methods: {
		register() {
			if (this.isLoading) return;
			if (this.password !== this.rePassword) {
				this.$showToast('Passwords don\'t match', true);
				return;
			}
			this.isLoading = true;
			this.axios.post(`${this.$config.baseURL}/auth/register`, {
				username: this.username,
				password: this.password
			}).then(response => {
				this.$showToast(response.data.message);
				this.isLoading = false;
				return this.$router.push('/login');
			}).catch(err => {
				this.isLoading = false;
				this.$onPromiseError(err);
			});
		}
	}
};
</script>
