Update SUSE login banner and support custom image style

shell/assets/brand/suse/metadata.json

@@ -3,5 +3,8 @@
   "banner": {
     "bannerClass": "suse-banner-graphic",
     "textAlign": "left"
+  },
+  "login": {
+    "bannerClass": "suse-login-banner-graphic"
   }
 }

shell/assets/styles/themes/_suse.scss

@@ -92,6 +92,11 @@
       object-position: right;
     }
   }
+
+  // SUSE Theme aligns graphic to left so that the container ship stays visible
+  .suse-login-banner-graphic {
+    object-position: left;
+  }
 }
 
 // Ensure that with a small window size, the banner centers, so that the text does not overlay

shell/pages/auth/login.vue

@@ -32,6 +32,7 @@ import loadPlugins from '@shell/plugins/plugin';
 import Loading from '@shell/components/Loading';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import TabTitle from '@shell/components/TabTitle.vue';
+import { getBrandMeta } from '@shell/utils/brand';
 
 export default {
   name:       'Login',
@@ -134,6 +135,19 @@ export default {
     hasLoginMessage() {
       return this.errorToDisplay || this.loggedOut || this.timedOut;
     },
+
+    customizations() {
+      const globalSettings = this.$store.getters['management/all'](MANAGEMENT.SETTING);
+      const setting = globalSettings?.find((gs) => gs.id === SETTING.BRAND);
+      const brandMeta = getBrandMeta(setting?.value);
+      const login = brandMeta?.login || {};
+
+      return login;
+    },
+
+    bannerClass() {
+      return this.customizations.bannerClass;
+    }
   },
 
   async fetch() {
@@ -524,6 +538,7 @@ export default {
         </div>
       </div>
       <BrandImage
+        :class="bannerClass"
         class="col span-6 landscape"
         data-testid="login-landscape__img"
         file-name="login-landscape.svg"