Replace jQuery with vanilla JavaScript

sipa/static/js/contact-hints.js

@@ -1,28 +1,41 @@
-var hints = [];
-$.getJSON("/sipa/static/js/hints.json", function (raw_hints) {
-    hints = raw_hints.map(function (hint) {
-        return {
-            not_in_dorm: hint.not_in_dorm,
-            patterns: hint.patterns.map(function (pattern) {
-                return new RegExp(pattern, "i");
-            }),
-            hint: hint.hint
-        };
-    });
+let hints = [];
+
+fetch("static/js/hints.json").then(response => response.json()).then((rawHints) => {
+    hints = rawHints.map(({
+        not_in_dorm,
+        patterns,
+        hint
+    }) => ({
+        not_in_dorm,
+        patterns: patterns.map((pattern) => new RegExp(pattern, "i")),
+        hint
+    }));
 });
-$("#message").on("input", function () {
-    var applicable = hints.filter(function (hint) {
-        var contains = hint.patterns.some(function (pattern) {
-            return pattern.test($("#message").val())
-        });
-        var not_blacklisted = hint.not_in_dorm.every(function (dorm) {
-            return dorm !== $("#dormitory").val();
-        });
+
+
+const eMessage = document.getElementById("message");
+const eDormitory = document.getElementById("dormitory");
+const eHints = document.getElementById("hints");
+
+const lang = get_language();
+
+eMessage.addEventListener("input", (event) => {
+    const applicable = hints.filter((hint) => {
+        const contains = hint.patterns.some(
+            (pattern) => pattern.test(eMessage.value)
+        );
+        const not_blacklisted = hint.not_in_dorm.every(
+            (dorm) => dorm !== eDormitory.value
+        );
         return contains & not_blacklisted;
     });
-    $("#hints").empty();
-    applicable.forEach(function (hint) {
-        var hint_text = hint.hint[get_language()];
-        $("#hints").append("<div class='alert alert-warning'>" + hint_text + "</div>");
+
+    while (eHints.lastChild) {
+        eHints.removeChild(eHints.lastChild);
+    }
+    applicable.forEach((hint) => {
+        eHints.insertAdjacentHTML("beforeend",
+            `<div class='alert alert-warning'>${hint.hint[lang]}</div>`
+        );
     });
 });

sipa/static/js/register_identify.js

@@ -1,12 +1,21 @@
-function updateState() {
-    var swdd_tenant = !$("#no_swdd_tenant").prop("checked");
-    $("#tenant_number,[for=tenant_number]").toggle(swdd_tenant);
-    $("#tenant_number").prop("required", swdd_tenant);
-
-    var agdsn_history = $("#agdsn_history").prop("checked");
-    $("#previous_dorm,[for=previous_dorm]").toggle(agdsn_history);
-    $("#previous_dorm").prop("required", agdsn_history);
+function updateForm(target, invert, updateId, event) {
+    // Invert checked if invert is true (XOR)
+    const shouldBeVisible = target.checked !== invert;
+
+    const element = document.getElementById(updateId);
+    element.style.display = shouldBeVisible ? "block" : "none";
+    element.required = shouldBeVisible;
+
+    element.labels.forEach((label) => {
+        label.style.display = shouldBeVisible ? "block" : "none";
+    });
 }
-$("#no_swdd_tenant").change(updateState);
-$("#agdsn_history").change(updateState);
-updateState();
+
+const noSwddTenant = document.getElementById("no_swdd_tenant");
+noSwddTenant.addEventListener("change", updateForm.bind(undefined, noSwddTenant, true, "tenant_number"));
+
+const agdsnHistory = document.getElementById("agdsn_history");
+agdsnHistory.addEventListener("change", updateForm.bind(undefined, agdsnHistory, false, "previous_dorm"));
+
+updateForm(noSwddTenant, true, "tenant_number", undefined)
+updateForm(agdsnHistory, false, "previous_dorm", undefined)

sipa/templates/base.html

@@ -80,7 +80,6 @@
     <script type="application/json" id="locale">
         {{- get_locale() | string | tojson -}}
     </script>
-    <script defer src="{{ url_for("static", filename="js/jquery-2.1.1.min.js") }}"></script>
     <script defer src="{{ url_for("static", filename="js/bootstrap.bundle.min.js") }}"></script>
     <script defer src="{{ url_for("static", filename="js/statuspage.js") }}"></script>
     <script defer src="{{ url_for("static", filename="js/agdsn.js") }}"></script>