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

app/views/devise/passwords/edit.html.haml

@@ -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') }

app/views/password_complexity/_bar.html.haml

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

app/views/password_complexity/_field.html.haml

@@ -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é.

app/views/password_complexity/_label.html.haml

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

app/views/password_complexity/show.turbo_stream.haml

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