show password validation errors

src/routes/signUp/components/SignUp.js

@@ -47,7 +47,9 @@ class SignUp extends React.Component {
       "role": { name: "", key: "SP", desc: "" },
       "profiles": [],
       "types": [],
-      "organizations": []
+      "organizations": [],
+      showValidationErrors : false,
+      validationErrors: []
     }
 
     this.buttonValidated = this.buttonValidated.bind(this);
@@ -226,12 +228,42 @@ class SignUp extends React.Component {
       localStorage.removeItem('loggedUser');
       location.href = '/#/login';
     }).catch(function (err) {
+      if (err.response.status === 422){
+        //Unprocessable Entity (validation failed)
+        state.setState(Object.assign(state.state, {
+          showValidationErrors:true,
+          validationErrors:err.response.data.data
+        }));
+      }else{
         alert('Error to log in: ' + err.message);
+      }
       console.error(err);
     });
   }
 
+  handleDismiss(){
+    this.setState(Object.assign(this.state, { showErrorMessage: false }));
+  }
+
   render() {
+    let validationErrors = null;
+    if (this.state.showValidationErrors){
+      validationErrors = (
+        <ul>
+          {this.state.validationErrors.map(errorMessage=>{
+            const oneValidationMessage = (<li>{errorMessage.message}</li>);
+            const oneValidationMessageWithTab = (<span><li style={{marginLeft:2 + "em"}}>{errorMessage.message}</li></span>);
+
+            if (errorMessage.field_name === "password-tab"){
+              return oneValidationMessageWithTab;
+            } else{
+              return oneValidationMessage;
+            }
+          })}
+        </ul>
+      );
+    }
+
     return (
       <div className="body-inner">
 
@@ -334,6 +366,10 @@ class SignUp extends React.Component {
                 <div className="form-group">
                   <p className="text-small">By clicking on sign up, you agree to <a href="javascript:;"><i>terms</i></a> and <a href="javascript:;"><i>privacy policy</i></a></p>
                 </div>
+                <div className="divider" />
+                <div className="form-group">
+                  {validationErrors}
+                </div>
               </fieldset>
             </form>
           </div>