add popup when password does not exist

static/index.html

@@ -107,6 +107,21 @@
                     </form>
                 </article>
             </dialog>
+
+            <dialog id="password-ne">
+                <article>
+                    <header>Password does not exist</header>
+
+                    <p>
+                        The password you requested may have expired, been viewed
+                        before or never even existed in the first place.
+                    </p>
+
+                    <form method="dialog">
+                        <button type="submit">Close</button>
+                    </form>
+                </article>
+            </dialog>
         </main>
     </body>
 </html>

static/index.js

@@ -122,6 +122,7 @@ function showError(error) {
 
   errorMessage.value = error;
   errorDialog.showModal();
+  console.error(error);
 }
 
 function init() {
@@ -185,23 +186,51 @@ function init() {
   });
 }
 
-function confirmViewPassword() {
+async function confirmViewPassword(params) {
   const confirmDialog = document.querySelector("dialog#confirm-view");
   const confirm = document.querySelector("button#confirm-view");
+  const loadingDialog = document.querySelector("dialog#loading");
+  const passwordNEDialog = document.querySelector("dialog#password-ne");
 
+  try {
+    loadingDialog.showModal();
+
+    const res = await fetch(`/api/password/${params.get("id")}`, {
+      method: "HEAD",
+    });
+    console.log(res.status);
+    if (res.status == 404) {
+      loadingDialog.close();
+      passwordNEDialog.showModal();
+      console.log("Return");
+
+      return;
+    }
+
+    if (!res.ok) {
+      const msg = await res.text();
+      throw new Error(
+        `Failed to check if password exists: ${res.status}: ${msg}`,
+      );
+    }
+  } catch (error) {
+    showError(error);
+  } finally {
+  }
+
+  loadingDialog.close();
   confirmDialog.showModal();
 
   confirm.addEventListener("click", (ev) => {
     confirmDialog.close();
-    viewPassword();
+    viewPassword(params);
   });
 }
 
-async function viewPassword() {
+async function viewPassword(params) {
   const viewDialog = document.querySelector("dialog#view");
   const password = document.querySelector("textarea#password");
   const loadingDialog = document.querySelector("dialog#loading");
-  const params = new URLSearchParams(window.location.search);
 
   try {
     loadingDialog.showModal();
@@ -232,7 +261,8 @@ async function viewPassword() {
 window.addEventListener("load", () => {
   const query = window.location.search;
   if (query.trim() != "") {
-    confirmViewPassword();
+    const params = new URLSearchParams(window.location.search);
+    confirmViewPassword(params);
   }
 
   init();