From 3da5c31cdddd73e51c85bad5c967d030f4b0cc71 Mon Sep 17 00:00:00 2001 From: Annie Date: Tue, 26 Jul 2016 15:55:31 -0700 Subject: [PATCH] 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 --- .../styles/composer-signature.less | 2 +- .../lib/page-account-settings-gmail.jsx | 42 +++++++++++++++- .../onboarding/stylesheets/onboarding.less | 46 ++++++++++++++++++ .../onboarding/icon-copytoclipboard@1x.png | Bin 0 -> 288 bytes .../onboarding/icon-copytoclipboard@2x.png | Bin 0 -> 14907 bytes static/variables/ui-variables.less | 2 + 6 files changed, 90 insertions(+), 2 deletions(-) create mode 100644 static/images/onboarding/icon-copytoclipboard@1x.png create mode 100644 static/images/onboarding/icon-copytoclipboard@2x.png 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 0000000000000000000000000000000000000000..90cc1e933a7a1f00e9f3534c559b5ae15a502a8a GIT binary patch literal 288 zcmV+*0pI?KP)i}d*;1|xucY#l%k?7T;mNl*qJpf)ozC_afeL|arMWMBss?u#(2d$Hqb>c_9fOc z&N4`Y?J#xGnd#e!^Af&M2AOV}=$xsC(bT^(#{?I6#A;Ieh$$S2lY mTo%42`>_MOV7UckjKMd*YG%}M8#2QH0000YqK2jN9Rj)EX&?e%qAFJ0MO2c6Jawh=niu-n~rJ864e??$^h z;sjz~F5$&skQhir5-~U(X6gXP7=lJI0x?lAMzUbcfIz|!ro_zW+OB=pbv$7B^J%vB z*XQ|uf4}EG&r9#0+vciRJ~eAj7C{hG%N_Pg@Tpe*Cuf3pdij)o@bP%SQ6mw=lw9RM zjoAC%EP^P^6RO>^+qsfvMW2@8#5!IZ_62~NAgoKn0ft@A%VZs2FZhepH;L!l{;H0bpCl+HxyEgHR%27e|U8GEU1 zSs=0oIS*ZFUluC|z7?q(WH~@nR45eEhKyP=*f zG>@H^*q{)Q1<_9`d6_z~NiI^Wl|u1X?7Dn`cp<+OV+SZwVJ1N7wK^)5iDToQKvU2g z85+k@yqEX!epv!OeM(=TL6k+QL7bpuynDjJU{0LQc?0r1VTUc0MdjU{iXcw#ZV5&X5&cD_t7o8CeWg zi=x*SU1hFOgk)){vZ~BlGx@BOVFkZJc8Qfrwk75~k&(AEGH+AXq()buF&L`#I@(xB zn+@PAtF*5T&Szs-chhu4v81yl+P4F@G zJQeWQTd71Nq>QgDx>WRvK`<=dX0%eNnju$YwbA8%NoM>kUv9U72CX1)G~;0{7QLrX zqca-K8dE`?SyRV)I1S60OeT*xUsu57M<6<#uzg%=yT~>vJ0_Nzd&ty~eO&4ng9141 z7%!wzM*pxSQluGI${|Q#jW$DT7p&mOc~-?Yj%^+7@CuQ0DZm6JUfFd;>d|c%Kgi8x7V27#kCr2fdXV*OsUp z)w`8>^)^NH1qK~>QF`S)W`(7bz_OPU^Ort60N$yB#teMCNb;OL(se*piBQqIo1vd@geuawP zu#BDL_-1&-LE?%Yabh?fE&|g)#uyh85iG#CU>e96<3b{W1sE4h0~upnNJOvz zK*kss5)mxGxL_K{7~?`Bf&~~COamEXTu4N)0ONvbAY+URi3k>8Trdq}jBz0m!2*m6 zrh$wxE+isYfN{YzkTJ%EL<9>kE|>-~#<-A(U;)Mj(?G@;7ZMRHz_?%<$Qa{7B7y}N z7fb^gV_Zl?umIzNX&~eK;>t=q0?7NpbAKW5fZwVE2Rz{6K$3M-ItilX8G>lrOb~yM zfX_jKXwnhH)mre#;U0pRDehW#dKp2aZ7a8zREIBJf9I=;Q^nbBCnl|(wWD@`FRmNx zCscWPWgROIZ%x}WNi})??#F69137zUyMAx$E-e}CPcOUTp6eL;`TNtR>~8LrU2kn% z=iM*u)4w@Fe%743@6VopZre{8mh}!S_o=q`Jvlt-XkTY{w|-I8itlFB*3CK7DK5@9 zGJi_1>RzAvQ}TTH?VdXei|27&n>%_wKigz3p3|3cZpD_R@3tSzzAHU-$a-wwu>Y5~ zmuD8X-|o5m(*C^bKl+N(n|o$ttomv7z#UD`wByHHw*Hlqd+mvuyIOL|>)MSAcQpQX zazoXb-W6Sosv12zhZ(4ick{?f?a7YrHa(=YDq|MjD% zxq0r)8&~GO?>h3w7vjRjw_4pfXO3>4zAf`C#AK`tbJMkA3$%Z(Lte@