[Fix #1285] Password strength is checked when user is typing

app/assets/stylesheets/new_design/common.scss

@@ -45,6 +45,14 @@ a {
   color: $blue;
 }
 
+em {
+  font-style: italic;
+}
+
+strong {
+  font-weight: bold;
+}
+
 .container {
   @include horizontal-padding($default-padding);
   max-width: $page-width + 2 * $default-padding;

app/assets/stylesheets/new_design/password_strength.scss

@@ -0,0 +1,34 @@
+@import "colors";
+@import "constants";
+
+$strength-bg: #EEEEEE;
+$weak-strength-color: $lighter-red;
+$medium-strength-color: $orange;
+$strong-strength-color: $green;
+
+.password-strength {
+  margin-top: -24px;
+  width: 100%;
+  min-height: 22px;
+  background: $strength-bg;
+  display: block;
+  margin-bottom: $default-spacer;
+  text-align: center;
+
+  &.strength-1 {
+    background: linear-gradient(to right, $weak-strength-color 0%, $weak-strength-color 25%, $strength-bg 25%, $strength-bg 100%);
+  }
+
+  &.strength-2 {
+    background: linear-gradient(to right, $medium-strength-color 0%, $medium-strength-color 50%, $strength-bg 50%, $strength-bg 100%);
+  }
+
+  &.strength-3 {
+    background: linear-gradient(to right, $medium-strength-color 0%, $medium-strength-color 75%, $strength-bg 75%, $strength-bg 100%);
+  }
+
+  &.strength-4 {
+    background: $strong-strength-color;
+    color: #FFFFFF;
+  }
+}

app/views/administrateurs/activate/new.html.haml

@@ -16,7 +16,14 @@
       = f.label :password do
         Mot de passe
 
-      = f.password_field :password, placeholder: 'Mot de passe'
+      = f.password_field :password, placeholder: 'Mot de passe', onKeyUp: "javascript:DS.checkPasswordStrength(event, 'strength-bar', 'submit-password');"
+
+      #strength-bar.password-strength
+         
+
+      .explication
+        %strong Aide :
+        Une courte phrase peut être un mot de passe très sécurisé.
 
       = f.hidden_field :reset_password_token, value: params[:token]
       = f.submit 'Continuer', class: 'button large primary expand', id: "submit-password", data: { disable_with: "Envoi..." }