Add reasons to report screens

files/assets/js/comments_v.js

@@ -39,40 +39,64 @@ function post_toast3(t, url, button1, button2) {
 }
 
 function report_commentModal(id, author) {
-
 	document.getElementById("comment-author").textContent = author;
 
-	document.getElementById("reportCommentFormBefore").classList.remove('d-none');
+	const wholeFormBefore = document.getElementById('reportCommentFormBefore');
-	document.getElementById("reportCommentFormAfter").classList.add('d-none');
+	const wholeFormAfter = document.getElementById('reportCommentFormAfter');
+	const submitButton = document.getElementById("reportCommentButton")
+	const reasonField = document.getElementById("reason-comment")
 
-	btn = document.getElementById("reportCommentButton")
+	//The HTML is reused if the user makes multiple reports without a reload, so clean up
-	btn.innerHTML='Report comment';
+	//from any previous openings
-	btn.disabled = false;
+	wholeFormBefore.classList.remove('d-none');
-	btn.classList.remove('disabled');
+	wholeFormAfter.classList.add('d-none');
+	submitButton.disabled = true;
+	submitButton.classList.add('disabled');
+	submitButton.innerHTML = 'Report comment';
+	reasonField.value = ""
+	reasonField.disabled = true;
+	for (const radioButton of document.querySelectorAll('input[name="report-reason"]')) {
+		radioButton.checked = false;
+	}
 
-	reason = document.getElementById("reason-comment")
+	const otherButton = document.querySelector('input#other');
-	reason.value = ""
+	function handleRadioButtonChange() {
+		submitButton.disabled = false;
+		submitButton.classList.remove('disabled');
+		reasonField.disabled = !otherButton.checked;
+		if (!otherButton.checked) {
+			reasonField.value = "";
+		}
+	};
+	wholeFormBefore.addEventListener('change', handleRadioButtonChange);
 
-	btn.onclick = function() {
+	submitButton.onclick = function() {
 		this.innerHTML = 'Reporting comment';
 		this.disabled = true;
 		this.classList.add('disabled');
+
 		const xhr = new XMLHttpRequest();
 		xhr.open("POST", '/report/comment/'+id);
 		xhr.setRequestHeader('xhr', 'xhr');
 		var form = new FormData()
 		form.append("formkey", formkey());
-		form.append("reason", reason.value);
+		let reasonValue;
+		if (otherButton.checked) {
+			reasonValue = reasonField.value;
+		} else {
+			reasonValue = document.querySelector('input[name="report-reason"]:checked').value;
+		}
+		form.append("reason", reasonValue);
 
 		xhr.onload=function() {
-			document.getElementById("reportCommentFormBefore").classList.add('d-none');
+			wholeFormBefore.classList.add('d-none');
-			document.getElementById("reportCommentFormAfter").classList.remove('d-none');
+			wholeFormAfter.classList.remove('d-none');
+			wholeFormBefore.removeEventListener('change', handleRadioButtonChange);
 		};
 
 		xhr.onerror=function(){alert(errortext)};
 		xhr.send(form);
 	}
-
 };
 
 function openReplyBox(id) {

files/assets/js/report_post_modal.js

@@ -1,14 +1,32 @@
 function report_postModal(id) {
+	const submitbutton = document.getElementById("reportPostButton");
+	const wholeFormBefore = document.getElementById('reportPostFormBefore');
+	const wholeFormAfter = document.getElementById('reportPostFormAfter');
+	const reasonField = document.getElementById("reason-field");
 
-	submitbutton=document.getElementById("reportPostButton");
+	//The HTML is reused if the user makes multiple reports without a reload, so clean up
-	document.getElementById("reportPostFormBefore").classList.remove('d-none');
+	//from any previous openings
-	document.getElementById("reportPostFormAfter").classList.add('d-none');
+	wholeFormBefore.classList.remove('d-none');
+	wholeFormAfter.classList.add('d-none');
+	submitbutton.disabled = true;
+	submitbutton.innerHTML = 'Report post';
+	submitbutton.classList.add('disabled');
+	reasonField.value = "";
+	reasonField.disabled = true;
+	for (const radioButton of document.querySelectorAll('input[name="report-reason"]')) {
+		radioButton.checked = false;
+	}
+
+	const otherButton = document.querySelector('input#other');
+	function handleRadioButtonChange() {
 		submitbutton.disabled = false;
 		submitbutton.classList.remove('disabled');
-	submitbutton.innerHTML='Report post';
+		reasonField.disabled = !otherButton.checked;
-
+		if (!otherButton.checked) {
-	reason = document.getElementById("reason")
+			reasonField.value = "";
-	reason.value = ""
+		}
+	};
+	wholeFormBefore.addEventListener('change', handleRadioButtonChange);
 
 	submitbutton.onclick = function() {
 
@@ -19,13 +37,20 @@ function report_postModal(id) {
 		const xhr = new XMLHttpRequest();
 		xhr.open("POST", '/report/post/'+id);
 		xhr.setRequestHeader('xhr', 'xhr');
-		var form = new FormData()
+		var form = new FormData();
 		form.append("formkey", formkey());
-		form.append("reason", reason.value);
+		let reasonValue;
+		if (otherButton.checked) {
+			reasonValue = reasonField.value;
+		} else {
+			reasonValue = document.querySelector('input[name="report-reason"]:checked').value;
+		}
+		form.append("reason", reasonValue);
 
 		xhr.onload=function() {
-			document.getElementById("reportPostFormBefore").classList.add('d-none');
+			wholeFormBefore.classList.add('d-none');
-			document.getElementById("reportPostFormAfter").classList.remove('d-none');
+			wholeFormAfter.classList.remove('d-none');
+			wholeFormBefore.removeEventListener('change', handleRadioButtonChange);
 		};
 
 		xhr.onerror=function(){alert(errortext)};

files/templates/comments.html

@@ -817,6 +817,30 @@
 							<div class="h6">We're sorry something here is wrong.</div>
 							<small class="form-text text-muted">Please enter a reason for reporting below.</small>
 							<pre></pre>
+							<div>
+								<input type="radio" id="low-effort" name="report-reason" value="low-effort" />
+								<label for="low-effort">Low Effort</label>
+							</div>
+							<div>
+								<input type="radio" id="antagonistic" name="report-reason" value="antagonistic" />
+								<label for="antagonistic">Antagonistic/Uncharitable/Unkind</label>
+							</div>
+							<div>
+								<input type="radio" id="boo-outgroup" name="report-reason" value="boo-outgroup" />
+								<label for="boo-outgroup">Boo Outgroup</label>
+							</div>
+							<div>
+								<input type="radio" id="build-consensus" name="report-reason" value="build-consensus" />
+								<label for="build-consensus">Attempting to speak for the whole forum or build consensus</label>
+							</div>
+							<div>
+								<input type="radio" id="quality-contribution" name="report-reason" value="quality-contribution" />
+								<label for="quality-contribution">Actually a quality contribution</label>
+							</div>
+							<div>
+								<input type="radio" id="other" name="report-reason" value="other" />
+								<label for="other">Other</label>
+							</div>
 							<input autocomplete="off" maxlength="100" id="reason-comment" class="form-control">
 						</div>
 						<div class="modal-footer">

files/templates/report_post_modal.html

@@ -12,7 +12,31 @@
 					<div class="h6">We're sorry something here is wrong.</div>
 					<small class="form-text text-muted">Please enter a reason for reporting below.</small>
 					<pre></pre>
-					<input autocomplete="off" maxlength="100" id="reason" class="form-control b2">
+					<div>
+						<input type="radio" id="low-effort" name="report-reason" value="low-effort" />
+						<label for="low-effort">Low Effort</label>
+					</div>
+					<div>
+						<input type="radio" id="antagonistic" name="report-reason" value="antagonistic" />
+						<label for="antagonistic">Antagonistic/Uncharitable/Unkind</label>
+					</div>
+					<div>
+						<input type="radio" id="boo-outgroup" name="report-reason" value="boo-outgroup" />
+						<label for="boo-outgroup">Boo Outgroup</label>
+					</div>
+					<div>
+						<input type="radio" id="build-consensus" name="report-reason" value="build-consensus" />
+						<label for="build-consensus">Attempting to speak for the whole forum or build consensus</label>
+					</div>
+					<div>
+						<input type="radio" id="quality-contribution" name="report-reason" value="quality-contribution" />
+						<label for="quality-contribution">Actually a quality contribution</label>
+					</div>
+					<div>
+						<input type="radio" id="other" name="report-reason" value="other" />
+						<label for="other">Other</label>
+					</div>
+					<input autocomplete="off" maxlength="100" id="reason-field" class="form-control b2">
 				</div>
 				<div class="modal-footer">
 					<button class="btn btn-link text-muted" data-bs-dismiss="modal">Cancel</button>