Skip to content

Commit de1babb

Browse files
authored
Add configuration for centered login (#30)
1 parent 90182ea commit de1babb

File tree

4 files changed

+83
-23
lines changed

4 files changed

+83
-23
lines changed

src/config-schema.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,4 +77,19 @@ export const configSchema = {
7777
_description: "Alt text, shown on hover",
7878
},
7979
},
80+
showCenteredLogin: {
81+
_type: Type.Boolean,
82+
_description: "Whether to show the login screen centered.",
83+
_default: false,
84+
},
85+
supportEmail: {
86+
_type: Type.String,
87+
_default: "emrtalk@musph.ac.ug",
88+
_description: "Support email for the system",
89+
},
90+
footerOpenMRSLogo: {
91+
_type: Type.String,
92+
_default: "omrs-logo-partial-mono",
93+
_description: "Choice of powered by OpenMRS logo to render",
94+
},
8095
};

src/login/background.wrapper.component.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,21 @@ import { useConfig } from "@openmrs/esm-framework";
44
const BackgroundWrapper = ({ children }) => {
55
const config = useConfig();
66

7-
return config?.loginBackground ? (
7+
return config?.showCenteredLogin ? (
88
<>
9-
<img
10-
src={config?.loginBackground?.src}
11-
alt={config?.loginBackground?.alt || "Background Image"}
12-
className={styles.backgroundImage}
13-
/>
14-
<div className={styles.backgroundContainer}>
9+
<div className={styles.centeredLoginBackgroundContainer}>
10+
<div
11+
style={{ backgroundImage: `url(${config?.loginBackground?.src})` }}
12+
className={styles.centeredLoginOverlay}
13+
></div>
1514
<div className={styles.contentOverlay}>{children}</div>
1615
</div>
1716
</>
1817
) : (
1918
<>
2019
<img
21-
src="/openmrs/spa/background.png"
22-
alt="Fallback Background"
20+
src={config?.loginBackground?.src ?? "/openmrs/spa/background.png"}
21+
alt={config?.loginBackground?.alt || "Background Image"}
2322
className={styles.backgroundImage}
2423
/>
2524
<div className={styles.backgroundContainer}>

src/login/login.component.tsx

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -237,26 +237,32 @@ const Login: React.FC<LoginReferrer> = () => {
237237
<span className={styles.link}>
238238
© {new Date().getFullYear()} All rights reserved
239239
</span>
240-
<span className={styles.link}>
241-
<a href="http://www.health.go.ug/">
242-
Ministry of Health - Republic of Uganda
243-
</a>
244-
</span>
240+
{!config?.showCenteredLogin ? (
241+
<span className={styles.link}>
242+
<a href="http://www.health.go.ug/">
243+
Ministry of Health - Republic of Uganda
244+
</a>
245+
</span>
246+
) : null}
245247
</div>
246248
<span className={styles.link}>
247249
Need help? Contact us at{" "}
248-
<a href="mailto:emrtalk@musph.ac.ug">emrtalk@musph.ac.ug</a> for
250+
<a href={`mailto:${config?.supportEmail}`}>
251+
{config?.supportEmail}
252+
</a>{" "}
249253
support
250254
</span>
251-
<span className={styles.link}>
252-
Go to <a href={`/openmrs/login.htm`}> Legacy UI</a>
253-
</span>
255+
{!config?.showCenteredLogin ? (
256+
<span className={styles.link}>
257+
Go to <a href={`/openmrs/login.htm`}> Legacy UI</a>
258+
</span>
259+
) : null}
254260
<div className={styles.attribution}>
255-
<span className={styles["powered-by-txt"]}>
261+
<span className={styles.poweredByTxt}>
256262
{t("poweredBy", "Powered by")}
257263
</span>
258-
<svg role="img" className={styles["powered-by-logo"]}>
259-
<use xlinkHref="#omrs-logo-partial-mono"></use>
264+
<svg className={styles["powered-by-logo"]}>
265+
<use xlinkHref={`#${config?.footerOpenMRSLogo}`}></use>
260266
</svg>
261267
</div>
262268
</div>

src/login/login.scss

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@use "@carbon/styles/scss/type";
33
@import "../root.scss";
44

5-
.backgroundContainer {
5+
.backgroundContainer, .centeredLoginBackgroundContainer {
66
display: flex;
77
align-items: center;
88
justify-content: center;
@@ -119,7 +119,7 @@
119119
max-width: 100%;
120120
}
121121

122-
.powered-by-txt {
122+
.poweredByTxt {
123123
@extend .caption01;
124124
text-align: center;
125125
color: $color-gray-70;
@@ -219,3 +219,43 @@
219219
font-size: var(--cds-label-02-font-size, 1.375rem);
220220
font-weight: var(--cds-label-02-font-weight, 900);
221221
}
222+
223+
.centeredLoginOverlay {
224+
position: absolute;
225+
top: 0;
226+
left: 0;
227+
width: 100%;
228+
height: 100%;
229+
background-size: cover;
230+
background-repeat: no-repeat;
231+
background-position: center;
232+
}
233+
234+
.centeredLoginBackgroundContainer {
235+
:global(.cds--tile) {
236+
background-color: #f4f4f4a1;
237+
}
238+
239+
:global(.cds--text-input) {
240+
background-color: #f4f4f475;
241+
}
242+
243+
:global(.cds--label) {
244+
font-weight: bold;
245+
color: $color-gray-100
246+
}
247+
248+
.poweredByTxt {
249+
color: #ffffff;
250+
font-weight: bold;
251+
}
252+
253+
.link {
254+
color: #ffffff;
255+
a {
256+
color: #ffffff;
257+
font-weight: bold;
258+
}
259+
}
260+
261+
}

0 commit comments

Comments
 (0)