feat: add support for login page image via cm

Author: arunjaindev

.env

@@ -64,3 +64,4 @@ FEATURE_APPLICATION_TEMPLATES_ENABLE=true
 FEATURE_CODE_MIRROR_ENABLE=false
 FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE=false
 GATEKEEPER_URL=https://license.devtron.ai/dashboard
+LOGIN_PAGE_IMAGE=

config.md

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.11.2",
+        "@devtron-labs/devtron-fe-common-lib": "1.11.2-patch-1",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

package.json

@@ -32,6 +32,7 @@ import {
     SSOProviderIcon,
     Icon,
     LoginBanner,
+    SnowConfetti,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { importComponentFromFELibrary } from '@Components/common'
 import { URLS, TOKEN_COOKIE_NAME } from '../../config'
@@ -177,7 +178,18 @@ const Login = () => {
     return (
         <div className="full-height-width login dc__grid-half bg__secondary">
             <div className="flexbox p-12">
-                <LoginBanner />
+                {window._env_.LOGIN_PAGE_IMAGE ? (
+                    <div
+                        style={{
+                            backgroundImage: `url(${window._env_.LOGIN_PAGE_IMAGE})`,
+                        }}
+                        className="login-image-container flex br-12 border__primary bg__primary h-100 w-100 dc__overflow-hidden"
+                    >
+                        <SnowConfetti />
+                    </div>
+                ) : (
+                    <LoginBanner />
+                )}
             </div>
             <div className="flex">
                 <div className="login-card__wrapper dc__overflow-hidden br-12 mw-420 bg__primary dc__border">

src/components/login/Login.tsx

@@ -26,6 +26,14 @@
             color: var(--N900)
         }
     }
+
+    .login-image-container {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        height: 100%;
+        width: 100%;
+    }
 }
 
 // SSO login & GitOps configuration css

src/components/login/login.scss

@@ -168,6 +168,7 @@ if (!window || !window._env_) {
         FEATURE_CODE_MIRROR_ENABLE: true,
         FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE: false,
         GATEKEEPER_URL: 'https://license.devtron.ai/dashboard',
+        LOGIN_PAGE_IMAGE: '',
     }
 }
 

src/index.tsx

@@ -1126,10 +1126,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/[email protected]":
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.11.2.tgz#ab78ddcb27798f9b617f92b009b99375b5b9696d"
-  integrity sha512-iNO9NeNde3SkAslEgWSppj7g7KHGUcC2hayH3M5i9aOIabd9Qqyx9+LWNZ4g69mfUmYgFawiMVsMsyb9ntlFdQ==
+"@devtron-labs/[email protected]-patch-1":
+  version "1.11.2-patch-1"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.11.2-patch-1.tgz#b009ccb9600f03c4bf5d21bdd0f9ce8325a61684"
+  integrity sha512-lG1XnL7ih9r+2AO7UHweIJqOyhsVWXL963j5hVyU1b5/b6TbNP3/yzr5hnk9cuzBpvmQp0BcL8twEce8l78f+w==
   dependencies:
     "@codemirror/lang-json" "6.0.1"
     "@codemirror/lang-yaml" "6.1.2"