Skip to content
This repository was archived by the owner on Jan 28, 2025. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion enrolment-service/requirements.txt
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ mccabe==0.6.1
oauthlib==2.0.6
openapi-codec==1.3.2
pip-autoremove==0.9.0
psycopg2>=2.8
psycopg2==2.8.6
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pycodestyle==2.3.1
pylint==1.7.4
python3-openid==3.1.0
Expand Down
2 changes: 1 addition & 1 deletion enrolment-ui/Dockerfile
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Copyright 2020(c) The Ontario Institute for Cancer Research. All rights reserved.

FROM node AS prebuilder
FROM node:16 AS prebuilder
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prevents Docker from using Node 18+, as that breaks compatibility with this project. Node 16 appears to be the latest version of Node that will play nice with this.


WORKDIR /data/web
COPY . /data/web/
Expand Down
4 changes: 2 additions & 2 deletions enrolment-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@react-oauth/google": "^0.5.1",
"axios": "^0.21.1",
"country-region-data": "^1.7.0",
"i18next": "^19.9.1",
Expand Down Expand Up @@ -36,9 +37,9 @@
"bootstrap": "^4.6.0",
"css-loader": "^5.1.1",
"mini-css-extract-plugin": "^1.3.9",
"node-sass": "^5.0.0",
"prettier": "2.2.1",
"react-scripts": "^4.0.3",
"sass": "^1.56.2",
"source-map": "^0.7.3",
"style-loader": "^2.0.0",
"webpack-merge": "^5.7.3"
Expand All @@ -49,7 +50,6 @@
"kind-of": "^6.0.3",
"minimist": "^1.2.5",
"node-fetch": "^2.6.1",
"sass-loader": "^11.0.1",
"websocket-extensions": "^0.1.4"
},
"browserslist": {
Expand Down
59 changes: 32 additions & 27 deletions enrolment-ui/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@ import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter, Switch } from 'react-router-dom';
import { GoogleOAuthProvider } from '@react-oauth/google';

import 'bootstrap/dist/css/bootstrap.min.css';

import { getOneConfig } from './config';
import reportWebVitals from './reportWebVitals';
import { unregister } from './registerServiceWorker';
import configureStore from './redux/store';
Expand All @@ -30,37 +32,40 @@ unregister();

// Create redux store
const store = configureStore();
const { clientId } = getOneConfig('clientId');

render(
<Provider store={store}>
<BrowserRouter>
<App>
<Switch>
<OnlyNonLoggedInRoute exact path="/" component={Login} />
<OnlyNonLoggedInRoute exact path="/register-user/:projectId/:userId" component={Login} />
<OnlyNonLoggedInRoute exact path="/login" component={Login} />
<Main>
<Switch>
<PrivateRoute exact path="/dashboard" component={Dashboard} />
<PrivateRoute exact path="/register/project" component={RegisterProject} />
<PrivateRoute exact path="/view/project/:id" component={RegisterProject} />
<PrivateRoute
exact
path="/register/user/:projectId/:userId"
component={RegisterUser}
/>
<PrivateRoute
exact
path="/view/project-user/:projectId/:userId"
component={RegisterUser}
/>
<PrivateRoute exact path="/projects" component={Projects} />
<PrivateRoute component={NotFound} />
</Switch>
</Main>
</Switch>
</App>
<GoogleOAuthProvider clientId={clientId}>
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like a lot, but I'm just wrapping the App in the GoogleOAuthProvider here. Necessary for the new Google auth library.

<BrowserRouter>
<App>
<Switch>
<OnlyNonLoggedInRoute exact path="/" component={Login} />
<OnlyNonLoggedInRoute exact path="/register-user/:projectId/:userId" component={Login} />
<OnlyNonLoggedInRoute exact path="/login" component={Login} />
<Main>
<Switch>
<PrivateRoute exact path="/dashboard" component={Dashboard} />
<PrivateRoute exact path="/register/project" component={RegisterProject} />
<PrivateRoute exact path="/view/project/:id" component={RegisterProject} />
<PrivateRoute
exact
path="/register/user/:projectId/:userId"
component={RegisterUser}
/>
<PrivateRoute
exact
path="/view/project-user/:projectId/:userId"
component={RegisterUser}
/>
<PrivateRoute exact path="/projects" component={Projects} />
<PrivateRoute component={NotFound} />
</Switch>
</Main>
</Switch>
</App>
</BrowserRouter>
</GoogleOAuthProvider>
</Provider>,
document.getElementById('root'),
);
Expand Down
2 changes: 1 addition & 1 deletion enrolment-ui/src/modules/Auth/redux.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const onLoginSuccess = (dispatch, data) => {

const onGoogleLoginSuccess = (dispatch, data) => {
asyncServices.auth
.googleSuccess({ access_token: data.accessToken })
.googleSuccess({ access_token: data.access_token })
/* .then(() => asyncServices.daco.check(data.profileObj.email)) */
.then(response => {
const next = () => dispatch(loginSuccess());
Expand Down
27 changes: 27 additions & 0 deletions enrolment-ui/src/modules/Login/components/GoogleIcon.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
// adapted from: https://github.com/anthonyjgrove/react-google-login/blob/master/src/icon.js
import React from 'react';

const GoogleIcon = ({ active }) => (
<div style={{ marginRight: 10, background: active ? '#eee' : '#fff', padding: 10, borderRadius: 2 }}>
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
<g fill="#000" fillRule="evenodd">
<path
d="M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48z"
fill="#EA4335"
/>
<path d="M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62z" fill="#4285F4" />
<path
d="M3.88 10.78A5.54 5.54 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9.008 9.008 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.92-2.26z"
fill="#FBBC05"
/>
<path
d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18z"
fill="#34A853"
/>
<path fill="none" d="M0 0h18v18H0z" />
</g>
</svg>
</div>
);

export default GoogleIcon;
73 changes: 73 additions & 0 deletions enrolment-ui/src/modules/Login/components/GoogleLoginButton.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
// adapted from: https://github.com/anthonyjgrove/react-google-login/blob/master/src/google-login.js
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In order to get the access_token required by our back-end, we have to use this library's "custom" button (the default, styled-out-of-the-box Login button does not return this token) which has no styles.

Rather than reinventing the wheel, I just adapted the button component the previous library was using. No one will suspect a thing ;)

import React, { useState } from 'react';
import GoogleIcon from './GoogleIcon';

const GoogleLoginButton = ({ buttonText = "Login with Google", children, onClick = () => {} }) => {
const [hovered, setHovered] = useState(false);
const [active, setActive] = useState(false);

const initialStyle = {
backgroundColor: 'rgb(66, 133, 244)',
display: 'inline-flex',
alignItems: 'center',
color: '#fff',
boxShadow: '0 2px 2px 0 rgba(0, 0, 0, .24), 0 0 1px 0 rgba(0, 0, 0, .24)',
padding: '0 10px 0 0',
borderRadius: 2,
border: '1px solid transparent',
fontSize: 14,
fontWeight: '500',
fontFamily: 'Roboto, sans-serif',
marginBottom: '10px',
};

const hoveredStyle = {
backgroundColor: '#1266f1',
cursor: 'pointer',
opacity: 0.9,
};

const activeStyle = {
backgroundColor: '#1266f1',
cursor: 'pointer',
opacity: 1.0,
};

const defaultStyle = (() => {
if (active) {
return Object.assign({}, initialStyle, activeStyle);
}

if (hovered) {
return Object.assign({}, initialStyle, hoveredStyle);
}

return initialStyle;
})();

return (
<button
type="button"
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => {
setActive(false);
setHovered(false);
}}
onFocus={() => setHovered(true)}
onBlur={() => {
setActive(false);
setHovered(false);
}}
onMouseDown={() => setActive(true)}
onMouseUp={() => setActive(false)}
onClick={() => onClick()}
style={defaultStyle}
>
<GoogleIcon key={1} active={active} />
{children || buttonText}
</button>
);

};

export default GoogleLoginButton;
28 changes: 15 additions & 13 deletions enrolment-ui/src/modules/Login/components/GoogleLoginForm.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,31 @@
import React from 'react';
import GoogleLogin from 'react-google-login';
import { useGoogleLogin } from '@react-oauth/google';
import { connect } from 'react-redux';
import { withTranslation } from 'react-i18next';

import { getOneConfig } from '../../../config';
import { createGoogleLoginFunctions } from '../../Auth/redux';

import GoogleLoginButton from './GoogleLoginButton';
import ChangeLogin from './ChangeLogin';

const GoogleLoginForm = props => {
const { clientId } = getOneConfig('clientId');

const { t, auth: { loading }, googleLoginFunctions: { onRequest, onSuccess, onFailure } } = props;
const {
googleLoginFunctions: {
onSuccess,
onFailure
}
} = props;

const login = useGoogleLogin({
onSuccess: onSuccess,
onError: onFailure,
flow: 'implicit',
});

return (
<div className="login-container">
<GoogleLogin
className={`login-google ${loading ? 'disabled' : ''}`}
buttonText={t('GoogleLogin.buttonText')}
clientId={clientId}
onRequest={onRequest}
onSuccess={onSuccess}
onFailure={onFailure}
disabled={loading}
/>
<GoogleLoginButton onClick={login} />
<ChangeLogin />
</div>
);
Expand Down
Loading