mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-24 09:16:07 +08:00
f7c6ae0774
Summary: This diff removes the timeout transition group from the sheet-toolbar, which was causing toolbar items to fade when columns were opened / closed and they were moved from column to column. Instead, I'm just animating the message toolbar items, which are one of the few sets of toolbar items that really should fade, and do so as an entire set. I've also renamed the "sheet-toolbar" animation to "opacity-125ms". I think it'd be cool to create a standard set of these animations, but I didn't see any others it would make sense to create generic names for yet. (The others have weird timings or are bound up inside packages). Resolves Github #90 Test Plan: No new tests Reviewers: evan Reviewed By: evan Differential Revision: https://phab.nylas.com/D2159
151 lines
4.7 KiB
CoffeeScript
151 lines
4.7 KiB
CoffeeScript
React = require 'react'
|
|
_ = require 'underscore'
|
|
{RetinaImg, TimeoutTransitionGroup} = require 'nylas-component-kit'
|
|
{Utils} = require 'nylas-exports'
|
|
|
|
TokenAuthAPI = require './token-auth-api'
|
|
OnboardingActions = require './onboarding-actions'
|
|
PageRouterStore = require './page-router-store'
|
|
Providers = require './account-types'
|
|
url = require 'url'
|
|
|
|
class TokenAuthPage extends React.Component
|
|
@displayName: "TokenAuthPage"
|
|
|
|
constructor: (@props) ->
|
|
@state =
|
|
token: ""
|
|
tokenValidityError: null
|
|
|
|
tokenAuthInflight: false
|
|
tokenAuthEnabled: PageRouterStore.tokenAuthEnabled()
|
|
tokenAuthEnabledError: PageRouterStore.tokenAuthEnabledError()
|
|
|
|
componentDidMount: ->
|
|
@_usub = PageRouterStore.listen(@_onTokenAuthChange)
|
|
|
|
_onTokenAuthChange: =>
|
|
@setState
|
|
tokenAuthEnabled: PageRouterStore.tokenAuthEnabled()
|
|
tokenAuthEnabledError: PageRouterStore.tokenAuthEnabledError()
|
|
@_resize()
|
|
|
|
componentWillUnmount: ->
|
|
@_usub?()
|
|
|
|
render: =>
|
|
if @state.tokenAuthEnabled is "unknown"
|
|
<div className="page token-auth">
|
|
<TimeoutTransitionGroup leaveTimeout={150} enterTimeout={150} transitionName="alpha-fade">
|
|
{@_renderWaitingForTokenAuthAnswer()}
|
|
</TimeoutTransitionGroup>
|
|
</div>
|
|
|
|
else if @state.tokenAuthEnabled is "yes"
|
|
<div className="page token-auth token-auth-enabled">
|
|
<div className="quit" onClick={ -> OnboardingActions.closeWindow() }>
|
|
<RetinaImg name="onboarding-close.png" mode={RetinaImg.Mode.ContentPreserve}/>
|
|
</div>
|
|
|
|
<RetinaImg url="nylas://onboarding/assets/nylas-pictograph@2x.png" mode={RetinaImg.Mode.ContentIsMask} style={zoom: 0.29} className="logo"/>
|
|
<div className="caption" style={padding: 40}>
|
|
Due to overwhelming interest, you need an invitation code to connect
|
|
an account to N1. Enter your invitation code below, or <a href="https://invite.nylas.com">request one here</a>.
|
|
</div>
|
|
{@_renderContinueError()}
|
|
<label className="token-label">
|
|
{@_renderInput()}
|
|
</label>
|
|
{@_renderContinueButton()}
|
|
</div>
|
|
else
|
|
<div className="page token-auth">
|
|
</div>
|
|
|
|
_renderWaitingForTokenAuthAnswer: =>
|
|
if @state.tokenAuthEnabledError
|
|
<div style={position:'absolute', width:'100%', padding:60, paddingTop:100} key="error">
|
|
<div className="errormsg">{@state.tokenAuthEnabledError}</div>
|
|
<button key="retry"
|
|
style={marginTop: 15}
|
|
className="btn btn-large btn-retry"
|
|
onClick={OnboardingActions.retryCheckTokenAuthStatus}>
|
|
Try Again
|
|
</button>
|
|
</div>
|
|
else
|
|
<div style={position:'absolute', width:'100%'} key="spinner">
|
|
<RetinaImg url="nylas://onboarding/assets/installing-spinner.gif"
|
|
mode={RetinaImg.Mode.ContentPreserve}
|
|
style={marginTop: 150}/>
|
|
</div>
|
|
|
|
_renderInput: =>
|
|
if @state.errorMessage
|
|
<input type="text"
|
|
value={@state.token}
|
|
onChange={@_onTokenChange}
|
|
placeholder="Invitation Code"
|
|
className="token-input error" />
|
|
else
|
|
<input type="text"
|
|
value={@state.token}
|
|
onChange={@_onTokenChange}
|
|
placeholder="Invitation Code"
|
|
className="token-input" />
|
|
|
|
_renderContinueButton: =>
|
|
if @state.tokenAuthInflight
|
|
<button className="btn btn-large btn-disabled" type="button">
|
|
<RetinaImg name="sending-spinner.gif" width={15} height={15} mode={RetinaImg.Mode.ContentPreserve} /> Checking…
|
|
</button>
|
|
else
|
|
<button className="btn btn-large btn-gradient" type="button" onClick={@_onContinue}>Continue</button>
|
|
|
|
_renderContinueError: =>
|
|
if @state.tokenValidityError
|
|
<div className="errormsg" role="alert">
|
|
{@state.tokenValidityError}
|
|
</div>
|
|
else
|
|
<div></div>
|
|
|
|
_onTokenChange: (event) =>
|
|
@setState(token: event.target.value)
|
|
|
|
_onContinue: =>
|
|
if @state.tokenAuthInflight
|
|
return
|
|
|
|
if not @state.token
|
|
@setState({
|
|
tokenAuthInflight: false,
|
|
tokenValidityError: "Please enter an invitation code."
|
|
})
|
|
@_resize()
|
|
return
|
|
|
|
@setState({tokenAuthInflight: true})
|
|
|
|
TokenAuthAPI.request
|
|
path: "/token/#{@state.token}"
|
|
returnsModel: false
|
|
timeout: 30000
|
|
success: (json) =>
|
|
atom.config.set("invitationCode", @state.token)
|
|
OnboardingActions.moveToPage("account-choose")
|
|
error: (err) =>
|
|
_.delay =>
|
|
@setState
|
|
tokenValidityError: err.message
|
|
tokenAuthInflight: false
|
|
@_resize()
|
|
, 400
|
|
|
|
_resize: =>
|
|
setTimeout( =>
|
|
@props.onResize?()
|
|
,10)
|
|
|
|
module.exports = TokenAuthPage
|