Only allow searches with strings four characters or greater

frontend/src/components/SearchBox.vue

@@ -146,7 +146,7 @@
 				//Return if results should not show
 				if(!this.headerBar) return;
 
-				this.showResults = !!this.searchField.trim().length;
+				this.showResults = this.searchField.trim().length > 3;
 				if(this.showResults) {
 					this.getResults();
 				} else {
@@ -285,7 +285,7 @@
 			},
 			getResults () {
 				let q = this.searchField.trim();
-				if(!q.length) return;
+				if(q.length < 4) return;
 
 				this.loading = true;
 				this.threads = [];

frontend/src/components/routes/Search.vue

@@ -44,7 +44,20 @@
 				<h2>Users</h2>
 				<user-placeholder></user-placeholder>
 			</div>
+
+			<div
+				class='overlay_message search__overlay_message'
+				v-if='showNoResults || queryTooShort'
+				key='no results'
+			>
+				<span class='fa fa-exclamation-circle'></span>
+					{{queryTooShort ?
+						"Search term is too short" :
+						"No results found"
+					}}
+			</div>
 		</transition>
+
 	</div>
 </template>
 
@@ -74,6 +87,17 @@
 				loadingUsers: false
 			}
 		},
+		computed: {
+			showNoResults () {
+				return (
+					!this.loadingUsers && !this.loadingThreads &&
+					!this.threads.length && !this.users.length
+				);
+			},
+			queryTooShort () {
+				return this.$route.params.q.length < 4
+			}
+		},
 		methods: {
 			getUsers () {
 				this.loadingUsers = true;
@@ -98,6 +122,8 @@
 					.catch(AjaxErrorHandler(this.$store))
 			},
 			getResults () {
+				if(this.queryTooShort) return;
+
 				this.$store.dispatch('setTitle', 'Search | ' + this.$route.params.q)
 
 				this.getThreads();

frontend/src/components/routes/SearchUsersThreads.vue

@@ -45,11 +45,14 @@
 
 			<div
 				class='overlay_message search__overlay_message'
-				v-else-if='results && !results.length'
+				v-if='showNoResults || queryTooShort'
 				key='no results'
 			>
 				<span class='fa fa-exclamation-circle'></span>
-				No {{searchType}} found
+					{{queryTooShort ?
+						"Search term is too short" :
+						"No results found"
+					}}
 			</div>
 
 			<div key='loading' v-else>
@@ -100,10 +103,20 @@
 				} else if (name === 'search/threads') {
 					return 'threads';
 				}
+			},
+			showNoResults () {
+				return (
+					!this.loading && this.results && !this.results.length
+				);
+			},
+			queryTooShort () {
+				return this.$route.params.q.length < 4
 			}
 		},
 		methods: {
 			getResults () {
+				if (this.queryTooShort) return;
+
 				this.$store.dispatch('setTitle', 'Search | ' + this.$route.params.q)
 			
 				this.axios

routes/search.js

@@ -6,7 +6,14 @@ const Errors = require('../lib/errors')
 
 router.get('/thread', async (req, res, next) => {
 	try {
-		let searchString = req.query.q
+		let searchString = req.query.q.trim()
+
+		if(searchString.length < 4) {
+			throw Errors.sequelizeValidation(Sequelize, {
+				error: 'search string must be at least 4 characters',
+				value: searchString
+			})
+		}
 
 		//Offset is really the previously lowest id
 		//(as a proxy for oldest thread of the previous search)
@@ -85,7 +92,6 @@ router.get('/thread', async (req, res, next) => {
 		//the post number is equal to the overal posts count
 		//and the post number > 0 (i.e. there are replies)
 		let whereClause = sorted.reduce((arr, thread) => {
-			console.log(thread.postsCount)
 			if(thread.postsCount > 1) {
 				let clause = {
 					$and: {