Skip to content

Commit

Permalink
Merge pull request #448 from zesu22/feature/theme_config
Browse files Browse the repository at this point in the history
[ES-385] theme based configuration from demo-ES-278 branch
  • Loading branch information
gsasikumar authored Nov 6, 2023
2 parents 2daa541 + 6355844 commit 69a9bf4
Show file tree
Hide file tree
Showing 21 changed files with 278 additions and 12,548 deletions.
2 changes: 1 addition & 1 deletion oidc-ui/.env
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,4 @@ REACT_APP_WALLET_LOGO_URL=""

REACT_APP_CONSENT_SCREEN_TIME_OUT_BUFFER_IN_SEC=5

REACT_APP_WALLET_QR_CODE_AUTO_REFRESH_LIMIT=3
REACT_APP_WALLET_QR_CODE_AUTO_REFRESH_LIMIT=3
10 changes: 9 additions & 1 deletion oidc-ui/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,20 @@ ENV SIGN_IN_WITH_ESIGNET_PLUGIN_URL=$sign_in_with_esignet_plugin_url

# Set a build-time environment variable (replace YOUR_ENV_VARIABLE_NAME with the desired variable name)
ARG oidcUIPublicUrl
ARG uiDefaultTheme
ARG defaultLang
ARG defaultWellknown
ARG defaultFevicon
ARG defaultTitle
ARG defaultIdProviderName

ENV OIDC_UI_PUBLIC_URL=$oidcUIPublicUrl
ENV DEFAULT_THEME=$uiDefaultTheme
ENV DEFAULT_LANG=$defaultLang
ENV DEFAULT_WELLKNOWN=$defaultWellknown
ENV DEFAULT_FEVICON=$defaultFevicon
ENV DEFAULT_TITLE=$defaultTitle
ENV DEFAULT_ID_PROVIDER_NAME=$defaultIdProviderName

# Set the environment variable as a placeholder for PUBLIC_URL
ENV PUBLIC_URL=_PUBLIC_URL_
Expand Down Expand Up @@ -81,7 +89,7 @@ COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
# copy build files to nginx html directory
COPY --from=build_esignet_ui /build ${work_dir}

RUN echo "DEFAULT_LANG=$DEFAULT_LANG" >> ${work_dir}/env.env && echo "DEFAULT_WELLKNOWN=$DEFAULT_WELLKNOWN" >> ${work_dir}/env.env
RUN echo "DEFAULT_THEME=$DEFAULT_THEME" >> ${work_dir}/env.env && echo "DEFAULT_LANG=$DEFAULT_LANG" >> ${work_dir}/env.env && echo "DEFAULT_WELLKNOWN=$DEFAULT_WELLKNOWN" >> ${work_dir}/env.env && echo "DEFAULT_FEVICON=$DEFAULT_FEVICON" >> ${work_dir}/env.env env && echo "DEFAULT_TITLE=$DEFAULT_TITLE" >> ${work_dir}/env.env && echo "DEFAULT_ID_PROVIDER_NAME=$DEFAULT_ID_PROVIDER_NAME" >> ${work_dir}/env.env

RUN chown -R ${container_user}:${container_user} /home/${container_user}

Expand Down
8 changes: 8 additions & 0 deletions oidc-ui/configure_start.sh
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,12 @@ fi

echo "Replacing completed."

echo "generating env-config file"

echo "window._env_ = {" > ${workingDir}/env-config.js
awk -F '=' '{ print $1 ": \"" (ENVIRON[$1] ? ENVIRON[$1] : $2) "\"," }' ${workingDir}/env.env >> ${workingDir}/env-config.js
echo "}" >> ${workingDir}/env-config.js

echo "generation of env-config file completed!"

exec "$@"
12,458 changes: 1 addition & 12,457 deletions oidc-ui/package-lock.json

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions oidc-ui/public/env-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,8 @@ window._env_ = {
value: "/.well-known/openid-credential-issuer",
},
],
DEFAULT_THEME: '',
DEFAULT_FEVICON: 'favicon.ico',
DEFAULT_TITLE: 'e-Signet',
DEFAULT_ID_PROVIDER_NAME: 'e-Signet'
};
6 changes: 4 additions & 2 deletions oidc-ui/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link id="icon" rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
Expand All @@ -24,9 +24,11 @@
-->
<!-- runtime config -->
<script src="%PUBLIC_URL%/env-config.js"></script>
<script defer src="%PUBLIC_URL%/theme-config.js"></script>
<link rel="stylesheet" href="%PUBLIC_URL%/variables.css">
<!-- runtime config -->

<title>e-Signet</title>
<title id="title">e-Signet</title>
</head>

<body>
Expand Down
4 changes: 2 additions & 2 deletions oidc-ui/public/locales/ar.json
Original file line number Diff line number Diff line change
Expand Up @@ -114,12 +114,12 @@
"verify_using_national_id":"التحقق باستخدام الهويات الوطنية الأخرى"
},
"esignetDetails": {
"esignet_details_heading": "واجهات برمجة التطبيقات Esignet معروفة جيدا",
"esignet_details_heading": "واجهات برمجة التطبيقات",
"internal_api": "واجهة برمجة التطبيقات الداخلية",
"wellknown_api": ".wellknown API"
},
"header": {
"login_heading": "تسجيل الدخول باستخدام e-Signet",
"login_heading": "قم بتسجيل الدخول باستخدام معرف {{idProviderName}} الخاص بك",
"login_linkName": "التسجيل المسبق",
"more_ways_to_sign_in": "المزيد من الطرق لتسجيل الدخول",
"invalid_auth_factor": "عوامل المصادقة غير صالحة. حاول مرة اخرى...",
Expand Down
4 changes: 2 additions & 2 deletions oidc-ui/public/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -114,12 +114,12 @@
"verify_using_national_id":"Verify using other National IDs"
},
"esignetDetails": {
"esignet_details_heading": "Esignet wellknown APIs",
"esignet_details_heading": "wellknown APIs",
"internal_api": "Internal API",
"wellknown_api": ".wellknown API"
},
"header": {
"login_heading": "Login with e-Signet",
"login_heading": "Login with your {{idProviderName}} ID",
"login_linkName": "Preregister",
"more_ways_to_sign_in": "More Ways to Login",
"invalid_auth_factor": "Invalid Auth Factors. Please Try Again...",
Expand Down
3 changes: 3 additions & 0 deletions oidc-ui/public/theme-config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
document.getElementById("root").classList.add(window._env_.DEFAULT_THEME);
document.getElementById("icon").href=window._env_.DEFAULT_FEVICON;
document.getElementById("title").innerHTML=window._env_.DEFAULT_TITLE;
43 changes: 43 additions & 0 deletions oidc-ui/public/variables.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
:root {
--login-card-box-color: #BCC0C7;
--login-card-box-hover-color: #1263CA;
--login-card-box-focus-color: #1263CA;
--login-background: #FCFCFF;
--language-icon-color: #FFFFFF;
--language-icon-bg-color: #1262C9;
--brand-only-logo-url: url("logo.png");
--brand-logo-url: url("");
--background-logo-url: url("images/illustration_one.png");
--primary-button-color: #FFFFFF;
--primary-button-bg-color: #0953FA;
--primary-button-border-color: #0953FA;
--primary-button-hover-color: #FFFFFF;
--primary-button-hover-bg-color: #0549b6;
--primary-button-hover-border-color: #0549b6;
--primary-button-disable-color: #94A3B8;
--primary-button-disable-bg-color: #FFFFFF;
--primary-button-disable-border-color: #94A3B8;
--secondary-button-color: #111827;
--secondary-button-bg-color: #FFFFFF;
--secondary-button-border-color: #0953FA;
--secondary-button-hover-color: #111827;
--secondary-button-hover-bg-color: #F3F4F6;
--secondary-button-hover-border-color: #0953FA;
--secondary-button-disable-color: #94A3B8;
--secondary-button-disable-bg-color: #FFFFFF;
--secondary-button-disable-border-color: #94A3B8;
--loading-indicator-ring-color: #3182CE;
--loading-indicator-bg-color: transparent;
--loading-indicator-font-color: #000000;
--qrcode-border-color: #1263CA;
--info-icon-color: #0686F0;
--toggle-button-inactive-bg-color: #FFFFFF;
--toggle-button-inactive-border-color: #D8D8D8;
--toggle-button-active-bg-color: #FFFFFF;
--toggle-button-active-border-color: #1262C9;
--toggle-button-inactive-ball-color: #A7A8A9;
--toggle-button-inactive-ball-border-color: #A7A8A9;
--toggle-button-active-ball-color: #1262C9;
--toggle-button-active-ball-border-color: #1262C9;
--toggle-button-ring-color: #1262C9;
}
119 changes: 119 additions & 0 deletions oidc-ui/src/App.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
.section-background {
background-color: var(--login-background);
}

.language-icon-color {
fill: var(--language-icon-color);
}

.language-icon-bg-color {
fill: var(--language-icon-bg-color);
}

.login-list-box-style {
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid var(--login-card-box-color);
border-radius: 6px;
opacity: 1;
}

.login-list-box-style:hover {
border-color: var(--login-card-box-hover-color);
}

.login-list-box-style:focus {
border-color: var(--login-card-box-focus-color);
}

.brand-logo {
content: var(--brand-logo-url);
}

.brand-only-logo {
content: var(--brand-only-logo-url);
}

.background-logo {
content: var(--background-logo-url);
}

.loading-indicator {
background-color: var(--loading-indicator-bg-color);
color: var(--loading-indicator-font-color);
}

.loading-indicator > svg {
fill: var(--loading-indicator-ring-color);
}

.info-icon-button {
color: var(--info-icon-color);
}

.primary-button {
color: var(--primary-button-color);
background-color: var(--primary-button-bg-color);
border: 1px solid var(--primary-button-border-color);
border-radius: 5px;
}

.primary-button:disabled {
color: var(--primary-button-disable-color);
background-color: var(--primary-button-disable-bg-color);
border-color: var(--primary-button-disable-border-color);
}

.primary-button:hover {
color: var(--primary-button-hover-color);
background-color: var(--primary-button-hover-bg-color);
border-color: var(--primary-button-hover-border-color);
}

.secondary-button {
color: var(--secondary-button-color);
background-color: var(--secondary-button-bg-color);
border: 1px solid var(--secondary-button-border-color);
border-radius: 5px;
}

.secondary-button:disabled {
color: var(--secondary-button-disable-color);
background-color: var(--secondary-button-disable-bg-color);
border-color: var(--secondary-button-disable-border-color);
}

.secondary-button:hover {
color: var(--secondary-button-hover-color);
background-color: var(--secondary-button-hover-bg-color);
border-color: var(--secondary-button-hover-border-color);
}

.qrcode-border {
border-color: var(--qrcode-border-color);
}

.slide-toggle-button {
border-color: var(--toggle-button-inactive-border-color);
background-color: var(--toggle-button-inactive-bg-color);
}

.slide-toggle-button::after {
border-color: var(--toggle-button-inactive-ball-border-color);
background-color: var(--toggle-button-inactive-ball-color);
}

.peer:focus ~ .slide-toggle-button {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--toggle-button-ring-color);
}

.peer:checked ~ .slide-toggle-button {
border-color: var(--toggle-button-active-border-color);
background-color: var(--toggle-button-active-background-color);
}

.peer:checked ~ .slide-toggle-button::after {
border-color: var(--toggle-button-active-ball-border-color);
background-color: var(--toggle-button-active-ball-color);
}
2 changes: 1 addition & 1 deletion oidc-ui/src/common/LoadingIndicator.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const LoadingIndicator = ({
<>
<div
role="status"
className="flex justify-center items-center"
className="flex justify-center items-center loading-indicator"
>
<svg
style={dynamicSize[size]}
Expand Down
27 changes: 12 additions & 15 deletions oidc-ui/src/components/Background.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,23 @@ import { useTranslation } from "react-i18next";

export default function Background({
heading,
logoPath,
clientLogoPath,
clientName,
backgroundImgPath,
component,
i18nKeyPrefix = "header",
}) {
const { t } = useTranslation("translation", { keyPrefix: i18nKeyPrefix });
const headerHeight = document.getElementById("navbar-header")?.offsetHeight;
const sectionStyle = {
height: "calc(100% - " + headerHeight + "px)",
};

return (
<>
{/* height is used by subtracting navbar height */}
<section
className="text-gray-600 pt-4 body-font"
style={sectionStyle}
>
{/* 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="object-contain rtl:scale-x-[-1]"
className="background-logo object-contain rtl:scale-x-[-1]"
alt={t("backgroud_image_alt")}
src={backgroundImgPath}
/>
</div>
</div>
Expand All @@ -41,9 +31,16 @@ export default function Background({
</h1>
</div>
<div className="w-full flex mb-4 justify-center items-center">
<img className="h-20 w-32 object-contain" src={clientLogoPath} alt={clientName} />
<img
className="h-20 w-32 object-contain"
src={clientLogoPath}
alt={clientName}
/>
<span className="text-5xl flex mx-5">&#8651;</span>
<img className="h-20 w-32 object-contain" src={logoPath} alt={t("logo_alt")} />
<img
className="h-20 w-32 object-contain brand-only-logo"
alt={t("logo_alt")}
/>
</div>
<div
className="h-5 text-black -mx-5 mb-2"
Expand Down
Loading

0 comments on commit 69a9bf4

Please sign in to comment.