Add 404 page, create reuseable SearchBox component to go on 404 page (as well as for the header bar)

src/App.vue

@@ -106,23 +106,7 @@
 						Login
 					</div>
 				</template>
-				<div
-					class='search'
-					tabindex='0'
-					@keydown.enter='goToSearch'
-				>
-					<input
-						class='search__field'
-						placeholder='Search this forum'
-						v-model='searchField'
-					>
-					<button
-						class='search__button'
-						@click='goToSearch'
-					>
-						<span class='fa fa-search'></span>
-					</button>
-				</div>
+				<search-box></search-box>
 			</div>
 		</header>
 		<router-view></router-view>
@@ -135,6 +119,7 @@
 	import FancyInput from './components/FancyInput'
 	import LoadingButton from './components/LoadingButton'
 	import NotificationButton from './components/NotificationButton'
+	import SearchBox from './components/SearchBox'
 	
 	import AjaxErrorHandler from './assets/js/errorHandler'
 
@@ -145,7 +130,8 @@
 			TabView,
 			FancyInput,
 			LoadingButton,
-			NotificationButton
+			NotificationButton,
+			SearchBox
 		},
 		data () {
 			return {
@@ -174,8 +160,7 @@
 					}
 				},
 				loadingLogout: false,
-				ajaxErrorHandler: AjaxErrorHandler(this.$store),
-				searchField: ''
+				ajaxErrorHandler: AjaxErrorHandler(this.$store)
 			}
 		},
 		computed: {
@@ -201,11 +186,6 @@
 			}
 		},
 		methods: {
-			goToSearch () {
-				if(this.searchField.trim().length) {
-					this.$router.push("/search/" + this.searchField)
-				}
-			},
 			showAccountModalTab (index) {
 				this.showAccountModal = true
 				this.showAccountTab = index
@@ -421,31 +401,4 @@
 			color: $color__text--primary;
 		}
 	}
-
-	.search {
-		border: 1px solid $color__gray--darker;
-		border-radius: 0.25rem;
-		outline: none;
-		overflow: hidden;
-
-		@at-root #{&}__field {
-			outline: none;
-			height: 100%;
-			padding: 0 0.5rem;
-			border: 0;
-
-			@include text;
-			color: $color__text--primary;
-
-			@include placeholder {
-				@include text;
-				color: $color__lightgray--darkest;
-			}
-		}
-		@at-root #{&}__button {
-			@extend .button;
-			border: 0;
-			border-radius: 0 0.125rem 0.125rem 0;
-		}
-	}
 </style>

src/components/SearchBox.vue

@@ -0,0 +1,70 @@
+<template>
+	<div
+		class='search_box'
+		tabindex='0'
+		@keydown.enter='goToSearch'
+	>
+		<input
+			class='search_box__field'
+			:placeholder='placeholder || "Search this forum"'
+			v-model='searchField'
+		>
+		<button
+			class='search_box__button'
+			@click='goToSearch'
+		>
+			<span class='fa fa-search'></span>
+		</button>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'SearchBox',
+		props: ['placeholder'],
+		data () {
+			return {
+				searchField: ''
+			}
+		},
+		methods: {
+			goToSearch () {
+				if(this.searchField.trim().length) {
+					this.$router.push("/search/" + this.searchField)
+				}
+			}
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	@import '../assets/scss/variables.scss';
+	@import '../assets/scss/elementStyles.scss';
+
+	.search_box {
+		border: thin solid $color__gray--darker;
+		border-radius: 0.25rem;
+		outline: none;
+		display: inline-block;
+
+		@at-root #{&}__field {
+			outline: none;
+			height: 100%;
+			padding: 0 0.5rem;
+			border: 0;
+
+			@include text;
+			color: $color__text--primary;
+
+			@include placeholder {
+				@include text;
+				color: $color__lightgray--darkest;
+			}
+		}
+		@at-root #{&}__button {
+			@extend .button;
+			border: 0;
+			border-radius: 0 0.125rem 0.125rem 0;
+		}
+	}
+</style>

src/components/routes/NotFound.vue

@@ -0,0 +1,60 @@
+<template>
+	<div class='route_container not_found'>
+		<h1 class='not_found__title'>404 - page not found</h1>
+
+		<div class='not_found__box'>
+			<p class='not_found__box--large_text'>
+				The page you're looking for <strong>{{$route.fullPath}}</strong> doesn't exist.
+			</p>
+			<p>
+				<router-link to='/' class='button'>Click to go home</router-link> or
+				<search-box
+					class='not_found__search_box'
+					placeholder='Try a search'
+				></search-box>
+			</p>
+		</div>
+	</div>
+</template>
+
+<script>
+	import SearchBox from '../SearchBox'
+
+	export default {
+		name: 'NotFound',
+		components: { SearchBox }
+	}
+</script>
+
+<style lang='scss' scoped>
+	@import '../../assets/scss/variables.scss';
+	@import '../../assets/scss/elementStyles.scss';
+
+	.not_found {
+		@at-root #{&}__title {
+			font-family: $font--role-emphasis;
+			font-size: 4rem;
+			margin-top: 4rem;
+			text-align: center;
+		}
+
+		@at-root #{&}__box {
+			background-color: #fff;
+			border-radius: 0.25rem;
+			padding: 2rem;
+			padding-top: 1rem;
+			
+			.button {
+				margin-right: 0.5rem;
+			}
+
+			@at-root #{&}--large_text {
+				font-size: 1.5rem;
+			}
+		}
+
+		@at-root #{&}__search_box {
+			margin-left: 0.5rem
+		}
+	}
+</style>

src/main.js

@@ -32,6 +32,8 @@ import AdminModerationReports from './components/routes/AdminModerationReports'
 import AdminModerationBannedUsers from './components/routes/AdminModerationBannedUsers'
 import AdminGeneral from './components/routes/AdminGeneral'
 
+import NotFound from './components/routes/NotFound'
+
 Vue.use(VueRouter)
 Vue.use(Vuex)
 Vue.use(VueAxios, axios)
@@ -60,7 +62,8 @@ const router = new VueRouter({
 			{ path: 'moderation', redirect: '/admin/moderation/reports' },
 			{ path: 'moderation/reports', component: AdminModerationReports },
 			{ path: 'moderation/bans', component: AdminModerationBannedUsers }
-		] }
+		] },
+		{ path: '*', component: NotFound }
 	],
 	mode: 'history'
 })