Skip to content

Commit

Permalink
[FEATURE] Afficher la bonne réception de demande de réinitialisation …
Browse files Browse the repository at this point in the history
…de mot de passe (PIX-14112)

 #10402
  • Loading branch information
pix-service-auto-merge authored Oct 24, 2024
2 parents 012fa0a + 30c98b9 commit ac02370
Show file tree
Hide file tree
Showing 8 changed files with 186 additions and 61 deletions.
132 changes: 80 additions & 52 deletions mon-pix/app/components/authentication/password-reset-demand-form.gjs
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export default class PasswordResetDemandForm extends Component {
);
@tracked emailInputvalidationStatus;
@tracked emailInputvalidationErrorMessage;
@tracked isPasswordResetDemandReceived = false;

email;

Expand Down Expand Up @@ -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 {
Expand All @@ -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>;
27 changes: 27 additions & 0 deletions mon-pix/app/components/authentication/password-reset-demand.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
15 changes: 15 additions & 0 deletions mon-pix/public/images/mail.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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({
Expand All @@ -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({
Expand All @@ -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();
});
});

Expand Down
7 changes: 6 additions & 1 deletion mon-pix/translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand All @@ -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"
Expand Down
7 changes: 6 additions & 1 deletion mon-pix/translations/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -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": {
Expand Down
7 changes: 6 additions & 1 deletion mon-pix/translations/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand All @@ -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"
Expand Down
7 changes: 6 additions & 1 deletion mon-pix/translations/nl.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -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": {
Expand Down

0 comments on commit ac02370

Please sign in to comment.