From 67d87e8756f1fda35d571b49287cbdaa38779092 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Fri, 27 May 2022 12:13:54 +0100
Subject: [PATCH] Fixed flash of failure state when submitting site setup and
 staff signup forms

no issue

- ensure tasks return `true` or `false` so the button states reflect reality
- added `@showSuccess={{false}}` to both forms because they automatically switch to a new screen on success so there's no point showing a flash of the success state
- removed unnecessary and not-recommended tabindex properties on form elements
---
 ghost/admin/app/controllers/setup.js  |  7 ++++---
 ghost/admin/app/controllers/signup.js |  4 ++++
 ghost/admin/app/templates/setup.hbs   | 13 ++++++++-----
 ghost/admin/app/templates/signup.hbs  | 17 ++++++++++++-----
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/ghost/admin/app/controllers/setup.js b/ghost/admin/app/controllers/setup.js
index 4425044301..1e1fcf3387 100644
--- a/ghost/admin/app/controllers/setup.js
+++ b/ghost/admin/app/controllers/setup.js
@@ -59,12 +59,11 @@ export default class SetupController extends Controller.extend(ValidationEngine)
         this.session.skipAuthSuccessHandler = true;
 
         try {
-            let authResult = yield this.session
-                .authenticate(authStrategy, ...authentication);
+            yield this.session.authenticate(authStrategy, ...authentication);
 
             this.errors.remove('session');
 
-            return authResult;
+            return true;
         } catch (error) {
             if (error && error.payload && error.payload.errors) {
                 if (isVersionMismatchError(error)) {
@@ -80,6 +79,8 @@ export default class SetupController extends Controller.extend(ValidationEngine)
                 // Connection errors don't return proper status message, only req.body
                 this.notifications.showAlert('There was a problem on the server.', {type: 'error', key: 'session.authenticate.failed'});
             }
+
+            return false;
         }
     })
         authenticate;
diff --git a/ghost/admin/app/controllers/signup.js b/ghost/admin/app/controllers/signup.js
index 37241b7519..5e8fcb7535 100644
--- a/ghost/admin/app/controllers/signup.js
+++ b/ghost/admin/app/controllers/signup.js
@@ -53,6 +53,8 @@ export default Controller.extend({
             } catch (error) {
                 notifications.showAPIError(error, {key: 'signup.complete'});
             }
+
+            return true;
         } catch (error) {
             // ValidationEngine throws undefined
             if (!error) {
@@ -68,6 +70,8 @@ export default Controller.extend({
             } else {
                 notifications.showAPIError(error, {key: 'signup.complete'});
             }
+
+            return false;
         }
     }).drop(),
 
diff --git a/ghost/admin/app/templates/setup.hbs b/ghost/admin/app/templates/setup.hbs
index 2a22d7c630..5110340e81 100644
--- a/ghost/admin/app/templates/setup.hbs
+++ b/ghost/admin/app/templates/setup.hbs
@@ -11,7 +11,6 @@
                 <label for="blog-title">Site title</label>
                 <span class="gh-input-icon gh-icon-content">
                     <GhTrimFocusInput
-                        @tabindex="1"
                         @type="text"
                         @id="blog-title"
                         @name="blog-title"
@@ -29,7 +28,6 @@
                 <label for="name">Full name</label>
                 <span class="gh-input-icon gh-icon-user">
                     <GhTextInput
-                        @tabindex="2"
                         @id="name"
                         @name="name"
                         @placeholder="Jamie Larson"
@@ -47,7 +45,6 @@
                 <label for="email">Email address</label>
                 <span class="gh-input-icon gh-icon-mail">
                     <GhTextInput
-                        @tabindex="3"
                         @type="email"
                         @id="email"
                         @name="email"
@@ -66,7 +63,6 @@
                 <label for="password">Password</label>
                 <span class="gh-input-icon gh-icon-lock">
                     <GhTextInput
-                        @tabindex="4"
                         @type="password"
                         @id="password"
                         @name="password"
@@ -81,7 +77,14 @@
                 <GhErrorMessage @errors={{this.errors}} @property="password" />
             </GhFormGroup>
 
-            <GhTaskButton @task={{this.setupTask}} @type="submit" @tabindex="5" @data-test-button="setup" @class="gh-btn gh-btn-black gh-btn-signup gh-btn-block gh-btn-icon" as |task|>
+            <GhTaskButton
+                @task={{this.setupTask}}
+                @showSuccess={{false}}
+                type="submit"
+                class="gh-btn gh-btn-black gh-btn-signup gh-btn-block gh-btn-icon"
+                data-test-button="setup"
+                as |task|
+            >
                 {{#if task.isRunning}}
                     <span>{{svg-jar "spinner" class="gh-icon-spinner gh-btn-icon-no-margin"}}</span>
                 {{else}}
diff --git a/ghost/admin/app/templates/signup.hbs b/ghost/admin/app/templates/signup.hbs
index 92449d489e..06d52fca82 100644
--- a/ghost/admin/app/templates/signup.hbs
+++ b/ghost/admin/app/templates/signup.hbs
@@ -12,7 +12,6 @@
                     <label for="name">Full name</label>
                     <span class="gh-input-icon gh-icon-user">
                         <GhTrimFocusInput
-                            @tabindex="1"
                             @type="text"
                             @id="display-name"
                             @name="display-name"
@@ -32,7 +31,6 @@
                     <label for="email">Email address</label>
                     <span class="gh-input-icon gh-icon-mail">
                         <GhTextInput
-                            @tabindex="2"
                             @type="text"
                             @id="username"
                             @name="username"
@@ -52,7 +50,6 @@
                     <label for="password">Password</label>
                     <span class="gh-input-icon gh-icon-lock">
                         <GhTextInput
-                            @tabindex="3"
                             @type="password"
                             @id="password"
                             @name="password"
@@ -68,8 +65,18 @@
                     <GhErrorMessage @errors={{this.signupDetails.errors}} @property="password" />
                 </GhFormGroup>
 
-                <GhTaskButton @buttonText="Create Account &rarr;" @type="submit" @form="signup" @defaultClick={{true}} @runningText="Creating"
-                    @task={{this.signup}} @data-test-button="signup" @class="gh-btn gh-btn-signup gh-btn-block gh-btn-icon" @tabindex="3" style={{accent-color-background}} />
+                <GhTaskButton
+                    @buttonText="Create Account &rarr;"
+                    @runningText="Creating"
+                    @task={{this.signup}}
+                    @defaultClick={{true}}
+                    @showSuccess={{false}}
+                    type="submit"
+                    form="signup"
+                    class="gh-btn gh-btn-signup gh-btn-block gh-btn-icon"
+                    style={{accent-color-background}}
+                    data-test-button="signup"
+                />
             </form>
             {{#if this.flowErrors}}
                 <p class="main-error">{{this.flowErrors}}&nbsp;</p>