From 2f0bb9e032825a28996559dafca57e7fe085cd37 Mon Sep 17 00:00:00 2001
From: Quantum <quantum2048@gmail.com>
Date: Thu, 29 Nov 2018 01:36:07 -0500
Subject: [PATCH] Implement settings saving and clearing

---
 src/app.scss   |  4 ++++
 src/index.html |  6 +++++-
 src/ui.js      | 34 ++++++++++++++++++++++++++++++++++
 3 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/app.scss b/src/app.scss
index f4377b7..2a4dfdb 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -31,6 +31,10 @@ body {
   position: relative;
 }
 
+#generated-password {
+  background: $input-bg;
+}
+
 #password-bits {
   height: 1.5rem;
 
diff --git a/src/index.html b/src/index.html
index 436e630..835b713 100644
--- a/src/index.html
+++ b/src/index.html
@@ -38,7 +38,7 @@
     <hr class="my-4">
     <div class="input-group mb-3">
       <input id="generated-password" class="form-control form-control-lg text-monospace" type="text"
-             placeholder="Click the Generate button to generate a new password">
+             placeholder="Click the Generate button to generate a new password" autocomplete="off" readonly>
       <div class="input-group-append">
         <button class="btn btn-success copy" type="button" id="copy-password"
                 data-clipboard-target="#generated-password">
@@ -137,6 +137,10 @@
     doing nothing but attacking you (unless you possess state secrets or something), so this is more than sufficient for
     your password. In the highly unlikely case that your password need more security than this offers, or perhaps you
     are just paranoid, adding an extra word would make the attack time thousandfold.</p>
+
+  <p class="lead">In practice, most real life systems use secure password hashing algorithms, captchas, and other
+    mechanisms to stop password cracking. It is unlikely that your attacker can reach anywhere close to a million
+    guesses a second, and so a 4 word password is probably sufficient for most non-critical accounts.</p>
 </div>
 
 </body>
diff --git a/src/ui.js b/src/ui.js
index 58cd350..6e887d2 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -8,6 +8,10 @@ $(() => {
   const $output = $('#generated-password')
   const $bits = $('#password-bits').find('div')
   const classes = 'bg-danger bg-warning bg-info bg-success'
+  const defaults = {
+    list: 'small',
+    count: 4,
+  }
 
   function bitClass (bits) {
     if (bits < 44) {
@@ -39,6 +43,15 @@ $(() => {
       .attr('aria-valuemax', maxBits)
   }
 
+  function loadSettings (settings) {
+    $('#word-list').val(settings.list || 'small')
+    $('#word-count').val(settings.count || 4)
+    $options.find(':checkbox').each(function () {
+      $(this).prop('checked', !!settings[this.name])
+    })
+    updateBitMeter()
+  }
+
   if (window.crypto && window.crypto.getRandomValues) {
     $('#too-old').hide()
 
@@ -48,8 +61,29 @@ $(() => {
       return false
     })
 
+    $('#save-settings').click(() => {
+      const options = $options.serializeObject()
+      window.localStorage.setItem('settings', JSON.stringify(options))
+      return false
+    })
+
+    $('#clear-settings').click(() => {
+      window.localStorage.removeItem('settings')
+      loadSettings(defaults)
+      return false
+    })
+
     $options.find('select, input').change(updateBitMeter)
     $options.find('input[type=nubmer]').on('input', updateBitMeter)
     updateBitMeter()
   }
+
+  const settings = window.localStorage.getItem('settings')
+  if (settings) {
+    try {
+      loadSettings(JSON.parse(settings))
+    } catch (e) {
+      console.log(e)
+    }
+  }
 })