improved #197 user can now change own name, email and password

src/common/array-store.js

@@ -115,6 +115,10 @@ class ArrayStore extends ReduceStore {
         this.dataManager.update(action.data, action.token);
         return state;
 
+      case this.type + '/start-own-edit':
+        this.dataManager.update(action.data, action.token);
+        return state;
+
       case this.type + '/edited':
         return this.updateElements(state, [action.data]);
 

src/user/edit-own-user.js

@@ -0,0 +1,142 @@
+/**
+ * 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 from 'react';
+import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap';
+
+import Dialog from '../common/dialogs/dialog';
+import UserStore from './user-store';
+
+
+class EditOwnUserDialog extends React.Component {
+  valid: true;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: '',
+      currentpassword: '',
+      mail: '',
+      role: '',
+      id: '',
+      password: '',
+      active: ''
+    }
+  }
+
+  
+
+  onClose(canceled) {
+    if (canceled === false) {
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
+    } else {
+      this.props.onClose();
+    }
+  }
+
+  
+
+  handleChange(e) {
+    let user = UserStore.getState().currentUser;
+    console.log("edit-own-user, handlechange methode called");
+    this.setState({ [e.target.id]: e.target.value });
+
+    // check all controls
+    var username = true;
+    var role = true;
+    var mail = true;
+    var pw = true;
+    var active = true;
+    var currentpassword = true;
+
+    if (this.state.username === '') {
+      username = false;
+    }
+
+
+    if(this.state.mail === ''){
+      mail = false;
+    }
+
+    if(this.state.password === ''){
+      pw = false;
+    }
+
+    if(this.state.active === ''){
+      active = false;
+    }
+
+    if(this.state.currentpassword === ''){
+      currentpassword = false;
+    }
+
+    
+    this.setState({
+      role: user.role,
+      id: user.id
+    });
+
+    // form is valid if any of the fields contain somethig
+    this.valid = username || role || active || currentpassword || mail || pw;
+
+  }
+
+  resetState() {
+    this.setState({
+      //username: this.props.user.username,
+      //mail: this.props.user.mail,
+      role: this.props.user.role,
+      id: this.props.user.id
+    });
+  }
+
+  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 as={Col} controlId="username">
+            <FormLabel>Username</FormLabel>
+            <FormControl type="text" placeholder="Enter username" value={this.state.username} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup as={Col} controlId="mail">
+            <FormLabel>E-mail</FormLabel>
+            <FormControl type="text" placeholder="Enter e-mail" value={this.state.mail} onChange={(e) => this.handleChange(e)} />
+          </FormGroup>
+          <FormGroup as={Col} controlId="currentpassword">
+            <FormLabel>Old Password</FormLabel>
+            <FormControl type="text" placeholder="Enter current password" value={this.state.currentpassword} onChange={(e) => this.handleChange(e)} />
+          </FormGroup>
+
+          <FormGroup as={Col} controlId="password">
+            <FormLabel>New Password</FormLabel>
+            <FormControl type="text" placeholder="Enter password" value={this.state.password} onChange={(e) => this.handleChange(e)} />
+          </FormGroup>
+        </form>
+      </Dialog>
+    );
+  }
+}
+
+export default EditOwnUserDialog;

src/user/user.js

@@ -21,28 +21,28 @@
 
 import React, { Component } from 'react';
 import { Container } from 'flux/utils';
-import {Button, Col, Row, FormGroup, FormLabel} from 'react-bootstrap';
+import {Button, Col, Row} from 'react-bootstrap';
 
 import AppDispatcher from '../common/app-dispatcher';
 import UserStore from './user-store';
+import UsersStore from './users-store';
+
 
 import Icon from '../common/icon';
-import EditUserDialog from './edit-user';
+import EditOwnUserDialog from './edit-own-user'
 
-import DeleteDialog from '../common/dialogs/delete-dialog';
-import ParametersEditor from "../common/parameters-editor";
 
 class User extends Component {
   static getStores() {
-    return [ UserStore ];
+    return [ UserStore, UsersStore ];
   }
 
   static calculateState(prevState, props) {
-    prevState = prevState || {};
-
-    const sessionToken = UserStore.getState().token;
+    //prevState = prevState || {};
 
+    let sessionToken = UserStore.getState().token;
     let user = UserStore.getState().currentUser;
+  
 
     if(user === null) {
       AppDispatcher.dispatch({
@@ -60,52 +60,38 @@ class User extends Component {
       user,
 
       token: sessionToken,
-      editModal: prevState.editModal || false,
-      deleteModal: prevState.deleteModal || false,
-      modalData: prevState.modalData || {}
+      newModal: false,
+      editModal: false,
+      update: false,
+      modalData: {}
     };
   }
 
 
-  closeDeleteModal(confirmDelete) {
-    this.setState({ deleteModal: false });
-
-    if (confirmDelete === false) {
-      return;
-    }
-
-    AppDispatcher.dispatch({
-      type: 'users/start-remove',
-      data: this.state.modalData,
-      token: this.state.token
-    });
-  }
 
   closeEditModal(data) {
     this.setState({ editModal: false });
+    console.log(data);
 
     if (data) {
+
+      
       AppDispatcher.dispatch({
-        type: 'users/start-edit',
+        type: 'users/start-own-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] : '';
   }
 
-  onModalKeyPress = (event) => {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-
-      this.confirmDeleteModal();
-    }
-  };
 
   render() {
 
@@ -129,6 +115,9 @@ class User extends Component {
             <Col xs={3}>Role: </Col>
             <Col xs={3}> {this.state.user.role} </Col>
           </Row>
+          <Button onClick={() => this.setState({ editModal: true })}><Icon icon='edit' /> Edit!</Button>
+
+          <EditOwnUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />
 
         </form>
 
@@ -137,19 +126,7 @@ class User extends Component {
   }
 }
 
-{/*<Button onClick={() => this.setState({ editModal: true })}><Icon icon='edit' /> Edit</Button>*/}
-{/*<Button onClick={() => this.setState({ deleteModal: true })}><Icon icon='trash' /> Delete</Button>*/}
 
-{/*<EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />*/}
-{/*<DeleteDialog title="user" name={this.state.modalData.username} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />*/}
-
-{/*<Table data={this.state.user}>*/}
-{/*  <TableColumn title='Username' width='150' dataKey='username' />*/}
-{/*  <TableColumn title='ID' width='150' dataKey='id' />*/}
-{/*  <TableColumn title='E-mail' dataKey='mail'  />*/}
-{/*  <TableColumn title='Role' dataKey='role'   modifier={(role) => this.getHumanRoleName(role)} />*/}
-{/*  <TableColumn title='Active' dataKey='active'/>*/}
-{/*</Table>*/}
 
 
 let fluxContainerConverter = require('../common/FluxContainerConverter');