select login option

src/router.js

@@ -20,6 +20,7 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
 import App from './app';
 import Login from './user/login';
+import LoginSelect from './user/login-select';
 import Logout from './user/logout';
 import Home from './common/home';
 import Scenarios from './scenario/scenarios';
@@ -34,7 +35,8 @@ class Root extends React.Component {
     return (
       <BrowserRouter>
         <Switch>
-          <Route path='/login' component={Login} />
+          <Route path='/login' component={LoginSelect} />
+          <Route path='/login-villas' component={Login} />
           <Route path='/logout' component={Logout} />
           <Route path='/' component={App} />
           <Route path='/home' component={Home} />

src/styles/app.css

@@ -219,6 +219,26 @@ body {
   background-color: white;
 }
 
+/**
+ * Login select
+ */
+ .login-select {
+  position: sticky;
+  width: 300px;
+  height: 200px;
+  top: 50%;
+  left: 50%;
+  margin-top: 50px;
+  margin-bottom: 100px;
+  transform: translate(-50%);
+
+
+  padding: 20px 20px;
+
+  background-color: #a8c7cf;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+              0 9px 18px 0 rgba(0, 0, 0, 0.1);
+}
 
 /**
  * Login form

src/user/login-select.js

@@ -0,0 +1,72 @@
+/**
+ * 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, { 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';
+
+
+
+class LoginSelect extends Component {
+  constructor(props) {
+    super(props);
+
+    
+
+    this.state = {
+      standardlogin: true,
+      keycloaklogin: true,
+      jupyterlogin: false
+    }
+  }
+
+  villaswebLogin = e => {
+    this.props.history.replace('/login-villas');
+  }
+
+  jupyterLogin() {
+
+  }
+
+
+  render() {
+
+    return (
+      <div>
+        <Header />
+        <div className="login-select">
+          <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>
+          </Form>
+        </div>
+
+          <Footer />
+    
+      </div>
+    );
+  }
+}
+
+export default withRouter(LoginSelect);