Failure check

client/coral-admin/src/actions/install.js

@@ -24,28 +24,37 @@ const validation = (formData, dispatch, next) => {
   const empty = Object.keys(formData).filter(name => {
     const cond = !formData[name].length;
 
-    // Adding Error
-    dispatch(addError(name, 'Please, fill this field '));
+    if (cond) {
+
+      // Adding Error
+      dispatch(addError(name, 'Please, fill this field '));
+    } else {
+      dispatch(addError(name, ''));
+    }
+
     return cond;
   });
 
   if (empty.length) {
-    return dispatch(hasError('Please fill the form'));
+    return dispatch(hasError());
   }
 
   // RegExp Validation
   const validation = Object.keys(formData).filter(name => {
     const cond = !validate[name](formData[name]);
     if (cond) {
+
       // Adding Error
       dispatch(addError(name, errorMsj[name]));
+    } else {
+      dispatch(addError(name, ''));
     }
 
     return cond;
   });
 
   if (validation.length) {
-    return dispatch(hasError('Please check the form'));
+    return dispatch(hasError());
   }
 
   dispatch(clearErrors());
@@ -53,33 +62,29 @@ const validation = (formData, dispatch, next) => {
 };
 
 export const submitSettings = () => (dispatch, getState) => {
-  const formData = getState().install.toJS().data.settings;
-  validation(formData, dispatch, function() {
+  const settingsFormData = getState().install.toJS().data.settings;
+  validation(settingsFormData, dispatch, function() {
     dispatch(nextStep());
   });
 };
 
-export const install = () => dispatch => {
-  dispatch(installRequest());
-  coralApi('/setup')
-    .then(result => {
-      console.log(result);
-      dispatch(installSuccess());
-    })
-    .catch(error => {
-      console.error(error);
-      dispatch(installFailure(`${error.message}`));
-    });
+export const submitUser = () => (dispatch, getState) => {
+  const userFormData = getState().install.toJS().data.user;
+  validation(userFormData, dispatch, function() {
+    const data = getState().install.toJS().data;
+    dispatch(installRequest());
+    coralApi('/setup', {method: 'POST', body: data})
+      .then(result => {
+        console.log(result);
+        dispatch(installSuccess());
+        dispatch(nextStep());
+      })
+      .catch(error => {
+        console.error(error);
+        dispatch(installFailure(`${error.message}`));
+      });
+  });
 };
 
-export const updateSettingsFormData = (name, value) => ({
-  type: actions.UPDATE_FORMDATA_SETTINGS,
-  name,
-  value
-});
-
-export const updateUserFormData = (name, value) => ({
-  type: actions.UPDATE_FORMDATA_USER,
-  name,
-  value
-});
+export const updateSettingsFormData = (name, value) => ({type: actions.UPDATE_FORMDATA_SETTINGS, name, value});
+export const updateUserFormData = (name, value) => ({type: actions.UPDATE_FORMDATA_USER, name, value});

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;
+}

client/coral-admin/src/reducers/install.js

@@ -3,16 +3,24 @@ import {Map} from 'immutable';
 import * as actions from '../constants/install';
 
 const initialState = Map({
+  isLoading: false,
   data: Map({
     settings: Map({
       organizationName: ''
     }),
     user: Map({
-      displayName: ''
+      displayName: '',
+      email: '',
+      password: '',
+      confirmPassword: ''
     })
   }),
   errors: Map({
-    organizationName: ''
+    organizationName: '',
+    displayName: '',
+    email: '',
+    password: '',
+    confirmPassword: ''
   }),
   showErrors: false,
   hasError: false,
@@ -25,7 +33,9 @@ const initialState = Map({
   {
     text: '2. Create your account',
     step: 2
-  }]
+  }],
+  installRequest: null,
+  installRequestError: null
 });
 
 export default function install (state = initialState, action) {
@@ -57,6 +67,20 @@ export default function install (state = initialState, action) {
   case actions.CLEAR_ERRORS:
     return state
       .set('errors', Map());
+  case actions.INSTALL_REQUEST:
+    return state
+      .set('isLoading', true);
+  case actions.INSTALL_SUCCESS:
+    return state
+      .set('isLoading', false)
+      .set('installRequest', 'SUCCESS');
+  case actions.INSTALL_FAILURE:
+    return state
+      .merge({
+        isLoading: false,
+        installRequest: 'FAILURE',
+        installRequestError: action.error
+      });
   default :
     return state;
   }

routes/api/index.js

@@ -13,6 +13,7 @@ router.use('/actions', authorization.needed(), require('./actions'));
 router.use('/auth', require('./auth'));
 router.use('/users', require('./users'));
 router.use('/account', require('./account'));
+router.use('/setup', require('./setup'));
 
 // Bind the kue handler to the /kue path.
 router.use('/kue', authorization.needed('ADMIN'), require('../../services/kue').kue.app);