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

Domains: Don't allow unverified email for domain registration and G Suite #16166

Merged
merged 2 commits into from
Jul 31, 2017
Merged

Domains: Don't allow unverified email for domain registration and G Suite #16166

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5b76157
Domains: Require verified email for domain reg and G Suite purchases
Jul 12, 2017
b54c3e9
Email verification: Add key to fix a React warning
Jul 12, 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
Next Next commit
Domains: Require verified email for domain reg and G Suite purchases 
The WPCOM email is used by default for domain registration and G Suite
purchases and it's important that it's a valid email. User might have
made a typo in their email during registration and we should wait for
them to verify the email before allowing further purchases.
  • Loading branch information
Igor Klimer committed Jul 12, 2017
commit 5b761577456b7d937551611a2951ec513315e125
57 changes: 32 additions & 25 deletions client/my-sites/domains/domain-management/add-google-apps/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,29 @@
/**
* External dependencies
*/
const React = require( 'react' ),
page = require( 'page' );
import React from 'react';
import page from 'page';
import { localize } from 'i18n-calypso';

/**
* Internal dependencies
*/
const Main = require( 'components/main' ),
Header = require( 'my-sites/domains/domain-management/components/header' ),
AddEmailAddressesCard = require( './add-email-addresses-card' ),
paths = require( 'my-sites/domains/paths' ),
{ hasGoogleAppsSupportedDomain } = require( 'lib/domains' ),
SectionHeader = require( 'components/section-header' );
import Main from 'components/main';
import Header from 'my-sites/domains/domain-management/components/header';
import AddEmailAddressesCard from './add-email-addresses-card';
import paths from 'my-sites/domains/paths';
import { hasGoogleAppsSupportedDomain } from 'lib/domains';
import SectionHeader from 'components/section-header';
import EmailVerificationGate from 'components/email-verification/email-verification-gate';

const AddGoogleApps = React.createClass( {
class AddGoogleApps extends React.Component {
componentDidMount() {
this.ensureCanAddEmail();
},
}

componentDidUpdate() {
this.ensureCanAddEmail();
},
}

ensureCanAddEmail() {
const needsRedirect = (
Expand All @@ -37,35 +39,40 @@ const AddGoogleApps = React.createClass( {

page.replace( path );
}
},
}

render() {
const { translate } = this.props;

return (
<Main className="domain-management-add-google-apps">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This class is not defined anywhere and seems to be useless.

<Main>
<Header
onClick={ this.goToEmail }
selectedDomainName={ this.props.selectedDomainName }>
{ this.translate( 'Add G Suite' ) }
{ translate( 'Add G Suite' ) }
</Header>

<SectionHeader label={ this.translate( 'Add G Suite' ) } />

<AddEmailAddressesCard
domains={ this.props.domains }
selectedDomainName={ this.props.selectedDomainName }
selectedSite={ this.props.selectedSite } />
<EmailVerificationGate
noticeText={ translate( 'You must verify your email to purchase G Suite.' ) }
noticeStatus="is-info">
<SectionHeader label={ translate( 'Add G Suite' ) } />
<AddEmailAddressesCard
domains={ this.props.domains }
selectedDomainName={ this.props.selectedDomainName }
selectedSite={ this.props.selectedSite } />
</EmailVerificationGate>
</Main>
);
},
}

goToEmail() {
goToEmail = () => {
const path = paths.domainManagementEmail(
this.props.selectedSite.slug,
this.props.selectedDomainName
);

page( path );
}
} );
};
}

module.exports = AddGoogleApps;
export default localize( AddGoogleApps );
77 changes: 44 additions & 33 deletions client/my-sites/domains/domain-management/email/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
/**
* External dependencies
*/
import React from 'react';
import React, { PropTypes } from 'react';
import page from 'page';
import { localize } from 'i18n-calypso';

/**
* Internal dependencies
Expand All @@ -24,20 +25,21 @@ import {
getSelectedDomain
} from 'lib/domains';
import { isPlanFeaturesEnabled } from 'lib/plans';
import EmailVerificationGate from 'components/email-verification/email-verification-gate';

const Email = React.createClass( {
propTypes: {
domains: React.PropTypes.object.isRequired,
products: React.PropTypes.object.isRequired,
selectedDomainName: React.PropTypes.string,
selectedSite: React.PropTypes.oneOfType( [
React.PropTypes.object,
React.PropTypes.bool
class Email extends React.Component {
static propTypes = {
domains: PropTypes.object.isRequired,
products: PropTypes.object.isRequired,
selectedDomainName: PropTypes.string,
selectedSite: PropTypes.oneOfType( [
PropTypes.object,
PropTypes.bool
] ).isRequired,
user: React.PropTypes.object.isRequired,
googleAppsUsers: React.PropTypes.array.isRequired,
googleAppsUsersLoaded: React.PropTypes.bool.isRequired
},
user: PropTypes.object.isRequired,
googleAppsUsers: PropTypes.array.isRequired,
googleAppsUsersLoaded: PropTypes.bool.isRequired
};

render() {
return (
Expand All @@ -50,15 +52,15 @@ const Email = React.createClass( {
{ this.content() }
</Main>
);
},
}

headerOrUpgradesNavigation() {
if ( this.props.selectedDomainName ) {
return (
<Header
onClick={ this.goToEditOrList }
selectedDomainName={ this.props.selectedDomainName }>
{ this.translate( 'Email' ) }
{ this.props.translate( 'Email' ) }
</Header>
);
}
Expand All @@ -68,10 +70,14 @@ const Email = React.createClass( {
cart={ this.props.cart }
selectedSite={ this.props.selectedSite } />
);
},
}

content() {
if ( ! ( this.props.domains.hasLoadedFromServer && this.props.googleAppsUsersLoaded && this.props.products.gapps ) ) {
if ( ! (
this.props.domains.hasLoadedFromServer &&
this.props.googleAppsUsersLoaded &&
this.props.products.gapps
) ) {
return <Placeholder />;
}

Expand All @@ -85,26 +91,27 @@ const Email = React.createClass( {
return this.addGoogleAppsCard();
}
return this.emptyContent();
},
}

emptyContent() {
const {
selectedSite,
selectedDomainName,
translate,
} = this.props;
let emptyContentProps;

if ( selectedDomainName ) {
emptyContentProps = {
title: this.translate( 'G Suite is not supported on this domain' ),
line: this.translate( 'Only domains registered with WordPress.com are eligible for G Suite.' ),
secondaryAction: this.translate( 'Add Email Forwarding' ),
title: translate( 'G Suite is not supported on this domain' ),
line: translate( 'Only domains registered with WordPress.com are eligible for G Suite.' ),
secondaryAction: translate( 'Add Email Forwarding' ),
secondaryActionURL: paths.domainManagementEmailForwarding( selectedSite.slug, selectedDomainName )
};
} else {
emptyContentProps = {
title: this.translate( "Enable powerful email features." ),
line: this.translate(
title: translate( 'Enable powerful email features.' ),
line: translate(
'To set up email forwarding, G Suite, and other email ' +
'services for your site, upgrade your site’s web address ' +
'to a professional custom domain.'
Expand All @@ -113,40 +120,44 @@ const Email = React.createClass( {
}
Object.assign( emptyContentProps, {
illustration: '/calypso/images/drake/drake-whoops.svg',
action: this.translate( 'Add a Custom Domain' ),
action: translate( 'Add a Custom Domain' ),
actionURL: '/domains/add/' + this.props.selectedSite.slug
} );

return (
<EmptyContent { ...emptyContentProps } />
);
},
}

googleAppsUsersCard() {
return <GoogleAppsUsersCard { ...this.props } />;
},
}

addGoogleAppsCard() {
return (
<div>
<AddGoogleAppsCard { ...this.props } />
<EmailVerificationGate
noticeText={ this.props.translate( 'You must verify your email to purchase G Suite.' ) }
noticeStatus="is-info">
<AddGoogleAppsCard { ...this.props } />
</EmailVerificationGate>
{ this.props.selectedDomainName && <VerticalNav>
<VerticalNavItem
path={ paths.domainManagementEmailForwarding( this.props.selectedSite.slug, this.props.selectedDomainName ) }>
{ this.translate( 'Email Forwarding' ) }
{ this.props.translate( 'Email Forwarding' ) }
</VerticalNavItem>
</VerticalNav> }
</div>
);
},
}

goToEditOrList() {
goToEditOrList = () => {
if ( this.props.selectedDomainName ) {
page( paths.domainManagementEdit( this.props.selectedSite.slug, this.props.selectedDomainName ) );
} else {
page( paths.domainManagementList( this.props.selectedSite.slug ) );
}
}
} );
};
}

module.exports = Email;
export default localize( Email );
31 changes: 18 additions & 13 deletions client/my-sites/domains/domain-search/domain-search.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,11 @@ import Main from 'components/main';
import upgradesActions from 'lib/upgrades/actions';
import cartItems from 'lib/cart-values/cart-items';
import { currentUserHasFlag } from 'state/current-user/selectors';
import isSiteUpgradeable from 'state/selectors/is-site-upgradeable';
import { isSiteUpgradeable } from 'state/selectors';
import { getSelectedSite, getSelectedSiteId, getSelectedSiteSlug } from 'state/ui/selectors';
import QueryProductsList from 'components/data/query-products-list';
import { recordAddDomainButtonClick, recordRemoveDomainButtonClick } from 'state/domains/actions';
import EmailVerificationGate from 'components/email-verification/email-verification-gate';

class DomainSearch extends Component {
static propTypes = {
Expand Down Expand Up @@ -120,18 +121,22 @@ class DomainSearch extends Component {
cart={ this.props.cart }
selectedSite={ selectedSite } />

<RegisterDomainStep
path={ this.props.context.path }
suggestion={ this.props.context.params.suggestion }
domainsWithPlansOnly={ this.props.domainsWithPlansOnly }
onDomainsAvailabilityChange={ this.handleDomainsAvailabilityChange }
onAddDomain={ this.handleAddRemoveDomain }
onAddMapping={ this.handleAddMapping }
cart={ this.props.cart }
selectedSite={ selectedSite }
offerMappingOption
basePath={ this.props.basePath }
products={ this.props.productsList } />
<EmailVerificationGate
noticeText={ translate( 'You must verify your email to register new domains.' ) }
noticeStatus="is-info">
<RegisterDomainStep
path={ this.props.context.path }
suggestion={ this.props.context.params.suggestion }
domainsWithPlansOnly={ this.props.domainsWithPlansOnly }
onDomainsAvailabilityChange={ this.handleDomainsAvailabilityChange }
onAddDomain={ this.handleAddRemoveDomain }
onAddMapping={ this.handleAddMapping }
cart={ this.props.cart }
selectedSite={ selectedSite }
offerMappingOption
basePath={ this.props.basePath }
products={ this.props.productsList } />
</EmailVerificationGate>
</div>
</span>
);
Expand Down