From 27419d2359409c053963fc66c6227be0104dd61b Mon Sep 17 00:00:00 2001
From: "F.W. Dekker" <f@fwdekker.com>
Date: Wed, 1 Dec 2021 22:00:21 +0100
Subject: [PATCH] Add input validation

---
 package.json          |  2 +-
 src/main/css/main.css |  8 ++++++++
 src/main/index.html   |  6 ++++++
 src/main/js/main.js   | 37 ++++++++++++++++++++++++++++++++-----
 4 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 5e63c7f..463a2f2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "debreviator",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "description": "Creates meaning by undoing your abbreviation.",
     "author": "F.W. Dekker",
     "browser": "dist/bundle.js",
diff --git a/src/main/css/main.css b/src/main/css/main.css
index 15b57f0..feebdde 100644
--- a/src/main/css/main.css
+++ b/src/main/css/main.css
@@ -1,3 +1,11 @@
+:root {
+    --error-color: red;
+}
+
 #debreviations {
     height: 20em;
 }
+
+#abbreviation-error {
+    color: var(--error-color);
+}
diff --git a/src/main/index.html b/src/main/index.html
index 19d2153..b2b1362 100644
--- a/src/main/index.html
+++ b/src/main/index.html
@@ -39,8 +39,14 @@
                     <input id="abbreviation" type="text" autofocus />
 
                     <button id="debreviate" type="button">Debreviate</button>
+                </div>
+            </div>
+            <br />
 
+            <div class="row">
+                <div class="column">
                     <label for="debreviations">Debreviations</label>
+                    <span id="abbreviation-error"></span>
                     <textarea id="debreviations" readonly></textarea>
                 </div>
             </div>
diff --git a/src/main/js/main.js b/src/main/js/main.js
index 7f7d75d..e62d2c7 100644
--- a/src/main/js/main.js
+++ b/src/main/js/main.js
@@ -22,9 +22,28 @@ doAfterLoad(() => {
 });
 
 doAfterLoad(() => {
+    const abbreviationInput = $("#abbreviation");
+    const abbreviationError = $("#abbreviation-error");
+    const debreviateButton = $("#debreviate");
+    const debreviationOutput = $("#debreviations");
+
+
+    const showError = (message) => {
+        if (message === undefined) {
+            abbreviationError.innerText = "";
+            debreviationOutput.classList.remove("hidden");
+        } else {
+            abbreviationError.innerText = message;
+            debreviationOutput.classList.add("hidden");
+        }
+    };
+
     const debreviate = () => {
-        const abbreviation = $("#abbreviation").value.trim();
-        if (abbreviation === "") return;
+        const abbreviation = abbreviationInput.value.trim();
+        if (abbreviation === "") {
+            showError("Abbreviation should be non-empty.");
+            return;
+        }
 
         const regex = new RegExp(abbreviation.split("").join(".*"));
 
@@ -45,11 +64,19 @@ doAfterLoad(() => {
                         )[0]
                 )
             )
-            .then(matches => $("#debreviations").value = matches.join("\n"));
+            .then(matches => {
+                if (matches.length === 0) {
+                    showError("No debreviations found.");
+                    return;
+                }
+
+                debreviationOutput.value = matches.join("\n");
+                showError();
+            });
     };
 
-    $("#debreviate").addEventListener("click", debreviate);
-    $("#abbreviation").addEventListener("keypress", event => {
+    debreviateButton.addEventListener("click", debreviate);
+    abbreviationInput.addEventListener("keypress", event => {
         if (event.key === "Enter") {
             debreviate();
             event.preventDefault();