Authentication

.env

@@ -1,2 +1,4 @@
 REACT_APP_API_STUDY_SERVER=api/study-server
 REACT_APP_API_CASE_SERVER=api/case-server
+
+REACT_APP_USE_AUTHENTICATION=true

.env.development

@@ -0,0 +1 @@
+REACT_APP_USE_AUTHENTICATION=false

package.json

@@ -25,6 +25,7 @@
     "react-window": "^1.8.5",
     "redux": "^4.0.5",
     "typeface-roboto": "0.0.75",
+    "oidc-client": "^1.10.1",
     "react-virtualized": "^9.21.2"
   },
   "scripts": {

public/idpSettings.json

@@ -0,0 +1,7 @@
+{
+    "authority" : "#",
+    "client_id" : "#",
+    "redirect_uri": "#",
+    "post_logout_redirect_uri" : "#",
+    "scope" : "#"
+}

src/components/app.js

@@ -5,9 +5,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 
-import {useSelector} from 'react-redux'
+import {useDispatch, useSelector} from 'react-redux'
 
 import {Route, Switch, useHistory, useLocation} from 'react-router-dom';
 
@@ -18,6 +18,8 @@ import StudyManager from './study-manager';
 import TopBar from './top-bar';
 import {LIGHT_THEME} from '../redux/actions'
 import Parameters from "./parameters";
+import {userManagerPromise, login, logout, handleSigninCallback} from '../utils/authentication/AuthService';
+import Authentication from "./authentication";
 
 const lightTheme = createMuiTheme({
     palette: {
@@ -41,23 +43,50 @@ const getMuiTheme = (theme) => {
     }
 };
 
-const App = () => {
+const SignInCallback = (props) => {
+    useEffect(() => {
+        if (props.userManager.instance !== null) {
+            props.handleSigninCallback();
+        }
+    }, [props.userManager]);
+
+    return (
+        <h1> </h1>
+    )
+};
 
+const noUserManager = {instance: null, error: null};
+
+const App = () => {
     const theme = useSelector(state => state.theme);
 
+    const user = useSelector(state => state.user);
+
+    const [userManager, setUserManager] = useState(noUserManager);
+
     const history = useHistory();
 
+    const dispatch = useDispatch();
+
     const location = useLocation();
 
+    useEffect(() => {
+        userManagerPromise
+            .then(userManager => {
+                setUserManager({instance : userManager, error : null });
+            })
+            .catch(function(error) {
+                setUserManager({instance : null, error : error.message});
+                console.debug("error when importing the idp settings")
+             });
+    }, []);
+
     function studyClickHandler(studyName) {
         history.push("/studies/" + studyName);
     }
 
     function showParameters() {
-        if (location.pathname === "/parameters") {
-            // if already at parameters go back to study
-            history.goBack();
-        } else {
+        if (location.pathname !== "/parameters") {
             history.push("/parameters");
         }
     }
@@ -66,21 +95,33 @@ const App = () => {
         <ThemeProvider theme={getMuiTheme(theme)}>
             <React.Fragment>
                 <CssBaseline />
-                <TopBar onParametersClick={ () => showParameters() }/>
-                <Switch>
-                    <Route exact path="/">
-                        <StudyManager onStudyClick={ name => studyClickHandler(name) }/>
-                    </Route>
-                    <Route exact path="/studies/:studyName">
-                        <StudyPane/>
-                    </Route>
-                    <Route exact path="/parameters">
-                        <Parameters/>
-                    </Route>
-                    <Route>
-                        <h1>Error: bad URL; No matched Route.</h1>
-                    </Route>
-                </Switch>
+                <TopBar onParametersClick={() => showParameters()} onLogoutClick={() => logout(dispatch, userManager.instance)}/>
+                    { user !== null ? (
+                        <Switch>
+                            <Route exact path="/">
+                                  <StudyManager onStudyClick={name => studyClickHandler(name)}/>)
+                            </Route>
+                            <Route exact path="/studies/:studyName">
+                               <StudyPane/>
+                            </Route>
+                            <Route exact path="/parameters">
+                              <Parameters/>
+                            </Route>
+                            <Route>
+                                <h1>Error: bad URL; No matched Route.</h1>
+                            </Route>
+                        </Switch>)
+                        : (
+                            <Switch>
+                                <Route exact path="/sign-in-callback">
+                                    <SignInCallback userManager={userManager} handleSigninCallback={() => handleSigninCallback(dispatch, history, userManager.instance)}/>
+                                </Route>
+                                <Route>
+                                    {userManager.error !== null && (<h1>Error : Getting userManager; {userManager.error}</h1>)}
+                                    {userManager.error === null && (<Authentication disabled={userManager.instance === null} onLoginClick={() => login(location, userManager.instance)}/>)}
+                                </Route>
+                            </Switch>
+                        )}
             </React.Fragment>
         </ThemeProvider>
     )

src/components/authentication.js

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2020, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import React, {useEffect} from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Link from '@material-ui/core/Link';
+import Box from '@material-ui/core/Box';
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
+import {FormattedMessage} from "react-intl";
+
+const useStyles = makeStyles((theme) => ({
+    paper: {
+        marginTop: theme.spacing(8),
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    avatar: {
+        margin: theme.spacing(1),
+        backgroundColor: theme.palette.secondary.main,
+    },
+    submit: {
+        margin: theme.spacing(3, 0, 2),
+        borderRadius: '30px'
+        },
+    logo: {
+        width: 64,
+        height: 64,
+    },
+}));
+
+
+const Authentication = (props) => {
+    const classes = useStyles();
+
+    function Copyright() {
+        return (
+            <Typography variant="body2" color="textSecondary" align="center">
+                {'Copyright © '}
+                <Link color="inherit" href="#">
+                    Grid Suite
+                </Link>{' '}
+                {new Date().getFullYear()}
+                {'.'}
+            </Typography>
+        );
+    }
+
+    return (
+        <Container component="main" maxWidth="xs">
+            <CssBaseline />
+            <div className={classes.paper}>
+                <Avatar className={classes.avatar}>
+                    <LockOutlinedIcon />
+                </Avatar>
+                <Typography component="h1" variant="h5">
+                    <FormattedMessage id="login"/> ?
+                </Typography>
+
+                <Button
+                    disabled={props.disabled}
+                    fullWidth
+                    variant="contained"
+                    color="primary"
+                    className={classes.submit}
+                    onClick={props.onLoginClick}
+                >
+                    <FormattedMessage id="connection"/>
+                </Button>
+            </div>
+            <Box mt={2}>
+                <Copyright />
+            </Box>
+        </Container>
+    );
+};
+
+export default Authentication;

src/components/study-manager.js

@@ -34,6 +34,7 @@ import {ReactComponent as IeeeLogo} from '../images/ieee_logo.svg';
 import {loadStudiesSuccess} from '../redux/actions';
 import {fetchStudies, deleteStudy} from '../utils/rest-api';
 import CreateStudyForm from "./create-study-form";
+
 import {CardHeader} from "@material-ui/core";
 import IconButton from "@material-ui/core/IconButton";
 import MoreVertIcon from '@material-ui/icons/MoreVert';
@@ -248,7 +249,6 @@ const StudyCard = ({study, onClick}) => {
 };
 
 const StudyManager = ({onStudyClick}) => {
-
     const dispatch = useDispatch();
 
     useEffect(() => {
@@ -265,12 +265,12 @@ const StudyManager = ({onStudyClick}) => {
 
     return (
         <Container maxWidth="lg">
-            <CreateStudyForm />
+            <CreateStudyForm/>
             <Grid container spacing={2} className={classes.grid}>
                 {
                     studies.map(study =>
                         <Grid item xs={12} sm={6} md={3} key={study.studyName}>
-                            <StudyCard study={study} onClick={() => onStudyClick(study.studyName)} />
+                            <StudyCard study={study} onClick={() => onStudyClick(study.studyName)}/>
                         </Grid>
                     )
                 }