Adds validation to the dialog.

client/coral-framework/components/Alert.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './styles.css';
+
+const Alert = ({cStyle = 'error', children, className, ...props}) => (
+  <div
+    className={`${styles.alert} ${styles[`alert--${cStyle}`]} ${className}`}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export default Alert;

client/coral-framework/components/CreateDisplayNameDialog.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import FormField from './FormField';
+import Alert from './Alert';
 import Button from 'coral-ui/components/Button';
 import {Dialog} from 'coral-ui';
 import styles from './styles.css';
@@ -7,7 +8,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
 
-const CreateDisplayNameDialog = ({open, handleClose, offset, formData, handleSubmitDisplayName, handleChange}) => (
+const CreateDisplayNameDialog = ({open, handleClose, offset, formData, handleSubmitDisplayName, handleChange, ...props}) => (
   <Dialog
     className={styles.dialog}
     id="createDisplayNameDialog"
@@ -25,6 +26,7 @@ const CreateDisplayNameDialog = ({open, handleClose, offset, formData, handleSub
       </div>
       <div>
         <p>{lang.t('createdisplay.yourusername')}</p>
+        { props.auth.error && <Alert>{props.auth.error}</Alert> }
         <form id="saveDisplayName" onSubmit={handleSubmitDisplayName}>
           <FormField
             id="displayName"

client/coral-framework/containers/ChangeDisplayNameContainer.js

@@ -1,10 +1,11 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 
+import validate from 'coral-framework/helpers/validate';
+import errorMsj from 'coral-framework/helpers/error';
+
 import CreateDisplayNameDialog from '../components/CreateDisplayNameDialog';
 
-// import validate from 'coral-framework/helpers/validate';
-// import errorMsj from 'coral-framework/helpers/error';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
@@ -72,6 +73,8 @@ class ChangeDisplayNameContainer extends Component {
 
     if (!value.length) {
       addError(name, lang.t('createdisplay.requiredField'));
+    } else if (!validate[name](value)) {
+      addError(name, errorMsj[name]);
     } else {
       const { [name]: prop, ...errors } = this.state.errors; // eslint-disable-line
       // Removes Error