Updated editor re-authentication modal (#16102)

ghost/admin/app/components/editor/modals/re-authenticate.hbs

@@ -1,37 +1,37 @@
 <div class="modal-content" data-test-modal="re-authenticate">
-    <header class="modal-header">
-        <h1>Please re-authenticate</h1>
-    </header>
-    <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
+    <form id="login" class="gh-signin" method="post" novalidate="novalidate" {{on "submit" (perform this.reauthenticateTask)}}>
+        <header>
+            <h1>Are you still here?</h1>
+            <p>Your authenticated session expired. Enter your password to continue where you left off.</p>
+        </header>
 
-    <div class="modal-body {{if this.authenticationError 'error'}}">
-        <form id="login" class="login-form" method="post" novalidate="novalidate" {{on "submit" (perform this.reauthenticateTask)}}>
-            <div class="password-wrap" {{validation-status errors=this.signup.errors property="password" hasValidated=this.signup.hasValidated}}>
+        <div class="form-group {{if this.authenticationError 'error'}}">
+            <label for="password">Password</label>
+            <span class="gh-input-icon gh-icon-lock forgotten-wrap" {{validation-status errors=this.signup.errors property="password" hasValidated=this.signup.hasValidated}}>
                 <input
                     type="password"
                     class="gh-input password"
-                    placeholder="Password"
+                    placeholder="•••••••••••••••"
                     name="password"
                     value={{this.signup.password}}
                     aria-label="Your password"
                     {{on "input" this.setPassword}}
                 />
-            </div>
+            </span>
+        </div>
 
-            <div>
-                <GhTaskButton
-                    @type="submit"
-                    @buttonText="Log in"
-                    @runningText="Authenticating"
-                    @showSuccess={{false}}
-                    @task={{this.reauthenticateTask}}
-                    @class="gh-btn gh-btn-black gh-btn-icon"
-                />
-            </div>
-        </form>
+        <GhTaskButton
+            @type="submit"
+            @buttonText="Sign in &rarr;"
+            @runningText="Authenticating"
+            @showSuccess={{false}}
+            @task={{this.reauthenticateTask}}
+            @class="login gh-btn gh-btn-login gh-btn-block gh-btn-icon"
+            style={{accent-color-background}}
+        />
 
         {{#if this.authenticationError}}
             <p class="response">{{this.authenticationError}}</p>
         {{/if}}
-    </div>
+    </form>
 </div>

ghost/admin/app/components/editor/modals/re-authenticate.js

@@ -21,6 +21,14 @@ class Signin extends EmberObject.extend(ValidationEngine) {
 export default class ReAuthenticateModal extends Component {
     @service notifications;
     @service session;
+    @service modals;
+
+    static modalOptions = {
+        className: 'fullscreen-modal-wide fullscreen-modal-action modal-reauthenticate',
+        ignoreBackdropClick: true,
+        backgroundLight: true,
+        backgroundBlur: true
+    };
 
     @tracked authenticationError = null;
 

ghost/admin/app/components/epm-modal-container.hbs

@@ -1,14 +1,14 @@
 {{#each this.modals._stack as |modal index|}}
     {{#unless modal._options.omitBackdrop}}
         <div
-            class="epm-backdrop {{if modal.isClosing "epm-out"}}"
+            class="epm-backdrop {{if modal._options.backgroundLight "background-light"}} {{if modal.isClosing "epm-out"}}"
             tabindex="-1"
             role="presentation"
             aria-hidden="true"
             data-test-epm-backdrop="{{index}}"
         />
     {{/unless}}
-    <div class="epm-modal-container">
+    <div class="epm-modal-container {{if modal._options.backgroundBlur "background-blur"}}">
         <EpmModal @modal={{modal}} data-test-epm-modal="{{index}}" />
     </div>
 {{/each}}

ghost/admin/app/styles/components/modals-new.css

@@ -55,6 +55,10 @@
     z-index: 10000;
 }
 
+.epm-backdrop.background-light {
+    background-color: var(--whitegrey-l2);
+}
+
 .epm-modal-container {
     z-index: 10000;
     display: flex;
@@ -63,6 +67,10 @@
     align-items: unset;
 }
 
+.epm-modal-container.background-blur {
+    backdrop-filter: blur(4px);
+}
+
 .epm-animating .epm-modal-container {
     overflow: unset;
 }

ghost/admin/app/styles/components/modals.css

@@ -780,3 +780,21 @@
     padding: 0;
     margin-bottom: 0;
 }
+
+
+/* Re-authentication modal (cookies expired with unsaved changes in editor)
+/* ---------------------------------------------------------- */
+
+.modal-reauthenticate p {
+    color: var(--black);
+    font-size: 1.6rem;
+    font-weight: 400;
+}
+
+.epm-modal.modal-reauthenticate .modal-content {
+    padding: 48px 32px;
+}
+
+.modal-reauthenticate .gh-signin .gh-btn-login {
+    margin-top: 32px;
+}

ghost/admin/tests/acceptance/authentication-test.js

@@ -3,7 +3,7 @@ import windowProxy from 'ghost-admin/utils/window-proxy';
 import {Response} from 'miragejs';
 import {afterEach, beforeEach, describe, it} from 'mocha';
 import {authenticateSession, invalidateSession} from 'ember-simple-auth/test-support';
-import {click, currentRouteName, currentURL, fillIn, findAll, triggerKeyEvent, visit, waitFor} from '@ember/test-helpers';
+import {currentRouteName, currentURL, fillIn, findAll, triggerKeyEvent, visit, waitFor} from '@ember/test-helpers';
 import {expect} from 'chai';
 import {run} from '@ember/runloop';
 import {setupApplicationTest} from 'ember-mocha';
@@ -175,7 +175,7 @@ describe('Acceptance: Authentication', function () {
             await waitFor('[data-test-modal="re-authenticate"]', {timeout: 100});
 
             // close the modal so the modal promise is settled and we can continue
-            await click('[data-test-modal="re-authenticate"] button[title="Close"]');
+            await triggerKeyEvent('[data-test-modal="re-authenticate"]', 'keydown', 'Escape');
         });
 
         // don't clobber debounce/throttle for future tests