make dialogs more consistant

static/api.js

@@ -0,0 +1,52 @@
+/** Upload a password to the server
+ * @param {string} password Encryptes password
+ * @param {Promise<number>} expiresIn Number of seconds in which the password will expire
+ */
+async function uploadPassword(password, expiresIn) {
+  const res = await fetch("/api/password", {
+    method: "POST",
+    body: JSON.stringify({
+      password: password,
+      "expires-in": expiresIn,
+    }),
+  });
+  if (!res.ok) {
+    const msg = await res.text();
+    throw new Error(`Failed to upload password: ${res.status}: ${msg}`);
+  }
+
+  const json = await res.json();
+  return json.id;
+}
+
+/** Check if the server knows about the password
+ * @param {string} id Password ID
+ * @returns {Promise<bool>}
+ */
+async function hasPassword(id) {
+  const res = await fetch(`/api/password/${id}`, {
+    method: "HEAD",
+  });
+  if (res.status == 404) {
+    return false;
+  }
+  if (res.status == 204) {
+    return true;
+  }
+
+  throw new Error(`Failed to check if password exists: ${res.status}: ${msg}`);
+}
+/** Get a password from the server
+ * @param {string} id Password ID
+ * @returns {Promise<string>}
+ */
+async function getPassword(id) {
+  const res = await fetch(`/api/password/${id}`);
+  if (!res.ok) {
+    const msg = await res.text();
+    throw new Error(`Failed to get password: ${res.status}: ${msg}`);
+  }
+
+  const json = await res.json();
+  return json.password;
+}

static/crypto.js

@@ -0,0 +1,108 @@
+const ALGORITHM_NAME = "AES-GCM";
+const ALGORITHM_LENGTH = 256;
+const IV_LENGTH = 16;
+
+const TEXT_ENCODER = new TextEncoder();
+const TEXT_DECODER = new TextDecoder();
+
+/** Coverts an ArrayBuffer into a Base64 encoded string
+ * @param {ArrayBuffer} buffer
+ * @returns {string}
+ */
+function bufferToBase64(buffer) {
+  let binary = "";
+  const bytes = new Uint8Array(buffer);
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+
+  return btoa(binary);
+}
+
+/** Converts a Base64 encoded string into an ArrayBuffer
+ * @param {string} base64
+ * @returns {ArrayBuffer}
+ */
+function base64ToBuffer(base64) {
+  const binaryString = atob(base64);
+  const len = binaryString.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+
+  return bytes.buffer;
+}
+
+/** Generates an key and encrypts "password" using it
+ * @param {Promise<string>} password
+ */
+async function encryptPassword(password) {
+  const iv = new Uint8Array(IV_LENGTH);
+  window.crypto.getRandomValues(iv);
+
+  const key = await window.crypto.subtle.generateKey(
+    {
+      name: ALGORITHM_NAME,
+      length: ALGORITHM_LENGTH,
+    },
+    true,
+    ["encrypt", "decrypt"],
+  );
+
+  const encryptedPassword = await window.crypto.subtle.encrypt(
+    {
+      name: ALGORITHM_NAME,
+      iv: iv,
+    },
+    key,
+    TEXT_ENCODER.encode(password),
+  );
+
+  const exportedKey = await window.crypto.subtle.exportKey("raw", key);
+
+  const encodedPassword = bufferToBase64(encryptedPassword);
+  const encodedKey = bufferToBase64(exportedKey);
+  const encodedIv = bufferToBase64(iv.buffer);
+
+  return {
+    password: encodedPassword,
+    key: encodedKey,
+    iv: encodedIv,
+  };
+}
+
+/** Decodes to key and iv and decryptes the password
+ * @param {string} password
+ * @param {string} key
+ * @param {string} iv
+ * @returns {Promise<string>}
+ */
+async function decryptPassword(password, key, iv) {
+  const decodedPassword = base64ToBuffer(password);
+  const decodedKey = base64ToBuffer(key);
+  const decodedIv = base64ToBuffer(iv);
+
+  const cryptoKey = await window.crypto.subtle.importKey(
+    "raw",
+    decodedKey,
+    {
+      name: ALGORITHM_NAME,
+      length: ALGORITHM_LENGTH,
+    },
+    true,
+    ["encrypt", "decrypt"],
+  );
+
+  const decryptedPassword = await window.crypto.subtle.decrypt(
+    {
+      name: ALGORITHM_NAME,
+      iv: decodedIv,
+    },
+    cryptoKey,
+    decodedPassword,
+  );
+
+  return TEXT_DECODER.decode(decryptedPassword);
+}

static/index.html

@@ -7,11 +7,11 @@
         <!--<link rel="icon" href="favicon.png" />-->
         <title>PassED</title>
 
+        <script src="/crypto.js"></script>
+        <script src="/api.js"></script>
         <script src="/index.js" defer></script>
         <link rel="stylesheet" href="/pico.min.css" />
     </head>
-
-    <body>
         <nav class="container-fluid">
             <ul>
                 <li>
@@ -27,14 +27,10 @@
         </nav>
 
         <main class="container">
-            <noscript>
-                <h1>This website requires JavaScript to function.</h1>
-            </noscript>
-
             <article>
-                <header>Enter your password</header>
+                <header>Enter Password</header>
 
-                <form id="password">
+                <form id="enter-password">
                     <label>
                         Password
                         <textarea name="password"></textarea>
@@ -54,61 +50,51 @@
                     <button type="submit">Generate URL</button>
                 </form>
             </article>
+        </main>
 
-            <dialog id="url">
+        <dialog id="url-dialog">
             <article>
                 <header>Password URL</header>
 
                 <fieldset role="group">
-                        <input id="password-url" readonly autofocus />
+                    <input id="url" readonly autofocus />
                     <button id="url-copy">Copy</button>
                 </fieldset>
 
-                    <button id="share-another">Share Another</button>
+                <footer>
+                    <button id="url-close">Close</button>
+                </footer>
             </article>
         </dialog>
 
-            <dialog id="confirm-view">
+        <dialog id="view-dialog">
             <article>
                 <header>View Password</header>
 
-                    <p class="pico-color-red-500">
+                <textarea readonly id="view-password" input></textarea>
-                        You may only reveal the password once.
+
-                    </p>
+                <footer>
-                    <button id="confirm-view">OK</button>
+                    <button id="view-close">Close</button>
+                </footer>
             </article>
         </dialog>
 
-            <dialog id="view">
+        <dialog id="confirm-view-dialog">
             <article>
-                    <header>Password</header>
+                <header>View Password</header>
 
-                    <textarea id="password" readonly></textarea>
+                <p>You may only reveal the password once.</p>
+
+                <footer>
+                    <button id="view-cancel" class="secondary">
+                        Cancel
+                    </button>
+                    <button id="view-confirm">Confirm</button>
+                </footer>
             </article>
         </dialog>
 
-            <dialog id="loading">
+        <dialog id="not-found">
-                <article>
-                    <header>Loading...</header>
-                </article>
-            </dialog>
-
-            <dialog id="error">
-                <article>
-                    <header>Error</header>
-
-                    <label>
-                        Something went horribly wrong..
-                        <textarea id="error-message" readonly></textarea>
-                    </label>
-
-                    <form method="get" action="/">
-                        <button type="submit">Close</button>
-                    </form>
-                </article>
-            </dialog>
-
-            <dialog id="password-ne">
             <article>
                 <header>Password does not exist</header>
 
@@ -117,11 +103,26 @@
                     before or never even existed in the first place.
                 </p>
 
-                    <form method="get" action="/">
+                <footer>
-                        <button type="submit">Close</button>
+                    <button id="not-found-close" class="secondary">Close</button>
-                    </form>
+                </footer>
+            </article>
+        </dialog>
+
+        <dialog id="loading-dialog">
+            <h1>Loading...</h1>
+        </dialog>
+
+        <dialog id="error-dialog">
+            <article>
+                <header>Error</header>
+
+                <textarea id="error" readonly></textarea>
+
+                <footer>
+                    <button id="error-reload">Reload the page</button>
+                </footer>
             </article>
         </dialog>
-        </main>
     </body>
 </html>

static/index.js

@@ -1,269 +1,199 @@
-/*
+const loadingDialog = {
-Welcome to the magic behind PassED!
+  dialog: document.querySelector("dialog#loading-dialog"),
-This file is responsible for encrypting passwords in the browser and to only send encrypted passwords to the server.
+  init() {
-
+    this.dialog.addEventListener("cancel", (ev) => {
-- https://git.1e99.eu/1e99/passed
-- https://discord.gg/NuGxJKtDKS
-*/
-
-const ALGORITHM_NAME = "AES-GCM";
-const ALGORITHM_LENGTH = 256;
-const IV_LENGTH = 16;
-
-const TEXT_ENCODER = new TextEncoder();
-const TEXT_DECODER = new TextDecoder();
-
-const ACTIVE_PAGE = "page-active";
-
-/** Coverts an ArrayBuffer into a Base64 encoded string
- * @param {ArrayBuffer} buffer
- * @returns {string}
- */
-function bufferToBase64(buffer) {
-  let binary = "";
-  const bytes = new Uint8Array(buffer);
-  const len = bytes.byteLength;
-  for (let i = 0; i < len; i++) {
-    binary += String.fromCharCode(bytes[i]);
-  }
-
-  return btoa(binary);
-}
-
-/** Converts a Base64 encoded string into an ArrayBuffer
- * @param {string} base64
- * @returns {ArrayBuffer}
- */
-function base64ToBuffer(base64) {
-  const binaryString = atob(base64);
-  const len = binaryString.length;
-  const bytes = new Uint8Array(len);
-  for (let i = 0; i < len; i++) {
-    bytes[i] = binaryString.charCodeAt(i);
-  }
-
-  return bytes.buffer;
-}
-
-/** Generates an key and encrypts "password" using it
- * @param {string} password
- */
-async function encryptPassword(password) {
-  const iv = new Uint8Array(IV_LENGTH);
-  window.crypto.getRandomValues(iv);
-
-  const key = await window.crypto.subtle.generateKey(
-    {
-      name: ALGORITHM_NAME,
-      length: ALGORITHM_LENGTH,
-    },
-    true,
-    ["encrypt", "decrypt"],
-  );
-
-  const encryptedPassword = await window.crypto.subtle.encrypt(
-    {
-      name: ALGORITHM_NAME,
-      iv: iv,
-    },
-    key,
-    TEXT_ENCODER.encode(password),
-  );
-
-  const exportedKey = await window.crypto.subtle.exportKey("raw", key);
-
-  const encodedPassword = bufferToBase64(encryptedPassword);
-  const encodedKey = bufferToBase64(exportedKey);
-  const encodedIv = bufferToBase64(iv.buffer);
-
-  return {
-    password: encodedPassword,
-    key: encodedKey,
-    iv: encodedIv,
-  };
-}
-
-/** Decodes to key and iv and decryptes the password
- * @param {string} password
- * @param {string} key
- * @param {string} iv
- */
-async function decryptPassword(password, key, iv) {
-  const decodedPassword = base64ToBuffer(password);
-  const decodedKey = base64ToBuffer(key);
-  const decodedIv = base64ToBuffer(iv);
-
-  const cryptoKey = await window.crypto.subtle.importKey(
-    "raw",
-    decodedKey,
-    {
-      name: ALGORITHM_NAME,
-      length: ALGORITHM_LENGTH,
-    },
-    true,
-    ["encrypt", "decrypt"],
-  );
-
-  const decryptedPassword = await window.crypto.subtle.decrypt(
-    {
-      name: ALGORITHM_NAME,
-      iv: decodedIv,
-    },
-    cryptoKey,
-    decodedPassword,
-  );
-
-  return TEXT_DECODER.decode(decryptedPassword);
-}
-
-function showError(error) {
-  const errorDialog = document.querySelector("dialog#error");
-  const errorMessage = document.querySelector("textarea#error-message");
-
-  errorMessage.value = error;
-  errorDialog.showModal();
-  console.error(error);
-}
-
-function init() {
-  const passwordForm = document.querySelector("form#password");
-  const loadingDialog = document.querySelector("dialog#loading");
-  const urlDialog = document.querySelector("dialog#url");
-  const urlCopy = document.querySelector("button#url-copy");
-  const passwordUrl = document.querySelector("input#password-url");
-  const shareAnother = document.querySelector("button#share-another");
-
-  passwordForm.addEventListener("submit", async (ev) => {
-    try {
-      loadingDialog.showModal();
       ev.preventDefault();
-      const data = new FormData(ev.target);
-
-      const encrypted = await encryptPassword(data.get("password"));
-
-      const res = await fetch("/api/password", {
-        method: "POST",
-        body: JSON.stringify({
-          password: encrypted.password,
-          "expires-in": parseInt(data.get("expires-in")),
-        }),
     });
-      if (!res.ok) {
+  },
-        const msg = await res.text();
+  show() {
-        throw new Error(`Failed to upload password: ${res.status}: ${msg}`);
+    this.dialog.showModal();
-      }
+  },
+  close() {
+    this.dialog.close();
+  },
+};
 
-      const json = await res.json();
+const errorDialog = {
-
+  dialog: document.querySelector("dialog#error-dialog"),
-      const params = new URLSearchParams();
+  error: document.querySelector("textarea#error"),
-      params.set("id", json.id);
+  reload: document.querySelector("button#error-reload"),
-      params.set("key", encrypted.key);
+  init() {
-      params.set("iv", encrypted.iv);
+    this.dialog.addEventListener("close", (ev) => {
-
+      window.location.reload();
-      const url = new URL(window.location);
-      url.search = params.toString();
-      passwordUrl.value = url.toString();
-
-      urlDialog.showModal();
-      passwordUrl.select();
-    } catch (error) {
-      showError(error);
-    } finally {
-      loadingDialog.close();
-    }
     });
 
-  loadingDialog.addEventListener("close", (ev) => ev.preventDefault());
+    this.reload.addEventListener("click", (ev) => {
-  shareAnother.addEventListener("click", (ev) => {
+      window.location.href = "/";
-    passwordForm.reset();
-    passwordUrl.value = "";
-    urlDialog.close();
     });
-  urlCopy.addEventListener("click", async (ev) => {
+  },
-    passwordUrl.select();
+  show(err) {
-    passwordUrl.setSelectionRange(0, 99999);
+    this.error.value = err;
-    await navigator.clipboard.writeText(passwordUrl.value);
+    console.error(err);
+    this.dialog.showModal();
+  },
+};
+
+const urlDialog = {
+  dialog: document.querySelector("dialog#url-dialog"),
+  url: document.querySelector("input#url"),
+  urlCopy: document.querySelector("button#url-copy"),
+  close: document.querySelector("button#url-close"),
+  init() {
+    this.dialog.addEventListener("close", (ev) => {});
+
+    this.urlCopy.addEventListener("click", (ev) => {
+      this.url.select();
+      this.url.setSelectionRange(0, 99999);
+      navigator.clipboard.writeText(this.url.value);
     });
-}
 
-async function confirmViewPassword(params) {
+    this.close.addEventListener("click", (ev) => {
-  const confirmDialog = document.querySelector("dialog#confirm-view");
+      this.dialog.close();
-  const confirm = document.querySelector("button#confirm-view");
+    });
-  const loadingDialog = document.querySelector("dialog#loading");
+  },
-  const passwordNEDialog = document.querySelector("dialog#password-ne");
+  show(url) {
+    this.url.value = url;
+    this.dialog.showModal();
+  },
+};
 
+const notFoundDialog = {
+  dialog: document.querySelector("dialog#not-found"),
+  close: document.querySelector("button#not-found-close"),
+  init() {
+    this.dialog.addEventListener("close", (ev) => {
+      window.location.search = "";
+    });
+
+    this.close.addEventListener("click", (ev) => {
+      window.location.search = "";
+    });
+  },
+  show() {
+    this.dialog.showModal();
+  },
+};
+
+const viewDialog = {
+  dialog: document.querySelector("dialog#view-dialog"),
+  password: document.querySelector("textarea#view-password"),
+  close: document.querySelector("button#view-close"),
+  init() {
+    this.dialog.addEventListener("close", (ev) => {
+      window.location.search = "";
+    });
+
+    this.close.addEventListener("click", (ev) => {
+      this.dialog.close();
+    });
+  },
+  show(password) {
+    this.password.value = password;
+    this.dialog.showModal();
+  },
+};
+
+const confirmViewDialog = {
+  dialog: document.querySelector("dialog#confirm-view-dialog"),
+  cancel: document.querySelector("button#view-cancel"),
+  confirm: document.querySelector("button#view-confirm"),
+  resolve: null,
+  reject: null,
+  init() {
+    this.dialog.addEventListener("cancel", (ev) => {
+      this.dialog.close();
+      this.resolve(false);
+    });
+
+    this.cancel.addEventListener("click", (ev) => {
+      this.dialog.close();
+      this.resolve(false);
+    });
+
+    this.confirm.addEventListener("click", (ev) => {
+      this.dialog.close();
+      this.resolve(true);
+    });
+  },
+  show() {
+    return new Promise((resolve, reject) => {
+      this.resolve = resolve;
+      this.reject = reject;
+      this.dialog.showModal();
+    });
+  },
+};
+
+async function viewPassword() {
   try {
-    loadingDialog.showModal();
+    loadingDialog.show();
 
-    const res = await fetch(`/api/password/${params.get("id")}`, {
+    const params = new URLSearchParams(window.location.search);
-      method: "HEAD",
+    const id = params.get("id");
-    });
+    const key = params.get("key");
-    console.log(res.status);
+    const iv = params.get("iv");
-    if (res.status == 404) {
-      loadingDialog.close();
-      passwordNEDialog.showModal();
-      console.log("Return");
 
+    const exists = await hasPassword(id);
+    if (!exists) {
+      notFoundDialog.show();
       return;
     }
 
-    if (!res.ok) {
+    const shouldView = await confirmViewDialog.show();
-      const msg = await res.text();
+    if (!shouldView) {
-      throw new Error(
+      // This is needed for the redirect, otherwise the user won't get redirected
-        `Failed to check if password exists: ${res.status}: ${msg}`,
+      setTimeout(() => (window.location.search = ""), 0);
-      );
+      return;
     }
+
+    const encrypted = await getPassword(id);
+    const password = await decryptPassword(encrypted, key, iv);
+
+    viewDialog.show(password);
   } catch (error) {
-    showError(error);
+    errorDialog.show(error);
   } finally {
-  }
-
     loadingDialog.close();
-  confirmDialog.showModal();
+  }
-
-  confirm.addEventListener("click", (ev) => {
-    confirmDialog.close();
-    viewPassword(params);
-  });
 }
 
-async function viewPassword(params) {
+const enterPassword = document.querySelector("form#enter-password");
-  const viewDialog = document.querySelector("dialog#view");
-  const password = document.querySelector("textarea#password");
-  const loadingDialog = document.querySelector("dialog#loading");
 
+enterPassword.addEventListener("submit", async (ev) => {
   try {
-    loadingDialog.showModal();
+    loadingDialog.show();
+    ev.preventDefault();
+    const data = new FormData(ev.target);
 
-    const res = await fetch(`/api/password/${params.get("id")}`);
+    const password = await encryptPassword(data.get("password"));
-    if (!res.ok) {
+    const id = await uploadPassword(
-      const msg = await res.text();
+      password.password,
-      throw new Error(`Failed to load password: ${res.status}: ${msg}`);
+      parseInt(data.get("expires-in")),
-    }
-
-    const json = await res.json();
-
-    const decrypted = await decryptPassword(
-      json.password,
-      params.get("key"),
-      params.get("iv"),
     );
 
-    password.value = decrypted;
+    const params = new URLSearchParams();
-    viewDialog.showModal();
+    params.set("id", id);
+    params.set("key", password.key);
+    params.set("iv", password.iv);
+
+    const url = new URL(window.location);
+    url.search = params.toString();
+    urlDialog.show(url.toString());
   } catch (error) {
-    showError(error);
+    errorDialog.show(error);
   } finally {
     loadingDialog.close();
   }
-}
-
-window.addEventListener("load", () => {
-  const query = window.location.search;
-  if (query.trim() != "") {
-    const params = new URLSearchParams(window.location.search);
-    confirmViewPassword(params);
-  }
-
-  init();
 });
+
+loadingDialog.init();
+errorDialog.init();
+urlDialog.init();
+notFoundDialog.init();
+viewDialog.init();
+confirmViewDialog.init();
+
+const query = window.location.search;
+if (query.trim() != "") {
+  viewPassword();
+}