add users with fixed password

src/components/dialog/new-user.js

@@ -0,0 +1,101 @@
+/**
+ * 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 } 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: '',
+      role: 'admin',
+      password: '1234'
+    };
+  }
+
+  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: '',
+      role: 'admin',
+      password: '1234'
+    });
+  }
+
+  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";
+  }
+
+  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 />
+          </FormGroup>
+          <FormGroup controlId="role" validationState={this.validateForm('role')}>
+            <ControlLabel>Simulation</ControlLabel>
+            <FormControl componentClass="select" placeholder="Select role" value={this.state.role} onChange={(e) => this.handleChange(e)}>
+              <option key='1' value='admin'>Admin</option>
+              <option key='2' disabled value='operator'>Operator</option>
+            </FormControl>
+          </FormGroup>
+        </form>
+      </Dialog>
+    );
+  }
+}
+
+export default NewUserDialog;

src/containers/users.js

@@ -21,7 +21,8 @@
 
 import React, { Component } from 'react';
 import { Container } from 'flux/utils';
-import { Button, Modal, Glyphicon } from 'react-bootstrap';
+// import { Button, Modal, Glyphicon } from 'react-bootstrap';
+import { Button, Glyphicon } from 'react-bootstrap';
 
 import AppDispatcher from '../app-dispatcher';
 import UserStore from '../stores/user-store';
@@ -29,7 +30,7 @@ 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 NewUserDialog from '../components/dialog/new-user';
 // import EditUserDialog from '../components/dialog/edit-user';
 
 class Users extends Component {
@@ -60,16 +61,17 @@ class Users extends Component {
     };
   }
 
-  // closeNewModal(data) {
-  //   this.setState({ newModal: false });
+  closeNewModal(data) {
+    this.setState({ newModal: false });
 
-  //   if (data) {
-  //     AppDispatcher.dispatch({
-  //       type: 'users/start-add',
-  //       data: data
-  //     });
-  //   }
-  // }
+    if (data) {
+      AppDispatcher.dispatch({
+        type: 'users/start-add',
+        data: data,
+        token: this.state.token
+      });
+    }
+  }
 
   // confirmDeleteModal() {
   //   this.setState({ deleteModal: false });
@@ -85,8 +87,9 @@ class Users extends Component {
 
   //   if (data) {
   //     AppDispatcher.dispatch({
-  //       type: 'projects/start-edit',
-  //       data: data
+  //       type: 'users/start-edit',
+  //       data: data,
+  //       token: this.state.token
   //     });
   //   }
   // }
@@ -115,11 +118,11 @@ class Users extends Component {
 
         <Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph='plus' /> User</Button>
 
-        {/*<NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />*/}
+        <NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
 
-        {/*<EditProjectDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} project={this.state.modalData} simulations={this.state.simulations} />
+        {/*<EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} project={this.state.modalData} />*/}
 
-        <Modal show={this.state.deleteModal}>
+        {/*<Modal show={this.state.deleteModal}>
           <Modal.Header>
             <Modal.Title>Delete Project</Modal.Title>
           </Modal.Header>