From 2104d1ea4b1c30a9201bfaa427a469828706df6c Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Wed, 4 Mar 2020 19:27:27 +0000
Subject: [PATCH] Input length validation for new tasks, lists and namespaces
 (#70)

Fix input validation for new tasks

Better layout for input validation for new lists

Add input length validation for new namepaces

Add input length validation for new lists

Add input length validation for new tasks

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/70
---
 src/components/lists/NewList.vue           | 39 +++++++++++++-------
 src/components/namespaces/NewNamespace.vue | 42 +++++++++++++++-------
 src/components/tasks/ShowListTasks.vue     | 28 ++++++++++-----
 3 files changed, 76 insertions(+), 33 deletions(-)

diff --git a/src/components/lists/NewList.vue b/src/components/lists/NewList.vue
index 1b6bd7ea8..78a371713 100644
--- a/src/components/lists/NewList.vue
+++ b/src/components/lists/NewList.vue
@@ -5,21 +5,29 @@
 			</icon>
 		</a>
 		<h3>Create a new list</h3>
-		<form @submit.prevent="newList" @keyup.esc="back()">
-			<div class="field is-grouped">
-				<p class="control is-expanded" :class="{ 'is-loading': listService.loading}">
-					<input v-focus class="input" :class="{ 'disabled': listService.loading}" v-model="list.title" type="text" placeholder="The list's name goes here...">
-				</p>
-				<p class="control">
-					<button type="submit" class="button is-success noshadow">
+		<div class="field is-grouped">
+			<p class="control is-expanded" :class="{ 'is-loading': listService.loading}">
+				<input v-focus
+					class="input"
+					:class="{ 'disabled': listService.loading}"
+					v-model="list.title"
+					type="text"
+					placeholder="The list's name goes here..."
+					@keyup.esc="back()"
+					@keyup.enter="newList()"/>
+			</p>
+			<p class="control">
+				<button class="button is-success noshadow" @click="newList()" :disabled="list.title.length < 3">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
-						Add
-					</button>
-				</p>
-			</div>
-		</form>
+					Add
+				</button>
+			</p>
+		</div>
+		<p class="help is-danger" v-if="showError && list.title.length < 3">
+			Please specify at least three characters.
+		</p>
 	</div>
 </template>
 
@@ -33,6 +41,7 @@
 		name: "NewList",
 		data() {
 			return {
+				showError: false,
 				list: ListModel,
 				listService: ListService,
 			}
@@ -50,6 +59,12 @@
 		},
 		methods: {
 			newList() {
+				if (this.list.title.length < 3) {
+					this.showError = true
+					return
+				}
+				this.showError = false
+
 				this.list.namespaceID = this.$route.params.id
 				this.listService.create(this.list)
 					.then(response => {
diff --git a/src/components/namespaces/NewNamespace.vue b/src/components/namespaces/NewNamespace.vue
index df007a328..d5fc60e61 100644
--- a/src/components/namespaces/NewNamespace.vue
+++ b/src/components/namespaces/NewNamespace.vue
@@ -5,22 +5,31 @@
 			</icon>
 		</a>
 		<h3>Create a new namespace</h3>
-		<form @submit.prevent="newNamespace" @keyup.esc="back()">
-			<div class="field is-grouped">
-				<p class="control is-expanded" v-bind:class="{ 'is-loading': namespaceService.loading}">
-					<input v-focus class="input" v-bind:class="{ 'disabled': namespaceService.loading}" v-model="namespace.name" type="text" placeholder="The namespace's name goes here...">
-				</p>
-				<p class="control">
-					<button type="submit" class="button is-success noshadow">
+		<div class="field is-grouped">
+			<p class="control is-expanded" v-bind:class="{ 'is-loading': namespaceService.loading}">
+				<input v-focus
+					class="input"
+					v-bind:class="{ 'disabled': namespaceService.loading}"
+					v-model="namespace.name"
+					type="text"
+					@keyup.enter="newNamespace()"
+					@keyup.esc="back()"
+					placeholder="The namespace's name goes here..."/>
+			</p>
+			<p class="control">
+				<button class="button is-success noshadow" @click="newNamespace()" :disabled="namespace.name.length <= 5">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
-						Add
-					</button>
-				</p>
-			</div>
-		</form>
-		<p class="small" v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with.<br/>In fact, every list belongs to a namepace.'">What's a namespace?</p>
+					Add
+				</button>
+			</p>
+		</div>
+		<p class="help is-danger" v-if="showError && namespace.name.length <= 5">
+			Please specify at least five characters.
+		</p>
+		<p class="small" v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with.<br/>In fact, every list belongs to a namepace.'">
+			What's a namespace?</p>
 	</div>
 </template>
 
@@ -34,6 +43,7 @@
 		name: "NewNamespace",
 		data() {
 			return {
+				showError: false,
 				namespace: NamespaceModel,
 				namespaceService: NamespaceService,
 			}
@@ -51,6 +61,12 @@
 		},
 		methods: {
 			newNamespace() {
+				if (this.namespace.name.length <= 4) {
+					this.showError = true
+					return
+				}
+				this.showError = false
+
 				this.namespaceService.create(this.namespace)
 					.then(() => {
 						this.$parent.loadNamespaces()
diff --git a/src/components/tasks/ShowListTasks.vue b/src/components/tasks/ShowListTasks.vue
index 5b6a5e7c3..d248ca423 100644
--- a/src/components/tasks/ShowListTasks.vue
+++ b/src/components/tasks/ShowListTasks.vue
@@ -31,24 +31,28 @@
 				</span>
 			</button>
 		</div>
-		<form @submit.prevent="addTask()">
-			<div class="field is-grouped task-add">
+
+		<div class="field task-add">
+			<div class="field is-grouped">
 				<p class="control has-icons-left is-expanded" :class="{ 'is-loading': taskService.loading}">
-					<input v-focus class="input" :class="{ 'disabled': taskService.loading}" v-model="newTaskText" type="text" placeholder="Add a new task...">
+					<input v-focus class="input" :class="{ 'disabled': taskService.loading}" v-model="newTaskText" type="text" placeholder="Add a new task..." @keyup.enter="addTask()"/>
 					<span class="icon is-small is-left">
 						<icon icon="tasks"/>
 					</span>
 				</p>
 				<p class="control">
-					<button type="submit" class="button is-success">
-					<span class="icon is-small">
-						<icon icon="plus"/>
-					</span>
+					<button class="button is-success" :disabled="newTaskText.length < 3" @click="addTask()">
+						<span class="icon is-small">
+							<icon icon="plus"/>
+						</span>
 						Add
 					</button>
 				</p>
 			</div>
-		</form>
+			<p class="help is-danger" v-if="showError && newTaskText.length < 3">
+				Please specify at least three characters.
+			</p>
+		</div>
 
 		<div class="columns">
 			<div class="column">
@@ -154,6 +158,8 @@
 				taskEditTask: TaskModel,
 				newTaskText: '',
 
+				showError: false,
+
 				showTaskSearch: false,
 				searchTerm: '',
 			}
@@ -188,6 +194,12 @@
 				this.loadTasks(page)
 			},
 			addTask() {
+				if (this.newTaskText.length < 3) {
+					this.showError = true
+					return
+				}
+				this.showError = false
+
 				let task = new TaskModel({text: this.newTaskText, listID: this.$route.params.id})
 				this.taskService.create(task)
 					.then(r => {