Mailspring/internal_packages/onboarding/lib/welcome-page.cjsx
Ben Gotow 297320df94 fix(onboarding): Lots of changes to account management, dead code cleanup
Summary:
Better error handling in the account settings page and a loading spinner

Add Account... replaces "Link External Account", and it works

Clean dead code from onboarding pages, remove base class component

Always show the account switcher

rm dead EdgehillAPI code, AccountStore now manages accounts and credentials in config, not in database

Fix specs

Test Plan: Run tests

Reviewers: dillon, evan

Reviewed By: evan

Projects: #edgehill

Differential Revision: https://phab.nylas.com/D2059
2015-09-24 14:51:15 -07:00

59 lines
2.1 KiB
CoffeeScript

React = require 'react'
{RetinaImg, TimeoutTransitionGroup} = require 'nylas-component-kit'
OnboardingActions = require './onboarding-actions'
class WelcomePage extends React.Component
@displayName: "WelcomePage"
constructor: (@props) ->
@state =
step: 0
render: =>
buttons = []
if @state.step > 0
buttons.push <button key="back" className="btn btn-large" style={marginRight: 10} onClick={@_onBack}>Back</button>
buttons.push <button key="next" className="btn btn-large" onClick={@_onContinue}>Continue</button>
<div className="page no-top opaque" style={width: 667, display: "inline-block"}>
<div className="quit" onClick={ => atom.close() }>
<RetinaImg name="onboarding-close.png" mode={RetinaImg.Mode.ContentPreserve}/>
</div>
<TimeoutTransitionGroup leaveTimeout={300}
enterTimeout={300}
className="welcome-image-container"
transitionName="welcome-image">
{@_renderStep()}
</TimeoutTransitionGroup>
<div style={textAlign:'center', paddingTop:30, paddingBottom:30}>
{buttons}
</div>
</div>
_renderStep: =>
if @state.step is 0
<div className="welcome-image" key="step-0">
<RetinaImg name="welcome1bg.png" mode={RetinaImg.Mode.ContentPreserve} />
<RetinaImg name="welcome1icon.png" mode={RetinaImg.Mode.ContentPreserve} style={position:'absolute', top:'50%', left:'50%', transform:'translate(-50%, -50%)'}/>
</div>
else if @state.step is 1
<div className="welcome-image" key="step-1">
<RetinaImg name="welcome2bg.png" mode={RetinaImg.Mode.ContentPreserve} />
</div>
else if @state.step is 2
<div className="welcome-image" key="step-2">
<RetinaImg name="welcome3bg.png" mode={RetinaImg.Mode.ContentPreserve} />
</div>
_onBack: =>
@setState(step: @state.step - 1)
_onContinue: =>
if @state.step < 2
@setState(step: @state.step + 1)
else
OnboardingActions.moveToPage("account-choose")
module.exports = WelcomePage