replace form validation messages with dialog

src/components/Shared/ValidationErrorsInfoDialog.js

@@ -28,39 +28,29 @@ export class ValidationErrorsInfoDialog extends React.Component {
   
     render() {
 
-      const actions = [
-        <FlatButton
-          label="Dismiss"
-          primary={true}
-          onClick={this.handleClose}
-        />,
-      ];
-  
-      return (
-        <div className="container">
-            {
-                this.state.open &&
-                <Dialog
-                    title={this.props.title ? this.props.title : 'Error'}
-                    isDraggable={this.props.draggable ? this.props.draggable : false}
-                    buttons={actions}
-                    hasCloseIcon={false}
-                    modal={this.props.modal ? this.props.modal : false}
-                    height={defaultDialogHeight + this.props.errorMessages.length * dialogHeightPerLine}
-                >
-                    {this.props.errorMessages.map(errorMessage => {
-                      return (
-                        <div>
-                          <a>{errorMessage.message}</a>
-                          <br/>
-                        </div>
-                      );})
-                    }
-                </Dialog>
+    return (
+      <div>
+        <Dialog
+          title="Errors"
+          actions={actions}
+          modal={this.props.modal ? this.props.modal : false}
+          open={this.state.open}
+          onRequestClose={this.handleClose}
+          overlayStyle={{ backgroundColor: 'transparent' }}
+        >
+          {this.props.errorMessages.map(errorMessage => {
+            const oneValidationMessage = (<span><a>{errorMessage.message}</a><br /></span>);
+            const oneValidationMessageWithTab = (<span><li style={{ marginLeft: 2 + "em" }}>{errorMessage.message}</li></span>);
+
+            if (errorMessage.field_name === "password-tab") {
+              return oneValidationMessageWithTab;
+            } else {
+              return oneValidationMessage;
             }
-        </div>
-      );
-    }
+          })}
+        </Dialog>
+      </div>
+    );
   }
 
   module.exports = ValidationErrorsInfoDialog;

src/routes/selfRegister/components/SignUp.js

@@ -17,6 +17,8 @@ import Toggle from 'material-ui/Toggle';
 import Snackbar from 'material-ui/Snackbar';
 import Instance from '../../../components/Connection';
 
+import ValidationErrorsInfoDialog from '../../../components/Shared/ValidationErrorsInfoDialog';
+
 class SignUp extends React.Component {
   constructor(props) {
     super(props);
@@ -144,29 +146,13 @@ class SignUp extends React.Component {
     });
   }
 
-  handleDismiss() {
-    this.setState(Object.assign(this.state, { showErrorMessage: false }));
+  handleValidationErrosDialogDismiss() {
+    this.setState(Object.assign(this.state, {
+      showValidationErrors: 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">
 
@@ -245,10 +231,7 @@ 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>
+                <ValidationErrorsInfoDialog open={this.state.showValidationErrors} errorMessages={this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)} />
               </fieldset>
             </form>
           </div>