[INJIWEB-257]: theme customization deployment for injiweb (#57)

Signed-off-by: Vijay <[email protected]>
mosip · May 7, 2024 · d424823 · d424823
1 parent ff6d3fd
commit d424823
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 11 deletions.
diff --git a/inji-web/.env b/inji-web/.env
@@ -1,3 +0,0 @@
-#REACT_APP_MIMOTO_URL=http://localhost:3010
-#REACT_APP_AUTHORIZATION_REDIRECT_URL = http://localhost:3001/redirect
-REACT_APP_APPLICATION_THEME=orange_theme

diff --git a/inji-web/Dockerfile b/inji-web/Dockerfile
@@ -4,6 +4,17 @@ FROM node:14 as build
 # Set the working directory in the container
 WORKDIR /app
 
+# Set a build-time environment variable (replace YOUR_ENV_VARIABLE_NAME with the desired variable name)
+ARG defaultTheme
+ARG defaultLang
+ARG defaultFavicon
+ARG defaultTitle
+
+ENV DEFAULT_THEME=$defaultTheme
+ENV DEFAULT_LANG=$defaultLang
+ENV DEFAULT_FAVICON=$defaultFavicon
+ENV DEFAULT_TITLE=$defaultTitle
+
 # Copy package.json and package-lock.json to the working directory
 COPY package*.json ./
 
@@ -31,6 +42,48 @@ LABEL commit_hash=${COMMIT_HASH}
 LABEL commit_id=${COMMIT_ID}
 LABEL build_time=${BUILD_TIME}
 
+
+ARG container_user=mosip
+
+# can be passed during Docker build as build time environment for github branch to pickup configuration from.
+ARG container_user_group=mosip
+
+# can be passed during Docker build as build time environment for github branch to pickup configuration from.
+ARG container_user_uid=1001
+
+# can be passed during Docker build as build time environment for github branch to pickup configuration from.
+ARG container_user_gid=1001
+
+ENV nginx_dir=/usr/share/nginx
+
+ENV work_dir=${nginx_dir}/html
+
+# set working directory for the user
+WORKDIR /home/${container_user}
+
+# install packages and create user
+RUN groupadd -g ${container_user_gid} ${container_user_group} \
+    && useradd -u ${container_user_uid} -g ${container_user_group} -s /bin/sh -m ${container_user} \
+    && mkdir -p /var/run/nginx /var/tmp/nginx /temp \
+    && chown -R ${container_user}:${container_user} /usr/share/nginx /var/run/nginx /var/tmp/nginx /temp
+
+
+ADD configure_start.sh configure_start.sh
+
+RUN chmod +x configure_start.sh
+
+RUN echo "DEFAULT_THEME=$DEFAULT_THEME" >> ${work_dir}/env.env \
+    && echo "DEFAULT_LANG=$DEFAULT_LANG" >> ${work_dir}/env.env \
+    && echo "DEFAULT_FAVICON=$DEFAULT_FEVICON" >> ${work_dir}/env.env \
+    && echo "DEFAULT_TITLE=$DEFAULT_TITLE" >> ${work_dir}/env.env
+
+RUN chown -R ${container_user}:${container_user} /home/${container_user}
+
+# change permissions of file inside working dir
+RUN chown -R ${container_user}:${container_user} ${work_dir}
+
+USER ${container_user_uid}:${container_user_gid}
+
 # Copy the built React app from the build container to the Nginx container
 COPY --from=build /app/build /usr/share/nginx/html
 
@@ -39,5 +92,7 @@ COPY ./nginx.conf /etc/nginx/conf.d/default.conf
 # Expose port 80
 EXPOSE 3004
 
+ENTRYPOINT [ "./configure_start.sh" ]
+
 # The main command to start Nginx when the container runs
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/inji-web/configure_start.sh b/inji-web/configure_start.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+echo "generating env-config file"
+
+workingDir=$nginx_dir/html
+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!"
diff --git a/inji-web/public/env.config.js b/inji-web/public/env.config.js
@@ -0,0 +1,7 @@
+window._env_ = {
+    DEFAULT_LANG: "en",
+    DEFAULT_THEME: "purple_theme",
+    DEFAULT_FAVICON: "favicon.ico",
+    DEFAULT_TITLE: "Inji Web",
+    DEFAULT_FONT_URL: "https://fonts.googleapis.com/css?family=Inter"
+};
diff --git a/inji-web/public/index.html b/inji-web/public/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
 <head>
     <meta charset="utf-8"/>
-    <link href="/favicon.ico" rel="icon" type="image/x-icon">
+    <link id="icon" href="/favicon.ico" rel="icon" type="image/x-icon">
     <link href="https://rsms.me/" rel="preconnect">
-    <link href="https://fonts.google.com/share?selection.family=Inter:[email protected] " rel="stylesheet">
+    <link id="font" href="https://fonts.google.com/share?selection.family=Inter:[email protected] " rel="stylesheet">
     <meta content="width=device-width, initial-scale=1" name="viewport"/>
     <meta content="#000000" name="theme-color"/>
     <meta
@@ -24,7 +24,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>INJI Web</title>
+
+
+    <script src="%PUBLIC_URL%/env.config.js"></script>
+    <script defer src="%PUBLIC_URL%/theme.config.js"></script>
+
+
+    <title id="title">INJI Web</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/inji-web/public/theme.config.js b/inji-web/public/theme.config.js
@@ -0,0 +1,5 @@
+
+document.getElementById("title").innerHTML = window._env_.DEFAULT_TITLE;
+document.getElementById("font").innerHTML = window._env_.DEFAULT_FONT_URL;
+document.getElementById("icon").href = window._env_.DEFAULT_FAVICON;
+document.getElementsByTagName("body")[0].classList.add(window._env_.DEFAULT_THEME);
diff --git a/inji-web/src/Router.tsx b/inji-web/src/Router.tsx
@@ -15,7 +15,7 @@ export const AppRouter = () => {
     const app_theme = ""; //can be "purple_theme" or "" ( for default )
     const wrapElement = (element: JSX.Element) => {
         return <React.Fragment>
-            <div className={`h-screen min-h-72 bg bg-iw-background font-base ${app_theme}`} dir={getDirCurrentLanguage(language)}>
+            <div className={`h-screen min-h-72 bg bg-iw-background font-base`} dir={getDirCurrentLanguage(language)}>
                 <Header/>
                 <div className={"top-20 h-full mt-20 my-auto flex-grow"}>
                     {element}

diff --git a/inji-web/src/components/Common/LanguageSelector.tsx b/inji-web/src/components/Common/LanguageSelector.tsx
@@ -10,7 +10,7 @@ import {RiArrowDownSFill, RiArrowUpSFill} from "react-icons/ri";
 export const LanguageSelector: React.FC = () => {
     const dispatch = useDispatch();
     let language = useSelector((state: RootState) => state.common.language);
-    language = language ?? 'en';
+    language = language ?? window._env_.DEFAULT_LANG;
     const [isOpen, setIsOpen] = useState(false);
 
 

diff --git a/inji-web/src/types/env.d.ts b/inji-web/src/types/env.d.ts
@@ -0,0 +1,13 @@
+export {}
+
+declare global {
+    interface Window {
+        _env_: {
+            DEFAULT_LANG: string;
+            DEFAULT_THEME: string;
+            DEFAULT_FAVICON: string;
+            DEFAULT_TITLE: string;
+            DEFAULT_FONT_URL: string;
+        }
+    }
+}
diff --git a/inji-web/src/utils/i18n.ts b/inji-web/src/utils/i18n.ts
@@ -25,8 +25,8 @@ i18n
     .use(initReactI18next) // passes i18n down to react-i18next
     .init({
         resources,
-        lng: selected_language ? selected_language : "en",
-        fallbackLng: "en",
+        lng: selected_language ? selected_language : window._env_.DEFAULT_LANG,
+        fallbackLng: window._env_.DEFAULT_LANG,
         interpolation: {
             escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
         },