Added seperate Modals folder

backend/logic/actions/users.js

@@ -144,17 +144,25 @@ module.exports = {
 	},
 
 	findByUsername: (session, username, cb) => {
+		console.log(username)
 		db.models.user.find({ username }, (err, account) => {
-			if (err) throw err;
-			account = account[0];
-			cb({
-				status: 'success',
-				data: {
-					username: account.username,
-					createdAt: account.createdAt,
-					statistics: account.statistics
-				}
-			});
+			if (account == [] && err) {
+				console.error(err);
+				return cb({
+					status: 'error',
+					message: 'Username cannot be found'
+				});
+			} else {
+				account = account[0];
+				return cb({
+					status: 'success',
+					data: {
+						username: account.username,
+						createdAt: account.createdAt,
+						statistics: account.statistics
+					}
+				});
+			}
 		});
 	}
 

frontend/App.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-	import WhatIsNew from './components/WhatIsNew.vue';
+	import WhatIsNew from './components/Modals/WhatIsNew.vue';
 
 	export default {
 		replace: false,

frontend/components/MainHeader.vue

@@ -23,13 +23,13 @@
 				News
 			</a>
 			<a class="nav-item is-tab" href="#" v-if="$parent.$parent.loggedIn" @click="$parent.$parent.logout()">
-				Sign Out
+				Logout
 			</a>
 			<span class="grouped" v-else>
-				<a class="nav-item" href="#" @click="$parent.toggleModal('login')">
-					Sign In
+				<a class="nav-item" href="#" @click="toggleModal('login')">
+					Login
 				</a>
-				<a class="nav-item" href="#" @click="$parent.toggleModal('register')">
+				<a class="nav-item" href="#" @click="toggleModal('register')">
 					Register
 				</a>
 			</span>
@@ -37,6 +37,22 @@
 	</nav>
 </template>
 
+<script>
+	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;
+					}
+				}
+			}
+		}
+	}
+</script>
+
 <style lang="scss" scoped>
 	@import 'theme.scss';
 

frontend/components/Modals/Login.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="modal" :class="{ 'is-active': isActive }">
+		<div class="modal-background"></div>
+		<div class="modal-card">
+			<header class="modal-card-head">
+				<p class="modal-card-title">Login</p>
+				<button class="delete" @click="toggleModal()"></button>
+			</header>
+			<section class="modal-card-body">
+				<!-- 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">
+				</p>
+				<label class="label">Password</label>
+				<p class="control">
+					<input class="input" type="password" placeholder="Password..." v-model="$parent.$parent.login.password">
+				</p>
+			</section>
+			<footer class="modal-card-foot">
+				<a class="button is-primary" @click="submitModal()">Submit</a>
+			</footer>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return { isActive: false }
+		},
+		methods: {
+			toggleModal: function () {
+				this.isActive = !this.isActive;
+			},
+			submitModal: function () {
+				this.$dispatch('login');
+				this.toggleModal();
+			}
+		}
+	}
+</script>

frontend/components/Modals/Register.vue

@@ -0,0 +1,58 @@
+<template>
+	<div class="modal" :class="{ 'is-active': isActive }">
+		<div class="modal-background"></div>
+		<div class="modal-card">
+			<header class="modal-card-head">
+				<p class="modal-card-title">Register</p>
+				<button class="delete" @click="toggleModal()"></button>
+			</header>
+			<section class="modal-card-body">
+				<!-- 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">
+				</p>
+				<label class="label">Username</label>
+				<p class="control">
+					<input class="input" type="text" placeholder="Username..." v-model="$parent.$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">
+				</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>
+			</footer>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				isActive: false,
+				recaptcha: {
+					key: ''
+				}
+			}
+		},
+		ready: function () {
+			let _this = this;
+			lofig.get('recaptcha.key', function (key) {
+				_this.recaptcha.key = key;
+			});
+		},
+		methods: {
+			toggleModal: function () {
+				this.isActive = !this.isActive;
+			},
+			submitModal: function () {
+				this.$dispatch('register');
+				this.toggleModal();
+			}
+		}
+	}
+</script>

frontend/components/User/Show.vue

@@ -1,5 +1,6 @@
 <template>
 	<toast></toast>
+	<main-header></main-header>
 	<div class="container">
 		<img class="avatar" src="https://avatars2.githubusercontent.com/u/11198912?v=3&s=460"/>
 		<h2 class="has-text-centered">@{{user.username}}</h2>
@@ -26,11 +27,15 @@
 			</div>
 		</nav>
 	</div>
+	<main-footer></main-footer>
 </template>
 
 <script>
 	import { Toast } from 'vue-roaster';
 
+	import MainHeader from '../MainHeader.vue';
+	import MainFooter from '../MainFooter.vue';
+
 	export default {
 		data() {
 			return {
@@ -47,21 +52,30 @@
 			}
 		},
 		ready: function() {
-			let local = this;
-			local.socket = local.$parent.socket;
-			local.socket.emit('users.findByUsername', local.$route.params.username, results => {
-				local.user = results.data;
-				console.log(local.user)
-				local.liked = results.data.statistics.songsLiked.length;
-				local.disliked = local.user.statistics.songsDisliked.length;
-				local.requested = local.user.statistics.songsRequested;
-			});
+			let _this = this;
+			let socketInterval = setInterval(() => {
+				if (!!_this.$parent.socket) {
+					_this.socket = _this.$parent.socket;
+					_this.socket.emit('users.findByUsername', _this.$route.params.username, results => {
+						_this.user = results.data;
+						console.log(_this.user);
+						_this.liked = results.data.statistics.songsLiked.length;
+						_this.disliked = local.user.statistics.songsDisliked.length;
+						_this.requested = local.user.statistics.songsRequested;
+					});
+					clearInterval(socketInterval);
+				}
+			}, 100);
 		},
-		components: { Toast }
+		components: { Toast, MainHeader, MainFooter },
 	}
 </script>
 
 <style lang="scss" scoped>
+	.container {
+		padding: 25px;
+	}
+
 	.avatar {
 		border-radius: 50%;
 		width: 250px;

frontend/components/pages/Home.vue

@@ -1,58 +1,9 @@
 <template>
 	<div class="app">
 		<main-header></main-header>
-		<div class="modal" :class="{ 'is-active': isRegisterActive }">
-			<div class="modal-background"></div>
-			<div class="modal-card">
-				<header class="modal-card-head">
-					<p class="modal-card-title">Register</p>
-					<button class="delete" @click="toggleModal('register')"></button>
-				</header>
-				<section class="modal-card-body">
-					<!-- 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.register.email">
-					</p>
-					<label class="label">Username</label>
-					<p class="control">
-						<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.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('register')">Submit</a>
-				</footer>
-			</div>
-		</div>
-		<div class="modal" :class="{ 'is-active': isLoginActive }">
-			<div class="modal-background"></div>
-			<div class="modal-card">
-				<header class="modal-card-head">
-					<p class="modal-card-title">Login</p>
-					<button class="delete" @click="toggleModal('login')"></button>
-				</header>
-				<section class="modal-card-body">
-					<!-- 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.login.email">
-					</p>
-					<label class="label">Password</label>
-					<p class="control">
-						<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('login')">Submit</a>
-				</footer>
-			</div>
-		</div>
-		<div class="group">
+		<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">
 				<div class="stations-station" v-for="station in stations.official" v-link="{ path: '/' + station.name }" @click="this.$dispatch('joinStation', station.id)">
@@ -91,8 +42,11 @@
 </template>
 
 <script>
-	import MainHeader from '../MainHeader.vue'
-	import MainFooter from '../MainFooter.vue'
+	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() {
@@ -110,9 +64,6 @@
 		},
 		ready() {
 			let _this = this;
-			lofig.get('recaptcha.key', function(key) {
-				_this.recaptcha.key = key;
-			});
 
 			let socketInterval = setInterval(() => {
 				if (!!_this.$parent.socket) {
@@ -153,7 +104,7 @@
 				}
 			}
 		},
-		components: { MainHeader, MainFooter }
+		components: { MainHeader, MainFooter, LoginModal, RegisterModal }
 	}
 </script>