diff --git a/internal_packages/composer-signature/styles/composer-signature.less b/internal_packages/composer-signature/styles/composer-signature.less
index 3fb0bd2bb..dc79d0cd1 100644
--- a/internal_packages/composer-signature/styles/composer-signature.less
+++ b/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;
}
diff --git a/internal_packages/onboarding/lib/page-account-settings-gmail.jsx b/internal_packages/onboarding/lib/page-account-settings-gmail.jsx
index dbcea43a7..b35757110 100644
--- a/internal_packages/onboarding/lib/page-account-settings-gmail.jsx
+++ b/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 (
+
+
Page didn't open?
+
Paste into your browser:
+
+
clipboard.writeText(this._gmailAuthUrl)} onMouseDown={() => this.setState({pressed: true})} onMouseUp={() => this.setState({pressed: false})}>
+
+
+
+
+ )
+ }
+
+
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 {
Sign in to Google in
your browser.
+
+ {this._renderAlternative()}
+
);
}
diff --git a/internal_packages/onboarding/stylesheets/onboarding.less b/internal_packages/onboarding/stylesheets/onboarding.less
index 88657c577..6b269d1f6 100644
--- a/internal_packages/onboarding/stylesheets/onboarding.less
+++ b/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;
+ }
+
+}
diff --git a/static/images/onboarding/icon-copytoclipboard@1x.png b/static/images/onboarding/icon-copytoclipboard@1x.png
new file mode 100644
index 000000000..90cc1e933
Binary files /dev/null and b/static/images/onboarding/icon-copytoclipboard@1x.png differ
diff --git a/static/images/onboarding/icon-copytoclipboard@2x.png b/static/images/onboarding/icon-copytoclipboard@2x.png
new file mode 100644
index 000000000..17b3c3ede
Binary files /dev/null and b/static/images/onboarding/icon-copytoclipboard@2x.png differ
diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less
index 2353314e6..7647d120d 100644
--- a/static/variables/ui-variables.less
+++ b/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;