diff --git a/mon-pix/app/components/authentication/password-reset-form/password-reset-form.gjs b/mon-pix/app/components/authentication/password-reset-form/password-reset-form.gjs index 9dbd4ffba3b..27b40c99d7e 100644 --- a/mon-pix/app/components/authentication/password-reset-form/password-reset-form.gjs +++ b/mon-pix/app/components/authentication/password-reset-form/password-reset-form.gjs @@ -1,4 +1,5 @@ import PixButton from '@1024pix/pix-ui/components/pix-button'; +import PixButtonLink from '@1024pix/pix-ui/components/pix-button-link'; import PixMessage from '@1024pix/pix-ui/components/pix-message'; import { on } from '@ember/modifier'; import { action } from '@ember/object'; @@ -22,7 +23,7 @@ const HTTP_ERROR_MESSAGES = { export default class PasswordResetForm extends Component { @service intl; - @tracked hasSucceeded = false; + @tracked isPasswordResetSucceeded = false; @tracked isLoading = false; @tracked validation = new PasswordResetFormValidation(this.intl); @tracked globalErrorMessage; @@ -40,14 +41,14 @@ export default class PasswordResetForm extends Component { if (!this.validation.isValid) return; - this.hasSucceeded = false; this.globalErrorMessage = null; this.isLoading = true; + this.isPasswordResetSucceeded = false; try { const { user, temporaryKey } = this.args; await user.save({ adapterOptions: { updatePassword: true, temporaryKey } }); user.password = null; - this.hasSucceeded = true; + this.isPasswordResetSucceeded = true; } catch (response) { const status = get(response, 'errors[0].status'); this.globalErrorMessage = this.intl.t(HTTP_ERROR_MESSAGES[status] || HTTP_ERROR_MESSAGES['default']); @@ -57,33 +58,55 @@ export default class PasswordResetForm extends Component { } } + +const PasswordResetSucceededInfo = ; diff --git a/mon-pix/app/components/authentication/password-reset-form/password-reset-form.scss b/mon-pix/app/components/authentication/password-reset-form/password-reset-form.scss index 496306df629..9ea2d480f69 100644 --- a/mon-pix/app/components/authentication/password-reset-form/password-reset-form.scss +++ b/mon-pix/app/components/authentication/password-reset-form/password-reset-form.scss @@ -18,3 +18,19 @@ width: 100%; } } + +.password-reset-succeeded-info { + margin-top: var(--pix-spacing-6x); + margin-bottom: var(--pix-spacing-4x); + padding: var(--pix-spacing-6x); + color: var(--pix-neutral-900); + text-align: center; + background-color: var(--pix-success-50); + border-radius: var(--pix-spacing-4x); + + &__heading { + @extend %pix-title-xs; + + margin-top: var(--pix-spacing-8x); + } +} diff --git a/mon-pix/public/images/success-check.svg b/mon-pix/public/images/success-check.svg new file mode 100644 index 00000000000..2425ddd29b9 --- /dev/null +++ b/mon-pix/public/images/success-check.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/mon-pix/tests/integration/components/authentication/password-reset-form/password-reset-form-test.gjs b/mon-pix/tests/integration/components/authentication/password-reset-form/password-reset-form-test.gjs index c03db48b75b..0ee133bbdf9 100644 --- a/mon-pix/tests/integration/components/authentication/password-reset-form/password-reset-form-test.gjs +++ b/mon-pix/tests/integration/components/authentication/password-reset-form/password-reset-form-test.gjs @@ -7,10 +7,12 @@ import sinon from 'sinon'; import setupIntlRenderingTest from '../../../../helpers/setup-intl-rendering'; const I18N_KEYS = { + loginButtonLink: 'components.authentication.password-reset-form.actions.login', passwordInputErrorMessage: 'components.authentication.password-reset-form.fields.password.label', passwordInputLabel: 'components.authentication.password-reset-form.fields.password.label', mandatoryFieldsMessage: 'common.form.mandatory-all-fields', resetPasswordButton: 'components.authentication.password-reset-form.actions.submit', + resetPasswordSuccess: 'components.authentication.password-reset-form.success-info.message', }; const I18N_ERROR_KEYS = { @@ -42,22 +44,28 @@ module('Integration | Component | Authentication | PasswordResetForm | PasswordR test('resets password successfully', async function (assert) { // given + const user = { save: sinon.stub().resolves() }; const validPassword = 'Pix12345'; - const user = { save: sinon.stub() }; const temporaryKey = 'temporaryKey'; // when - await render(); + const screen = await render( + , + ); await fillByLabel(t(I18N_KEYS.passwordInputLabel), validPassword); await clickByName(t(I18N_KEYS.resetPasswordButton)); // then - const userSavePayload = { - adapterOptions: { updatePassword: true, temporaryKey }, - }; - assert.strictEqual(user.password, null); + const userSavePayload = { adapterOptions: { updatePassword: true, temporaryKey } }; sinon.assert.calledWith(user.save, userSavePayload); + assert.strictEqual(user.password, null); + + const successInfo = screen.getByRole('heading', { name: t(I18N_KEYS.resetPasswordSuccess) }); + assert.dom(successInfo).exists(); + + const loginLinkElement = screen.getByRole('link', { name: t(I18N_KEYS.loginButtonLink) }); + assert.dom(loginLinkElement).hasAttribute('href', '/connexion'); }); module('when there is a validationError on the password field', function () { diff --git a/mon-pix/translations/en.json b/mon-pix/translations/en.json index 0528aead4e8..b3b45a12ed5 100644 --- a/mon-pix/translations/en.json +++ b/mon-pix/translations/en.json @@ -178,7 +178,8 @@ }, "password-reset-form": { "actions": { - "submit": "Reset my password" + "submit": "Reset my password", + "login": "Log in" }, "errors": { "expired-demand": "We’re sorry, but your request to reset your password has already been used or has expired. Please start again.", @@ -188,6 +189,9 @@ "password": { "label": "Please enter your new password" } + }, + "success-info": { + "message": "Your password has been successfully reset." } }, "signup-form": { diff --git a/mon-pix/translations/es.json b/mon-pix/translations/es.json index 280ae86f24c..9ff26d09427 100644 --- a/mon-pix/translations/es.json +++ b/mon-pix/translations/es.json @@ -147,7 +147,8 @@ }, "password-reset-form": { "actions": { - "submit": "Reset my password" + "submit": "Reset my password", + "login": "Me conecto" }, "errors": { "expired-demand": "Lo sentimos, pero tu solicitud de restablecimiento de contraseña ya ha sido utilizada o ha caducado. Por favor, vuelve a intentarlo.", @@ -157,6 +158,9 @@ "password": { "label": "Please enter your new password" } + }, + "success-info": { + "message": "Your password has been successfully reset." } }, "signup-form": { diff --git a/mon-pix/translations/fr.json b/mon-pix/translations/fr.json index bec430ea3be..d7db4a01e4f 100644 --- a/mon-pix/translations/fr.json +++ b/mon-pix/translations/fr.json @@ -178,7 +178,8 @@ }, "password-reset-form": { "actions": { - "submit": "Je réinitialise mon mot de passe" + "submit": "Je réinitialise mon mot de passe", + "login": "Je me connecte" }, "errors": { "expired-demand": "Nous sommes désolés, mais votre demande de réinitialisation de mot de passe a déjà été utilisée ou est expirée. Merci de recommencer.", @@ -188,6 +189,9 @@ "password": { "label": "Saisissez votre nouveau mot de passe" } + }, + "success-info": { + "message": "Votre mot de passe a bien été réinitialisé." } }, "signup-form": { diff --git a/mon-pix/translations/nl.json b/mon-pix/translations/nl.json index 07562b3a330..8dda2840932 100644 --- a/mon-pix/translations/nl.json +++ b/mon-pix/translations/nl.json @@ -147,7 +147,8 @@ }, "password-reset-form": { "actions": { - "submit": "Reset my password" + "submit": "Reset my password", + "login": "Ik ben online." }, "errors": { "expired-demand": "Het spijt ons, maar uw wachtwoordaanvraag is al gebruikt of verlopen. Probeer het opnieuw.", @@ -157,6 +158,9 @@ "password": { "label": "Please enter your new password" } + }, + "success-info": { + "message": "Your password has been successfully reset." } }, "signup-form": {