Implemented 'custom forms' to replace individual scripts for deposit and supply forms

app/static/js/custom_form.js

@@ -1,15 +1,15 @@
 document.addEventListener("DOMContentLoaded", () => {
     // elements
-    let depositForm = document.getElementById("depositform");
+    let customForm = document.getElementById("customform");
     let statusInfo = document.getElementById("statusinfo");
-    let depositSubmitButton = document.getElementById("depositsubmitbtn");
+    let submitButton = document.getElementById("submitbtn");
     // event listener for deposit form
     // this implements a custom submit method
-    depositForm.addEventListener("submit", (event) => {
+    customForm.addEventListener("submit", (event) => {
-        depositSubmitButton.disabled = true;
+        submitButton.disabled = true;
         event.preventDefault(); // Don't do the default submit action!
         let xhr = new XMLHttpRequest();
-        let formData = new FormData(depositForm);
+        let formData = new FormData(customForm);
         xhr.addEventListener("load", (event) => {
             status_ = event.target.status;
             response_ = event.target.responseText;
@@ -28,7 +28,7 @@ document.addEventListener("DOMContentLoaded", () => {
             statusInfo.innerText = "An error occured. Redirecting in 5 seconds...";
             window.setTimeout(() => { window.location.replace("/") }, 5000);
         })
-        xhr.open("POST", "/api/deposit");
+        xhr.open("POST", customForm.action);
         xhr.send(formData);
     });
 });

app/static/js/supply.js

@@ -1,39 +0,0 @@
-document.addEventListener("DOMContentLoaded", () => {
-    // elements
-    let supplyDescriptionElement = document.getElementById("supplydescription");
-    let supplyPriceElement = document.getElementById("supplyprice");
-    let supplyFormElement = document.getElementById("supplyform");
-    let statusInfoElement = document.getElementById("statusinfo");
-    let supplySubmitButton = document.getElementById("supplysubmitbtn");
-    // custom submit method
-    supplyFormElement.addEventListener("submit", (event) => {
-        supplySubmitButton.disabled = true;
-        event.preventDefault(); // Don't do the default submit action!
-        if (isNaN(parseFloat(supplyPriceElement.value)) || supplyDescriptionElement.value == "") {
-            statusInfoElement.innerText = "Please enter a description and price."
-            supplySubmitButton.disabled = false;
-        }
-        let xhr = new XMLHttpRequest();
-        let formData = new FormData(supplyFormElement);
-        xhr.addEventListener("load", (event) => {
-            status_ = event.target.status;
-            response_ = event.target.responseText;
-            if (status_ == 200 && response_ == "success") {
-                statusInfoElement.innerText = "Success.";
-                window.location.replace("/");
-            }
-            else {
-                statusInfoElement.classList.add("errortext");
-                statusInfoElement.innerText = "An error occured.";
-                window.setTimeout(() => { window.location.reload() }, 5000);
-            }
-        })
-        xhr.addEventListener("error", (event) => {
-            statusInfoElement.classList.add("errortext");
-            statusInfoElement.innerText = "An error occured.";
-            window.setTimeout(() => { window.location.reload() }, 5000);
-        })
-        xhr.open("POST", "/api/supply");
-        xhr.send(formData);
-    });
-});

app/templates/deposit.html

@@ -12,13 +12,13 @@
 {% endblock %}
 
 {% block content %}
-<form id="depositform" class="flex flex-column flex-center appform gap-1rem">
+<form id="customform" class="flex flex-column flex-center appform gap-1rem" action="/api/deposit">
     {% csrf_token %}
     <h1 class="formheading">{% translate "Deposit" %}</h1>
     <div class="flex forminput">
         <span>{% translate "Amount" %} {{ currency_suffix }}:</span>
         <span>
-            <input type="number" name="depositamount" id="depositamount" class="keyboard-input" max="9999.99" min="1.00" step="0.01" autofocus>
+            <input type="number" name="depositamount" class="keyboard-input" max="9999.99" min="1.00" step="0.01" autofocus required>
         </span>
     </div>
     <div id="statusinfo"></div>
@@ -28,9 +28,9 @@
     <script src="/static/js/simple-keyboard_configure.js"></script>
     <div class="flex-center buttons">
         <a href="/" class="button">{% translate "cancel" %}</a>
-        <input type="submit" id="depositsubmitbtn" class="button" value='{% translate "confirm" %}'>
+        <input type="submit" id="submitbtn" class="button" value='{% translate "confirm" %}'>
     </div>
 </form>
-<script src="/static/js/deposit.js"></script>
+<script src="/static/js/custom_form.js"></script>
 <script src="/static/js/autoreload.js"></script>
 {% endblock %}

app/templates/supply.html

@@ -9,28 +9,28 @@
 
 {% block content %}
 {% if user.is_superuser or user.allowed_to_supply %}
-<form id="supplyform" class="flex flex-column flex-center appform gap-1rem">
+<form id="customform" class="flex flex-column flex-center appform gap-1rem" action="/api/supply">
     {% csrf_token %}
     <h1 class="formheading">{% translate "Supply" %}</h1>
     <div class="flex forminput">
         <span>{% translate "Description" %}:</span>
         <span>
-            <input type="text" name="supplydescription" id="supplydescription" autofocus>
+            <input type="text" name="supplydescription" autofocus required>
         </span>
     </div>
     <div class="flex forminput">
         <span>{% translate "Price" %} ({{ currency_suffix }}):</span>
         <span>
-            <input type="number" name="supplyprice" id="supplyprice" max="9999.99" min="1.00" step="0.01">
+            <input type="number" name="supplyprice" max="9999.99" min="1.00" step="0.01" required>
         </span>
     </div>
     <div id="statusinfo"></div>
     <div class="buttons">
         <a href="/" class="button">{% translate "cancel" %}</a>
-        <input type="submit" id="supplysubmitbtn" class="button" value='{% translate "submit" %}'>
+        <input type="submit" id="submitbtn" class="button" value='{% translate "submit" %}'>
     </div>
 </form>
-<script src="/static/js/supply.js"></script>
+<script src="/static/js/custom_form.js"></script>
 <script src="/static/js/custom_number_input.js"></script>
 {% else %}
 <div class="flex flex-center">