From f36160a58f112dfc233ca47c386076de306b9271 Mon Sep 17 00:00:00 2001 From: Zeeshan Mehboob Date: Tue, 7 Nov 2023 14:52:57 +0530 Subject: [PATCH 1/2] [ADDED] configurable footer and side logo Signed-off-by: Zeeshan Mehboob --- oidc-ui/README.md | 6 ++++++ oidc-ui/public/images/footer_logo.png | Bin 0 -> 3428 bytes oidc-ui/public/variables.css | 3 +++ oidc-ui/src/App.css | 18 ++++++++++++++++++ oidc-ui/src/App.js | 8 ++++++++ oidc-ui/src/components/Background.js | 21 +++++++++++---------- 6 files changed, 46 insertions(+), 10 deletions(-) create mode 100644 oidc-ui/public/images/footer_logo.png diff --git a/oidc-ui/README.md b/oidc-ui/README.md index 6aedc7bc8..10be01bc0 100644 --- a/oidc-ui/README.md +++ b/oidc-ui/README.md @@ -66,6 +66,12 @@ The application runs on PORT=3000 by default. - REACT_APP_WALLET_LOGO_URL: URL for the logo in the wallet QRCode. This feature supports cross-origin-enabled image URLs only. - REACT_APP_CONSENT_SCREEN_TIME_OUT_BUFFER_IN_SEC: Buffer time for the consent screen expiry timer. - REACT_APP_WALLET_QR_CODE_AUTO_REFRESH_LIMIT: Limit for the QR code auto refresh. + - REACT_APP_BACKGROUND_LOGO: Set a logo in the main page, in ledt side of the main card + - REACT_APP_FOOTER: Set footer in the main page + +- Theme based configuration + + For theming your oidc-ui you have to change variable in `variables.css` which can be find inside `public` folder. According to your need you change the css variable, which will reflect in your oidc-ui. It contains color, images path and number in px (for height, width etc.). - Build and run Docker for a service: diff --git a/oidc-ui/public/images/footer_logo.png b/oidc-ui/public/images/footer_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..9773f974c1b02417a39d894757e44ff2799e2f73 GIT binary patch literal 3428 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 G0002M5S%Fh literal 0 HcmV?d00001 diff --git a/oidc-ui/public/variables.css b/oidc-ui/public/variables.css index ffe22075b..8da3d7224 100644 --- a/oidc-ui/public/variables.css +++ b/oidc-ui/public/variables.css @@ -8,6 +8,7 @@ --brand-only-logo-url: url("logo.png"); --brand-logo-url: url(""); --background-logo-url: url("images/illustration_one.png"); + --footer-brand-logo-url: url("images/footer_logo.png"); --primary-button-color: #FFFFFF; --primary-button-bg-color: #0953FA; --primary-button-border-color: #0953FA; @@ -40,4 +41,6 @@ --toggle-button-active-ball-color: #1262C9; --toggle-button-active-ball-border-color: #1262C9; --toggle-button-ring-color: #1262C9; + --header-height: 55px; + --header-footer-height: 103px; } diff --git a/oidc-ui/src/App.css b/oidc-ui/src/App.css index 92ba754db..3b6a96391 100644 --- a/oidc-ui/src/App.css +++ b/oidc-ui/src/App.css @@ -117,3 +117,21 @@ border-color: var(--toggle-button-active-ball-border-color); background-color: var(--toggle-button-active-ball-color); } + +.footer-brand-logo { + content: var(--footer-brand-logo-url); + height: 25px; +} + +.footer-container { + padding-top: 11px; + padding-bottom: 11px; +} + +.flexible-header-only { + height: calc(100% - var(--header-height)); +} + +.flexible-header-footer { + height: calc(100% - var(--header-footer-height)); +} \ No newline at end of file diff --git a/oidc-ui/src/App.js b/oidc-ui/src/App.js index b858e427c..3f69786e0 100644 --- a/oidc-ui/src/App.js +++ b/oidc-ui/src/App.js @@ -87,6 +87,13 @@ function App() { //4. default lang set in env-config file as fallback language. }; + let footerComponent = ( +
+ Powered by + abcd +
+ ); + let el; switch (statusLoading) { @@ -109,6 +116,7 @@ function App() { } /> + {process.env.REACT_APP_FOOTER === "true" && footerComponent} ); break; diff --git a/oidc-ui/src/components/Background.js b/oidc-ui/src/components/Background.js index a77a760bd..3d59e3d46 100644 --- a/oidc-ui/src/components/Background.js +++ b/oidc-ui/src/components/Background.js @@ -10,19 +10,20 @@ export default function Background({ }) { const { t } = useTranslation("translation", { keyPrefix: i18nKeyPrefix }); + const backgroundLogo = process.env.REACT_APP_BACKGROUND_LOGO === "true"; + const sectionClass = process.env.REACT_APP_FOOTER === "true" ? "flexible-header-footer" : "flexible-header-only"; + return ( <> {/* height is used by subtracting navbar height */} -
-
-
-
- {t("backgroud_image_alt")} -
-
+
+
+ {backgroundLogo && (
+ {t("backgroud_image_alt")} +
)}
From 4d300ed7fa369f0e5f644d97bf0c2563b5b54946 Mon Sep 17 00:00:00 2001 From: Zeeshan Mehboob Date: Tue, 14 Nov 2023 13:12:44 +0530 Subject: [PATCH 2/2] [ADDED] footer i18n language Signed-off-by: Zeeshan Mehboob --- oidc-ui/public/locales/ar.json | 4 ++++ oidc-ui/public/locales/en.json | 4 ++++ oidc-ui/src/App.js | 10 ++-------- oidc-ui/src/components/Footer.js | 16 ++++++++++++++++ 4 files changed, 26 insertions(+), 8 deletions(-) create mode 100644 oidc-ui/src/components/Footer.js diff --git a/oidc-ui/public/locales/ar.json b/oidc-ui/public/locales/ar.json index 1645fd277..29b37e822 100644 --- a/oidc-ui/public/locales/ar.json +++ b/oidc-ui/public/locales/ar.json @@ -128,6 +128,10 @@ "backgroud_image_alt": "قم بتسجيل الدخول باستخدام e-Signet", "language": "لغة" }, + "footer": { + "powered_by": "مشغل بواسطة", + "logo_alt": "شعار التذييل" + }, "tabs": { "pin_tab_name": "قم بتسجيل الدخول باستخدام PIN", "biometric_tab_name": "تسجيل الدخول باستخدام القياسات الحيوية" diff --git a/oidc-ui/public/locales/en.json b/oidc-ui/public/locales/en.json index 623afcab9..b49ed9275 100644 --- a/oidc-ui/public/locales/en.json +++ b/oidc-ui/public/locales/en.json @@ -128,6 +128,10 @@ "backgroud_image_alt": "Sign in with e-Signet", "language": "Language" }, + "footer": { + "powered_by": "Powered by", + "logo_alt": "Footer logo" + }, "tabs": { "pin_tab_name": "Login with PIN", "biometric_tab_name": "Login with Biometrics" diff --git a/oidc-ui/src/App.js b/oidc-ui/src/App.js index 3f69786e0..48a7a4502 100644 --- a/oidc-ui/src/App.js +++ b/oidc-ui/src/App.js @@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next"; import EsignetDetailsPage from "./pages/EsignetDetails"; import LoadingIndicator from "./common/LoadingIndicator"; import { LoadingStates as states } from "./constants/states"; +import Footer from "./components/Footer"; function App() { const { i18n } = useTranslation(); @@ -87,13 +88,6 @@ function App() { //4. default lang set in env-config file as fallback language. }; - let footerComponent = ( -
- Powered by - abcd -
- ); - let el; switch (statusLoading) { @@ -116,7 +110,7 @@ function App() { } /> - {process.env.REACT_APP_FOOTER === "true" && footerComponent} +
); break; diff --git a/oidc-ui/src/components/Footer.js b/oidc-ui/src/components/Footer.js new file mode 100644 index 000000000..f658cb545 --- /dev/null +++ b/oidc-ui/src/components/Footer.js @@ -0,0 +1,16 @@ +import { useTranslation } from "react-i18next"; + +export default function Footer({ i18nKeyPrefix = "footer" }) { + const footerCheck = process.env.REACT_APP_FOOTER === "true"; + + const { t } = useTranslation("translation", { + keyPrefix: i18nKeyPrefix, + }); + + return footerCheck && ( + + ); +}