fix edit user dialog

src/user/edit-user.js

@@ -21,28 +21,48 @@ import { Form, Col } from 'react-bootstrap';
 import Dialog from '../common/dialogs/dialog';
 
 class EditUserDialog extends React.Component {
-  valid: true;
-
   constructor(props) {
     super(props);
 
     this.state = {
-      username: props.user.username,
-      mail: props.user.mail,
-      role: props.user.role,
-      id: props.user.id,
-      active: props.user.active,
-      password: '',
-      confirmPassword: '',
-      oldPassword: ''
+      username: '',
+      mail: '',
+      role: '',
+      active: '',
+      password: "",
+      confirmPassword: "",
+      oldPassword: "",
     }
   }
 
   onClose(canceled) {
     if (canceled === false) {
-      if (this.valid) {
-        this.props.onClose(this.state);
+
+      let user = {}
+      user.id = this.props.user.id;
+
+      user.password = this.state.password;
+      user.confirmPassword = this.state.confirmPassword
+      user.oldpassword = this.state.oldPassword
+
+      if (this.state.username != null && this.state.username !== this.props.user.username){
+        user.username = this.state.username
       }
+
+      if (this.state.mail != null && this.state.mail !== this.props.user.mail){
+        user.mail = this.state.mail
+      }
+
+      if (this.state.role != null && this.state.role !== this.props.user.role){
+        user.role = this.state.role
+      }
+
+      if (this.state.active != null && this.state.active !== this.props.user.active){
+        user.active = this.state.active
+      }
+
+      this.props.onClose(user);
+
     } else {
       this.props.onClose();
     }
@@ -50,46 +70,6 @@ class EditUserDialog extends React.Component {
 
   handleChange(e) {
     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 confirmPassword = true;
-    var oldPassword = true;
-
-    if (this.state.username === '') {
-      username = false;
-    }
-
-    if (this.state.role === '') {
-      role = false;
-    }
-
-    if (this.state.mail === '') {
-      mail = false;
-    }
-
-    if (this.state.password === '') {
-      pw = false;
-    }
-
-    if (this.state.active === '') {
-      active = false;
-    }
-
-    if (this.state.confirmPassword === '') {
-      confirmPassword = false;
-    }
-
-    if (this.state.oldPassword === '') {
-      oldPassword = false;
-    }
-
-    // form is valid if any of the fields contain somethig
-    this.valid = username || role || mail || pw || active || confirmPassword || oldPassword;
   }
 
   resetState() {
@@ -97,38 +77,37 @@ class EditUserDialog extends React.Component {
       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}>
+      <Dialog show={this.props.show} title="Edit user" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={true}>
         <Form>
           <Form.Group as={Col} controlId="username">
             <Form.Label>Username</Form.Label>
-            <Form.Control type="text" value={this.state.username} onChange={(e) => this.handleChange(e)} />
+            <Form.Control type="text" placeholder={this.props.user.username} value={this.state.username} onChange={(e) => this.handleChange(e)} />
             <Form.Control.Feedback />
           </Form.Group>
           <Form.Group as={Col} controlId="mail">
             <Form.Label>E-mail</Form.Label>
-            <Form.Control type="text" value={this.state.mail} onChange={(e) => this.handleChange(e)} />
+            <Form.Control type="text" placeholder={this.props.user.mail} value={this.state.mail} onChange={(e) => this.handleChange(e)} />
           </Form.Group>
           <Form.Group  as={Col} controlId="oldPassword">
             <Form.Label>Admin Password</Form.Label>
             <Form.Control type="password" placeholder="Enter admin password" value={this.state.oldPassword} onChange={(e) => this.handleChange(e)} />
           </Form.Group>
           <Form.Group as={Col} controlId="password">
-            <Form.Label>Password</Form.Label>
+            <Form.Label>New User Password</Form.Label>
             <Form.Control type="password" placeholder="Enter password" value={this.state.password} onChange={(e) => this.handleChange(e)} />
           </Form.Group>
           <Form.Group as={Col} controlId="confirmPassword">
-            <Form.Label>Confirm New Password</Form.Label>
+            <Form.Label>Confirm new Password</Form.Label>
             <Form.Control type="password" placeholder="Enter password" value={this.state.confirmPassword} onChange={(e) => this.handleChange(e)} />
           </Form.Group>
           <Form.Group as={Col} controlId="role">
             <Form.Label>Role</Form.Label>
-            <Form.Control as="select" placeholder="Select role" value={this.state.role} onChange={(e) => this.handleChange(e)}>
+            <Form.Control as="select" placeholder={this.props.user.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>