[FEATURE] Afficher la bonne réception de demande de réinitialisation …

…de mot de passe (PIX-14112) #10402
1024pix · Oct 24, 2024 · ac02370 · ac02370
2 parents 012fa0a + 30c98b9
commit ac02370
Show file tree

Hide file tree

Showing 8 changed files with 186 additions and 61 deletions.
diff --git a/mon-pix/app/components/authentication/password-reset-demand-form.gjs b/mon-pix/app/components/authentication/password-reset-demand-form.gjs
@@ -22,6 +22,7 @@ export default class PasswordResetDemandForm extends Component {
   );
   @tracked emailInputvalidationStatus;
   @tracked emailInputvalidationErrorMessage;
+  @tracked isPasswordResetDemandReceived = false;
 
   email;
 
@@ -55,11 +56,11 @@ export default class PasswordResetDemandForm extends Component {
         method: 'POST',
         body: JSON.stringify({ email }),
       });
-      if (response.status == 404) {
-        this.errorMessage = this.intl.t('components.authentication.password-reset-demand-form.404-message');
-      } else if (!response.ok) {
+      if (!response.ok && response.status != 404) {
         throw new Error(`Response status: ${response.status}`);
       }
+
+      this.isPasswordResetDemandReceived = true;
     } catch (error) {
       this.errorMessage = this.intl.t('common.api-error-messages.internal-server-error');
     } finally {
@@ -68,55 +69,82 @@ export default class PasswordResetDemandForm extends Component {
   }
 
   <template>
-    <form {{on "submit" this.handlePasswordResetDemand}} class="authentication-password-reset-demand-form">
-      <p class="authentication-password-reset-demand-form__rule">
-        {{t "components.authentication.password-reset-demand-form.rule"}}
-      </p>
+    {{#if this.isPasswordResetDemandReceived}}
+      <PasswordResetDemandReceivedInfo />
+    {{else}}
+      <form {{on "submit" this.handlePasswordResetDemand}} class="authentication-password-reset-demand-form">
+        <p class="authentication-password-reset-demand-form__rule">
+          {{t "components.authentication.password-reset-demand-form.rule"}}
+        </p>
 
-      {{#if this.errorMessage}}
-        <PixMessage
-          @type="error"
-          @withIcon={{true}}
-          class="authentication-password-reset-demand-form__error"
-          role="alert"
-        >
-          {{this.errorMessage}}
-        </PixMessage>
-      {{/if}}
-      <div class="authentication-password-reset-demand-form__input-block">
-        <PixInput
-          @value={{this.email}}
-          type="email"
-          {{on "change" this.handleEmailChange}}
-          @validationStatus={{this.emailInputvalidationStatus}}
-          @errorMessage={{this.emailInputvalidationErrorMessage}}
-          placeholder={{this.emailInputPlaceholder}}
-          required={{true}}
-        >
-          <:label>{{t "components.authentication.password-reset-demand-form.fields.email.label"}}</:label>
-        </PixInput>
-      </div>
-      <div>
-        <PixButton
-          @type="submit"
-          @size="large"
-          @isLoading={{this.isLoading}}
-          class="authentication-password-reset-demand-form__button"
-        >
-          {{t "components.authentication.password-reset-demand-form.actions.receive-reset-button"}}
-        </PixButton>
-      </div>
-      <p class="authentication-password-reset-demand-form__help">
-        {{t "components.authentication.password-reset-demand-form.no-email-question"}}
-        <PixButtonLink
-          @variant="tertiary"
-          @href="{{t 'components.authentication.password-reset-demand-form.contact-us-link.link-url'}}"
-          target="_blank"
-          class="authentication-password-reset-demand-form__help-contact-us-link"
-        >
-          {{t "components.authentication.password-reset-demand-form.contact-us-link.link-text"}}
-        </PixButtonLink>
-      </p>
-    </form>
+        {{#if this.errorMessage}}
+          <PixMessage
+            @type="error"
+            @withIcon={{true}}
+            class="authentication-password-reset-demand-form__error"
+            role="alert"
+          >
+            {{this.errorMessage}}
+          </PixMessage>
+        {{/if}}
+        <div class="authentication-password-reset-demand-form__input-block">
+          <PixInput
+            @value={{this.email}}
+            type="email"
+            {{on "change" this.handleEmailChange}}
+            @validationStatus={{this.emailInputvalidationStatus}}
+            @errorMessage={{this.emailInputvalidationErrorMessage}}
+            placeholder={{this.emailInputPlaceholder}}
+            required={{true}}
+          >
+            <:label>{{t "components.authentication.password-reset-demand-form.fields.email.label"}}</:label>
+          </PixInput>
+        </div>
+        <div>
+          <PixButton
+            @type="submit"
+            @size="large"
+            @isLoading={{this.isLoading}}
+            class="authentication-password-reset-demand-form__button"
+          >
+            {{t "components.authentication.password-reset-demand-form.actions.receive-reset-button"}}
+          </PixButton>
+        </div>
+        <p class="authentication-password-reset-demand-form__help">
+          {{t "components.authentication.password-reset-demand-form.no-email-question"}}
+          <PixButtonLink
+            @variant="tertiary"
+            @href="{{t 'components.authentication.password-reset-demand-form.contact-us-link.link-url'}}"
+            target="_blank"
+            class="authentication-password-reset-demand-form__help-contact-us-link"
+          >
+            {{t "components.authentication.password-reset-demand-form.contact-us-link.link-text"}}
+          </PixButtonLink>
+        </p>
+      </form>
+    {{/if}}
   </template>
 }
+
+const PasswordResetDemandReceivedInfo = <template>
+  <div class="authentication-password-reset-demand-received-info">
+    <img src="/images/mail.svg" alt="" />
+    <h2 class="authentication-password-reset-demand-received-info__heading">
+      {{t "components.authentication.password-reset-demand-received-info.heading"}}
+    </h2>
+    <p class="authentication-password-reset-demand-received-info__message">
+      {{t "components.authentication.password-reset-demand-received-info.message"}}
+    </p>
+    <p class="authentication-password-reset-demand-received-info__help">
+      {{t "components.authentication.password-reset-demand-received-info.no-email-received-question"}}
+      <PixButtonLink
+        @variant="tertiary"
+        @route="password-reset-demand"
+        target="_blank"
+        class="authentication-password-reset-demand-form__help-contact-us-link"
+      >
+        {{t "components.authentication.password-reset-demand-received-info.try-again"}}
+      </PixButtonLink>
+    </p>
+  </div>
+</template>;
diff --git a/mon-pix/app/components/authentication/password-reset-demand.scss b/mon-pix/app/components/authentication/password-reset-demand.scss
@@ -38,4 +38,31 @@
         display: inline;
         padding: 0;
     }
+}
+
+.authentication-password-reset-demand-received-info {
+    margin-top: var(--pix-spacing-6x);
+    padding: var(--pix-spacing-6x);
+    color: var(--pix-neutral-900);
+    text-align: center;
+    background-color: var(--pix-primary-10);
+    border-radius: var(--pix-spacing-4x);
+
+    &__heading {
+        @extend %pix-title-xs;
+
+        margin-top: var(--pix-spacing-8x);
+    }
+
+    &__message {
+        @extend %pix-body-m;
+
+        margin-top: var(--pix-spacing-4x);
+    }
+
+    &__help {
+        @extend %pix-body-m;
+
+        margin-top: var(--pix-spacing-4x);
+    }
 }
diff --git a/mon-pix/public/images/mail.svg b/mon-pix/public/images/mail.svg
diff --git a/mon-pix/tests/integration/components/authentication/password-reset-demand-form-test.gjs b/mon-pix/tests/integration/components/authentication/password-reset-demand-form-test.gjs
@@ -22,6 +22,20 @@ module('Integration | Component | Authentication | password-reset-demand-form',
     assert.strictEqual(link.getAttribute('href'), 'https://pix.fr/support');
   });
 
+  test('it doesn’t display a "password reset demand received" info', async function (assert) {
+    // given
+    const screen = await render(<template><PasswordResetDemandForm /></template>);
+
+    // then
+    assert
+      .dom(
+        screen.queryByRole('heading', {
+          name: t('components.authentication.password-reset-demand-received-info.heading'),
+        }),
+      )
+      .doesNotExist();
+  });
+
   module('email input validation', function () {
     module('when the email input is valid', function () {
       test('it doesn’t display any error message', async function (assert) {
@@ -68,7 +82,7 @@ module('Integration | Component | Authentication | password-reset-demand-form',
     });
 
     module('when the password-reset-demand is successful', function () {
-      test('it doesn’t display any error message', async function (assert) {
+      test('it displays a "password reset demand received" info (without any error message)', async function (assert) {
         // given
         window.fetch.resolves(
           fetchMock({
@@ -89,11 +103,26 @@ module('Integration | Component | Authentication | password-reset-demand-form',
 
         // then
         assert.dom(screen.queryByRole('alert')).doesNotExist();
+
+        assert
+          .dom(
+            screen.queryByRole('heading', {
+              name: t('components.authentication.password-reset-demand-received-info.heading'),
+            }),
+          )
+          .exists();
+
+        const tryAgainLink = await screen.queryByRole('link', {
+          name: t('components.authentication.password-reset-demand-received-info.try-again'),
+        });
+        assert.dom(tryAgainLink).exists();
+        assert.strictEqual(tryAgainLink.getAttribute('href'), '/mot-de-passe-oublie');
       });
     });
 
+    // TODO: This test module will need to be removed when the API doesn't leak anymore that an account doesn't exist with a "404 Not Found".
     module('when there is no corresponding user account', function () {
-      test('it displays an "account not found" error message', async function (assert) {
+      test('it displays a "password reset demand received" info (without any error message to avoid email enumeration)', async function (assert) {
         // given
         window.fetch.resolves(
           fetchMock({
@@ -116,9 +145,15 @@ module('Integration | Component | Authentication | password-reset-demand-form',
         );
 
         // then
-        // The following doesn’t work because of a PixUi span inside the role element
-        //assert.dom(screen.queryByRole('alert', { name: t('pages.password-reset-demand.error.message') })).exists();
-        assert.dom(screen.queryByText(t('components.authentication.password-reset-demand-form.404-message'))).exists();
+        assert.dom(screen.queryByRole('alert')).doesNotExist();
+
+        assert
+          .dom(
+            screen.queryByRole('heading', {
+              name: t('components.authentication.password-reset-demand-received-info.heading'),
+            }),
+          )
+          .exists();
       });
     });
 

diff --git a/mon-pix/translations/en.json b/mon-pix/translations/en.json
@@ -153,7 +153,6 @@
         "signup-heading": "Other ways to sign up"
       },
       "password-reset-demand-form": {
-        "404-message": "The email address entered does not match any Pix account",
         "actions": {
           "receive-reset-button": "Receive a reset link"
         },
@@ -171,6 +170,12 @@
         "no-email-question": "No email address?",
         "rule": "All fields are required."
       },
+      "password-reset-demand-received-info": {
+        "heading": "Check your email address",
+        "message": "If your address is associated with a Pix account, instructions for resetting your password have been sent to you by e-mail.",
+        "no-email-received-question": "You haven’t received anything?",
+        "try-again": "Try again with another demand"
+      },
       "password-reset-form": {
         "actions": {
           "submit": "Reset my password"

diff --git a/mon-pix/translations/es.json b/mon-pix/translations/es.json
@@ -187,7 +187,6 @@
         }
       },
       "password-reset-demand-form": {
-        "404-message": "Esta dirección de correo electrónico no corresponde a ninguna cuenta",
         "rule": "All fields are required.",
         "no-email-question": "No email address?",
         "contact-us-link": {
@@ -204,6 +203,12 @@
         "actions": {
           "receive-reset-button": "Receive a reset link"
         }
+      },
+      "password-reset-demand-received-info": {
+        "heading": "Check your email address",
+        "message": "If your address is associated with a Pix account, instructions for resetting your password have been sent to you by e-mail.",
+        "no-email-received-question": "You haven’t received anything?",
+        "try-again": "Try again with another demand"
       }
     },
     "invited": {

diff --git a/mon-pix/translations/fr.json b/mon-pix/translations/fr.json
@@ -153,7 +153,6 @@
         "signup-heading": "Autres moyens d’inscription"
       },
       "password-reset-demand-form": {
-        "404-message": "Cette adresse e-mail ne correspond à aucun compte",
         "actions": {
           "receive-reset-button": "Recevoir un lien de réinitialisation"
         },
@@ -171,6 +170,12 @@
         "no-email-question": "Pas d’adresse e-mail renseignée ?",
         "rule": "Tous les champs sont obligatoires."
       },
+      "password-reset-demand-received-info": {
+        "heading": "Vérifiez votre messagerie électronique",
+        "message": "Si votre adresse est bien associée à un compte Pix, les instructions pour réinitialiser votre mot de passe vous ont été envoyées par e-mail.",
+        "no-email-received-question": "Vous n’avez pas reçu d’e-mail ?",
+        "try-again": "Renvoyer l’e-mail de réinitialisation"
+      },
       "password-reset-form": {
         "actions": {
           "submit": "Je réinitialise mon mot de passe"

diff --git a/mon-pix/translations/nl.json b/mon-pix/translations/nl.json
@@ -187,7 +187,6 @@
         }
       },
       "password-reset-demand-form": {
-        "404-message": "Dit e-mailadres komt niet overeen met een account",
         "rule": "All fields are required.",
         "no-email-question": "No email address?",
         "contact-us-link": {
@@ -204,6 +203,12 @@
         "actions": {
           "receive-reset-button": "Receive a reset link"
         }
+      },
+      "password-reset-demand-received-info": {
+        "heading": "Check your email address",
+        "message": "If your address is associated with a Pix account, instructions for resetting your password have been sent to you by e-mail.",
+        "no-email-received-question": "You haven’t received anything?",
+        "try-again": "Try again with another demand"
       }
     },
     "invited": {