Working Install Wizard

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

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';

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);

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;

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;

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

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;

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';