brought session form validation in line with bootstrap styling

assets/js/_form-validity.js

@@ -0,0 +1,18 @@
+// Fetch all the forms we want to apply custom Bootstrap validation styles to
+let forms = document.querySelectorAll(".needs-validation");
+
+// Loop over them and prevent submission
+Array.prototype.slice.call(forms).forEach(function (form) {
+  form.addEventListener(
+    "submit",
+    function (event) {
+      if (!form.checkValidity()) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+
+      form.classList.add("was-validated");
+    },
+    false
+  );
+});

assets/js/app.js

@@ -15,6 +15,7 @@ import "../node_modules/bootstrap-icons/icons/box-arrow-right.svg"; // log out
 import "../node_modules/bootstrap-icons/icons/at.svg";
 import "../node_modules/bootstrap-icons/icons/key.svg";
 import "../node_modules/bootstrap-icons/icons/key-fill.svg";
+import "../node_modules/bootstrap-icons/icons/envelope.svg";
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
@@ -36,6 +37,7 @@ import "bootstrap/js/dist/dropdown";
 import "bootstrap/js/dist/alert";
 // Boostrap helpers
 import "./_hamburger-helper";
+import "./_form-validity";
 import { AlertRemover } from "./_alert-remover";
 
 // LiveSocket setup