Merge pull request #1 from Zephyrrus/feature/store_refactor

Feature/store refactor

1 files changed, 53 insertions, 37 deletions

diff --git a/src/site/pages/login.vue b/src/site/pages/login.vue
index 514cbc5..569e9d9 100644
--- a/src/site/pages/login.vue
+++ b/src/site/pages/login.vue
@@ -10,27 +10,47 @@
 			<div class="columns">
 				<div class="column is-4 is-offset-4">
 					<b-field>
-						<b-input v-model="username"
+						<b-input
+							v-model="username"
 							type="text"
 							placeholder="Username"
 							@keyup.enter.native="login" />
 					</b-field>
 					<b-field>
-						<b-input v-model="password"
+						<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 v-if="config.userAccounts"
-							to="/register"
-							class="is-text">Don't have an account?</router-link>
-						<span v-else>Registration is closed at the moment</span>
-						<button class="button is-primary big ml1"
-							@click="login">login</button>
-					</p>
+					<p class="control has-addons is-pulled-right" />
+
+					<div class="level">
+						<div class="level-left">
+							<div class="level-item">
+								<router-link
+									v-if="config.userAccounts"
+									to="/register"
+									class="is-text">
+									Don't have an account?
+								</router-link>
+								<span v-else>Registration is closed at the moment</span>
+							</div>
+						</div>
+
+						<div class="level-right">
+							<p class="level-item">
+								<b-button
+									size="is-medium"
+									type="is-lolisafe"
+									@click="login">
+									Login
+								</b-button>
+							</p>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -63,6 +83,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
 	name: 'Login',
 	data() {
@@ -71,41 +93,36 @@ export default {
 			password: null,
 			mfaCode: null,
 			isMfaModalActive: false,
-			isLoading: false
+			isLoading: false,
 		};
 	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		}
-	},
+	computed: mapState(['config', 'auth']),
 	metaInfo() {
 		return { title: 'Login' };
 	},
+	created() {
+		if (this.auth.loggedIn) {
+			this.redirect();
+		}
+	},
 	methods: {
 		async login() {
 			if (this.isLoading) return;
-			if (!this.username || !this.password) {
-				this.$store.dispatch('alert', {
-					text: 'Please fill both fields before attempting to log in.',
-					error: true
-				});
+
+			const { username, password } = this;
+			if (!username || !password) {
+				this.$notifier.error('Please fill both fields before attempting to log in.');
 				return;
 			}
-			this.isLoading = true;
 
 			try {
-				const data = await this.$axios.$post(`auth/login`, {
-					username: this.username,
-					password: this.password
-				});
-				this.$axios.setToken(data.token, 'Bearer');
-				document.cookie = `token=${encodeURIComponent(data.token)}`;
-				this.$store.dispatch('login', { token: data.token, user: data.user });
-
-				this.redirect();
-			} catch (error) {
-				//
+				this.isLoading = true;
+				await this.$store.dispatch('auth/login', { username, password });
+				if (this.auth.loggedIn) {
+					this.redirect();
+				}
+			} catch (e) {
+				this.$notifier.error(e.message);
 			} finally {
 				this.isLoading = false;
 			}
@@ -124,15 +141,14 @@ export default {
 					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>