Done Wizard mEnu

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

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

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

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;

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;

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;

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

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: " ";
-    }*/
 
   }
 }

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>