Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Social Signup: Handle the case where users block third-party cookies/data #13983

Merged
merged 14 commits into from
May 29, 2017
+131 −27
Merged

Social Signup: Handle the case where users block third-party cookies/data #13983

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
a7ae224
Show a message when 3rd party cookies are disabled
pento May 12, 2017
6cdca3b
Social Signup: update copy when third-party cookies are blocked
fabianapsimoes May 12, 2017
1791649
Clean up the code a little bit.
pento May 15, 2017
a25780c
Tweak the copy.
pento May 15, 2017
8f37861
Add a disabled-style Google logo for when the Google button is disabled.
pento May 15, 2017
a5f8d5b
Reject the promise in case of a idpiframe_initialization_failed error
Tug May 15, 2017
acafb76
Sign up: Show Google service error block only when there is an error
gziolo May 15, 2017
e258338
Updated info text for social buttons.
pento May 16, 2017
b8c4049
Change the error message to a popover
pento May 18, 2017
e34bad4
Remove an unnecessary newline
pento May 18, 2017
46d8aa6
Always associate the Popover with the social button
pento May 23, 2017
111f090
Switch from `current()` to `currentTarget` to find the button when ho…
pento May 24, 2017
8084b81
Revert the form text changes from fc3acc4 and 4cf9438
pento May 24, 2017
8f0d8ba
When testing, the `Login` form must be loaded after `useFakeDom()`, b…
pento May 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add a disabled-style Google logo for when the Google button is disabled.
  • Loading branch information
@pento @drewblaisdell
pento authored and drewblaisdell committed May 24, 2017
commit 8f3786128242ea3c725d38b19a00239e024114a0
18 changes: 16 additions & 2 deletions client/components/signup-form/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,20 @@

svg {
margin-top: -2px;

&.disabled {
display: none;
}
}
}

.social-buttons__button:disabled {
svg.enabled {
display: none;
}

svg.disabled {
display: inline;
}
}

Expand All @@ -52,7 +66,7 @@
}

.social-buttons__service-error {
color: red;
color: $alert-red;
font-size: 11px;
margin: 0 10px 10px 10px;
margin: 0 10px 10px;
}
15 changes: 12 additions & 3 deletions client/components/social-buttons/google.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,17 +96,26 @@ class GoogleLoginButton extends Component {
return (
<div>
<button className="social-buttons__button button" onClick={ this.handleClick } disabled={ buttonDisabled }>
<svg className="social-buttons__logo" width="20" height="20" viewBox="0 0 20 20" xmlns="http:https://www.w3.org/2000/svg">
{ /* eslint-disable max-len */ }
{ /* eslint-disable max-len */ }
<svg className="social-buttons__logo enabled" width="20" height="20" viewBox="0 0 20 20"xmlns="http:https://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path d="M19.6 10.227c0-.709-.064-1.39-.182-2.045H10v3.868h5.382a4.6 4.6 0 0 1-1.996 3.018v2.51h3.232c1.891-1.742 2.982-4.305 2.982-7.35z" fill="#4285F4" />
<path d="M10 20c2.7 0 4.964-.895 6.618-2.423l-3.232-2.509c-.895.6-2.04.955-3.386.955-2.605 0-4.81-1.76-5.595-4.123H1.064v2.59A9.996 9.996 0 0 0 10 20z" fill="#34A853" />
<path d="M4.405 11.9c-.2-.6-.314-1.24-.314-1.9 0-.66.114-1.3.314-1.9V5.51H1.064A9.996 9.996 0 0 0 0 10c0 1.614.386 3.14 1.064 4.49l3.34-2.59z" fill="#FBBC05" />
<path d="M10 3.977c1.468 0 2.786.505 3.823 1.496l2.868-2.868C14.959.99 12.695 0 10 0 6.09 0 2.71 2.24 1.064 5.51l3.34 2.59C5.192 5.736 7.396 3.977 10 3.977z" fill="#EA4335" />
{ /* eslint-enable max-len */ }
</g>
</svg>

<svg className="social-buttons__logo disabled" width="20" height="20" viewBox="0 0 20 20" xmlns="http:https://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path d="M19.6 10.227c0-.709-.064-1.39-.182-2.045H10v3.868h5.382a4.6 4.6 0 0 1-1.996 3.018v2.51h3.232c1.891-1.742 2.982-4.305 2.982-7.35z" fill="#e9eff3" />
<path d="M10 20c2.7 0 4.964-.895 6.618-2.423l-3.232-2.509c-.895.6-2.04.955-3.386.955-2.605 0-4.81-1.76-5.595-4.123H1.064v2.59A9.996 9.996 0 0 0 10 20z" fill="#e9eff3" />
<path d="M4.405 11.9c-.2-.6-.314-1.24-.314-1.9 0-.66.114-1.3.314-1.9V5.51H1.064A9.996 9.996 0 0 0 0 10c0 1.614.386 3.14 1.064 4.49l3.34-2.59z" fill="#e9eff3" />
<path d="M10 3.977c1.468 0 2.786.505 3.823 1.496l2.868-2.868C14.959.99 12.695 0 10 0 6.09 0 2.71 2.24 1.064 5.51l3.34 2.59C5.192 5.736 7.396 3.977 10 3.977z" fill="#e9eff3" />
</g>
</svg>
{ /* eslint-enable max-len */ }

<span className="social-buttons__service-name">
{ this.props.translate( 'Continue with %(service)s', {
args: { service: 'Google' },
Expand Down