New login flow with mobile user agent set

internal_packages/onboarding/lib/container-view.cjsx

@@ -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

internal_packages/onboarding/lib/onboarding-store.coffee

@@ -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'

internal_packages/onboarding/stylesheets/onboarding.less

@@ -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 {

keymaps/base.cson

@@ -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'

src/atom.coffee

@@ -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)

src/browser/atom-window.coffee

@@ -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

static/components/tokenizing-text-field.less

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