-
Notifications
You must be signed in to change notification settings - Fork 1
👽️ Migrate to Google Identity Services (#227) #233
base: develop
Are you sure you want to change the base?
Changes from all commits
5329fbb
362b747
d445aa7
e1e11d7
0600fd6
f304105
4910055
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| 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 | ||
|
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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/ | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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'; | ||
|
|
@@ -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}> | ||
|
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 |
||
| <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'), | ||
| ); | ||
|
|
||
| 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; |
| 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 | ||
|
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. In order to get the 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; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixes: psycopg/psycopg2#1293 (comment)