From 6f307c9f7efb5148ad5cf886846285fe1dee673f Mon Sep 17 00:00:00 2001 From: jabahum Date: Tue, 15 Oct 2024 09:47:58 +0300 Subject: [PATCH 1/4] initial commit --- src/config-schema.ts | 26 ++++++ src/index.ts | 2 +- src/login/login.background.component.tsx | 22 +++++ src/login/login.component.tsx | 1 - src/login/login.test.tsx | 5 -- src/login/logo.component.tsx | 102 +++++++++++++---------- 6 files changed, 106 insertions(+), 52 deletions(-) create mode 100644 src/login/login.background.component.tsx diff --git a/src/config-schema.ts b/src/config-schema.ts index 818fc68..9179933 100644 --- a/src/config-schema.ts +++ b/src/config-schema.ts @@ -49,4 +49,30 @@ export const configSchema = { _description: "Alt text, shown on hover", }, }, + loginBackgroundUrl: { + src: { + _type: Type.String, + _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", + }, + }, + loginLogoUrl: { + src: { + _type: Type.String, + _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", + }, + }, }; diff --git a/src/index.ts b/src/index.ts index 94b82de..872c061 100644 --- a/src/index.ts +++ b/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"; diff --git a/src/login/login.background.component.tsx b/src/login/login.background.component.tsx new file mode 100644 index 0000000..f8ebe8e --- /dev/null +++ b/src/login/login.background.component.tsx @@ -0,0 +1,22 @@ +import { type ConfigSchema, useConfig } from "@openmrs/esm-framework"; +import React from "react"; + +const LoginBackground = () => { + const { loginBackgroundUrl } = useConfig(); + + return loginBackgroundUrl.src ? ( + {loginBackgroundUrl.alt} + ) : ( + UgandaEMR+ Background + ); +}; + +export default LoginBackground; diff --git a/src/login/login.component.tsx b/src/login/login.component.tsx index 27c381f..f1b6452 100644 --- a/src/login/login.component.tsx +++ b/src/login/login.component.tsx @@ -263,7 +263,6 @@ const Login: React.FC = () => { ); } - return null; }; diff --git a/src/login/login.test.tsx b/src/login/login.test.tsx index 1cdc3ff..09a21e1 100644 --- a/src/login/login.test.tsx +++ b/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); diff --git a/src/login/logo.component.tsx b/src/login/logo.component.tsx index 470490f..865a56c 100644 --- a/src/login/logo.component.tsx +++ b/src/login/logo.component.tsx @@ -1,50 +1,62 @@ import React from "react"; +import { useConfig } from "@openmrs/esm-framework"; -const Logo = (props) => ( - - - - - - - - - +const Logo = (props) => { + const { loginLogoUrl } = useConfig(); + return loginLogoUrl.src ? ( + {loginLogoUrl.alt} + ) : ( + + + + + + + + + + + + + + + - - - - - - - -); + + ); +}; + export default Logo; From cff2f8d44bb9c27a3eb320749b2bd76308ee71c6 Mon Sep 17 00:00:00 2001 From: jabahum Date: Tue, 15 Oct 2024 11:56:55 +0300 Subject: [PATCH 2/4] add background wrapper --- src/config-schema.ts | 6 ++- src/login/background.wrapper.component.tsx | 28 +++++++++++ src/login/login.background.component.tsx | 22 -------- src/login/login.component.tsx | 5 +- src/login/login.scss | 58 +++++++++++++++++++--- src/login/logo.component.tsx | 8 +-- 6 files changed, 91 insertions(+), 36 deletions(-) create mode 100644 src/login/background.wrapper.component.tsx delete mode 100644 src/login/login.background.component.tsx diff --git a/src/config-schema.ts b/src/config-schema.ts index 9179933..b97c081 100644 --- a/src/config-schema.ts +++ b/src/config-schema.ts @@ -49,9 +49,10 @@ export const configSchema = { _description: "Alt text, shown on hover", }, }, - loginBackgroundUrl: { + loginBackgroundImage: { 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], @@ -62,9 +63,10 @@ export const configSchema = { _description: "Alt text, shown on hover", }, }, - loginLogoUrl: { + 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], diff --git a/src/login/background.wrapper.component.tsx b/src/login/background.wrapper.component.tsx new file mode 100644 index 0000000..cd91775 --- /dev/null +++ b/src/login/background.wrapper.component.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import styles from "./login.scss"; +import { useConfig } from "@openmrs/esm-framework"; +const BackgroundWrapper = ({ children }) => { + const config = useConfig(); + + return config?.loginBackgroundImage ? ( +
+ {config?.loginBackgroundImage?.alt} +
{children}
+
+ ) : ( +
+ {config?.loginBackgroundImage?.alt} +
{children}
+
+ ); +}; + +export default BackgroundWrapper; diff --git a/src/login/login.background.component.tsx b/src/login/login.background.component.tsx deleted file mode 100644 index f8ebe8e..0000000 --- a/src/login/login.background.component.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { type ConfigSchema, useConfig } from "@openmrs/esm-framework"; -import React from "react"; - -const LoginBackground = () => { - const { loginBackgroundUrl } = useConfig(); - - return loginBackgroundUrl.src ? ( - {loginBackgroundUrl.alt} - ) : ( - UgandaEMR+ Background - ); -}; - -export default LoginBackground; diff --git a/src/login/login.component.tsx b/src/login/login.component.tsx index f1b6452..7063ccf 100644 --- a/src/login/login.component.tsx +++ b/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 = () => { if (config.provider.type === "basic") { return ( -
+
@@ -260,7 +261,7 @@ const Login: React.FC = () => {
- + ); } return null; diff --git a/src/login/login.scss b/src/login/login.scss index fddac81..1f5eaf0 100644 --- a/src/login/login.scss +++ b/src/login/login.scss @@ -1,14 +1,51 @@ @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; + /* Ensures the image doesn't overflow */ +} + +.backgroundImage { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + /* Makes sure the image covers the entire container */ + z-index: -1; + /* Ensures the image stays behind the content */ + opacity: 1; + /* Makes sure the image is fully visible */ +} + +.contentOverlay { + position: relative; + /* Ensures content is displayed above the image */ + z-index: 1; + display: flex; justify-content: center; + align-items: center; +} + +@media screen and (min-width: 1150px) { + .backgroundContainer { + max-width: 90%; + justify-content: right; + } + + .backgroundImage { + object-fit: contain; + /* Fit image for larger screens */ + } } .logoContainer { @@ -20,6 +57,7 @@ @include type.type-style('label-02'); text-align: center; margin-top: 1rem; + >*+* { margin-left: 0.5rem; } @@ -33,6 +71,7 @@ a { color: colors.$gray-70; text-decoration: none; + &:hover { text-decoration: underline; } @@ -45,6 +84,7 @@ flex-flow: row wrap; justify-content: center; align-items: center; + svg { height: 2rem; width: 7rem; @@ -57,9 +97,11 @@ background-size: contain; justify-content: right; } + .login-card { border: none; } + .footer { display: flex; flex-direction: column; @@ -130,11 +172,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 +198,12 @@ .back-button { height: 3rem; padding-left: 0rem; + svg { margin-right: 0.5rem; order: 1; } + span { order: 2; } diff --git a/src/login/logo.component.tsx b/src/login/logo.component.tsx index 865a56c..7bbad51 100644 --- a/src/login/logo.component.tsx +++ b/src/login/logo.component.tsx @@ -2,12 +2,12 @@ import React from "react"; import { useConfig } from "@openmrs/esm-framework"; const Logo = (props) => { - const { loginLogoUrl } = useConfig(); - return loginLogoUrl.src ? ( + const { loginLogoImage } = useConfig(); + return loginLogoImage.src ? ( {loginLogoUrl.alt} ) : ( From 0008c3c4ee9b1a5f19a1424798df11c7bce00926 Mon Sep 17 00:00:00 2001 From: jabahum Date: Tue, 15 Oct 2024 12:51:46 +0300 Subject: [PATCH 3/4] refactor wrapper --- src/config-schema.ts | 3 ++- src/login/background.wrapper.component.tsx | 22 +++++++++++++--------- src/login/login.scss | 10 ++-------- 3 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/config-schema.ts b/src/config-schema.ts index b97c081..9d59e74 100644 --- a/src/config-schema.ts +++ b/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 = { @@ -52,7 +53,7 @@ export const configSchema = { loginBackgroundImage: { src: { _type: Type.String, - _default: "/openmrs/spa/updf-logo.jpg", + _default: "/openmrs/spa/background.png", _description: "A path or URL to an image. If null, will use the OpenMRS SVG sprite.", _validators: [validators.isUrl], diff --git a/src/login/background.wrapper.component.tsx b/src/login/background.wrapper.component.tsx index cd91775..824e072 100644 --- a/src/login/background.wrapper.component.tsx +++ b/src/login/background.wrapper.component.tsx @@ -5,23 +5,27 @@ const BackgroundWrapper = ({ children }) => { const config = useConfig(); return config?.loginBackgroundImage ? ( -
+ <> {config?.loginBackgroundImage?.alt} -
{children}
-
+
+
{children}
+
+ ) : ( -
+ <> {config?.loginBackgroundImage?.alt} -
{children}
-
+
+
{children}
+
+ ); }; diff --git a/src/login/login.scss b/src/login/login.scss index 1f5eaf0..87c87f4 100644 --- a/src/login/login.scss +++ b/src/login/login.scss @@ -10,7 +10,6 @@ width: 100%; position: relative; overflow: hidden; - /* Ensures the image doesn't overflow */ } .backgroundImage { @@ -20,16 +19,11 @@ width: 100%; height: 100%; object-fit: cover; - /* Makes sure the image covers the entire container */ - z-index: -1; - /* Ensures the image stays behind the content */ opacity: 1; - /* Makes sure the image is fully visible */ } .contentOverlay { position: relative; - /* Ensures content is displayed above the image */ z-index: 1; display: flex; justify-content: center; @@ -38,12 +32,12 @@ @media screen and (min-width: 1150px) { .backgroundContainer { - max-width: 90%; + max-width: 80%; justify-content: right; } .backgroundImage { - object-fit: contain; + object-fit: fit; /* Fit image for larger screens */ } } From 3dbd048e2edc6f12cf331ffd768d6e2cbad3afcc Mon Sep 17 00:00:00 2001 From: jabahum Date: Tue, 15 Oct 2024 13:58:27 +0300 Subject: [PATCH 4/4] update logo dimenions --- src/login/login.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/login/login.scss b/src/login/login.scss index 87c87f4..0ecef07 100644 --- a/src/login/login.scss +++ b/src/login/login.scss @@ -109,8 +109,8 @@ .logo { margin-bottom: 2rem; - height: 7rem; - width: 18.75rem; + max-height: 10rem; + max-width: 20rem; } .logo-img {