From 1ee8ae89b10e7eb2c95a9c7145581d5051953e42 Mon Sep 17 00:00:00 2001
From: Alex Booker <alexbooker@fastmail.im>
Date: Fri, 14 Aug 2015 16:35:54 +0100
Subject: [PATCH] added simple client-side password generator

---
 js/passwordGenerator.js | 29 +++++++++++++++++++++++++++++
 password.html           | 38 ++++++++++++++++++++++++++++----------
 2 files changed, 57 insertions(+), 10 deletions(-)
 create mode 100644 js/passwordGenerator.js

diff --git a/js/passwordGenerator.js b/js/passwordGenerator.js
new file mode 100644
index 00000000..da85dcf0
--- /dev/null
+++ b/js/passwordGenerator.js
@@ -0,0 +1,29 @@
+var passwordGenerator = (function() {
+  return {
+    generatePassword: function (options) {
+      var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXTZ";
+      var lowercase = "abcdefghiklmnopqrstuvwxyz";
+      var numbers = "0123456789";
+      var punct = ".,-/#!$%^&*;:{}=-_`~()]";
+      var candidates = '';
+      if (options.includeUppercaseChars) {
+        candidates += uppercase;
+      }
+      if (options.includeLowercaseChars) {
+        candidates += lowercase;
+      }
+      if (options.includeNumbers) {
+        candidates += numbers;
+      }
+      if (options.includePunctuationChars) {
+        candidates += punct;
+      }
+      var result = "";
+      for (var i = 0; i < options.passwordLength; i++) {
+        var randomNum = Math.floor(Math.random() * candidates.length);
+        result += candidates.substring(randomNum, randomNum + 1);
+      }
+      return result;
+    }
+  };
+})();
diff --git a/password.html b/password.html
index 6d4ddbe2..757a8043 100644
--- a/password.html
+++ b/password.html
@@ -30,31 +30,31 @@
         <div class="input-group">
           <input type="text" class="form-control" id="password-input" readonly>
           <span class="input-group-btn">
-            <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-refresh"></span>          Generate Another</button>
+            <button class="btn btn-default" id="generate-password-button" type="button"><span class="glyphicon glyphicon-refresh"></span>          Generate Another</button>
           </span>
         </div>
       </div>
       <div class="form-group">
         <label>Password Length:</label>
-        <select class="form-control">
-          <option value="">4</option>
+        <select id="password-length" class="form-control">
+          <option value="4">4</option>
         </select>
       </div>
       <div class="form-group collapse" id="advancedOptions">
         <label>
-          <input type="checkbox" checked>
+          <input type="checkbox" id="include-uppercase-chars-checkbox" checked>
           Upper-case
         </label>
         <label>
-          <input type="checkbox" checked>
+          <input type="checkbox" id="include-lowercase-chars-checkbox" checked>
           Lower-case
         </label>
         <label>
-          <input type="checkbox" checked>
+          <input type="checkbox" id="include-digits-checkbox" checked>
           Digits
         </label>
         <label>
-          <input type="checkbox">
+          <input type="checkbox" id="include-special-chars-checkbox">
           Special
         </label>
       </div>
@@ -65,10 +65,28 @@
   </div>
   <script src="js/jquery-1.11.2.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
+  <script src="js/passwordGenerator.js"></script>
   <script>
-    $(function() {
-      $("#password-input").val("Password123");
-    });
+    (function() {
+      'use strict';
+      function getOptions() {
+        return {
+          passwordLength: $("#password-length").val(),
+          includeUppercaseChars: $("#include-uppercase-chars-checkbox").is(":checked"),
+          includeLowercaseChars: $("#include-lowercase-chars-checkbox").is(":checked"),
+          includeNumbers: $("#include-digits-checkbox").is(":checked"),
+          includePunctuationChars: $("#include-special-chars-checkbox").is(":checked"),
+        }
+      };
+      function outputGeneratedPassword() {
+        var password = passwordGenerator.generatePassword(getOptions());
+        $("#password-input").val(password);
+      }
+      $(function() {
+          outputGeneratedPassword();
+          $("#generate-password-button").click(outputGeneratedPassword);
+      });
+    }());
   </script>
 </body>
 </html>