From a8e4ce466d26b8eef1735b4fae3336fca58e1019 Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Wed, 1 Feb 2017 12:09:27 -0800
Subject: [PATCH] Adds validation to the dialog.

---
 client/coral-framework/components/Alert.js          | 13 +++++++++++++
 .../components/CreateDisplayNameDialog.js           |  4 +++-
 .../containers/ChangeDisplayNameContainer.js        |  7 +++++--
 3 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 client/coral-framework/components/Alert.js

diff --git a/client/coral-framework/components/Alert.js b/client/coral-framework/components/Alert.js
new file mode 100644
index 000000000..019c3456a
--- /dev/null
+++ b/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;
diff --git a/client/coral-framework/components/CreateDisplayNameDialog.js b/client/coral-framework/components/CreateDisplayNameDialog.js
index 02c6eae4d..8b4a99f9a 100644
--- a/client/coral-framework/components/CreateDisplayNameDialog.js
+++ b/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"
diff --git a/client/coral-framework/containers/ChangeDisplayNameContainer.js b/client/coral-framework/containers/ChangeDisplayNameContainer.js
index e252119de..6a5a82983 100644
--- a/client/coral-framework/containers/ChangeDisplayNameContainer.js
+++ b/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