show errors in demo

Signed-off-by: hrj <harshad.rj@gmail.com>

src/main/resources/index.html

@@ -8,25 +8,38 @@
   </style>
 
 <script>
+  function showError(errMessage) {
+    const resultDiv = document.getElementById("result")
+    const result = `
+      <p>Error: ${errMessage}</p>
+    `
+    resultDiv.innerHTML = result;
+  }
+
   async function loadCaptcha() {
     const levelInput = document.getElementById("levelInput").value
     const mediaInput = document.getElementById("mediaInput").value
     const typeInput = document.getElementById("typeInput").value
-    const resp = await fetch("/v1/captcha", {
+    fetch("/v1/captcha", {
        method: 'POST',
        body: JSON.stringify({level: levelInput, media: mediaInput, "input_type" : typeInput})
-    })
-    const respJson = await resp.json()
-    const id = respJson.id
-    const resultDiv = document.getElementById("result")
-    const result = `
-      <p>Id: ${id}</p>
-      <p><img src="/v1/media?id=${id}" /> </p>
-      <input type="text" id="answerInput" />
-      <button onClick="submitAnswer('${id}')">Submit</button>
-      <div id="answerResult" />
-    `
-    resultDiv.innerHTML = result;
+    }).then(async function(resp) {
+      const respJson = await resp.json()
+      if (resp.ok) {
+        const id = respJson.id
+        const resultDiv = document.getElementById("result")
+        const result = `
+          <p>Id: ${id}</p>
+          <p><img src="/v1/media?id=${id}" /> </p>
+          <input type="text" id="answerInput" />
+          <button onClick="submitAnswer('${id}')">Submit</button>
+          <div id="answerResult" />
+        `
+        resultDiv.innerHTML = result;
+      } else {
+        showError("Failed with response code: " + resp.status + " response: " + JSON.stringify(respJson))
+      }
+    }).catch(showError)
   }
   async function submitAnswer(id) {
     const ans = document.getElementById("answerInput").value;