From f6881831050872297309ada08323aec3d7ba4c3f Mon Sep 17 00:00:00 2001
From: Viraj Bahulkar <bbahulkar@gmail.com>
Date: Wed, 6 Oct 2021 09:51:41 +0530
Subject: [PATCH] Add validation for new user form (#822)

* Add user validation

* Change email validation to Regx

* Fix user validation

* Fix review comments of code refactoring
---
 .../src/ManageOrgUsers/ManageOrgUsers.jsx     | 143 +++++++++++++-----
 1 file changed, 105 insertions(+), 38 deletions(-)

diff --git a/frontend/src/ManageOrgUsers/ManageOrgUsers.jsx b/frontend/src/ManageOrgUsers/ManageOrgUsers.jsx
index 7b5ef853e1..a22e412da9 100644
--- a/frontend/src/ManageOrgUsers/ManageOrgUsers.jsx
+++ b/frontend/src/ManageOrgUsers/ManageOrgUsers.jsx
@@ -17,11 +17,52 @@ class ManageOrgUsers extends React.Component {
       showNewUserForm: false,
       creatingUser: false,
       newUser: {},
+      role: '',
       idChangingRole: null,
       archivingUser: null,
+      fields: {},
+      errors: {},
     };
   }
 
+  validateEmail(email) {
+    console.log(email);
+    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(String(email).toLowerCase());
+  } 
+
+  handleValidation() {
+    let fields = this.state.fields;
+    let errors = {};
+    //Name
+    if (!fields['firstName']) {
+      errors['firstName'] = 'This field is required';
+    } else if (typeof fields['firstName'] !== 'undefined') {
+      if (!fields['firstName'].match(/^[a-zA-Z]+$/)) {
+        errors['firstName'] = 'Only letters are allowed';
+      }
+    }
+    if (!fields['lastName']) {
+      errors['lastName'] = 'This field is required';
+    } else if (typeof fields['lastName'] !== 'undefined') {
+      if (!fields['lastName'].match(/^[a-zA-Z]+$/)) {
+        errors['lastName'] = 'Only letters are allowed';
+      }
+    }
+    //Email
+    if (!fields['email']) {
+      errors['email'] = 'This field is required';
+    } else if (!this.validateEmail(fields['email'])) {
+        errors['email'] = 'Email is not valid';
+    }
+    if (!fields['role']) {
+      errors['role'] = 'This field is required';
+    }
+    
+    this.setState({ errors: errors });
+    return Object.keys(errors).length  === 0;
+  }
+
   componentDidMount() {
     this.fetchUsers();
   }
@@ -39,18 +80,17 @@ class ManageOrgUsers extends React.Component {
     );
   };
 
-  changeNewUserOption = (option, value) => {
+  changeNewUserOption = (name, e) => {
+    let fields = this.state.fields;
+    fields[name] = e.target.value;
+
     this.setState({
-      newUser: {
-        ...this.state.newUser,
-        [option]: value,
-      },
+      fields,
     });
   };
 
   changeNewUserRole = (id, role) => {
     this.setState({ idChangingRole: id });
-
     organizationUserService
       .changeRole(id, role)
       .then(() => {
@@ -79,24 +119,41 @@ class ManageOrgUsers extends React.Component {
       });
   };
 
-  createUser = () => {
-    this.setState({
-      creatingUser: true,
-    });
+  createUser = (event) => {
+    event.preventDefault();
 
-    const { firstName, lastName, email, role } = this.state.newUser;
+    if (this.handleValidation()) {
+      let fields = {};
+      Object.keys(fields).map(key => { fields[key] = '' })
 
-    organizationUserService
-      .create(firstName, lastName, email, role)
-      .then(() => {
-        this.setState({ creatingUser: false, showNewUserForm: false, newUser: {} });
-        toast.success('User has been created', { hideProgressBar: true, position: 'top-center' });
-        this.fetchUsers();
-      })
-      .catch(({ error }) => {
-        toast.error(error, { hideProgressBar: true, position: 'top-center' });
-        this.setState({ creatingUser: false, showNewUserForm: true, newUser: {} });
+      this.setState({
+        creatingUser: true,
+        fields: fields,
       });
+
+      organizationUserService
+        .create(
+          this.state.fields.firstName,
+          this.state.fields.lastName,
+          this.state.fields.email,
+          this.state.fields.role
+        )
+        .then(() => {
+          toast.success('User has been created', { hideProgressBar: true, position: 'top-center' });
+          this.fetchUsers();
+        })
+        .catch(({ error }) => {
+          toast.error(error, { hideProgressBar: true, position: 'top-center' });
+        });
+    } else {
+      this.setState({ creatingUser: false, showNewUserForm: true });
+    }
+  };
+
+  dropdownVal = (role) => {
+    this.setState({
+      fields: { ...this.state.fields, role },
+    });
   };
 
   logout = () => {
@@ -111,7 +168,16 @@ class ManageOrgUsers extends React.Component {
   };
 
   render() {
-    const { isLoading, showNewUserForm, creatingUser, users, newUser, idChangingRole, archivingUser } = this.state;
+    const {
+      isLoading,
+      role,
+      showNewUserForm,
+      creatingUser,
+      users,
+      errors,
+      idChangingRole,
+      archivingUser,
+    } = this.state;
     return (
       <div className="wrapper org-users-page">
         <Header switchDarkMode={this.props.switchDarkMode} darkMode={this.props.darkMode} />
@@ -151,20 +217,22 @@ class ManageOrgUsers extends React.Component {
                               type="text"
                               className="form-control"
                               placeholder="Enter First Name"
-                              onChange={(e) => {
-                                this.changeNewUserOption('firstName', e.target.value);
-                              }}
+                              name="firstName"
+                              onChange={this.changeNewUserOption.bind(this, 'firstName')}
+                              value={this.state.fields['firstName']}
                             />
+                            <span className="text-danger">{this.state.errors['firstName']}</span>
                           </div>
                           <div className="col">
                             <input
                               type="text"
                               className="form-control"
                               placeholder="Enter Last Name"
-                              onChange={(e) => {
-                                this.changeNewUserOption('lastName', e.target.value);
-                              }}
+                              name="lastName"
+                              onChange={this.changeNewUserOption.bind(this, 'lastName')}
+                              value={this.state.fields['lastName']}
                             />
+                            <span className="text-danger">{this.state.errors['lastName']}</span>
                           </div>
                         </div>
                       </div>
@@ -176,10 +244,11 @@ class ManageOrgUsers extends React.Component {
                             className="form-control"
                             aria-describedby="emailHelp"
                             placeholder="Enter email"
-                            onChange={(e) => {
-                              this.changeNewUserOption('email', e.target.value);
-                            }}
+                            name="email"
+                            onChange={this.changeNewUserOption.bind(this, 'email')}
+                            value={this.state.fields['email']}
                           />
+                          <span className="text-danger">{this.state.errors['email']}</span>
                         </div>
                       </div>
                       <div className="form-group mb-3 ">
@@ -189,28 +258,26 @@ class ManageOrgUsers extends React.Component {
                             options={['Admin', 'Developer', 'Viewer'].map((role) => {
                               return { name: role, value: role.toLowerCase() };
                             })}
-                            value={newUser.role}
                             search={true}
-                            onChange={(value) => {
-                              this.changeNewUserOption('role', value);
-                            }}
+                            value={role}
+                            name="role"
+                            onChange={this.dropdownVal}
                             filterOptions={fuzzySearch}
                             placeholder="Select.."
                           />
+                          <span className="text-danger">{errors.role}</span>
                         </div>
                       </div>
                       <div className="form-footer">
                         <button
                           className="btn btn-light mr-2"
                           onClick={() => this.setState({ showNewUserForm: false, newUser: {} })}
-                          disabled={creatingUser}
                         >
                           Cancel
                         </button>
                         <button
                           className={`btn mx-2 btn-primary ${creatingUser ? 'btn-loading' : ''}`}
-                          onClick={this.createUser}
-                          disabled={creatingUser}
+                          onClick={(e) => this.createUser(e)}
                         >
                           Create User
                         </button>