Implement settings saving and clearing

src/app.scss

@@ -31,6 +31,10 @@ body {
   position: relative;
 }
 
+#generated-password {
+  background: $input-bg;
+}
+
 #password-bits {
   height: 1.5rem;
 

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>

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)
+    }
+  }
 })