improve pw change page

Gemfile

@@ -62,3 +62,5 @@ end
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 
 gem 'rest-client'
+
+gem 'zxcvbn-ruby', require: 'zxcvbn'

Gemfile.lock

@@ -202,6 +202,7 @@ GEM
     websocket-extensions (0.1.3)
     xpath (3.1.0)
       nokogiri (~> 1.8)
+    zxcvbn-ruby (0.1.2)
 
 PLATFORMS
   ruby
@@ -226,6 +227,7 @@ DEPENDENCIES
   tzinfo-data
   uglifier (>= 1.3.0)
   web-console (>= 3.3.0)
+  zxcvbn-ruby
 
 RUBY VERSION
    ruby 2.5.1p57

app/assets/javascripts/pwstrength.js

 function pwstrength() {
   var e = document.getElementById('pwscore');
+  var ok = document.getElementById('new_ok');
   e.innerHTML = ' ';
   var p = document.getElementById('new').value;
   var s = zxcvbn(p).score;
-  if (p.length < 8 && s > 1) {
-    s = 1;
+  if (p.length > 0) {
+    var cols = ['#f00', '#fa0', '#fe0', '#af0', '#0f0'];
+    var cont = [':\'(', ':(', ':/', ':)', ':D'];
+    e.style.backgroundColor = cols[s];
+    e.innerHTML = cont[s];
+  } else {
+    e.style.backgroundColor = "white";
+    e.innerHTML = "&nbsp;";
   }
-  var cols = ['#f00', '#fa0', '#fe0', '#af0', '#0f0'];
-  var cont = [':\'(', ':(', ':/', ':)', ':D'];
-  e.innerHTML = cont[s];
-  e.style.backgroundColor = cols[s];
+  if (s >= 3 && p.length > 9) {
+    ok.innerHTML = "&#x2714;"
+  } else {
+    ok.innerHTML = "&nbsp;"
+  }
+}
+
+function confirmcheck() {
+  var p = document.getElementById('new').value;
+  var c = document.getElementById('confirm').value;
+  if (p.length == 0 || p != c) {
+    document.getElementById('confirm_ok').innerHTML = "&nbsp;";
+  } else {
+    document.getElementById('confirm_ok').innerHTML = "&#x2714;";
+  }
+}
+
+window.addEventListener("load", loadPwstrength)
+function loadPwstrength() {
+  document.getElementById('new').addEventListener("keyup", pwstrength)
+  document.getElementById('new').addEventListener("change", pwstrength)
+  document.getElementById('new').addEventListener("keyup", confirmcheck)
+  document.getElementById('new').addEventListener("change",confirmcheck)
+  document.getElementById('confirm').addEventListener("keyup",  confirmcheck)
+  document.getElementById('confirm').addEventListener("change", confirmcheck)
 }

app/controllers/application_controller.rb

@@ -20,9 +20,13 @@ class ApplicationController < ActionController::Base
   helper_method :current_user
 
   def authorize
-    redirect_to '/login' unless current_user
-    redirect_to '/logout' if session_expired?
-    update_session_expiry
+    if !current_user
+      redirect_to '/login'
+    elsif session_expired?
+      redirect_to '/logout'
+    else
+      update_session_expiry
+    end
   end
 
   def session_expired?

app/controllers/password_controller.rb

-class PasswordController < ApplicationController
-  def policy?(pw)
-    pw.length >= 8
-  end
+require 'zxcvbn'
 
+class PasswordController < ApplicationController
   def update
     if params['new'] != params['confirm']
       flash[:notice] = :password_change_mismatch
       redirect_to '/password'
       return
     end
-    if !policy?(params['new'])
+    if params['new'].length < 10
+      flash[:notice] = :password_too_short
+      redirect_to '/password'
+      return
+    end
+    if Zxcvbn.test(params['new']).score < 3
       flash[:notice] = :password_policy_fail
       redirect_to '/password'
       return

app/views/password/show.html.erb

@@ -5,19 +5,19 @@
   <%= label_tag(:old, (t :old_pw)) %>
     </td><td>
   <%= password_field_tag(:old) %>
-    </td></tr><tr><td>
+    </td><td> </td><td> </td></tr><tr><td>
         <%= label_tag(:new, (t :new_pw)) %>
     </td><td>
-  <%= password_field_tag(:new, '', :onkeyup => "pwstrength()") %>
-    </td></tr><tr><td>
-      <%= t :pwstrength %>
-      </td><td>
-      <div id="pwscore" style="text-align:center;width:30px;margin-bottom:2px">&nbsp;</div>
+      <%= password_field_tag(:new) %>
+    </td><td>
+      <div id="new_ok">&nbsp;</div>
+    </td><td>
+      <div id="pwscore" style="text-align:center;width:30px;margin:0 10px 10px;padding:1px;">&nbsp;</div>
     </td></tr><tr><td>
   <%= label_tag(:confirm, (t :confirm_pw)) %>
     </td><td>
   <%= password_field_tag(:confirm) %>
-    </td></tr>
+    </td><td><div id='confirm_ok'></td><td></td></tr>
   </table>
   <p>
   <%= submit_tag(t :change_pw) %>

config/locales/de.yml

@@ -27,7 +27,8 @@ de:
   recovery_token_show: "Token anzeigen"
   pwstrength: "Passwortstärke"
   password_change_mismatch: "Die eingegebenen Passwörter stimmen nicht überein"
-  password_policy_fail: "Das gewählte Passwort ist zu kurz"
+  password_too_short: "Das gewählte Passwort ist zu kurz (mind. 10 Zeichen)"
+  password_policy_fail: "Das gewählte Passwort ist zu einfach zu erraten"
   password_change_failed: "Passwortänderung fehlgeschlagen"
   get_token_failed: "Token kann zur Zeit nicht angezeigt werden"
   clear_token_failed: "Token kann zur Zeit nicht "

config/locales/en.yml

@@ -25,7 +25,8 @@ en:
   recovery_token_show: "Show token"
   pwstrength: "Password strength"
   password_change_mismatch: "The passwords do not match"
-  password_policy_fail: "The password is too short"
+  password_policy_fail: "The password is too easy to guess"
+  password_too_short: "The password is too short (min 10 characters)"
   password_change_failed: "Password change failed"
   get_token_failed: "Failed to display token"
   clear_token_failed: "Failed to delete token"