login page based on VillasWeb config

src/config.js

@@ -22,7 +22,10 @@ const config = {
     admin: {
       name: 'Institute for Automation of Complex Power Systems (ACS), RWTH Aachen University, Germany',
       mail: 'stvogel@eonerc.rwth-aachen.de'
-    }
+    },
+    externalAuth: true,
+    loginURL: 'http://localhost:4180/oauth2/start',
+    provider: 'KeyCloak'
 };
 
 export default config

src/router.js

@@ -29,14 +29,21 @@ 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';
+
 
 class Root extends React.Component {
   render() {
     return (
       <BrowserRouter>
         <Switch>
-          <Route path='/login' component={LoginSelect} />
-          <Route path='/login-villas' component={Login} />
+          <Route
+            path='/login'
+            render={(props) => (
+              <LoginSelect loginURL={Config.loginURL} provider={Config.provider}/>
+            )}
+          />
+          <Route path='/villaslogin' component={Login} />
           <Route path='/logout' component={Logout} />
           <Route path='/' component={App} />
           <Route path='/home' component={Home} />

src/styles/app.css

@@ -225,7 +225,7 @@ body {
  .login-select {
   position: sticky;
   width: 300px;
-  height: 200px;
+  height: 150px;
   top: 50%;
   left: 50%;
   margin-top: 50px;

src/user/login-select.js

@@ -17,8 +17,6 @@
 
 import React, { Component } from 'react';
 import { Form, Button, FormGroup, FormControl, FormLabel, Col } from 'react-bootstrap';
-//import RecoverPassword from './recover-password'
-//import AppDispatcher from '../common/app-dispatcher';
 import Header from '../common/header';
 import Footer from '../common/footer';
 import { withRouter } from 'react-router-dom';
@@ -26,27 +24,12 @@ import { withRouter } from 'react-router-dom';
 
 
 class LoginSelect extends Component {
-  constructor(props) {
-    super(props);
 
-    
-
-    this.state = {
-      standardlogin: true,
-      keycloaklogin: true,
-      jupyterlogin: false
-    }
-  }
 
   villaswebLogin = e => {
-    this.props.history.replace('/login-villas');
+    this.props.history.replace('/villaslogin');
   }
 
-  jupyterLogin() {
-
-  }
-
-
   render() {
 
     return (
@@ -56,9 +39,7 @@ class LoginSelect extends Component {
           <Form>
             <Button variant="primary" block onClick={this.villaswebLogin}>VillasWeb login</Button>
             <br />
-            <Button variant="primary" block onClick={e => window.location = "https://keycloak.192.168.49.2.nip.io/auth"}>KeyCloak login</Button>
-            <br />
-            <Button variant="primary" block onClick={() => this.jupyterLogin()}>Jupyter Login</Button>
+            <Button variant="primary" block onClick={e => window.location = this.props.loginURL }>{this.props.provider} login</Button>
           </Form>
         </div>
 

src/user/logout.js

@@ -19,6 +19,7 @@ import React from 'react';
 import { Redirect } from 'react-router-dom';
 
 import AppDispatcher from '../common/app-dispatcher';
+import Config from '../config.js';
 
 class Logout extends React.Component {
   componentDidMount() {
@@ -34,9 +35,15 @@ class Logout extends React.Component {
   }
 
   render() {
-    return (
-      <Redirect to="/login" />
-    );
+    if (Config.externalAuth) {
+      return (
+        <Redirect to="/login" />
+      );
+    } else {
+      return (
+        <Redirect to="/villaslogin" />
+      );
+    }
   }
 }