#1458 OptionsPage - AutoSubmit WIP

src/images/page-icons/trash.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="21" viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.17062 26.9436H16.942C18.7359 26.9436 19.901 25.8453 19.9851 24.0493L20.779 7.16631H22.0755C22.653 7.16631 23.103 6.70764 23.103 6.13015C23.103 5.55687 22.653 5.10781 22.0755 5.10781H1.0371C0.469216 5.10781 0 5.55687 0 6.13015C0 6.71725 0.469216 7.16631 1.0371 7.16631H2.33367L3.1275 24.0589C3.21375 25.8549 4.3575 26.9436 6.17062 26.9436ZM6.40218 24.8703C5.75319 24.8703 5.28936 24.3917 5.25631 23.7003L4.4592 7.16631H18.6033L17.8467 23.7003C17.8233 24.4034 17.3594 24.8703 16.6912 24.8703H6.40218ZM8.10069 22.9761C8.59452 22.9761 8.9128 22.6632 8.90108 22.2024L8.54202 9.91647C8.52819 9.45991 8.20569 9.15663 7.73319 9.15663C7.24359 9.15663 6.92742 9.46952 6.93913 9.92819L7.28859 22.2087C7.30242 22.6749 7.62702 22.9761 8.10069 22.9761ZM11.5526 22.9761C12.038 22.9761 12.3797 22.6674 12.3797 22.2109V9.92397C12.3797 9.46741 12.038 9.15663 11.5526 9.15663C11.0651 9.15663 10.733 9.46741 10.733 9.92397V22.2109C10.733 22.6674 11.0651 22.9761 11.5526 22.9761ZM15.0119 22.9761C15.4781 22.9761 15.8006 22.6749 15.8144 22.2087L16.1639 9.92819C16.1756 9.46952 15.8594 9.15663 15.3698 9.15663C14.8973 9.15663 14.5748 9.45991 14.561 9.92608L14.2116 22.2024C14.1998 22.6632 14.5181 22.9761 15.0119 22.9761ZM6.22875 5.89133H8.39155V3.45734C8.39155 2.85054 8.816 2.46124 9.46851 2.46124H13.6153C14.2678 2.46124 14.6923 2.85054 14.6923 3.45734V5.89133H16.8551V3.34859C16.8551 1.55656 15.7113 0.5 13.7695 0.5H9.31429C7.3725 0.5 6.22875 1.55656 6.22875 3.34859V5.89133Z" />
+</svg>

src/optionsPage/functions/domainModalFormSubmit.js

@@ -0,0 +1,84 @@
+//
+//  This file is part of the 2FAS Browser Extension (https://github.com/twofas/2fas-browser-extension)
+//  Copyright © 2023 Two Factor Authentication Service, Inc.
+//  Contributed by Grzegorz Zając. All rights reserved.
+//
+//  This program is free software: you can redistribute it and/or modify
+//  it under the terms of the GNU General Public License as published by
+//  the Free Software Foundation, either version 3 of the License, or
+//  any later version.
+//
+//  This program is distributed in the hope that it will be useful,
+//  but WITHOUT ANY WARRANTY; without even the implied warranty of
+//  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+//  GNU General Public License for more details.
+//
+//  You should have received a copy of the GNU General Public License
+//  along with this program. If not, see <https://www.gnu.org/licenses/>
+//
+
+/* global FormData */
+const S = require('../../selectors');
+const generateDomainsList = require('./generateDomainsList');
+const { loadFromLocalStorage, saveToLocalStorage } = require('../../localStorage');
+
+const isValidUrl = urlString => {
+  const urlPattern = new RegExp('^(https?:\\/\\/)?' +
+  '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
+  '((\\d{1,3}\\.){3}\\d{1,3}))' +
+  '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
+  '(\\?[;&a-z\\d%_.~+=-]*)?' +
+  '(\\#[-a-z\\d_]*)?$', 'i');
+  return !!urlPattern.test(urlString);
+}
+
+const domainModalFormSubmit = e => {
+  e.preventDefault();
+  e.stopPropagation();
+
+  const data = new FormData(e.target);
+  const domain = data.get('domain').trim();
+  const validation = document.querySelector(S.optionsPage.domainModal.validation);
+
+  if (!isValidUrl(domain)) {
+    validation.innerText = 'Domain is not correct'; // @TODO: i18n
+    return false;
+  }
+
+  const url = domain.replace(/^https?:\/\/(www)?/, '').replace(/\/$/, '');
+
+  return loadFromLocalStorage('autoSubmitExcludedDomains')
+    .then(storage => {
+      const autoSubmitExcludedDomains = storage.autoSubmitExcludedDomains;
+
+      if (autoSubmitExcludedDomains.includes(url)) {
+        validation.innerText = 'Domain exists on excluded list'; // @TODO: i18n
+        return false;
+      }
+
+      autoSubmitExcludedDomains.push(url);
+
+      return saveToLocalStorage({ autoSubmitExcludedDomains }, storage);
+    })
+    .then(res => {
+      if (res) {
+        validation.innerText = '';
+
+        const domainModal = document.querySelector(S.optionsPage.domainModal.element);
+        domainModal.classList.add('hidden');
+
+        generateDomainsList(res.autoSubmitExcludedDomains);
+      }
+    })
+    .catch(err => {
+      // @TODO: check err
+      console.log(err);
+    });
+
+  /*
+    @TODO:
+    ShowPush
+  */
+};
+
+module.exports = domainModalFormSubmit;

src/optionsPage/functions/generateDomainsList.js

@@ -23,20 +23,26 @@ const browser = require('webextension-polyfill');
 const { createElement, createSVGElement, createTextElement } = require('../../partials/DOMElements');
 const generateEmptyDomainRow = require('./generateEmptyDomainRow');
 const S = require('../../selectors');
-const disconnectSVG = require('../../images/page-icons/disconnect.svg');
+const trashSVG = require('../../images/page-icons/trash.svg');
 
 const generateDomainsList = list => {
   if (!list) {
     list = [];
   }
 
-  const tbody = document.querySelector(S.optionsPage.autoSubmit.list);
+  const newTbody = document.createElement('tbody');
+  newTbody.classList.add('js-twofas-auto-submit-excluded-domain-list');
+
+  const oldTbody = document.querySelector(S.optionsPage.autoSubmit.list);
+  oldTbody.parentNode.replaceChild(newTbody, oldTbody);
+
+  const tbody = newTbody;
 
   if (list.length === 0) {
     generateEmptyDomainRow(tbody);
   }
 
-  list.map(d => {
+  list.map(domain => {
     let t = {
       tr: null,
       td: [null, null],
@@ -46,11 +52,11 @@ const generateDomainsList = list => {
     };
 
     t.tr = createElement('tr');
-    t.tr.dataset.deviceId = d.domain;
+    t.tr.dataset.deviceId = domain;
 
     t.td[0] = createElement('td');
     t.td[0].setAttribute('data-before-i18n', browser.i18n.getMessage('domain'));
-    t.domain = createTextElement('span', d.domain);
+    t.domain = createTextElement('span', domain);
 
     t.td[0].appendChild(t.domain);
     t.tr.appendChild(t.td[0]);
@@ -58,10 +64,10 @@ const generateDomainsList = list => {
     t.td[1] = createElement('td');
     t.td[1].setAttribute('data-before-i18n', browser.i18n.getMessage('optionsRemoveFromExcluded'));
     t.button = createElement('button');
-    t.button.dataset.domain = d.domain;
+    t.button.dataset.domain = domain;
     t.button.addEventListener('click', () => { alert('elo'); });
 
-    t.svg = createSVGElement(disconnectSVG);
+    t.svg = createSVGElement(trashSVG);
     t.button.appendChild(t.svg);
 
     t.td[1].appendChild(t.button);
@@ -70,7 +76,7 @@ const generateDomainsList = list => {
     tbody.appendChild(t.tr);
     t = null;
 
-    return d;
+    return domain;
   });
 };
 

src/optionsPage/functions/index.js

@@ -19,6 +19,7 @@
 
 exports.confirmModalBackdropClick = require('./confirmModalBackdropClick');
 exports.domainModalBackdropClick = require('./domainModalBackdropClick');
+exports.domainModalFormSubmit = require('./domainModalFormSubmit');
 exports.generateDomainsList = require('./generateDomainsList');
 exports.generateDevicesList = require('./generateDevicesList');
 exports.generateEmptyDeviceRow = require('./generateEmptyDeviceRow');

src/optionsPage/functions/setModalsListeners.js

@@ -22,6 +22,7 @@ const hideConfirmModal = require('./hideConfirmModal');
 const hideDomainModal = require('./hideDomainModal');
 const confirmModalBackdropClick = require('./confirmModalBackdropClick');
 const domainModalBackdropClick = require('./domainModalBackdropClick');
+const domainModalFormSubmit = require('./domainModalFormSubmit');
 const showDomainModal = require('./showDomainModal');
 
 const setModalsListeners = () => {
@@ -40,6 +41,9 @@ const setModalsListeners = () => {
   const domainModal = document.querySelector(S.optionsPage.domainModal.element);
   domainModal.addEventListener('click', domainModalBackdropClick);
 
+  const domainModalForm = document.querySelector(S.optionsPage.domainModal.form);
+  domainModalForm.addEventListener('submit', domainModalFormSubmit);
+
   window.addEventListener('keydown', e => {
     if (e.code === 'Escape') {
       if (!confirmModal.classList.contains('hidden')) {

src/optionsPage/functions/showDomainModal.js

@@ -21,19 +21,7 @@ const S = require('../../selectors');
 
 const showDomainModal = () => {
   const modalEl = document.querySelector(S.optionsPage.domainModal.element);
-
   modalEl.classList.remove('hidden');
-
-  if (typeof func === 'function') {
-    const confirmEl = document.querySelector(S.optionsPage.domainModal.confirm);
-    const newConfirmEl = confirmEl.cloneNode(true);
-    confirmEl.parentNode.replaceChild(newConfirmEl, confirmEl);
-
-    newConfirmEl.addEventListener('click', () => {
-      // func();
-      modalEl.classList.add('hidden');
-    });
-  }
 };
 
 module.exports = showDomainModal;

src/optionsPage/styles/_content.scss

@@ -504,13 +504,13 @@
 
           &:hover {
             svg {
-              stroke: color.adjust($theme-color, $lightness: -10%);
+              fill: color.adjust($theme-color, $lightness: -10%);
             }
           }
 
           svg {
-            stroke: $theme-color;
-            transition: .2s stroke ease-in-out;
+            fill: $theme-color;
+            transition: .2s fill ease-in-out;
           }
         }
       }

src/selectors.js

@@ -45,7 +45,8 @@ const selectors = {
     domainModal: {
       element: '.js-twofas-domain-modal',
       cancel: '.js-twofas-domain-modal-cancel',
-      confirm: '.js-twofas-domain-modal-confirm'
+      form: '.js-twofas-domain-modal-form',
+      validation: '.js-twofas-domain-modal-validation'
     },
     shortcut: {
       edit: '.js-twofas-shortcut-edit',

src/views/optionsPageDomainModal.html

@@ -32,7 +32,7 @@
     <h2 data-i18n="optionsDomainModalHeader">Exclude new domain</h2>
     <p data-i18n="optionsDomainModalText">With the form below, you can add your domain to exclusion list, ensuring it won't be subjected to the auto submit mechanism.</p>
 
-    <form action="#">
+    <form action="#" class="js-twofas-domain-modal-form">
       <input
         data-i18n="optionsDomainInputPlaceholder"
         class="js-twofas-domain-input"
@@ -40,9 +40,10 @@
         name="domain"
         placeholder="Type in domain to exclude..."
       />
+      <p class="js-twofas-domain-modal-validation"></p>
 
       <div class="twofas-domain-modal-body-buttons">
-        <button type="submit" data-i18n="add" class="btn btn-clear js-twofas-domain-modal-confirm">Add</button>
+        <button type="submit" data-i18n="add" class="btn btn-clear">Add</button>
         <button data-i18n="cancel" class="btn btn-theme js-twofas-domain-modal-cancel">Cancel</button>
       </div>
     </form>