update option page

extension/options.html

@@ -62,40 +62,8 @@
             </form>
         </div>
     </div>
-
-
-    <!--
-    <form class="pure-form pure-form-stacked">
-        <fieldset>
-            <legend>LessPass default options <span id="message" style="font-size: 80%;color: green;"></span>
-            </legend>
-            <label>Password Options</label>
-            <label for="lowercase" class="pure-checkbox">
-                <input id="lowercase" type="checkbox" checked> lowercase
-            </label>
-            <label for="uppercase" class="pure-checkbox">
-                <input id="uppercase" type="checkbox" checked> uppercase
-            </label>
-            <label for="numbers" class="pure-checkbox">
-                <input id="numbers" type="checkbox" checked> numbers
-            </label>
-            <label for="symbols" class="pure-checkbox">
-                <input id="symbols" type="checkbox" checked> symbols
-            </label>
-
-            <label for="passwordLength">Password Length</label>
-            <input id="passwordLength" type="number" value="12" min="6" max="64">
-
-            <label for="passwordCounter">Counter</label>
-            <input id="passwordCounter" type="number" value="1" min="1" max="100">
-
-            <button type="submit" class="pure-button pure-button-primary">Save options</button>
-        </fieldset>
-    </form>
-    -->
 </div>
 
-
 <script src="options.js"></script>
 </body>
 </html>

extension/options.js

@@ -0,0 +1,54 @@
+function displayMessage(message) {
+  document.getElementById('message').innerHTML = message;
+  setTimeout(() => {
+    document.getElementById('message').innerHTML = '';
+  }, 3000);
+}
+
+function saveOptions(e) {
+  e.preventDefault();
+  const defaultOptions = {
+    password: {
+      counter: document.querySelector('#passwordCounter').value,
+      length: document.querySelector('#passwordLength').value,
+      settings: []
+    }
+  };
+  const options = ['lowercase', 'uppercase', 'numbers', 'symbols'];
+
+  for (let i = 0; i < options.length; i++) {
+    if (document.querySelector(`#${options[i]}`).checked) {
+      defaultOptions.password.settings.push(options[i]);
+    }
+  }
+
+  chrome.storage.local.set({
+    lesspassStore: {
+      options: defaultOptions
+    }
+  });
+  displayMessage('(saved)');
+}
+
+function restoreOptions() {
+  chrome.storage.local.get('lesspassStore', value => {
+    if (value && 'options' in value.lesspassStore) {
+      const passwordInfo = value.lesspassStore.options.password;
+      document.querySelector('#passwordCounter').value = passwordInfo.counter;
+      document.querySelector('#passwordLength').value = passwordInfo.length;
+
+      document.querySelector('#lowercase').checked = false;
+      document.querySelector('#uppercase').checked = false;
+      document.querySelector('#numbers').checked = false;
+      document.querySelector('#symbols').checked = false;
+
+      for (let i = 0; i < passwordInfo.settings.length; i++) {
+        document.querySelector(`#${passwordInfo.settings[i]}`).checked = true;
+      }
+    }
+  });
+}
+
+document.addEventListener('DOMContentLoaded', restoreOptions);
+
+document.querySelector('form').addEventListener('submit', saveOptions);