Rancher UI branding customisation is not persistent on the login screen

cypress/e2e/po/components/password.po.ts

@@ -20,4 +20,13 @@ export default class PasswordPo extends ComponentPo {
     return this.self()
       .find('input');
   }
+
+  /**
+   * Return the SHOW anchor element
+   * @returns HTML Element
+   */
+  showBtn(): Cypress.Chainable {
+    return this.self()
+      .find('.addon a');
+  }
 }

cypress/e2e/po/pages/login-page.po.ts

@@ -44,7 +44,7 @@ export class LoginPagePo extends PagePo {
     });
   }
 
-  private submitButton(): AsyncButtonPo {
+  submitButton(): AsyncButtonPo {
     return new AsyncButtonPo('[data-testid="login-submit"]', this.self());
   }
 

cypress/e2e/tests/pages/global-settings/branding.spec.ts

@@ -369,6 +369,18 @@ describe('Branding', { testIsolation: 'off' }, () => {
       expect(background).to.satisfy((b) => b.startsWith(settings.primaryColor.newRGB));
     });
 
+    // check that login page has new styles applied
+    // https://github.com/rancher/dashboard/issues/10788
+    loginPage.goTo();
+
+    loginPage.submitButton().self().should('have.css', 'background').should((background: string) => {
+      expect(background).to.satisfy((b) => b.startsWith(settings.primaryColor.newRGB));
+    });
+
+    cy.login();
+    HomePagePo.goToAndWaitForGet();
+    BrandingPagePo.navTo();
+
     // Reset
     brandingPage.primaryColorPicker().set(settings.primaryColor.original);
     brandingPage.primaryColorCheckbox().set();
@@ -395,6 +407,18 @@ describe('Branding', { testIsolation: 'off' }, () => {
     brandingPage.linkColorPicker().value().should('eq', settings.linkColor.new);
     brandingPage.linkColorPicker().previewColor().should('eq', settings.linkColor.newRGB);
 
+    // check that login page has new styles applied
+    // https://github.com/rancher/dashboard/issues/10788
+    loginPage.goTo();
+
+    loginPage.password().showBtn().should('have.css', 'color').should((color: string) => {
+      expect(color).to.satisfy((b) => b.startsWith(settings.linkColor.newRGB));
+    });
+
+    cy.login();
+    HomePagePo.goToAndWaitForGet();
+    BrandingPagePo.navTo();
+
     // Reset
     brandingPage.linkColorPicker().set(settings.linkColor.original);
     brandingPage.linkColorCheckbox().set();

shell/mixins/brand.js

@@ -22,22 +22,28 @@ export default {
 
     // Ensure we read the settings even when we are not authenticated
     try {
-      this.globalSettings = await fetchInitialSettings(this.$store);
+      await fetchInitialSettings(this.$store);
     } catch (e) {}
 
     // Setting this up front will remove `computed` churn, and we only care that we've initialised them
     this.haveAppsAndSettings = !!this.apps && !!this.globalSettings;
   },
 
   data() {
-    return {
-      apps: null, globalSettings: null, haveAppsAndSettings: null
-    };
+    return { apps: null, haveAppsAndSettings: null };
   },
 
   computed: {
     ...mapGetters({ loggedIn: 'auth/loggedIn' }),
 
+    // added to fix https://github.com/rancher/dashboard/issues/10788
+    // because on logout the brand mixin is mounted, but then a management store reset happens
+    // since login view get loaded, another fetchInitialSettings get's done
+    // which in turn will populate again globalSettings
+    globalSettings() {
+      return this.$store.getters['management/all'](MANAGEMENT.SETTING);
+    },
+
     brand() {
       const setting = this.globalSettings?.find((gs) => gs.id === SETTING.BRAND);
 
@@ -89,57 +95,72 @@ export default {
   },
 
   watch: {
-    color(neu) {
-      if (neu) {
-        this.setCustomColor(neu);
-      } else {
-        this.removeCustomColor();
-      }
+    color: {
+      handler(neu) {
+        if (neu) {
+          this.setCustomColor(neu);
+        } else {
+          this.removeCustomColor();
+        }
+      },
+      immediate: true
     },
-    linkColor(neu) {
-      if (neu) {
-        this.setCustomColor(neu, 'link');
-      } else {
-        this.removeCustomColor('link');
-      }
+    linkColor: {
+      handler(neu) {
+        if (neu) {
+          this.setCustomColor(neu, 'link');
+        } else {
+          this.removeCustomColor('link');
+        }
+      },
+      immediate: true
     },
-    theme() {
-      if (this.color) {
-        this.setCustomColor(this.color);
-      }
-      if (this.linkColor) {
-        this.setCustomColor(this.linkColor, 'link');
-      }
-      this.setBodyClass();
+    theme: {
+      handler() {
+        if (this.color) {
+          this.setCustomColor(this.color);
+        }
+        if (this.linkColor) {
+          this.setCustomColor(this.linkColor, 'link');
+        }
+        this.setBodyClass();
+      },
+      immediate: true
     },
 
-    cspAdapter(neu) {
-      if (!this.canCalcCspAdapter) {
-        return;
-      }
-
-      // The brand setting will only get updated if...
-      if (neu && !this.brand) {
-        // 1) There should be a brand... but there's no brand setting
-        const brandSetting = this.globalSettings?.find((gs) => gs.id === SETTING.BRAND);
+    cspAdapter: {
+      handler(neu) {
+        if (!this.canCalcCspAdapter) {
+          return;
+        }
 
-        if (brandSetting) {
-          brandSetting.value = 'csp';
-          brandSetting.save();
-        } else {
-          const schema = this.$store.getters['management/schemaFor'](MANAGEMENT.SETTING);
-          const url = schema?.linkFor('collection');
+        // The brand setting will only get updated if...
+        if (neu && !this.brand) {
+          // 1) There should be a brand... but there's no brand setting
+          const brandSetting = this.globalSettings?.find((gs) => gs.id === SETTING.BRAND);
 
-          if (url) {
-            this.$store.dispatch('management/create', {
-              type: MANAGEMENT.SETTING, metadata: { name: SETTING.BRAND }, value: 'csp', default: ''
-            }).then((setting) => setting.save());
+          if (brandSetting) {
+            brandSetting.value = 'csp';
+            brandSetting.save();
+          } else {
+            const schema = this.$store.getters['management/schemaFor'](MANAGEMENT.SETTING);
+            const url = schema?.linkFor('collection');
+
+            if (url) {
+              this.$store.dispatch('management/create', {
+                type: MANAGEMENT.SETTING, metadata: { name: SETTING.BRAND }, value: 'csp', default: ''
+              }).then((setting) => setting.save());
+            }
           }
         }
-      }
+      },
+      immediate: true
     },
-    brand() {
-      this.setBodyClass();
+    brand: {
+      handler() {
+        this.setBodyClass();
+      },
+      immediate: true
     }
 
   },