Basically finished Settings.vue, still to add validation. Added 404 Component.

backend/logic/actions/users.js

@@ -161,7 +161,7 @@ module.exports = {
 
 	},
 
-	findByUsername: (session, username, cb) => {
+	findByUsername: (sessionId, username, cb) => {
 		db.models.user.find({ username }, (err, account) => {
 			if (err) throw err;
 			else if (account.length == 0) {
@@ -175,6 +175,7 @@ module.exports = {
 					status: 'success',
 					data: {
 						username: account.username,
+						admin: account.admin,
 						email: account.email.address,
 						password: '',
 						createdAt: account.createdAt,
@@ -185,14 +186,27 @@ module.exports = {
 		});
 	},
 
-	findBySession: (session, cb) => {
-		return cb({
-			status: 'success',
-			data: session
+	findBySession: (sessionId, cb) => {
+		cache.hget('sessions', sessionId, (err, session) => {
+			if (err || !session) return cb({ 'status': 'error', message: err });
+			if (!session.userSessionId) return cb({ 'status': 'error', message: 'You are not logged in' });
+			cache.hget('userSessions', session.userSessionId, (err, userSession) => {
+				if (err || !userSession) return cb({ 'status': 'error', message: err });
+				if (!userSession) return cb({ 'status': 'error', message: 'You are not logged in' });
+				db.models.user.findOne({ _id: userSession.userId }, (err, user) => {
+					if (err) { throw err; } else if (user) {
+						return cb({
+							status: 'success',
+							data: user
+						});
+					}
+				});
+			});
 		});
+
 	},
 
-	update: (session, user_id, property, value, cb) => {
+	update: (sessionId, user_id, property, value, cb) => {
         db.models.user.findOne({ _id: user_id }, (err, user) => {
             if (err) throw err;
             else if (!user) cb({ status: 'error', message: 'Invalid User ID' });
@@ -211,6 +225,7 @@ module.exports = {
                 } else user[property] = value;
                 user.save(err => {
                     if (err) cb({ status: 'error', message: err.message });
+					else  cb({ status: 'success', message: 'Field saved successfully' });
                 });
             } else {
                 cb({ status: 'error', message: 'Field has not changed' });

frontend/components/404.vue

@@ -0,0 +1,17 @@
+<template>
+	<h3><strong>404</strong>&nbsp;Not Found</h3>
+</template>
+
+<style type="scss" scoped>
+	* {
+		margin: 0;
+		padding: 0;
+	}
+
+	h3 {
+		height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

frontend/components/MainHeader.vue

@@ -13,7 +13,7 @@
 		</span>-->
 
 		<div class="nav-right">
-			<a class="nav-item is-tab admin" href="#" v-link="{ path: '/admin' }">
+			<a class="nav-item is-tab admin" href="#" v-link="{ path: '/admin' }" v-if="isAdmin">
 				Admin
 			</a>
 			<a class="nav-item is-tab" href="#">
@@ -22,9 +22,14 @@
 			<a class="nav-item is-tab" href="#" v-link="{ path: '/news' }">
 				News
 			</a>
-			<a class="nav-item is-tab" href="#" v-if="$parent.$parent.loggedIn" @click="$parent.$parent.logout()">
-				Logout
-			</a>
+			<span class="grouped" v-if="$parent.$parent.loggedIn">
+				<a class="nav-item is-tab" href="#" v-link="{ path: '/settings' }">
+					Settings
+				</a>
+				<a class="nav-item is-tab" href="#" @click="$parent.$parent.logout()">
+					Logout
+				</a>
+			</span>
 			<span class="grouped" v-else>
 				<a class="nav-item" href="#" @click="toggleModal('login')">
 					Login
@@ -39,6 +44,23 @@
 
 <script>
 	export default {
+		data() {
+			return {
+				isAdmin: false
+			}
+		},
+		ready: function() {
+			let _this = this;
+			let socketInterval = setInterval(() => {
+				if (!!_this.$parent.socket) {
+					_this.socket = _this.$parent.socket;
+					_this.socket.emit('users.findBySession', res => {
+						if (res.status == 'success') _this.isAdmin = res.data.admin;
+					});
+					clearInterval(socketInterval);
+				}
+			}, 100);
+		},
 		methods: {
 			toggleModal: function (type) {
 				this.$dispatch('toggleModal', type);

frontend/components/User/Settings.vue

@@ -1,41 +1,53 @@
 <template>
-	<main-header></main-header>
-	<div class="container">
-		<!--Implement Validation-->
-		<label class="label">Username</label>
-		<p class="control has-icon has-icon-right">
-			<input class="input is-success" type="text" placeholder="Change username" :value="user.username" v-model="user.username">
-			<!--Remove validation if it's their own without changing-->
-			<i class="fa fa-check"></i>
-			<span class="help is-success">This username is available</span>
-		</p>
-		<label class="label">Email</label>
-		<p class="control has-icon has-icon-right">
-			<input class="input is-danger" type="text" placeholder="Change email address" :value="user.email" v-model="user.email">
-			<!--Remove validation if it's their own without changing-->
-			<i class="fa fa-warning"></i>
-			<span class="help is-danger">This email is invalid</span>
-		</p>
-		<label class="label">Change Password</label>
-		<div class="control is-grouped">
-			<p class="control is-expanded has-icon has-icon-right">
-				<input class="input is-danger" type="text" placeholder="Enter current password" v-model="currentPassword">
-				<!-- Check if correct -->
-				<i class="fa fa-warning"></i>
-				<span class="help is-danger">This password is invalid</span>
-			</p>
-			<p class="control is-expanded has-icon has-icon-right">
-				<input class="input is-danger" type="text" placeholder="Enter new password" v-model="user.password">
-				<!--Check if longer than x chars, has x, x and x. Kris likes x too ;)-->
-				<i class="fa fa-warning"></i>
-				<span class="help is-danger">This password is invalid</span>
-			</p>
+	<div v-if="isLoggedIn">
+		<main-header></main-header>
+		<div class="container">
+			<!--Implement Validation-->
+			<label class="label">Username</label>
+			<div class="control is-grouped">
+				<p class="control is-expanded has-icon has-icon-right">
+					<input class="input is-success" type="text" placeholder="Change username" v-model="user.username">
+					<!--Remove validation if it's their own without changing-->
+					<i class="fa fa-check"></i>
+					<span class="help is-success">This username is available</span>
+				</p>
+				<p class="control">
+					<button class="button is-success" @click="changeUsername()">Save Changes</button>
+				</p>
+			</div>
+			<label class="label">Email</label>
+			<div class="control is-grouped">
+				<p class="control is-expanded has-icon has-icon-right">
+					<input class="input is-danger" type="text" placeholder="Change email address" v-model="user.email.address">
+					<!--Remove validation if it's their own without changing-->
+					<i class="fa fa-warning"></i>
+					<span class="help is-danger">This email is invalid</span>
+				</p>
+				<p class="control is-expanded">
+					<button class="button is-success" @click="changeEmail()">Save Changes</button>
+				</p>
+			</div>
+			<label class="label">Change Password</label>
+			<div class="control is-grouped">
+				<p class="control is-expanded has-icon has-icon-right">
+					<input class="input is-danger" type="text" placeholder="Enter current password" v-model="currentPassword">
+					<!-- Check if correct -->
+					<i class="fa fa-warning"></i>
+					<span class="help is-danger">This password is invalid</span>
+				</p>
+				<p class="control is-expanded has-icon has-icon-right">
+					<input class="input is-danger" type="text" placeholder="Enter new password" v-model="newPassword">
+					<!--Check if longer than x chars, has x, x and x. Kris likes x too ;)-->
+					<i class="fa fa-warning"></i>
+					<span class="help is-danger">This password is invalid</span>
+				</p>
+				<p class="control is-expanded">
+					<button class="button is-success" @click="changePassword()">Save Changes</button>
+				</p>
+			</div>
 		</div>
-		<p class="control">
-			<button class="button is-success">Save Changes</button>
-		</p>
+		<main-footer></main-footer>
 	</div>
-	<main-footer></main-footer>
 </template>
 
 <script>
@@ -44,11 +56,15 @@
 	import MainHeader from '../MainHeader.vue';
 	import MainFooter from '../MainFooter.vue';
 
+	import LoginModal from '../Modals/Login.vue'
+
 	export default {
 		data() {
 			return {
 				currentPassword: '',
-				user: {}
+				newPassword: '',
+				user: {},
+				isLoggedIn: false,
 			}
 		},
 		ready: function() {
@@ -56,14 +72,11 @@
 			let socketInterval = setInterval(() => {
 				if (!!_this.$parent.socket) {
 					_this.socket = _this.$parent.socket;
-					// need to refactor to send whoever is currently logged in
-					_this.socket.emit('users.findByUsername', 'atjonathan', res => {
-						if (res.status == 'error') console.error(res.message); // Add 404/ Not found Component with link back to home, for now just console.log
-						else _this.user = res.data;
-					});
 					_this.socket.emit('users.findBySession', res => {
-						console.log(res, location.href)
-						/* if (res.data == null) */ console.log(location.href);
+						if (res.status == 'success') { _this.user = res.data; _this.isLoggedIn = true; } else {
+							_this.$parent.isLoginActive = true;
+							Toast.methods.addToast('Your are currently not signed in', 3000);
+						}
 					});
 					clearInterval(socketInterval);
 				}
@@ -71,25 +84,20 @@
 		},
 		methods: {
 			changePassword: function () {
-				if (this.currentPassword !== "" && this.user.password !== "") {
-					// need to refactor to send whoever is currently logged in
-					socket.emit('users.update', '582a0724023ecc015c0bef42', 'services.password.password', this.user.password, res => {
-						if (res.status == 'error') Toast.methods.addToast(res.message, 2000);
-						else Toast.methods.addToast('Successfully changed password', 2000);
-					});
-				} else {
-					Toast.methods.addToast('Current password field is incorrect', 2000);
-				}
+				if (this.currentPassword == "" || this.newPassword == "") return Toast.methods.addToast('Current password field is incorrect', 2000);
+
+				this.socket.emit('users.update', this.user._id, 'services.password.password', this.user.password, res => {
+					if (res.status == 'error') Toast.methods.addToast(res.message, 2000);
+					else Toast.methods.addToast('Successfully changed password', 2000);
+				});
 			},
 			changeEmail: function () {
-				if (this.user.email !== "") {
-					socket.emit('users.update', '582a0724023ecc015c0bef42', 'email.address', this.user.email, res => {
-						if (res.status == 'error') Toast.methods.addToast(res.message, 2000);
-						else Toast.methods.addToast('Successfully changed email address', 2000);
-					});
-				} else {
-					Toast.methods.addToast('Field cannot be empty', 2000);
-				}
+				if (this.user.email == "") return Toast.methods.addToast('Field cannot be empty', 2000);
+
+				this.socket.emit('users.update', this.user._id, 'email.address', this.user.email, res => {
+					if (res.status == 'error') Toast.methods.addToast(res.message, 2000);
+					else Toast.methods.addToast('Successfully changed email address', 2000);
+				});
 			},
 			// Will be added shortly:
 			// changeAvatar() {
@@ -112,13 +120,14 @@
 			// },
 			changeUsername: function () {
 				if (this.user.username == "") return Toast.methods.addToast('Field cannot be empty', 2000);
-				socket.emit('users.update', '582a0724023ecc015c0bef42', 'username', this.user.username, res => {
+
+				this.socket.emit('users.update', this.user._id, 'username', this.user.username, res => {
 					if (res.status == 'error') Toast.methods.addToast(res.message, 2000);
 					else Toast.methods.addToast('Successfully changed username', 2000);
 				});
 			}
 		},
-		components: { MainHeader, MainFooter }
+		components: { MainHeader, MainFooter, LoginModal }
 	}
 </script>
 

frontend/components/User/Show.vue

@@ -4,8 +4,8 @@
 		<img class="avatar" src="https://avatars2.githubusercontent.com/u/11198912?v=3&s=460"/>
 		<h2 class="has-text-centered">@{{user.username}}</h2>
 		<div class="admin-functionality">
-			<a class="button is-small is-info is-outlined" @click="changeRank('admin')">Promote to Admin</a>
-			<a class="button is-small is-danger is-outlined" @click="changeRank('user')">Demote to User</a>
+			<a class="button is-small is-info is-outlined" @click="changeRank('admin')" v-if="!user.admin">Promote to Admin</a>
+			<a class="button is-small is-danger is-outlined" @click="changeRank('user')" v-else>Demote to User</a>
 		</div>
 		<nav class="level">
 			<div class="level-item has-text-centered">
@@ -44,7 +44,7 @@
 		methods: {
 			changeRank(newRank) {
 				console.log(rank);
-				Toast.methods.addToast(`User ${this.$route.params.username} has been promoted to the rank of ${rank}`, 2000);
+				Toast.methods.addToast(`User ${this.$route.params.username}'s rank has been changed to: ${rank}`, 2000);
 			}
 		},
 		ready: function() {
@@ -53,7 +53,7 @@
 				if (!!_this.$parent.socket) {
 					_this.socket = _this.$parent.socket;
 					_this.socket.emit('users.findByUsername', _this.$route.params.username, res => {
-						if (res.status == 'error') console.error(res.message); // Add 404/ Not found Component with link back to home, for now just console.log
+						if (res.status == 'error') console.log(res.message) // go to 404 Component
 						else _this.user = res.data;
 					});
 					clearInterval(socketInterval);

frontend/components/pages/Home.vue

@@ -4,7 +4,7 @@
 		<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)">
+				<div class="stations-station" v-for="station in stations.official" v-link="{ path: '/official/' + station.name }" @click="this.$dispatch('joinStation', station.id)">
 					<img class="station-image" :src="station.playlist[station.currentSongIndex].thumbnail" />
 					<div class="station-info">
 						<div class="station-grid-left">

frontend/main.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router';
 
 import App from './App.vue';
 
+import NotFound from './components/404.vue';
 import Home from './components/pages/Home.vue';
 import Station from './components/Station/Station.vue';
 import Admin from './components/pages/Admin.vue';
@@ -18,20 +19,22 @@ router.map({
 	'/': {
 		component: Home
 	},
+	'*': {
+		component: NotFound
+	},
 	'/news': {
 		component: News
 	},
 	'/u/:username': {
 		component: User
 	},
-	'/u/settings': {
-		// ifLoggedIn, else show 404 Component
+	'/settings': {
 		component: Settings
 	},
 	'/admin': {
 		component: Admin
 	},
-	'/:id': {
+	'/official/:id': {
 		component: Station
 	},
 	'/community/:id': {