diff --git a/app/assets/stylesheets/new_design/common.scss b/app/assets/stylesheets/new_design/common.scss index c4a2230d2..e3b9975af 100644 --- a/app/assets/stylesheets/new_design/common.scss +++ b/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; diff --git a/app/assets/stylesheets/new_design/password_strength.scss b/app/assets/stylesheets/new_design/password_strength.scss new file mode 100644 index 000000000..341b13c10 --- /dev/null +++ b/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; + } +} diff --git a/app/views/administrateurs/activate/new.html.haml b/app/views/administrateurs/activate/new.html.haml index 6b9d0882d..241163c03 100644 --- a/app/views/administrateurs/activate/new.html.haml +++ b/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..." }