Merge pull request #106 from factly/custom-title-logo

ability to customise logo and title
factly · Dec 1, 2021 · f98c4cd · f98c4cd
2 parents 565dbf3 + 1e6798e
commit f98c4cd
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 36 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -237,6 +237,10 @@ services:
       - REACT_APP_DEGA_PUBLIC_URL=http://127.0.0.1:4455/.factly/dega/studio
       - REACT_APP_BINDU_PUBLIC_URL=http://127.0.0.1:4455/.factly/bindu/studio
       - REACT_APP_KAVACH_TITLE=Kavach
+      - REACT_APP_COMPANION_URL=http://127.0.0.1:3020
+      - REACT_APP_API_URL=http://127.0.0.1:4455/.factly/kavach/server
+      - REACT_APP_KRATOS_PUBLIC_URL=http://127.0.0.1:4455/.ory/kratos/public
+
     volumes:
       - type: bind
         source: ./web
@@ -247,4 +251,4 @@ services:
       - kavach
 
 networks:
-  kavach:
+  kavach:
diff --git a/web/src/assets/factly-logo.png b/web/src/assets/factly-logo.png
diff --git a/web/src/components/Auth/index.js b/web/src/components/Auth/index.js
@@ -4,11 +4,13 @@ import { Link } from 'react-router-dom';
 import { Input, Form, Button, Card, Row, Col, Alert } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 import OIDC from './oidc';
+import kavach_logo from '../../assets/kavach_icon.png'
 
 function Auth(props) {
   const [ui, setUI] = React.useState({});
   const [errorMsg, setErrorMsg] = React.useState('');
-  const title = (process.env.REACT_APP_KAVACH_TITLE==undefined) ? "Kavach": process.env.REACT_APP_KAVACH_TITLE
+  const title = process.env.REACT_APP_KAVACH_TITLE || "Kavach"
+  const logo = process.env.REACT_APP_LOGO_URL || kavach_logo
   React.useEffect(() => {
     var obj = {};
 
@@ -22,18 +24,18 @@ function Auth(props) {
 
     const returnTo = obj['return_to'];
     const selfServiceURL = returnTo
-      ? window.REACT_APP_KRATOS_PUBLIC_URL +
+      ? process.env.REACT_APP_KRATOS_PUBLIC_URL +
         '/self-service/' +
         props.flow +
         '/browser?return_to=' +
         returnTo
-      : window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/' + props.flow + '/browser';
+      : process.env.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/' + props.flow + '/browser';
 
     if (!obj['flow']) {
       window.location.href = selfServiceURL;
     }
     fetch(
-      window.REACT_APP_KRATOS_PUBLIC_URL +
+      process.env.REACT_APP_KRATOS_PUBLIC_URL +
         '/self-service/' +
         props.flow +
         '/flows' +
@@ -60,7 +62,7 @@ function Auth(props) {
         setUI(res.ui);
       })
       .catch((err) => {
-        console.log(err);
+        window.location.href = selfServiceURL;
       });
   }, [props.flow]);
 
@@ -102,7 +104,7 @@ function Auth(props) {
     <div className="auth">
       <Row className="header">
         <Col span={6}>
-          <img alt="logo" className="logo" src={(title==="Kavach") ? require('../../assets/kavach_icon.png'): require('../../assets/factly-logo.png')} />
+          <img alt="logo" className="logo" src={logo} />
         </Col>
         <Col span={18}>
           <span className="title">{title}</span>

diff --git a/web/src/components/Auth/index.test.js b/web/src/components/Auth/index.test.js
@@ -126,7 +126,7 @@ describe('Auth component', () => {
       setTimeout(() => {
         expect(fetch.mock.calls).toEqual([
           [
-            window.REACT_APP_KRATOS_PUBLIC_URL +
+            process.env.REACT_APP_KRATOS_PUBLIC_URL +
               '/self-service/login/flows?id=' +
               '8060d57f-5c69-402f-9ecd-073e283f632a',
             {
@@ -225,7 +225,7 @@ describe('Auth component', () => {
       setTimeout(() => {
         expect(fetch.mock.calls).toEqual([
           [
-            window.REACT_APP_KRATOS_PUBLIC_URL +
+            process.env.REACT_APP_KRATOS_PUBLIC_URL +
               '/self-service/login/flows?id=' +
               '8060d57f-5c69-402f-9ecd-073e283f632a',
             {
@@ -335,7 +335,7 @@ describe('Auth component', () => {
       setTimeout(() => {
         expect(fetch.mock.calls).toEqual([
           [
-            window.REACT_APP_KRATOS_PUBLIC_URL +
+            process.env.REACT_APP_KRATOS_PUBLIC_URL +
               '/self-service/login/flows?id=' +
               '8060d57f-5c69-402f-9ecd-073e283f632a',
             {
@@ -374,7 +374,7 @@ describe('Auth component', () => {
       setTimeout(() => {
         expect(fetch.mock.calls).toEqual([
           [
-            window.REACT_APP_KRATOS_PUBLIC_URL +
+            process.env.REACT_APP_KRATOS_PUBLIC_URL +
               '/self-service/login/flows?id=' +
               '8060d57f-5c69-402f-9ecd-073e283f632a',
             {
@@ -383,7 +383,7 @@ describe('Auth component', () => {
           ],
         ]);
         expect(window.location.href).toBe(
-          window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/login/browser',
+          process.env.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/login/browser',
         );
         done();
       }, 0);
@@ -410,22 +410,22 @@ describe('Auth component', () => {
       setTimeout(() => {
         expect(fetch.mock.calls).toEqual([
           [
-            window.REACT_APP_KRATOS_PUBLIC_URL +
+            process.env.REACT_APP_KRATOS_PUBLIC_URL +
               '/self-service/login/flows?id=' +
               '8060d57f-5c69-402f-9ecd-073e283f632a',
             {
               credentials: 'include',
             },
           ],
           [
-            window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/login/flows?id=' + undefined,
+            process.env.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/login/flows?id=' + undefined,
             {
               credentials: 'include',
             },
           ],
         ]);
         expect(window.location.href).toBe(
-          window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/login/browser?return_to=return',
+          process.env.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/login/browser?return_to=return',
         );
         done();
       }, 0);
@@ -524,7 +524,7 @@ describe('Auth component', () => {
       setTimeout(() => {
         expect(fetch.mock.calls).toEqual([
           [
-            window.REACT_APP_KRATOS_PUBLIC_URL +
+            process.env.REACT_APP_KRATOS_PUBLIC_URL +
               '/self-service/registration/flows?id=' +
               '8060d57f-5c69-402f-9ecd-073e283f632a',
             {
@@ -629,7 +629,7 @@ describe('Auth component', () => {
       setTimeout(() => {
         expect(fetch.mock.calls).toEqual([
           [
-            window.REACT_APP_KRATOS_PUBLIC_URL +
+            process.env.REACT_APP_KRATOS_PUBLIC_URL +
               '/self-service/registration/flows?id=' +
               '8060d57f-5c69-402f-9ecd-073e283f632a',
             {

diff --git a/web/src/components/GlobalNav/AccountMenu.js b/web/src/components/GlobalNav/AccountMenu.js
@@ -25,7 +25,7 @@ const AccountMenu = () => {
   }, [dispatch]);
 
   const handleLogout = () => {
-    fetch(window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/logout/browser', {
+    fetch(process.env.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/logout/browser', {
       credentials: 'include',
     })
       .then((res) => {

diff --git a/web/src/components/MediaSelector/index.test.js b/web/src/components/MediaSelector/index.test.js
@@ -129,7 +129,7 @@ describe('MediaSelector component', () => {
     });
     it('should handle Tab change and unselect image', () => {
       const onChange = jest.fn();
-      window.REACT_APP_COMPANION_URL = 'http://127.0.0.1:3020';
+      process.env.REACT_APP_COMPANION_URL = 'http://127.0.0.1:3020';
       act(() => {
         wrapper = mount(
           <Provider store={store}>

diff --git a/web/src/components/Uppy/index.js b/web/src/components/Uppy/index.js
@@ -51,9 +51,9 @@ function UppyUploader({ onUpload }) {
       return updatedFiles;
     },
   })
-    .use(AwsS3, { companionUrl: window.REACT_APP_COMPANION_URL })
-    .use(Url, { companionUrl: window.REACT_APP_COMPANION_URL })
-    .use(GoogleDrive, { companionUrl: window.REACT_APP_COMPANION_URL })
+    .use(AwsS3, { companionUrl: process.env.REACT_APP_COMPANION_URL })
+    .use(Url, { companionUrl: process.env.REACT_APP_COMPANION_URL })
+    .use(GoogleDrive, { companionUrl: process.env.REACT_APP_COMPANION_URL })
     .use(ImageEditor, {
       id: 'ImageEditor',
 
@@ -63,7 +63,7 @@ function UppyUploader({ onUpload }) {
         autoCropArea: 1,
         responsive: true,
       },
-      companionUrl: window.REACT_APP_COMPANION_URL,
+      companionUrl: process.env.REACT_APP_COMPANION_URL,
     });
 
   uppy.on('complete', (result) => {

diff --git a/web/src/pages/error/index.js b/web/src/pages/error/index.js
@@ -12,7 +12,7 @@ function KratosError() {
         obj[temp[0]] = temp[1];
       });
 
-    fetch(window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/errors?error=' + obj['error'])
+    fetch(process.env.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/errors?error=' + obj['error'])
       .then((res) => {
         if (res.status === 200) {
           return res.json();

diff --git a/web/src/pages/password/index.js b/web/src/pages/password/index.js
@@ -17,10 +17,10 @@ function Password() {
       });
 
     if (!obj['flow']) {
-      window.location.href = window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/browser';
+      window.location.href = process.env.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/browser';
     }
 
-    fetch(window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/flows?id=' + obj['flow'], {
+    fetch(process.env.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/flows?id=' + obj['flow'], {
       credentials: 'include',
     })
       .then((res) => {
@@ -40,7 +40,7 @@ function Password() {
         }
       })
       .catch((err) => {
-        window.location.href = window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/browser';
+        window.location.href = process.env.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/browser';
       });
   }, []);
 

diff --git a/web/src/pages/password/index.test.js b/web/src/pages/password/index.test.js
@@ -84,7 +84,7 @@ describe('password component', () => {
       setTimeout(() => {
         expect(fetch.mock.calls).toEqual([
           [
-            window.REACT_APP_KRATOS_PUBLIC_URL +
+            process.env.REACT_APP_KRATOS_PUBLIC_URL +
               '/self-service/settings/flows?id=' +
               '8060d57f-5c69-402f-9ecd-073e283f632a',
           ],
@@ -113,13 +113,13 @@ describe('password component', () => {
       setTimeout(() => {
         expect(fetch.mock.calls).toEqual([
           [
-            window.REACT_APP_KRATOS_PUBLIC_URL +
+            process.env.REACT_APP_KRATOS_PUBLIC_URL +
               '/self-service/settings/flows?id=' +
               '8060d57f-5c69-402f-9ecd-073e283f632a',
           ],
         ]);
         expect(window.location.href).toBe(
-          window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/browser',
+          process.env.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/browser',
         );
         done();
       }, 0);
@@ -139,14 +139,14 @@ describe('password component', () => {
       setTimeout(() => {
         expect(fetch.mock.calls).toEqual([
           [
-            window.REACT_APP_KRATOS_PUBLIC_URL +
+            process.env.REACT_APP_KRATOS_PUBLIC_URL +
               '/self-service/settings/flows?id=' +
               '8060d57f-5c69-402f-9ecd-073e283f632a',
           ],
-          [window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/flows?id=' + undefined],
+          [process.env.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/flows?id=' + undefined],
         ]);
         expect(window.location.href).toBe(
-          window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/browser',
+          process.env.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/browser',
         );
         done();
       }, 0);
@@ -227,7 +227,7 @@ describe('password component', () => {
       setTimeout(() => {
         expect(fetch.mock.calls).toEqual([
           [
-            window.REACT_APP_KRATOS_PUBLIC_URL +
+            process.env.REACT_APP_KRATOS_PUBLIC_URL +
               '/self-service/settings/flows?id=' +
               '8060d57f-5c69-402f-9ecd-073e283f632a',
           ],
@@ -310,7 +310,7 @@ describe('password component', () => {
       setTimeout(() => {
         expect(fetch.mock.calls).toEqual([
           [
-            window.REACT_APP_KRATOS_PUBLIC_URL +
+            process.env.REACT_APP_KRATOS_PUBLIC_URL +
               '/self-service/settings/flows?id=' +
               '8060d57f-5c69-402f-9ecd-073e283f632a',
           ],

diff --git a/web/src/utils/axios.js b/web/src/utils/axios.js
@@ -2,7 +2,7 @@ import axios from 'axios';
 
 function createAxiosAuthMiddleware() {
   return ({ getState }) => (next) => (action) => {
-    axios.defaults.baseURL = window.REACT_APP_API_URL;
+    axios.defaults.baseURL = process.env.REACT_APP_API_URL;
     axios.defaults.headers.common['X-Organisation'] = getState().organisations.selected;
     axios.defaults.withCredentials = true;
     return next(action);