Styling login and register

src/site/styles/style.scss

@@ -139,3 +139,39 @@ section p.control button {
 .switch input[type=checkbox] + .check:before {
 	background: #fbfbfb;
 }
+
+/*
+	Register and Login forms
+*/
+
+section#login,
+section#register { background-color: $backgroundLight1 !important; }
+section#login input,
+section#register input,
+section#login a.button,
+section#register a.button {
+	font-size: 14px !important;
+}
+section#login input,
+section#register input,
+section#login p.control a.button,
+section#register p.control a.button {
+	border-left: 0px !important;
+	border-top: 0px !important;
+	border-right: 0px !important;
+	border-radius: 0px !important;
+	box-shadow: 0 0 0 !important;
+}
+
+section#login p.control a.button,
+section#register p.control a.button { margin-left: 10px !important; }
+section#login p.control a#loginBtn,
+section#register p.control a#loginBtn { border-right: 0px !important; }
+section#login p.control a#registerBtn,
+section#register p.control a#registerBtn { border-left: 0px !important; }
+
+section#login a.is-text,
+section#register a.is-text {
+	font-size: 1.25em;
+	line-height: 2.5em;
+}

src/site/views/Auth/Login.vue

@@ -1,25 +1,6 @@
 <style lang="scss" scoped>
 	@import '../../styles/colors.scss';
 </style>
-<style lang="scss">
-	@import '../../styles/colors.scss';
-
-	section#login { background-color: $backgroundLight1 !important; }
-	section#login input, section#login a.button {
-		font-size: 14px !important;
-	}
-	section#login input, section#login p.control a.button {
-		border-left: 0px !important;
-		border-top: 0px !important;
-		border-right: 0px !important;
-		border-radius: 0px !important;
-		box-shadow: 0 0 0 !important;
-	}
-
-	section#login p.control a.button { margin-left: 10px !important; }
-	section#login p.control a#loginBtn { border-right: 0px !important; }
-	section#login p.control a#registerBtn { border-left: 0px !important; }
-</style>
 
 <template>
 	<section id="login"
@@ -34,11 +15,11 @@
 					Login or register
 				</h2>
 				<div class="columns">
-					<div class="column">
+					<div class="column is-4">
 						<b-field>
 							<b-input v-model="username"
 								type="text"
-								placeholder="Username / Email"
+								placeholder="Username"
 								@keyup.enter.native="login"/>
 						</b-field>
 						<b-field>
@@ -50,17 +31,13 @@
 						</b-field>
 
 						<p class="control has-addons is-pulled-right">
-							<router-link id="registerBtn"
-								to="/register"
-								class="button">Register</router-link>
+							<router-link to="/register"
+								class="is-text">Don't have an account?</router-link>
 							<a id="loginBtn"
 								class="button"
 								@click="login">Log in</a>
 						</p>
-
 					</div>
-					<div class="column is-hidden-mobile"/>
-					<div class="column is-hidden-mobile"/>
 				</div>
 			</div>
 		</div>

src/site/views/Auth/Register.vue

@@ -0,0 +1,98 @@
+<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>