Accept Invite

- Render a footer link to accept a follower invite
by email subscription only.

- modifying the route to accept a subscription activation key
and a subscription auth key via url context

- Updating wpcom undocumented to add an activation
to the request so that we can accept follower invites by email only.

- redirect user to subscribe.wordpress.com with their auth key
so they can view / manage their subscription

client/components/signup-form/index.jsx

@@ -374,7 +374,7 @@ export default React.createClass( {
 			<div>
 				{ this.getNotice() }
 				{ this.termsOfServiceLink() }
-				<FormButton className="signup-form__submit">
+				<FormButton className="signup-form__submit" disabled={ this.state.submitting || this.props.disabled }>
 					{ this.props.submitButtonText }
 				</FormButton>
 			</div>

client/lib/invites/actions.js

@@ -63,8 +63,7 @@ export function acceptInvite( invite, callback, bearerToken ) {
 		wpcom.loadToken( bearerToken );
 	}
 	return wpcom.undocumented().acceptInvite(
-		invite.blog_id,
-		invite.invite_slug,
+		invite,
 		callback
 	);
 }

client/my-sites/invites/controller.js

@@ -17,7 +17,10 @@ export function acceptInvite( context ) {
 	context.layout.setState( { noSidebar: true } );
 
 	React.render(
-		React.createElement( InviteAccept, context.params ),
+		React.createElement(
+			InviteAccept,
+			context.params
+		),
 		document.getElementById( 'primary' )
 	);
 }

client/my-sites/invites/index.js

@@ -13,4 +13,9 @@ export default () => {
 		'/accept-invite/:site_id/:invitation_key',
 		acceptInvite
 	);
+
+	page(
+		'/accept-invite/:site_id/:invitation_key/:activation_key/:auth_key',
+		acceptInvite
+	);
 };

client/my-sites/invites/invite-accept-logged-out/index.jsx

@@ -43,7 +43,7 @@ export default React.createClass( {
 		);
 	},
 
-	getFormHeader() {
+	renderFormHeader() {
 		return (
 			<InviteFormHeader { ...this.props } />
 		);
@@ -60,11 +60,40 @@ export default React.createClass( {
 		)
 	},
 
-	footerLink() {
+	subscribeUserByEmailOnly() {
+		this.setState( { submitting: true } );
+		acceptInvite(
+			this.props.invite,
+			( error ) => {
+				if ( error ) {
+					this.setState( { error } );
+				} else {
+					window.location = 'https://subscribe.wordpress.com?update=activate&email=' + encodeURIComponent( this.props.invite.meta.sent_to ) + '&key=' + this.props.invite.authKey;
+				}
+			}
+		);
+	},
+
+	renderFooterLink() {
 		let logInUrl = config( 'login_url' ) + '?redirect_to=' + encodeURIComponent( window.location.href );
 		return (
-			<a href={ logInUrl } className="logged-out-form__link">
-				{ this.translate( 'Already have a WordPress.com account? Log in now.' ) }
+			<div>
+				<a href={ logInUrl } className="logged-out-form__link">
+					{ this.translate( 'Already have a WordPress.com account? Log in now.' ) }
+				</a>
+				{ this.renderEmailOnlySubscriptionLink() }
+			</div>
+		);
+	},
+
+	renderEmailOnlySubscriptionLink() {
+		if ( this.props.invite.meta.role !== 'follower' || ! this.props.invite.activationKey ) {
+			return null;
+		}
+
+		return (
+			<a onClick={ this.subscribeUserByEmailOnly } className="logged-out-form__link">
+				{ this.translate( 'Follow by email subscription only.' ) }
 			</a>
 		);
 	},
@@ -75,12 +104,12 @@ export default React.createClass( {
 				<SignupForm
 					getRedirectToAfterLoginUrl={ this.getRedirectToAfterLoginUrl }
 					disabled={ this.state.submitting }
-					formHeader={ this.getFormHeader() }
+					formHeader={ this.renderFormHeader() }
 					submitting={ this.state.submitting }
 					save={ this.save }
 					submitForm={ this.submitForm }
 					submitButtonText={ this.submitButtonText() }
-					footerLink={ this.footerLink() }
+					footerLink={ this.renderFooterLink() }
 					email={ get( this.props, 'invite.meta.sent_to' ) }
 				/>
 				{ this.state.userData && this.loginUser() }

client/my-sites/invites/invite-accept/index.jsx

@@ -46,6 +46,12 @@ export default React.createClass( {
 	refreshInvite() {
 		const invite = InvitesStore.getInvite( this.props.site_id, this.props.invitation_key );
 		const error = InvitesStore.getInviteError( this.props.site_id, this.props.invitation_key );
+
+		// add subscription-related keys to the invite
+		Object.assign( invite.invite, {
+			activationKey: this.props.activation_key,
+			authKey: this.props.auth_key
+		} );
 		this.setState( { invite, error } );
 	},
 

client/signup/logged-out-form/style.scss

@@ -25,4 +25,6 @@
 	display: block;
 	font-size: 12px;
 	text-align: center;
+	margin-bottom: 8px;
+	cursor: pointer;
 }

shared/lib/wpcom-undocumented/lib/undocumented.js

@@ -289,9 +289,11 @@ Undocumented.prototype.getInvite = function( siteId, inviteKey, fn ) {
 	this.wpcom.req.get( { path: '/sites/' + siteId + '/invites/' + inviteKey }, fn );
 };
 
-Undocumented.prototype.acceptInvite = function( siteId, inviteKey, fn ) {
+Undocumented.prototype.acceptInvite = function( invite, fn ) {
 	debug( '/sites/:site_id:/invites/:inviteKey:/accept query' );
-	this.wpcom.req.get( '/sites/' + siteId + '/invites/' + inviteKey + '/accept', fn );
+	this.wpcom.req.get( '/sites/' + invite.blog_id + '/invites/' + invite.invite_slug + '/accept', {
+		activate: invite.activationKey
+	}, fn );
 };
 
 /**