Migration invitation usager et reset password agent au DSFR

app/javascript/application.js

@@ -2,7 +2,6 @@ require("@rails/ujs").start()
 require("turbolinks").start()
 import { PlacesInputs } from './components/places-inputs.js'
 import { Modal } from './components/modal';
-import { ShowHidePassword } from './components/show-hide-password.js';
 import { NameInitialsForm } from './components/name-initials-form';
 import DsfrNewPassword from "./components/dsfr-new-password";
 import './components/browser-detection';
@@ -14,7 +13,6 @@ import './stylesheets/print';
 new Modal();
 
 $(document).on('turbolinks:load', function() {
-  new ShowHidePassword();
   new PlacesInputs();
   new NameInitialsForm();
   DsfrNewPassword();

app/javascript/application_agent_config.js

@@ -1,7 +1,7 @@
 require("@rails/ujs").start()
 require("turbolinks").start()
+import { DsfrNewPassword } from "./components/dsfr-new-password";
 import { Modal } from './components/modal';
-import { ShowHidePassword } from './components/show-hide-password.js';
 import './components/browser-detection';
 import 'select2/dist/js/select2.min.js';
 import 'select2/dist/js/i18n/fr.js';
@@ -16,6 +16,7 @@ new Modal();
 new Select2Inputs();
 
 $(document).on('turbolinks:load', function () {
-  new ShowHidePassword();
+  DsfrNewPassword();
+
   new Clipboard();
 });

app/javascript/stylesheets/structure/_authentication.scss

@@ -40,15 +40,6 @@
   }
 }
 
-.toggle-password {
-  float: right;
-  margin-right: 1rem;
-  margin-top: -1.8rem;
-  position: relative;
-  z-index: 2;
-  cursor: pointer;
-}
-
 .france-connect-link {
   .hover {
     display: none;

app/views/common/form/_new_password_input.html.slim

@@ -1,8 +1,8 @@
 /# locals: (f:, hint: nil, password_label: nil)
 
-= f.dsfr_input_group :password, class: "fr-password fr-mt-2w", data: {component: "js_dsfr_new_password"}
+= f.dsfr_input_group :password, class: "fr-password", data: {component: "js_dsfr_new_password"}
   = f.dsfr_label_with_hint :password, class: "fr-label fr-password__label", hint: hint, label: password_label
-  .fr-input-wrap
+  .fr-input-wrap.fr-mt-0
     = f.password_field :password, class: "fr-input fr-password__input", required: "true", autocomplete: "new-password"
     = f.dsfr_error_message :password
   .fr-password__checkbox.fr-checkbox-group.fr-checkbox-group--sm

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

@@ -4,17 +4,13 @@
 - if @from_confirmation
   p.text-muted Pour finaliser votre inscription, veuillez définir un mot de passe.
 
-= simple_form_for resource, as: resource_name, url: password_path(resource_name), html: { method: :put } do |f|
-  = render "devise/shared/error_messages", resource: resource
-  = f.input :reset_password_token, as: :hidden
+= form_for resource, as: resource_name, url: password_path(resource_name), html: { method: :put }, builder: DsfrFormBuilder do |f|
+  = f.hidden_field :reset_password_token
   .form-group
-    = f.password_field :password, as: :password, label: "Mot de passe", class: "form-control", autocomplete: "new-password", required: true, id: "password"
-    span.fa.fa-fw.fa-eye.toggle-password role="button" tabindex="0"
-
-    = render "agents/mot_de_passes/new_password_hints"
+    = render "common/form/new_password_input", f: f
 
   .text-center
-    = f.submit "Enregistrer", class: "btn btn btn-primary"
+    = f.submit "Enregistrer", class: "fr-btn"
 
 - unless @from_confirmation
   - content_for :footer do

app/views/devise/passwords/new.html.slim

@@ -1,12 +1,10 @@
-= form_for resource, as: resource_name, url: password_path(resource_name) do |f|
+= form_for resource, as: resource_name, url: password_path(resource_name), builder: DsfrFormBuilder do |f|
   .text-center.w-75.m-auto
     h4.text-dark-50.text-center.mt-0.font-weight-bold Mot de passe oublié ?
     p.text-muted.mb-4 Entrez votre email pour recevoir un lien de réinitialisation de mot de passe
-  = render "devise/shared/error_messages", resource: resource
-  .form-group
-    = f.email_field :email, autofocus: true, required: true, placeholder: "[email protected]", class: "form-control"
-  .form-group.mb-0.text-center
-    = f.submit "Envoyer", class: "btn btn btn-primary"
+  = f.dsfr_email_field :email, label: "Adresse email", hint: "Format attendu : [email protected]", required: true, autofocus: true
+  .text-center
+    = f.submit "Envoyer", class: "fr-btn"
 
 - content_for :footer do
   = render "devise/shared/links"

app/views/users/invitations/edit.html.slim

@@ -4,26 +4,17 @@
   = render "users/rdv_wizard_steps/rdv_wizard_summary", rdv_wizard: @rdv_wizard if @rdv_wizard.present?
 
   .card-body
-    = simple_form_for resource, as: resource_name, url: invitation_path(resource_name), html: { method: :put } do |f|
+    = form_for resource, as: resource_name, url: invitation_path(resource_name), html: { method: :put }, builder: DsfrFormBuilder do |f|
       .rdv-text-align-center.w-75.m-auto
-      = render "devise/shared/error_messages", resource: resource
+      = render "devise/shared/dsfr_error_messages", resource: resource
       = f.hidden_field :invitation_token
-      .form-row
-        .col-md-6= f.input :first_name, placeholder: "Prénom"
-        .col-md-6= f.input :last_name, placeholder: "Nom"
-      .form-row
+      .fr-grid-row.fr-grid-row--gutters
+        .fr-col-md-6= f.dsfr_text_field :first_name, label: "Prénom"
+        .fr-col-md-6= f.dsfr_text_field :last_name, label: "Nom"
         - if resource.email.present?
-          .col-md-12= f.input :email, value: resource.email, disabled: true
+          .fr-col-md-12= f.dsfr_email_field :email, value: resource.email, disabled: true
         - else
-          .col-md-12= f.input :email, required: true
-      .form-row
-        .col-md-12= f.input :phone_number, as: :tel
-      .form-group
-        = f.label :password
-        = f.password_field :password, required: true, class: "form-control", id: "password", autocomplete: "new-password"
-        span.fa.fa-fw.fa-eye.toggle-password role="button" tabindex="0"
-        .form-text.small.rdv-color-text-mention-grey.mb-2
-          | Choisissez votre mot de passe
-
-        = render "agents/mot_de_passes/new_password_hints"
-      .rdv-text-align-center= f.button :submit, t("devise.invitations.edit.submit_button")
+          .fr-col-md-12= f.dsfr_email_field :email, required: true
+        .fr-col-md-12= f.dsfr_phone_field :phone_number, hint: "Saisissez un numéro à 10 chiffres de France métropole ou d’outre-mer, ou bien un numéro international avec le préfixe du pays."
+        .fr-col-md-12 = render "common/form/new_password_input", f: f
+      .rdv-text-align-center= f.submit "Enregistrer", class: "fr-btn"

spec/features/agents/account/agent_can_reset_his_password_spec.rb

@@ -15,11 +15,11 @@
     current_email.click_link("Changer")
     expect(page).to have_content("Définir mon mot de passe")
 
-    fill_in "password", with: "q1w2e3r4t5y6"
+    fill_in "Mot de passe", with: "q1w2e3r4t5y6"
     expect { click_on "Enregistrer" }.not_to change { agent.reload.encrypted_password }
     expect(page).to have_content("Ce mot de passe fait partie d'une liste de mots de passe fréquemment utilisés")
 
-    fill_in "password", with: "correct H0rse battery! staple"
+    fill_in "Mot de passe", with: "correct H0rse battery! staple"
     expect { click_on "Enregistrer" }.to change { agent.reload.encrypted_password }
     expect(page).to have_content("Votre mot de passe a été édité avec succès")
     expect(page).to have_link("Vos organisations")
@@ -36,7 +36,7 @@
     open_email(agent.email)
     current_email.click_link("Changer")
     expect(page).to have_content("Définir mon mot de passe")
-    fill_in "password", with: "correct H0rse battery! staple"
+    fill_in "Mot de passe", with: "correct H0rse battery! staple"
     expect { click_on "Enregistrer" }.to change { agent.reload.encrypted_password }
     expect(page).to have_content("Votre mot de passe a été édité avec succès")
     expect(page).to have_link("Vos organisations")