Implement `busy` message type for forms

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "3.2.1",
+    "version": "3.3.0",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Florine W. Dekker",
     "license": "MIT",

src/main/js/Validation.ts

@@ -25,7 +25,7 @@ export function clearFormValidity(form: HTMLFormElement): void {
  */
 export function showMessageType(card: HTMLElement | HTMLFormElement,
                                 message?: string,
-                                type?: "error" | "info" | "success" | "warning"): void {
+                                type?: "busy" | "error" | "info" | "success" | "warning"): void {
     if (card instanceof HTMLFormElement) {
         const formCard = $(`article[data-status-for="${card.id}"]`);
         if (formCard == null) return;
@@ -34,13 +34,16 @@ export function showMessageType(card: HTMLElement | HTMLFormElement,
     }
     const output = $("output", card)!;
 
+    card.removeAttribute("aria-busy");
     card.classList.remove("hidden", "error", "info", "success", "warning");
 
     if (message == null || type == null) {
         card.classList.add("hidden");
         output.innerHTML = "";
     } else {
-        card.classList.add(type);
+        if (type === "busy") card.setAttribute("aria-busy", "true");
+        else card.classList.add(type);
+
         output.innerHTML = message;
     }
 }
@@ -54,6 +57,16 @@ export function clearMessageStatus(card: HTMLElement): void {
     showMessageType(card);
 }
 
+/**
+ * Shows a busy message in `card`, i.e. with a loading indicator.
+ *
+ * @param card the card to show `message` in
+ * @param message the message to show in `card`
+ */
+export function showMessageBusy(card: HTMLElement, message: string): void {
+    showMessageType(card, message, "busy");
+}
+
 /**
  * Shows an error message in `card`.
  *

src/test/index.html

@@ -119,7 +119,7 @@
         }
     });
 
-    validation.showMessageWarning($("#global-status-card"), ":D");
+    validation.showMessageBusy($("#global-status-card"), ":D");
 </script>
 </body>
 </html>