💬 Feat: update reset password page (#44)

* 💬 Feat: update reset password page Update messages Fix invalid markup * 💄 Feat: move modal close button to the right * 💬 Feat: update text shown after email was sent
MTES-MCT · Oct 15, 2024 · 21cb18e · 21cb18e
1 parent 722ae9f
commit 21cb18e
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 25 deletions.
diff --git a/theme/df/login/login-reset-password.ftl b/theme/df/login/login-reset-password.ftl
@@ -6,14 +6,13 @@
     <#elseif section = "form">
 <div class="page">
     <div class="fr-container content-container">
-            <div class="bg-white card-container fr-p-5w">
-                <div class="fr-h4 text-align-left"> ${msg("resetPassword.title")}</div>
-                <div >${msg("resetPassword.info")}</div>
-                <form id="kc-reset-password-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+        <div class="bg-white card-container fr-p-5w">
+            <div class="fr-h4 text-align-left"> ${msg("resetPassword.title")}</div>
+            <div >${msg("resetPassword.info")}</div>
+            <form id="kc-reset-password-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
                 <div class="${properties.kcFormGroupClass!}">
-                    <div class="fr-mt-3w">
-                        <div class="fr-input-group ${properties.kcLabelWrapperClass!}">
-                            <label for="email" class="fr-label fr-mb-1w">Email</label>
+                    <div class="fr-input-group fr-mt-3w ${properties.kcLabelWrapperClass!}">
+                        <label for="username" class="fr-label fr-mb-1w">${msg("resetPassword.email")}</label>
                         <div class="${properties.kcInputWrapperClass!}">
                             <#if auth?has_content && auth.showUsername()>
                                 <input type="text" required="required" placeholder="Ex : [email protected]" id="username" name="username" class="form-control fr-input validate-required ${properties.kcInputClass!}" autofocus value="${auth.attemptedUsername}" aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"/>
@@ -23,28 +22,29 @@
 
                             <#if messagesPerField.existsError('username')>
                                 <span id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
-                                            ${kcSanitize(messagesPerField.get('username'))?no_esc}
+                                    ${kcSanitize(messagesPerField.get('username'))?no_esc}
                                 </span>
                             </#if>
                         </div>
                         <div class="fr-notice fr-notice--info fr-mt-3w">
                             <div class="fr-container">
                                 <div class="fr-notice__body">
-                                    <p class="fr-text--xs">${msg("resetPassword.subinfo")}</p>
+                                    <p class="fr-text--xs">${kcSanitize(msg("resetPassword.subinfo", properties.registerUrl))?no_esc}</p>
                                 </div>
                             </div>
                         </div>
                         <div class="fr-grid-row ${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
                             <div id="kc-form-buttons" class=" fr-col6 ${properties.kcFormButtonsClass!}">
                                 <input class="fr-btn ${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("resetPassword.submit")}"/>
                             </div>
-                            <div class=" fr-col6 ${properties.kcFormOptionsWrapperClass!}">
+                            <div class="fr-mt-1w fr-col6 ${properties.kcFormOptionsWrapperClass!}">
                                 <span><a href="${url.loginUrl}">${kcSanitize(msg("resetPassword.backToLogin"))?no_esc}</a></span>
                             </div>
                         </div>
+                    </div>
                 </div>
-            </div>
-        </section>
+            </form>
+        </div>
     </div>
 </div>
     <#elseif section = "info" >

diff --git a/theme/df/login/login.ftl b/theme/df/login/login.ftl
@@ -106,7 +106,7 @@
                                <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
                                   <div class="fr-modal__body">
                                     <div class="fr-modal__header">
-                                        <button class="fr-btn--close fr-btn" title="Fermer la fenêtre" aria-controls="fr-modal-1" >Fermer</button>
+                                        <button class="fr-btn--close fr-btn" title="Fermer la fenêtre" aria-controls="fr-modal-1" style="width:fit-content">Fermer</button>
                                     </div>
                                     <div class="fr-modal__content">
                                           <div class="fr-mt-2w alert-${message.type} ${properties.kcAlertClass!} pf-m-<#if message.type = 'error'>danger<#else>${message.type}</#if>">

diff --git a/theme/df/login/messages/messages_en.properties b/theme/df/login/messages/messages_en.properties
@@ -356,7 +356,7 @@ openshift.scope.list-projects=List projects
 # SAML authentication
 saml.post-form.title=Authentication Redirect
 saml.post-form.message=Redirecting, please wait.
-saml.post-form.js-disabled=JavaScript is disabled. We strongly recommend to enable it. Click the button below to continue. 
+saml.post-form.js-disabled=JavaScript is disabled. We strongly recommend to enable it. Click the button below to continue.
 saml.artifactResolutionServiceInvalidResponse=Unable to resolve artifact.
 
 #authenticators
@@ -455,7 +455,7 @@ profileScopeConsentText=Read your user information: Name, Birthname, Firstname.
 dfcScopeConsentText=Read your full DossierFacile data.
 oauthGrantRequestText=Your authorization will give to {0} the following access rights:
 oauthGrantRequestNotice=Be sure that you trust this application and you have done this request.
-oauthGrantRequestSubNotice=You will share sensitive data contains in DossierFacile. Moreover you have to be authorised by your mate to share their information data contained in your DossierFacile. 
+oauthGrantRequestSubNotice=You will share sensitive data contains in DossierFacile. Moreover you have to be authorised by your mate to share their information data contained in your DossierFacile.
 
 oauthGrantRequest=Do you grant these access privileges to {0}?
 
@@ -471,9 +471,10 @@ registration.mail.instruction.link=Your link is waiting for you at the address:
 registration.mail.instruction.info=Click on the link in the email to validate your registration
 
 resetPassword.title=Reset Your Password
-resetPassword.info=If you have forgotten your password or wish to change it, please provide your email address so we can send you a password reset link.
-resetPassword.submit=Submit
-resetPassword.backToLogin=� Back to Login
-resetPassword.subinfo=Do you have an account with one of our partners (PAP, Fastt, etc.) but not with DossierFacile? You need to first sign up on DossierFacile using the same email address as the one used with our partner. All your information will be automatically retrieved.
+resetPassword.info=Have you forgotten your password? Would you like to change it? Enter your e-mail address below and we''ll send you a link to change it.
+resetPassword.email=Your e-mail address:
+resetPassword.submit=Reset password
+resetPassword.backToLogin=&larr; Back to Login Page
+resetPassword.subinfo=Do you have an account with one of our partners (PAP, Fastt, etc.) but not with DossierFacile? You need to first <a href="{0}">sign up on DossierFacile</a> using the same email address as the one used with our partner. All your information will be automatically retrieved.
 
 cookieNotFoundMessage=Erreur: Votre session a \u00e9t\u00e9 r\u00e9initialis\u00e9e. <a href="https://www.dossierfacile.logement.gouv.fr"> Retour sur Dossierfacile </a>
diff --git a/theme/df/login/messages/messages_fr.properties b/theme/df/login/messages/messages_fr.properties
@@ -185,7 +185,7 @@ resetPasswordMessage=Vous devez changer votre mot de passe.
 verifyEmailMessage=Vous devez v\u00e9rifier votre courriel pour activer votre compte.
 linkIdpMessage=Vous devez v\u00e9rifier votre courriel pour lier votre compte avec {0}.
 
-emailSentMessage=Si vous avez un compte, un mail vous a \u00e9t\u00e9 envoy\u00e9 \u00e0 l''adresse indiqu\u00e9e.<br> Veuillez cliquer sur le lien envoy\u00e9 afin de confirmer votre adresse mail et poursuivre le changement de mot de passe.
+emailSentMessage=<p>Si vous avez un compte locataire sur DossierFacile, un e-mail vous a \u00e9t\u00e9 envoy\u00e9 \u00e0 l''adresse indiqu\u00e9e. Suivez les instructions de cet e-mail afin de r\u00e9initialiser votre mot de passe.</p> <div class="fr-notice fr-notice--info fr-mt-3w"> <div class="fr-container"> <div class="fr-notice__body"> <p>Si vous avez un compte chez l''un de nos partenaires (PAP par exemple) mais pas de compte DossierFacile, vous devez d''abord vous inscrire sur DossierFacile avec la m\u00eame adresse e-mail que celle utilis\u00e9e chez notre partenaire. Toutes vos informations seront automatiquement r\u00e9cup\u00e9r\u00e9es.<br>Rendez-vous sur <a href="https://www.dossierfacile.logement.gouv.fr/">dossierfacile.fr</a> et cr\u00e9ez votre dossier de location.</p> </div> </div> </div>
 emailSendErrorMessage=Erreur lors de l''envoi du courriel, veuillez essayer plus tard.
 
 accountUpdatedMessage=Votre compte a \u00e9t\u00e9 mis \u00e0 jour.
@@ -228,7 +228,7 @@ unexpectedErrorRetrievingTokenMessage=Erreur inattendue lors de la r\u00e9cup\u0
 unexpectedErrorHandlingResponseMessage=Erreur inattendue lors du traitement de la r\u00e9ponse provenant du fournisseur d''identit\u00e9.
 identityProviderAuthenticationFailedMessage=L''authentification a \u00e9chou\u00e9e. Impossible de s''authentifier avec le fournisseur d''identit\u00e9.
 couldNotSendAuthenticationRequestMessage=Impossible d''envoyer la requ\u00eate d''authentification vers le fournisseur d''identit\u00e9.
-unexpectedErrorHandlingRequestMessage=Erreur inattendue lors du traitement de la requ\u00eate vers le fournisseur d''identit\u00e9. Avez-vous d\u00e9j\u00e0 un compte ? 
+unexpectedErrorHandlingRequestMessage=Erreur inattendue lors du traitement de la requ\u00eate vers le fournisseur d''identit\u00e9. Avez-vous d\u00e9j\u00e0 un compte ?
 invalidAccessCodeMessage=Code d''acc\u00e8s invalide.
 sessionNotActiveMessage=La session n''est pas active.
 invalidCodeMessage=Une erreur est survenue, veuillez vous reconnecter \u00e0 votre application.
@@ -334,9 +334,10 @@ registration.mail.instruction.link=Votre lien vous attend \u00e0 l''adresse :
 registration.mail.instruction.info=Cliquez sur le lien pr\u00e9sent dans l''e-mail afin de valider votre inscription.
 
 resetPassword.title=R\u00e9initialiser votre mot de passe
-resetPassword.info=Vous avez oubli\u00e9 votre mot de passe ou souhaitez en changer, merci de pr\u00e9ciser votre adresse email afin que nous puissions vous envoyer un lien de r\u00e9initialisation de mot de passe.
-resetPassword.submit=Soumettre
-resetPassword.backToLogin=&laquo; Retour \u00e0 la connexion
-resetPassword.subinfo=Vous avez un compte chez l''un de nos partenaires (PAP, Fastt, ...) mais pas de compte DossierFacile ? Vous devez d''abord vous inscrire sur DossierFacile avec la m\u00eame adresse e-mail que celle utilis\u00e9e chez notre partenaire. Toutes vos informations seront automatiquement r\u00e9cup\u00e9r\u00e9es.
+resetPassword.info=Vous avez oubli\u00e9 votre mot de passe ? Vous souhaitez le changer ? Saisissez votre adresse e-mail ci-dessous et recevez un lien vous permettant de le modifier.
+resetPassword.email=Votre adresse e-mail :
+resetPassword.submit=R\u00e9initialiser le mot de passe
+resetPassword.backToLogin=&larr; Revenir \u00e0 la page de connexion
+resetPassword.subinfo=Vous avez un compte chez l''un de nos partenaires (PAP par exemple) mais pas de compte DossierFacile ? Vous devez d''abord <a href="{0}">vous inscrire sur DossierFacile</a> avec la m\u00eame adresse e-mail que celle utilis\u00e9e chez notre partenaire. Toutes vos informations seront automatiquement r\u00e9cup\u00e9r\u00e9es.
 
 cookieNotFoundMessage=Erreur: Votre session a \u00e9t\u00e9 r\u00e9initialis\u00e9e. <a href="https://www.dossierfacile.logement.gouv.fr"> Retour sur Dossierfacile </a>
diff --git a/theme/df/login/theme.properties b/theme/df/login/theme.properties
@@ -2,3 +2,4 @@ locales=ca,cs,da,de,en,es,fr,hu,it,ja,lt,nl,no,pl,pt-BR,ru,sk,sv,tr,zh-CN
 appTenantUrl=${env.KC_APP_TENANT_URL:locataire.dossierfacile.fr}
 appMainUrl=${env.KC_APP_MAIN_URL:www.dossierfacile.fr}
 appOwnerUrl=${env.KC_APP_OWNER_URL:proprietaire.dossierfacile.fr}
+registerUrl=${env.KC_APP_REGISTER_URL:/auth/realms/dossier-facile/protocol/openid-connect/registrations?client_id=dossier-facile-frontend&redirect_uri=https%3A%2F%2Flocataire.dossierfacile.logement.gouv.fr%2Fprofile&response_type=code&scope=openid}