From 74b00a2b78850e99b6fef381b9cc99f812ac0908 Mon Sep 17 00:00:00 2001 From: vsumit89 Date: Wed, 1 Dec 2021 13:14:30 +0530 Subject: [PATCH 1/3] ability to customise logo and title --- web/src/components/Auth/index.js | 20 ++++++++----------- web/src/components/GlobalNav/AccountMenu.js | 2 +- .../components/MediaSelector/index.test.js | 2 +- web/src/pages/error/index.js | 2 +- web/src/pages/password/index.js | 6 +++--- 5 files changed, 14 insertions(+), 18 deletions(-) diff --git a/web/src/components/Auth/index.js b/web/src/components/Auth/index.js index c9921e32..a8fdc63d 100644 --- 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 logo = (process.env.REACT_APP_LOGO_URL===undefined) ? kavach_logo : process.env.REACT_APP_LOGO_URL 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,19 +104,13 @@ function Auth(props) {
- logo + logo {title} - each.group === 'oidc').length > 0 ? [] : [] - } - title={props.flow} - style={{ width: 400 }} - > + ] : []} title={props.flow==="login" ? "User Login" : "User Registration"} style={{ width: 400 }}>
{ui.nodes && ui.nodes.messages ? ( diff --git a/web/src/components/GlobalNav/AccountMenu.js b/web/src/components/GlobalNav/AccountMenu.js index 614ec8f3..cce7c6a6 100644 --- 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 index 4e207160..b2b79c1a 100644 --- 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( diff --git a/web/src/pages/error/index.js b/web/src/pages/error/index.js index 6e964656..01663430 100644 --- 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 index 98106a6f..35d3949d 100644 --- 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'; }); }, []); From cf63fefff8675ce0246b5c41493efcdb0d36a4db Mon Sep 17 00:00:00 2001 From: vsumit89 Date: Wed, 1 Dec 2021 13:41:28 +0530 Subject: [PATCH 2/3] replaced window.REACT_APP by process.env.REACT_APP --- docker-compose.yml | 6 +++++- web/src/assets/factly-logo.png | Bin 2211 -> 0 bytes web/src/components/Auth/index.test.js | 20 ++++++++++---------- web/src/components/Uppy/index.js | 8 ++++---- web/src/pages/password/index.test.js | 16 ++++++++-------- web/src/utils/axios.js | 2 +- 6 files changed, 28 insertions(+), 24 deletions(-) delete mode 100644 web/src/assets/factly-logo.png diff --git a/docker-compose.yml b/docker-compose.yml index 29efb67f..4647d75b 100644 --- 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: \ No newline at end of file diff --git a/web/src/assets/factly-logo.png b/web/src/assets/factly-logo.png deleted file mode 100644 index 722f0347a4781178a1875c4ba08fd01a66b87f9c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2211 zcmai$dpy(oAIBA4jyS1Y+ME-zp_(wuHFqX!O&ptsT-J9XTO{Su&n^8XOpF#^l!~aI zsm!$`Cxz`dmmIk)xi!r7$Yf52{dA7U@A3QN_j~*vkI(1%e!SnG*W>-~^OJHK=d36X zm6wr`QFJ-s=q@9(1^NB%l--!%_Oq5ZipgoLhm%w)okXGk?-3e0{Ab4C%fZ-<4SOQo zalgnYX&Ty|_76+Qy#M^yw)Z1nZXq9^m66%G%f->oBkJSa;9TB4J%#Q5r#(ClN3HAD zdj`H7cs=;~=Oit;zlj>}cAUNOMTNe&)7?zqDtG8O$96li8ragX!ra-I8J$$8bO6wl zg?yjNeMe@Z!j|sSm?RIu@_KW!dJ29T#AyN9wYtB(_ znh3o)8o1Py&TUg~%&fH?9#Rlgea5*mw z6IcK~$)yZM@0Zt7P;IUUFDH&qP``?`0Ia`8gO?)e5)%C!6VwE>`4sXwJAmQAd~^agnA4&bJ4o*Mu}Bq7*B<5J8*97hu?VW3q9#>f;yaAmQG z=IlI@aLNlda3PiXlWZ!ZN99N`A(c|@`|TLNhBHwacRO##Z7p@Y$NnMc!Ah5H#0OVs z2Z7cnFrOnpnQ8^n!FCJV#qG`4_j2H!TdXsYEv~9KywS9-_w5F9*kfJwEF^N>H9MbT z)6;xEpB_+k{ObH*AR=y;%iv=!R(1Z7n?xiXim8h;7&(Q_khHya3aVKiZnk)rcL9 z>~%&D(dugh(d(D&G>A$nJVW&=hGG*bq7ttTskoe?kYv5!tV0Fd&a+-+@5H_2v_PdX zpMR(!s`0(x&tMePY$aYCkoEfH>r;hk4z{^Vr+6;IWYVX`Izwk0)rqye2auiLi0)Zk z&w3O24gH+0LQ2N%MuR3_AE4Mtp%o*pQPUr5b~35xSQ=X6hW0rpOzs-$4AfdINT>Jz zbA7mNy{5jDh6po39_Ayao1F-u!j)?9hbSXPI{hs}bMsWybkMW+4h%?a-5J zX$n9-<$>Lg>|YJ*SrHy}s{AGMZ(EVm3Fg=7b+d&RE8=I8+s^t4jf2SVASF8>$6CWm zl9k}Bj%Wx#=(=F<1;3v>88IGOnu*g%y4B7tI2M6)S=&(!M%_b8k(Op*v1%;pi=?1x^se z^ZF(2$DGhF^p+=5BTV?6qbs@IF`DV_+DXf&#XS99m7KSq)MxKR@>mo4&HXFxN-@ z(>ZP-YlA552JPs!!)e7?g}#{V6Y7FO%t8;TIA^q=`P~_fu@P-v)INRFzWq~7a#GW7 z%LAp_>j9Fn66NM+7t%gaEc<8yK<-!$8Ix)?hUxt~WLcX^@Q^n1gwy?=BEvmUi?IX`^;gX(PH$9|1# z$Ez6TOF$8_qUW*hFXCYIfDHIFCuA1|siN8aRVgIJo(3P%?^~3QWC*I^oDZ*-4p5B& z%*)E+YqhK5tLQ|%i0L{7Vh0Vq?`*ssavOwNA#s1i5#^|ZB-3^V-o%oU1mN4{Q<<=` zAc8wfk9e%|A&Jbr07iEoCF)mJ1h6sY)GEbnvXzu&mci64`nd~8dqQSggxCcK<+Wi| zEUMm{5QmH`%0Zd}kr`WBafvOj9ry(6KyTY$xWYlnaoe6pGJ;QJK?I~7APoT;U8Y!f zXX+Res!lFiWkSy7^hcDqCC*BO(Wrvp4_d}8)b{hxY7V`^{uFgOc~)R3?eZ^iW6sup z#99^|m=1(ibFE7XdGH$LSG>Go$vVf{YhY}7*>7skYP_eO{T$X|7e7Pmjrn}+ACUaz z>}zv$WCv4p9{Q5=w0wckfr7$}y$7*HPHcJ^y8uL|0p`NBrnlVb^H6FQz8wXHmw~}3 z48gcNh{+ { 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,7 +410,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', { @@ -418,14 +418,14 @@ describe('Auth component', () => { }, ], [ - 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/Uppy/index.js b/web/src/components/Uppy/index.js index a546aa28..be2b30d8 100644 --- 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/password/index.test.js b/web/src/pages/password/index.test.js index 11dc8d63..8f7e8720 100644 --- 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 index 85d4cf0f..11bda20c 100644 --- 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); From 1e6798ee7cdc1033ec1767343884eebe3b807bc6 Mon Sep 17 00:00:00 2001 From: vsumit89 Date: Wed, 1 Dec 2021 18:23:58 +0530 Subject: [PATCH 3/3] minimal changes in Card element --- web/src/components/Auth/index.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/web/src/components/Auth/index.js b/web/src/components/Auth/index.js index a8fdc63d..bfcdf230 100644 --- a/web/src/components/Auth/index.js +++ b/web/src/components/Auth/index.js @@ -9,8 +9,8 @@ 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 logo = (process.env.REACT_APP_LOGO_URL===undefined) ? kavach_logo : process.env.REACT_APP_LOGO_URL + const title = process.env.REACT_APP_KAVACH_TITLE || "Kavach" + const logo = process.env.REACT_APP_LOGO_URL || kavach_logo React.useEffect(() => { var obj = {}; @@ -110,7 +110,13 @@ function Auth(props) { {title} - ] : []} title={props.flow==="login" ? "User Login" : "User Registration"} style={{ width: 400 }}> + each.group === 'oidc').length > 0 ? [] : [] + } + title={props.flow} + style={{ width: 400 }} + > {ui.nodes && ui.nodes.messages ? (