zxcvbn para medir fortaleza de la pass

Makefile

@@ -1,6 +1,9 @@
 all:
 	npm install
 	npm run build
+	mkdir -p dist/js
+	cp assets/zxcvbn.js dist/js
+	cp assets/zxcvbn-bootstrap-strength-meter.js dist/js
 	go get .
 	go build
 

README.md

@@ -1,16 +1,18 @@
 Set up a testing environment:
-
+```
 make deps
-make fixtures`
+make fixtures
 ```
 
-Run it:
+Build lowry and run it with the demo data:
 ```
 make all
 make demo
+```
 
 
 Now go to your browser, open http://localhost:8080 and you can login as:
+
 * Usuaria: user
 * Contraseña: foobar
 

assets/index.js

@@ -1,2 +1,5 @@
 import "bootstrap";
 import "./style.css";
+import $ from "jquery"
+window.jQuery = $;
+window.$ = $;

assets/zxcvbn-bootstrap-strength-meter.js

@@ -0,0 +1,73 @@
+//Requires zxcvbn.js and Bootstrap
+(function ($) {
+
+	$.fn.zxcvbnProgressBar = function (options) {
+
+		//init settings
+		var settings = $.extend({
+			passwordInput: '#Password',
+			userInputs: [],
+			ratings: ["Very weak", "Weak", "OK", "Strong", "Very strong"],
+			//all progress bar classes removed before adding score specific css class
+			allProgressBarClasses: "progress-bar-danger progress-bar-warning progress-bar-success progress-bar-striped active",
+			//bootstrap css classes (0-4 corresponds with zxcvbn score)
+			progressBarClass0: "progress-bar-danger progress-bar-striped active",
+			progressBarClass1: "progress-bar-danger progress-bar-striped active",
+			progressBarClass2: "progress-bar-warning progress-bar-striped active",
+			progressBarClass3: "progress-bar-success",
+			progressBarClass4: "progress-bar-success"
+		}, options);
+
+		return this.each(function () {
+			settings.progressBar = this;
+			//init progress bar display
+			UpdateProgressBar();
+			//Update progress bar on each keypress of password input
+			$(settings.passwordInput).keyup(function (event) {
+				UpdateProgressBar();
+			});
+		});
+
+		function UpdateProgressBar() {
+			var progressBar = settings.progressBar;
+			var password = $(settings.passwordInput).val();
+			if (password) {
+				var result = zxcvbn(password, settings.userInputs);
+				//result.score: 0, 1, 2, 3 or 4 - if crack time is less than 10**2, 10**4, 10**6, 10**8, Infinity.
+				var scorePercentage = (result.score + 1) * 20;
+				$(progressBar).css('width', scorePercentage + '%');
+
+				if (result.score == 0) {
+					//weak
+					$(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass0);
+					$(progressBar).html(settings.ratings[0]);
+				}
+				else if (result.score == 1) {
+					//normal
+					$(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass1);
+					$(progressBar).html(settings.ratings[1]);
+				}
+				else if (result.score == 2) {
+					//medium
+					$(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass2);
+					$(progressBar).html(settings.ratings[2]);
+				}
+				else if (result.score == 3) {
+					//strong
+					$(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass3);
+					$(progressBar).html(settings.ratings[3]);
+				}
+				else if (result.score == 4) {
+					//very strong
+					$(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass4);
+					$(progressBar).html(settings.ratings[4]);
+				}
+			}
+			else {
+				$(progressBar).css('width', '0%');
+				$(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass0);
+				$(progressBar).html('');
+			}
+		}
+	};
+})(jQuery);

package.json

@@ -20,6 +20,7 @@
   "devDependencies": {
     "autoprefixer": "^7.1.3",
     "css-loader": "^0.28.7",
+    "expose-loader": "^0.7.5",
     "extract-text-webpack-plugin": "^3.0.0",
     "style-loader": "^0.18.2",
     "webpack": "^3.5.5"

server/server.go

@@ -50,6 +50,8 @@ func Serve(addr string, l *ldap.Ldap, ldb *db.DB, usersAskRole []string) error {
 
 	r.HandleFunc("/bundle.js", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "dist/bundle.js") })
 	r.HandleFunc("/style.css", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "dist/style.css") })
+	r.HandleFunc("/js/zxcvbn.js", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "dist/js/zxcvbn.js") })
+	r.HandleFunc("/js/zxcvbn-bootstrap-strength-meter.js", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "dist/js/zxcvbn-bootstrap-strength-meter.js") })
 	r.Handle("/img/{img}", http.StripPrefix("/img/", http.FileServer(http.Dir("img"))))
 
 	return http.ListenAndServe(addr, r)

tmpl/footer.html

@@ -1,3 +1,2 @@
-    <script src="/bundle.js"></script>
   </body>
 </html>

tmpl/header.html

@@ -5,7 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="icon" type="image/png" href="/img/favicon_sd.png"/>
     <link rel="stylesheet" href="/style.css">
-
     <title>lowry</title>
+    <script src="/bundle.js"></script>
+
+    <script type="text/javascript" src="/js/zxcvbn.js"></script>
+    <script type="text/javascript" src="/js/zxcvbn-bootstrap-strength-meter.js"></script>
+
   </head>
   <body>

tmpl/password.html

@@ -1,6 +1,7 @@
 {{template "header.html"}}
 {{template "navbar.html" .}}
 
+
     <div class="container">
       <br />
 {{if eq .Data "PassChanged"}}
@@ -21,6 +22,9 @@
             <label for="password">Nueva contraseña:</label>
             <input type="password" class="form-control {{if eq .Data "SameOldPass"}}is-invalid{{end}}" id="password" name="password" placeholder="Contraseña">
                {{ if eq .Data "SameOldPass"}}<div class="invalid-feedback">Cuando dec&iacute;amos "cambiarla" nos refer&iacute;amos a... cambiarla ;)</div>{{end}}
+	    <div class="progress">
+		<div id="StrengthProgressBar" class="progress-bar"></div>
+	    </div>
           </div>
           <div class="form-group">
             <label for="password2">Repite la contraseña nueva:</label>
@@ -47,6 +51,15 @@
     }, false);
   }, false);
 }());
+
+window.onload = function() {
+  $(document).ready(function() {
+    $("#StrengthProgressBar").zxcvbnProgressBar({
+                              passwordInput: "#password",
+			      ratings: ["Muy d&eacute;bil", "D&eacute;bil", "OK", "Fuerte", "Muy buena!"]
+                              });
+  });
+}
 </script>
 
 {{template "footer.html"}}