Merge pull request #228 from Zephyrrus/begone_trailing_commas

Merge own dev branch into main dev branch

1 files changed, 68 insertions, 53 deletions

diff --git a/src/site/pages/register.vue b/src/site/pages/register.vue
index 2f155c0..64376db 100644
--- a/src/site/pages/register.vue
+++ b/src/site/pages/register.vue
@@ -1,41 +1,62 @@
 <template>
-	<section class="hero is-fullheight is-register">
-		<div class="hero-body">
-			<div class="container">
-				<h1 class="title">
-					Dashboard Access
-				</h1>
-				<h2 class="subtitle mb5">
-					Register for a new account
-				</h2>
-				<div class="columns">
-					<div class="column is-4 is-offset-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>
+	<section class="section is-fullheight is-register">
+		<div class="container">
+			<h1 class="title">
+				Dashboard Access
+			</h1>
+			<h2 class="subtitle mb5">
+				Register for a new account
+			</h2>
+			<div class="columns">
+				<div class="column is-4 is-offset-4">
+					<b-field>
+						<b-input
+							v-model="username"
+							class="lolisafe-input"
+							type="text"
+							placeholder="Username" />
+					</b-field>
+					<b-field>
+						<b-input
+							v-model="password"
+							class="lolisafe-input"
+							type="password"
+							placeholder="Password"
+							password-reveal />
+					</b-field>
+					<b-field>
+						<b-input
+							v-model="rePassword"
+							class="lolisafe-input"
+							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>
-							<button class="button is-primary big ml1"
-								:disabled="isLoading"
-								@click="register">Register</button>
-						</p>
+					<div class="level">
+						<!-- Left side -->
+						<div class="level-left">
+							<div class="level-item">
+								<router-link
+									to="/login"
+									class="is-text">
+									Already have an account?
+								</router-link>
+							</div>
+						</div>
+						<!-- Right side -->
+						<div class="level-right">
+							<p class="level-item">
+								<b-button
+									size="is-medium"
+									type="is-lolisafe"
+									:disabled="isLoading"
+									@click="register">
+									Register
+								</b-button>
+							</p>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -44,6 +65,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
 	name: 'Register',
 	data() {
@@ -54,43 +77,35 @@ export default {
 			isLoading: false
 		};
 	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		}
-	},
+	computed: mapState(['config', 'auth']),
 	metaInfo() {
 		return { title: 'Register' };
 	},
 	methods: {
 		async register() {
 			if (this.isLoading) return;
+
 			if (!this.username || !this.password || !this.rePassword) {
-				this.$store.dispatch('alert', {
-					text: 'Please fill all fields before attempting to register.',
-					error: true
-				});
+				this.$notifier.error('Please fill all fields before attempting to register.');
 				return;
 			}
 			if (this.password !== this.rePassword) {
-				this.$store.dispatch('alert', {
-					text: 'Passwords don\'t match',
-					error: true
-				});
+				this.$notifier.error('Passwords don\'t match');
 				return;
 			}
 			this.isLoading = true;
 
 			try {
-				const response = await this.$axios.$post(`auth/register`, {
+				const response = await this.$store.dispatch('auth/register', {
 					username: this.username,
 					password: this.password
 				});
 
-				this.$store.dispatch('alert', { text: response.message });
-				return this.$router.push('/login');
+				this.$notifier.success(response.message);
+				this.$router.push('/login');
+				return;
 			} catch (error) {
-				//
+				this.$notifier.error(error.message);
 			} finally {
 				this.isLoading = false;
 			}