build(onboarding): Add input with gmail auth url

Summary:
Added animation and input with url of gmail auth for users where the broswer redirect doesnt work.
Still need to finish up some minor styling.

style(onboarding): add input with link for gmail auth if browser redirect doesnt work

Test Plan: testing on my local install

Reviewers: juan

Reviewed By: juan

Subscribers: sdw

Differential Revision: https://phab.nylas.com/D3119

internal_packages/composer-signature/styles/composer-signature.less

@@ -138,7 +138,7 @@
         }
         img.signature-button{
           display: inline-block;
-          background-color: #919191;
+          background-color: @btn-icon-color;
         }
 
 

internal_packages/onboarding/lib/page-account-settings-gmail.jsx

@@ -11,6 +11,8 @@ import {
 import OnboardingActions from './onboarding-actions';
 import AccountTypes from './account-types';
 
+const clipboard = require('electron').clipboard
+
 export default class AccountSettingsPageGmail extends React.Component {
   static displayName = "AccountSettingsPageGmail";
 
@@ -18,15 +20,26 @@ export default class AccountSettingsPageGmail extends React.Component {
     accountInfo: React.PropTypes.object,
   };
 
+  constructor() {
+    super()
+    this.state = {
+      showAlternative: false,
+    }
+  }
+
   componentDidMount() {
     // Show the "Sign in to Gmail" prompt for a moment before actually bouncing
     // to Gmail. (400msec animation + 200msec to read)
     this._sessionKey = buildGmailSessionKey();
     this._pollTimer = null;
+    this._gmailAuthUrl = buildGmailAuthURL(this._sessionKey)
     this._startTimer = setTimeout(() => {
-      shell.openExternal(buildGmailAuthURL(this._sessionKey));
+      shell.openExternal(this._gmailAuthUrl);
       this.startPollingForResponse();
     }, 600);
+    setTimeout(() => {
+      this.setState({showAlternative: true})
+    }, 1500);
   }
 
   componentWillUnmount() {
@@ -64,6 +77,30 @@ export default class AccountSettingsPageGmail extends React.Component {
     this._pollTimer = setTimeout(poll, 5000);
   }
 
+
+  _renderAlternative() {
+    let classnames = "input hidden"
+    if (this.state.showAlternative) {
+      classnames += " fadein"
+    }
+
+    return (
+      <div className={classnames}>
+        <p> Page didn't open?</p>
+        <p>Paste into your browser:
+          <input type="url" className="url-copy-target" value={this._gmailAuthUrl} />
+          <div className="copy-to-clipboard" onClick={() => clipboard.writeText(this._gmailAuthUrl)} onMouseDown={() => this.setState({pressed: true})} onMouseUp={() => this.setState({pressed: false})}>
+            <RetinaImg
+              name="icon-copytoclipboard.png"
+              mode={RetinaImg.Mode.ContentIsMask}
+            />
+          </div>
+        </p>
+      </div>
+    )
+  }
+
+
   render() {
     const {accountInfo} = this.props;
     const iconName = AccountTypes.find(a => a.type === accountInfo.type).headerIcon;
@@ -80,6 +117,9 @@ export default class AccountSettingsPageGmail extends React.Component {
         <h2>
           Sign in to Google in<br />your browser.
         </h2>
+        <div className="alternative-auth">
+          {this._renderAlternative()}
+        </div>
       </div>
     );
   }

internal_packages/onboarding/stylesheets/onboarding.less

@@ -627,3 +627,49 @@ body.platform-win32 {
   color: @component-active-color;
   img { background-color: @component-active-color; }
 }
+
+
+.alternative-auth {
+  p {
+    color: @text-color-heading;
+  }
+  .url-copy-target {
+    width: 50%;
+    border: 1px solid #c6c7c7;
+    margin: 10px;
+  }
+  .copy-to-clipboard {
+    display: inline-block;
+    cursor: pointer;
+    img {
+      background-color: @btn-icon-color;
+    }
+    img:active {
+      background-color: @black;
+    }
+  }
+
+  .hidden {
+    opacity: 0;
+  }
+
+  .visible {
+    opacity: 1;
+    margin-bottom: 0;
+  }
+
+  .fadein {
+    opacity: 1;
+    transition: opacity 2s linear;
+  }
+
+  .fadeout {
+    opacity: 0;
+    transition: opacity 1s linear;
+  }
+
+  input {
+    margin-top: 0;
+  }
+
+}

static/variables/ui-variables.less

@@ -163,6 +163,8 @@ rgba(253,253,253,0.75) 100%);
 @btn-default-bg-color:    darken(@background-primary, 0.5%);
 @btn-default-text-color:  @text-color;
 
+@btn-icon-color: #919191;
+
 @btn-action-bg-color:     @color-success;
 @btn-action-text-color:   @text-color;