Merge pull request #458 from zesu22/feature/theme_config

[ES-402] configurable footer and side logo for common page layout

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:
 

oidc-ui/public/locales/ar.json

@@ -134,6 +134,10 @@
     "backgroud_image_alt": "قم بتسجيل الدخول باستخدام e-Signet",
     "language": "لغة"
   },
+  "footer": {
+    "powered_by": "مشغل بواسطة",
+    "logo_alt": "شعار التذييل"
+  },
   "tabs": {
     "pin_tab_name": "قم بتسجيل الدخول باستخدام PIN",
     "biometric_tab_name": "تسجيل الدخول باستخدام القياسات الحيوية"

oidc-ui/public/locales/en.json

@@ -134,6 +134,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"

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;
 }

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));
+}

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();
@@ -109,6 +110,7 @@ function App() {
               <Route path={process.env.PUBLIC_URL + "/consent"} element={<ConsentPage />} />
             </Routes>
           </BrowserRouter>
+          <Footer />
         </div>
       );
       break;

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  */}
-      <section className="text-gray-600 pt-4 body-font h-[calc(100%-55px)] section-background">
-        <div className="container flex mx-auto px-5 sm:flex-row flex-col">
-          <div className="flex justify-center m-10 lg:mt-20 mb:mt-0 lg:w-1/2 md:w-1/2 md:block sm:w-1/2 sm:block hidden w-5/6 mt-20 mb-10 md:mb-0">
-            <div>
-              <img
-                className="background-logo object-contain rtl:scale-x-[-1]"
-                alt={t("backgroud_image_alt")}
-              />
-            </div>
-          </div>
+      <section className={"text-gray-600 pt-4 body-font section-background "+sectionClass}>
+        <div className="container justify-center flex mx-auto px-5 sm:flex-row flex-col">
+          {backgroundLogo && (<div className="flex justify-center m-10 lg:mt-20 mb:mt-0 lg:w-1/2 md:w-1/2 md:block sm:w-1/2 sm:block hidden w-5/6 mt-20 mb-10 md:mb-0">
+            <img
+              className="background-logo object-contain rtl:scale-x-[-1]"
+              alt={t("backgroud_image_alt")}
+            />
+          </div>)}
           <div className="rounded shadow-lg py-4 w-full md:w-3/6 sm:w-1/2 sm:max-w-sm bg-white">
             <div className="flex flex-col flex-grow lg:px-5 md:px-4 sm:px-3 px-3">
               <div className="w-full">

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 && (
+    <footer className="footer-container flex w-full flex-row flex-wrap items-center justify-center gap-y-6 gap-x-1 border-t border-blue-gray-50 text-center">
+      {t("powered_by")}
+      <img className="footer-brand-logo" alt={t("logo_alt")} />
+    </footer>
+  );
+}