(feat) U4X-732: Change login page image and logo to be configurable. (#…

…24)

src/config-schema.ts

@@ -1,3 +1,4 @@
+import _default from "@carbon/react/lib/components/Button/Button";
 import { validators, Type } from "@openmrs/esm-framework";
 
 export const configSchema = {
@@ -49,4 +50,32 @@ export const configSchema = {
       _description: "Alt text, shown on hover",
     },
   },
+  loginBackgroundImage: {
+    src: {
+      _type: Type.String,
+      _default: "/openmrs/spa/background.png",
+      _description:
+        "A path or URL to an image. If null, will use the OpenMRS SVG sprite.",
+      _validators: [validators.isUrl],
+    },
+    alt: {
+      _type: Type.String,
+      _default: "Background",
+      _description: "Alt text, shown on hover",
+    },
+  },
+  loginLogoImage: {
+    src: {
+      _type: Type.String,
+      _default: "/openmrs/spa/updf-logo.jpg",
+      _description:
+        "A path or URL to an image. If null, will use the OpenMRS SVG sprite.",
+      _validators: [validators.isUrl],
+    },
+    alt: {
+      _type: Type.String,
+      _default: "OpenMRS Logo",
+      _description: "Alt text, shown on hover",
+    },
+  },
 };

src/index.ts

@@ -1,5 +1,5 @@
 import { getAsyncLifecycle, defineConfigSchema } from "@openmrs/esm-framework";
-import { configSchema } from "./config-schema";
+import {  configSchema } from "./config-schema";
 
 const moduleName = "@ugandaemr/esm-login-app";
 

src/login/background.wrapper.component.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import styles from "./login.scss";
+import { useConfig } from "@openmrs/esm-framework";
+const BackgroundWrapper = ({ children }) => {
+  const config = useConfig();
+
+  return config?.loginBackgroundImage ? (
+    <>
+      <img
+        src={config?.loginBackgroundImage?.src}
+        alt={config?.loginBackgroundImage?.alt || "Background Image"}
+        className={styles.backgroundImage}
+      />
+      <div className={styles.backgroundContainer}>
+        <div className={styles.contentOverlay}>{children}</div>
+      </div>
+    </>
+  ) : (
+    <>
+      <img
+        src="/openmrs/spa/background.png"
+        alt="Fallback Background"
+        className={styles.backgroundImage}
+      />
+      <div className={styles.backgroundContainer}>
+        <div className={styles.contentOverlay}>{children}</div>
+      </div>
+    </>
+  );
+};
+
+export default BackgroundWrapper;

src/login/login.component.tsx

@@ -23,6 +23,7 @@ import {
 import { getProvider, performLogin, useFacilityName } from "./login.resource";
 import Logo from "./logo.component";
 import styles from "./login.scss";
+import BackgroundWrapper from "./background.wrapper.component";
 
 export interface LoginReferrer {
   referrer?: string;
@@ -157,7 +158,7 @@ const Login: React.FC<LoginReferrer> = () => {
 
   if (config.provider.type === "basic") {
     return (
-      <div className={`canvas ${styles["container"]}`}>
+      <BackgroundWrapper>
         <div className={styles.section}>
           <div className={styles.logoContainer}>
             <Logo className={styles.logo} />
@@ -260,10 +261,9 @@ const Login: React.FC<LoginReferrer> = () => {
             </div>
           </div>
         </div>
-      </div>
+      </BackgroundWrapper>
     );
   }
-
   return null;
 };
 

src/login/login.scss

@@ -1,14 +1,45 @@
 @use "@carbon/colors";
 @use "@carbon/styles/scss/type";
 @import "../root.scss";
-.container {
+
+.backgroundContainer {
     display: flex;
     align-items: center;
-    background-image: url("../assets/background.png");
-    background-repeat: no-repeat;
+    justify-content: center;
     height: 100vh;
-    background-size: cover;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.backgroundImage {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 1;
+}
+
+.contentOverlay {
+    position: relative;
+    z-index: 1;
+    display: flex;
     justify-content: center;
+    align-items: center;
+}
+
+@media screen and (min-width: 1150px) {
+    .backgroundContainer {
+        max-width: 80%;
+        justify-content: right;
+    }
+
+    .backgroundImage {
+        object-fit: fit;
+        /* Fit image for larger screens */
+    }
 }
 
 .logoContainer {
@@ -20,6 +51,7 @@
     @include type.type-style('label-02');
     text-align: center;
     margin-top: 1rem;
+
     >*+* {
         margin-left: 0.5rem;
     }
@@ -33,6 +65,7 @@
     a {
         color: colors.$gray-70;
         text-decoration: none;
+
         &:hover {
             text-decoration: underline;
         }
@@ -45,6 +78,7 @@
     flex-flow: row wrap;
     justify-content: center;
     align-items: center;
+
     svg {
         height: 2rem;
         width: 7rem;
@@ -57,9 +91,11 @@
         background-size: contain;
         justify-content: right;
     }
+
     .login-card {
         border: none;
     }
+
     .footer {
         display: flex;
         flex-direction: column;
@@ -73,8 +109,8 @@
 
 .logo {
     margin-bottom: 2rem;
-    height: 7rem;
-    width: 18.75rem;
+    max-height: 10rem;
+    max-width: 20rem;
 }
 
 .logo-img {
@@ -130,11 +166,13 @@
     flex-direction: column;
     align-items: center;
     width: 18rem;
-     :global(.cds--text-input) {
+
+    :global(.cds--text-input) {
         height: 3rem;
         @extend .label01;
     }
-     :global(.cds--text-input__field-outer-wrapper) {
+
+    :global(.cds--text-input__field-outer-wrapper) {
         width: 18rem;
     }
 }
@@ -154,10 +192,12 @@
 .back-button {
     height: 3rem;
     padding-left: 0rem;
+
     svg {
         margin-right: 0.5rem;
         order: 1;
     }
+
     span {
         order: 2;
     }

src/login/login.test.tsx

@@ -34,11 +34,6 @@ jest.mock("./login.resource", () => ({
   performLogin: jest.fn(),
 }));
 
-const loginLocations = [
-  { uuid: "111", display: "Earth" },
-  { uuid: "222", display: "Mars" },
-];
-
 mockedUseSession.mockReturnValue({ authenticated: false });
 mockedUseConfig.mockReturnValue(mockConfig);