Failure check

client/coral-admin/src/containers/Install/InstallContainer.js

@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
 import styles from './style.css';
 import {Wizard, WizardNav} from 'coral-ui';
 import {Layout} from '../../components/ui/Layout';
-import {nextStep, previousStep, goToStep, updateUserFormData, updateSettingsFormData, submitSettings} from '../../actions/install';
+import {nextStep, previousStep, goToStep, updateUserFormData, updateSettingsFormData, submitSettings, submitUser} from '../../actions/install';
 
 import InitialStep from './components/Steps/InitialStep';
 import AddOrganizationName from './components/Steps/AddOrganizationName';
@@ -45,9 +45,13 @@ const mapDispatchToProps = dispatch => ({
     const {name, value} = e.currentTarget;
     dispatch(updateUserFormData(name, value));
   },
-  handleSubmit: e => {
+  handleSettingsSubmit: e => {
     e.preventDefault();
     dispatch(submitSettings());
+  },
+  handleUserSubmit: e => {
+    e.preventDefault();
+    dispatch(submitUser());
   }
 });
 

client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js

@@ -3,7 +3,7 @@ import styles from './style.css';
 import {FormField, Button} from 'coral-ui';
 
 const AddOrganizationName = props => {
-  const {handleSettingsChange, handleSubmit, install} = props;
+  const {handleSettingsChange, handleSettingsSubmit, install} = props;
   return (
     <div className={styles.step}>
       <p>
@@ -11,7 +11,7 @@ const AddOrganizationName = props => {
         inviting new team members
       </p>
       <div className={styles.form}>
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSettingsSubmit}>
           <FormField
             className={styles.FormField}
             id="organizationName"

client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js

@@ -1,28 +1,33 @@
 import React from 'react';
 import styles from './style.css';
-import {FormField, Button} from 'coral-ui';
+import {FormField, Button, Spinner} from 'coral-ui';
 
 const InitialStep = props => {
-  const {handleSubmit, handleUserChange} = props;
+  const {handleUserChange, handleUserSubmit, install} = props;
   return (
     <div className={styles.step}>
       <div className={styles.form}>
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleUserSubmit}>
           <FormField
             className={styles.formField}
             id="email"
             type="email"
-            label='Email address' required
+            label='Email address'
             onChange={handleUserChange}
+            showErrors={install.showErrors}
+            errorMsg={install.errors.email}
+            noValidate
             />
 
           <FormField
             className={styles.formField}
-            id="username"
+            id="displayName"
             type="text"
             label='Username'
             onChange={handleUserChange}
-             />
+            showErrors={install.showErrors}
+            errorMsg={install.errors.displayName}
+            />
 
           <FormField
             className={styles.formField}
@@ -30,7 +35,9 @@ const InitialStep = props => {
             type="password"
             label='Password'
             onChange={handleUserChange}
-             />
+            showErrors={install.showErrors}
+            errorMsg={install.errors.password}
+            />
 
           <FormField
             className={styles.formField}
@@ -38,9 +45,17 @@ const InitialStep = props => {
             type="password"
             label='Confirm Password'
             onChange={handleUserChange}
-             />
+            showErrors={install.showErrors}
+            errorMsg={install.errors.confirmPassword}
+            />
 
-          <Button cStyle='black' type="submit" full>Save</Button>
+          {
+            !props.install.isLoading ?
+            <Button cStyle='black' type="submit" full>Save</Button>
+            :
+            <Spinner />
+          }
+          {props.install.installRequest === 'FAILURE' && <div className={styles.error}>Error: {props.install.installRequestError}</div>}
         </form>
       </div>
     </div>

client/coral-admin/src/containers/Install/components/Steps/FinalStep.js

@@ -2,16 +2,15 @@ import React from 'react';
 import styles from './style.css';
 import {Button} from 'coral-ui';
 
-const InitialStep = props => {
-  const {nextStep} = props;
+const InitialStep = () => {
   return (
     <div className={styles.step}>
       <p>
         Thanks for installing Talk! We sent an email to your team member.
         While they finish setting up their account, start engaging with your readers now.
       </p>
-      <Button onClick={nextStep}>Launch Talk</Button>
-      <Button cStyle='black' onClick={nextStep}>Close this Installer</Button>
+      <Button>Launch Talk</Button>
+      <Button cStyle='black'>Close this Installer</Button>
     </div>
   );
 };

client/coral-admin/src/containers/Install/components/Steps/style.css

@@ -56,3 +56,11 @@
     }
   }
 }
+
+.error {
+  background: #FFEBEE;
+  color: #B71C1C;
+  padding: 10px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+}