Merge pull request #379 from EBISPOT/develop

Develop

.gitlab-ci.yml

@@ -17,7 +17,7 @@ variables:
   UI_SERVICE_NAME: gwas-deposition-ui
 
 prod-build:
-  image: node:10.15.3
+  image: node:12.10.0
   stage: build-prod
   script:
     - npm -v
@@ -34,7 +34,7 @@ prod-build:
     - uidepo-477-Sandbox-Migration
 
 sandbox-build:
-  image: node:10.15.3
+  image: node:12.10.0
   stage: build-sandbox
   script:
     - npm -v
@@ -49,7 +49,7 @@ sandbox-build:
     - uidepo-477-Sandbox-Migration
 
 sandbox-migration-build:
-  image: node:10.15.3
+  image: node:12.10.0
   stage: build-sandbox-migration
   script:
     - npm -v

src/App.js

@@ -30,6 +30,7 @@ import history from "./history";
 import BodyOfWorkDetails from './BodyOfWorkDetails';
 import UpdateBodyOfWork from './UpdateBodyOfWork';
 import PublicationsMatTable from './PublicationsMatTable';
+import LoginCallback from "./LoginCallback";
 
 ReactGA.initialize('UA-60195133-1');
 //Initialize google analytics page view tracking
@@ -72,6 +73,7 @@ const App = ({ classes }) => (
               <Route path={`${process.env.PUBLIC_URL}/bodyofwork/:gcp_id`} exact render={props => <BodyOfWorkDetails {...props} />} />
               {/*<Route path={`${process.env.PUBLIC_URL}/update-bodyofwork`} exact render={props => <UpdateBodyOfWork {...props} />} />*/}
               <Route path={`${process.env.PUBLIC_URL}/error`} component={ErrorPage} />
+              <Route path={`${process.env.PUBLIC_URL}/popup-callback`} component={LoginCallback} />
             </main>
           </div>
         </div>

src/ElixirAuthService/index.js

@@ -44,7 +44,7 @@ export default class ElixirAuthService {
             'toolbar=no'
         ];
 
-        const loginWindow = window.open(this.getSSOURL(), 'Sign in to Elixir', windowOptions.join(','));
+        const loginWindow = window.open(this.getSSOURL(), 'Sign in GWAS', windowOptions.join(','));
 
         if (loginWindow) {
             loginWindow.focus();
@@ -59,10 +59,20 @@ export default class ElixirAuthService {
     * @returns The SSO URL.
     */
     getSSOURL() {
-        const fragments = this._formatFragments({
-            'from': this._domain,
-        });
-        return `${this._appURL}/sso${fragments}&ttl=180`;
+        const keycloakBaseUrl = "https://www.ebi.ac.uk/mi/keycloak";
+        const realm = "gwas";
+        const clientId = "deposition";
+        const redirectUri = window.location.origin + "/gwas/deposition/popup-callback";
+        const responseType = "token";
+        const scope = "profile email";
+        const nonce = "random";
+
+        return `${keycloakBaseUrl}/realms/${realm}/protocol/openid-connect/auth?` +
+            `client_id=${clientId}&` +
+            `redirect_uri=${redirectUri}&` +
+            `response_type=${responseType}&` +
+            `scope=${scope}&` +
+            `nonce=${nonce}`;
     }
 
 

src/Login/index.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import lsri_login_button from '../LS.png';
 
 import Grid from '@material-ui/core/Grid';
 import ElixirAuthService from '../ElixirAuthService';
@@ -8,17 +7,11 @@ import { AuthConsumer } from '../auth-context';
 
 import history from "../history";
 import { Typography } from '@material-ui/core';
-import Link from '@material-ui/core/Link';
 
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 
-
-const AAP_URL = process.env.REACT_APP_AAPURL;
-
-const LSRegistrationLink = "https://signup.aai.lifescience-ri.eu/fed/registrar/?vo=lifescience";
-
-const LSLoginContact = <a href="mailto:[email protected]">[email protected]</a>;
+const gwasContact = <a href="mailto:[email protected]">[email protected]</a>;
 
 const styles = theme => ({
     linkColor: {
@@ -73,7 +66,9 @@ class Login extends Component {
         }
 
         // Store JWT in local storage
-        const token = event.data;
+        const token = event.newValue;
+        localStorage.removeItem("tokenEvent");
+
         this.ElixirAuthService.setToken(token);
 
         // Set Auth Context 
@@ -106,19 +101,19 @@ class Login extends Component {
     }
 
     componentDidMount() {
-        window.addEventListener("message", this.handleLogin);
+        window.addEventListener('storage', this.handleLogin);
     }
 
     componentWillUnmount() {
-        window.removeEventListener('message', this.handleLogin);
+        window.removeEventListener('storage', this.handleLogin);
     }
 
     /**
     * Check if the message is coming from the same domain we use to generate
     * the SSO URL, otherwise it's iffy and shouldn't trust it.
     */
     messageIsAcceptable(event) {
-        return event.origin === AAP_URL;
+        return event.key === 'tokenEvent' && event.newValue;
     }
 
     render() {
@@ -132,31 +127,37 @@ class Login extends Component {
                 spacing={3}>
                 <Grid item xs={12} sm={6}>
                     <Typography>
-                        Single Sign On using your LS Login identity!
+                        Log in using your institution!
                     </Typography>
                 </Grid>
 
                 <Grid item xs={12} sm={6}>
-                    <button onClick={this.ElixirAuthService.login} className={classes.button}>
-                        < span >
-                            <img src={lsri_login_button} alt="login" style={{ height: '1.7em', width: '3em', verticalAlign: 'middle', paddingRight: '2px' }} />
-                            LOGIN
-                        </span>
-                    </button>
+                    <div
+                        style={{
+                            display: 'inline-block',
+                            boxShadow: '3px 5px 3px rgba(0, 0, 0, 0.2)',
+                            overflow: 'hidden', transition: 'transform 0.3s, box-shadow 0.3s'
+                        }}
+                    >
+                        <img onClick={this.ElixirAuthService.login} alt="CILogon"
+                             src="https://cilogon.org/images/cilogon-ci-32-g.png" style={{
+                            cursor: 'pointer', width: '100%',
+                            height: '100%',
+                            display: 'block',
+                        }}/>
+                    </div>
                 </Grid>
 
-                <Grid item xs={12} sm={6}>
+                <Grid item xs={12} sm={8}>
                     <Typography>
-                        You can use the Life Science Login identity service and other Life Science services with the freely available
-                        LS Login identity, which integrates with Google, ORCID and most academic institutions.
-
-                        Obtain your LS Login identity <Link href={LSRegistrationLink} className={classes.linkColor}>here</Link>.
+                        The GWAS Submission system uses CILogon to allow you to log in, which integrates with Google,
+                        ORCID and most academic institutions.
                     </Typography>
                 </Grid>
 
                 <Grid item xs={12} sm={6}>
                     <Typography>
-                        If you have problems logging in please contact {LSLoginContact}.
+                        If you have problems logging in please contact {gwasContact}.
                     </Typography>
                 </Grid>
             </Grid >

src/LoginCallback/index.js

@@ -0,0 +1,40 @@
+import React, { useEffect } from "react";
+
+// This was written to mimic the behaviour of AAP which used to post message events, I used storage events
+// As message events didn't work after a redirect to the idp, as it fails to reference the opener (null)
+const PopupCallback = () => {
+    useEffect(() => {
+        // Function to parse URL hash parameters
+        const parseHashParams = (hash) => {
+            const params = {};
+            hash.substring(1).split("&").forEach((pair) => {
+                const [key, value] = pair.split("=");
+                params[key] = decodeURIComponent(value);
+            });
+            return params;
+        };
+
+        // Handle the callback
+        const handleCallback = () => {
+            if (window.location.hash) {
+                const hashParams = parseHashParams(window.location.hash);
+                const token = hashParams.access_token;
+                if (token) {
+                    // Send tokens to the parent window
+                    localStorage.setItem("tokenEvent", token);
+                } else {
+                    localStorage.setItem("tokenEvent", undefined);
+                }
+
+                // Close the popup
+                window.close();
+            }
+        };
+
+        handleCallback();
+    }, []);
+
+    return  <div style={{marginTop: '300px'}}>Processing login...</div>;
+};
+
+export default PopupCallback;

src/MenuAppBar/index.js

@@ -17,6 +17,7 @@ import ElixirAuthService from '../ElixirAuthService';
 import jwt_decode from 'jwt-decode';
 
 import { AuthConsumer, AuthContext } from '../auth-context';
+import {ExitToApp} from "@material-ui/icons";
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -218,8 +219,14 @@ function MenuAppBar() {
                                     open={open}
                                     onClose={handleMenuClose}
                                 >
-                                    {/* <MenuItem onClick={showMySubmissions}>My Submissions</MenuItem> */}
-                                    <MenuItem onClick={handleLogout}>Logout</MenuItem>
+                                    <MenuItem>
+                                        <AccountCircle></AccountCircle>
+                                        {<span>{jwt_decode(eas.getToken()).email}</span>}
+                                    </MenuItem>
+                                    <MenuItem onClick={handleLogout}>
+                                        <ExitToApp></ExitToApp>
+                                        Logout
+                                    </MenuItem>
                                 </Menu>
                             </div>
                         </div>)}