Add configuration for centered login (#30)

Author: akileng56

src/config-schema.ts

@@ -77,4 +77,19 @@ export const configSchema = {
       _description: "Alt text, shown on hover",
     },
   },
+  showCenteredLogin: {
+    _type: Type.Boolean,
+    _description: "Whether to show the login screen centered.",
+    _default: false,
+  },
+  supportEmail: {
+    _type: Type.String,
+    _default: "emrtalk@musph.ac.ug",
+    _description: "Support email for the system",
+  },
+  footerOpenMRSLogo: {
+    _type: Type.String,
+    _default: "omrs-logo-partial-mono",
+    _description: "Choice of powered by OpenMRS logo to render",
+  },
 };

src/login/background.wrapper.component.tsx

@@ -4,22 +4,21 @@ import { useConfig } from "@openmrs/esm-framework";
 const BackgroundWrapper = ({ children }) => {
   const config = useConfig();
 
-  return config?.loginBackground ? (
+  return config?.showCenteredLogin ? (
     <>
-      <img
-        src={config?.loginBackground?.src}
-        alt={config?.loginBackground?.alt || "Background Image"}
-        className={styles.backgroundImage}
-      />
-      <div className={styles.backgroundContainer}>
+      <div className={styles.centeredLoginBackgroundContainer}>
+        <div
+          style={{ backgroundImage: `url(${config?.loginBackground?.src})` }}
+          className={styles.centeredLoginOverlay}
+        ></div>
         <div className={styles.contentOverlay}>{children}</div>
       </div>
     </>
   ) : (
     <>
       <img
-        src="/openmrs/spa/background.png"
-        alt="Fallback Background"
+        src={config?.loginBackground?.src ?? "/openmrs/spa/background.png"}
+        alt={config?.loginBackground?.alt || "Background Image"}
         className={styles.backgroundImage}
       />
       <div className={styles.backgroundContainer}>

src/login/login.component.tsx

@@ -237,26 +237,32 @@ const Login: React.FC<LoginReferrer> = () => {
               <span className={styles.link}>
                 © {new Date().getFullYear()} All rights reserved
               </span>
-              <span className={styles.link}>
-                <a href="http://www.health.go.ug/">
-                  Ministry of Health - Republic of Uganda
-                </a>
-              </span>
+              {!config?.showCenteredLogin ? (
+                <span className={styles.link}>
+                  <a href="http://www.health.go.ug/">
+                    Ministry of Health - Republic of Uganda
+                  </a>
+                </span>
+              ) : null}
             </div>
             <span className={styles.link}>
               Need help? Contact us at{" "}
-              <a href="mailto:emrtalk@musph.ac.ug">emrtalk@musph.ac.ug</a> for
+              <a href={`mailto:${config?.supportEmail}`}>
+                {config?.supportEmail}
+              </a>{" "}
               support
             </span>
-            <span className={styles.link}>
-              Go to <a href={`/openmrs/login.htm`}> Legacy UI</a>
-            </span>
+            {!config?.showCenteredLogin ? (
+              <span className={styles.link}>
+                Go to <a href={`/openmrs/login.htm`}> Legacy UI</a>
+              </span>
+            ) : null}
             <div className={styles.attribution}>
-              <span className={styles["powered-by-txt"]}>
+              <span className={styles.poweredByTxt}>
                 {t("poweredBy", "Powered by")}
               </span>
-              <svg role="img" className={styles["powered-by-logo"]}>
-                <use xlinkHref="#omrs-logo-partial-mono"></use>
+              <svg className={styles["powered-by-logo"]}>
+                <use xlinkHref={`#${config?.footerOpenMRSLogo}`}></use>
               </svg>
             </div>
           </div>

src/login/login.scss

@@ -2,7 +2,7 @@
 @use "@carbon/styles/scss/type";
 @import "../root.scss";
 
-.backgroundContainer {
+.backgroundContainer, .centeredLoginBackgroundContainer {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -119,7 +119,7 @@
     max-width: 100%;
 }
 
-.powered-by-txt {
+.poweredByTxt {
     @extend .caption01;
     text-align: center;
     color: $color-gray-70;
@@ -219,3 +219,43 @@
     font-size: var(--cds-label-02-font-size, 1.375rem);
     font-weight: var(--cds-label-02-font-weight, 900);
 }
+
+.centeredLoginOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.centeredLoginBackgroundContainer {
+    :global(.cds--tile) {
+        background-color: #f4f4f4a1;
+    }
+
+    :global(.cds--text-input) {
+        background-color: #f4f4f475;
+    }
+
+    :global(.cds--label) {
+        font-weight: bold;
+      color: $color-gray-100
+    }
+
+    .poweredByTxt {
+        color: #ffffff;
+        font-weight: bold;
+    }
+
+    .link {
+        color: #ffffff;
+        a {
+            color: #ffffff;
+            font-weight: bold;
+        }
+    }
+
+}