mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-24 01:06:07 +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
108 lines
3.5 KiB
CoffeeScript
108 lines
3.5 KiB
CoffeeScript
React = require 'react'
|
|
|
|
{RetinaImg} = require 'nylas-component-kit'
|
|
{EdgehillAPI, Utils} = require 'nylas-exports'
|
|
|
|
Page = require './page'
|
|
OnboardingActions = require './onboarding-actions'
|
|
NylasApiEnvironmentStore = require './nylas-api-environment-store'
|
|
Providers = require './account-types'
|
|
url = require 'url'
|
|
|
|
class AccountChoosePage extends Page
|
|
@displayName: "AccountChoosePage"
|
|
|
|
constructor: (@props) ->
|
|
@state =
|
|
email: ""
|
|
provider: ""
|
|
environment: NylasApiEnvironmentStore.getEnvironment()
|
|
|
|
componentDidMount: ->
|
|
@_usub = NylasApiEnvironmentStore.listen =>
|
|
@setState environment: NylasApiEnvironmentStore.getEnvironment()
|
|
|
|
componentWillUnmount: ->
|
|
@_usub?()
|
|
|
|
render: =>
|
|
<div className="page account-choose">
|
|
{@_renderClose("quit")}
|
|
|
|
<div className="logo-container">
|
|
<RetinaImg name="onboarding-logo.png" mode={RetinaImg.Mode.ContentPreserve} className="logo"/>
|
|
</div>
|
|
|
|
<div className="caption" style={marginBottom:20}>Select your email provider</div>
|
|
|
|
{@_renderProviders()}
|
|
|
|
</div>
|
|
|
|
_renderProviders: ->
|
|
return Providers.map (provider) =>
|
|
<div className={"provider "+provider.name} key={provider.name} onClick={=>@_onChooseProvider(provider)}>
|
|
|
|
<div className="icon-container">
|
|
<RetinaImg name={provider.icon} mode={RetinaImg.Mode.ContentPreserve} className="icon"/>
|
|
</div>
|
|
{provider.displayName}
|
|
</div>
|
|
|
|
_renderError: ->
|
|
if @state.error
|
|
<div className="alert alert-danger" role="alert">
|
|
{@state.error}
|
|
</div>
|
|
else <div></div>
|
|
|
|
_onEmailChange: (event) =>
|
|
@setState email: event.target.value
|
|
|
|
_onChooseProvider: (provider) =>
|
|
if provider.name is 'gmail'
|
|
provider.clientKey = Utils.generateTempId()[6..]+'-'+Utils.generateTempId()[6..]
|
|
shell = require 'shell'
|
|
googleUrl = url.format({
|
|
protocol: 'https'
|
|
host: 'accounts.google.com/o/oauth2/auth'
|
|
query:
|
|
response_type: 'code'
|
|
state: provider.clientKey
|
|
client_id: '372024217839-cdsnrrqfr4d6b4gmlqepd7v0n0l0ip9q.apps.googleusercontent.com'
|
|
redirect_uri: 'http://localhost:5009/oauth/google/callback'
|
|
access_type: 'offline'
|
|
scope: 'https://www.googleapis.com/auth/userinfo.email \
|
|
https://www.googleapis.com/auth/userinfo.profile \
|
|
https://mail.google.com/ \
|
|
https://www.google.com/m8/feeds \
|
|
https://www.googleapis.com/auth/calendar'
|
|
})
|
|
shell.openExternal(googleUrl)
|
|
OnboardingActions.moveToPage("account-settings", {provider})
|
|
|
|
|
|
_onSubmit: (e) =>
|
|
valid = React.findDOMNode(@refs.form).reportValidity()
|
|
if valid
|
|
url = EdgehillAPI.urlForConnecting("inbox", @state.email)
|
|
OnboardingActions.moveToPage("add-account-auth", {url})
|
|
else
|
|
e.preventDefault()
|
|
|
|
_environmentComponent: =>
|
|
return <div></div> unless atom.inDevMode()
|
|
<div className="environment-selector">
|
|
<select value={@state.environment} onChange={@_onEnvChange}>
|
|
<option value="development">Development (edgehill-dev, api-staging)</option>
|
|
<option value="experimental">Experimental (edgehill-experimental, api-experimental)</option>
|
|
<option value="staging">Staging (edgehill-staging, api-staging)</option>
|
|
<option value="production">Production (edgehill, api)</option>
|
|
</select>
|
|
</div>
|
|
|
|
_onEnvChange: (event) =>
|
|
OnboardingActions.changeAPIEnvironment(event.target.value)
|
|
|
|
module.exports = AccountChoosePage
|