From 0dd297dddfe1b4c6ad13d2b2acc276b38f97f175 Mon Sep 17 00:00:00 2001 From: Zeeshan Mehboob Date: Thu, 21 Sep 2023 14:01:29 +0530 Subject: [PATCH 01/15] [ADDED] configuration for brand logo, background, login card list Signed-off-by: Zeeshan Mehboob --- oidc-ui/.env | 11 +++- oidc-ui/public/images/veridonia_logo.png | Bin 0 -> 8000 bytes oidc-ui/src/components/Background.js | 28 +++++----- oidc-ui/src/components/NavHeader.js | 62 +++++++++++++++++++++-- oidc-ui/src/components/SignInOptions.js | 14 ++--- 5 files changed, 90 insertions(+), 25 deletions(-) create mode 100644 oidc-ui/public/images/veridonia_logo.png diff --git a/oidc-ui/.env b/oidc-ui/.env index 49ecdfd27..ae3e125ce 100644 --- a/oidc-ui/.env +++ b/oidc-ui/.env @@ -45,4 +45,13 @@ REACT_APP_WALLET_LOGO_URL="" REACT_APP_CONSENT_SCREEN_TIME_OUT_BUFFER_IN_SEC=5 -REACT_APP_WALLET_QR_CODE_AUTO_REFRESH_LIMIT=3 \ No newline at end of file +REACT_APP_WALLET_QR_CODE_AUTO_REFRESH_LIMIT=3 + +REACT_APP_LOGIN_CARD_BOX_COLOR="#BCC0C7" +REACT_APP_LOGIN_CARD_BOX_HOVER_COLOR="#1263CA" +REACT_APP_LOGIN_CARD_BOX_FOCUS_COLOR="#1263CA" +REACT_APP_LOGIN_BACKGROUND="#FCF7F5" +REACT_APP_AUTH_BRAND_LOGO_URL="images/veridonia_logo.png" + +REACT_APP_LANGUAGE_ICON_COLOR="#FFFFFF" +REACT_APP_LANGUAGE_ICON_BG_COLOR="#1263CA" \ No newline at end of file diff --git a/oidc-ui/public/images/veridonia_logo.png b/oidc-ui/public/images/veridonia_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..a2321ebb93f97b40ed3bcaaca035680547431e11 GIT binary patch literal 8000 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 literal 0 HcmV?d00001 diff --git a/oidc-ui/src/components/Background.js b/oidc-ui/src/components/Background.js index 72fb55a94..6e3083d79 100644 --- a/oidc-ui/src/components/Background.js +++ b/oidc-ui/src/components/Background.js @@ -11,18 +11,14 @@ export default function Background({ i18nKeyPrefix = "header", }) { const { t } = useTranslation("translation", { keyPrefix: i18nKeyPrefix }); - const headerHeight = document.getElementById("navbar-header")?.offsetHeight; - const sectionStyle = { - height: "calc(100% - " + headerHeight + "px)", - }; + + const backgroundColor = process.env.REACT_APP_LOGIN_BACKGROUND ?? "#FFFFFF"; + {/* height is used by subtracting navbar height */} + const sectionClass = `text-gray-600 pt-4 body-font bg-[${backgroundColor}] h-[calc(100%-54px)]`; return ( <> - {/* height is used by subtracting navbar height */} -
+
@@ -33,7 +29,7 @@ export default function Background({ />
-
+

@@ -41,9 +37,17 @@ export default function Background({

- {clientName} + {clientName} - {t("logo_alt")} + {t("logo_alt")}
{ i18n.changeLanguage(e.value); }; @@ -30,7 +40,9 @@ export default function NavHeader({ langOptions, i18nKeyPrefix = "header" }) { const defaultLanguageCode = window._env_.DEFAULT_LANG; // Find the language option that matches the extracted language code - const defaultLang = langOptions.find((option) => option.value === defaultLanguageCode); + const defaultLang = langOptions.find( + (option) => option.value === defaultLanguageCode + ); setSelectedLang(defaultLang); } else { setSelectedLang(lang); @@ -47,9 +59,49 @@ export default function NavHeader({ langOptions, i18nKeyPrefix = "header" }) { return (