read config from backend, changed login page

src/app.js

@@ -48,6 +48,11 @@ class App extends React.Component {
     this.state = {
       showSidebarMenu: false,
     }
+
+    // load config from backend
+    AppDispatcher.dispatch({
+      type: 'config/load',
+    });
   }
 
   componentDidMount() {

src/config-reader.js

@@ -0,0 +1,43 @@
+/**
+ * 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 RestDataManager from './common/data-managers/rest-data-manager';
+import RestAPI from './common/api/rest-api';
+import AppDispatcher from './common/app-dispatcher';
+
+
+class ConfigReader extends RestDataManager {
+  constructor() {
+    super('config', '/config');
+  }
+
+  loadConfig() {
+    RestAPI.get(this.makeURL('/config'), null).then(response => {
+      AppDispatcher.dispatch({
+        type: 'config/loaded',
+        data: response,
+      });
+    }).catch(error => {
+      AppDispatcher.dispatch({
+        type: 'config/load-error',
+        error: error,
+      });
+    });
+  }
+};
+
+export default new ConfigReader();

src/router.js

@@ -20,7 +20,6 @@ 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';
@@ -29,7 +28,6 @@ import Dashboard from './dashboard/dashboard'
 import InfrastructureComponents from './ic/ics';
 import Users from './user/users';
 import User from "./user/user";
-import Config from './config';
 import LoginComplete from './user/login-complete'
 
 
@@ -39,13 +37,7 @@ class Root extends React.Component {
       <BrowserRouter>
         <Switch>
           <Route path='/login/complete' component={LoginComplete} />
-          <Route
-            path='/login'
-            render={(props) => (
-              <LoginSelect loginURL={Config.loginURL} provider={Config.provider} disableVillasLogin={Config.disableVillasLogin}/>
-            )}
-          />
-          <Route path='/villaslogin' component={Login} />
+          <Route path='/login' component={Login} />
           <Route path='/logout' component={Logout} />
           <Route path='/' component={App} />
           <Route path='/home' component={Home} />

src/styles/app.css

@@ -254,6 +254,13 @@ body {
               0 9px 18px 0 rgba(0, 0, 0, 0.1);
 }
 
+hr {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border:0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
 /**
  * Tables
  */

src/user/login-form.js

@@ -19,6 +19,8 @@ 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 _ from 'lodash';
+
 
 class LoginForm extends Component {
   constructor(props) {
@@ -56,17 +58,17 @@ class LoginForm extends Component {
     this.setState({ [event.target.id]: event.target.value, disableLogin });
   }
 
-  openRecoverPassword(){
-    this.setState({forgottenPassword: true});
+  openRecoverPassword() {
+    this.setState({ forgottenPassword: true });
   }
 
-  closeRecoverPassword(){
-    this.setState({forgottenPassword: false});
+  closeRecoverPassword() {
+    this.setState({ forgottenPassword: false });
   }
 
-  render() {
+  villaslogin() {
     return (
-      <Form>
+      <Form key="login_a">
         <FormGroup controlId="username">
           <FormLabel column={true}>Username</FormLabel>
           <Col>
@@ -89,19 +91,38 @@ class LoginForm extends Component {
           </div>
         }
 
-        <FormGroup style={{paddingTop: 15, paddingBottom: 5}}>
+        <FormGroup style={{ paddingTop: 15, paddingBottom: 5 }}>
           <Col>
-            <Button style={{width: 90}} type="submit" disabled={this.state.disableLogin} onClick={e => this.login(e)}>Login</Button>
-            <Button variant="link" size="sm" style={{marginLeft: 85}} onClick={() => this.openRecoverPassword()}>Forgot your password?</Button>
+            <Button style={{ width: 90 }} type="submit" disabled={this.state.disableLogin} onClick={e => this.login(e)}>Login</Button>
+            <Button variant="link" size="sm" style={{ marginLeft: 85 }} onClick={() => this.openRecoverPassword()}>Forgot your password?</Button>
           </Col>
         </FormGroup>
-        
+
         <RecoverPassword show={this.state.forgottenPassword} onClose={() => this.closeRecoverPassword()} sessionToken={this.props.sessionToken} />
 
       </Form>
-      
     );
   }
+
+  render() {
+    let villasLogin = this.villaslogin();
+
+    if (this.props.config) {
+      let externalLogin = _.get(this.props.config, ['authentication', 'external', 'enabled'])
+      let provider = _.get(this.props.config, ['authentication', 'external', 'provider_name'])
+      let url = _.get(this.props.config, ['authentication', 'external', 'authorize_url'])
+
+      if (externalLogin && provider && url) {
+        return [
+          villasLogin,
+          <hr key="login_b"/>,
+          <Button key="login_c" onClick={e => window.location = url } block>Sign in with {provider}</Button>
+        ];
+      }
+    }
+
+    return villasLogin;
+  }
 }
 
 export default LoginForm;

src/user/login-select.js

@@ -1,53 +0,0 @@
-/**
- * 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 Header from '../common/header';
-import Footer from '../common/footer';
-import { withRouter } from 'react-router-dom';
-
-
-
-class LoginSelect extends Component {
-
-
-  villaswebLogin = e => {
-    this.props.history.replace('/villaslogin');
-  }
-
-  render() {
-
-    return (
-      <div>
-        <Header />
-        <div className="login-select">
-          <Form>
-            <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>
-        </div>
-
-          <Footer />
-    
-      </div>
-    );
-  }
-}
-
-export default withRouter(LoginSelect);

src/user/login-store.js

@@ -20,6 +20,7 @@ import { ReduceStore } from 'flux/utils';
 import AppDispatcher from '../common/app-dispatcher';
 import UsersDataManager from './users-data-manager';
 import ICDataDataManager from '../ic/ic-data-data-manager';
+import ConfigReader from '../config-reader';
 
 class LoginStore extends ReduceStore {
   constructor() {
@@ -31,11 +32,23 @@ class LoginStore extends ReduceStore {
       currentUser: null,
       token: null,
       loginMessage: null,
+      config: null,
     };
   }
 
   reduce(state, action) {
     switch (action.type) {
+      case 'config/load':
+        ConfigReader.loadConfig();
+        return state;
+
+      case 'config/loaded':
+        return Object.assign({}, state, { config: action.data });
+
+      case 'config/load-error':
+        console.log("config load error");
+        return Object.assign({}, state, { config: null });
+
       case 'users/login':
         UsersDataManager.login(action.username, action.password);
         return Object.assign({}, state, { loginMessage: null });
@@ -55,11 +68,8 @@ class LoginStore extends ReduceStore {
 
       case 'users/logged-in':
         // save login in local storage
-        console.log(action);
         localStorage.setItem('token', action.token);
         localStorage.setItem('currentUser', JSON.stringify(action.currentUser));
-        console.log(localStorage.getItem('token'));
-        console.log(localStorage.getItem("currentUser"));
 
         return Object.assign({}, state, { token: action.token, currentUser: action.currentUser});
 

src/user/login.js

@@ -40,6 +40,7 @@ class Login extends Component {
       loginMessage: LoginStore.getState().loginMessage,
       token: LoginStore.getState().token,
       currentUser: LoginStore.getState().currentUser,
+      config: LoginStore.getState().config,
     }
   }
 
@@ -62,7 +63,7 @@ class Login extends Component {
         <div className="login-container">
           <NavbarBrand>Login</NavbarBrand>
 
-          <LoginForm loginMessage={this.state.loginMessage} />
+          <LoginForm loginMessage={this.state.loginMessage} config={this.state.config}/>
         </div>
 
         <Footer />

src/user/logout.js

@@ -35,15 +35,9 @@ class Logout extends React.Component {
   }
 
   render() {
-    if (Config.externalAuth) {
       return (
         <Redirect to="/login" />
       );
-    } else {
-      return (
-        <Redirect to="/villaslogin" />
-      );
-    }
   }
 }