add error view

static/index.html

@@ -113,5 +113,17 @@
                 </footer>
             </article>
         </dialog>
+
+        <dialog id="error">
+            <article>
+                <header t="error"></header>
+
+                <textarea readonly id="error-message"></textarea>
+
+                <footer>
+                    <button t="close" id="error-close"></button>
+                </footer>
+            </article>
+        </dialog>
     </body>
 </html>

static/js/main.js

@@ -1,4 +1,17 @@
-function initEnterPassword() {
+function initErrorDialog() {
+  const dialog = document.querySelector("dialog#error");
+  const message = document.querySelector("textarea#error-message");
+  const close = document.querySelector("button#error-close");
+
+  close.addEventListener("click", () => dialog.close());
+
+  return (err) => {
+    message.value = err.toString();
+    dialog.showModal();
+  };
+}
+
+function initEnterPassword(errorDialog) {
   const form = document.querySelector("form#enter-password");
   const fieldset = document.querySelector("fieldset#enter-password");
   const submit = document.querySelector("button#enter-password");
@@ -28,6 +41,8 @@ function initEnterPassword() {
 
       link.value = url.toString();
       dialog.showModal();
+    } catch (error) {
+      errorDialog(error);
     } finally {
       fieldset.disabled = false;
       submit.ariaBusy = "false";
@@ -50,7 +65,7 @@ function initEnterPassword() {
   });
 }
 
-async function confirmViewPassword() {
+async function confirmViewPassword(errorDialog) {
   const dialog = document.querySelector("dialog#confirm");
   const close = document.querySelector("button#confirm-close");
   const ok = document.querySelector("button#confirm-ok");
@@ -89,6 +104,8 @@ async function confirmViewPassword() {
       const password = await decryptPassword(encryptedPassword, key, iv);
 
       viewPassword(password);
+    } catch (error) {
+      errorDialog(error);
     } finally {
       close.disabled = false;
       ok.disabled = false;
@@ -113,6 +130,7 @@ async function viewPassword(password) {
 }
 
 window.addEventListener("load", () => {
-  initEnterPassword();
-  confirmViewPassword();
+  const errorDialog = initErrorDialog();
+  initEnterPassword(errorDialog);
+  confirmViewPassword(errorDialog);
 });

static/lang/en.json

@@ -16,6 +16,7 @@
   "not-found-reason": "The password you requested may have expired, been viewed before or never even existed in the first place.",
   "reveal-password": "Reveal Password",
   "reveal-password-once": "You may only reveal the password once",
+  "error": "Error",
   "copy": "Copy",
   "close": "Close",
   "ok": "OK"