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 (
- Install:
-
- {install.step}
-
-
Previous Step
-
Next Step
+
{install.step}
+
+
+ goToStep(0)}>Add Organization Name
+ goToStep(1)}>Create your account
+ goToStep(2)}>Invite team members
+
+
+
+
+
+
);
};
@@ -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 (
+
+
Welcome to the Coral Project
+
+ Please tell us the name of your organization. This will appear in emails when
+ inviting new team members
+
+
Go back
+
+ );
+};
+
+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 (
+
+
Welcome to the Coral Project
+
+ 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.
+
+
Get Started
+
+ );
+};
+
+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 (
+
+ {React.Children.toArray(children)
+ .filter((child, i) => i === currentStep)
+ .map((child, i) =>
+ React.cloneElement(child, {
+ i,
+ currentStep,
+ nextStep,
+ previousStep,
+ goToStep
+ })
+ )}
+
+ );
+};
+
+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';