Merge pull request #75 from richardfrost/password

Password Support
FrostCo · Apr 17, 2018 · 68db429 · 68db429
2 parents 5c6c896 + ee537a3
commit 68db429
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 53 deletions.
diff --git a/manifest.json b/manifest.json
@@ -3,7 +3,7 @@
   "short_name": "Profanity Filter",
   "author": "phermium",
   "manifest_version": 2,
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Hide offensive words on the webpages you visit",
   "icons": {
     "16": "icons/icon16.png",

diff --git a/options.css b/options.css
@@ -25,6 +25,7 @@ button {
   border: 1px solid #aaa;
   border-radius: 5px;
   height: 26px;
+  padding-bottom: 1px;
 }
 
 /* Tab Styling */

diff --git a/options.html b/options.html
@@ -7,6 +7,13 @@
 
 <body>
 <!-- Tabs -->
+<div id="passwordContainer" class="hidden">
+  <label for="password">Password: </label>
+  <input type="password" id="password">
+  <input type="button" value="Submit" id="submitPassword"/>
+</div>
+
+<div id="main" class="visible">
 <div class="tab">
   <nav>
     <span class="tablinks active">Settings</span>
@@ -151,7 +158,14 @@ <h4>Import/Export/Restore Defaults</h4>
   <button id="export">Export</button>
   <div id="configNote" class="notes">Import/Export Config:</div>
   <textarea id="configText"></textarea>
+
+  <div id="setPasswordContainer">
+    <label for="setPassword">Password: </label>
+    <input type="password" id="setPassword">
+    <input type="button" value="Set" id="setPasswordBtn"/>
+  </div>
 </div>
+</div> <!-- #main -->
 
 <!-- Footer -->
 <div id="footer">

diff --git a/options.js b/options.js
@@ -1,3 +1,4 @@
+var authenticated = false;
 var config = {};
 var defaults = {
   "censorCharacter": "*",
@@ -6,6 +7,7 @@ var defaults = {
   "disabledDomains": [],
   "filterMethod": 0, // ["Censor", "Substitute", "Remove"];
   "globalMatchMethod": 3, // ["Exact", "Partial", "Whole", "Per-Word", "RegExp"]
+  "password": null,
   "preserveFirst": false,
   "preserveLast": false,
   "showCounter": true,
@@ -31,10 +33,22 @@ var defaultWords = {
 var filterMethods = ["Censor", "Substitute", "Remove"];
 var matchMethods = ["Exact Match", "Partial Match", "Whole Match", "Per-Word Match", "Regular Expression"];
 
+function activate(element) {
+  element.classList.add('active');
+}
+
 function arrayContains(array, string) {
   return (array.indexOf(string) > -1);
 }
 
+function authenticate() {
+  if (document.getElementById('password').value == config.password) {
+    authenticated = true;
+    hide(document.getElementById('passwordContainer'));
+    show(document.getElementById('main'));
+  }
+}
+
 function censorCharacter(event) {
   config.censorCharacter = document.getElementById('censorCharacterSelect').value;
   saveOptions(event, config);
@@ -77,6 +91,10 @@ function confirm(action) {
   }
 }
 
+function deactivate(element) {
+  element.classList.remove('active');
+}
+
 function domainAdd(event) {
   var domain = document.getElementById('domainText');
   if (domain.value != "") {
@@ -136,6 +154,11 @@ function globalMatchMethod(event) {
   saveOptions(event, config);
 }
 
+function hide(element) {
+  element.classList.remove('visible');
+  element.classList.add('hidden');
+}
+
 function importConfig(event) {
   try {
     var settings = JSON.parse(document.getElementById('configText').value);
@@ -189,15 +212,14 @@ function openTab(event) {
 
   // Set active tab
   oldTab = document.getElementsByClassName("tablinks active")[0];
-  oldTab.className = oldTab.className.replace(" active", "");
-  event.currentTarget.className += " active";
+  deactivate(oldTab);
+  activate(event.currentTarget);
 
   // Show active tab content
   oldTabContent = document.getElementsByClassName("tabcontent visible")[0];
-  oldTabContent.className = oldTabContent.className.replace(" visible", " hidden");
+  hide(oldTabContent);
   newTabName = event.currentTarget.innerText;
-  newTabContent = document.getElementById(newTabName);
-  newTabContent.className = newTabContent.className.replace(" hidden", " visible");
+  show(document.getElementById(newTabName));
 }
 
 // Restores form state to saved values from Chrome Storage
@@ -211,35 +233,42 @@ function populateOptions() {
       return false;
     }
 
+    // console.log('Password:', config.password, 'Authenticated:', authenticated); // DEBUG Password
+    if (config.password && !authenticated) {
+      // console.log('Prompt for password'); // DEBUG Password
+      hide(document.getElementById('main'));
+      show(document.getElementById('passwordContainer'));
+    }
+
     // Show/hide censor options and word substitutions based on filter method
     dynamicList(filterMethods, 'filterMethodSelect');
     document.getElementById('filterMethodSelect').selectedIndex = settings.filterMethod;
     switch (settings.filterMethod) {
       case 0:
-        document.getElementById('optionsCensor').classList.remove('hidden');
-        document.getElementById('optionsSubstitution').classList.add('hidden');
-        document.getElementById('globalMatchMethod').classList.remove('hidden');
-        document.getElementById('wordSubstitutions').classList.add('hidden');
+        show(document.getElementById('optionsCensor'));
+        hide(document.getElementById('optionsSubstitution'));
+        show(document.getElementById('globalMatchMethod'));
+        hide(document.getElementById('wordSubstitutions'));
         break;
       case 1:
-        document.getElementById('optionsCensor').classList.add('hidden');
-        document.getElementById('optionsSubstitution').classList.remove('hidden');
-        document.getElementById('globalMatchMethod').classList.remove('hidden');
-        document.getElementById('wordSubstitutions').classList.remove('hidden');
+        hide(document.getElementById('optionsCensor'));
+        show(document.getElementById('optionsSubstitution'));
+        show(document.getElementById('globalMatchMethod'));
+        show(document.getElementById('wordSubstitutions'));
         break;
       case 2:
-        document.getElementById('optionsCensor').classList.add('hidden');
-        document.getElementById('optionsSubstitution').classList.add('hidden');
-        document.getElementById('globalMatchMethod').classList.add('hidden');
-        document.getElementById('wordSubstitutions').classList.add('hidden');
+        hide(document.getElementById('optionsCensor'));
+        hide(document.getElementById('optionsSubstitution'));
+        hide(document.getElementById('globalMatchMethod'));
+        hide(document.getElementById('wordSubstitutions'));
         break;
     }
 
     // Hide per-word matching options if not selected globally (always show for Remove filter method)
     if (settings.globalMatchMethod == 3 || settings.filterMethod == 2) {
-      document.getElementById('wordMatchMethodContainer').classList.remove('hidden');
+      show(document.getElementById('wordMatchMethodContainer'));
     } else {
-      document.getElementById('wordMatchMethodContainer').classList.add('hidden');
+      hide(document.getElementById('wordMatchMethodContainer'));
     }
 
     // Settings
@@ -298,6 +327,21 @@ function saveOptions(event, settings) {
   });
 }
 
+function setPassword() {
+  var password = document.getElementById('setPassword');
+  if (password.value == '') {
+    chrome.storage.sync.remove('password');
+  } else {
+    chrome.storage.sync.set({password: password.value});
+    password.value = '';
+  }
+}
+
+function show(element) {
+  element.classList.remove('hidden');
+  element.classList.add('visible');
+}
+
 function substitutionAdd(event) {
   var word = document.getElementById('wordSelect').value;
   var sub = document.getElementById('substitutionText').value;
@@ -414,3 +458,6 @@ document.getElementById('domainRemove').addEventListener('click', domainRemove);
 document.getElementById('default').addEventListener('click', function() {confirm('restoreDefaults')} );
 document.getElementById('import').addEventListener('click', function() {confirm('importConfig')} );
 document.getElementById('export').addEventListener('click', exportConfig);
+// Password
+document.getElementById('submitPassword').addEventListener('click', authenticate);
+document.getElementById('setPasswordBtn').addEventListener('click', setPassword);
diff --git a/popup.css b/popup.css
@@ -89,6 +89,10 @@ input:checked + .slider:before {
   background-color: #ddd;
 }
 
+.disabled {
+  cursor: not-allowed !important;
+}
+
 .divider {
   border-bottom: solid #ccc 1px;
   width: 200px;

diff --git a/popup.html b/popup.html
@@ -1,29 +1,31 @@
 <html>
-    <head>
-        <link rel="stylesheet" type="text/css" href="popup.css" />
-    </head>
-    <body>
-      <div>
-        <image id="logo" src="icons/icon64.png"></image>
-        <label class="switch">
-            <input class="unselectable" id="domainFilter" type="checkbox" checked>
-            <span class="slider round"></span>
-          </label>
-      </div>
-      <div class="divider"></div>
-      <div class="filter">
-        <h4>Filter Method</h4>
-        <select id="filterMethodSelect"></select>
-      </div>
-        <div class="divider"></div>
-        <div class="options unselectable">
-          <h3 id="options">Options</h3>
-        </div>
-        <div id="footer">
-          <a id="gettingStarted" href="https://github.com/richardfrost/AdvancedProfanityFilter/wiki" target="_blank">Getting Started</a>
-          - <a href="https://github.com/richardfrost/AdvancedProfanityFilter/releases" target="_blank">Changelog</a>
-          - <a href="https://github.com/richardfrost/AdvancedProfanityFilter/issues" target="_blank">Support</a>
-        </div>
-    </body>
+<head>
+  <link rel="stylesheet" type="text/css" href="popup.css" />
+</head>
+<body tabindex="1">
+  <div>
+    <image id="logo" src="icons/icon64.png"></image>
+    <label class="switch">
+      <input class="unselectable" id="domainFilter" type="checkbox" checked>
+      <span id="domainToggle" class="slider round"></span>
+    </label>
+  </div>
+  <div class="divider"></div>
+  <div id="filterMethodContainer">
+    <div class="filter">
+      <h4>Filter Method</h4>
+      <select id="filterMethodSelect"></select>
+    </div>
+    <div class="divider"></div>
+  </div>
+  <div class="options unselectable">
+    <h3 id="options">Options</h3>
+  </div>
+  <div id="footer">
+    <a id="gettingStarted" href="https://github.com/richardfrost/AdvancedProfanityFilter/wiki" target="_blank">Getting Started</a>
+    - <a href="https://github.com/richardfrost/AdvancedProfanityFilter/releases" target="_blank">Changelog</a>
+    - <a href="https://github.com/richardfrost/AdvancedProfanityFilter/issues" target="_blank">Support</a>
+  </div>
+</body>
 </html>
-<script src="popup.js"></script>
+<script src="popup.js"></script>
diff --git a/popup.js b/popup.js
@@ -1,5 +1,7 @@
 var domain, disabledDomains;
 var filterMethods = ["Censor", "Substitute", "Remove"];
+var filterMethodContainer = document.getElementById('filterMethodContainer');
+var protected = false;
 
 ////
 // Helper functions
@@ -25,17 +27,29 @@ function removeFromArray(array, element) {
 
 ////
 // Functions for Popup
+function disable(element) {
+  element.disabled = true;
+  element.classList.add('disabled');
+}
+
 function disableDomain(domain) {
+
   if (!arrayContains(disabledDomains, domain)) {
     disabledDomains.push(domain);
     chrome.storage.sync.set({"disabledDomains": disabledDomains}, function() {
       if (!chrome.runtime.lastError) {
+        disable(document.getElementById('filterMethodSelect'));
         chrome.tabs.reload();
       }
     });
   };
 }
 
+function enable(element) {
+  element.disabled = false;
+  element.classList.remove('disabled');
+}
+
 // Remove all entries that disable the filter for domain
 function enableDomain(domain) {
   var foundMatch;
@@ -53,6 +67,7 @@ function enableDomain(domain) {
     chrome.storage.sync.set({"disabledDomains": newDisabledDomains}, function() {
       if (!chrome.runtime.lastError) {
         disabledDomains = newDisabledDomains;
+        enable(document.getElementById('filterMethodSelect'));
         chrome.tabs.reload();
       }
     });
@@ -70,7 +85,14 @@ function filterMethodSelect(event) {
 
 function populateOptions() {
   dynamicList(filterMethods, 'filterMethodSelect');
-  chrome.storage.sync.get({"disabledDomains": [], "filterMethod": 0}, function(storage) {
+  chrome.storage.sync.get({"disabledDomains": [], "filterMethod": 0, "password": null}, function(storage) {
+    if (storage.password && storage.password != '') {
+      protected = true;
+      disable(document.getElementById('domainFilter'));
+      disable(document.getElementById('domainToggle'));
+      disable(document.getElementById('filterMethodSelect'));
+    }
+
     chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
       disabledDomains = storage.disabledDomains;
       document.getElementById('filterMethodSelect').selectedIndex = storage.filterMethod;
@@ -79,13 +101,23 @@ function populateOptions() {
       var url = new URL(tab.url);
       domain = url.hostname;
 
+      // Restricted pages
+      if (url.protocol == 'chrome:' || url.protocol == 'about:' || domain == 'chrome.google.com') {
+        document.getElementById('domainFilter').checked = false;
+        disable(document.getElementById('domainFilter'));
+        disable(document.getElementById('domainToggle'));
+        disable(document.getElementById('filterMethodSelect'));
+        return false;
+      }
+
       // Set initial value for domain filter
       var domainRegex;
       for (var x = 0; x < disabledDomains.length; x++) {
         if (disabledDomains[x]) {
           domainRegex = new RegExp("(^|\.)" + disabledDomains[x]);
           if (domainRegex.test(domain)) {
             document.getElementById('domainFilter').checked = false;
+            disable(document.getElementById('filterMethodSelect'));
             break;
           }
         }
@@ -94,11 +126,13 @@ function populateOptions() {
   });
 }
 
-function toggleFilter() {
-  if (document.getElementById('domainFilter').checked) {
-    enableDomain(domain);
-  } else {
-    disableDomain(domain);
+function toggleFilter(event) {
+  if (!protected) {
+    if (document.getElementById('domainFilter').checked) {
+      enableDomain(domain);
+    } else {
+      disableDomain(domain);
+    }
   }
 }