Validaiton

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

@@ -1,5 +1,69 @@
+import coralApi from 'coral-framework/helpers/response';
 import * as actions from '../constants/install';
 
+// import validate from 'coral-framework/helpers/validate';
+// import errorMsj from 'coral-framework/helpers/error';
+
 export const nextStep = () => ({type: actions.NEXT_STEP});
 export const previousStep = () => ({type: actions.PREVIOUS_STEP});
 export const goToStep = step => ({type: actions.GO_TO_STEP, step});
+
+const installRequest = () => ({type: actions.INSTALL_REQUEST});
+const installSuccess = () => ({type: actions.INSTALL_SUCCESS});
+const installFailure = error => ({type: actions.INSTALL_FAILURE, error});
+
+export const submit = () => (dispatch, getState) => {
+  const formData = getState().install.toJS().data;
+  console.log('Handling Submit');
+  console.log(formData.settings);
+
+  if (!(formData.settings != null)) {
+    return console.log('Validation Failed');
+  }
+
+  const empty = Object.keys(formData.settings).filter(name => {
+    console.log(name);
+    return !formData.settings[name].length;
+  });
+
+  console.log(
+    empty
+  );
+
+  // const empty = Object.keys(formData.settings)
+  //   .filter(name => !formData[name].length)
+
+  // console.log(
+  //   empty
+  // )
+  // if (empty.length) {
+  //   console.log('Validation Failed')
+  // }
+    // .filter(name => data[name])
+
+};
+
+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 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/constants/install.js

@@ -1,3 +1,11 @@
 export const NEXT_STEP = 'NEXT_STEP';
 export const PREVIOUS_STEP = 'PREVIOUS_STEP';
 export const GO_TO_STEP = 'GO_TO_STEP';
+export const INSTALL_REQUEST = 'INSTALL_REQUEST';
+export const INSTALL_SUCCESS = 'INSTALL_SUCCESS';
+export const INSTALL_FAILURE = 'INSTALL_FAILURE';
+export const SHOW_ERRORS = 'SHOW_ERRORS';
+export const HAS_ERROR = 'HAS_ERROR';
+export const UPDATE_FORMDATA_SETTINGS = 'UPDATE_FORMDATA_SETTINGS';
+export const UPDATE_FORMDATA_USER = 'UPDATE_FORMDATA_USER';
+export const ADD_ERROR = 'ADD_ERROR';

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

@@ -1,29 +1,27 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import styles from './style.css';
-import {nextStep, previousStep, goToStep} from '../../actions/install';
 import {Wizard, WizardNav} from 'coral-ui';
 import {Layout} from '../../components/ui/Layout';
+import {nextStep, previousStep, goToStep, updateUserFormData, updateSettingsFormData, submit} from '../../actions/install';
 
 import InitialStep from './components/Steps/InitialStep';
 import AddOrganizationName from './components/Steps/AddOrganizationName';
 import CreateYourAccount from './components/Steps/CreateYourAccount';
-import InviteTeamMembers from './components/Steps/InviteTeamMembers';
 import FinalStep from './components/Steps/FinalStep';
 
 const InstallContainer = props => {
-  const {nextStep, previousStep, goToStep, install} = props;
+  const {goToStep, install} = props;
 
   return (
     <Layout restricted={true}>
       <div className={styles.Install}>
         <h2>Welcome to the Coral Project</h2>
-        { install.step !== 0 ? <WizardNav goToStep={goToStep} items={wizardNavitems} currentStep={install.step} icon='check'/> : null }
-        <Wizard currentStep={install.step} nextStep={nextStep} previousStep={previousStep} goToStep={goToStep}>
+        { install.step !== 0 ? <WizardNav goToStep={goToStep} items={install.navItems} currentStep={install.step} icon='check'/> : null }
+        <Wizard currentStep={install.step} {...props}>
           <InitialStep/>
           <AddOrganizationName/>
           <CreateYourAccount/>
-          <InviteTeamMembers/>
           <FinalStep/>
         </Wizard>
       </div>
@@ -31,19 +29,6 @@ const InstallContainer = props => {
   );
 };
 
-const wizardNavitems = [{
-  text: '1. Add Organization Name',
-  step: 1
-},
-{
-  text: '2. Create your account',
-  step: 2
-},
-{
-  text: '3. Invite team members',
-  step: 3
-}];
-
 const mapStateToProps = state => ({
   install: state.install.toJS()
 });
@@ -51,7 +36,22 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   nextStep: () => dispatch(nextStep()),
   previousStep: () => dispatch(previousStep()),
-  goToStep: step => dispatch(goToStep(step))
+  goToStep: step => dispatch(goToStep(step)),
+  handleSettingsChange: e => {
+    const {name, value} = e.currentTarget;
+    dispatch(updateSettingsFormData(name, value));
+  },
+  handleUserChange: e => {
+    const {name, value} = e.currentTarget;
+    dispatch(updateUserFormData(name, value));
+  },
+  handleSubmit: e => {
+    e.preventDefault();
+    dispatch(submit());
+  }
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(InstallContainer);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(InstallContainer);

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

@@ -2,7 +2,8 @@ import React from 'react';
 import styles from './style.css';
 import {FormField, Button} from 'coral-ui';
 
-const InitialStep = () => {
+const AddOrganizationName = props => {
+  const {handleSettingsChange, handleSubmit, install} = props;
   return (
     <div className={styles.step}>
       <p>
@@ -10,17 +11,20 @@ const InitialStep = () => {
         inviting new team members
       </p>
       <div className={styles.form}>
-        <form onSubmit={() => {}}>
+        <form onSubmit={handleSubmit}>
           <FormField
             className={styles.FormField}
             id="organizationName"
             type="text"
-            label='Organization name' required/>
-          <Button cStyle='black' full>Save</Button>
+            label='Organization name'
+            onChange={handleSettingsChange}
+            showErrors={install.showErrors}
+            errorMsg={install.errors.organizationName} />
+          <Button type="submit" cStyle='black' full>Save</Button>
         </form>
       </div>
     </div>
   );
 };
 
-export default InitialStep;
+export default AddOrganizationName;

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

@@ -3,36 +3,44 @@ import styles from './style.css';
 import {FormField, Button} from 'coral-ui';
 
 const InitialStep = props => {
-  const {nextStep} = props;
+  const {handleSubmit, handleUserChange} = props;
   return (
     <div className={styles.step}>
       <div className={styles.form}>
-        <form>
+        <form onSubmit={handleSubmit}>
           <FormField
             className={styles.formField}
             id="email"
             type="email"
-            label='Email address' required/>
+            label='Email address' required
+            onChange={handleUserChange}
+            />
 
           <FormField
             className={styles.formField}
             id="username"
             type="text"
-            label='Username' required/>
+            label='Username'
+            onChange={handleUserChange}
+             />
 
           <FormField
             className={styles.formField}
             id="password"
             type="password"
-            label='Password' required/>
+            label='Password'
+            onChange={handleUserChange}
+             />
 
           <FormField
             className={styles.formField}
             id="confirmPassword"
             type="password"
-            label='Confirm Password' required/>
+            label='Confirm Password'
+            onChange={handleUserChange}
+             />
 
-          <Button cStyle='black' onClick={nextStep} full>Save</Button>
+          <Button cStyle='black' type="submit" full>Save</Button>
         </form>
       </div>
     </div>

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

@@ -3,10 +3,22 @@ import {Map} from 'immutable';
 import * as actions from '../constants/install';
 
 const initialState = Map({
-  step: 0
+  data: Map(),
+  errors: Map(),
+  showErrors: false,
+  hasError: false,
+  step: 0,
+  navItems: [{
+    text: '1. Add Organization Name',
+    step: 1
+  },
+  {
+    text: '2. Create your account',
+    step: 2
+  }]
 });
 
-export default function auth (state = initialState, action) {
+export default function install (state = initialState, action) {
   switch (action.type) {
   case actions.NEXT_STEP:
     return state
@@ -17,6 +29,24 @@ export default function auth (state = initialState, action) {
   case actions.GO_TO_STEP:
     return state
       .set('step', action.step);
+  case actions.UPDATE_FORMDATA_SETTINGS:
+    return state
+      .setIn(['data', 'settings', action.name], action.value);
+  case actions.UPDATE_FORMDATA_USER:
+    return state
+      .setIn(['data', 'user', action.name], action.value);
+  case actions.SHOW_ERRORS:
+    return state
+      .set('showErrors', action.show);
+  case actions.HAS_ERROR:
+    return state
+      .set('hasError', action.has);
+  case actions.ADD_ERROR:
+    return state
+      .setIn(['errors', action.name], action.error);
+  case actions.NO_ERROR:
+    return state
+      .set('errors', Map());
   default :
     return state;
   }

client/coral-framework/helpers/error.js

@@ -6,5 +6,6 @@ export default {
   email: lang.t('error.email'),
   password: lang.t('error.password'),
   displayName: lang.t('error.displayName'),
-  confirmPassword: lang.t('error.confirmPassword')
+  confirmPassword: lang.t('error.confirmPassword'),
+  organizationName: lang.t('error.organizationName'),
 };

client/coral-framework/helpers/validate.js

@@ -2,5 +2,6 @@ export default {
   email: email => (/^([A-Za-z0-9_\-\.\+])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(email)),
   password: pass => (/^(?=.{8,}).*$/.test(pass)),
   confirmPassword: () => true,
-  displayName: displayName => (/^[a-zA-Z0-9_]+$/.test(displayName))
+  displayName: displayName => (/^[a-zA-Z0-9_]+$/.test(displayName)),
+  organizationName: org => (/^[a-zA-Z0-9_]+$/).test(org)
 };

client/coral-framework/translations.json

@@ -10,6 +10,7 @@
       "password": "Password must be at least 8 characters",
       "displayName": "Display names can contain letters, numbers and _ only",
       "confirmPassword": "Passwords don't match. Please, check again",
+      "organizationName": "Organization name must only contain letters or numbers.",
       "emailPasswordError": "Email and/or password combination incorrect.",
       "EMAIL_REQUIRED": "An email address is required",
       "PASSWORD_REQUIRED": "Must input a password",
@@ -32,6 +33,7 @@
       "email": "No es un email válido",
       "password": "La contraseña debe tener por lo menos 8 caracteres",
       "displayName": "Los nombres pueden contener letras, números y _",
+      "organizationName": "El nombre de la organización debe contener letras y/o números.",
       "confirmPassword": "Las contraseñas no coinciden",
       "emailPasswordError": "Email y/o contraseña incorrecta.",
       "EMAIL_REQUIRED": "Se requiere una dirección de correo electrónico",

client/coral-ui/components/Button.css

@@ -30,6 +30,12 @@
       font-size: 18px;
       vertical-align: middle;
     }
+
+    &:disabled {
+      background: #E0E0E0;
+      color: #4f5c67;
+      font-weight: bold;
+    }
 }
 
 .type--black {

client/coral-ui/components/Wizard.js

@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react';
 
 const Wizard = (props) => {
-  const {children, currentStep, nextStep, previousStep, goToStep} = props;
+  const {children, currentStep, ...rest} = props;
   return (
     <section>
       {React.Children.toArray(children)
@@ -10,9 +10,7 @@ const Wizard = (props) => {
             React.cloneElement(child, {
               i,
               currentStep,
-              nextStep,
-              previousStep,
-              goToStep
+              ...rest
             })
       )}
     </section>