Site

1 files changed, 178 insertions, 0 deletions

diff --git a/src/site/views/Auth/Login.vue b/src/site/views/Auth/Login.vue
new file mode 100644
index 0000000..f5d386d
--- /dev/null
+++ b/src/site/views/Auth/Login.vue
@@ -0,0 +1,178 @@
+<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"
+		class="hero is-fullheight">
+		<Navbar/>
+		<div class="hero-body">
+			<div class="container">
+				<h1 class="title">
+					Dashboard Access
+				</h1>
+				<h2 class="subtitle">
+					Login or register
+				</h2>
+				<div class="columns">
+					<div class="column">
+						<b-field>
+							<b-input v-model="username"
+								type="text"
+								placeholder="Username / Email"
+								@keyup.enter.native="login"/>
+						</b-field>
+						<b-field>
+							<b-input v-model="password"
+								type="password"
+								placeholder="Password"
+								password-reveal
+								@keyup.enter.native="login"/>
+						</b-field>
+
+						<p class="control has-addons is-pulled-right">
+							<router-link id="registerBtn"
+								to="/register"
+								class="button">Register</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>
+
+		<!--
+		<b-modal :active.sync="isMfaModalActive"
+			:canCancel="true"
+			has-modal-card>
+			<div class="card mfa">
+				<div class="card-content">
+					<div class="content">
+						<p>Enter your Two-Factor code to proceed.</p>
+						<b-field>
+							<b-input v-model="mfaCode"
+								placeholder="Your MFA Code"
+								type="text"
+								@keyup.enter.native="mfa"/>
+							<p class="control">
+								<button :class="{ 'is-loading': isLoading }"
+									class="button is-primary"
+									@click="mfa">Submit</button>
+							</p>
+						</b-field>
+					</div>
+				</div>
+			</div>
+		</b-modal>
+		-->
+	</section>
+</template>
+
+<script>
+import Navbar from '../../components/navbar/Navbar.vue';
+
+export default {
+	name: 'Login',
+	components: { Navbar },
+	data() {
+		return {
+			username: null,
+			password: null,
+			mfaCode: null,
+			isMfaModalActive: false,
+			isLoading: false
+		};
+	},
+	computed: {
+		config() {
+			return this.$store.state.config;
+		}
+	},
+	metaInfo() {
+		return { title: 'Login' };
+	},
+	mounted() {
+		this.$ga.page({
+			page: '/login',
+			title: 'Login',
+			location: window.location.href
+		});
+	},
+	methods: {
+		login() {
+			if (this.isLoading) return;
+			if (!this.username || !this.password) {
+				this.$showToast('Please fill both fields before attempting to log in.', true);
+				return;
+			}
+			this.isLoading = true;
+			this.axios.post(`${this.$config.baseURL}/auth/login`, {
+				username: this.username,
+				password: this.password
+			}).then(res => {
+				this.$store.commit('token', res.data.token);
+				this.$store.commit('user', res.data.user);
+				/*
+				if (res.data.mfa) {
+					this.isMfaModalActive = true;
+					this.isLoading = false;
+				} else {
+					this.getUserData();
+				}
+				*/
+				this.redirect();
+			}).catch(err => {
+				this.isLoading = false;
+				this.$onPromiseError(err);
+			});
+		},
+		/*
+		mfa() {
+			if (!this.mfaCode) return;
+			if (this.isLoading) return;
+			this.isLoading = true;
+			this.axios.post(`${this.$BASE_URL}/login/mfa`, { token: this.mfaCode })
+				.then(res => {
+					this.$store.commit('token', res.data.token);
+					this.redirect();
+				})
+				.catch(err => {
+					this.isLoading = false;
+					this.$onPromiseError(err);
+				});
+		},*/
+		redirect() {
+			this.$store.commit('loggedIn', true);
+			if (typeof this.$route.query.redirect !== 'undefined') {
+				this.$router.push(this.$route.query.redirect);
+				return;
+			}
+			this.$router.push('/dashboard');
+		}
+	}
+};
+</script>