improved #197 user needs to enter the old password and confirm the new one

src/user/edit-own-user.js

@@ -34,12 +34,13 @@ class EditOwnUserDialog extends React.Component {
 
     this.state = {
       username: '',
-      currentpassword: '',
       mail: '',
       role: '',
       id: '',
       password: '',
-      active: ''
+      oldPassword: '',
+      active: '',
+      confirmpassword: ''
     }
   }
 
@@ -68,7 +69,8 @@ class EditOwnUserDialog extends React.Component {
     var mail = true;
     var pw = true;
     var active = true;
-    var currentpassword = true;
+    var oldPassword = true;
+    var confirmpassword = true;
 
     if (this.state.username === '') {
       username = false;
@@ -87,8 +89,12 @@ class EditOwnUserDialog extends React.Component {
       active = false;
     }
 
-    if(this.state.currentpassword === ''){
-      currentpassword = false;
+    if(this.state.oldPassword === ''){
+      oldPassword = false;
+    }
+
+    if(this.state.confirmpassword === ''){
+      confirmpassword = false;
     }
 
     
@@ -98,7 +104,7 @@ class EditOwnUserDialog extends React.Component {
     });
 
     // form is valid if any of the fields contain somethig
-    this.valid = username || role || active || currentpassword || mail || pw;
+    this.valid = username || role || active || oldPassword || mail || pw || confirmpassword;
 
   }
 
@@ -124,14 +130,19 @@ class EditOwnUserDialog extends React.Component {
             <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">
+          <FormGroup  as={Col} controlId="oldPassword">
             <FormLabel>Old Password</FormLabel>
-            <FormControl type="text" placeholder="Enter current password" value={this.state.currentpassword} onChange={(e) => this.handleChange(e)} />
+            <FormControl type="password" placeholder="Enter current password" value={this.state.oldPassword} 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)} />
+            <FormControl type="password" placeholder="Enter password" value={this.state.password} onChange={(e) => this.handleChange(e)} />
+          </FormGroup>
+
+          <FormGroup as={Col} controlId="confirmpassword">
+            <FormLabel>Confirm New Password</FormLabel>
+            <FormControl type="password" placeholder="Enter password" value={this.state.confirmpassword} onChange={(e) => this.handleChange(e)} />
           </FormGroup>
         </form>
       </Dialog>

src/user/edit-user.js

@@ -36,7 +36,8 @@ class EditUserDialog extends React.Component {
       role: '',
       id: '',
       password: '',
-      active: ''
+      active: '',
+      confirmpassword: ''
     }
   }
 
@@ -59,6 +60,8 @@ class EditUserDialog extends React.Component {
     var mail = true;
     var pw = true;
     var active = true;
+    var confirmpassword = true;
+
 
     if (this.state.username === '') {
       username = false;
@@ -80,8 +83,13 @@ class EditUserDialog extends React.Component {
       active = false;
     }
 
+    if(this.state.confirmpassword === ''){
+      confirmpassword = false;
+    }
+
+
     // form is valid if any of the fields contain somethig
-    this.valid = username || role || mail || pw || active;
+    this.valid = username || role || mail || pw || active || confirmpassword;
 
   }
 
@@ -109,7 +117,11 @@ class EditUserDialog extends React.Component {
           </FormGroup>
           <FormGroup as={Col} controlId="password">
             <FormLabel>Password</FormLabel>
-            <FormControl type="text" placeholder="Enter password" value={this.state.password} onChange={(e) => this.handleChange(e)} />
+            <FormControl type="password" placeholder="Enter password" value={this.state.password} onChange={(e) => this.handleChange(e)} />
+          </FormGroup>
+          <FormGroup as={Col} controlId="confirmpassword">
+            <FormLabel>Confirm New Password</FormLabel>
+            <FormControl type="password" placeholder="Enter password" value={this.state.confirmpassword} onChange={(e) => this.handleChange(e)} />
           </FormGroup>
           <FormGroup as={Col} controlId="role">
             <FormLabel>Role</FormLabel>

src/user/user.js

@@ -74,7 +74,7 @@ class User extends Component {
     console.log(data);
 
     if (data) {
-
+      if(data.password === data.confirmpassword){
       
       AppDispatcher.dispatch({
         type: 'users/start-own-edit',
@@ -82,6 +82,11 @@ class User extends Component {
         token: this.state.token
       });
     }
+
+    else{
+      console.log("error: not the same password");
+    }
+    }
     
   }
 
@@ -115,7 +120,7 @@ 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>
+          <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} />
 

src/user/users.js

@@ -93,12 +93,19 @@ class Users extends Component {
     this.setState({ editModal: false });
 
     if (data) {
+      if(data.password === data.confirmpassword){
+      
       AppDispatcher.dispatch({
         type: 'users/start-edit',
         data: data,
         token: this.state.token
       });
     }
+
+    else{
+      console.log("error: not the same password");
+    }
+    }
   }
 
   getHumanRoleName(role_key) {