People: Refresh invite UI with Form components

client/my-sites/people/controller.js

@@ -77,6 +77,8 @@ function renderInvitePeople( context ) {
 		sites.once( 'change', () => page( context.path ) );
 	}
 
+	titleActions.setTitle( i18n.translate( 'Invite People', { textOnly: true } ), { siteID: route.getSiteFragment( context.path ) } );
+
 	ReactDom.render(
 		React.createElement( InvitePeople, {
 			site: sites.getSelectedSite()

client/my-sites/people/invite-people/index.jsx

@@ -1,12 +1,25 @@
+/**
+ * External dependencies
+ */
 import React from 'react';
 import LinkedStateMixin from 'react-addons-linked-state-mixin';
+import page from 'page';
+import get from 'lodash/object/get';
 
+/**
+ * Internal dependencies
+ */
 import RoleSelect from 'my-sites/people/role-select';
 import TokenField from 'components/token-field';
 import FormTextArea from 'components/forms/form-textarea';
 import FormButton from 'components/forms/form-button';
+import FormFieldset from 'components/forms/form-fieldset';
+import FormLabel from 'components/forms/form-label';
+import FormSettingExplanation from 'components/forms/form-setting-explanation';
 import { sendInvites } from 'lib/invites/actions';
 import Card from 'components/card';
+import Main from 'components/main';
+import HeaderCake from 'components/header-cake';
 
 export default React.createClass( {
 	displayName: 'InvitePeople',
@@ -35,7 +48,9 @@ export default React.createClass( {
 		this.setState( { usernamesOrEmails: tokens } );
 	},
 
-	submitForm() {
+	submitForm( event ) {
+		event.preventDefault();
+
 		this.setState( { sendingInvites: true } );
 		sendInvites( this.props.site.ID, this.state.usernamesOrEmails, this.state.role, this.state.message, ( error, data ) => {
 			this.setState( {
@@ -45,6 +60,21 @@ export default React.createClass( {
 		} );
 	},
 
+	goBack() {
+		const siteSlug = get( this.props, 'site.slug' );
+		const fallback = siteSlug ? ( '/people/team/' + siteSlug ) : '/people/team';
+		// Go back to last route with /people/team/$site as the fallback
+		page.back( fallback );
+	},
+
+	renderRoleExplanation() {
+		return (
+			<a target="_blank" href="http://en.support.wordpress.com/user-roles/">
+				{ this.translate( 'Learn more about roles' ) }
+			</a>
+		);
+	},
+
 	renderResponse() {
 		return (
 			<Card>
@@ -59,37 +89,60 @@ export default React.createClass( {
 	},
 
 	render() {
-		if ( this.props.site.jetpack ) {
-			return ( <p>Invites not currently available for Jetpack sites.</p> );
-		}
 		return (
-			<div>
+			<Main>
+				<HeaderCake isCompact onClick={ this.goBack }/>
 				<Card>
-					<label>Usernames or Emails</label>
-					<TokenField
-						value={ this.state.usernamesOrEmails }
-						onChange={ this.onTokensChange } />
-					<RoleSelect
-						id="role"
-						name="role"
-						key="role"
-						siteId={ this.props.site.ID }
-						valueLink={ this.linkState( 'role' ) }
-						disabled={ this.state.sendingInvites } />
-					<label>Message</label>
-					<FormTextArea
-						name="message"
-						valueLink={ this.linkState( 'message' ) }
-						disabled={ this.state.sendingInvites }>
-					</FormTextArea>
-					<FormButton
-						onClick={ this.submitForm }
-						disabled={ this.state.sendingInvites }>
-							Send Invites
-					</FormButton>
+					<form onSubmit={ this.submitForm } >
+						<FormFieldset>
+							<FormLabel>{ this.translate( 'Usernames or Emails' ) }</FormLabel>
+							<TokenField
+								value={ this.state.usernamesOrEmails }
+								onChange={ this.onTokensChange } />
+							<FormSettingExplanation>
+								{ this.translate(
+									'Invite up to 10 email addresses and/or WordPress.com usernames.. ' +
+									'Those needing a username will be sent instructions on how to create one.'
+								) }
+							</FormSettingExplanation>
+						</FormFieldset>
+
+						<RoleSelect
+							id="role"
+							name="role"
+							key="role"
+							siteId={ this.props.site.ID }
+							valueLink={ this.linkState( 'role' ) }
+							disabled={ this.state.sendingInvites }
+							explanation={ this.renderRoleExplanation() }/>
+
+						<FormFieldset>
+							<FormLabel htmlFor="message">{ this.translate( 'Custom Message' ) }</FormLabel>
+							<FormTextArea
+								name="message"
+								id="message"
+								valueLink={ this.linkState( 'message' ) }
+								disabled={ this.state.sendingInvites } />
+							<FormSettingExplanation>
+								{ this.translate(
+									'(Optional) You can enter a custom message of up to 500 characters that will be included in the invitation to the user(s).'
+								) }
+							</FormSettingExplanation>
+						</FormFieldset>
+
+						<FormButton disabled={ this.state.sendingInvites }>
+							{ this.translate(
+								'Send Invitation',
+								'Send Invitations', {
+									count: this.state.usernamesOrEmails.length || 1,
+									context: 'Button label'
+								}
+							) }
+						</FormButton>
+					</form>
 				</Card>
 				{ this.state.response && this.renderResponse() }
-			</div>
+			</Main>
 		);
 	}
 } );

client/my-sites/people/role-select/README.md

@@ -2,3 +2,7 @@ RoleSelect
 ================
 
 This component listens to changes from the `RolesStore` and displays a select of the roles for a site.
+
+### Props
+* siteId - (int) siteId for site from which to fetch roles
+* explanation - (string) Optional explanation to be displayed below select in a FormSettingExplanation

client/my-sites/people/role-select/index.jsx

@@ -10,7 +10,8 @@ var RolesStore = require( 'lib/site-roles/store' ),
 	RolesActions = require( 'lib/site-roles/actions' ),
 	FormFieldset = require( 'components/forms/form-fieldset' ),
 	FormLabel = require( 'components/forms/form-label' ),
-	FormSelect = require( 'components/forms/form-select' );
+	FormSelect = require( 'components/forms/form-select' ),
+	FormSettingExplanation = require( 'components/forms/form-setting-explanation' );
 
 var debug = debugFactory( 'calypso:role-select' );
 
@@ -90,6 +91,11 @@ module.exports = React.createClass( {
 						} )
 					}
 				</FormSelect>
+				{ this.props.explanation &&
+					<FormSettingExplanation>
+						{ this.props.explanation }
+					</FormSettingExplanation>
+				}
 			</FormFieldset>
 		);
 	}