New login flow with mobile user agent set

This commit is contained in:
Ben Gotow 2015-03-04 18:12:50 -08:00
parent ef694d1766
commit a5508e46bc
8 changed files with 73 additions and 47 deletions

View file

@ -31,23 +31,22 @@ ContainerView = React.createClass
webview = this.refs['connect-iframe']
if webview
node = webview.getDOMNode()
node.addEventListener 'did-finish-load', (e) ->
if node.getUrl().indexOf('/connect/complete') != -1
query = node.getUrl().split('?')[1]
token = querystring.decode(query)
OnboardingActions.finishedConnect(token)
if node.hasListeners is undefined
node.addEventListener 'did-start-loading', (e) ->
if node.hasMobileUserAgent is undefined
node.setUserAgent("Mozilla/5.0 (iPhone; CPU iPhone OS 7_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D167 Safari/9537.53")
node.hasMobileUserAgent = true
node.reload()
node.addEventListener 'did-finish-load', (e) ->
if node.getUrl().indexOf('/connect/complete') != -1
query = node.getUrl().split('?')[1]
token = querystring.decode(query)
OnboardingActions.finishedConnect(token)
render: ->
<div className={@state.page}>
<ReactCSSTransitionGroup transitionName="page">
{@_pageComponent()}
</ReactCSSTransitionGroup>
<div className="quit" onClick={@_fireQuit}>
<RetinaImg name="onboarding-close.png"/>
</div>
<button className="btn btn-default dismiss" onClick={@_fireDismiss}>Cancel</button>
<button className="btn btn-default back" onClick={@_fireMoveToPrevPage}>Back</button>
</div>
<ReactCSSTransitionGroup transitionName="page">
{@_pageComponent()}
</ReactCSSTransitionGroup>
_pageComponent: ->
if @state.error
@ -57,6 +56,9 @@ ContainerView = React.createClass
if @state.page is 'welcome'
<div className="page" key={@state.page}>
<div className="quit" onClick={@_fireQuit}>
<RetinaImg name="onboarding-close.png"/>
</div>
<RetinaImg name="onboarding-logo.png" />
<h2>Welcome to Nilas</h2>
@ -73,20 +75,34 @@ ContainerView = React.createClass
else if @state.page == 'add-account'
<div className="page" key={@state.page}>
<h2>Connect an Account</h2>
<p>Link accounts from other services to supercharge your email.</p>
<div className="thin-container">
<button className="btn btn-primary btn-lg btn-block" onClick={=> @_fireAuthAccount('salesforce')}>Salesforce</button>
<button className="btn btn-primary btn-lg btn-block" onClick={=> @_fireAuthAccount('linkedin')}>LinkedIn</button>
<div className="quit" onClick={@_fireDismiss}>
<RetinaImg name="onboarding-close.png"/>
</div>
<RetinaImg name="onboarding-logo.png" />
<h2>Connect an Account</h2>
<RetinaImg name="onboarding-divider.png" />
<form role="form" className="thin-container">
<div className="prompt">Link accounts from other services to supercharge your email.</div>
<button className="btn btn-larger btn-gradient" onClick={=> @_fireAuthAccount('salesforce')}>Salesforce</button>
<button className="btn btn-larger btn-gradient" onClick={=> @_fireAuthAccount('linkedin')}>LinkedIn</button>
</form>
</div>
else if @state.page == 'add-account-auth'
React.createElement('webview',{
"ref": "connect-iframe",
"key": this.state.page,
"src": this._connectWebViewURL()
});
<div>
{
React.createElement('webview',{
"ref": "connect-iframe",
"key": this.state.page,
"src": this._connectWebViewURL()
});
}
<div className="back" onClick={@_fireMoveToPrevPage}>
<RetinaImg name="onboarding-back.png"/>
</div>
</div>
else if @state.page == 'add-account-success'
# http://codepen.io/stevenfabre/pen/NPWeVb

View file

@ -3,11 +3,14 @@ Actions = require './onboarding-actions'
{EdgehillAPI} = require 'inbox-exports'
ipc = require 'ipc'
if atom.state.mode isnt "onboarding" and atom.state.mode isnt "spec" then return
module.exports =
OnboardingStore = Reflux.createStore
init: ->
@_error = ''
@_page = atom.getLoadSettings().page || 'welcome'
@_pageStack = [@_page]
defaultEnv = if atom.inDevMode() then 'staging' else 'production'

View file

@ -64,6 +64,7 @@
.environment-selector {
position: absolute;
opacity:0.1;
top: 224px;
width:292px;
select {
@ -78,45 +79,35 @@
height:100%;
padding-top:15%;
}
.add-account .back,
.welcome .back {
display:none;
}
.quit, .dismiss {
display:none;
}
.add-account .dismiss,
.welcome .quit {
display:inherit;
}
.back, .dismiss, .quit {
.quit {
position: absolute;
top:5px;
left:5px;
}
.back,
.dismiss {
position: absolute;
top:25px;
left:25px;
}
.page-enter {
opacity: 0.01;
transform: translateY(20px);
transition: all .3s ease-out;
}
.page-enter.page-enter-active {
opacity: 1;
transform: translateY(0);
}
.page-leave {
opacity: 1;
transform: translateY(0);
transition: all .3s ease-in;
}
.page-leave.page-leave-active {
opacity: 0.01;
transform: translateY(20px);
}
.check {

View file

@ -53,7 +53,8 @@
'shift-delete': 'core:cut'
# Inputs are native by default.
'body input, body textarea, body *[contenteditable]':
# Also make sure not to catch anything intended for a webview
'body input, body textarea, body *[contenteditable], body webview':
'up': 'native!'
'left': 'native!'
'down': 'native!'
@ -79,8 +80,6 @@
'cmd-enter': 'native!'
'ctrl-enter': 'native!'
'shift-enter': 'native!'
'tab': 'core:focus-next'
'shift-tab': 'core:focus-previous'
'backspace': 'native!'
'shift-backspace': 'native!'
'delete': 'native!'
@ -207,6 +206,16 @@
'?': 'native!'
'/': 'native!'
'body input, body textarea, body *[contenteditable]':
'tab': 'core:focus-next'
'shift-tab': 'core:focus-previous'
'body webview':
'tab': 'native!'
'shift-tab': 'native!'
# For menus
'body .menu, body .menu, body .menu input':
'up': 'menu:move-up'

View file

@ -509,6 +509,7 @@ class Atom extends Model
width > 0 and height > 0 and x + width > 0 and y + height > 0
storeDefaultWindowDimensions: ->
return unless @mode is 'editor'
dimensions = @getWindowDimensions()
if @isValidDimensions(dimensions)
localStorage.setItem("defaultWindowDimensions", JSON.stringify(dimensions))
@ -625,6 +626,7 @@ class Atom extends Model
page: page
width: 340
height: 475
resizable: false
windowName: 'onboarding'
windowPackages: ['onboarding']
ipc.send('show-secondary-window', options)

View file

@ -18,7 +18,7 @@ class AtomWindow
isSpec: null
constructor: (settings={}) ->
{@resourcePath, pathToOpen, initialLine, initialColumn, @neverClose, @isSpec, @exitWhenDone, @safeMode, @devMode, frame, title} = settings
{@resourcePath, pathToOpen, initialLine, initialColumn, @neverClose, @isSpec, @exitWhenDone, @safeMode, @devMode, frame, title, resizable} = settings
# Normalize to make sure drive letter case is consistent on Windows
@resourcePath = path.normalize(@resourcePath) if @resourcePath
@ -27,6 +27,7 @@ class AtomWindow
show: false
title: title ? 'Edgehill'
frame: frame ? true
resizable: resizable ? true
icon: @constructor.iconPath
'web-preferences':
'direct-write': true

View file

@ -74,6 +74,10 @@
min-width: 5em;
background-color:transparent;
}
input:focus {
box-shadow: none;
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 205 KiB