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

Revise onboarding flow
pull/10616/head
Deniz Kusefoglu 2018-10-10 06:28:47 -07:00 committed by GitHub
commit beed7c7ad7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 407 additions and 256 deletions

View File

@ -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,

View File

@ -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}) => ({

View File

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

View File

@ -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 => {

View File

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

View File

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

View File

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

View File

@ -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" />

View File

@ -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;
@ -19,3 +20,7 @@
position: absolute;
right: $ix-marg-c;
}
.wizard--progress-header.hidden {
visibility: hidden;
}

View File

@ -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;
@ -50,3 +52,21 @@
.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();
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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,
})