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

This commit is contained in:
Mathieu Magnin 2018-09-26 08:56:53 +02:00 committed by gregoirenovel
parent d1d8d9afe2
commit 7280b1f503
3 changed files with 50 additions and 1 deletions

View file

@ -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;

View file

@ -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;
}
}

View file

@ -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..." }