mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 08:16:09 +08:00
5533755b03
Summary: Depends on D2049 This change replaces the onboarding flow to include new graphics, copy, and support for the new Nylas auth flow. New account choosing UI presents a list of account types, rather than guessing based on an entered email. Pages before and after introduce the user to different features of the client. Known issue: Polling for gmail account connection works, but continues even if you leave the page. Test Plan: Manual testing. Reviewers: evan Reviewed By: evan Differential Revision: https://phab.nylas.com/D2050
58 lines
2 KiB
CoffeeScript
58 lines
2 KiB
CoffeeScript
React = require 'react'
|
|
Page = require './page'
|
|
{RetinaImg, TimeoutTransitionGroup} = require 'nylas-component-kit'
|
|
OnboardingActions = require './onboarding-actions'
|
|
|
|
class WelcomePage extends Page
|
|
@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"}>
|
|
{@_renderClose("close")}
|
|
<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
|