js ensured that location is obtained before submitting if geolink is activated

public/index.html

@@ -7,29 +7,32 @@
 <div id="root">
     <h1>Link Shortener</h1>
     <form id="form" action="/add" method="post" onsubmit="return validate()">
-        <label for="url">URL:</label><span class="mandatory">*</span>
+        <label for="URL">URL:</label><span class="mandatory">*</span>
         <input type="text" name="url" id="URL" value="https://example.com" required><br><br>
 
         <label for="labels">GLink:</label><span class="mandatory">*</span>
         <label for="GLink" id="labels" class="glink">glink.zip/</label><input type="text" name="glink" id="GLink" class="glink" value="exampleWebsite">
 
-        <span role="alert" id="error" aria-hidden="true">Invalid entry</span>
+
 
         <br><br>
-        <label for="restricted">Geo-restricted?: </label><input type="checkbox" name="restricted" id="restricted">
+        <label for="restricted">Geo-restricted?: </label><input type="checkbox" name="restricted" id="restricted"><span id="loadingText" style="position: relative; left: 20px;"></span>
         <br><br>
-        <label for="radiusSelect" hidden="hidden" id="radiusLabel">Radius: </label><span id="mandatory-radius"class="mandatory" hidden="hidden">*</span>
-        <select name="radiusSelect" id="radiusSelect" hidden="hidden" required>
+        <label for="radiusSelect" hidden="hidden" id="radiusLabel">Radius: </label><span id="mandatory-radius" class="mandatory" hidden="hidden">*</span>
+        <select name="radiusSelect" id="radiusSelect" hidden="hidden">
             <option value="" selected disabled hidden>Choose a radius for your geo link</option>
             <option value="5">5 mi</option>
             <option value="10">10 mi</option>
             <option value="15">15 mi</option>
             <option value="20">20 mi</option>
         </select>
+        <span role="alert" id="error" aria-hidden="true">Invalid entry</span>
         <br><br>
+
         <input type="submit" id="button" value="Zip It!">
         <input type="hidden" name="latitude" id="latitude">
         <input type="hidden" name="longitude" id="longitude">
+
     </form>
     <hr>
     <div>

public/src/index.js

@@ -1,7 +1,34 @@
 // const submit = document.getElementById("button");
 mycheckbox = document.getElementById("restricted");
 mycheckbox.addEventListener('change',checkboxCallback);
+window.onload = function() {
+    if (mycheckbox.checked) {
+        document.getElementById("radiusLabel").hidden = false;
+        document.getElementById("mandatory-radius").hidden = false;
+        var radiusSelect = document.getElementById("radiusSelect");
+        radiusSelect.hidden = false;
+        radiusSelect.required = true;
+    }
+}
+
+var lat = document.getElementById("latitude");
+lat.setValue = function(newValue) {
+    this.value = newValue;
+    valueReceived();
+}
+
+function valueReceived() {
+    let load = document.getElementById("loadingText");
+    load.innerHTML = "Location retrieved";
+    load.style.color = "green";
 
+}
+function valueRequested() {
+    let load = document.getElementById("loadingText");
+    load.innerHTML = "Location requested. Please wait...";
+    load.style.color = "red";
+
+}
 function checkboxCallback(event) {
     const radiusLabel = document.getElementById("radiusLabel");
     const radiusSelect = document.getElementById("radiusSelect");
@@ -10,11 +37,14 @@ function checkboxCallback(event) {
         radiusLabel.hidden = false;
         mandatoryRadius.hidden = false;
         radiusSelect.hidden = false;
+        radiusSelect.required = true;
+        valueRequested();
         getLocation();
     } else {
         radiusLabel.hidden = true;
         mandatoryRadius.hidden = true;
         radiusSelect.hidden = true;
+        radiusSelect.required = false;
     }
 }
 
@@ -28,10 +58,11 @@ function getLocation() {
 }
 
 function showPosition(position) {
+    console.log("Gotten positions");
     console.log(position.coords.latitude);
     console.log(position.coords.longitude);
 
-    document.getElementById("latitude").value = position.coords.latitude;
+    document.getElementById("latitude").setValue(position.coords.latitude);
     document.getElementById("longitude").value = position.coords.longitude;
     console.log("done");
 }
@@ -39,6 +70,15 @@ function showPosition(position) {
 // submit.addEventListener('click', validate);
     function validate() {
         //e.preventDefault();
+        const checked = document.getElementById("restricted");
+        if (checked.checked) {
+            const lat = document.getElementById("latitude");
+            const long = document.getElementById("longitude");
+            if (lat.value === "" || long.value === "") {
+                /* wait */
+                return false
+            }
+        }
 
         const url = document.getElementById("URL");
         let glink = document.getElementById("GLink");

result.js

@@ -24,7 +24,6 @@ const GLINK_SIZE = 6;
 function getRandomGLink() {
 	let glink = "";
 	glink = newString(GLINK_SIZE);
-	//console.log(glink);
 	validateLink(glink);
 	return glink;
 }
@@ -90,6 +89,10 @@ const query = "INSERT INTO data (id, url, glink) VALUES (?, ?, ?)";
 app.post('/add', function(req, res) {
 	let input_url = req.body.url;
 	let input_glink = req.body.glink;
+	let input_checkbox = req.body.restricted;
+	let input_radius = req.body.radiusSelect;
+	let input_latitude = req.body.latitude;
+	let input_longitude = req.body.longitude;
 	console.log("Received query " + input_url + " and " + input_glink);
 	let currID = nextId();
 	if (input_glink === "") {