Merge pull request #989 from influxdata/signin-and-setup-in-component-state

Revise onboarding flow

chronograf/ui/src/Setup.tsx

@@ -19,12 +19,11 @@ import {Links} from 'src/types/v2/links'
 
 interface State {
   loading: RemoteDataState
-  isSetupAllowed: boolean
+  isSetupComplete: boolean
 }
 
 interface Props {
   links: Links
-  isSetupComplete: boolean
   children: ReactElement<any>
   notify: (message: Notification | NotificationFunc) => void
 }
@@ -36,27 +35,29 @@ export class Setup extends PureComponent<Props, State> {
 
     this.state = {
       loading: RemoteDataState.NotStarted,
-      isSetupAllowed: false,
+      isSetupComplete: false,
     }
   }
 
   public async componentDidMount() {
     const {links} = this.props
     const isSetupAllowed = await getSetupStatus(links.setup)
-    this.setState({loading: RemoteDataState.Done, isSetupAllowed})
+    this.setState({
+      loading: RemoteDataState.Done,
+      isSetupComplete: !isSetupAllowed,
+    })
   }
 
   public render() {
-    const {isSetupComplete} = this.props
-    const {isSetupAllowed} = this.state
+    const {isSetupComplete} = this.state
     if (this.isLoading) {
       return <div className="page-spinner" />
     }
-    if (isSetupAllowed && !isSetupComplete) {
+    if (!isSetupComplete) {
       return (
         <div className="chronograf-root">
           <Notifications inPresentationMode={true} />
-          <OnboardingWizard />
+          <OnboardingWizard onCompleteSetup={this.handleCompleteSetup} />
         </div>
       )
     } else {
@@ -64,6 +65,10 @@ export class Setup extends PureComponent<Props, State> {
     }
   }
 
+  public handleCompleteSetup = () => {
+    this.setState({isSetupComplete: true})
+  }
+
   private get isLoading(): boolean {
     const {loading} = this.state
     return (
@@ -73,10 +78,7 @@ export class Setup extends PureComponent<Props, State> {
   }
 }
 
-const mstp = ({links, isSetupComplete}) => ({
-  links,
-  isSetupComplete,
-})
+const mstp = ({links}) => ({links})
 
 const mdtp = {
   notify: notifyAction,

chronograf/ui/src/Signin.tsx

@@ -16,7 +16,7 @@ import {Links} from 'src/types/v2/links'
 
 interface State {
   loading: RemoteDataState
-  isSourcesAllowed: boolean
+  isUserSignedIn: boolean
 }
 
 interface Props {
@@ -31,27 +31,28 @@ export class Signin extends PureComponent<Props, State> {
 
     this.state = {
       loading: RemoteDataState.NotStarted,
-      isSourcesAllowed: false,
+      isUserSignedIn: false,
     }
   }
 
   public async componentDidMount() {
     const {links} = this.props
     const isSourcesAllowed = await trySources(links.sources)
-    this.setState({loading: RemoteDataState.Done, isSourcesAllowed})
+    const isUserSignedIn = isSourcesAllowed
+    this.setState({loading: RemoteDataState.Done, isUserSignedIn})
   }
 
   public render() {
-    const {isSourcesAllowed} = this.state
+    const {isUserSignedIn} = this.state
 
     if (this.isLoading) {
       return <div className="page-spinner" />
     }
-    if (!isSourcesAllowed) {
+    if (!isUserSignedIn) {
       return (
         <div className="chronograf-root">
           <Notifications inPresentationMode={true} />
-          <SigninPage />
+          <SigninPage onSignInUser={this.handleSignInUser} />
         </div>
       )
     } else {
@@ -66,6 +67,10 @@ export class Signin extends PureComponent<Props, State> {
       loading === RemoteDataState.NotStarted
     )
   }
+
+  private handleSignInUser = () => {
+    this.setState({isUserSignedIn: true})
+  }
 }
 
 const mstp = ({links}) => ({

chronograf/ui/src/clockface/components/form_layout/Form.scss

@@ -51,38 +51,34 @@ $grid--form-gutter: 6px;
   Form Group Addons
   ------------------------------------------------------------------------------
 */
-.form--label {
-  width: 100%;
+.form--label,
+.form--help-text,
+.form--element-error {
+  text-align: left;
   display: inline-block;
   font-size: 12px;
   font-weight: 600;
-  color: $g11-sidewalk;
-  margin: 0 0 $ix-marg-a 0;
   padding: 0 ($form-sm-padding + $ix-border);
   @extend %no-user-select;
 }
 
+.form--label {
+  width: 100%;
+  color: $g11-sidewalk;
+  margin: 0 0 $ix-marg-a 0;
+}
+
 .form--help-text {
-  display: inline-block;
-  font-size: 12px;
   font-style: italic;
   line-height: 16px;
-  font-weight: 600;
   color: $g11-sidewalk;
   margin: $ix-marg-a 0 0 0;
-  padding: 0 ($form-sm-padding + $ix-border);
-  @extend %no-user-select;
 }
 
 .form--element-error {
-  display: inline-block;
-  font-size: 12px;
   line-height: 16px;
-  font-weight: 600;
   color: $c-dreamsicle;
   margin: $ix-marg-a 0 0 0;
-  padding: 0 ($form-sm-padding + $ix-border);
-  @extend %no-user-select;
 }
 
 /*

chronograf/ui/src/clockface/components/form_layout/Form.tsx

@@ -1,6 +1,7 @@
 // Libraries
 import React, {Component, ComponentClass} from 'react'
 import _ from 'lodash'
+import classnames from 'classnames'
 
 // Components
 import FormElement from 'src/clockface/components/form_layout/FormElement'
@@ -12,6 +13,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   children: JSX.Element[]
+  className?: string
 }
 
 @ErrorHandling
@@ -39,7 +41,15 @@ class Form extends Component<Props> {
 
     this.validateChildren()
 
-    return <div className="form--wrapper">{children}</div>
+    return <div className={this.formWrapperClass}>{children}</div>
+  }
+
+  private get formWrapperClass(): string {
+    const {className} = this.props
+
+    return classnames('form--wrapper', {
+      [`${className}`]: className,
+    })
   }
 
   private validateChildren = (): void => {

chronograf/ui/src/clockface/components/wizard/ProgressBar.scss

@@ -12,38 +12,45 @@
 }
 
 .wizard--progress-icon {
-  height: 22px;
-  width: 22px;
-  border-radius: 12px;
-  background-color: $g7-graphite;
+  position: relative;
+  font-size: 13px;
+  height: 26px;
+  width: 26px;
+  border-radius: 50%;
+  background-color: $g2-kevlar;
   display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: 10px;
-  color: $g3-castle;
+  margin-right: $ix-marg-b;
+  color: $g7-graphite;
   transition: background-color .4s;
-}
 
-.wizard--progress-icon.checkmark {
-  background-color: $c-rainforest;
+  > .icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
 }
 
 .wizard--progress-icon.circle-thick {
-  background-color: $g7-graphite;
+  color: $g7-graphite;
+}
+
+.wizard--progress-icon.checkmark {
+  color: $c-rainforest;
 }
 
 .wizard--progress-icon.current {
-  background-color: $c-pool;
+  color: $c-pool;
 }
 
 .wizard--progress-icon.remove {
-  background-color: $c-curacao;
+  color: $c-curacao;
 }
 
 .wizard--progress-title {
   font-weight: 700;
   color: $g7-graphite;
-  font-size: $ix-text-base-2;
+  font-size: 15px;
   transition: color .4s;
 }
 
@@ -67,7 +74,7 @@
   display: inline-flex;
   align-items: center;
   cursor: pointer;
-  margin: 0 10px;
+  margin: 0 $ix-marg-a;
 }
 
 .wizard--progress-button:hover {
@@ -77,8 +84,8 @@
 }
 
 .wizard--progress-connector {
-  width: 100px;
-  margin: 0 10px;
+  width: 70px;
+  margin: 0 $ix-marg-a;
   height: 2px;
   background-color: $g7-graphite;
   position: relative;

chronograf/ui/src/clockface/components/wizard/ProgressBar.tsx

@@ -26,66 +26,69 @@ class ProgressBar extends PureComponent<Props, null> {
     handleSetCurrentStep(i)
   }
 
-  private get WizardProgress(): JSX.Element {
+  private get WizardProgress(): JSX.Element[] {
     const {stepStatuses, stepTitles, currentStepIndex} = this.props
 
     const lastIndex = stepStatuses.length - 1
     const lastEleIndex = stepStatuses.length - 2
 
-    const progressBar = stepStatuses.reduce((acc, stepStatus, i) => {
-      if (i === 0 || i === lastIndex) {
-        return [...acc]
-      }
+    const progressBar: JSX.Element[] = stepStatuses.reduce(
+      (acc, stepStatus, i) => {
+        if (i === 0 || i === lastIndex) {
+          return [...acc]
+        }
 
-      let currentStep = ''
+        let currentStep = ''
 
-      // STEP STATUS
-      if (i === currentStepIndex && stepStatus !== StepStatus.Error) {
-        currentStep = 'current'
-      }
+        // STEP STATUS
+        if (i === currentStepIndex && stepStatus !== StepStatus.Error) {
+          currentStep = 'current'
+        }
 
-      const stepEle = (
-        <div
-          key={`stepEle${i}`}
-          className="wizard--progress-button"
-          onClick={this.handleSetCurrentStep(i)}
-        >
-          <span
-            className={`wizard--progress-icon ${currentStep || stepStatus}`}
-          >
-            <span className={`icon ${stepStatus}`} />
-          </span>
+        const stepEle = (
           <div
-            className={`wizard--progress-title ${currentStep || stepStatus}`}
+            key={`stepEle${i}`}
+            className="wizard--progress-button"
+            onClick={this.handleSetCurrentStep(i)}
           >
-            {stepTitles[i]}
+            <span
+              className={`wizard--progress-icon ${currentStep || stepStatus}`}
+            >
+              <span className={`icon ${stepStatus}`} />
+            </span>
+            <div
+              className={`wizard--progress-title ${currentStep || stepStatus}`}
+            >
+              {stepTitles[i]}
+            </div>
           </div>
-        </div>
-      )
+        )
 
-      if (i === lastEleIndex) {
-        return [...acc, stepEle]
-      }
+        if (i === lastEleIndex) {
+          return [...acc, stepEle]
+        }
 
-      // PROGRESS BAR CONNECTOR
-      let connectorStatus = ConnectorState.None
+        // PROGRESS BAR CONNECTOR
+        let connectorStatus = ConnectorState.None
 
-      if (i === currentStepIndex && stepStatus !== StepStatus.Error) {
-        connectorStatus = ConnectorState.Some
-      }
-      if (i === lastEleIndex || stepStatus === StepStatus.Complete) {
-        connectorStatus = ConnectorState.Full
-      }
-      const connectorEle = (
-        <span
-          key={i}
-          className={`wizard--progress-connector wizard--progress-connector--${connectorStatus ||
-            ConnectorState.None}`}
-        />
-      )
-      return [...acc, stepEle, connectorEle]
-    }, [])
-    return <span className="wizard--progress-bar">{progressBar}</span>
+        if (i === currentStepIndex && stepStatus !== StepStatus.Error) {
+          connectorStatus = ConnectorState.Some
+        }
+        if (i === lastEleIndex || stepStatus === StepStatus.Complete) {
+          connectorStatus = ConnectorState.Full
+        }
+        const connectorEle = (
+          <span
+            key={i}
+            className={`wizard--progress-connector wizard--progress-connector--${connectorStatus ||
+              ConnectorState.None}`}
+          />
+        )
+        return [...acc, stepEle, connectorEle]
+      },
+      []
+    )
+    return progressBar
   }
 }
 

chronograf/ui/src/clockface/components/wizard/WizardFullScreen.scss

@@ -15,10 +15,13 @@
 }
 
 .wizard--credits {
+  font-size: 13px;
+  color: $g10-wolf;
   display: inline-flex;
   align-items: center;
+  @extend %no-user-select;
 
   span {
     margin: 0 5px;
   }
-}
+}

chronograf/ui/src/clockface/components/wizard/WizardFullScreen.tsx

@@ -11,7 +11,7 @@ const WizardFullScreen: SFC<Props> = (props: Props) => {
       <div className="wizard--full-screen">
         {props.children}
         <div className="wizard--credits">
-          Made by <span className="icon cubo-uniform" /> InfluxData
+          Powered by <span className="icon cubo-uniform" /> InfluxData
         </div>
       </div>
       <div className="auth-image" />

chronograf/ui/src/clockface/components/wizard/WizardProgressHeader.scss

@@ -5,10 +5,11 @@
 
 .wizard--progress-header {
   position: relative;
-  background-color: $g3-castle;
-  min-width: 100%;
+  background-color: $g0-obsidian;
+  width: 80%;
+  max-width: 1000px;
   height: 50px;
-  padding: $ix-marg-b $ix-marg-c;
+  padding: 0 $ix-marg-c;
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -18,4 +19,8 @@
 .wizard--progress-skip {
   position: absolute;
   right: $ix-marg-c;
-}
+}
+
+.wizard--progress-header.hidden {
+  visibility: hidden;
+}

chronograf/ui/src/onboarding/OnboardingWizard.scss

@@ -12,8 +12,10 @@
   align-items: center;
   text-align: center;
   margin: $ix-marg-d;
+  margin-top: $ix-marg-a;
   flex-grow: 1;
-  width: 100%;
+  width: 80%;
+  max-width: 1000px;
   background-color: $g3-castle;
   border-radius: $radius;
 }
@@ -21,7 +23,7 @@
 .wizard-button-bar {
   display: inline-flex;
   flex-shrink: 0;
-  margin: $ix-marg-b auto $ix-marg-c auto;
+  margin: 32px auto;
   position: relative;
   min-width: 100%;
   justify-content: center;
@@ -49,4 +51,22 @@
 }
 .splash-logo.secondary {
   background-image: url('../../assets/images/cubo_doodle_green.svg');
-}
+}
+
+.wizard-step--title {
+  font-size: 32px;
+  font-weight: 300;
+  color: $g15-platinum;
+  margin-top: 32px;
+  margin-bottom: $ix-marg-b;
+  @include no-user-select();
+}
+
+.wizard-step--sub-title {
+  margin-top: $ix-marg-b;
+  margin-bottom: 32px;
+  font-size: 16px;
+  font-weight: 400;
+  color: $g11-sidewalk;
+  @include no-user-select();
+}

chronograf/ui/src/onboarding/actions/index.ts

@@ -1,19 +0,0 @@
-export type Action = ActionCompleteSetup
-
-export enum ActionTypes {
-  CompleteSetup = 'COMPLETE_SETUP',
-}
-
-export interface ActionCompleteSetup {
-  type: ActionTypes.CompleteSetup
-  payload: {isSetupComplete: true}
-}
-
-export type CompleteSetup = () => ActionCompleteSetup
-
-export const completeSetup = (): ActionCompleteSetup => {
-  return {
-    type: ActionTypes.CompleteSetup,
-    payload: {isSetupComplete: true},
-  }
-}

chronograf/ui/src/onboarding/components/AdminStep.tsx

@@ -9,6 +9,7 @@ import {
   ComponentColor,
   ComponentSize,
   Input,
+  InputType,
   Form,
   Columns,
   IconFont,
@@ -52,11 +53,11 @@ class AdminStep extends PureComponent<OnboardingStepProps, State> {
     }
     return (
       <div className="onboarding-step">
-        <h3 className="wizard-step-title">Setup Admin User</h3>
-        <p>
+        <h3 className="wizard-step--title">Setup Admin User</h3>
+        <h5 className="wizard-step--sub-title">
           You will be able to create additional Buckets and Organizations later
-        </p>
-        <Form>
+        </h5>
+        <Form className="onboarding--admin-user-form">
           <Form.Element
             label="Admin Username"
             colsXS={Columns.Six}
@@ -80,6 +81,7 @@ class AdminStep extends PureComponent<OnboardingStepProps, State> {
             offsetXS={Columns.Three}
           >
             <Input
+              type={InputType.Password}
               value={password}
               onChange={this.handlePassword}
               titleText={'Admin Password'}

chronograf/ui/src/onboarding/components/CompletionStep.tsx

@@ -1,6 +1,5 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import {withRouter, WithRouterProps} from 'react-router'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -10,15 +9,14 @@ import {Button, ComponentColor, ComponentSize} from 'src/clockface'
 import {OnboardingStepProps} from 'src/onboarding/containers/OnboardingWizard'
 
 @ErrorHandling
-class CompletionStep extends PureComponent<
-  OnboardingStepProps & WithRouterProps
-> {
+class CompletionStep extends PureComponent<OnboardingStepProps> {
   public render() {
+    const {onExit} = this.props
     return (
       <div className="onboarding-step">
         <div className="splash-logo secondary" />
-        <h3 className="wizard-step-title">Setup Complete! </h3>
-        <p>This is completion step</p>
+        <h3 className="wizard-step--title">Setup Complete!</h3>
+        <h5 className="wizard-step--sub-title" />
         <div className="wizard-button-bar">
           <Button
             color={ComponentColor.Default}
@@ -29,23 +27,18 @@ class CompletionStep extends PureComponent<
           <Button
             color={ComponentColor.Success}
             text="Go to status dashboard"
-            size={ComponentSize.Large}
-            onClick={this.handleComplete}
+            size={ComponentSize.Medium}
+            onClick={onExit}
           />
         </div>
       </div>
     )
   }
 
-  private handleComplete = () => {
-    const {router, completeSetup} = this.props
-    completeSetup()
-    router.push(`/manage-sources`)
-  }
   private handleDecrement = () => {
     const {handleSetCurrentStep, currentStepIndex} = this.props
     handleSetCurrentStep(currentStepIndex - 1)
   }
 }
 
-export default withRouter(CompletionStep)
+export default CompletionStep

chronograf/ui/src/onboarding/components/InitStep.tsx

@@ -14,8 +14,10 @@ class InitStep extends PureComponent<OnboardingStepProps> {
     return (
       <div className="onboarding-step">
         <div className="splash-logo primary" />
-        <h3 className="wizard-step-title">Welcome to InfluxData </h3>
-        <p>"Start using the InfluxData platform in a few easy steps"</p>
+        <h3 className="wizard-step--title">Welcome to InfluxData </h3>
+        <h5 className="wizard-step--sub-title">
+          Start using the InfluxData platform in a few easy steps
+        </h5>
         <div className="wizard-button-bar">
           <Button
             color={ComponentColor.Primary}

chronograf/ui/src/onboarding/components/OtherStep.tsx

@@ -0,0 +1,62 @@
+// Libraries
+import React, {PureComponent} from 'react'
+
+// Components
+import {ErrorHandling} from 'src/shared/decorators/errors'
+import {Button, ComponentColor, ComponentSize} from 'src/clockface'
+
+// Types
+import {StepStatus} from 'src/clockface/constants/wizard'
+import {OnboardingStepProps} from 'src/onboarding/containers/OnboardingWizard'
+
+@ErrorHandling
+class OtherStep extends PureComponent<OnboardingStepProps, null> {
+  constructor(props) {
+    super(props)
+  }
+  public render() {
+    return (
+      <div className="onboarding-step">
+        <h3 className="wizard-step--title">This is Another Step</h3>
+        <h5 className="wizard-step--sub-title">Import data here</h5>
+        <div className="wizard-button-bar">
+          <Button
+            color={ComponentColor.Default}
+            text="Back"
+            size={ComponentSize.Medium}
+            onClick={this.handlePrevious}
+          />
+          <Button
+            color={ComponentColor.Primary}
+            text="Next"
+            size={ComponentSize.Medium}
+            onClick={this.handleNext}
+            titleText={'Next'}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  private handleNext = async () => {
+    const {handleSetStepStatus, currentStepIndex} = this.props
+    handleSetStepStatus(currentStepIndex, StepStatus.Complete)
+    this.handleIncrement()
+  }
+
+  private handlePrevious = () => {
+    this.handleDecrement()
+  }
+
+  private handleIncrement = () => {
+    const {handleSetCurrentStep, currentStepIndex} = this.props
+    handleSetCurrentStep(currentStepIndex + 1)
+  }
+
+  private handleDecrement = () => {
+    const {handleSetCurrentStep, currentStepIndex} = this.props
+    handleSetCurrentStep(currentStepIndex - 1)
+  }
+}
+
+export default OtherStep

chronograf/ui/src/onboarding/containers/OnboardingWizard.tsx

@@ -1,11 +1,14 @@
 // Libraries
 import React, {PureComponent} from 'react'
+import {withRouter, WithRouterProps} from 'react-router'
+
 import {connect} from 'react-redux'
 import _ from 'lodash'
 
 // Components
 import InitStep from 'src/onboarding/components/InitStep'
 import AdminStep from 'src/onboarding/components/AdminStep'
+import OtherStep from 'src/onboarding/components/OtherStep'
 import CompletionStep from 'src/onboarding/components/CompletionStep'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {
@@ -16,10 +19,6 @@ import {
 
 // Actions
 import {notify as notifyAction} from 'src/shared/actions/notifications'
-import {
-  completeSetup as completeSetupAction,
-  CompleteSetup,
-} from 'src/onboarding/actions'
 
 // Constants
 import {StepStatus} from 'src/clockface/constants/wizard'
@@ -39,15 +38,16 @@ export interface OnboardingStepProps {
   setupParams: SetupParams
   handleSetSetupParams: (setupParams: SetupParams) => void
   notify: (message: Notification | NotificationFunc) => void
-  completeSetup: CompleteSetup
+  onCompleteSetup: () => void
+  onExit: () => void
 }
 
-interface Props {
+interface Props extends WithRouterProps {
   links: Links
   startStep?: number
   stepStatuses?: StepStatus[]
   notify: (message: Notification | NotificationFunc) => void
-  completeSetup: CompleteSetup
+  onCompleteSetup: () => void
 }
 
 interface State {
@@ -64,12 +64,13 @@ class OnboardingWizard extends PureComponent<Props, State> {
       StepStatus.Incomplete,
       StepStatus.Incomplete,
       StepStatus.Incomplete,
+      StepStatus.Incomplete,
     ],
   }
 
-  public stepTitles = ['Welcome', 'Setup admin', 'Complete']
-  public steps = [InitStep, AdminStep, CompletionStep]
-  public stepSkippable = [false, false, false]
+  public stepTitles = ['Welcome', 'Admin Setup', 'Next Step', 'Complete']
+  public steps = [InitStep, AdminStep, OtherStep, CompletionStep]
+  public stepSkippable = [false, false, true, false]
 
   constructor(props: Props) {
     super(props)
@@ -81,29 +82,44 @@ class OnboardingWizard extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {stepStatuses} = this.props
-    const {currentStepIndex} = this.state
     return (
       <WizardFullScreen>
-        <WizardProgressHeader
-          currentStepIndex={currentStepIndex}
-          stepSkippable={this.stepSkippable}
-        >
-          <ProgressBar
-            currentStepIndex={currentStepIndex}
-            handleSetCurrentStep={this.onSetCurrentStep}
-            stepStatuses={stepStatuses}
-            stepTitles={this.stepTitles}
-          />
-        </WizardProgressHeader>
+        {this.progressHeader}
         <div className="wizard-step--container">{this.currentStep}</div>
       </WizardFullScreen>
     )
   }
 
+  private get progressHeader(): JSX.Element {
+    const {stepStatuses} = this.props
+    const {currentStepIndex} = this.state
+
+    if (
+      currentStepIndex === 0 ||
+      currentStepIndex === stepStatuses.length - 1
+    ) {
+      return <div className="wizard--progress-header hidden" />
+    }
+
+    return (
+      <WizardProgressHeader
+        currentStepIndex={currentStepIndex}
+        stepSkippable={this.stepSkippable}
+        onSkip={this.handleExit}
+      >
+        <ProgressBar
+          currentStepIndex={currentStepIndex}
+          handleSetCurrentStep={this.onSetCurrentStep}
+          stepStatuses={stepStatuses}
+          stepTitles={this.stepTitles}
+        />
+      </WizardProgressHeader>
+    )
+  }
+
   private get currentStep(): React.ReactElement<OnboardingStepProps> {
     const {currentStepIndex, setupParams} = this.state
-    const {stepStatuses, links, notify, completeSetup} = this.props
+    const {stepStatuses, links, notify, onCompleteSetup} = this.props
 
     return React.createElement(this.steps[currentStepIndex], {
       stepStatuses,
@@ -115,10 +131,17 @@ class OnboardingWizard extends PureComponent<Props, State> {
       setupParams,
       handleSetSetupParams: this.onSetSetupParams,
       notify,
-      completeSetup,
+      onCompleteSetup,
+      onExit: this.handleExit,
     })
   }
 
+  private handleExit = () => {
+    const {router, onCompleteSetup} = this.props
+    onCompleteSetup()
+    router.push(`/manage-sources`)
+  }
+
   private onSetSetupParams = (setupParams: SetupParams): void => {
     this.setState({setupParams})
   }
@@ -140,7 +163,6 @@ const mstp = ({links}) => ({
 
 const mdtp = {
   notify: notifyAction,
-  completeSetup: completeSetupAction,
 }
 
-export default connect(mstp, mdtp)(OnboardingWizard)
+export default connect(mstp, mdtp)(withRouter(OnboardingWizard))

chronograf/ui/src/onboarding/containers/SigninPage.tsx

@@ -5,15 +5,16 @@ import _ from 'lodash'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import SplashPage from 'src/shared/components/splash_page/SplashPage'
+
 import {
   Button,
   ComponentColor,
   ComponentSize,
   Input,
+  InputType,
   Form,
   Columns,
-  WizardFullScreen,
-  InputType,
 } from 'src/clockface'
 
 // APIs
@@ -32,6 +33,7 @@ import {Notification, NotificationFunc} from 'src/types'
 export interface Props {
   links: Links
   notify: (message: Notification | NotificationFunc) => void
+  onSignInUser: () => void
 }
 
 interface State {
@@ -52,47 +54,45 @@ class SigninPage extends PureComponent<Props, State> {
   public render() {
     const {username, password} = this.state
     return (
-      <WizardFullScreen>
-        <div className="wizard-step--container">
-          <div className="onboarding-step">
-            <h3 className="wizard-step-title">Please sign in</h3>
-            <p>(and remember that you are awesome)</p>
-            <Form>
-              <Form.Element
-                label="Username"
-                colsXS={Columns.Six}
-                offsetXS={Columns.Three}
-                errorMessage={''}
-              >
-                <Input
-                  value={username}
-                  onChange={this.handleUsername}
-                  size={ComponentSize.Medium}
-                />
-              </Form.Element>
-              <Form.Element
-                label="Password"
-                colsXS={Columns.Six}
-                offsetXS={Columns.Three}
-                errorMessage={''}
-              >
-                <Input
-                  value={password}
-                  type={InputType.Password}
-                  onChange={this.handlePassword}
-                  size={ComponentSize.Medium}
-                />
-              </Form.Element>
-            </Form>
-            <Button
-              color={ComponentColor.Primary}
-              text="Sign In"
-              size={ComponentSize.Medium}
-              onClick={this.handleSignIn}
-            />
-          </div>
-        </div>
-      </WizardFullScreen>
+      <SplashPage panelWidthPixels={300}>
+        <SplashPage.Panel>
+          <SplashPage.Logo />
+          <SplashPage.Header title="InfluxData" />
+          <Form>
+            <Form.Element
+              label="Username"
+              colsXS={Columns.Twelve}
+              errorMessage={''}
+            >
+              <Input
+                value={username}
+                onChange={this.handleUsername}
+                size={ComponentSize.Medium}
+              />
+            </Form.Element>
+            <Form.Element
+              label="Password"
+              colsXS={Columns.Twelve}
+              errorMessage={''}
+            >
+              <Input
+                value={password}
+                onChange={this.handlePassword}
+                size={ComponentSize.Medium}
+                type={InputType.Password}
+              />
+            </Form.Element>
+            <Form.Footer>
+              <Button
+                color={ComponentColor.Primary}
+                text="Sign In"
+                size={ComponentSize.Medium}
+                onClick={this.handleSignIn}
+              />
+            </Form.Footer>
+          </Form>
+        </SplashPage.Panel>
+      </SplashPage>
     )
   }
 
@@ -106,12 +106,11 @@ class SigninPage extends PureComponent<Props, State> {
   }
 
   private handleSignIn = async (): Promise<void> => {
-    const {links, notify} = this.props
+    const {links, notify, onSignInUser} = this.props
     const {username, password} = this.state
     try {
       await signin(links.signin, {username, password})
-
-      window.location.reload(true)
+      onSignInUser()
     } catch (error) {
       notify(copy.SigninError)
     }

chronograf/ui/src/onboarding/reducers/setup.ts

@@ -1,20 +0,0 @@
-import {Action, ActionTypes} from 'src/onboarding/actions'
-
-type State = boolean
-const initialisSetupComplete: State = false
-
-const setupReducer = (
-  state: State = initialisSetupComplete,
-  action: Action
-): State => {
-  switch (action.type) {
-    case ActionTypes.CompleteSetup: {
-      const {isSetupComplete} = action.payload
-      return isSetupComplete
-    }
-  }
-
-  return state
-}
-
-export default setupReducer

chronograf/ui/src/shared/components/splash_page/SplashHeader.tsx

@@ -0,0 +1,11 @@
+import React, {SFC} from 'react'
+
+interface Props {
+  title: string
+}
+
+const SplashHeader: SFC<Props> = ({title}) => (
+  <h3 className="auth-heading">{title}</h3>
+)
+
+export default SplashHeader

chronograf/ui/src/shared/components/splash_page/SplashLogo.tsx

@@ -0,0 +1,5 @@
+import React, {SFC} from 'react'
+
+const SplashLogo: SFC = () => <div className="auth-logo" />
+
+export default SplashLogo

chronograf/ui/src/shared/components/splash_page/SplashPage.scss

@@ -13,6 +13,7 @@
   @include gradient-v($g3-castle, $g0-obsidian);
   padding: $sidebar--width;
 }
+
 .auth-image {
   background-image: url('../../assets/images/auth-bg.svg');
   background-size: cover;
@@ -23,14 +24,15 @@
   height: 100%;
   top: 0;
   left: 0;
-  z-index: -1;
+  z-index: 2;
 }
+
 .auth-box {
   z-index: 90;
   position: absolute;
   top: 43%;
   left: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -65,6 +67,7 @@
     }
   }
 }
+
 .auth-logo {
   background-image: url('../../assets/images/auth-logo.svg');
   background-size: 100% 100%;
@@ -72,7 +75,9 @@
   background-repeat: no-repeat;
   width: 100px;
   height: 100px;
+  display: inline-block;
 }
+
 .auth-credits {
   @include no-user-select();
   font-weight: 600;
@@ -169,6 +174,21 @@
   color: $g9-mountain;
   @include no-user-select();
 }
+
 .btn.auth--logout {
   margin-top: 30px;
 }
+
+
+.auth-panel {
+  border-radius: $radius;
+  background-color: $g3-castle;
+  padding: 32px;
+  text-align: center;
+}
+
+.auth-heading {
+  font-size: 32px;
+  font-weight: 300;
+  margin-bottom: 32px;
+}

chronograf/ui/src/shared/components/splash_page/SplashPage.tsx

@@ -1,20 +1,34 @@
-import React, {SFC, ReactElement} from 'react'
+import React, {Component} from 'react'
+
+import SplashLogo from 'src/shared/components/splash_page/SplashLogo'
+import SplashPanel from 'src/shared/components/splash_page/SplashPanel'
+import SplashHeader from 'src/shared/components/splash_page/SplashHeader'
 
 interface Props {
-  children: ReactElement<any>
+  children: JSX.Element | JSX.Element[]
+  panelWidthPixels: number
 }
 
-const SplashPage: SFC<Props> = ({children}) => (
-  <div className="auth-page">
-    <div className="auth-box">
-      <div className="auth-logo" />
-      {children}
-    </div>
-    <p className="auth-credits">
-      Made by <span className="icon cubo-uniform" />InfluxData
-    </p>
-    <div className="auth-image" />
-  </div>
-)
+class SplashPage extends Component<Props> {
+  public static Logo = SplashLogo
+  public static Panel = SplashPanel
+  public static Header = SplashHeader
+
+  public render() {
+    const {children, panelWidthPixels} = this.props
+
+    return (
+      <div className="auth-page">
+        <div className="auth-box" style={{width: `${panelWidthPixels}px`}}>
+          {children}
+        </div>
+        <p className="auth-credits">
+          Powered by <span className="icon cubo-uniform" />InfluxData
+        </p>
+        <div className="auth-image" />
+      </div>
+    )
+  }
+}
 
 export default SplashPage

chronograf/ui/src/shared/components/splash_page/SplashPanel.tsx

@@ -0,0 +1,11 @@
+import React, {SFC} from 'react'
+
+interface Props {
+  children: JSX.Element[] | JSX.Element
+}
+
+const SplashPanel: SFC<Props> = ({children}) => (
+  <div className="auth-panel">{children}</div>
+)
+
+export default SplashPanel

chronograf/ui/src/store/configureStore.js

@@ -9,7 +9,6 @@ import sharedReducers from 'src/shared/reducers'
 import persistStateEnhancer from './persistStateEnhancer'
 import scriptReducer from 'src/flux/reducers/script'
 import sourceReducer from 'src/sources/reducers/sources'
-import setupReducer from 'src/onboarding/reducers/setup'
 
 // v2 reducers
 import rangesReducer from 'src/dashboards/reducers/v2/ranges'
@@ -28,7 +27,6 @@ const rootReducer = combineReducers({
   routing: routerReducer,
   script: scriptReducer,
   sources: sourceReducer,
-  isSetupComplete: setupReducer,
   views: viewsReducer,
   logs: logsReducer,
 })