Added validation to not allow empty accent color (#1863)

closes https://github.com/TryGhost/Team/issues/535

To ensure accent color is always set for a site, this updates brand settings screen and launch wizard to not allow empty accent color to be set or updated, adding the relevant error on the page which needs to be fixed before saving or continuing on the screens.

- Shows error message for empty accent color on brand settings and launch wizard
- Shows error message for invalid accent color on brand settings and launch wizard
- Blocks save and continue with invalid/empty accent color on brand settings and launch wizard

Co-authored-by: Peter Zimon <zimo@ghost.org>

ghost/admin/app/components/gh-brand-settings-form.hbs

@@ -1,11 +1,14 @@
 <div class="gh-stack" ...attributes>
-    <div class="gh-stack-item gh-setting-first">
+    <div class="gh-stack-item gh-setting-first gh-accent-color">
         <div class="gh-setting-content">
             <div class="gh-setting-title">Accent color</div>
             <div class="gh-setting-desc">Primary color used in your publication theme</div>
             {{#each uploader.errors as |error|}}
                 <div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
             {{/each}}
+            <div class="w-100 flex flex-column flex-row-ns">
+                <GhErrorMessage @errors={{settings.errors}} @property="accentColor" class="w-100 red"/>
+            </div>
         </div>
 
         <div class="gh-setting-action" data-test-setting="accentColor">
@@ -18,7 +21,7 @@
                 <div class="input-color">
                     <input
                         type="text"
-                        placeholder="abcdef"
+                        placeholder="15171A"
                         name="accent-color"
                         autocorrect="off"
                         maxlength="6"

ghost/admin/app/components/gh-brand-settings-form.js

@@ -56,6 +56,7 @@ export default class GhBrandSettingsFormComponent extends Component {
     }
 
     willDestroy() {
+        this.settings.errors.remove('accentColor');
         this.settings.rollbackAttributes();
     }
 
@@ -92,9 +93,9 @@ export default class GhBrandSettingsFormComponent extends Component {
                 return;
             }
 
-            // clear out the accent color
-            this.settings.set('accentColor', '');
-            this.updatePreviewTask.perform();
+            // Don't allow empty accent color
+            this.settings.errors.add('accentColor', 'Please select an accent color');
+            this.settings.hasValidated.pushObject('accentColor');
             return;
         }
 
@@ -115,7 +116,7 @@ export default class GhBrandSettingsFormComponent extends Component {
             this.settings.set('accentColor', newColor);
             this.updatePreviewTask.perform();
         } else {
-            this.settings.errors.add('accentColor', 'The colour should be in valid hex format');
+            this.settings.errors.add('accentColor', 'Please enter a color in hex format');
             this.settings.hasValidated.pushObject('accentColor');
         }
     }

ghost/admin/app/components/gh-launch-wizard/customise-design.js

@@ -8,11 +8,15 @@ export default class GhLaunchWizardCustomiseDesignComponent extends Component {
 
     willDestroy() {
         this.settings.rollbackAttributes();
+        this.settings.errors.remove('accentColor');
     }
 
     @task
     *saveAndContinueTask() {
         try {
+            if (this.settings.errors && this.settings.errors.length !== 0) {
+                return;
+            }
             yield this.settings.save();
             this.args.nextStep();
         } catch (error) {

ghost/admin/app/components/modal-branding.js

@@ -27,6 +27,9 @@ export default ModalComponent.extend({
 
     saveTask: task(function* () {
         try {
+            if (this.get('settings.errors').length !== 0) {
+                return;
+            }
             yield this.settings.save();
             this.closeModal();
             return true;

ghost/admin/app/styles/layouts/settings.css

@@ -1344,3 +1344,13 @@ p.theme-validation-details {
     width: 50px;
     height: 50px;
 }
+
+.gh-branding-settings .gh-accent-color .gh-setting-action {
+    align-self: flex-start;
+    margin-top: 22px;
+}
+
+.gh-branding-settings .gh-accent-color .response {
+    margin: -8px 0 0;
+    font-size: 1.3rem;
+}

ghost/admin/app/styles/patterns/buttons.css

@@ -149,13 +149,13 @@ fieldset[disabled] .gh-btn {
 
 .gh-btn-red:hover {
     color: #fff;
-    background: color-mod(var(--red) l(-4%));
+    background: color-mod(var(--red) l(-4%)) !important;
 }
 
 /* When clicked or focused with keyboard */
 .gh-btn-red:active,
 .gh-btn-red:focus {
-    background: color-mod(var(--red) l(-7%));
+    background: color-mod(var(--red) l(-7%)) !important;
 }
 
 /* Outline button