From 85c2628049522aca1b07412b54a80d8069e53d09 Mon Sep 17 00:00:00 2001
From: Rishabh Garg <zrishabhgarg@gmail.com>
Date: Tue, 9 Mar 2021 23:55:06 +0530
Subject: [PATCH] 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  |  7 +++++--
 ghost/admin/app/components/gh-brand-settings-form.js   |  9 +++++----
 .../components/gh-launch-wizard/customise-design.js    |  4 ++++
 ghost/admin/app/components/modal-branding.js           |  3 +++
 ghost/admin/app/styles/layouts/settings.css            | 10 ++++++++++
 ghost/admin/app/styles/patterns/buttons.css            |  4 ++--
 6 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/ghost/admin/app/components/gh-brand-settings-form.hbs b/ghost/admin/app/components/gh-brand-settings-form.hbs
index a7a5474d37..db98317888 100644
--- a/ghost/admin/app/components/gh-brand-settings-form.hbs
+++ b/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"
diff --git a/ghost/admin/app/components/gh-brand-settings-form.js b/ghost/admin/app/components/gh-brand-settings-form.js
index b4c27ca919..6cfc6005a6 100644
--- a/ghost/admin/app/components/gh-brand-settings-form.js
+++ b/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');
         }
     }
diff --git a/ghost/admin/app/components/gh-launch-wizard/customise-design.js b/ghost/admin/app/components/gh-launch-wizard/customise-design.js
index 330bf5b158..ab1b24173b 100644
--- a/ghost/admin/app/components/gh-launch-wizard/customise-design.js
+++ b/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) {
diff --git a/ghost/admin/app/components/modal-branding.js b/ghost/admin/app/components/modal-branding.js
index 1d5ed60952..d078ab702a 100644
--- a/ghost/admin/app/components/modal-branding.js
+++ b/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;
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 20a873a3f0..bedb3f352d 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css
index de26f9c99b..9495905a95 100644
--- a/ghost/admin/app/styles/patterns/buttons.css
+++ b/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