Merge branch '23-add-user-accounts' into 'develop'

Resolve "Add user accounts"

See merge request !10

src/components/dialog/edit-user.js

@@ -0,0 +1,111 @@
+/**
+ * File: edit-user.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * Date: 02.05.2017
+ *
+ * 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, PropTypes } from 'react';
+import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
+
+import Dialog from './dialog';
+
+class EditUserDialog extends Component {
+  static propTypes = {
+    show: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    user: PropTypes.object.isRequired
+  };
+
+  valid: true;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: '',
+      mail: '',
+      role: '',
+      _id: ''
+    }
+  }
+
+  onClose(canceled) {
+    if (canceled === false) {
+      this.props.onClose(this.state);
+    } else {
+      this.props.onClose();
+    }
+  }
+
+  handleChange(e) {
+    this.setState({ [e.target.id]: e.target.value });
+  }
+
+  resetState() {
+    this.setState({
+      username: this.props.user.username,
+      mail: this.props.user.mail,
+      role: this.props.user.role,
+      _id: this.props.user._id
+    });
+  }
+
+  validateForm(target) {
+    // check all controls
+    var username = true;
+
+    if (this.state.username === '') {
+      username = false;
+    }
+
+    this.valid = username;
+
+    // return state to control
+    if (target === 'username') return username ? "success" : "error";
+
+    return "success";
+  }
+
+  render() {
+    return (
+      <Dialog show={this.props.show} title="Edit user" buttonTitle="save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
+        <form>
+          <FormGroup controlId="username" validationState={this.validateForm('username')}>
+            <ControlLabel>Username</ControlLabel>
+            <FormControl type="text" placeholder="Enter username" value={this.state.username} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="mail">
+            <ControlLabel>E-mail</ControlLabel>
+            <FormControl type="text" placeholder="Enter e-mail" value={this.state.mail} onChange={(e) => this.handleChange(e)} />
+          </FormGroup>
+          <FormGroup controlId="role" validationState={this.validateForm('role')}>
+            <ControlLabel>Role</ControlLabel>
+            <FormControl componentClass="select" placeholder="Select role" value={this.state.role} onChange={(e) => this.handleChange(e)}>
+              <option key='1' value='admin'>Administrator</option>
+              <option key='2' value='user'>User</option>
+              <option key='3' value='guest'>Guest</option>
+            </FormControl>
+          </FormGroup>
+        </form>
+      </Dialog>
+    );
+  }
+}
+
+export default EditUserDialog;

src/components/dialog/new-user.js

@@ -0,0 +1,119 @@
+/**
+ * File: new-user.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * Date: 02.05.2017
+ *
+ * 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, PropTypes } from 'react';
+import { FormGroup, FormControl, ControlLabel, HelpBlock } from 'react-bootstrap';
+
+import Dialog from './dialog';
+
+class NewUserDialog extends Component {
+  static propTypes = {
+    show: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired
+  };
+
+  valid: false;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: '',
+      mail: '',
+      role: 'admin',
+      password: ''
+    };
+  }
+
+  onClose(canceled) {
+    if (canceled === false) {
+      this.props.onClose(this.state);
+    } else {
+      this.props.onClose();
+    }
+  }
+
+  handleChange(e) {
+    this.setState({ [e.target.id]: e.target.value });
+  }
+
+  resetState() {
+    this.setState({
+      username: '',
+      mail: '',
+      role: 'admin',
+      password: ''
+    });
+  }
+
+  validateForm(target) {
+    // check all controls
+    let username = this.state.username !== '' && this.state.username.length >= 3;
+    let password = this.state.password !== '';
+
+    this.valid =  username && password;
+
+    // return state to control
+    switch(target) {
+      case 'username':
+        return username ? "success" : "error";
+      case 'password':
+        return password ? "success" : "error";
+      default:
+        return "success";
+    }
+  }
+
+  render() {
+    return (
+      <Dialog show={this.props.show} title="New user" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
+        <form>
+          <FormGroup controlId="username" validationState={this.validateForm('username')}>
+            <ControlLabel>Username</ControlLabel>
+            <FormControl type="text" placeholder="Enter username" value={this.state.name} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+            <HelpBlock>Min 3 characters.</HelpBlock>
+          </FormGroup>
+          <FormGroup controlId="mail">
+            <ControlLabel>E-mail</ControlLabel>
+            <FormControl type="text" placeholder="Enter e-mail" value={this.state.mail} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="password" validationState={this.validateForm('password')}>
+            <ControlLabel>Password</ControlLabel>
+            <FormControl type="text" placeholder="Enter password" value={this.state.password} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="role" validationState={this.validateForm('role')}>
+            <ControlLabel>Role</ControlLabel>
+            <FormControl componentClass="select" placeholder="Select role" value={this.state.role} onChange={(e) => this.handleChange(e)}>
+              <option key='1' value='admin'>Administrator</option>
+              <option key='2' value='user'>User</option>
+              <option key='3' value='guest'>Guest</option>
+            </FormControl>
+          </FormGroup>
+        </form>
+      </Dialog>
+    );
+  }
+}
+
+export default NewUserDialog;

src/components/menu-sidebar.js

@@ -29,11 +29,14 @@ class SidebarMenu extends Component {
         <h2>Menu</h2>
 
         <ul>
-          <li><Link to="/home" activeClassName="active">Home</Link></li>
-          <li><Link to="/projects" activeClassName="active">Projects</Link></li>
-          <li><Link to="/simulations" activeClassName="active">Simulations</Link></li>
-          <li><Link to="/simulators" activeClassName="active">Simulators</Link></li>
-          <li><Link to="/logout">Logout</Link></li>
+          <li><Link to="/home" activeClassName="active" title="Home">Home</Link></li>
+          <li><Link to="/projects" activeClassName="active" title="Projects">Projects</Link></li>
+          <li><Link to="/simulations" activeClassName="active" title="Simulations">Simulations</Link></li>
+          <li><Link to="/simulators" activeClassName="active" title="Simulators">Simulators</Link></li>
+          { this.props.currentRole === 'admin' ? 
+              <li><Link to="/users" activeClassName="active" title="User Management">User Management</Link></li> : ''
+          }
+          <li><Link to="/logout" title="Logout">Logout</Link></li>
         </ul>
       </div>
     );

src/containers/app.js

@@ -76,9 +76,11 @@ class App extends Component {
       }
     }
 
+    let currentUser = UserStore.getState().currentUser;
+
     return {
       simulations: SimulationStore.getState(),
-      currentUser: UserStore.getState().currentUser,
+      currentRole: currentUser? currentUser.role : '',
       token: UserStore.getState().token,
 
       runningSimulators: simulators
@@ -183,10 +185,12 @@ class App extends Component {
         <NotificationSystem ref="notificationSystem" />
 
         <Header />
-        <SidebarMenu />
 
-        <div className="app-content">
-          {children}
+        <div className="app-body">
+          <SidebarMenu currentRole={ this.state.currentRole }/>
+          <div className="app-content">
+            {children}
+          </div>
         </div>
 
         <Footer />

src/containers/users.js

@@ -0,0 +1,141 @@
+/**
+ * File: users.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * Date: 02.05.2017
+ *
+ * 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 { Container } from 'flux/utils';
+import { Button, Modal, Glyphicon } from 'react-bootstrap';
+
+import AppDispatcher from '../app-dispatcher';
+import UserStore from '../stores/user-store';
+import UsersStore from '../stores/users-store';
+
+import Table from '../components/table';
+import TableColumn from '../components/table-column';
+import NewUserDialog from '../components/dialog/new-user';
+import EditUserDialog from '../components/dialog/edit-user';
+
+class Users extends Component {
+  static getStores() {
+    return [ UserStore, UsersStore ];
+  }
+
+  static calculateState(prevState, props) {
+
+    let tokenState = UserStore.getState().token;
+
+    // If there is a token available and this method was called as a result of loading users
+    if (!prevState && tokenState) {
+      AppDispatcher.dispatch({
+        type: 'users/start-load',
+        token: tokenState
+      });
+    }
+
+    return {
+      token: tokenState,
+      users: UsersStore.getState(),
+
+      newModal: false,
+      editModal: false,
+      deleteModal: false,
+      modalData: {}
+    };
+  }
+
+  closeNewModal(data) {
+    this.setState({ newModal: false });
+
+    if (data) {
+      AppDispatcher.dispatch({
+        type: 'users/start-add',
+        data: data,
+        token: this.state.token
+      });
+    }
+  }
+
+  confirmDeleteModal() {
+    this.setState({ deleteModal: false });
+
+    AppDispatcher.dispatch({
+      type: 'users/start-remove',
+      data: this.state.modalData,
+      token: this.state.token
+    });
+  }
+
+  closeEditModal(data) {
+    this.setState({ editModal: false });
+
+    if (data) {
+      AppDispatcher.dispatch({
+        type: 'users/start-edit',
+        data: data,
+        token: this.state.token
+      });
+    }
+  }
+
+  getHumanRoleName(role_key) {
+    const HUMAN_ROLE_NAMES = {admin: 'Administrator', user: 'User', guest: 'Guest'};
+    
+    return HUMAN_ROLE_NAMES.hasOwnProperty(role_key)? HUMAN_ROLE_NAMES[role_key] : '';
+  }
+
+  render() {
+
+    return (
+      <div>
+        <h1>Users</h1>
+
+        <Table data={this.state.users}>
+          <TableColumn title='Username' width='150' dataKey='username' />
+          <TableColumn title='E-mail' dataKey='mail'  />
+          <TableColumn title='Role' dataKey='role'   modifier={(role) => this.getHumanRoleName(role)} />
+          <TableColumn width='70' editButton deleteButton onEdit={index => this.setState({ editModal: true, modalData: this.state.users[index] })} onDelete={index => this.setState({ deleteModal: true, modalData: this.state.users[index] })} />
+        </Table>
+
+        <Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph='plus' /> User</Button>
+
+        <NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
+
+        <EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />
+
+        <Modal show={this.state.deleteModal}>
+          <Modal.Header>
+            <Modal.Title>Delete user</Modal.Title>
+          </Modal.Header>
+
+          <Modal.Body>
+            Are you sure you want to delete the user <strong>'{this.state.modalData.username}'</strong>?
+          </Modal.Body>
+
+          <Modal.Footer>
+            <Button onClick={() => this.setState({ deleteModal: false})}>Cancel</Button>
+            <Button bsStyle='danger' onClick={() => this.confirmDeleteModal()}>Delete</Button>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default Container.create(Users);

src/data-managers/rest-data-manager.js

@@ -51,10 +51,10 @@ class RestDataManager {
     return object;
   }
 
-  load(id) {
+  load(id, token = null) {
     if (id != null) {
       // load single object
-      RestAPI.get(this.makeURL(this.url + '/' + id)).then(response => {
+      RestAPI.get(this.makeURL(this.url + '/' + id), token).then(response => {
         const data = this.filterKeys(response[this.type]);
 
         AppDispatcher.dispatch({
@@ -69,7 +69,7 @@ class RestDataManager {
       });
     } else {
       // load all objects
-      RestAPI.get(this.makeURL(this.url)).then(response => {
+      RestAPI.get(this.makeURL(this.url), token).then(response => {
         const data = response[this.type + 's'].map(element => {
           return this.filterKeys(element);
         });
@@ -87,11 +87,11 @@ class RestDataManager {
     }
   }
 
-  add(object) {
+  add(object, token = null) {
     var obj = {};
     obj[this.type] = this.filterKeys(object);
 
-    RestAPI.post(this.makeURL(this.url), obj).then(response => {
+    RestAPI.post(this.makeURL(this.url), obj, token).then(response => {
       AppDispatcher.dispatch({
         type: this.type + 's/added',
         data: response[this.type]
@@ -104,8 +104,8 @@ class RestDataManager {
     });
   }
 
-  remove(object) {
-    RestAPI.delete(this.makeURL(this.url + '/' + object._id)).then(response => {
+  remove(object, token = null) {
+    RestAPI.delete(this.makeURL(this.url + '/' + object._id), token).then(response => {
       AppDispatcher.dispatch({
         type: this.type + 's/removed',
         data: response[this.type],
@@ -119,11 +119,11 @@ class RestDataManager {
     });
   }
 
-  update(object) {
+  update(object, token = null) {
     var obj = {};
     obj[this.type] = this.filterKeys(object);
 
-    RestAPI.put(this.makeURL(this.url + '/' + object._id), obj).then(response => {
+    RestAPI.put(this.makeURL(this.url + '/' + object._id), obj, token).then(response => {
       AppDispatcher.dispatch({
         type: this.type + 's/edited',
         data: response[this.type]

src/data-managers/users-data-manager.js

@@ -46,7 +46,7 @@ class UsersDataManager extends RestDataManager {
     RestAPI.get(this.makeURL('/users/me'), token).then(response => {
       AppDispatcher.dispatch({
         type: 'users/current-user',
-        user: response
+        user: response.user
       });
     }).catch(error => {
       AppDispatcher.dispatch({
@@ -55,6 +55,7 @@ class UsersDataManager extends RestDataManager {
       });
     });
   }
+  
 }
 
 export default new UsersDataManager();

src/router.js

@@ -30,6 +30,7 @@ import Simulators from './containers/simulators';
 import Visualization from './containers/visualization';
 import Simulations from './containers/simulations';
 import Simulation from './containers/simulation';
+import Users from './containers/users';
 import Login from './containers/login';
 import Logout from './containers/logout';
 
@@ -50,6 +51,8 @@ class Root extends Component {
           <Route path='/simulations' component={Simulations} />
           <Route path='/simulations/:simulation' component={Simulation} />
 
+          <Route path='/users' component={Users} />
+
           <Route path='/logout' component={Logout} />
         </Route>
 

src/stores/array-store.js

@@ -69,10 +69,10 @@ class ArrayStore extends ReduceStore {
       case this.type + '/start-load':
         if (Array.isArray(action.data)) {
           action.data.forEach((id) => {
-            this.dataManager.load(id);
+            this.dataManager.load(id, action.token);
           });
         } else {
-          this.dataManager.load(action.data);
+          this.dataManager.load(action.data, action.token);
         }
         return state;
 
@@ -88,7 +88,7 @@ class ArrayStore extends ReduceStore {
         return state;
 
       case this.type + '/start-add':
-        this.dataManager.add(action.data);
+        this.dataManager.add(action.data, action.token);
         return state;
 
       case this.type + '/added':
@@ -99,7 +99,7 @@ class ArrayStore extends ReduceStore {
         return state;
 
       case this.type + '/start-remove':
-        this.dataManager.remove(action.data);
+        this.dataManager.remove(action.data, action.token);
         return state;
 
       case this.type + '/removed':
@@ -112,7 +112,7 @@ class ArrayStore extends ReduceStore {
         return state;
 
       case this.type + '/start-edit':
-        this.dataManager.update(action.data);
+        this.dataManager.update(action.data, action.token);
         return state;
 
       case this.type + '/edited':

src/stores/user-store.js

@@ -79,7 +79,7 @@ class UserStore extends ReduceStore {
 
         }
 
-        return state;
+        return state;    
 
       default:
         return state;

src/stores/users-store.js

@@ -0,0 +1,67 @@
+/**
+ * File: users-store.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 15.03.2017
+ *
+ * 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 ArrayStore from './array-store';
+import UsersDataManager from '../data-managers/users-data-manager';
+import NotificationsDataManager from '../data-managers/notifications-data-manager';
+
+class UsersStore extends ArrayStore {
+  constructor() {
+    super('users', UsersDataManager);
+  }
+
+  reduce(state, action) {
+    switch (action.type) {
+
+      case this.type + '/add-error':
+        if (action.error && !action.error.handled && action.error.response) {
+          // If it was an error and hasn't been handled, user could not be added
+          const USER_ADD_ERROR_NOTIFICATION = {
+            title: 'Failed to add new user',
+            message: action.error.response.body.message,
+            level: 'error'
+          }
+          NotificationsDataManager.addNotification(USER_ADD_ERROR_NOTIFICATION);
+
+        }
+        return super.reduce(state, action);
+
+      case this.type + '/edit-error':
+        if (action.error && !action.error.handled && action.error.response) {
+          // If it was an error and hasn't been handled, user couldn't not be updated
+          const USER_EDIT_ERROR_NOTIFICATION = {
+            title: 'Failed to edit user',
+            message: action.error.response.body.message,
+            level: 'error'
+          }
+          NotificationsDataManager.addNotification(USER_EDIT_ERROR_NOTIFICATION);
+
+        }
+        return super.reduce(state, action);
+
+      default:
+        return super.reduce(state, action);
+    }
+  }
+
+}
+
+export default new UsersStore();

src/styles/app.css

@@ -41,7 +41,6 @@ body {
 .app-header {
   width: 100%;
   height: 60px;
-
   padding: 10px 0 0 0;
 
   color: #527984;
@@ -50,7 +49,6 @@ body {
 
 .app-header h1 {
   width: 100%;
-
   margin: 0;
 
   text-align: center;
@@ -68,15 +66,27 @@ body {
   clear: both;
 }
 
-.app-content {
+.app-body {
+  /* Let sidebar grow and content occupy rest of the space */
+  display: flex;
   position: absolute;
-  bottom: 0px;
   top: 60px;
+  bottom: 60px;
   right: 0px;
-  left: 200px;
-  min-height: 400px;
+  left: 0px;
 
-  margin: 20px 20px 60px 20px;
+  padding: 15px 5px 0px 5px;
+}
+
+.app-body div {
+  margin-left: 7px;
+  margin-right: 7px;
+}
+
+.app-content {
+  flex: 1 1 auto;
+  min-height: 400px;
+  height: 100%;
   padding: 15px 20px;
 
   background-color: #fff;
@@ -88,11 +98,7 @@ body {
  * Menus
  */
 .menu-sidebar {
-  float: left;
-
-  width: 160px;
-
-  margin: 20px 0 0 20px;
+  display: inline-table;
   padding: 20px 25px 20px 25px;
 
   background-color: #fff;
@@ -102,18 +108,35 @@ body {
 
 .menu-sidebar a {
   color: #4d4d4d;
+  text-decoration:none;
+}
+
+.menu-sidebar a:hover, .menu-sidebar a:focus {
+  text-decoration:none;
 }
 
 .active {
   font-weight: bold;
+  /*text-decoration:none;*/
 }
 
 .menu-sidebar ul {
   padding-top: 10px;
-
   list-style: none;
+  white-space: nowrap;  
 }
 
+.menu-sidebar a::after {
+  /* Trick to make menu items to be as wide as in bold */
+  display:block;
+  content:attr(title);
+  font-weight:bold;
+  height:1px;
+  color:transparent;
+  overflow:hidden;
+  visibility:hidden;
+  margin-bottom:-1px;
+}
 /**
  * Login form
  */