Added error handling to publish flow confirm step

closes https://github.com/TryGhost/Team/issues/1555
closes https://github.com/TryGhost/Team/issues/1588

- added task to the confirm component's backing class so it can be wrapped in step-specific error handling
- added display of general/email error message above the confirm button
- fixed error state of the confirm button showing as green and having incorrect spacing due to the icon being hidden in CSS rather than not displayed

ghost/admin/app/components/editor-labs/modals/publish-flow/confirm.hbs

@@ -54,13 +54,38 @@
      This is it.
 </p>
 
+{{#if this.errorMessage}}
+    <p class="error gh-box gh-box-error mt3 mb3">
+        {{svg-jar "warning"}}
+        {{this.errorMessage}}
+    </p>
+{{/if}}
+
+{{#if this.emailErrorMessage}}
+    <p class="error gh-box gh-box-error mt3 mb3">
+        {{svg-jar "warning"}}
+
+        {{#if @publishOptions.willOnlyEmail}}
+            Your post has been created but the email failed to send.
+        {{else}}
+            Your post has been published but the email failed to send.
+        {{/if}}
+
+        Please verify your email settings if the error persists.
+        <br><br>
+        Email error: {{this.emailErrorMessage}}
+    </p>
+{{/if}}
+
 <div class="gh-publish-cta">
     <GhTaskButton
-        @task={{@saveTask}}
+        @task={{this.confirmTask}}
         @buttonText={{this.confirmButtonText}}
         @runningText={{if @publishOptions.willOnlyEmail "Sending" "Publishing"}}
         @successText={{if @publishOptions.willOnlyEmail "Sent" "Published"}}
-        @class="gh-btn gh-btn-pulse gh-btn-large"
+        @class="gh-btn gh-btn-large"
+        @idleClass="gh-btn-pulse"
+        @showIcon={{false}}
     />
     <button type="button" class="gh-btn gh-btn-link gh-btn-large gh-publish-cta-secondary" {{on "click" @cancel}}>Back to settings</button>
 </div>

ghost/admin/app/components/editor-labs/modals/publish-flow/confirm.js

@@ -1,10 +1,23 @@
 import Component from '@glimmer/component';
 import moment from 'moment';
+import {action} from '@ember/object';
+import {htmlSafe} from '@ember/template';
+import {isArray} from '@ember/array';
+import {isServerUnreachableError} from 'ghost-admin/services/ajax';
 import {inject as service} from '@ember/service';
+import {task} from 'ember-concurrency';
+import {tracked} from '@glimmer/tracking';
+
+function isString(str) {
+    return toString.call(str) === '[object String]';
+}
 
 export default class PublishFlowOptions extends Component {
     @service settings;
 
+    @tracked errorMessage;
+    @tracked emailErrorMessage;
+
     // store any derived state from PublishOptions on creation so the copy
     // doesn't change whilst the post is saving
     willEmail = this.args.publishOptions.willEmail;
@@ -32,4 +45,45 @@ export default class PublishFlowOptions extends Component {
 
         return buttonText;
     }
+
+    @task({drop: true})
+    *confirmTask() {
+        this.errorMessage = null;
+        this.emailErrorMessage = null;
+
+        try {
+            yield this.args.saveTask.perform();
+        } catch (e) {
+            if (e === undefined && this.publishOptions.post.errors.length !== 0) {
+                // validation error
+                const validationError = this.args.publishOptions.post.errors.messages[0];
+                this.errorMessage = `Validation failed: ${validationError}`;
+                return false;
+            }
+
+            if (e?.name === 'EmailFailedError') {
+                this.emailErrorMessage = e.message;
+                return false;
+            }
+
+            let errorMessage = '';
+
+            if (isServerUnreachableError(e)) {
+                errorMessage = 'Unable to connect, please check your connection and try again';
+            } else if (e && isString(e)) {
+                errorMessage = e;
+            } else if (e && isArray(e)) {
+                // This is here because validation errors are returned as an array
+                // TODO: remove this once validations are fixed
+                errorMessage = e[0];
+            } else if (e?.payload?.errors?.[0].message) {
+                errorMessage = e.payload.errors[0].message;
+            } else {
+                errorMessage = 'Unknown Error';
+            }
+
+            this.errorMessage = htmlSafe(errorMessage);
+            return false;
+        }
+    }
 }