From e351a6196435cf3945ab49939a96745594f89094 Mon Sep 17 00:00:00 2001
From: sqozz <sqozz@geekify.de>
Date: Sat, 30 Dec 2017 22:28:26 +0100
Subject: [PATCH] Improve client side input validation

---
 static/css/create.css | 24 +++++-----------
 static/js/create.js   | 64 ++++++++++++++++++++++++++-----------------
 templates/create.html | 36 ++++++++++++------------
 3 files changed, 64 insertions(+), 60 deletions(-)

diff --git a/static/css/create.css b/static/css/create.css
index 3ef76fc..e4d0fe7 100644
--- a/static/css/create.css
+++ b/static/css/create.css
@@ -85,29 +85,19 @@ body {
 	vertical-align: inherit;
 }
 
-.createTable {
-	width: 100%;
-	table-layout: fixed;
-	border-collapse: separate; 
-	border-spacing: 10px;
-}
-
-.createTable .labelColumn {
-	width: 200px;
-}
-
-.labelColumn {
-	vertical-align: center;
-}
-
-.labelColumn strong:after {
-	content: ":";
+.torrent-form .form-group {
+	margin-left: 0px;
+	margin-right: 0px;
 }
 
 .form-group .control-label:after {
 	content: ":";
 }
 
+.form-group .control-label.required:after {
+	content: "*:";
+}
+
 .detectedFiles {
 	max-height: 100px;
 	overflow: auto;
diff --git a/static/js/create.js b/static/js/create.js
index a6870db..e16a055 100644
--- a/static/js/create.js
+++ b/static/js/create.js
@@ -118,56 +118,70 @@ function setButtonToFilename(event) {
 	});
 }
 
+function setError(element) {
+	element.classList.add("has-error")
+	element.remove("has-success")
+}
+
+function setSuccess(element) {
+	element.classList.add("has-success")
+	element.classList.remove("has-error")
+}
+
 function validateForm() {
 	valid = true
-	file = document.querySelectorAll("input.file")[0]
-	category = document.querySelectorAll("#category")[0]
-	subcategory = document.querySelectorAll("#subcategory")[0]
-	torrentname = document.querySelectorAll("input.name")[0]
-	description = document.querySelectorAll("textarea.description")[0]
+
+	/* TODO: Iterate over these to do dynamic requirement checking
+	form_groups = document.querySelectorAll(".torrent-form .form-group.required")
+	required_inputs = document.querySelectorAll(".torrent-form input.required")
+	required_dropdown = document.querySelectorAll(".torrent-form select.dropdown.required")
+	required_textarea = document.querySelectorAll(".torrent-form textarea.required")
+	*/
+
+	file = document.querySelector(".torrent-form .file input")
+	category = document.querySelector("#category")
+	subcategory = document.querySelector("#subcategory")
+	torrentname = document.querySelector(".torrent-form .name input")
+	description = document.querySelector(".torrent-form .description textarea")
+
+	file_label = document.querySelector(".torrent-form .file")
+	category_label = document.querySelector(".torrent-form .category")
+	name_label =  document.querySelector(".torrent-form .name")
+	description_label = document.querySelector(".torrent-form .description")
+
 	if(file.value.length <= 0) {
 		valid = false
-		file.parentElement.parentElement.classList.add("has-error")
-		file.parentElement.parentElement.classList.remove("has-success")
+		setError(file_label)
 	} else {
-		file.parentElement.parentElement.classList.add("has-success")
-		file.parentElement.parentElement.classList.remove("has-error")
+		setSuccess(file_label)
 	}
 
 	if(category.value < 0) {
 		valid = false
-		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-error")
-		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-success")
+		setError(category_label)
 	} else {
-		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-success")
-		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-error")
+		setSuccess(category_label)
 	}
 
 	if(subcategory.value < 0) {
 		valid = false
-		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-error")
-		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-success")
+		setError(category_label)
 	} else {
-		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-success")
-		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-error")
+		setSuccess(category_label)
 	}
 
 	if(torrentname.value.length <= 0) {
 		valid = false
-		torrentname.parentElement.parentElement.classList.add("has-error")
-		torrentname.parentElement.parentElement.classList.remove("has-success")
+		setError(name_label)
 	} else {
-		torrentname.parentElement.parentElement.classList.add("has-success")
-		torrentname.parentElement.parentElement.classList.remove("has-error")
+		setSuccess(name_label)
 	}
 
 	if(description.value.length <= 0) {
 		valid = false
-		description.parentElement.parentElement.classList.add("has-error")
-		description.parentElement.parentElement.classList.remove("has-success")
+		setError(description_label)
 	} else {
-		description.parentElement.parentElement.classList.add("has-success")
-		description.parentElement.parentElement.classList.remove("has-error")
+		setSuccess(description_label)
 	}
 
 	return valid;
diff --git a/templates/create.html b/templates/create.html
index fd858c3..eee096e 100644
--- a/templates/create.html
+++ b/templates/create.html
@@ -25,11 +25,11 @@ vim: ts=2 noexpandtab
 		</div>
 		{% endfor %}
 		{% endif %}
-		<form class="form-horizontal" action="/create" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
-			<div class="form-group">
-				<label for="inputTorrentFile" class="col-sm-3 control-label">{{ _("Torrent file") }}</label>
+		<form class="form-horizontal torrent-form" action="/create" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
+			<div class="form-group file required">
+				<label for="inputTorrentFile" class="col-sm-3 control-label required">{{ _("Torrent file") }}</label>
 				<div class="col-sm-9">
-					<input name="torrentFile" class="file" type="file" size="50" maxlength="100000" accept="application/x-bittorrent" onchange="setButtonToFilename(event)">
+					<input name="torrentFile" class="file required" type="file" size="50" maxlength="100000" accept="application/x-bittorrent" onchange="setButtonToFilename(event)">
 				</div>
 			</div>
 			<div class="form-group detectedInfosGroup">
@@ -52,12 +52,12 @@ vim: ts=2 noexpandtab
 					</div>
 				</div>
 			</div>
-			<div class="form-group">
-				<label for="category" class="col-sm-3 control-label">{{ _("Category") }}</label>
+			<div class="form-group category required">
+				<label for="category" class="col-sm-3 control-label required">{{ _("Category") }}</label>
 				<div class="col-sm-9">
 					<div class="row row-container">
 						<div class="col-md-6 category-column">
-							<select class="form-control dropdown" id="category" name="category">
+							<select class="form-control dropdown required" id="category" name="category">
 								<option value="-1" selected>--- {{ _("Select Category") }} ---</option>
 							{% for category in categories %}
 								<option value="{{ category.id }}">{{ category.label }}</option>
@@ -65,27 +65,27 @@ vim: ts=2 noexpandtab
 							</select>
 						</div>
 						<div class="col-md-6 subcategory-column">
-							<select class="form-control dropdown" id="subcategory" name="subcategory">
+							<select class="form-control dropdown required" id="subcategory" name="subcategory">
 								<option value="-1" selected>--- {{ _("Select Subcategory") }} ---</option>
 							</select>
 						</div>
 					</div>
 				</div>
 			</div>
-			<div class="form-group">
-				<label for="inputName" class="col-sm-3 control-label">{{ _("Name") }}</label>
+			<div class="form-group name required">
+				<label for="inputName" class="col-sm-3 control-label required">{{ _("Name") }}</label>
 				<div class="col-sm-9">
-					<input type="text" name="name" class="form-control name" placeholder="{{ _("e.g. Attack of the Killer Tomatoes") }}" aria-describedby="basic-addon1">
+					<input type="text" name="name" class="form-control name required" placeholder="{{ _("e.g. Attack of the Killer Tomatoes") }}" aria-describedby="basic-addon1">
 				</div>
 			</div>
-			<div class="form-group">
-				<label for="inputName" class="col-sm-3 control-label">{{ _("Audio quality") }}</label>
+			<div class="form-group audioquality">
+				<label for="audioquality_description" class="col-sm-3 control-label">{{ _("Audio quality") }}</label>
 				<div class="col-sm-9">
 					<input type="text" name="audioquality_description" class="form-control name" placeholder="{{ _("e.g. English, AC-3 @ 384kbps") }}" aria-describedby="basic-addon1">
 				</div>
 			</div>
-			<div class="form-group">
-				<label for="inputName" class="col-sm-3 control-label">{{ _("Video quality") }}</label>
+			<div class="form-group videoquality">
+				<label for="videoquality_description" class="col-sm-3 control-label">{{ _("Video quality") }}</label>
 				<div class="col-sm-9">
 					<input type="text" name="videoquality_description" class="form-control name" placeholder="{{ _("e.g. XviD, 720×400 @ 1809 kbps") }}" aria-describedby="basic-addon1">
 				</div>
@@ -114,10 +114,10 @@ vim: ts=2 noexpandtab
 				</div>
 			</div>
 -->
-			<div class="form-group">
-				<label for="inputName" class="col-sm-3 control-label">{{ _("Description") }}</label>
+			<div class="form-group description required">
+				<label for="inputName" class="col-sm-3 control-label required">{{ _("Description") }}</label>
 				<div class="col-sm-9">
-					<textarea name="description" class="form-control description" rows="10" placeholder="{{ _("Hint: Markdown is supported in this field") }}"></textarea>
+					<textarea name="description" class="form-control description required" rows="10" placeholder="{{ _("Hint: Markdown is supported in this field") }}"></textarea>
 				</div>
 			</div>
 			<div class="form-group">