From 890da0400f8657cfa55a3681aee00c96ad3cbbc9 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 31 Jan 2017 16:31:29 -0300
Subject: [PATCH 01/18] Steps

---
 client/coral-admin/src/AppRouter.js           |  2 ++
 client/coral-admin/src/actions/install.js     |  4 +++
 client/coral-admin/src/constants/install.js   |  2 ++
 .../containers/Install/InstallContainer.js    | 30 +++++++++++++++++++
 .../src/containers/Install/index.js           |  0
 .../src/containers/Install/style.css          |  0
 client/coral-admin/src/reducers/index.js      |  4 ++-
 client/coral-admin/src/reducers/install.js    | 21 +++++++++++++
 8 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 client/coral-admin/src/actions/install.js
 create mode 100644 client/coral-admin/src/constants/install.js
 create mode 100644 client/coral-admin/src/containers/Install/InstallContainer.js
 create mode 100644 client/coral-admin/src/containers/Install/index.js
 create mode 100644 client/coral-admin/src/containers/Install/style.css
 create mode 100644 client/coral-admin/src/reducers/install.js

diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js
index 9c0f271cc..ebb79b4e1 100644
--- a/client/coral-admin/src/AppRouter.js
+++ b/client/coral-admin/src/AppRouter.js
@@ -7,6 +7,7 @@ import Configure from 'containers/Configure/Configure';
 import Streams from 'containers/Streams/Streams';
 import CommunityContainer from 'containers/Community/CommunityContainer';
 import LayoutContainer from 'containers/LayoutContainer';
+import InstallContainer from 'containers/Install/InstallContainer';
 
 const routes = (
   <Route path='/admin' component={LayoutContainer}>
@@ -15,6 +16,7 @@ const routes = (
     <Route path='community' component={CommunityContainer} />
     <Route path='configure' component={Configure} />
     <Route path='streams' component={Streams} />
+    <Route path='install' component={InstallContainer} />
   </Route>
 );
 
diff --git a/client/coral-admin/src/actions/install.js b/client/coral-admin/src/actions/install.js
new file mode 100644
index 000000000..460a36e23
--- /dev/null
+++ b/client/coral-admin/src/actions/install.js
@@ -0,0 +1,4 @@
+import * as actions from '../constants/install';
+
+export const nextStep = () => ({type: actions.NEXT_STEP});
+export const previousStep = () => ({type: actions.PREVIOUS_STEP});
diff --git a/client/coral-admin/src/constants/install.js b/client/coral-admin/src/constants/install.js
new file mode 100644
index 000000000..f15a39ed4
--- /dev/null
+++ b/client/coral-admin/src/constants/install.js
@@ -0,0 +1,2 @@
+export const NEXT_STEP = 'NEXT_STEP';
+export const PREVIOUS_STEP = 'PREVIOUS_STEP';
diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js
new file mode 100644
index 000000000..de296acc0
--- /dev/null
+++ b/client/coral-admin/src/containers/Install/InstallContainer.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import styles from './style.css';
+import {nextStep, previousStep} from '../../actions/install'
+
+const InstallContainer = props => {
+  const {nextStep, previousStep, install} = props;
+
+  return (
+    <div className={styles.Install}>
+      Install:
+      <h1>
+        {install.step}
+      </h1>
+      <button onClick={previousStep}>Previous Step</button>
+      <button onClick={nextStep}>Next Step</button>
+    </div>
+  );
+};
+
+const mapStateToProps = state => ({
+  install: state.install.toJS()
+});
+
+const mapDispatchToProps = dispatch => ({
+  nextStep: () => dispatch(nextStep()),
+  previousStep: () => dispatch(previousStep())
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(InstallContainer);
diff --git a/client/coral-admin/src/containers/Install/index.js b/client/coral-admin/src/containers/Install/index.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/coral-admin/src/containers/Install/style.css b/client/coral-admin/src/containers/Install/style.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/coral-admin/src/reducers/index.js b/client/coral-admin/src/reducers/index.js
index a19a5a087..1943e5976 100644
--- a/client/coral-admin/src/reducers/index.js
+++ b/client/coral-admin/src/reducers/index.js
@@ -6,6 +6,7 @@ import users from 'reducers/users';
 import auth from 'reducers/auth';
 import actions from 'reducers/actions';
 import assets from 'reducers/assets';
+import install from 'reducers/install';
 
 // Combine all reducers into a main one
 export default combineReducers({
@@ -15,5 +16,6 @@ export default combineReducers({
   auth,
   actions,
   assets,
-  users
+  users,
+  install
 });
diff --git a/client/coral-admin/src/reducers/install.js b/client/coral-admin/src/reducers/install.js
new file mode 100644
index 000000000..1b9ae5b28
--- /dev/null
+++ b/client/coral-admin/src/reducers/install.js
@@ -0,0 +1,21 @@
+import {Map} from 'immutable';
+
+import * as actions from '../constants/install';
+
+const initialState = Map({
+  step: 0
+});
+
+export default function auth (state = initialState, action) {
+  switch (action.type) {
+  case actions.NEXT_STEP:
+    console.log(state)
+    return state
+      .set('step', state.get('step') + 1);
+  case actions.PREVIOUS_STEP:
+    return state
+      .set('step', state.get('step') - 1);
+  default :
+    return state;
+  }
+}

From 6a4315d60826fd0f2bfd4a884656cac0f1dd5fa3 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 1 Feb 2017 10:49:16 -0300
Subject: [PATCH 02/18] Working Install Wizard

---
 client/coral-admin/src/actions/install.js     |  1 +
 client/coral-admin/src/constants/install.js   |  1 +
 .../containers/Install/InstallContainer.js    | 29 +++++++++++++------
 .../components/Steps/AddOrganizationName.js   | 19 ++++++++++++
 .../Install/components/Steps/InitialStep.js   | 20 +++++++++++++
 client/coral-admin/src/reducers/install.js    |  3 ++
 client/coral-ui/components/Wizard.js          | 29 +++++++++++++++++++
 client/coral-ui/index.js                      |  1 +
 8 files changed, 94 insertions(+), 9 deletions(-)
 create mode 100644 client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
 create mode 100644 client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
 create mode 100644 client/coral-ui/components/Wizard.js

diff --git a/client/coral-admin/src/actions/install.js b/client/coral-admin/src/actions/install.js
index 460a36e23..abaaeceb7 100644
--- a/client/coral-admin/src/actions/install.js
+++ b/client/coral-admin/src/actions/install.js
@@ -2,3 +2,4 @@ import * as actions from '../constants/install';
 
 export const nextStep = () => ({type: actions.NEXT_STEP});
 export const previousStep = () => ({type: actions.PREVIOUS_STEP});
+export const goToStep = step => ({type: actions.GO_TO_STEP, step});
diff --git a/client/coral-admin/src/constants/install.js b/client/coral-admin/src/constants/install.js
index f15a39ed4..d33ec4657 100644
--- a/client/coral-admin/src/constants/install.js
+++ b/client/coral-admin/src/constants/install.js
@@ -1,2 +1,3 @@
 export const NEXT_STEP = 'NEXT_STEP';
 export const PREVIOUS_STEP = 'PREVIOUS_STEP';
+export const GO_TO_STEP = 'GO_TO_STEP';
diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js
index de296acc0..bda32bde2 100644
--- a/client/coral-admin/src/containers/Install/InstallContainer.js
+++ b/client/coral-admin/src/containers/Install/InstallContainer.js
@@ -1,19 +1,29 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import styles from './style.css';
-import {nextStep, previousStep} from '../../actions/install'
+import {nextStep, previousStep, goToStep} from '../../actions/install';
+import {Button, Wizard} from 'coral-ui';
+
+import InitialStep from './components/Steps/InitialStep'
+import AddOrganizationName from './components/Steps/AddOrganizationName'
 
 const InstallContainer = props => {
-  const {nextStep, previousStep, install} = props;
+  const {nextStep, previousStep, goToStep, install} = props;
 
   return (
     <div className={styles.Install}>
-      Install:
-      <h1>
-        {install.step}
-      </h1>
-      <button onClick={previousStep}>Previous Step</button>
-      <button onClick={nextStep}>Next Step</button>
+      <h1>{install.step}</h1>
+      <nav>
+        <ul>
+          <li onClick={() => goToStep(0)}>Add Organization Name</li>
+          <li onClick={() => goToStep(1)}>Create your account</li>
+          <li onClick={() => goToStep(2)}>Invite team members</li>
+        </ul>
+      </nav>
+      <Wizard currentStep={install.step} nextStep={nextStep} previousStep={previousStep} goToStep={goToStep}>
+        <InitialStep/>
+        <AddOrganizationName/>
+      </Wizard>
     </div>
   );
 };
@@ -24,7 +34,8 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   nextStep: () => dispatch(nextStep()),
-  previousStep: () => dispatch(previousStep())
+  previousStep: () => dispatch(previousStep()),
+  goToStep: step => dispatch(goToStep(step))
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(InstallContainer);
diff --git a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
new file mode 100644
index 000000000..1af4b9839
--- /dev/null
+++ b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
@@ -0,0 +1,19 @@
+import React from 'react';
+// import styles from './style.css';
+import {Button} from 'coral-ui';
+
+const InitialStep = props => {
+  const {nextStep, previousStep} = props;
+  return (
+    <div>
+      <h2>Welcome to the Coral Project</h2>
+      <p>
+        Please tell us the name of your organization. This will appear in emails when
+        inviting new team members
+      </p>
+      <Button onClick={previousStep}>Go back</Button>
+    </div>
+  );
+};
+
+export default InitialStep;
diff --git a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
new file mode 100644
index 000000000..9efdf4ad0
--- /dev/null
+++ b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
@@ -0,0 +1,20 @@
+import React from 'react';
+// import styles from './style.css';
+import {Button} from 'coral-ui';
+
+const InitialStep = props => {
+  const {nextStep} = props;
+  return (
+    <div>
+      <h2>Welcome to the Coral Project</h2>
+      <p>
+      The remainder of the Talk installation will take about ten minutes.
+      Once you complete the following three steps, you will have a free
+      installation and provision of Mongo and Redis.
+      </p>
+      <Button onClick={nextStep}>Get Started</Button>
+    </div>
+  );
+};
+
+export default InitialStep;
diff --git a/client/coral-admin/src/reducers/install.js b/client/coral-admin/src/reducers/install.js
index 1b9ae5b28..95febb887 100644
--- a/client/coral-admin/src/reducers/install.js
+++ b/client/coral-admin/src/reducers/install.js
@@ -15,6 +15,9 @@ export default function auth (state = initialState, action) {
   case actions.PREVIOUS_STEP:
     return state
       .set('step', state.get('step') - 1);
+  case actions.GO_TO_STEP:
+    return state
+      .set('step', action.step);
   default :
     return state;
   }
diff --git a/client/coral-ui/components/Wizard.js b/client/coral-ui/components/Wizard.js
new file mode 100644
index 000000000..1ba6e56a6
--- /dev/null
+++ b/client/coral-ui/components/Wizard.js
@@ -0,0 +1,29 @@
+import React, {PropTypes} from 'react';
+
+const Wizard = (props) => {
+  const {children, currentStep, nextStep, previousStep, goToStep, className = ''} = props;
+  return (
+    <div>
+      {React.Children.toArray(children)
+        .filter((child, i) => i === currentStep)
+        .map((child, i) =>
+            React.cloneElement(child, {
+              i,
+              currentStep,
+              nextStep,
+              previousStep,
+              goToStep
+            })
+      )}
+    </div>
+  );
+};
+
+Wizard.propTypes = {
+  currentStep: PropTypes.number.isRequired,
+  nextStep: PropTypes.func.isRequired,
+  previousStep: PropTypes.func.isRequired,
+  goToStep: PropTypes.func.isRequired
+}
+
+export default Wizard;
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index 23d5d876a..b58c2a74a 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -14,3 +14,4 @@ export {default as List} from './components/List';
 export {default as Item} from './components/Item';
 export {default as Card} from './components/Card';
 export {default as Pager} from './components/Pager';
+export {default as Wizard} from './components/Wizard';

From 12070309d6bd5db9fdf5e26e702c4fb90327b559 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 1 Feb 2017 12:11:15 -0300
Subject: [PATCH 03/18] Wizard Nav

---
 .../containers/Install/InstallContainer.js    |  29 +++--
 .../components/Steps/AddOrganizationName.js   |  13 ++-
 .../Install/components/Steps/InitialStep.js   |  13 +--
 .../Install/components/Steps/style.css        |  30 +++++
 .../src/containers/Install/style.css          |  12 ++
 client/coral-admin/src/reducers/install.js    |   1 -
 client/coral-ui/components/Wizard.js          |   4 +-
 client/coral-ui/components/WizardNav.css      | 109 ++++++++++++++++++
 client/coral-ui/components/WizardNav.js       |  29 +++++
 client/coral-ui/index.js                      |   1 +
 10 files changed, 215 insertions(+), 26 deletions(-)
 create mode 100644 client/coral-admin/src/containers/Install/components/Steps/style.css
 create mode 100644 client/coral-ui/components/WizardNav.css
 create mode 100644 client/coral-ui/components/WizardNav.js

diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js
index bda32bde2..8ed0bbf69 100644
--- a/client/coral-admin/src/containers/Install/InstallContainer.js
+++ b/client/coral-admin/src/containers/Install/InstallContainer.js
@@ -2,24 +2,18 @@ import React from 'react';
 import {connect} from 'react-redux';
 import styles from './style.css';
 import {nextStep, previousStep, goToStep} from '../../actions/install';
-import {Button, Wizard} from 'coral-ui';
+import {Wizard, WizardNav} from 'coral-ui';
 
-import InitialStep from './components/Steps/InitialStep'
-import AddOrganizationName from './components/Steps/AddOrganizationName'
+import InitialStep from './components/Steps/InitialStep';
+import AddOrganizationName from './components/Steps/AddOrganizationName';
 
 const InstallContainer = props => {
   const {nextStep, previousStep, goToStep, install} = props;
 
   return (
     <div className={styles.Install}>
-      <h1>{install.step}</h1>
-      <nav>
-        <ul>
-          <li onClick={() => goToStep(0)}>Add Organization Name</li>
-          <li onClick={() => goToStep(1)}>Create your account</li>
-          <li onClick={() => goToStep(2)}>Invite team members</li>
-        </ul>
-      </nav>
+      <h2>Welcome to the Coral Project</h2>
+      { install.step !== 0 ? <WizardNav goToStep={goToStep} items={wizardNavitems} currentStep={install.step}/> : null }
       <Wizard currentStep={install.step} nextStep={nextStep} previousStep={previousStep} goToStep={goToStep}>
         <InitialStep/>
         <AddOrganizationName/>
@@ -28,6 +22,19 @@ 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()
 });
diff --git a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
index 1af4b9839..74f2c3016 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
+++ b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
@@ -1,17 +1,20 @@
 import React from 'react';
-// import styles from './style.css';
+import styles from './style.css';
 import {Button} from 'coral-ui';
 
 const InitialStep = props => {
-  const {nextStep, previousStep} = props;
+  const {nextStep} = props;
   return (
-    <div>
-      <h2>Welcome to the Coral Project</h2>
+    <div className={styles.step}>
       <p>
         Please tell us the name of your organization. This will appear in emails when
         inviting new team members
       </p>
-      <Button onClick={previousStep}>Go back</Button>
+      <form>
+        <label htmlFor='organizationName'>Organization name:</label>
+        <input type='text' name='organizationName' id='organizationName'/>
+        <Button cStyle='black' onClick={nextStep} full>Save</Button>
+      </form>
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
index 9efdf4ad0..95043b515 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
+++ b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
@@ -1,18 +1,17 @@
 import React from 'react';
-// import styles from './style.css';
+import styles from './style.css';
 import {Button} from 'coral-ui';
 
 const InitialStep = props => {
   const {nextStep} = props;
   return (
-    <div>
-      <h2>Welcome to the Coral Project</h2>
+    <div className={styles.step}>
       <p>
-      The remainder of the Talk installation will take about ten minutes.
-      Once you complete the following three steps, you will have a free
-      installation and provision of Mongo and Redis.
+        The remainder of the Talk installation will take about ten minutes.
+        Once you complete the following three steps, you will have a free
+        installation and provision of Mongo and Redis.
       </p>
-      <Button onClick={nextStep}>Get Started</Button>
+      <Button cStyle='green' onClick={nextStep}>Get Started</Button>
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/Install/components/Steps/style.css b/client/coral-admin/src/containers/Install/components/Steps/style.css
new file mode 100644
index 000000000..5284b3470
--- /dev/null
+++ b/client/coral-admin/src/containers/Install/components/Steps/style.css
@@ -0,0 +1,30 @@
+.step {
+
+  p {
+    max-width: 450px;
+    margin: 10px auto 30px;
+  }
+
+  > button {
+    min-width: 140px;
+  }
+
+  form {
+    max-width: 300px;
+    margin: 30px auto;
+
+    label {
+      text-align: left;
+      display: block;
+    }
+
+    input {
+      border: solid 1px rgba(0, 0, 0, 0.23);
+      padding: 10px 2px;
+      border-radius: 3px;
+      width: 100%;
+      box-sizing: border-box;
+      margin: 10px 0;
+    }
+  }
+}
diff --git a/client/coral-admin/src/containers/Install/style.css b/client/coral-admin/src/containers/Install/style.css
index e69de29bb..90c62c20e 100644
--- a/client/coral-admin/src/containers/Install/style.css
+++ b/client/coral-admin/src/containers/Install/style.css
@@ -0,0 +1,12 @@
+.Install {
+  max-width: 900px;
+  margin: 0 auto;
+  text-align: center;
+  padding: 40px 0;
+
+  h2 {
+    font-size: 2em;
+    font-weight: 500;
+    margin: 0;
+  }
+}
diff --git a/client/coral-admin/src/reducers/install.js b/client/coral-admin/src/reducers/install.js
index 95febb887..d97c7f236 100644
--- a/client/coral-admin/src/reducers/install.js
+++ b/client/coral-admin/src/reducers/install.js
@@ -9,7 +9,6 @@ const initialState = Map({
 export default function auth (state = initialState, action) {
   switch (action.type) {
   case actions.NEXT_STEP:
-    console.log(state)
     return state
       .set('step', state.get('step') + 1);
   case actions.PREVIOUS_STEP:
diff --git a/client/coral-ui/components/Wizard.js b/client/coral-ui/components/Wizard.js
index 1ba6e56a6..e598b3c30 100644
--- a/client/coral-ui/components/Wizard.js
+++ b/client/coral-ui/components/Wizard.js
@@ -3,7 +3,7 @@ import React, {PropTypes} from 'react';
 const Wizard = (props) => {
   const {children, currentStep, nextStep, previousStep, goToStep, className = ''} = props;
   return (
-    <div>
+    <section>
       {React.Children.toArray(children)
         .filter((child, i) => i === currentStep)
         .map((child, i) =>
@@ -15,7 +15,7 @@ const Wizard = (props) => {
               goToStep
             })
       )}
-    </div>
+    </section>
   );
 };
 
diff --git a/client/coral-ui/components/WizardNav.css b/client/coral-ui/components/WizardNav.css
new file mode 100644
index 000000000..12b9b3841
--- /dev/null
+++ b/client/coral-ui/components/WizardNav.css
@@ -0,0 +1,109 @@
+.WizardNav {
+  ul {
+    list-style: none;
+  }
+
+  li {
+    border: solid 1px #DFDFDF;
+    background-color: #F0F0F0;
+    display: inline-block;
+    padding: 10px;
+    margin-right: 10px;
+    color: #A7A7A7;
+    position: relative;
+    padding-left: 40px;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &.active {
+      background-color: #FFFFFF;
+      color: #636363;
+      font-weight: 500;
+
+      span {
+        &::after {
+          border-color: transparent transparent transparent #FFFFFF;
+        }
+      }
+    }
+
+    span {
+      padding: 10px 20px;
+      margin-right: 10px;
+      position: absolute;
+      top: -1px;
+      right: -51px;
+      z-index: 10;
+
+      &::before {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        border: 23px solid #DFDFDF;
+        border-color: transparent transparent transparent #DFDFDF;
+        top: 0;
+        left: 0;
+      }
+
+      &::after {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        border: 23px solid white;
+        border-color: transparent transparent transparent #f0f0f0;
+        top: 0;
+        left: -1px;
+      }
+    }
+
+    &::before {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      border: 23px solid #DFDFDF;
+      border-color: transparent transparent transparent #DFDFDF;
+      top: 0;
+      left: 0;
+    }
+
+    &::after {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      border: 23px solid white;
+      border-color: transparent transparent transparent #fafafa;
+      top: 0;
+      left: -1px;
+    }
+/*
+    &::before {
+      position: absolute;
+      top: 0;
+      left: -1px;
+      display: block;
+      border-left: 23px solid white;
+      border-top: 23px solid transparent;
+      border-bottom: 23px solid transparent;
+      width: 0;
+      height: 0;
+      content: " ";
+    }
+
+    &::after{
+      z-index: 1;
+      position: absolute;
+      top: 0;
+      right: -23px;
+      display: block;
+      border-left: 23px solid #f0f0f0;
+      border-top: 23px solid transparent;
+      border-bottom: 23px solid transparent;
+      width: 0;
+      height: 0;
+      content: " ";
+    }*/
+
+  }
+}
diff --git a/client/coral-ui/components/WizardNav.js b/client/coral-ui/components/WizardNav.js
new file mode 100644
index 000000000..200adb216
--- /dev/null
+++ b/client/coral-ui/components/WizardNav.js
@@ -0,0 +1,29 @@
+import React, {PropTypes} from 'react';
+import styles from './WizardNav.css';
+
+const WizardNav = props => {
+  const {goToStep, currentStep, items} = props;
+  return (
+    <nav className={styles.WizardNav}>
+      <ul>
+        {
+          items.map((item, i) => (
+            <li
+              key={i}
+              className={currentStep === item.step ? styles.active : ''}
+              onClick={() => goToStep(item.step)}>
+              {item.text}<span/>
+            </li>
+          ))
+        }
+      </ul>
+    </nav>
+  );
+};
+
+WizardNav.propTypes = {
+  goToStep: PropTypes.func.isRequired,
+  currentStep: PropTypes.number.isRequired
+};
+
+export default WizardNav;
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index b58c2a74a..69f63e397 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -15,3 +15,4 @@ export {default as Item} from './components/Item';
 export {default as Card} from './components/Card';
 export {default as Pager} from './components/Pager';
 export {default as Wizard} from './components/Wizard';
+export {default as WizardNav} from './components/WizardNav';

From caa04de09df4c41b47c8e58301ce37889c5ab351 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 1 Feb 2017 12:12:28 -0300
Subject: [PATCH 04/18] linting and proptypes

---
 client/coral-ui/components/Wizard.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/coral-ui/components/Wizard.js b/client/coral-ui/components/Wizard.js
index e598b3c30..429bce72c 100644
--- a/client/coral-ui/components/Wizard.js
+++ b/client/coral-ui/components/Wizard.js
@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react';
 
 const Wizard = (props) => {
-  const {children, currentStep, nextStep, previousStep, goToStep, className = ''} = props;
+  const {children, currentStep, nextStep, previousStep, goToStep} = props;
   return (
     <section>
       {React.Children.toArray(children)
@@ -24,6 +24,6 @@ Wizard.propTypes = {
   nextStep: PropTypes.func.isRequired,
   previousStep: PropTypes.func.isRequired,
   goToStep: PropTypes.func.isRequired
-}
+};
 
 export default Wizard;

From 7866d1f8cdd79f6591edbad6cb25d96d4a90bd29 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 1 Feb 2017 15:17:15 -0300
Subject: [PATCH 05/18] Done Wizard mEnu

---
 client/coral-admin/src/AppRouter.js           | 18 ++++----
 .../coral-admin/src/components/ui/Header.js   | 35 ++++++++++-----
 .../containers/Install/InstallContainer.js    | 25 +++++++----
 .../components/Steps/CreateYourAccount.js     | 32 +++++++++++++
 .../Install/components/Steps/FinalStep.js     | 19 ++++++++
 .../components/Steps/InviteTeamMembers.js     | 35 +++++++++++++++
 .../Install/components/Steps/style.css        |  5 +++
 client/coral-ui/components/WizardNav.css      | 45 +++++++------------
 client/coral-ui/components/WizardNav.js       |  2 +-
 9 files changed, 158 insertions(+), 58 deletions(-)
 create mode 100644 client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js
 create mode 100644 client/coral-admin/src/containers/Install/components/Steps/FinalStep.js
 create mode 100644 client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js

diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js
index ebb79b4e1..bebe6a19b 100644
--- a/client/coral-admin/src/AppRouter.js
+++ b/client/coral-admin/src/AppRouter.js
@@ -10,14 +10,16 @@ import LayoutContainer from 'containers/LayoutContainer';
 import InstallContainer from 'containers/Install/InstallContainer';
 
 const routes = (
-  <Route path='/admin' component={LayoutContainer}>
-    <IndexRoute component={ModerationContainer} />
-    <Route path='embed' component={CommentStream} />
-    <Route path='community' component={CommunityContainer} />
-    <Route path='configure' component={Configure} />
-    <Route path='streams' component={Streams} />
-    <Route path='install' component={InstallContainer} />
-  </Route>
+  <div>
+    <Route exact path="/admin/install" component={InstallContainer}/>
+    <Route path='/admin' component={LayoutContainer}>
+      <IndexRoute component={ModerationContainer} />
+      <Route path='embed' component={CommentStream} />
+      <Route path='community' component={CommunityContainer} />
+      <Route path='configure' component={Configure} />
+      <Route path='streams' component={Streams} />
+    </Route>
+  </div>
 );
 
 const AppRouter = () => <Router history={browserHistory} routes={routes} />;
diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index 4e2b391c8..abfb0ff13 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -6,19 +6,32 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import {Logo} from './Logo';
 
-export default ({handleLogout}) => (
+export default ({handleLogout, restricted = false}) => (
   <Header className={styles.header}>
     <Logo />
-    <Navigation className={styles.nav}>
-      <IndexLink className={styles.navLink} to="/admin"
-                 activeClassName={styles.active}>{lang.t('configure.moderate')}</IndexLink>
-      <Link className={styles.navLink} to="/admin/community"
-            activeClassName={styles.active}>{lang.t('configure.community')}</Link>
-      <Link className={styles.navLink} to="/admin/configure"
-            activeClassName={styles.active}>{lang.t('configure.configure')}</Link>
-          <Link className={styles.navLink} to="/admin/streams"
-            activeClassName={styles.active}>{lang.t('configure.streams')}</Link>
-    </Navigation>
+    {
+      !restricted ?
+      <Navigation className={styles.nav}>
+        <IndexLink className={styles.navLink} to="/admin"
+                   activeClassName={styles.active}>
+                   {lang.t('configure.moderate')}
+       </IndexLink>
+        <Link className={styles.navLink} to="/admin/community"
+              activeClassName={styles.active}>
+              {lang.t('configure.community')}
+        </Link>
+        <Link className={styles.navLink} to="/admin/configure"
+              activeClassName={styles.active}>
+              {lang.t('configure.configure')}
+        </Link>
+        <Link className={styles.navLink} to="/admin/streams"
+              activeClassName={styles.active}>
+              {lang.t('configure.streams')}
+        </Link>
+      </Navigation>
+      :
+      null
+    }
     <div className={styles.rightPanel}>
       <ul>
         <li className={styles.settings}>
diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js
index 8ed0bbf69..aac4654d3 100644
--- a/client/coral-admin/src/containers/Install/InstallContainer.js
+++ b/client/coral-admin/src/containers/Install/InstallContainer.js
@@ -3,22 +3,31 @@ 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 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;
 
   return (
-    <div className={styles.Install}>
-      <h2>Welcome to the Coral Project</h2>
-      { install.step !== 0 ? <WizardNav goToStep={goToStep} items={wizardNavitems} currentStep={install.step}/> : null }
-      <Wizard currentStep={install.step} nextStep={nextStep} previousStep={previousStep} goToStep={goToStep}>
-        <InitialStep/>
-        <AddOrganizationName/>
-      </Wizard>
-    </div>
+    <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}/> : null }
+        <Wizard currentStep={install.step} nextStep={nextStep} previousStep={previousStep} goToStep={goToStep}>
+          <InitialStep/>
+          <AddOrganizationName/>
+          <CreateYourAccount/>
+          <InviteTeamMembers/>
+          <FinalStep/>
+        </Wizard>
+      </div>
+    </Layout>
   );
 };
 
diff --git a/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js b/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js
new file mode 100644
index 000000000..cb29c3429
--- /dev/null
+++ b/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import styles from './style.css';
+import {Button} from 'coral-ui';
+
+const InitialStep = props => {
+  const {nextStep} = props;
+  return (
+    <div className={styles.step}>
+      <form>
+        <div className='formField'>
+          <label htmlFor='email'>Email address</label>
+          <input type='email' name='email' id='email'/>
+        </div>
+        <div className='formField'>
+          <label htmlFor='username'>Username</label>
+          <input type='text' name='username' id='username'/>
+        </div>
+        <div className='formField'>
+          <label htmlFor='password'>Password</label>
+          <input type='password' name='password' id='password'/>
+        </div>
+        <div className='formField'>
+          <label htmlFor='confirmPassword'>Confirm Password</label>
+          <input type='password' name='confirmPassword' id='confirmPassword'/>
+        </div>
+        <Button cStyle='black' onClick={nextStep} full>Save</Button>
+      </form>
+    </div>
+  );
+};
+
+export default InitialStep;
diff --git a/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js b/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js
new file mode 100644
index 000000000..0b58508a0
--- /dev/null
+++ b/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from './style.css';
+import {Button} from 'coral-ui';
+
+const InitialStep = props => {
+  const {nextStep} = props;
+  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>
+    </div>
+  );
+};
+
+export default InitialStep;
diff --git a/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js b/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js
new file mode 100644
index 000000000..99ef84d19
--- /dev/null
+++ b/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import styles from './style.css';
+import {Button} from 'coral-ui';
+
+const InviteTeamMembers = props => {
+  const {nextStep} = props;
+  return (
+    <div className={styles.step}>
+      <h3>Invite Team Members </h3>
+      <p>
+        Once registered, new team members will receive an email to Create
+        their password.
+      </p>
+      <form>
+        <div className='formField'>
+          <label htmlFor='email'>Email address</label>
+          <input type='email' name='email' id='email'/>
+        </div>
+        <div className='formField'>
+          <label htmlFor='username'>Username</label>
+          <input type='text' name='username' id='username'/>
+        </div>
+        <div className='formField'>
+          <select>
+            <option>Admin</option>
+            <option>Moderator</option>
+          </select>
+        </div>
+        <Button cStyle='black' onClick={nextStep} full>Invite team member</Button>
+      </form>
+    </div>
+  );
+};
+
+export default InviteTeamMembers;
diff --git a/client/coral-admin/src/containers/Install/components/Steps/style.css b/client/coral-admin/src/containers/Install/components/Steps/style.css
index 5284b3470..c7d41aef0 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/style.css
+++ b/client/coral-admin/src/containers/Install/components/Steps/style.css
@@ -25,6 +25,11 @@
       width: 100%;
       box-sizing: border-box;
       margin: 10px 0;
+      transition: border-color 0.2 ease;
+
+      &:focus {
+        border-color: black;
+      }
     }
   }
 }
diff --git a/client/coral-ui/components/WizardNav.css b/client/coral-ui/components/WizardNav.css
index 12b9b3841..90d07af09 100644
--- a/client/coral-ui/components/WizardNav.css
+++ b/client/coral-ui/components/WizardNav.css
@@ -12,11 +12,23 @@
     color: #A7A7A7;
     position: relative;
     padding-left: 40px;
-
+    border-radius: 1px;
+    
     &:hover {
       cursor: pointer;
     }
 
+    &.done {
+      border-color: #00796B;
+      background-color: #00796B;
+      color: #ffffff;
+      span {
+        &::after {
+          border-color: transparent transparent transparent #00796B;
+        }
+      }
+    }
+
     &.active {
       background-color: #FFFFFF;
       color: #636363;
@@ -64,7 +76,7 @@
       position: absolute;
       border: 23px solid #DFDFDF;
       border-color: transparent transparent transparent #DFDFDF;
-      top: 0;
+      top: -1px;
       left: 0;
     }
 
@@ -74,36 +86,9 @@
       position: absolute;
       border: 23px solid white;
       border-color: transparent transparent transparent #fafafa;
-      top: 0;
+      top: -1px;
       left: -1px;
     }
-/*
-    &::before {
-      position: absolute;
-      top: 0;
-      left: -1px;
-      display: block;
-      border-left: 23px solid white;
-      border-top: 23px solid transparent;
-      border-bottom: 23px solid transparent;
-      width: 0;
-      height: 0;
-      content: " ";
-    }
-
-    &::after{
-      z-index: 1;
-      position: absolute;
-      top: 0;
-      right: -23px;
-      display: block;
-      border-left: 23px solid #f0f0f0;
-      border-top: 23px solid transparent;
-      border-bottom: 23px solid transparent;
-      width: 0;
-      height: 0;
-      content: " ";
-    }*/
 
   }
 }
diff --git a/client/coral-ui/components/WizardNav.js b/client/coral-ui/components/WizardNav.js
index 200adb216..b5a8db549 100644
--- a/client/coral-ui/components/WizardNav.js
+++ b/client/coral-ui/components/WizardNav.js
@@ -10,7 +10,7 @@ const WizardNav = props => {
           items.map((item, i) => (
             <li
               key={i}
-              className={currentStep === item.step ? styles.active : ''}
+              className={`${currentStep === item.step ? styles.active : ''} ${item.step < currentStep ? styles.done : ''}`}
               onClick={() => goToStep(item.step)}>
               {item.text}<span/>
             </li>

From 65aa5e7e92be6ff9d3f396e39796b05abf071306 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 2 Feb 2017 11:31:43 -0300
Subject: [PATCH 06/18] =?UTF-8?q?=C3=81dding=20Select,=20Options=20to=20Co?=
 =?UTF-8?q?ral=20Ui=20and=20steps=20with=20formField?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../coral-admin/src/components/ui/Header.js   | 74 ++++++++++---------
 .../containers/Install/InstallContainer.js    |  2 +-
 .../components/Steps/AddOrganizationName.js   | 17 +++--
 .../components/Steps/CreateYourAccount.js     | 50 ++++++++-----
 .../Install/components/Steps/InitialStep.js   |  2 +-
 .../components/Steps/InviteTeamMembers.js     | 45 ++++++-----
 .../Install/components/Steps/style.css        | 52 +++++++++----
 .../src/containers/Install/style.css          |  2 +-
 client/coral-ui/components/Option.css         |  3 +
 client/coral-ui/components/Option.js          | 14 ++++
 client/coral-ui/components/Select.css         | 33 +++++++++
 client/coral-ui/components/Select.js          | 14 ++++
 client/coral-ui/components/WizardNav.css      | 15 +++-
 client/coral-ui/components/WizardNav.js       |  7 +-
 client/coral-ui/index.js                      |  2 +
 15 files changed, 230 insertions(+), 102 deletions(-)
 create mode 100644 client/coral-ui/components/Option.css
 create mode 100644 client/coral-ui/components/Option.js
 create mode 100644 client/coral-ui/components/Select.css
 create mode 100644 client/coral-ui/components/Select.js

diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index abfb0ff13..3e6598d6e 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -11,42 +11,44 @@ export default ({handleLogout, restricted = false}) => (
     <Logo />
     {
       !restricted ?
-      <Navigation className={styles.nav}>
-        <IndexLink className={styles.navLink} to="/admin"
-                   activeClassName={styles.active}>
-                   {lang.t('configure.moderate')}
-       </IndexLink>
-        <Link className={styles.navLink} to="/admin/community"
-              activeClassName={styles.active}>
-              {lang.t('configure.community')}
-        </Link>
-        <Link className={styles.navLink} to="/admin/configure"
-              activeClassName={styles.active}>
-              {lang.t('configure.configure')}
-        </Link>
-        <Link className={styles.navLink} to="/admin/streams"
-              activeClassName={styles.active}>
-              {lang.t('configure.streams')}
-        </Link>
-      </Navigation>
-      :
-      null
-    }
-    <div className={styles.rightPanel}>
-      <ul>
-        <li className={styles.settings}>
-          <div>
-            <IconButton name="settings" id="menu-settings"/>
-            <Menu target="menu-settings" align="right">
-              <MenuItem onClick={handleLogout}>Sign Out</MenuItem>
-            </Menu>
-          </div>
-        </li>
-        <li>
-          {`v${process.env.VERSION}`}
-        </li>
-      </ul>
-    </div>
+      <div>
+        <Navigation className={styles.nav}>
+          <IndexLink className={styles.navLink} to="/admin"
+                     activeClassName={styles.active}>
+                     {lang.t('configure.moderate')}
+         </IndexLink>
+          <Link className={styles.navLink} to="/admin/community"
+                activeClassName={styles.active}>
+                {lang.t('configure.community')}
+          </Link>
+          <Link className={styles.navLink} to="/admin/configure"
+                activeClassName={styles.active}>
+                {lang.t('configure.configure')}
+          </Link>
+          <Link className={styles.navLink} to="/admin/streams"
+                activeClassName={styles.active}>
+                {lang.t('configure.streams')}
+          </Link>
+        </Navigation>
+        <div className={styles.rightPanel}>
+          <ul>
+            <li className={styles.settings}>
+              <div>
+                <IconButton name="settings" id="menu-settings"/>
+                <Menu target="menu-settings" align="right">
+                  <MenuItem onClick={handleLogout}>Sign Out</MenuItem>
+                </Menu>
+              </div>
+            </li>
+            <li>
+              {`v${process.env.VERSION}`}
+            </li>
+          </ul>
+        </div>
+      </div>
+    :
+    null
+  }
   </Header>
 );
 
diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js
index aac4654d3..350e60709 100644
--- a/client/coral-admin/src/containers/Install/InstallContainer.js
+++ b/client/coral-admin/src/containers/Install/InstallContainer.js
@@ -18,7 +18,7 @@ const InstallContainer = props => {
     <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}/> : null }
+        { install.step !== 0 ? <WizardNav goToStep={goToStep} items={wizardNavitems} currentStep={install.step} icon='check'/> : null }
         <Wizard currentStep={install.step} nextStep={nextStep} previousStep={previousStep} goToStep={goToStep}>
           <InitialStep/>
           <AddOrganizationName/>
diff --git a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
index 74f2c3016..ff7125ab5 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
+++ b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './style.css';
-import {Button} from 'coral-ui';
+import {FormField, Button} from 'coral-ui';
 
 const InitialStep = props => {
   const {nextStep} = props;
@@ -10,11 +10,16 @@ const InitialStep = props => {
         Please tell us the name of your organization. This will appear in emails when
         inviting new team members
       </p>
-      <form>
-        <label htmlFor='organizationName'>Organization name:</label>
-        <input type='text' name='organizationName' id='organizationName'/>
-        <Button cStyle='black' onClick={nextStep} full>Save</Button>
-      </form>
+      <div className={styles.form}>
+        <form onSubmit={() => {}}>
+          <FormField
+            className={styles.FormField}
+            id="organizationName"
+            type="text"
+            label='Organization name' required/>
+          <Button cStyle='black' full>Save</Button>
+        </form>
+      </div>
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js b/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js
index cb29c3429..f245218d8 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js
+++ b/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js
@@ -1,30 +1,40 @@
 import React from 'react';
 import styles from './style.css';
-import {Button} from 'coral-ui';
+import {FormField, Button} from 'coral-ui';
 
 const InitialStep = props => {
   const {nextStep} = props;
   return (
     <div className={styles.step}>
-      <form>
-        <div className='formField'>
-          <label htmlFor='email'>Email address</label>
-          <input type='email' name='email' id='email'/>
-        </div>
-        <div className='formField'>
-          <label htmlFor='username'>Username</label>
-          <input type='text' name='username' id='username'/>
-        </div>
-        <div className='formField'>
-          <label htmlFor='password'>Password</label>
-          <input type='password' name='password' id='password'/>
-        </div>
-        <div className='formField'>
-          <label htmlFor='confirmPassword'>Confirm Password</label>
-          <input type='password' name='confirmPassword' id='confirmPassword'/>
-        </div>
-        <Button cStyle='black' onClick={nextStep} full>Save</Button>
-      </form>
+      <div className={styles.form}>
+        <form>
+          <FormField
+            className={styles.formField}
+            id="email"
+            type="email"
+            label='Email address' required/>
+
+          <FormField
+            className={styles.formField}
+            id="username"
+            type="text"
+            label='Username' required/>
+
+          <FormField
+            className={styles.formField}
+            id="password"
+            type="password"
+            label='Password' required/>
+
+          <FormField
+            className={styles.formField}
+            id="confirmPassword"
+            type="password"
+            label='Confirm Password' required/>
+
+          <Button cStyle='black' onClick={nextStep} full>Save</Button>
+        </form>
+      </div>
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
index 95043b515..51c40d44d 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
+++ b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
@@ -11,7 +11,7 @@ const InitialStep = props => {
         Once you complete the following three steps, you will have a free
         installation and provision of Mongo and Redis.
       </p>
-      <Button cStyle='green' onClick={nextStep}>Get Started</Button>
+      <Button cStyle='green' onClick={nextStep} raised>Get Started</Button>
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js b/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js
index 99ef84d19..156916ab0 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js
+++ b/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './style.css';
-import {Button} from 'coral-ui';
+import {Button, Select, Option, FormField} from 'coral-ui';
 
 const InviteTeamMembers = props => {
   const {nextStep} = props;
@@ -11,23 +11,32 @@ const InviteTeamMembers = props => {
         Once registered, new team members will receive an email to Create
         their password.
       </p>
-      <form>
-        <div className='formField'>
-          <label htmlFor='email'>Email address</label>
-          <input type='email' name='email' id='email'/>
-        </div>
-        <div className='formField'>
-          <label htmlFor='username'>Username</label>
-          <input type='text' name='username' id='username'/>
-        </div>
-        <div className='formField'>
-          <select>
-            <option>Admin</option>
-            <option>Moderator</option>
-          </select>
-        </div>
-        <Button cStyle='black' onClick={nextStep} full>Invite team member</Button>
-      </form>
+      <div className={styles.form}>
+        <form>
+
+          <FormField
+            className={styles.formField}
+            id="email"
+            type="email"
+            label='Email address' required/>
+
+          <FormField
+            className={styles.formField}
+            id="username"
+            type="text"
+            label='Username' required/>
+
+          <div className={styles.formField}>
+            <label htmlFor='role'>Assing a role</label>
+            <Select id='role' label='Select Role'>
+              <Option>Admin</Option>
+              <Option>Moderator</Option>
+            </Select>
+          </div>
+
+          <Button cStyle='black' onClick={nextStep} icon='arrow_forward' full>Invite team member</Button>
+        </form>
+      </div>
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/Install/components/Steps/style.css b/client/coral-admin/src/containers/Install/components/Steps/style.css
index c7d41aef0..9dd95f90b 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/style.css
+++ b/client/coral-admin/src/containers/Install/components/Steps/style.css
@@ -1,34 +1,54 @@
 .step {
+  padding: 20px 0;
+
+  h3 {
+    max-width: 450px;
+    margin: 0 auto;
+    text-align: left;
+    font-size: 1.4em;
+    font-weight: bold;
+  }
 
   p {
     max-width: 450px;
-    margin: 10px auto 30px;
+    margin: 0 auto 30px;
+    font-size: 1.1em;
+    text-align: left;
   }
 
   > button {
-    min-width: 140px;
+    min-width: 145px;
   }
 
-  form {
+  .form {
     max-width: 300px;
     margin: 30px auto;
 
-    label {
-      text-align: left;
-      display: block;
+    form > button {
+      margin: 30px 0;
     }
 
-    input {
-      border: solid 1px rgba(0, 0, 0, 0.23);
-      padding: 10px 2px;
-      border-radius: 3px;
-      width: 100%;
-      box-sizing: border-box;
-      margin: 10px 0;
-      transition: border-color 0.2 ease;
+    .formField {
+      label {
+        text-align: left;
+        display: block;
+        margin: 10px 0;
+        font-weight: 400;
+        font-size: 1.08em;
+      }
 
-      &:focus {
-        border-color: black;
+      > input {
+        border: solid 1px rgba(0, 0, 0, 0.23);
+        padding: 10px;
+        border-radius: 3px;
+        width: 100%;
+        box-sizing: border-box;
+        transition: border-color 0.2s ease;
+        font-size: 1em;
+
+        &:focus {
+          border-color: black;
+        }
       }
     }
   }
diff --git a/client/coral-admin/src/containers/Install/style.css b/client/coral-admin/src/containers/Install/style.css
index 90c62c20e..62f7ffe04 100644
--- a/client/coral-admin/src/containers/Install/style.css
+++ b/client/coral-admin/src/containers/Install/style.css
@@ -2,7 +2,7 @@
   max-width: 900px;
   margin: 0 auto;
   text-align: center;
-  padding: 40px 0;
+  padding: 50px 0;
 
   h2 {
     font-size: 2em;
diff --git a/client/coral-ui/components/Option.css b/client/coral-ui/components/Option.css
new file mode 100644
index 000000000..54784d8fc
--- /dev/null
+++ b/client/coral-ui/components/Option.css
@@ -0,0 +1,3 @@
+.Option {
+  
+}
diff --git a/client/coral-ui/components/Option.js b/client/coral-ui/components/Option.js
new file mode 100644
index 000000000..d322ef0ef
--- /dev/null
+++ b/client/coral-ui/components/Option.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import {Option as OptionMDL} from 'react-mdl-selectfield';
+import styles from './Option.css';
+
+const Option = props => {
+  const {children, ...attrs} = props;
+  return (
+    <OptionMDL className={styles.Option} {...attrs}>
+      {children}
+    </OptionMDL>
+  );
+};
+
+export default Option;
diff --git a/client/coral-ui/components/Select.css b/client/coral-ui/components/Select.css
new file mode 100644
index 000000000..ac93a843c
--- /dev/null
+++ b/client/coral-ui/components/Select.css
@@ -0,0 +1,33 @@
+.Select {
+  position: relative;
+  width: 100%;
+  height: 40px;
+  background: #2c2c2c;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  color: white;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+
+  > div {
+    padding: 0;
+  }
+
+  i {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+  }
+
+  input {
+    padding: 0;
+    font-size: 13px;
+    letter-spacing: 0.7px;
+    font-weight: 400;
+  }
+
+  &:hover {
+    cursor: pointer;
+   }
+
+}
diff --git a/client/coral-ui/components/Select.js b/client/coral-ui/components/Select.js
new file mode 100644
index 000000000..731c50ddc
--- /dev/null
+++ b/client/coral-ui/components/Select.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import {SelectField} from 'react-mdl-selectfield';
+import styles from './Select.css';
+
+const Select = props => {
+  const {children, ...attrs} = props;
+  return (
+    <SelectField className={styles.Select} {...attrs}>
+      {children}
+    </SelectField>
+  );
+};
+
+export default Select;
diff --git a/client/coral-ui/components/WizardNav.css b/client/coral-ui/components/WizardNav.css
index 90d07af09..001ee8603 100644
--- a/client/coral-ui/components/WizardNav.css
+++ b/client/coral-ui/components/WizardNav.css
@@ -13,7 +13,7 @@
     position: relative;
     padding-left: 40px;
     border-radius: 1px;
-    
+
     &:hover {
       cursor: pointer;
     }
@@ -27,6 +27,10 @@
           border-color: transparent transparent transparent #00796B;
         }
       }
+
+      i {
+        opacity: 1;
+      }
     }
 
     &.active {
@@ -41,6 +45,15 @@
       }
     }
 
+    i {
+      transition: opacity 0.2s ease;
+      opacity: 0;
+      vertical-align: middle;
+      font-size: 16px;
+      margin-top: -5px;
+      margin-left: 8px;
+    }
+
     span {
       padding: 10px 20px;
       margin-right: 10px;
diff --git a/client/coral-ui/components/WizardNav.js b/client/coral-ui/components/WizardNav.js
index b5a8db549..9fd9a1f23 100644
--- a/client/coral-ui/components/WizardNav.js
+++ b/client/coral-ui/components/WizardNav.js
@@ -1,8 +1,9 @@
 import React, {PropTypes} from 'react';
 import styles from './WizardNav.css';
+import Icon from './Icon';
 
 const WizardNav = props => {
-  const {goToStep, currentStep, items} = props;
+  const {goToStep, currentStep, items, icon} = props;
   return (
     <nav className={styles.WizardNav}>
       <ul>
@@ -12,7 +13,9 @@ const WizardNav = props => {
               key={i}
               className={`${currentStep === item.step ? styles.active : ''} ${item.step < currentStep ? styles.done : ''}`}
               onClick={() => goToStep(item.step)}>
-              {item.text}<span/>
+              {item.text}
+              {icon && <Icon name={icon} />}
+              <span/>
             </li>
           ))
         }
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index 17d83c039..3676fd8f1 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -18,3 +18,5 @@ export {default as Success} from './components/Success';
 export {default as Pager} from './components/Pager';
 export {default as Wizard} from './components/Wizard';
 export {default as WizardNav} from './components/WizardNav';
+export {default as Select} from './components/Select';
+export {default as Option} from './components/Option';

From 80241025e55de431c0500bb43812d356ae19b9cb Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 3 Feb 2017 13:43:17 -0300
Subject: [PATCH 07/18] linitin

---
 .../containers/Install/components/Steps/AddOrganizationName.js | 3 +--
 .../src/containers/Install/components/Steps/style.css          | 3 +++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
index ff7125ab5..1e2c75fda 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
+++ b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
@@ -2,8 +2,7 @@ import React from 'react';
 import styles from './style.css';
 import {FormField, Button} from 'coral-ui';
 
-const InitialStep = props => {
-  const {nextStep} = props;
+const InitialStep = () => {
   return (
     <div className={styles.step}>
       <p>
diff --git a/client/coral-admin/src/containers/Install/components/Steps/style.css b/client/coral-admin/src/containers/Install/components/Steps/style.css
index 9dd95f90b..42ea84efb 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/style.css
+++ b/client/coral-admin/src/containers/Install/components/Steps/style.css
@@ -23,12 +23,15 @@
   .form {
     max-width: 300px;
     margin: 30px auto;
+    text-align: left;
 
     form > button {
       margin: 30px 0;
     }
 
     .formField {
+      text-align: left;
+
       label {
         text-align: left;
         display: block;

From f488b0e02d8255b603f6e3ac6076b2a36b131500 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 3 Feb 2017 11:05:46 -0700
Subject: [PATCH 08/18] Added BE for setup

- Adjusted docs
- Fixed issues with process terminating wrong
---
 CONTRIBUTING.md           |  16 ++-
 INSTALL.md                | 121 ++++++++++++-----------
 README.md                 |   3 +-
 bin/cli                   |  26 +++--
 bin/cli-assets            |   2 +-
 bin/cli-jobs              |   2 +-
 bin/cli-serve             |   5 +-
 bin/cli-setup             | 198 ++++++++++++++++++++++++++++----------
 bin/cli-users             |   2 +-
 bin/commander.js          |  14 ++-
 util.js => bin/util.js    |   0
 docker-compose.yml        |  25 +++++
 errors.js                 |  16 ++-
 routes/api/setup/index.js |  59 ++++++++++++
 routes/api/users/index.js |  28 +-----
 services/setup.js         |  67 +++++++++++++
 services/users.js         |  56 +++++++----
 17 files changed, 454 insertions(+), 186 deletions(-)
 rename util.js => bin/util.js (100%)
 create mode 100644 docker-compose.yml
 create mode 100644 routes/api/setup/index.js
 create mode 100644 services/setup.js

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 66ae8ade8..72c75ce27 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,9 +1,10 @@
 # Contributor's Guide
 
-Welcome! We are very excited that you are interested in contributing to Talk. 
+Welcome! We are very excited that you are interested in contributing to Talk.
 
 This document is a companion to help you approach contributing. If it does not do so, please [let us know how we can improve it](https://github.com/coralproject/talk/issues)!
 
+By contributing to this project you agree to the [Code of Conduct](https://coralproject.net/code-of-conduct.html).
 
 ## Product Roadmap
 
@@ -13,7 +14,7 @@ You can view product ideas and our longer term roadmap here https://trello.com/b
 
 
 ## Contribute to the documentation
-Clear docs are a prerequisite for a successful open source project. We value non-code and code contributions equally. 
+Clear docs are a prerequisite for a successful open source project. We value non-code and code contributions equally.
 
 We are looking for _documentarians_ to:
 
@@ -40,7 +41,7 @@ Talk is designed to integrate into existing environments in a variety of ways:
 
 If you're considering deploying Talk, [please let us know](https://github.com/coralproject/talk/wiki/Contact-Us)! We are quite literally doing this for you and want to help you succeed any way we can.
 
-If you are writing custom integration code in your fork of Talk, please consider keeping it generic and filing a Pull Request to contribute it back to the project! See our [forking and merging guidelines](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging) for more info. 
+If you are writing custom integration code in your fork of Talk, please consider keeping it generic and filing a Pull Request to contribute it back to the project! See our [forking and merging guidelines](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging) for more info.
 
 ## Write some code
 
@@ -48,9 +49,9 @@ First, [set up a dev environment](https://github.com/coralproject/talk/blob/mast
 
 ### Build a New Feature / Plugin
 
-Talk is beginning life as a Commenting Platform, but is architected to support many varieties of community engagement. 
+Talk is beginning life as a Commenting Platform, but is architected to support many varieties of community engagement.
 
-Please [contact us](https://github.com/coralproject/talk/wiki/Contact-Us) early and often if you'd like to help. We would love to hear your ideas for features and plugins and help you find a way to productively engage the project. 
+Please [contact us](https://github.com/coralproject/talk/wiki/Contact-Us) early and often if you'd like to help. We would love to hear your ideas for features and plugins and help you find a way to productively engage the project.
 
 To get an idea of where the Coral Team is going, see:
 
@@ -66,13 +67,10 @@ Examples:
 
 ### Work on the Core
 
-There is always more work to be done to make an application more stable, scaleable and secure. 
+There is always more work to be done to make an application more stable, scaleable and secure.
 
 If you see issues in the code or have ideas on how we may improve Talk, please consider:
 
 * [contributing a fix](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging),
 * [filing an issue](https://github.com/coralproject/talk/issues), or
 * or otherwise [letting us know](https://github.com/coralproject/talk/wiki/Contact-Us).
-
-
-
diff --git a/INSTALL.md b/INSTALL.md
index f5f82f294..008c4cba3 100644
--- a/INSTALL.md
+++ b/INSTALL.md
@@ -1,95 +1,94 @@
-# Installing a dev environment
-
-By contributing to this project you agree to the [Code of Conduct](https://coralproject.net/code-of-conduct.html).
+# Installation
 
 ## Requirements
 
 ### System
 
-- Any flavor of Linux, OSX or Windows
+- Any flavour of Linux, OSX or Windows
 - 1GB memory (minimum)
 - 5GB storage (minimum)
 
-### Software
+## Installation From Source
 
-* [Node](https://nodejs.org/es/download/package-manager) v7 or later
-* Mongo v3.2 or later
-* Redis v3.2 or later 
+### Requirements
+
+There are some runtime requirements for running Talk from source:
+
+- [Node](https://nodejs.org/) v7 or later
+- [MongoDB](https://www.mongodb.com/) v3.2 or later
+- [Redis](https://redis.io/) v3.2 or later
+- [Yarn](https://yarnpkg.com/) v0.19.1 or later
 
 _Please be sure to check the versions of these requirements. Insufficient versions of these may lead to unexpected errors!_
 
-## First time setup
+### Installing
 
-### Installation
+```bash
+# Download the tarball containing the repository
+curl -L https://github.com/coralproject/talk/tarball/master -o coralproject-talk.tar.gz
 
-Navigate to a directory.
+# Untar that file and change to that directory
+tar xpf coralproject-talk.tar.gz
+mv coralproject-talk-* coralproject-talk
+cd coralproject-talk
 
-```
-git clone https://github.com/coralproject/talk
-cd talk
-yarn install
-```
+# Install package dependancies
+yarn
 
-### Environmental Variables
-
-Talk uses environmental variables for configuration. You can learn about them in the [README file](README.md).
-
-
-## Workflows
-
-### The server
-
-Starting the server:
-
-```
-yarn start
-```
-
-Browse to `http://localhost:3000` (or your custom port.)
-
-### Building the front end
-
-Our build process will build all front end components registered [here](https://github.com/coralproject/talk/blob/6052cac1d3494f8060325a88bb2ce03c88c2f94c/webpack.config.dev.js#L9-L15).
-
-One time build:
-
-```
+# Build static files
 yarn build
 ```
 
-Build, then rebuild when a file is updated (development build):
+### Running
 
-```
-yarn build-watch
+Refer to the `README.md` file for required configuration variables to add to the
+environment.
+
+You can start the server after configuring the server using the command:
+
+```bash
+yarn start
 ```
 
+You can see other scripts we've made available by consulting the `package.json`
+file under the `scripts` key including:
 
-### Testing
+- `yarn test` run unit tests
+- `yarn e2e` run end to end tests
+- `yarn build-watch` watch for changes to client files and build static assets
+- `yarn dev-start` watch for changes to server files and reload the server
 
-Run all tests once:
+## Installation From Docker Hub
 
-`
-yarn test
-`
+### Requirements
 
-Run our end to end tests (will install Selenium and nightwatch):
+There are some runtime requirements for running Talk for Docker:
 
-`
-yarn e2e
-`
+- [MongoDB](https://www.mongodb.com/) v3.2 or later
+- [Redis](https://redis.io/) v3.2 or later
+- [Docker](https://www.docker.com/) v1.13.0 or later
+- [Docker Compose](https://docs.docker.com/compose/) v1.10.0 or later
 
-_Please ensure all tests are passing before submitting a PR!_
+_Please be sure to check the versions of these requirements. Insufficient versions of these may lead to unexpected errors!_
 
-## Troubleshooting
+### Installing
 
+```bash
+# Create a directory for talk
+mkdir coralproject-talk
+cd coralproject-talk
 
-##### Can't ping the redis server!
+# Download the docker-compose.yml file from the repository
+curl -LO https://raw.githubusercontent.com/coralproject/talk/master/docker-compose.yml
+```
 
-- Check that Redis Server is running.
-- Check that TALK_REDIS_URL is set.
-
-##### Authenticaiton doesn't work!
-
-- Make sure Redis is the correct version. 
+At this stage, you should refer to the `README.md` file for required
+configuration variables to add to the environment key for the `talk` service
+listed in the `docker-compose.yml` file.
 
+### Running
 
+```bash
+# Start the services using compose
+docker-compose up -d
+```
diff --git a/README.md b/README.md
index 79c523925..6c3f90997 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ See our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CO
 
 To set up a development environment or build from source, see [INSTALL.md](https://github.com/coralproject/talk/blob/master/INSTALL.md).
 
-To launch a Talk server of your own from your browser without any need to muck about in a terminal or think about engineering concepts, stay tuned. We will launch [our installer](https://github.com/coralproject/talk-install) shortly!!
+To launch a Talk server of your own from your browser without any need to muck about in a terminal or think about engineering concepts, stay tuned. We will launch [our installer](https://github.com/coralproject/talk-install) shortly!
 
 
 ### Configuration
@@ -37,6 +37,7 @@ Facebook Login enabled app.
 - `TALK_SMTP_PASSWORD` (*required for email*) - password for the SMTP provider you are using.
 - `TALK_SMTP_HOST` (*required for email*) - SMTP host url with format `smtp.domain.com`.
 - `TALK_SMTP_PORT` (*required for email*) - SMTP port.
+- `TALK_INSTALL_LOCK` (_optional for dynamic setup_) - Defaults to `FALSE`. When `TRUE`, disables the dynamic setup endpoint.
 
 Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
 alternative methods of loading configuration during development.
diff --git a/bin/cli b/bin/cli
index 5b52d96b9..c0690e455 100755
--- a/bin/cli
+++ b/bin/cli
@@ -4,7 +4,7 @@
  * Module dependencies.
  */
 
-const util = require('../util');
+// const util = require('./util');
 const program = require('./commander');
 
 program
@@ -15,18 +15,14 @@ program
   .command('users', 'work with the application auth')
   .parse(process.argv);
 
-// If there is no command listed, output help.
-if (!process.argv.slice(2).length) {
-  program.outputHelp();
-  return;
-}
-
-// The ensures that the child process that is created here is always cleaned up
-// properly when the parent process dies.
-util.onshutdown([
-  (signal) => {
-    if ((program.runningCommand.killed === false) && (program.runningCommand.exitCode === null)) {
-      program.runningCommand.kill(signal);
-    }
+/**
+ * When this provess exists, check to see if we have a running command, if we do
+ * check to see if it is still running. If it is, then kill it with a SIGINT
+ * signal. This is for the use case where we want to kill the process that is
+ * labled with the PID written out by the parent process.
+ */
+process.once('exit', () => {
+  if ((program.runningCommand.killed === false) && (program.runningCommand.exitCode === null)) {
+    program.runningCommand.kill('SIGINT');
   }
-]);
+});
diff --git a/bin/cli-assets b/bin/cli-assets
index 76ca5735b..166152baf 100755
--- a/bin/cli-assets
+++ b/bin/cli-assets
@@ -10,7 +10,7 @@ const Table = require('cli-table');
 const AssetModel = require('../models/asset');
 const mongoose = require('../services/mongoose');
 const scraper = require('../services/scraper');
-const util = require('../util');
+const util = require('./util');
 
 // Register the shutdown criteria.
 util.onshutdown([
diff --git a/bin/cli-jobs b/bin/cli-jobs
index 4d348fabb..f22e1068b 100755
--- a/bin/cli-jobs
+++ b/bin/cli-jobs
@@ -7,7 +7,7 @@
 const program = require('./commander');
 const scraper = require('../services/scraper');
 const mailer = require('../services/mailer');
-const util = require('../util');
+const util = require('./util');
 const mongoose = require('../services/mongoose');
 const kue = require('../services/kue');
 
diff --git a/bin/cli-serve b/bin/cli-serve
index 0427dcf34..08b451904 100755
--- a/bin/cli-serve
+++ b/bin/cli-serve
@@ -2,13 +2,12 @@
 
 const app = require('../app');
 const program = require('./commander');
-const debug = require('debug')('talk:server');
 const http = require('http');
 const scraper = require('../services/scraper');
 const mailer = require('../services/mailer');
 const kue = require('../services/kue');
 const mongoose = require('../services/mongoose');
-const util = require('../util');
+const util = require('./util');
 
 /**
 * Get port from environment and store in Express.
@@ -79,7 +78,7 @@ function onListening() {
   let bind = typeof addr === 'string'
     ? `pipe ${  addr}`
     : `port ${  addr.port}`;
-  debug(`Listening on ${  bind}`);
+  console.log(`Listening on ${  bind}`);
 }
 
 /**
diff --git a/bin/cli-setup b/bin/cli-setup
index eaa2b90b1..7f0d40085 100755
--- a/bin/cli-setup
+++ b/bin/cli-setup
@@ -9,7 +9,10 @@ const inquirer = require('inquirer');
 const mongoose = require('../services/mongoose');
 const SettingModel = require('../models/setting');
 const SettingsService = require('../services/settings');
-const util = require('../util');
+const SetupService = require('../services/setup');
+const UsersService = require('../services/users');
+const util = require('./util');
+const errors = require('../errors');
 
 // Register the shutdown criteria.
 util.onshutdown([
@@ -29,60 +32,155 @@ program
 // Setup the application
 //==============================================================================
 
-SettingsService
-  .init()
-  .then((settings) => {
-    if (program.defaults) {
-      return settings.save();
-    }
+const performSetup = () => {
 
-    console.log('We\'ll ask you some questions in order to setup your installation of Talk.\n');
+  if (program.defaults) {
+    return SettingsService.init();
+  }
 
-    return inquirer.prompt([
-      {
-        type: 'input',
-        name: 'organizationName',
-        message: 'Organization Name',
-        default: settings.organizationName,
-        validate: (input) => {
-          if (input && input.length > 0) {
-            return true;
-          }
+  // Get the current settings, we are expecing an error here.
+  return SettingsService
+    .retrieve()
+    .then(() => {
 
-          return 'Organization Name is required.';
-        }
-      },
-      {
-        type: 'list',
-        choices: SettingModel.MODERATION_OPTIONS,
-        name: 'moderation',
-        default: settings.moderation,
-        message: 'Select a moderation mode'
-      },
-      {
-        type: 'confirm',
-        name: 'requireEmailConfirmation',
-        default: settings.requireEmailConfirmation,
-        message: 'Should emails always be confirmed'
+      // We should NOT have gotten a settings object, this means that the
+      // application is already setup. Error out here.
+      throw errors.ErrSettingsInit;
+
+    })
+    .catch((err) => {
+
+      // If the error is `not init`, then we're good, otherwise, it's something
+      // else.
+      if (err !== errors.ErrSettingsNotInit) {
+        throw err;
       }
-    ])
-    .then((answers) => {
 
-      // Update the settings that were changed.
-      Object.keys(answers).forEach((key) => {
-        if (answers[key] !== undefined) {
-          settings[key] = answers[key];
+    })
+    .then(() => {
+
+      // Create the base settings model.
+      let settings = new SettingModel();
+
+      console.log('We\'ll ask you some questions in order to setup your installation of Talk.\n');
+
+      return inquirer.prompt([
+        {
+          type: 'input',
+          name: 'organizationName',
+          message: 'Organization Name',
+          default: settings.organizationName,
+          validate: (input) => {
+            if (input && input.length > 0) {
+              return true;
+            }
+
+            return 'Organization Name is required.';
+          }
+        },
+        {
+          type: 'list',
+          choices: SettingModel.MODERATION_OPTIONS,
+          name: 'moderation',
+          default: settings.moderation,
+          message: 'Select a moderation mode'
+        },
+        {
+          type: 'confirm',
+          name: 'requireEmailConfirmation',
+          default: settings.requireEmailConfirmation,
+          message: 'Should emails always be confirmed'
         }
-      });
+      ])
+      .then((answers) => {
 
-      return settings.save();
+        // Update the settings that were changed.
+        Object.keys(answers).forEach((key) => {
+          if (answers[key] !== undefined) {
+            settings[key] = answers[key];
+          }
+        });
+
+        console.log('\nWe\'ll ask you some questions about your first admin user.\n');
+
+        return inquirer.prompt([
+          {
+            type: 'input',
+            name: 'displayName',
+            message: 'Display Name',
+            filter: (displayName) => {
+              return UsersService
+                .isValidDisplayName(displayName, false)
+                .catch((err) => {
+                  throw err.message;
+                });
+            }
+          },
+          {
+            name: 'email',
+            message: 'Email',
+            format: 'email',
+            validate: (value) => {
+              if (value && value.length >= 3) {
+                return true;
+              }
+
+              return 'Email is required';
+            }
+          },
+          {
+            name: 'password',
+            message: 'Password',
+            type: 'password',
+            filter: (password) => {
+              return UsersService
+                .isValidPassword(password)
+                .catch((err) => {
+                  throw err.message;
+                });
+            }
+          },
+          {
+            name: 'confirmPassword',
+            message: 'Confirm Password',
+            type: 'password',
+            filter: (confirmPassword) => {
+              return UsersService
+                .isValidPassword(confirmPassword)
+                .catch((err) => {
+                  throw err.message;
+                });
+            }
+          },
+        ]);
+      })
+      .then((user) => {
+
+        if (user.password !== user.confirmPassword) {
+          return Promise.reject(new Error('Passwords do not match'));
+        }
+
+        return SetupService.setup({
+          settings: settings.toObject(),
+          user: {
+            email: user.email,
+            displayName: user.displayName,
+            password: user.password
+          }
+        });
+      });
+    })
+    .then(({user}) => {
+      console.log('Settings created.');
+      console.log(`User ${user.id} created.`);
+      console.log('\nTalk is now installed!');
+      util.shutdown();
+    })
+    .catch((err) => {
+      console.error(err);
+      util.shutdown(1);
     });
-  })
-  .then(() => {
-    console.log('Talk is now installed!');
-    util.shutdown();
-  })
-  .catch((err) => {
-    console.error(err);
-    util.shutdown(1);
-  });
+};
+
+// Start tthe setup process.
+performSetup();
diff --git a/bin/cli-users b/bin/cli-users
index 072a143ee..01f46ad2e 100755
--- a/bin/cli-users
+++ b/bin/cli-users
@@ -9,7 +9,7 @@ const inquirer = require('inquirer');
 const UsersService = require('../services/users');
 const UserModel = require('../models/user');
 const mongoose = require('../services/mongoose');
-const util = require('../util');
+const util = require('./util');
 const Table = require('cli-table');
 
 const validateRequired = (msg = 'Field is required', len = 1) => (input) => {
diff --git a/bin/commander.js b/bin/commander.js
index 2a3d1e363..ad346a911 100644
--- a/bin/commander.js
+++ b/bin/commander.js
@@ -2,7 +2,6 @@ const pkg = require('../package.json');
 const dotenv = require('dotenv');
 const fs = require('fs');
 const program = require('commander');
-const util = require('../util');
 
 // Perform rewrites to the runtime environment variables based on the contents
 // of the process.env.REWRITE_ENV if it exists. This is done here as it is the
@@ -27,6 +26,10 @@ const parseArgs = require('minimist')(process.argv.slice(2), {
   }
 });
 
+/**
+ * If the config flag is present, then we have to load the configuration from
+ * the file specified. We will then load those values into the environment.
+ */
 if (parseArgs.config) {
   let envConfig = dotenv.parse(fs.readFileSync(parseArgs.config, {encoding: 'utf8'}));
 
@@ -35,8 +38,15 @@ if (parseArgs.config) {
   });
 }
 
-// If the `--pid` flag is used, put the current pid there.
+/**
+ * If the pid flag is present, then we have to create a pid file at the location
+ * specified.
+ */
 if (parseArgs.pid) {
+  const util = require('./util');
+
+  console.log('Wrote PID');
+
   util.pid(parseArgs.pid);
 }
 
diff --git a/util.js b/bin/util.js
similarity index 100%
rename from util.js
rename to bin/util.js
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 000000000..76c28d20f
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,25 @@
+version: '2'
+services:
+  talk:
+    image: coralproject/talk:latest
+    restart: always
+    ports:
+      - "5000:5000"
+    depends_on:
+      - mongo
+      - redis
+  mongo:
+    image: mongo:3.2
+    restart: always
+    volumes:
+      - mongo:/data/db
+  redis:
+    image: redis:3.2
+    restart: always
+    volumes:
+      - redis:/data
+volumes:
+  mongo:
+    external: false
+  redis:
+    external: false
diff --git a/errors.js b/errors.js
index 08a5c3ae2..7ee932c96 100644
--- a/errors.js
+++ b/errors.js
@@ -128,6 +128,18 @@ const ErrNotAuthorized = new APIError('not authorized', {
 // initialized.
 const ErrSettingsNotInit = new Error('settings not initialized, run `./bin/cli setup` to setup the application first');
 
+// ErrSettingsInit is returned when the setup endpoint is hit and we are already
+// initialized.
+const ErrSettingsInit = new APIError('settings are already initialized', {
+  status: 500
+});
+
+// ErrInstallLock is returned when the setup endpoint is hit and the install
+// lock is present.
+const ErrInstallLock = new APIError('install lock active', {
+  status: 500
+});
+
 module.exports = {
   ExtendableError,
   APIError,
@@ -145,5 +157,7 @@ module.exports = {
   ErrNotFound,
   ErrInvalidAssetURL,
   ErrAuthentication,
-  ErrNotAuthorized
+  ErrNotAuthorized,
+  ErrSettingsInit,
+  ErrInstallLock
 };
diff --git a/routes/api/setup/index.js b/routes/api/setup/index.js
new file mode 100644
index 000000000..f8acd3d76
--- /dev/null
+++ b/routes/api/setup/index.js
@@ -0,0 +1,59 @@
+const express = require('express');
+
+const errors = require('../../../errors');
+
+const SetupService = require('../../../services/setup');
+const SettingsService = require('../../../services/settings');
+
+const router = express.Router();
+
+router.post('/', (req, res, next) => {
+
+  // Check if we have an install lock present.
+  if (process.env.TALK_INSTALL_LOCK === 'TRUE') {
+    return next(errors.ErrInstallLock);
+  }
+
+  // Get the current settings, we are expecing an error here.
+  SettingsService
+    .retrieve()
+    .then(() => {
+
+      // We should NOT have gotten a settings object, this means that the
+      // application is already setup. Error out here.
+      return next(errors.ErrSettingsInit);
+
+    })
+    .catch((err) => {
+
+      // If the error is `not init`, then we're good, otherwise, it's something
+      // else.
+      if (err !== errors.ErrSettingsNotInit) {
+        return next(err);
+      }
+
+      // Allow the request to keep going here.
+      return next();
+    });
+
+}, (req, res, next) => {
+
+  const {
+    settings,
+    user: {email, password, displayName}
+  } = req.body;
+
+  SetupService
+    .setup({settings, user: {email, password, displayName}})
+    .then(() => {
+
+      // We're setup!
+      res.status(204).end();
+    })
+    .catch((err) => {
+      return next(err);
+    });
+
+});
+
+module.exports = router;
diff --git a/routes/api/users/index.js b/routes/api/users/index.js
index 6da7b9a4b..de6d7f751 100644
--- a/routes/api/users/index.js
+++ b/routes/api/users/index.js
@@ -1,7 +1,6 @@
 const express = require('express');
 const router = express.Router();
 const UsersService = require('../../../services/users');
-const SettingsService = require('../../../services/settings');
 const CommentsService = require('../../../services/comments');
 const mailer = require('../../../services/mailer');
 const errors = require('../../../errors');
@@ -88,12 +87,6 @@ router.post('/:user_id/email', authorization.needed('admin'), (req, res, next) =
     .catch(next);
 });
 
-// /**
-//  * SendEmailConfirmation sends a confirmation email to the user.
-//  * @param {Request} req  express request object
-//  * @param {String} email user email address
-//  */
-
 /**
  * SendEmailConfirmation sends a confirmation email to the user.
  * @param {ExpressApp} app     the instance of the express app
@@ -125,25 +118,14 @@ router.post('/', (req, res, next) => {
     .createLocalUser(email, password, displayName)
     .then((user) => {
 
-      // Get the settings from the database to find out if we need to send an
-      // email confirmation. The Front end will know about the
+      // Send an email confirmation. The Front end will know about the
       // requireEmailConfirmation as it's included in the settings get endpoint.
-      return SettingsService.retrieve().then(({requireEmailConfirmation = false}) => {
+      return SendEmailConfirmation(req.app, user.id, email, redirectUri)
+        .then(() => {
 
-        if (requireEmailConfirmation) {
-
-          SendEmailConfirmation(req.app, user.id, email, redirectUri)
-            .then(() => {
-
-              // Then send back the user.
-              res.status(201).json(user);
-            });
-        } else {
-
-          // We don't need to confirm the email, let's just send back the user!
+          // Then send back the user.
           res.status(201).json(user);
-        }
-      });
+        });
     })
     .catch(err => {
       next(err);
diff --git a/services/setup.js b/services/setup.js
new file mode 100644
index 000000000..449de1a0d
--- /dev/null
+++ b/services/setup.js
@@ -0,0 +1,67 @@
+const UsersService = require('./users');
+const SettingsService = require('./settings');
+const SettingsModel = require('../models/setting');
+const errors = require('../errors');
+
+/**
+ * This service is used when we want to setup the application. It is consumed by
+ * the dynamic setup endpoint and by the cli-setup tool.
+ */
+module.exports = class SetupService {
+
+  /**
+   * This verifies that the current input for the setup is valid.
+   */
+  static validate({settings, user: {email, displayName, password}}) {
+
+    // Verify the email address of the user.
+    if (!email) {
+      return Promise.reject(errors.ErrMissingEmail);
+    }
+
+    // Create a settings model to use for validation.
+    let settingsModel = new SettingsModel(settings);
+
+    // Verify other properties of the user.
+    return Promise.all([
+      UsersService.isValidDisplayName(displayName, false),
+      UsersService.isValidPassword(password),
+      settingsModel.validate()
+    ]);
+  }
+
+  /**
+   * This will perform the setup.
+   */
+  static setup({settings, user: {email, password, displayName}}) {
+
+    // Validate the settings first.
+    return SetupService
+      .validate({settings, user: {email, password, displayName}})
+      .then(() => {
+        return SettingsService.update(settings);
+      })
+      .then((settings) => {
+
+        // Settings are created! Create the user.
+
+        // Create the user.
+        return UsersService
+          .createLocalUser(email, password, displayName)
+
+          // Grant them administrative privileges and confirm the email account.
+          .then((user) => {
+
+            return Promise.all([
+              UsersService.addRoleToUser(user.id, 'ADMIN'),
+              UsersService.confirmEmail(user.id, email)
+            ])
+            .then(() => ({
+              settings,
+              user
+            }));
+          });
+      });
+  }
+
+};
diff --git a/services/users.js b/services/users.js
index 70472bea7..d06b68605 100644
--- a/services/users.js
+++ b/services/users.js
@@ -170,10 +170,11 @@ module.exports = class UsersService {
 
   /**
    * Check the requested displayname for naughty words (currently in English) and special chars
-   * @param  {String}   displayName word to be checked for profanity
+   * @param  {String}   displayName           word to be checked for profanity
+   * @param  {Boolean}  checkAgainstWordlist  enables cheching against the wordlist
    * @return {Promise}  rejected if the machine's sensibilites are offended
    */
-  static isValidDisplayName(displayName) {
+  static isValidDisplayName(displayName, checkAgainstWordlist = true) {
     const onlyLettersNumbersUnderscore = /^[A-Za-z0-9_]+$/;
 
     if (!displayName) {
@@ -185,10 +186,19 @@ module.exports = class UsersService {
       return Promise.reject(errors.ErrSpecialChars);
     }
 
-    // check for profanity
-    return Wordlist.displayNameCheck(displayName);
+    if (checkAgainstWordlist) {
+
+      // check for profanity
+      return Wordlist.displayNameCheck(displayName);
+    }
+
+    // No errors found!
+    return Promise.resolve(displayName);
   }
 
+  /**
+   * Performs validations for the password.
+   */
   static isValidPassword(password) {
     if (!password) {
       return Promise.reject(errors.ErrMissingPassword);
@@ -447,6 +457,8 @@ module.exports = class UsersService {
       .verifyToken(token, {
         subject: PASSWORD_RESET_JWT_SUBJECT
       })
+
+      // TODO: add search by __v as well
       .then((decoded) => UsersService.findById(decoded.userId));
   }
 
@@ -598,25 +610,33 @@ module.exports = class UsersService {
         subject: EMAIL_CONFIRM_JWT_SUBJECT
       })
       .then(({userID, email, referer}) => {
-        return UserModel
-          .update({
-            id: userID,
-            profiles: {
-              $elemMatch: {
-                id: email,
-                provider: 'local'
-              }
-            }
-          }, {
-            $set: {
-              'profiles.$.metadata.confirmed_at': new Date()
-            }
-          })
+        return UsersService
+          .confirmEmail(userID, email)
           .then(() => ({userID, email, referer}));
       });
 
   }
 
+  /**
+   * Marks the email on the user as confirmed.
+   */
+  static confirmEmail(id, email) {
+    return UserModel
+      .update({
+        id: id,
+        profiles: {
+          $elemMatch: {
+            id: email,
+            provider: 'local'
+          }
+        }
+      }, {
+        $set: {
+          'profiles.$.metadata.confirmed_at': new Date()
+        }
+      });
+  }
+
   /**
    * Returns all users with pending 'ADMIN'ation actions.
    * @return {Promise}

From fb8450c7ff6521332f1fe9040a86f2cd989f795b Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 3 Feb 2017 11:22:35 -0700
Subject: [PATCH 09/18] Fixed issues with default setup

---
 bin/cli-setup | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/bin/cli-setup b/bin/cli-setup
index 7f0d40085..185b04f01 100755
--- a/bin/cli-setup
+++ b/bin/cli-setup
@@ -35,7 +35,17 @@ program
 const performSetup = () => {
 
   if (program.defaults) {
-    return SettingsService.init();
+    return SettingsService
+      .init()
+      .then(() => {
+        console.log('Settings created.');
+        console.log('\nTalk is now installed!');
+        util.shutdown();
+      })
+      .catch((err) => {
+        console.error(err);
+        util.shutdown(1);
+      });
   }
 
   // Get the current settings, we are expecing an error here.

From 16f93a0a19a6568976faf9ae78a765b938929d34 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 6 Feb 2017 22:41:21 -0300
Subject: [PATCH 10/18] Validaiton

---
 client/coral-admin/src/actions/install.js     | 64 +++++++++++++++++++
 client/coral-admin/src/constants/install.js   |  8 +++
 .../containers/Install/InstallContainer.js    | 42 ++++++------
 .../components/Steps/AddOrganizationName.js   | 14 ++--
 .../components/Steps/CreateYourAccount.js     | 22 +++++--
 .../src/containers/Install/index.js           |  0
 client/coral-admin/src/reducers/install.js    | 34 +++++++++-
 client/coral-framework/helpers/error.js       |  3 +-
 client/coral-framework/helpers/validate.js    |  3 +-
 client/coral-framework/translations.json      |  2 +
 client/coral-ui/components/Button.css         |  6 ++
 client/coral-ui/components/Wizard.js          |  6 +-
 12 files changed, 163 insertions(+), 41 deletions(-)
 delete mode 100644 client/coral-admin/src/containers/Install/index.js

diff --git a/client/coral-admin/src/actions/install.js b/client/coral-admin/src/actions/install.js
index abaaeceb7..3bb81a1c0 100644
--- a/client/coral-admin/src/actions/install.js
+++ b/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
+});
diff --git a/client/coral-admin/src/constants/install.js b/client/coral-admin/src/constants/install.js
index d33ec4657..08558e2f2 100644
--- a/client/coral-admin/src/constants/install.js
+++ b/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';
diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js
index 350e60709..c9d81fe64 100644
--- a/client/coral-admin/src/containers/Install/InstallContainer.js
+++ b/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);
diff --git a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
index 1e2c75fda..c7edce628 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
+++ b/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;
diff --git a/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js b/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js
index f245218d8..d0b6cbf1f 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js
+++ b/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>
diff --git a/client/coral-admin/src/containers/Install/index.js b/client/coral-admin/src/containers/Install/index.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/client/coral-admin/src/reducers/install.js b/client/coral-admin/src/reducers/install.js
index d97c7f236..6f98b2296 100644
--- a/client/coral-admin/src/reducers/install.js
+++ b/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;
   }
diff --git a/client/coral-framework/helpers/error.js b/client/coral-framework/helpers/error.js
index 34ba253ba..882486f6a 100644
--- a/client/coral-framework/helpers/error.js
+++ b/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'),
 };
diff --git a/client/coral-framework/helpers/validate.js b/client/coral-framework/helpers/validate.js
index b267fb7c0..639b513b4 100644
--- a/client/coral-framework/helpers/validate.js
+++ b/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)
 };
diff --git a/client/coral-framework/translations.json b/client/coral-framework/translations.json
index 07b719f6b..1d0cc19c2 100644
--- a/client/coral-framework/translations.json
+++ b/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",
diff --git a/client/coral-ui/components/Button.css b/client/coral-ui/components/Button.css
index ece3779d6..4cdd7ef74 100644
--- a/client/coral-ui/components/Button.css
+++ b/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 {
diff --git a/client/coral-ui/components/Wizard.js b/client/coral-ui/components/Wizard.js
index 429bce72c..eefa2a0b1 100644
--- a/client/coral-ui/components/Wizard.js
+++ b/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>

From 77f090fd3cad3473941c07edca4d466cbef7140b Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 6 Feb 2017 23:18:14 -0300
Subject: [PATCH 11/18] Multiple validations

---
 client/coral-admin/src/actions/install.js     | 58 +++++++++++--------
 client/coral-admin/src/constants/install.js   | 11 ++--
 .../containers/Install/InstallContainer.js    |  4 +-
 client/coral-admin/src/reducers/install.js    | 24 +++++---
 4 files changed, 59 insertions(+), 38 deletions(-)

diff --git a/client/coral-admin/src/actions/install.js b/client/coral-admin/src/actions/install.js
index 3bb81a1c0..52ab5233a 100644
--- a/client/coral-admin/src/actions/install.js
+++ b/client/coral-admin/src/actions/install.js
@@ -1,8 +1,7 @@
 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';
+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});
@@ -12,35 +11,46 @@ 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);
+const addError = (name, error) => ({type: actions.ADD_ERROR, name, error});
+const hasError = error => ({type: actions.HAS_ERROR, error});
+const clearErrors = () => ({type: actions.CLEAR_ERRORS});
 
-  if (!(formData.settings != null)) {
-    return console.log('Validation Failed');
+export const submitSettings = () => (dispatch, getState) => {
+  const formData = getState().install.toJS().data.settings;
+
+  if (!(formData != null)) {
+    return dispatch(hasError());
   }
 
-  const empty = Object.keys(formData.settings).filter(name => {
-    console.log(name);
-    return !formData.settings[name].length;
+  // Required Validation
+  const empty = Object.keys(formData).filter(name => {
+    const cond = !formData[name].length;
+
+    // Adding Error
+    dispatch(addError(name, 'Please, fill this field '));
+    return cond;
   });
 
-  console.log(
-    empty
-  );
+  if (empty.length) {
+    return dispatch(hasError('Please fill the form'));
+  }
 
-  // const empty = Object.keys(formData.settings)
-  //   .filter(name => !formData[name].length)
+  // RegExp Validation
+  const validation = Object.keys(formData).filter(name => {
+    const cond = !validate[name](formData[name]);
+    if (cond) {
+      // Adding Error
+      dispatch(addError(name, errorMsj[name]));
+    }
 
-  // console.log(
-  //   empty
-  // )
-  // if (empty.length) {
-  //   console.log('Validation Failed')
-  // }
-    // .filter(name => data[name])
+    return cond;
+  });
 
+  if (validation.length) {
+    return dispatch(hasError('Please check the form'));
+  }
+
+  return dispatch(clearErrors());
 };
 
 export const install = () => dispatch => {
diff --git a/client/coral-admin/src/constants/install.js b/client/coral-admin/src/constants/install.js
index 08558e2f2..06d047adc 100644
--- a/client/coral-admin/src/constants/install.js
+++ b/client/coral-admin/src/constants/install.js
@@ -1,11 +1,12 @@
 export const NEXT_STEP = 'NEXT_STEP';
-export const PREVIOUS_STEP = 'PREVIOUS_STEP';
 export const GO_TO_STEP = 'GO_TO_STEP';
+export const PREVIOUS_STEP = 'PREVIOUS_STEP';
+export const ADD_ERROR = 'ADD_ERROR';
+export const HAS_ERROR = 'HAS_ERROR';
+export const SHOW_ERRORS = 'SHOW_ERRORS';
+export const CLEAR_ERRORS = 'CLEAR_ERRORS';
 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';
+export const UPDATE_FORMDATA_SETTINGS = 'UPDATE_FORMDATA_SETTINGS';
diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js
index c9d81fe64..ca6ac722c 100644
--- a/client/coral-admin/src/containers/Install/InstallContainer.js
+++ b/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, submit} from '../../actions/install';
+import {nextStep, previousStep, goToStep, updateUserFormData, updateSettingsFormData, submitSettings} from '../../actions/install';
 
 import InitialStep from './components/Steps/InitialStep';
 import AddOrganizationName from './components/Steps/AddOrganizationName';
@@ -47,7 +47,7 @@ const mapDispatchToProps = dispatch => ({
   },
   handleSubmit: e => {
     e.preventDefault();
-    dispatch(submit());
+    dispatch(submitSettings());
   }
 });
 
diff --git a/client/coral-admin/src/reducers/install.js b/client/coral-admin/src/reducers/install.js
index 6f98b2296..e64cdff2a 100644
--- a/client/coral-admin/src/reducers/install.js
+++ b/client/coral-admin/src/reducers/install.js
@@ -3,10 +3,20 @@ import {Map} from 'immutable';
 import * as actions from '../constants/install';
 
 const initialState = Map({
-  data: Map(),
-  errors: Map(),
+  data: Map({
+    settings: Map({
+      organizationName: ''
+    }),
+    user: Map({
+      displayName: ''
+    })
+  }),
+  errors: Map({
+    organizationName: ''
+  }),
   showErrors: false,
   hasError: false,
+  error: null,
   step: 0,
   navItems: [{
     text: '1. Add Organization Name',
@@ -35,16 +45,16 @@ export default function install (state = initialState, action) {
   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);
+      .merge({
+        hasError: true,
+        showErrors: true
+      });
   case actions.ADD_ERROR:
     return state
       .setIn(['errors', action.name], action.error);
-  case actions.NO_ERROR:
+  case actions.CLEAR_ERRORS:
     return state
       .set('errors', Map());
   default :

From 3a953c7efe01fe15fdd8ba2b3537d5c623addb73 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 6 Feb 2017 23:23:08 -0300
Subject: [PATCH 12/18] First Step

---
 client/coral-admin/src/actions/install.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/client/coral-admin/src/actions/install.js b/client/coral-admin/src/actions/install.js
index 52ab5233a..bc0c86ce1 100644
--- a/client/coral-admin/src/actions/install.js
+++ b/client/coral-admin/src/actions/install.js
@@ -15,9 +15,7 @@ const addError = (name, error) => ({type: actions.ADD_ERROR, name, error});
 const hasError = error => ({type: actions.HAS_ERROR, error});
 const clearErrors = () => ({type: actions.CLEAR_ERRORS});
 
-export const submitSettings = () => (dispatch, getState) => {
-  const formData = getState().install.toJS().data.settings;
-
+const validation = (formData, dispatch, next) => {
   if (!(formData != null)) {
     return dispatch(hasError());
   }
@@ -50,7 +48,15 @@ export const submitSettings = () => (dispatch, getState) => {
     return dispatch(hasError('Please check the form'));
   }
 
-  return dispatch(clearErrors());
+  dispatch(clearErrors());
+  next();
+};
+
+export const submitSettings = () => (dispatch, getState) => {
+  const formData = getState().install.toJS().data.settings;
+  validation(formData, dispatch, function() {
+    dispatch(nextStep());
+  });
 };
 
 export const install = () => dispatch => {

From e2399268669c194660f2cc6fbd319812cc8b25cb Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 7 Feb 2017 00:07:53 -0300
Subject: [PATCH 13/18] Failure check

---
 client/coral-admin/src/actions/install.js     | 61 ++++++++++---------
 .../containers/Install/InstallContainer.js    |  8 ++-
 .../components/Steps/AddOrganizationName.js   |  4 +-
 .../components/Steps/CreateYourAccount.js     | 33 +++++++---
 .../Install/components/Steps/FinalStep.js     |  7 +--
 .../Install/components/Steps/style.css        |  8 +++
 client/coral-admin/src/reducers/install.js    | 30 ++++++++-
 routes/api/index.js                           |  1 +
 8 files changed, 104 insertions(+), 48 deletions(-)

diff --git a/client/coral-admin/src/actions/install.js b/client/coral-admin/src/actions/install.js
index bc0c86ce1..c7c673105 100644
--- a/client/coral-admin/src/actions/install.js
+++ b/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});
diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js
index ca6ac722c..063e36578 100644
--- a/client/coral-admin/src/containers/Install/InstallContainer.js
+++ b/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());
   }
 });
 
diff --git a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
index c7edce628..0f85bbad4 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
+++ b/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"
diff --git a/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js b/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js
index d0b6cbf1f..91c664c37 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js
+++ b/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>
diff --git a/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js b/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js
index 0b58508a0..5e1e4c77c 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js
+++ b/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>
   );
 };
diff --git a/client/coral-admin/src/containers/Install/components/Steps/style.css b/client/coral-admin/src/containers/Install/components/Steps/style.css
index 42ea84efb..555ebcc4d 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/style.css
+++ b/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;
+}
diff --git a/client/coral-admin/src/reducers/install.js b/client/coral-admin/src/reducers/install.js
index e64cdff2a..8396beead 100644
--- a/client/coral-admin/src/reducers/install.js
+++ b/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;
   }
diff --git a/routes/api/index.js b/routes/api/index.js
index c40c428b4..9913d8ad2 100644
--- a/routes/api/index.js
+++ b/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);

From 526f0145f190e7a2fd24fcffec5fea9deafab273 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 7 Feb 2017 02:06:32 -0300
Subject: [PATCH 14/18] if goTo is not defined

---
 client/coral-admin/src/containers/Install/InstallContainer.js | 4 ++--
 client/coral-ui/components/WizardNav.js                       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js
index 063e36578..869901e3e 100644
--- a/client/coral-admin/src/containers/Install/InstallContainer.js
+++ b/client/coral-admin/src/containers/Install/InstallContainer.js
@@ -11,13 +11,13 @@ import CreateYourAccount from './components/Steps/CreateYourAccount';
 import FinalStep from './components/Steps/FinalStep';
 
 const InstallContainer = props => {
-  const {goToStep, install} = props;
+  const {install} = props;
 
   return (
     <Layout restricted={true}>
       <div className={styles.Install}>
         <h2>Welcome to the Coral Project</h2>
-        { install.step !== 0 ? <WizardNav goToStep={goToStep} items={install.navItems} currentStep={install.step} icon='check'/> : null }
+        { install.step !== 0 ? <WizardNav items={install.navItems} currentStep={install.step} icon='check'/> : null }
         <Wizard currentStep={install.step} {...props}>
           <InitialStep/>
           <AddOrganizationName/>
diff --git a/client/coral-ui/components/WizardNav.js b/client/coral-ui/components/WizardNav.js
index 9fd9a1f23..be3ce07e5 100644
--- a/client/coral-ui/components/WizardNav.js
+++ b/client/coral-ui/components/WizardNav.js
@@ -3,7 +3,7 @@ import styles from './WizardNav.css';
 import Icon from './Icon';
 
 const WizardNav = props => {
-  const {goToStep, currentStep, items, icon} = props;
+  const {goToStep = () => {}, currentStep, items, icon} = props;
   return (
     <nav className={styles.WizardNav}>
       <ul>

From f47638ae07bec0816f02467df3c1eb02a8f7316d Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 7 Feb 2017 09:45:43 -0700
Subject: [PATCH 15/18] Removed provisioning text.

---
 .../src/containers/Install/components/Steps/InitialStep.js      | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
index 51c40d44d..e450882b1 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
+++ b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
@@ -8,8 +8,6 @@ const InitialStep = props => {
     <div className={styles.step}>
       <p>
         The remainder of the Talk installation will take about ten minutes.
-        Once you complete the following three steps, you will have a free
-        installation and provision of Mongo and Redis.
       </p>
       <Button cStyle='green' onClick={nextStep} raised>Get Started</Button>
     </div>

From cdc81c4fc595aa0594e28a6767fac98f1e4d2a02 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 7 Feb 2017 10:02:23 -0700
Subject: [PATCH 16/18] Added new setup endpoint

---
 .../Install/components/Steps/FinalStep.js     |  5 ++-
 client/coral-framework/helpers/validate.js    |  2 +-
 routes/api/setup/index.js                     | 40 ++++++++-----------
 services/setup.js                             | 33 +++++++++++++++
 4 files changed, 53 insertions(+), 27 deletions(-)

diff --git a/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js b/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js
index 5e1e4c77c..04cdafebd 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js
+++ b/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js
@@ -6,8 +6,9 @@ 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.
+        Thanks for installing Talk! We sent an email to verify your email
+        address. While you finish setting the account, you can start engaging
+        with your readers now.
       </p>
       <Button>Launch Talk</Button>
       <Button cStyle='black'>Close this Installer</Button>
diff --git a/client/coral-framework/helpers/validate.js b/client/coral-framework/helpers/validate.js
index 639b513b4..69d81966f 100644
--- a/client/coral-framework/helpers/validate.js
+++ b/client/coral-framework/helpers/validate.js
@@ -3,5 +3,5 @@ export default {
   password: pass => (/^(?=.{8,}).*$/.test(pass)),
   confirmPassword: () => true,
   displayName: displayName => (/^[a-zA-Z0-9_]+$/.test(displayName)),
-  organizationName: org => (/^[a-zA-Z0-9_]+$/).test(org)
+  organizationName: org => (/^[a-zA-Z0-9_ ]+$/).test(org)
 };
diff --git a/routes/api/setup/index.js b/routes/api/setup/index.js
index f8acd3d76..1391d20f2 100644
--- a/routes/api/setup/index.js
+++ b/routes/api/setup/index.js
@@ -1,39 +1,31 @@
 const express = require('express');
 
-const errors = require('../../../errors');
-
 const SetupService = require('../../../services/setup');
-const SettingsService = require('../../../services/settings');
 
 const router = express.Router();
 
+router.get('/available', (req, res, next) => {
+  SetupService
+    .isAvailable()
+    .then(() => {
+      res.json({available: true});
+    })
+    .catch(() => {
+      res.json({available: false});
+    });
+});
+
 router.post('/', (req, res, next) => {
 
-  // Check if we have an install lock present.
-  if (process.env.TALK_INSTALL_LOCK === 'TRUE') {
-    return next(errors.ErrInstallLock);
-  }
-
-  // Get the current settings, we are expecing an error here.
-  SettingsService
-    .retrieve()
+  SetupService
+    .isAvailable()
     .then(() => {
 
-      // We should NOT have gotten a settings object, this means that the
-      // application is already setup. Error out here.
-      return next(errors.ErrSettingsInit);
-
+      // Allow the request to keep going here.
+      next();
     })
     .catch((err) => {
-
-      // If the error is `not init`, then we're good, otherwise, it's something
-      // else.
-      if (err !== errors.ErrSettingsNotInit) {
-        return next(err);
-      }
-
-      // Allow the request to keep going here.
-      return next();
+      next(err);
     });
 
 }, (req, res, next) => {
diff --git a/services/setup.js b/services/setup.js
index 449de1a0d..74ef1d431 100644
--- a/services/setup.js
+++ b/services/setup.js
@@ -9,6 +9,39 @@ const errors = require('../errors');
  */
 module.exports = class SetupService {
 
+  /**
+   * This returns a promise which resolves if the setup is available.
+   */
+  static isAvailable() {
+
+    // Check if we have an install lock present.
+    if (process.env.TALK_INSTALL_LOCK === 'TRUE') {
+      return Promise.reject(errors.ErrInstallLock);
+    }
+
+    // Get the current settings, we are expecing an error here.
+    return SettingsService
+      .retrieve()
+      .then(() => {
+
+        // We should NOT have gotten a settings object, this means that the
+        // application is already setup. Error out here.
+        return Promise.reject(errors.ErrSettingsInit);
+
+      })
+      .catch((err) => {
+
+        // If the error is `not init`, then we're good, otherwise, it's something
+        // else.
+        if (err !== errors.ErrSettingsNotInit) {
+          return Promise.reject(err);
+        }
+
+        // Allow the request to keep going here.
+        return;
+      });
+  }
+
   /**
    * This verifies that the current input for the setup is valid.
    */

From a3e1bd972c571099bfb8ece55bad5e82b95396ff Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 7 Feb 2017 17:44:27 -0300
Subject: [PATCH 17/18] Redirect if its initialized, funtionallity of finalStep

---
 client/coral-admin/src/actions/install.js     | 21 +++++-
 client/coral-admin/src/constants/install.js   |  4 ++
 .../containers/Install/InstallContainer.js    | 68 ++++++++++++++-----
 .../Install/components/Steps/FinalStep.js     |  7 +-
 .../Install/components/Steps/InitialStep.js   |  2 +
 .../Install/components/Steps/style.css        | 11 +++
 client/coral-admin/src/reducers/install.js    |  6 +-
 client/coral-ui/components/WizardNav.js       |  1 -
 8 files changed, 96 insertions(+), 24 deletions(-)

diff --git a/client/coral-admin/src/actions/install.js b/client/coral-admin/src/actions/install.js
index c7c673105..dbeb52c8e 100644
--- a/client/coral-admin/src/actions/install.js
+++ b/client/coral-admin/src/actions/install.js
@@ -27,7 +27,7 @@ const validation = (formData, dispatch, next) => {
     if (cond) {
 
       // Adding Error
-      dispatch(addError(name, 'Please, fill this field '));
+      dispatch(addError(name, 'This field is required.'));
     } else {
       dispatch(addError(name, ''));
     }
@@ -88,3 +88,22 @@ export const submitUser = () => (dispatch, getState) => {
 
 export const updateSettingsFormData = (name, value) => ({type: actions.UPDATE_FORMDATA_SETTINGS, name, value});
 export const updateUserFormData = (name, value) => ({type: actions.UPDATE_FORMDATA_USER, name, value});
+
+const checkInstallRequest = () => ({type: actions.CHECK_INSTALL_REQUEST});
+const checkInstallSuccess = installed => ({type: actions.CHECK_INSTALL_SUCCESS, installed});
+const checkInstallFailure = error => ({type: actions.CHECK_INSTALL_FAILURE, error});
+
+export const checkInstall = next => dispatch => {
+  dispatch(checkInstallRequest());
+  coralApi('/setup/available')
+    .then(({available}) => {
+      dispatch(checkInstallSuccess(available));
+      if (!available) {
+        next();
+      }
+    })
+    .catch(error => {
+      console.error(error);
+      dispatch(checkInstallFailure(`${error.message}`));
+    });
+};
diff --git a/client/coral-admin/src/constants/install.js b/client/coral-admin/src/constants/install.js
index 06d047adc..b3fd7e0d0 100644
--- a/client/coral-admin/src/constants/install.js
+++ b/client/coral-admin/src/constants/install.js
@@ -10,3 +10,7 @@ export const INSTALL_SUCCESS = 'INSTALL_SUCCESS';
 export const INSTALL_FAILURE = 'INSTALL_FAILURE';
 export const UPDATE_FORMDATA_USER = 'UPDATE_FORMDATA_USER';
 export const UPDATE_FORMDATA_SETTINGS = 'UPDATE_FORMDATA_SETTINGS';
+
+export const CHECK_INSTALL_REQUEST = 'CHECK_INSTALL_REQUEST';
+export const CHECK_INSTALL_SUCCESS = 'CHECK_INSTALL_SUCCESS';
+export const CHECK_INSTALL_FAILURE = 'CHECK_INSTALL_FAILURE';
diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js
index 869901e3e..7a8634180 100644
--- a/client/coral-admin/src/containers/Install/InstallContainer.js
+++ b/client/coral-admin/src/containers/Install/InstallContainer.js
@@ -1,32 +1,63 @@
-import React from 'react';
+import React, {Component} from 'react';
 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, submitUser} from '../../actions/install';
+
+import {
+  nextStep,
+  previousStep,
+  goToStep,
+  updateUserFormData,
+  updateSettingsFormData,
+  submitSettings,
+  submitUser,
+  checkInstall
+} from '../../actions/install';
 
 import InitialStep from './components/Steps/InitialStep';
 import AddOrganizationName from './components/Steps/AddOrganizationName';
 import CreateYourAccount from './components/Steps/CreateYourAccount';
 import FinalStep from './components/Steps/FinalStep';
 
-const InstallContainer = props => {
-  const {install} = props;
+class InstallContainer extends Component {
+  componentDidMount() {
+    const {checkInstall} = this.props;
+    checkInstall(() => {
+      this.context.router.push('/admin');
+    });
+  }
 
-  return (
-    <Layout restricted={true}>
-      <div className={styles.Install}>
-        <h2>Welcome to the Coral Project</h2>
-        { install.step !== 0 ? <WizardNav items={install.navItems} currentStep={install.step} icon='check'/> : null }
-        <Wizard currentStep={install.step} {...props}>
-          <InitialStep/>
-          <AddOrganizationName/>
-          <CreateYourAccount/>
-          <FinalStep/>
-        </Wizard>
-      </div>
-    </Layout>
-  );
+  render() {
+    const {install} = this.props;
+
+    return (
+      <Layout restricted={true}>
+        <div className={styles.Install}>
+          {
+            !install.alreadyInstalled ? (
+              <div>
+                <h2>Welcome to the Coral Project</h2>
+                { install.step !== 0 ? <WizardNav items={install.navItems} currentStep={install.step} icon='check'/> : null }
+                <Wizard currentStep={install.step} {...this.props}>
+                  <InitialStep/>
+                  <AddOrganizationName/>
+                  <CreateYourAccount/>
+                  <FinalStep/>
+                </Wizard>
+              </div>
+            ) : (
+              <div>Talk is already installed</div>
+            )
+          }
+        </div>
+      </Layout>
+    );
+  }
+}
+
+InstallContainer.contextTypes = {
+  router: React.PropTypes.object
 };
 
 const mapStateToProps = state => ({
@@ -34,6 +65,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
+  checkInstall: next => dispatch(checkInstall(next)),
   nextStep: () => dispatch(nextStep()),
   previousStep: () => dispatch(previousStep()),
   goToStep: step => dispatch(goToStep(step)),
diff --git a/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js b/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js
index 04cdafebd..e549ebe63 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js
+++ b/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js
@@ -1,17 +1,18 @@
 import React from 'react';
 import styles from './style.css';
 import {Button} from 'coral-ui';
+import {Link} from 'react-router';
 
 const InitialStep = () => {
   return (
-    <div className={styles.step}>
+    <div className={`${styles.step} ${styles.finalStep}`}>
       <p>
         Thanks for installing Talk! We sent an email to verify your email
         address. While you finish setting the account, you can start engaging
         with your readers now.
       </p>
-      <Button>Launch Talk</Button>
-      <Button cStyle='black'>Close this Installer</Button>
+      <Button raised><Link to='/admin'>Launch Talk</Link></Button>
+      <Button cStyle='black' raised><a href="http://coralproject.net">Close this Installer</a></Button>
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
index e450882b1..9f9770fe9 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
+++ b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
@@ -8,6 +8,8 @@ const InitialStep = props => {
     <div className={styles.step}>
       <p>
         The remainder of the Talk installation will take about ten minutes.
+        Once you complete the following two steps, you will have a free
+        installation and provision of Mongo and Redis.
       </p>
       <Button cStyle='green' onClick={nextStep} raised>Get Started</Button>
     </div>
diff --git a/client/coral-admin/src/containers/Install/components/Steps/style.css b/client/coral-admin/src/containers/Install/components/Steps/style.css
index 555ebcc4d..161c72685 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/style.css
+++ b/client/coral-admin/src/containers/Install/components/Steps/style.css
@@ -18,6 +18,10 @@
 
   > button {
     min-width: 145px;
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
   }
 
   .form {
@@ -57,6 +61,13 @@
   }
 }
 
+.finalStep {
+  button {
+    width: 225px;
+    margin-right: 10px;
+  }
+}
+
 .error {
   background: #FFEBEE;
   color: #B71C1C;
diff --git a/client/coral-admin/src/reducers/install.js b/client/coral-admin/src/reducers/install.js
index 8396beead..be421fe27 100644
--- a/client/coral-admin/src/reducers/install.js
+++ b/client/coral-admin/src/reducers/install.js
@@ -35,7 +35,8 @@ const initialState = Map({
     step: 2
   }],
   installRequest: null,
-  installRequestError: null
+  installRequestError: null,
+  alreadyInstalled: false
 });
 
 export default function install (state = initialState, action) {
@@ -81,6 +82,9 @@ export default function install (state = initialState, action) {
         installRequest: 'FAILURE',
         installRequestError: action.error
       });
+  case actions.CHECK_INSTALL_SUCCESS:
+    return state
+      .set('alreadyInstalled', !action.available);
   default :
     return state;
   }
diff --git a/client/coral-ui/components/WizardNav.js b/client/coral-ui/components/WizardNav.js
index be3ce07e5..84f7d30ac 100644
--- a/client/coral-ui/components/WizardNav.js
+++ b/client/coral-ui/components/WizardNav.js
@@ -25,7 +25,6 @@ const WizardNav = props => {
 };
 
 WizardNav.propTypes = {
-  goToStep: PropTypes.func.isRequired,
   currentStep: PropTypes.number.isRequired
 };
 

From 4e1891c0682118c641ab84f4d56df21e0ad677f9 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 7 Feb 2017 14:30:25 -0700
Subject: [PATCH 18/18] Fixed install state.

---
 client/coral-admin/src/actions/install.js  | 8 ++++----
 client/coral-admin/src/reducers/install.js | 2 +-
 routes/api/setup/index.js                  | 6 +++---
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/coral-admin/src/actions/install.js b/client/coral-admin/src/actions/install.js
index dbeb52c8e..a74a1929f 100644
--- a/client/coral-admin/src/actions/install.js
+++ b/client/coral-admin/src/actions/install.js
@@ -95,10 +95,10 @@ const checkInstallFailure = error => ({type: actions.CHECK_INSTALL_FAILURE, erro
 
 export const checkInstall = next => dispatch => {
   dispatch(checkInstallRequest());
-  coralApi('/setup/available')
-    .then(({available}) => {
-      dispatch(checkInstallSuccess(available));
-      if (!available) {
+  coralApi('/setup')
+    .then(({installed}) => {
+      dispatch(checkInstallSuccess(installed));
+      if (installed) {
         next();
       }
     })
diff --git a/client/coral-admin/src/reducers/install.js b/client/coral-admin/src/reducers/install.js
index be421fe27..a49f76b5e 100644
--- a/client/coral-admin/src/reducers/install.js
+++ b/client/coral-admin/src/reducers/install.js
@@ -84,7 +84,7 @@ export default function install (state = initialState, action) {
       });
   case actions.CHECK_INSTALL_SUCCESS:
     return state
-      .set('alreadyInstalled', !action.available);
+      .set('alreadyInstalled', action.installed);
   default :
     return state;
   }
diff --git a/routes/api/setup/index.js b/routes/api/setup/index.js
index 1391d20f2..60f7d7fd2 100644
--- a/routes/api/setup/index.js
+++ b/routes/api/setup/index.js
@@ -4,14 +4,14 @@ const SetupService = require('../../../services/setup');
 
 const router = express.Router();
 
-router.get('/available', (req, res, next) => {
+router.get('/', (req, res, next) => {
   SetupService
     .isAvailable()
     .then(() => {
-      res.json({available: true});
+      res.json({installed: false});
     })
     .catch(() => {
-      res.json({available: false});
+      res.json({installed: true});
     });
 });