|
|
@@ -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>
|
Pitu