Add add.html and add.js pages for adding secrets.

mulbc · Kamilcuk · Dec 4, 2023 · Dec 4, 2023 · Dec 4, 2023 · Dec 4, 2023
commit b1beef1da30e40710df91b9b538a9de02ef33766
diff --git a/add.html b/add.html
@@ -0,0 +1,75 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Vault for Chrome: Add secret</title>
+    <script
+      type="application/javascript"
+      src="browser-polyfill.min.js"
+    ></script>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <header class="header">
+      <div class="header__container">
+        <h1 class="h1 title">VaultPass</h1>
+        <nav role="navigation" class="menu" aria-label="Main Menu">
+          <ul class="menu__links">
+            <li>
+              <a href="/popup.html" class="link link--alt">
+                Keys
+              </a>
+            </li>
+            <li>
+              <a href="/add.html" class="link link--alt link--current" aria-current="page">
+                Add
+              </a>
+            </li>
+            <li>
+              <a href="/options.html" class="link link--alt">
+                Options
+              </a >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <main class="main">
+      <div role="alert" id="notify" aria-live="assertive"></div>
+      <div id="add">
+        <label for="vault-search">Add secret:</label>
+        <label class="label">
+          Directory:
+          <input type="text" class="input" list="dirsList" id="dirBox" />
+          <datalist id="dirsList"></datalist>
+        </label>
+        <label class="label">
+          Pattern matching url:
+          <input type="text" class="input" name="url" id="urlBox" />
+        </label>
+        <label class="label">
+          Username:
+          <input type="text" class="input" name="login" id="loginBox" />
+        </label>
+        <label class="label">
+          Password:
+          <input type="password" class="input" name="pass" id="passBox" />
+        </label>
+        <input type="submit" class="button" id="showPasswordButton" value="Show Password" />
+        <input
+            type="submit"
+            class="button button--primary"
+            value="Add login to vault"
+            id="addButton"
+            />
+      </div>
+    </main>
+
+    <script src="Notify.js"></script>
+    <script src="common.js"></script>
+    <script src="add.js"></script>
+  </body>
+</html>
diff --git a/add.js b/add.js
@@ -0,0 +1,131 @@
+/* eslint-disable no-console */
+/* global browser Notify storePathComponents */
+
+const notify = new Notify(document.querySelector('#notify'));
+
+async function mainLoaded() {
+    const tabs = await browser.tabs.query({
+        active: true,
+        currentWindow: true
+    });
+    for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
+        const tab = tabs[tabIndex];
+        if (tab.url) {
+            currentTabId = tab.id;
+            currentUrl = tab.url;
+            break;
+        }
+    }
+
+    document.getElementById('addButton').addEventListener('click', addButtonClick, false);
+    document.getElementById('showPasswordButton').addEventListener('click', showPasswordClick, false);
+
+    const vaultServer = document.getElementById('urlBox');
+    vaultServer.value = new URL(currentUrl).host;
+
+    try {
+        await populateDirectorySelection();
+    } catch (err) {
+        notify.clear().error(err.message);
+        return;
+    }
+
+    let first = 1;
+    let secretList = (await browser.storage.sync.get('secrets')).secrets || [];
+    if (secretList) {
+        try {
+            await querySecretsCallback(currentUrl, secretList[0], function(element, credentialsSets) {
+                if (credentialsSets) {
+                    const c = credentialsSets[0];
+                    document.getElementById('urlBox').value = element;
+                }
+            });
+        } catch (err) {
+            notify.clear().error(err.message);
+            return
+        }
+    }
+}
+
+async function populateDirectorySelection(vaultServerAddress, vaultToken,
+    policies, storePath) {
+    const fetchListOfSecretDirs =
+        await vaultApiCall('LIST', 'metadata', '', 'Fetching secrets directories');
+
+    let activeSecrets = (await browser.storage.sync.get('secrets')).secrets;
+    if (!activeSecrets) {
+        activeSecrets = [];
+    }
+
+    const availableSecrets = (await fetchListOfSecretDirs.json()).data.keys;
+    activeSecrets =
+        activeSecrets.filter((x) => availableSecrets.indexOf(x) !== -1);
+
+    const dirsList = document.getElementById('dirsList');
+    var first = 1;
+    for (const secret of activeSecrets) {
+        var option = document.createElement('option');
+        option.value = secret;
+        if (first) {
+            first = 0;
+            option.selected = true;
+            const dirBox = document.getElementById('dirBox')
+            dirBox.placeholder = secret;
+            dirBox.value = secret;
+        }
+        dirsList.appendChild(option);
+    }
+}
+
+async function addButtonClick() {
+    const dirBox = document.getElementById('dirBox').value;
+    const urlBox = document.getElementById('urlBox').value;
+    const loginBox = document.getElementById('loginBox').value;
+    const passBox = document.getElementById('passBox').value;
+    // verify input not empty. TODO: verify correct URL format.
+    if (urlBox.includes("/")) {
+        notify.error("Bad input, url has slash")
+        return
+    }
+    if (dirBox.length == 0 || urlBox.length == 0 || loginBox.length == 0 ||
+        passBox.length == 0) {
+        notify.error("Bad input, field is empty")
+        return
+    }
+    // get current value if exists
+    const passpath = dirBox + urlBox;
+    const resp = await vaultApiCall("GET", 'data', passpath, '')
+    const respjson = resp.ok ? await resp.json() : {};
+    const data = resp.ok ? respjson.data : {};
+    const cas = resp.ok ? respjson.data.metadata.version : 0;
+    const cur = resp.ok ? respjson.data.data : {};
+    const userkey = `username-vaultpass-${loginBox}`;
+    cur[userkey] = loginBox;
+    cur[`password-vaultpass-${passBox}`] = passBox;
+    const postdata = {
+        'data': cur,
+        'options': {
+            'cas': cas,
+        },
+    };
+    const postdatajson = JSON.stringify(postdata);
+    //notify.error(`cur=${cur} cas=${cas} data=${postdatajson}`);
+    const resp2 =
+        await vaultApiCall("POST", 'data', passpath,
+            `could not update value with ${postdatajson}`, postdata);
+
+    document.getElementById('loginBox').value = "";
+    document.getElementById('passBox').value = "";
+    notify.success(`Added entry ${userkey} to ${passpath}`);
+}
+
+function showPasswordClick() {
+    var x = document.getElementById("passBox");
+    if (x.type === "password") {
+        x.type = "text";
+    } else {
+        x.type = "password";
+    }
+}
+
+document.addEventListener('DOMContentLoaded', mainLoaded, false);
diff --git a/options.html b/options.html
@@ -17,14 +17,19 @@ <h1 class="h1 title">VaultPass</h1>
         <nav role="navigation" class="menu" aria-label="Main Menu">
           <ul class="menu__links">
             <li>
-              <a href="/popup.html" class="link link--alt" aria-current="page"
-                >Keys
+              <a href="/popup.html" class="link link--alt">
+                Keys
               </a>
             </li>
             <li>
-              <a href="/options.html" class="link link--alt link--current"
-                >Options</a
-              >
+              <a href="/add.html" class="link link--alt">
+                Add
+              </a>
+            </li>
+            <li>
+              <a href="/options.html" class="link link--alt link--current" aria-current="page">
+                Options
+              </a >
             </li>
           </ul>
         </nav>

diff --git a/popup.html b/popup.html
@@ -17,14 +17,20 @@ <h1 class="h1 title">VaultPass</h1>
         <nav role="navigation" class="menu" aria-label="Main Menu">
           <ul class="menu__links">
             <li>
-              <a
-                href="/popup.html"
-                class="link link--alt link--current"
-                aria-current="page"
-                >Keys
+              <a href="/popup.html" class="link link--alt link--current" aria-current="page">
+                Keys
+              </a>
+            </li>
+            <li>
+              <a href="/add.html" class="link link--alt">
+                Add
+              </a>
+            </li>
+            <li>
+              <a href="/options.html" class="link link--alt">
+                Options
               </a>
             </li>
-            <li><a href="/options.html" class="link link--alt">Options</a></li>
           </ul>
         </nav>
       </div>