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

[WooCommerce] Fix inconsistent social login screen when email matches an existing account #87073

Merged
merged 7 commits into from
Feb 8, 2024
Merged

[WooCommerce] Fix inconsistent social login screen when email matches an existing account #87073

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
04a7f96
Update spinner for woo loading state
chihsuan Feb 1, 2024
653b5c5
Update reset password link for woo
chihsuan Feb 1, 2024
6ea3fd3
Do not render wordpress logo if it's woo
chihsuan Feb 1, 2024
cf18119
Update woo login screen style
chihsuan Feb 1, 2024
334041b
Fix button style
chihsuan Feb 1, 2024
2df44e3
Fix "send me a login link"
chihsuan Feb 6, 2024
82ea6b1
Fix gloal error notice for woo
chihsuan Feb 6, 2024
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
9 changes: 7 additions & 2 deletions client/blocks/login/login-form.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import page from '@automattic/calypso-router';
import { Button, Card, FormInputValidation, FormLabel, Gridicon } from '@automattic/components';
import { alert } from '@automattic/components/src/icons';
import { localizeUrl } from '@automattic/i18n-utils';
import { Spinner } from '@wordpress/components';
import { Icon } from '@wordpress/icons';
import classNames from 'classnames';
import { localize } from 'i18n-calypso';
Expand Down Expand Up @@ -859,8 +860,12 @@ export class LoginForm extends Component {
<p className="login__form-terms">{ socialToS }</p>
{ isWoo && ! isPartnerSignup && this.renderLostPasswordLink() }
<div className="login__form-action">
<FormsButton primary busy={ isSendingEmail } disabled={ isSubmitButtonDisabled }>
{ this.getLoginButtonText() }
<FormsButton
primary
busy={ ! isWoo && isSendingEmail }
disabled={ isSubmitButtonDisabled }
>
{ isWoo && isSendingEmail ? <Spinner /> : this.getLoginButtonText() }
</FormsButton>
</div>

Expand Down
42 changes: 33 additions & 9 deletions client/layout/masterbar/woo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@import "@automattic/typography/styles/woo-commerce";

.woo {
$woo-purple-40: #966ccf;
$woo-purple-50: #7f54b3;
$woo-purple-60: #674399;
$woo-purple-70: #533582;
Expand Down Expand Up @@ -63,17 +64,21 @@
}

a,
a:visited,
a:hover,
.wp-login__links a:hover,
.wp-login__links button:hover,
.button:not(.social-buttons__button) {
.wp-login__links a,
.wp-login__links button,
.button:not(.social-buttons__button),
.magic-login__footer a {
font-size: $woo-font-size-base;
line-height: 28px;
text-align: center;
color: $gray-50;
text-decoration: underline;
letter-spacing: 0;

&:hover,
&:visited {
color: $gray-50;
}
}

.button:not(.social-buttons__button) {
Expand All @@ -86,13 +91,20 @@
}

.button.is-primary,
.button.is-primary[disabled],
.login .button.is-primary {
background: $woo-purple-60;
background-color: $woo-purple-60;
border: none;
color: #fff;
width: 100%;

&.is-busy {
background-image: none;
}

&:hover {
background-color: $woo-purple-40;
}

&:disabled {
background-color: var(--studio-gray-0);
color: var(--studio-gray-20);
Expand Down Expand Up @@ -137,9 +149,9 @@
line-height: 20px; /* 142.857% */
letter-spacing: -0.24px;


a,
a:visited,
a:hover, {
a:visited, {
color: $woo-purple-60;
font-size: rem(14px);
font-style: normal;
Expand All @@ -148,6 +160,10 @@
letter-spacing: -0.24px;
text-decoration: none;
}

a:hover {
color: $woo-purple-40;
}
}
}

Expand Down Expand Up @@ -314,6 +330,10 @@
font-weight: 400;
font-size: 1rem;
text-decoration: none;

&:hover {
color: $woo-purple-40;
}
}

@media screen and ( max-width: 660px ) {
Expand Down Expand Up @@ -662,6 +682,10 @@
display: none;
}

.app-promo.magic-link-app-promo {
padding: 24px;
}

.auth-form__social-buttons-tos {
margin-top: 24px;
font-size: $woo-font-size-small;
Expand Down
29 changes: 27 additions & 2 deletions client/login/magic-login/emailed-login-link-successfully.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
import { recordTracksEvent } from '@automattic/calypso-analytics';
import page from '@automattic/calypso-router';
import { Card } from '@automattic/components';
import { localize } from 'i18n-calypso';
import { get } from 'lodash';
import PropTypes from 'prop-types';
import { Component } from 'react';
import { connect } from 'react-redux';
import RedirectWhenLoggedIn from 'calypso/components/redirect-when-logged-in';
import { preventWidows } from 'calypso/lib/formatting/prevent-widows';
import { lostPassword } from 'calypso/lib/paths';
import { isReactLostPasswordScreenEnabled } from 'calypso/lib/login';
import { isWooOAuth2Client } from 'calypso/lib/oauth2-clients';
import { login, lostPassword } from 'calypso/lib/paths';
import {
recordPageViewWithClientId as recordPageView,
enhanceWithSiteType,
} from 'calypso/state/analytics/actions';
import { getRedirectToOriginal } from 'calypso/state/login/selectors';
import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selectors';
import getCurrentLocaleSlug from 'calypso/state/selectors/get-current-locale-slug';
import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
import { withEnhancers } from 'calypso/state/utils';
import { MagicLoginEmailWrapper } from './magic-login-email/magic-login-email-wrapper';
class EmailedLoginLinkSuccessfully extends Component {
Expand All @@ -24,8 +31,22 @@ class EmailedLoginLinkSuccessfully extends Component {
this.props.recordPageView( '/log-in/link', 'Login > Link > Emailed' );
}

onLostPasswordClick = () => {
onLostPasswordClick = ( event ) => {
recordTracksEvent( 'calypso_magic_login_lost_password_click' );

if ( isReactLostPasswordScreenEnabled() && this.props.isWoo ) {
event.preventDefault();

page(
login( {
redirectTo: this.props.redirectTo,
locale: this.props.locale,
action: 'lostpassword',
oauth2ClientId: this.props.oauth2Client && this.props.oauth2Client.id,
from: get( this.props.currentQuery, 'from' ),
} )
);
}
};

render() {
Expand Down Expand Up @@ -81,6 +102,10 @@ class EmailedLoginLinkSuccessfully extends Component {

const mapState = ( state ) => ( {
locale: getCurrentLocaleSlug( state ),
isWoo: isWooOAuth2Client( getCurrentOAuth2Client( state ) ),
currentQuery: getCurrentQueryArguments( state ),
redirectTo: getRedirectToOriginal( state ),
oauth2Client: getCurrentOAuth2Client( state ),
} );

const mapDispatch = {
Expand Down
6 changes: 6 additions & 0 deletions client/login/magic-login/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
isGravatarOAuth2Client,
isWPJobManagerOAuth2Client,
isGravPoweredOAuth2Client,
isWooOAuth2Client,
} from 'calypso/lib/oauth2-clients';
import { login } from 'calypso/lib/paths';
import {
Expand Down Expand Up @@ -190,6 +191,10 @@ class MagicLogin extends Component {
}

renderGutenboardingLogo() {
if ( this.props.isWoo ) {
return null;
}

return (
<div className="magic-login__gutenboarding-wordpress-logo">
<svg
Expand Down Expand Up @@ -508,6 +513,7 @@ const mapState = ( state ) => ( {
getCurrentQueryArguments( state ).email_address ||
getInitialQueryArguments( state ).email_address,
localeSuggestions: getLocaleSuggestions( state ),
isWoo: isWooOAuth2Client( getCurrentOAuth2Client( state ) ),
} );

const mapDispatch = {
Expand Down
Loading