From 18719e21680a65d3cc187351e0fdc3a25d610a01 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com>
Date: Tue, 2 Jul 2024 15:24:14 +0200
Subject: [PATCH] Updated password reset notification (#20510)
REF DES-540
---
ghost/admin/app/components/gh-alert.js | 4 ++--
ghost/admin/app/controllers/reset.js | 5 ++++-
ghost/admin/app/controllers/signin.js | 9 ++++-----
ghost/admin/app/styles/components/notifications.css | 4 ++--
ghost/admin/app/styles/layouts/flow.css | 13 ++++++++++++-
ghost/admin/app/styles/patterns/forms.css | 4 ++--
ghost/admin/app/templates/signin.hbs | 2 +-
ghost/admin/tests/acceptance/password-reset-test.js | 6 +++---
.../tests/integration/components/gh-alert-test.js | 4 ++--
9 files changed, 32 insertions(+), 19 deletions(-)
diff --git a/ghost/admin/app/components/gh-alert.js b/ghost/admin/app/components/gh-alert.js
index ca22911459..2114ae97a1 100644
--- a/ghost/admin/app/components/gh-alert.js
+++ b/ghost/admin/app/components/gh-alert.js
@@ -9,8 +9,8 @@ export default class GhAlert extends Component {
const typeMapping = {
success: 'green',
error: 'red',
- warn: 'blue',
- info: 'blue'
+ warn: 'black',
+ info: 'black'
};
const type = this.args.message.type;
diff --git a/ghost/admin/app/controllers/reset.js b/ghost/admin/app/controllers/reset.js
index 0c045c9762..2ce6090ee8 100644
--- a/ghost/admin/app/controllers/reset.js
+++ b/ghost/admin/app/controllers/reset.js
@@ -62,7 +62,10 @@ export default class ResetController extends Controller.extend(ValidationEngine)
password_reset: [{newPassword, ne2Password, token}]
}
});
- this.notifications.showAlert(resp.password_reset[0].message, {type: 'warn', delayed: true, key: 'password.reset'});
+ this.notifications.showNotification(
+ resp.password_reset[0].message,
+ {type: 'info', delayed: true, key: 'password.reset'}
+ );
this.session.authenticate('authenticator:cookie', email, newPassword);
return true;
} catch (error) {
diff --git a/ghost/admin/app/controllers/signin.js b/ghost/admin/app/controllers/signin.js
index 3ef67c2569..1c4531cf3a 100644
--- a/ghost/admin/app/controllers/signin.js
+++ b/ghost/admin/app/controllers/signin.js
@@ -25,6 +25,7 @@ export default class SigninController extends Controller.extend(ValidationEngine
@tracked submitting = false;
@tracked loggingIn = false;
+ @tracked flowNotification = '';
@tracked flowErrors = '';
@tracked passwordResetEmailSent = false;
@@ -123,21 +124,19 @@ export default class SigninController extends Controller.extend(ValidationEngine
let notifications = this.notifications;
this.flowErrors = '';
+ this.flowNotification = '';
// This is a bit dirty, but there's no other way to ensure the properties are set as well as 'forgotPassword'
this.hasValidated.addObject('identification');
try {
yield this.validate({property: 'forgotPassword'});
yield this.ajax.post(forgottenUrl, {data: {password_reset: [{email}]}});
- notifications.showAlert(
- 'Please check your email for instructions.',
- {type: 'info', key: 'forgot-password.send.success'}
- );
+ this.flowNotification = 'An email with password reset instructions has been sent.';
return true;
} catch (error) {
// ValidationEngine throws "undefined" for failed validation
if (!error) {
- return this.flowErrors = 'We need your email address to reset your password!';
+ return this.flowErrors = 'We need your email address to reset your password.';
}
if (isVersionMismatchError(error)) {
diff --git a/ghost/admin/app/styles/components/notifications.css b/ghost/admin/app/styles/components/notifications.css
index 8c008a4764..20fcb6e6da 100644
--- a/ghost/admin/app/styles/components/notifications.css
+++ b/ghost/admin/app/styles/components/notifications.css
@@ -312,8 +312,8 @@
/* ---------------------------------------------------------- */
.gh-alert-black {
- border-bottom: color-mod(var(--darkgrey) lightness(-10%)) 1px solid;
- background: var(--darkgrey);
+ border-bottom: 1px solid var(--black);
+ background: var(--black);
color: #fff;
}
.gh-alert-black a {
diff --git a/ghost/admin/app/styles/layouts/flow.css b/ghost/admin/app/styles/layouts/flow.css
index bf22e34cc6..c669f6ea04 100644
--- a/ghost/admin/app/styles/layouts/flow.css
+++ b/ghost/admin/app/styles/layouts/flow.css
@@ -271,7 +271,18 @@
.gh-setup .gh-flow-content .main-error {
margin-top: 16px;
color: var(--red);
- font-size: 1.35rem;
+ font-size: 1.4rem;
+ line-height: 1.5;
+ text-align: center;
+ text-wrap: balance;
+}
+
+.gh-flow-content .main-notification,
+.gh-setup .gh-flow-content .main-notification {
+ margin-top: 16px;
+ color: var(--black);
+ font-size: 1.4rem;
+ font-weight: 400;
line-height: 1.5;
text-align: center;
text-wrap: balance;
diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css
index 82e216964b..4eba90853a 100644
--- a/ghost/admin/app/styles/patterns/forms.css
+++ b/ghost/admin/app/styles/patterns/forms.css
@@ -231,14 +231,14 @@ select.error {
.gh-input:focus,
.gh-input.focus {
outline: 0;
- border-color: color-mod(var(--green)) !important;
+ border-color: var(--green);
box-shadow: inset 0 0 0 1px var(--green);
background: var(--white);
}
.error .gh-input:focus,
.error .gh-input.focus {
- border-color: color-mod(var(--red)) !important;
+ border-color: var(--red);
box-shadow: inset 0 0 0 1px var(--red);
}
diff --git a/ghost/admin/app/templates/signin.hbs b/ghost/admin/app/templates/signin.hbs
index 9c1991a999..01cc2e82c7 100644
--- a/ghost/admin/app/templates/signin.hbs
+++ b/ghost/admin/app/templates/signin.hbs
@@ -73,7 +73,7 @@
data-test-button="sign-in" />
- {{if this.flowErrors this.flowErrors}}
+ {{if this.flowErrors this.flowErrors this.flowNotification}}
{{/if}}
diff --git a/ghost/admin/tests/acceptance/password-reset-test.js b/ghost/admin/tests/acceptance/password-reset-test.js
index 6dc0a8bc35..2c86c75611 100644
--- a/ghost/admin/tests/acceptance/password-reset-test.js
+++ b/ghost/admin/tests/acceptance/password-reset-test.js
@@ -17,7 +17,7 @@ describe('Acceptance: Password Reset', function () {
await click('.forgotten-link');
// an alert with instructions is displayed
- expect(findAll('.gh-alert-blue').length, 'alert count')
+ expect(findAll('[data-test-flow-notification]').length, 'alert count')
.to.equal(1);
});
@@ -41,7 +41,7 @@ describe('Acceptance: Password Reset', function () {
// error message shown
expect(find('p.main-error').textContent.trim(), 'error message')
- .to.equal('We need your email address to reset your password!');
+ .to.equal('We need your email address to reset your password.');
// invalid email provided
await fillIn('input[name="identification"]', 'test');
@@ -61,7 +61,7 @@ describe('Acceptance: Password Reset', function () {
// error message
expect(find('p.main-error').textContent.trim(), 'error message')
- .to.equal('We need your email address to reset your password!');
+ .to.equal('We need your email address to reset your password.');
// unknown email provided
await fillIn('input[name="identification"]', 'unknown@example.com');
diff --git a/ghost/admin/tests/integration/components/gh-alert-test.js b/ghost/admin/tests/integration/components/gh-alert-test.js
index 92c9612078..64863ea3e1 100644
--- a/ghost/admin/tests/integration/components/gh-alert-test.js
+++ b/ghost/admin/tests/integration/components/gh-alert-test.js
@@ -45,11 +45,11 @@ describe('Integration: Component: gh-alert', function () {
this.message.type = 'warn';
await settled();
- expect(alert, 'warn class is yellow').to.have.class('gh-alert-blue');
+ expect(alert, 'warn class is black').to.have.class('gh-alert-black');
this.message.type = 'info';
await settled();
- expect(alert, 'info class is blue').to.have.class('gh-alert-blue');
+ expect(alert, 'info class is black').to.have.class('gh-alert-black');
});
it('closes notification through notifications service', async function () {