Fixed bug with Login/Register Modals

frontend/App.vue

@@ -3,6 +3,8 @@
 		<router-view></router-view>
 		<toast></toast>
 		<what-is-new></what-is-new>
+		<login-modal v-if="isLoginActive"></login-modal>
+		<register-modal v-if="isRegisterActive"></register-modal>
 	</div>
 </template>
 
@@ -10,6 +12,8 @@
 	import { Toast } from 'vue-roaster';
 
 	import WhatIsNew from './components/Modals/WhatIsNew.vue';
+	import LoginModal from './components/Modals/Login.vue';
+	import RegisterModal from './components/Modals/Register.vue';
 
 	export default {
 		replace: false,
@@ -24,7 +28,9 @@
 					email: "",
 					password: ""
 				},
-				loggedIn: false
+				loggedIn: false,
+				isRegisterActive: false,
+				isLoginActive: false
 			}
 		},
 		methods: {
@@ -65,6 +71,16 @@
 						Toast.methods.addToast(result.message, 2000);
 					}
 				});
+			},
+			'toggleModal': function (type) {
+				switch(type) {
+					case 'register':
+						this.isRegisterActive = !this.isRegisterActive;
+						break;
+					case 'login':
+						this.isLoginActive = !this.isLoginActive;
+						break;
+				}
 			}
 			/*'joinStation': function (id) {
 				let mergedStations = this.stations.community.concat(this.stations.official);
@@ -78,6 +94,6 @@
 				});
 			}*/
 		},
-		components: { Toast, WhatIsNew }
+		components: { Toast, WhatIsNew, LoginModal, RegisterModal }
 	}
 </script>

frontend/components/MainHeader.vue

@@ -41,13 +41,7 @@
 	export default {
 		methods: {
 			toggleModal: function (type) {
-				for (let i = 0; i < this.$parent.$children.length; i++) {
-					if (this.$parent.$children[i]._uid == 4 && type == 'login') {
-						this.$parent.$children[i].isActive = !this.$parent.$children[i].isActive;
-					} else if (this.$parent.$children[i]._uid == 5 && type == 'register') {
-						this.$parent.$children[i].isActive = !this.$parent.$children[i].isActive;
-					}
-				}
+				this.$dispatch('toggleModal', type);
 			}
 		}
 	}

frontend/components/Modals/Login.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="modal" :class="{ 'is-active': isActive }">
+	<div class="modal is-active">
 		<div class="modal-background"></div>
 		<div class="modal-card">
 			<header class="modal-card-head">
@@ -10,15 +10,15 @@
 				<!-- validation to check if exists http://bulma.io/documentation/elements/form/ -->
 				<label class="label">Email</label>
 				<p class="control">
-					<input class="input" type="text" placeholder="Email..." v-model="$parent.$parent.login.email">
+					<input class="input" type="text" placeholder="Email..." v-model="$parent.login.email">
 				</p>
 				<label class="label">Password</label>
 				<p class="control">
-					<input class="input" type="password" placeholder="Password..." v-model="$parent.$parent.login.password">
+					<input class="input" type="password" placeholder="Password..." v-model="$parent.login.password">
 				</p>
 			</section>
 			<footer class="modal-card-foot">
-				<a class="button is-primary" @click="submitModal()">Submit</a>
+				<a class="button is-primary" @click="submitModal('login')">Submit</a>
 			</footer>
 		</div>
 	</div>
@@ -26,12 +26,9 @@
 
 <script>
 	export default {
-		data() {
-			return { isActive: false }
-		},
 		methods: {
 			toggleModal: function () {
-				this.isActive = !this.isActive;
+				this.$dispatch('toggleModal', 'login');
 			},
 			submitModal: function () {
 				this.$dispatch('login');

frontend/components/Modals/Register.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="modal" :class="{ 'is-active': isActive }">
+	<div class="modal is-active">
 		<div class="modal-background"></div>
 		<div class="modal-card">
 			<header class="modal-card-head">
@@ -10,20 +10,20 @@
 				<!-- validation to check if exists http://bulma.io/documentation/elements/form/ -->
 				<label class="label">Email</label>
 				<p class="control">
-					<input class="input" type="text" placeholder="Email..." v-model="$parent.$parent.register.email">
+					<input class="input" type="text" placeholder="Email..." v-model="$parent.register.email">
 				</p>
 				<label class="label">Username</label>
 				<p class="control">
-					<input class="input" type="text" placeholder="Username..." v-model="$parent.$parent.register.username">
+					<input class="input" type="text" placeholder="Username..." v-model="$parent.register.username">
 				</p>
 				<label class="label">Password</label>
 				<p class="control">
-					<input class="input" type="password" placeholder="Password..." v-model="$parent.$parent.register.password">
+					<input class="input" type="password" placeholder="Password..." v-model="$parent.register.password">
 				</p>
 				<div class="g-recaptcha" :data-sitekey="recaptcha.key"></div>
 			</section>
 			<footer class="modal-card-foot">
-				<a class="button is-primary" @click="submitModal()">Submit</a>
+				<a class="button is-primary" @click="submitModal('register')">Submit</a>
 			</footer>
 		</div>
 	</div>
@@ -33,7 +33,6 @@
 	export default {
 		data() {
 			return {
-				isActive: false,
 				recaptcha: {
 					key: ''
 				}
@@ -47,7 +46,7 @@
 		},
 		methods: {
 			toggleModal: function () {
-				this.isActive = !this.isActive;
+				this.$dispatch('toggleModal', 'register');
 			},
 			submitModal: function () {
 				this.$dispatch('register');

frontend/components/pages/Home.vue

@@ -1,8 +1,6 @@
 <template>
 	<div class="app">
 		<main-header></main-header>
-		<login-modal></login-modal>
-		<register-modal></register-modal>
 		<div class="group" v-if="stations.official.length">
 			<div class="group-title">Official Stations</div>
 			<div class="group-stations">
@@ -45,9 +43,6 @@
 	import MainHeader from '../MainHeader.vue';
 	import MainFooter from '../MainFooter.vue';
 
-	import LoginModal from '../Modals/Login.vue';
-	import RegisterModal from '../Modals/Register.vue';
-
 	export default {
 		data() {
 			return {
@@ -80,31 +75,7 @@
 				}
 			}, 100);
 		},
-		methods: {
-			toggleModal: function(type) {
-				switch(type) {
-					case 'register':
-						this.isRegisterActive = !this.isRegisterActive;
-						break;
-					case 'login':
-						this.isLoginActive = !this.isLoginActive;
-						break;
-				}
-			},
-			submitModal: function(type) {
-				switch(type) {
-					case 'register':
-						this.$dispatch('register');
-						this.toggleModal('register');
-						break;
-					case 'login':
-						this.$dispatch('login');
-						this.toggleModal('login');
-						break;
-				}
-			}
-		},
-		components: { MainHeader, MainFooter, LoginModal, RegisterModal }
+		components: { MainHeader, MainFooter }
 	}
 </script>