Updated password reset notification (TryGhost#20510)

REF DES-540
madewithlove · Jul 2, 2024 · 18719e2 · 18719e2
1 parent 23075b7
commit 18719e2
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -73,7 +73,7 @@
                         data-test-button="sign-in" />
                 </form>
 
-                <p class="main-error">{{if this.flowErrors this.flowErrors}}&nbsp;</p>
+                <p class="{{if this.flowErrors "main-error" "main-notification"}}" data-test-flow-notification>{{if this.flowErrors this.flowErrors this.flowNotification}}&nbsp;</p>
             {{/if}}
         </section>
     </div>

diff --git 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"]', '[email protected]');

diff --git 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 () {