Added layout for settings page. Still lots more to add

backend/logic/actions/users.js

@@ -157,6 +157,8 @@ module.exports = {
 					status: 'success',
 					data: {
 						username: account.username,
+						email: account.email.address,
+						password: '',
 						createdAt: account.createdAt,
 						statistics: account.statistics
 					}

frontend/components/User/Settings.vue

@@ -0,0 +1,73 @@
+<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">
+				<!-- 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>
+		<p class="control">
+			<button class="button is-success">Save Changes</button>
+		</p>
+	</div>
+	<main-footer></main-footer>
+</template>
+
+<script>
+	import MainHeader from '../MainHeader.vue';
+	import MainFooter from '../MainFooter.vue';
+
+	export default {
+		data() {
+			return {
+				user: {}
+			}
+		},
+		ready: function() {
+			let _this = this;
+			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;
+					});
+					clearInterval(socketInterval);
+				}
+			}, 100);
+		},
+		components: { MainHeader, MainFooter },
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		padding: 25px;
+	}
+</style>

frontend/components/User/Show.vue

@@ -42,7 +42,7 @@
 		methods: {
 			changeRank(newRank) {
 				console.log(rank);
-				Toast.methods.addToast(`User ${this.$route.params.username} has been promoted to the rank of ${rank}`, 200000);
+				// Toast.methods.addToast(`User ${this.$route.params.username} has been promoted to the rank of ${rank}`, 200000);
 			}
 		},
 		ready: function() {

frontend/main.js

@@ -24,7 +24,8 @@ router.map({
 	'/u/:username': {
 		component: User
 	},
-	'/u/:username/settings': {
+	'/u/settings': {
+		// ifLoggedIn, else show 404 Component
 		component: Settings
 	},
 	'/admin': {