Reviewed and fixed Favro Card MUS-94

frontend/App.vue

@@ -58,21 +58,24 @@
 		events: {
 			'register': function () {
 				let { register: { email, username, password } } = this;
+				let _this = this;
 				this.socket.emit('users.register', username, email, password, /*grecaptcha.getResponse()*/null, result => {
 					Toast.methods.addToast(`User ${username} has been registered`, 2000);
-					setTimeout(location.reload(), 2500);
+					_this.$router.go('/');
+					location.reload();
 				});
 			},
 			'login': function () {
 				let { login: { email, password } } = this;
-
+				let _this = this;
 				this.socket.emit('users.login', email, password, result => {
 					if (result.status === 'success') {
 						let date = new Date();
-						date.setTime(new Date().getTime() + (2*365*24*60*60*1000));
-						document.cookie = "SID=" + result.SID + "; expires="+ date.toGMTString() +"; path=/";
+						date.setTime(new Date().getTime() + (2 * 365 * 24 * 60 * 60 * 1000));
+						document.cookie = `SID=${result.SID}; expires=${date.toGMTString()}; path=/`;
 						Toast.methods.addToast(`You have been successfully logged in`, 2000);
-						setTimeout(location.reload(), 2500);
+						_this.$router.go('/');
+						location.reload();
 					} else {
 						Toast.methods.addToast(result.message, 2000);
 					}

frontend/components/MainHeader.vue

@@ -44,20 +44,9 @@
 
 <script>
 	export default {
-		data() {
-			return {
-
-			}
-		},
-		ready: function() {
-			let _this = this;
-		},
 		methods: {
 			toggleModal: function (type) {
 				this.$dispatch('toggleModal', type);
-			},
-			isAdmin: function() {
-				_this = this;
 			}
 		}
 	}

frontend/components/User/Settings.vue

@@ -1,53 +1,51 @@
 <template>
-	<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>
+	<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>
-		<main-footer></main-footer>
 	</div>
+	<main-footer></main-footer>
 </template>
 
 <script>
@@ -63,8 +61,7 @@
 			return {
 				currentPassword: '',
 				newPassword: '',
-				user: {},
-				isLoggedIn: false,
+				user: {}
 			}
 		},
 		ready: function() {
@@ -73,7 +70,7 @@
 				if (!!_this.$parent.socket) {
 					_this.socket = _this.$parent.socket;
 					_this.socket.emit('users.findBySession', res => {
-						if (res.status == 'success') { _this.user = res.data; _this.isLoggedIn = true; } else {
+						if (res.status == 'success') { _this.user = res.data; } else {
 							_this.$parent.isLoginActive = true;
 							Toast.methods.addToast('Your are currently not signed in', 3000);
 						}

frontend/components/pages/Home.vue

@@ -64,7 +64,6 @@
 				if (!!_this.$parent.socket) {
 					_this.socket = _this.$parent.socket;
 					_this.socket.emit("stations.index", data => {
-						console.log(data)
 						if (data.status === "success")  data.stations.forEach(station => {
 							if (station.type == 'official') _this.stations.official.push(station);
 							else _this.stations.community.push(station);

frontend/main.js

@@ -10,6 +10,7 @@ import Admin from './components/pages/Admin.vue';
 import News from './components/pages/News.vue';
 import User from './components/User/Show.vue';
 import Settings from './components/User/Settings.vue';
+import Login from './components/Modals/Login.vue';
 
 Vue.use(VueRouter);
 
@@ -24,19 +25,15 @@ lofig.get('socket.url', function(res) {
 	});
 });
 
-router.beforeEach((transition) => {
+router.beforeEach(transition => {
 	if (transition.to.loginRequired || transition.to.adminRequired) {
 		auth.getStatus((authenticated, role) => {
-			if (transition.to.loginRequired && !authenticated) {
-				transition.redirect('/login')
-			} else if (transition.to.adminRequired && role !== 'admin') {
-				transition.redirect('/adminRequired');
-			} else {
-				transition.next();
-			}
+			if (transition.to.loginRequired && !authenticated) transition.redirect('/login');
+			else if (transition.to.adminRequired && role !== 'admin') transition.redirect('/');
+			else transition.next();
 		});
 	} else {
-		transition.next()
+		transition.next();
 	}
 });
 
@@ -57,6 +54,9 @@ router.map({
 		component: Settings,
 		loginRequired: true
 	},
+	'/login': {
+		component: Login
+	},
 	'/admin': {
 		component: Admin,
 		adminRequired: true