after successful oauth, make backend request, #39

src/config.js

@@ -24,8 +24,9 @@ const config = {
       mail: 'stvogel@eonerc.rwth-aachen.de'
     },
     externalAuth: true,
-    loginURL: 'http://localhost:4180/oauth2/start',
-    provider: 'KeyCloak'
+    loginURL: 'http://localhost:4180/oauth2/start?rd=http://localhost:3000/login/complete',
+    provider: 'KeyCloak',
+    disableVillasLogin: false,
 };
 
 export default config

src/router.js

@@ -29,7 +29,8 @@ import Dashboard from './dashboard/dashboard'
 import InfrastructureComponents from './ic/ics';
 import Users from './user/users';
 import User from "./user/user";
-import Config from './config.js';
+import Config from './config';
+import LoginComplete from './user/login-complete'
 
 
 class Root extends React.Component {
@@ -37,10 +38,11 @@ class Root extends React.Component {
     return (
       <BrowserRouter>
         <Switch>
+          <Route path='/login/complete' component={LoginComplete} />
           <Route
             path='/login'
             render={(props) => (
-              <LoginSelect loginURL={Config.loginURL} provider={Config.provider}/>
+              <LoginSelect loginURL={Config.loginURL} provider={Config.provider} disableVillasLogin={Config.disableVillasLogin}/>
             )}
           />
           <Route path='/villaslogin' component={Login} />

src/user/login-complete.js

@@ -0,0 +1,70 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+import AppDispatcher from '../common/app-dispatcher';
+import LoginStore from './login-store'
+import NotificationsDataManager from '../common/data-managers/notifications-data-manager';
+
+
+
+class LoginComplete extends React.Component {
+  constructor(props) {
+    super(props);
+    
+    AppDispatcher.dispatch({
+      type: 'users/extlogin',
+    });
+
+    this.state = {
+      loginMessage: '',
+      token: '',
+      currentUser: '',
+    }
+  }
+
+  static getStores(){
+    return [LoginStore]
+  }
+
+  static calculateState(prevState, props) {
+    // We need to work with the login store here to trigger the re-render upon state change after login
+    // Upon successful login, the token and currentUser are stored in the local storage as strings
+    return {
+      loginMessage: LoginStore.getState().loginMessage,
+      token: LoginStore.getState().token,
+      currentUser: LoginStore.getState().currentUser,
+    }
+  }
+
+  componentDidMount() {
+    NotificationsDataManager.setSystem(this.refs.notificationSystem);
+  }
+
+  render() {
+    const { user } = this.state.currentUser;
+    if (this.state.currentUser !== null && this.state.currentUser !== "") {
+      return (<Redirect to="/home" />);
+    }
+    else {
+      return (<p>Authenticating..</p>);
+    }
+  }
+}
+
+export default LoginComplete;

src/user/login-select.js

@@ -37,7 +37,7 @@ class LoginSelect extends Component {
         <Header />
         <div className="login-select">
           <Form>
-            <Button variant="primary" block onClick={this.villaswebLogin}>VillasWeb login</Button>
+            <Button variant="primary" block onClick={this.villaswebLogin} disabled={this.props.disableVillasLogin}>VillasWeb login</Button>
             <br />
             <Button variant="primary" block onClick={e => window.location = this.props.loginURL }>{this.props.provider} login</Button>
           </Form>

src/user/login-store.js

@@ -40,6 +40,10 @@ class LoginStore extends ReduceStore {
         UsersDataManager.login(action.username, action.password);
         return Object.assign({}, state, { loginMessage: null });
 
+      case 'users/extlogin':
+        UsersDataManager.login();
+        return Object.assign({}, state, { loginMessage: null });
+
       case 'users/logout':
         // disconnect from all infrastructure components
         ICDataDataManager.closeAll();

src/user/users-data-manager.js

@@ -25,18 +25,33 @@ class UsersDataManager extends RestDataManager {
   }
 
   login(username, password) {
-    RestAPI.post(this.makeURL('/authenticate'), { username: username, password: password }).then(response => {
-      AppDispatcher.dispatch({
-        type: 'users/logged-in',
-        token: response.token,
-        currentUser: response.user,
+    if (username && password) {
+      RestAPI.post(this.makeURL('/authenticate'), { username: username, password: password }).then(response => {
+        AppDispatcher.dispatch({
+          type: 'users/logged-in',
+          token: response.token,
+          currentUser: response.user,
+        });
+      }).catch(error => {
+        AppDispatcher.dispatch({
+          type: 'users/login-error',
+          error: error
+        });
       });
-    }).catch(error => {
-      AppDispatcher.dispatch({
-        type: 'users/login-error',
-        error: error
+    } else { // external authentication
+      RestAPI.post(this.makeURL('/authenticate'),).then(response => {
+        AppDispatcher.dispatch({
+          type: 'users/logged-in',
+          token: response.token,
+          currentUser: response.user,
+        });
+      }).catch(error => {
+        AppDispatcher.dispatch({
+          type: 'users/login-error',
+          error: error
+        });
       });
-    });
+    }
   }
 }