Implement addRequest in UI

- addRequest modal
  - Error box inside addRequest modal
- Generic message modal
- URL validation - same code as server
- Update /api/addRequest to get requester from session
- Fix return of requests.addRequest() for already requested
- Make requests.addRequest() return 201 when created

public/main.js

@@ -34,18 +34,75 @@ function updateTable() {
 	getRequests(count,allRequests);
 }
 
+function addRequestErr(msg) {
+	document.getElementById('addRequestError').style.display = "inline-block";
+	document.getElementById('addRequestError').innerText = msg;
+}
+
+function addRequestErrReset() {
+	document.getElementById('addRequestError').style.display = "none";
+	document.getElementById('addRequestError').innerText = "";
+}
+
+function showMessage(msg) {
+	document.getElementById("messageModalText").innerText = msg;
+	document.getElementById("modalBackground").style.display = "flex";
+	document.getElementById("messageModal").style.display = "block";
+}
+
+function closeMessageModal() {
+	document.getElementById("modalBackground").style.display = "none";
+	document.getElementById("messageModal").style.display = "none";
+}
+
 function openAddRequestModal() {
-	document.getElementById("addRequestModalBackground").style.display = "flex";
+	document.getElementById("modalBackground").style.display = "flex";
+	document.getElementById("addRequestModal").style.display = "block";
 }
 
 function closeAddRequestModal() {
-	document.getElementById("addRequestModalBackground").style.display = "none";
+	document.getElementById("modalBackground").style.display = "none";
+	document.getElementById("addRequestModal").style.display = "none";
+}
+
+const validUrlRegexes = [
+    /^https:\/\/www\.youtube\.com\/watch\?v=[a-zA-Z0-9_-]{11}$/
+];
+function validateAndSubmitRequest() {
+	addRequestErrReset();
+	var url = document.getElementById("addRequestUrl").value;
+	var validUrl = false;
+    for (var regex of validUrlRegexes) {
+        if (regex.test(url)) {
+            validUrl = true;
+            break;
+        }
+    }
+    if (!validUrl) {
+		addRequestErr("Invalid URL");
+		return;
+	}
+	fetch("/api/addRequest", { method: 'POST', body: new URLSearchParams({
+		url: url
+	})})
+		.then(response => {
+			if (!response.ok) {
+				response.text().then(addRequestErr);
+				return;
+			}
+			closeAddRequestModal();
+			updateTable();
+			document.getElementById("addRequestUrl").value = "";
+			response.text().then(showMessage);
+		});
 }
 
 updateTable();
 
 document.addEventListener("keydown", function onEvent(event) {
     if (event.key === "Escape") {
+        closeMessageModal();
         closeAddRequestModal();
     }
 });
+document.getElementById("modalBackground").addEventListener("click", (e) => { if (e.target === e.currentTarget) closeAddRequestModal();});

public/style.css

@@ -14,6 +14,13 @@ a:hover {
 	color: #fff;
 }
 
+.error {
+    padding: 0.25em 0.5em;
+    margin: 1em;
+    display: none;
+    background-color: #f00c;
+}
+
 #topbar {
 	padding: 0.25em 0.5em;
 	position: absolute;
@@ -84,9 +91,11 @@ div#nav-userpic {
 	text-align: right;
 }
 
-#addRequestModalBackground {
+#modalBackground {
 	display: none;
 	position: fixed;
+	align-items: center;
+	justify-content: center;
 	z-index: 1;
 	top: 0;
 	left: 0;
@@ -94,11 +103,10 @@ div#nav-userpic {
 	height: 100%;
 	background-color: #444;
 	background-color: #444a;
-	align-items: center;
-	justify-content: center;
 }
 
-#addRequestModal {
+.modal {
+	display: none;
 	position: relative;
 	padding: 1em;
 	margin: 2em;
@@ -108,11 +116,12 @@ div#nav-userpic {
 	box-shadow: 0px 5px 20px black;
 }
 
-#addRequestModal h1 {
-	margin-top: 0;
+.modal h1 {
+	margin: 0;
 }
 
 #addRequestInputContainer {
+	margin-top: 1em;
 	display: flex;
 	justify-content: center;
 }
@@ -123,13 +132,13 @@ div#nav-userpic {
 	margin: 0 5px;
 }
 
-#addRequestModalClose {
+.modalClose {
 	position: absolute;
 	top: 0;
 	right: 0.5em;
 	font-size: 150%;
 }
 
-#addRequestModalClose a {
+.modalClose a {
 	text-decoration: none;
 }