Optimize dark theme, fill out form using browser action icon popup

ochorocho · Jan 26, 2020 · adc1564 · adc1564
1 parent b320be1
commit adc1564
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 112 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,8 @@ Integrates sysPass password manager in Firefox
 
 Addon page: https://addons.mozilla.org/de/firefox/addon/syspass/
 
+Works with Firefox, Chrome and Edge Chromium
+
 ![syspass firefox integration](preview.gif "Logo Title Text 1")
 
 ## Configuration
@@ -23,10 +25,18 @@ Clone repository:
 
 ```
 git clone [email protected]:ochorocho/syspass-firefox.git
+cd syspass-firefox
+yarn install
 ```
 
 To use [web-ext](https://www.npmjs.com/package/web-ext) to run an instance of Firefox with the addon enabled run the following within the pugins directory:
 
 ```
-web-ext run
+yarn dev
+```
+
+Package addon:
+
+```
+yarn build
 ```
diff --git a/addon/manifest.json b/addon/manifest.json
@@ -9,7 +9,8 @@
   },
   "permissions": [
     "storage",
-    "*://*/*"
+    "*://*/*",
+    "tabs"
   ],
   "options_ui": {
     "page": "options.html"

diff --git a/addon/popup.html b/addon/popup.html
@@ -7,15 +7,10 @@
   </head>
 
 <body>
-  <div id="popup-content">
-    <div class="button beast">Frog</div>
-    <div class="button beast">Turtle</div>
-    <div class="button beast">Snake</div>
-    <div class="button reset">Reset</div>
-  </div>
-  <div id="error-content" class="hidden">
-    <p>Can't beastify this web page.</p><p>Try a different page.</p>
+  <div id="popup-list" class="popup-list">
+    No Items found
   </div>
+
   <script src="popup.js"></script>
 </body>
 

diff --git a/javascript/background.js b/javascript/background.js
@@ -49,10 +49,3 @@ chrome.runtime.onMessage.addListener(
             return true;
         }
     });
-
-/*
- * Add or remove the bookmark on the current page.
- */
-browser.browserAction.onClicked.addListener(function () {
-    console.log('##############');
-});
diff --git a/javascript/popup.js b/javascript/popup.js
@@ -1,100 +1,49 @@
 import "../scss/popup.scss"
 
-/**
- * CSS to hide everything on the page,
- * except for elements that have the "beastify-image" class.
- */
-const hidePage = `body > :not(.beastify-image) {
-                    display: none;
-                  }`;
+const gettingStoredSettings = browser.storage.local.get();
+let settings;
+const currentTab = browser.tabs.query({currentWindow: true, active: true})
 
 /**
- * Listen for clicks on the buttons, and send the appropriate message to
- * the content script in the page.
+ * Get addon settings
  */
-function listenForClicks() {
-  document.addEventListener("click", (e) => {
-
-    /**
-     * Given the name of a beast, get the URL to the corresponding image.
-     */
-    function beastNameToURL(beastName) {
-      switch (beastName) {
-        case "Frog":
-          return browser.extension.getURL("beasts/frog.jpg");
-        case "Snake":
-          return browser.extension.getURL("beasts/snake.jpg");
-        case "Turtle":
-          return browser.extension.getURL("beasts/turtle.jpg");
-      }
-    }
+gettingStoredSettings.then(function (data) {
+  let settingsSearch = Object.assign({ "method": 'account/search' }, data);
+  settings = data;
 
-    /**
-     * Insert the page-hiding CSS into the active tab,
-     * then get the beast URL and
-     * send a "beastify" message to the content script in the active tab.
-     */
-    function beastify(tabs) {
-      browser.tabs.insertCSS({code: hidePage}).then(() => {
-        let url = beastNameToURL(e.target.textContent);
-        browser.tabs.sendMessage(tabs[0].id, {
-          command: "beastify",
-          beastURL: url
-        });
+  currentTab.then((tabs) => {
+        let url = new URL(tabs[0].url);
+        chrome.runtime.sendMessage({contentScriptQuery: "accountSearch", text: url.hostname, settings: settingsSearch}, data => createList(data));
       });
-    }
+});
 
-    /**
-     * Remove the page-hiding CSS from the active tab,
-     * send a "reset" message to the content script in the active tab.
-     */
-    function reset(tabs) {
-      browser.tabs.removeCSS({code: hidePage}).then(() => {
+
+
+/**
+ * Transform results into a autocompleter readable format
+ *
+ * @param data
+ * @returns {[]}
+ */
+function createList(data) {
+  let popUpList = document.querySelector("#popup-list");
+  popUpList.innerHTML = '';
+
+  data.result.result.forEach(function (item) {
+    let link = document.createElement('div');
+    link.setAttribute('data-login', item.login);
+    link.innerText = item.name;
+    link.className = "popup-list__item";
+    link.addEventListener('click', function (e) {
+      currentTab.then((tabs) => {
         browser.tabs.sendMessage(tabs[0].id, {
-          command: "reset",
+          command: "fillOutForm",
+          login: item.login,
+          id: item.id,
         });
       });
-    }
+    })
 
-    /**
-     * Just log the error to the console.
-     */
-    function reportError(error) {
-      console.error(`Could not beastify: ${error}`);
-    }
-
-    /**
-     * Get the active tab,
-     * then call "beastify()" or "reset()" as appropriate.
-     */
-    if (e.target.classList.contains("beast")) {
-      browser.tabs.query({active: true, currentWindow: true})
-        .then(beastify)
-        .catch(reportError);
-    }
-    else if (e.target.classList.contains("reset")) {
-      browser.tabs.query({active: true, currentWindow: true})
-        .then(reset)
-        .catch(reportError);
-    }
+    popUpList.appendChild(link);
   });
 }
-
-/**
- * There was an error executing the script.
- * Display the popup's error message, and hide the normal UI.
- */
-function reportExecuteScriptError(error) {
-  document.querySelector("#popup-content").classList.add("hidden");
-  document.querySelector("#error-content").classList.remove("hidden");
-  console.error(`Failed to execute beastify content script: ${error.message}`);
-}
-
-/**
- * When the popup loads, inject a content script into the active tab,
- * and add a click handler.
- * If we couldn't inject the script, handle the error.
- */
-browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
-.then(listenForClicks)
-.catch(reportExecuteScriptError);
diff --git a/javascript/syspass.js b/javascript/syspass.js
@@ -4,8 +4,6 @@ import autocomplete from "autocompleter/autocomplete.js";
 const gettingStoredSettings = browser.storage.local.get();
 let settings, usernameField = '', passwordField = '';
 
-var currentBookmark;
-
 /**
  * Get addon settings
  */
@@ -15,6 +13,26 @@ gettingStoredSettings.then(function (data) {
     chrome.runtime.sendMessage({contentScriptQuery: "accountSearch", text: window.location.host, settings: settingsSearch}, data => selectLogin(data));
 });
 
+browser.runtime.onMessage.addListener(request => {
+    if(request.command === 'fillOutForm') {
+        let form = passwordField.closest('form');
+        let password = document.querySelector('input[type=password]');
+        let username = form.querySelectorAll('input[type="text"]')[0];
+        username.value = request.login;
+
+        spinner();
+        let settingsPassword = Object.assign({ "method": 'account/viewPass', id: request.id }, settings);
+        chrome.runtime.sendMessage({contentScriptQuery: "getPassword", settings: settingsPassword}, data => {
+            password.value = data.result.result.password;
+            document.getElementById('syspass-spinner').remove();
+        });
+
+
+
+    }
+    return Promise.resolve({response: "Login set ..."});
+});
+
 /**
  * Apply autocomplete
  *

diff --git a/scss/general/mixins.scss b/scss/general/mixins.scss
@@ -1,20 +1,38 @@
 @import "variables";
 
-@mixin mode($border: false) {
+@mixin font {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif
+}
+
+@mixin mode($border: false, $link: false) {
   background: $lightMenu;
   color: $lightText;
 
   @if $border {
     border: 1px solid $lightBorder;
   }
 
+  @if $link {
+    &:hover {
+      background: $lightMenuHover;
+    }
+  }
+
   @media (prefers-color-scheme: dark) {
     background: $darkMenu;
     color: $darkText;
 
     @if $border {
       border: 1px solid $darkBorder;
     }
+
+    @if $link {
+      cursor: pointer;
+
+      &:hover {
+        background: $darkMenuHover;
+      }
+    }
   }
 }
 

diff --git a/scss/options.scss b/scss/options.scss
@@ -1,10 +1,6 @@
 @import "general/variables";
 @import "general/mixins";
 
-@mixin font {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif
-}
-
 body {
   @include mode();
   @include font;

diff --git a/scss/popup.scss b/scss/popup.scss
@@ -3,12 +3,31 @@
 
 body {
   @include mode();
+  @include font;
 
   font-size: 0.9em;
   font-weight: 300;
-  margin: 0 0 40px;
+  margin: 0;
 }
 
+.popup-list {
+  padding: 10px 0 20px;
+  max-height: 50%;
+  overflow-y: auto;
+
+  &__item {
+    @include mode($link: true);
+
+    display: block;
+    padding: 5px 20px;
+    text-decoration: none;
+  }
+}
+
+
+
+
+
 %box {
   width: 50%;
   padding: 10px;

diff --git a/scss/syspass.scss b/scss/syspass.scss
@@ -35,5 +35,5 @@
 }
 
 .syspass-spinner {
-    @include spinner($success, $error);
+    @include spinner;
 }