Added Back to Home button on 404.vue. Also added redirect if user doesn't

exist on /u/

frontend/components/404.vue

@@ -1,5 +1,8 @@
 <template>
-	<h3><strong>404</strong>&nbsp;Not Found</h3>
+	<div class="wrapper">
+		<h3><strong>404</strong>&nbsp;Not Found</h3>
+		<button class="button is-black" @click="$router.go('/')">Back to Home</button>
+	</div>
 </template>
 
 <style type="scss" scoped>
@@ -8,10 +11,15 @@
 		padding: 0;
 	}
 
-	h3 {
+	.wrapper {
 		height: 100vh;
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		flex-direction: column;
+	}
+
+	button {
+		margin-top: 15px;
 	}
 </style>

frontend/components/User/Show.vue

@@ -1,32 +1,34 @@
 <template>
-	<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>
-		<div class="admin-functionality">
-			<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">
-				<p class="heading">Rank</p>
-				<p class="title">User</p>
-			</div>
-			<div class="level-item has-text-centered">
-				<p class="heading">Songs Requested</p>
-				<p class="title">{{ user.statistics.songsRequested }}</p>
-			</div>
-			<div class="level-item has-text-centered">
-				<p class="heading">Likes</p>
-				<p class="title">{{ user.statistics.songsLiked.length }}</p>
+	<div v-if="isUser">
+		<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>
+			<div class="admin-functionality">
+				<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>
-			<div class="level-item has-text-centered">
-				<p class="heading">Dislikes</p>
-				<p class="title">{{ user.statistics.songsDisliked.length }}</p>
-			</div>
-		</nav>
+			<nav class="level">
+				<div class="level-item has-text-centered">
+					<p class="heading">Rank</p>
+					<p class="title">User</p>
+				</div>
+				<div class="level-item has-text-centered">
+					<p class="heading">Songs Requested</p>
+					<p class="title">{{ user.statistics.songsRequested }}</p>
+				</div>
+				<div class="level-item has-text-centered">
+					<p class="heading">Likes</p>
+					<p class="title">{{ user.statistics.songsLiked.length }}</p>
+				</div>
+				<div class="level-item has-text-centered">
+					<p class="heading">Dislikes</p>
+					<p class="title">{{ user.statistics.songsDisliked.length }}</p>
+				</div>
+			</nav>
+		</div>
+		<main-footer></main-footer>
 	</div>
-	<main-footer></main-footer>
 </template>
 
 <script>
@@ -38,7 +40,8 @@
 	export default {
 		data() {
 			return {
-				user: {}
+				user: {},
+				isUser: false,
 			}
 		},
 		methods: {
@@ -53,8 +56,8 @@
 				if (!!_this.$parent.socket) {
 					_this.socket = _this.$parent.socket;
 					_this.socket.emit('users.findByUsername', _this.$route.params.username, res => {
-						if (res.status == 'error') console.log(res.message) // go to 404 Component
-						else _this.user = res.data;
+						if (res.status == 'error') this.$router.go('/*');
+						else _this.user = res.data; _this.isUser = true;
 					});
 					clearInterval(socketInterval);
 				}