DGNum/demarches-normaliennes
14
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

refactor(password-complexity): as component for better form integration

Browse source
This commit is contained in:
Colin Darie 2023-02-09 19:06:44 +01:00
parent 1f930dfe23
commit 4f7839039d
11 changed files with 101 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/password_complexity.scss
View file

@ -9,12 +9,10 @@ $complexity-color-3: #FFD000;
$complexity-color-4: $green;
.password-complexity {
margin-top: -24px;
width: 100%;
height: 12px;
background: $complexity-bg;
display: block;
margin-bottom: $default-spacer;
text-align: center;
border-radius: 8px;

53
app/components/password_complexity_component.rb Normal file
View file

@ -0,0 +1,53 @@
class PasswordComplexityComponent < ApplicationComponent
def initialize(length: nil, min_length: nil, score: nil, min_complexity: nil)
@length = length
@min_length = min_length
@score = score
@min_complexity = min_complexity
end
private
def filled?
!@length.nil? || !@score.nil?
end
def alert_classes
class_names(
"fr-alert": true,
"fr-alert--sm": true,
"fr-alert--info": !success?,
"fr-alert--success": success?
)
end
def success?
return false if !filled?
@length >= @min_length && @score >= @min_complexity
end
def complexity_classes
[
"password-complexity fr-mt-2w fr-mb-1w",
filled? ? "complexity-#{@length < @min_length ? @score / 2 : @score}" : nil
]
end
def title
return t(".title.empty") if !filled?
return t(".title.too_short", min_length: @min_length) if @length < @min_length
case @score
when 0..1
return t(".title.weakest")
when 2...@min_complexity
return t(".title.weak")
when @min_complexity...4
return t(".title.passable")
else
return t(".title.strong")
end
end
end

10
app/components/password_complexity_component/password_complexity_component.en.yml Normal file
View file

@ -0,0 +1,10 @@
---
en:
title:
empty: Enter a password.
too_short: Password must be at least %{min_length} characters long.
passable: Password is acceptable. You can validate… or improve your password.
strong: Congratulations! Password is strong and secure enough.
weak: Vulnerable password.
weakest: Very vulnerable password.
hint: A short sentence with punctuation can be a very secure password.

10
app/components/password_complexity_component/password_complexity_component.fr.yml Normal file
View file

@ -0,0 +1,10 @@
---
fr:
title:
empty: Inscrivez un mot de passe.
too_short: Le mot de passe doit faire au moins %{min_length} caractères.
passable: Mot de passe acceptable. Vous pouvez valider… ou améliorer votre mot de passe.
strong: Félicitations ! Mot de passe suffisamment fort et sécurisé.
weak: Mot de passe vulnérable.
weakest: Mot de passe très vulnérable.
hint: Une courte phrase avec ponctuation peut être un mot de passe très sécurisé.

6
app/components/password_complexity_component/password_complexity_component.html.haml Normal file
View file

@ -0,0 +1,6 @@
%div{ class: complexity_classes }
%div{ class: alert_classes }
%h3.fr-alert__title= title
- if !success?
%p= t(".hint")

33
app/views/devise/passwords/edit.html.haml
View file

@ -3,25 +3,28 @@
- content_for :footer do
= render partial: 'root/footer'
.container.devise-container
.one-column-centered
= devise_error_messages!
.fr-container.fr-my-5w
.fr-grid-row.fr-grid-row--center
.fr-col-lg-6
= devise_error_messages!
= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :patch, class: '' }) do |f|
= f.hidden_field :reset_password_token
= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :patch, class: '' }) do |f|
= f.hidden_field :reset_password_token
%fieldset.fr-mb-0.fr-fieldset{ aria: { labelledby: 'edit-password-legend' } }
%legend.fr-fieldset__legend#edit-password-legend
%h1.fr-h2= I18n.t('views.users.passwords.edit.subtitle')
%fieldset.fr-mb-0.fr-fieldset{ aria: { labelledby: 'edit-password-legend' } }
%legend.fr-fieldset__legend#edit-password-legend
%h1.fr-h2= I18n.t('views.users.passwords.edit.subtitle')
.fr-fieldset__element
= render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field,
opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: populated_resource.validate_password_complexity? ? 'turbo-input' : false, turbo_input_url_value: show_password_complexity_path }})
.fr-fieldset__element
= render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field,
opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: populated_resource.validate_password_complexity? ? 'turbo-input' : false, turbo_input_url_value: show_password_complexity_path }})
= render 'password_complexity/field', { form: f, test_complexity: populated_resource.validate_password_complexity? }
- if populated_resource.validate_password_complexity?
#password_complexity
= render PasswordComplexityComponent.new
.fr-fieldset__element
= render Dsfr::InputComponent.new(form: f, attribute: :password_confirmation, input_type: :password_field, opts: { autocomplete: 'new-password' })
.fr-fieldset__element
= render Dsfr::InputComponent.new(form: f, attribute: :password_confirmation, input_type: :password_field, opts: { autocomplete: 'new-password' })
= f.submit t('views.users.passwords.edit.submit'), id: 'submit-password', class: "fr-btn fr-btn--lg fr-mt-2w", data: { disable_with: t('views.users.passwords.edit.submit_loading') }
= f.submit t('views.users.passwords.edit.submit'), id: 'submit-password', class: "fr-btn fr-btn--lg fr-mt-2w", data: { disable_with: t('views.users.passwords.edit.submit_loading') }

1
app/views/password_complexity/_bar.html.haml
View file

@ -1 +0,0 @@
#complexity-bar.password-complexity{ class: "complexity-#{@length < @min_length ? @score/2 : @score}" }

9
app/views/password_complexity/_field.html.haml
View file

@ -1,9 +0,0 @@
= form.password_field :password, autofocus: true, autocomplete: 'off', placeholder: 'Mot de passe', data: { controller: test_complexity ? 'turbo-input' : false, turbo_input_url_value: show_password_complexity_path }
- if test_complexity
#complexity-bar.password-complexity
.explication
#complexity-label{ style: 'font-weight: bold' }
Inscrivez un mot de passe.
Une courte phrase avec ponctuation peut être un mot de passe très sécurisé.

16
app/views/password_complexity/_label.html.haml
View file

@ -1,16 +0,0 @@
#complexity-label{ style: 'font-weight: bold' }
- if @length > 0
- if @length < @min_length
Le mot de passe doit faire au moins #{@min_length} caractères.
- else
- case @score
- when 0..1
Mot de passe très vulnérable.
- when 2...@min_complexity
Mot de passe vulnérable.
- when @min_complexity...4
Mot de passe acceptable. Vous pouvez valider...<br> ou améliorer votre mot de passe.
- else
Félicitations ! Mot de passe suffisamment fort et sécurisé.
- else
Inscrivez un mot de passe.

5
app/views/password_complexity/show.turbo_stream.haml
View file

@ -1,5 +1,6 @@
= turbo_stream.replace 'complexity-label', partial: 'label'
= turbo_stream.replace 'complexity-bar', partial: 'bar'
= turbo_stream.update 'password_complexity' do
= render PasswordComplexityComponent.new(length: @length, min_length: @min_length, score: @score, min_complexity: @min_complexity)
- if @score < @min_complexity || @length < @min_length
= turbo_stream.disable 'submit-password'
- else

3
spec/controllers/password_complexity_controller_spec.rb
View file

@ -27,8 +27,7 @@ describe PasswordComplexityController, type: :controller do
it 'renders Javascript that updates the password complexity meter' do
subject
expect(response.body).to include('complexity-label')
expect(response.body).to include('complexity-bar')
expect(response.body).to include('Mot de passe vulnérable')
end
end
end