Components: Adds LoggedOutForm component

assets/stylesheets/_components.scss

@@ -41,6 +41,7 @@
 @import 'components/infinite-list/style';
 @import 'components/info-popover/style';
 @import 'components/input-chrono/style';
+@import 'components/logged-out-form/style';
 @import 'components/like-button/style';
 @import 'components/loading-placeholder/style';
 @import 'components/main/style';
@@ -291,7 +292,6 @@
 @import 'signup/style';
 @import 'signup/flow-progress-indicator/style';
 @import 'signup/locale-suggestions/style';
-@import 'signup/logged-out-form/style';
 @import 'signup/phone-signup-form/style';
 @import 'signup/previous-step-button/style';
 @import 'signup/processing-screen/style';

client/components/logged-out-form/README.md

@@ -0,0 +1,43 @@
+LoggedOutForm
+=============
+This component is meant to be used when creating form for logged out users. You can find this component in use within the signup framework at `client/signup` and within the invite acceptance section within `client/my-sites/invite-accept`.
+
+## Usage
+
+```js
+import LoggedOutForm from 'components/logged-out-form';
+import LoggedOutFormFooter from 'components/logged-out-form-footer';
+import LoggedOutFormLinks from 'components/logged-out-form/links';
+import LoggedOutFormLinkItem from 'components/logged-out-form/link-item';
+
+import config from 'config';
+import Button from 'components/button';
+import FormTextInput from 'components/forms/form-text-input';
+
+const MyLoggedOutForm = React.createClass( {
+	handleSubmit( event ) {
+		event.preventDefault();
+
+		// Handle form submit
+	}
+
+	render() {
+		return (
+			<LoggedOutForm onSubmit={ this.handleSubmit }>
+				<FormTextInput placeholder="I am an input"/>
+
+				<LoggedOutFormFooter>
+					<Button primary>Submit</Button>
+				</LoggedOutFormFooter>
+			</LoggedOutForm>
+
+			<LoggedOutFormLinks>
+				<LoggedOutFormLinkItem href={ config( 'login_url' ) }>
+					Sign in as a different user
+				</LoggedOutFormLinkItem>
+			</LoggedOutFormLinks>
+		);
+	}
+} );
+
+```

client/components/logged-out-form/footer.jsx

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import Card from 'components/card';
+
+export default React.createClass( {
+	displayName: 'LoggedOutFormFooter',
+
+	propTypes: {
+		children: React.PropTypes.node.isRequired,
+		className: React.PropTypes.string
+	},
+
+	render() {
+		return (
+			<Card className={ classnames( 'logged-out-form__footer', this.props.className ) } >
+				{ this.props.children }
+			</Card>
+		);
+	}
+} );

client/components/logged-out-form/index.jsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classnames from 'classnames';
+import omit from 'lodash/object/omit';
+
+/**
+ * Internal dependencies
+ */
+import Card from 'components/card';
+
+export default React.createClass( {
+	displayName: 'LoggedOutForm',
+
+	propTypes: {
+		children: React.PropTypes.node.isRequired,
+		className: React.PropTypes.string
+	},
+
+	render() {
+		return (
+			<Card className={ classnames( 'logged-out-form', this.props.className ) } >
+				<form { ...omit( this.props, 'className' ) }>
+					{ this.props.children }
+				</form>
+			</Card>
+		);
+	}
+} );

client/components/logged-out-form/link-item.jsx

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classnames from 'classnames';
+import omit from 'lodash/object/omit';
+
+export default React.createClass( {
+	displayName: 'LoggedOutFormLinkItem',
+
+	propTypes: {
+		className: React.PropTypes.string
+	},
+
+	render() {
+		return (
+			<a
+				{ ...omit( this.props, 'classNames' ) }
+				className={ classnames( 'logged-out-form__link-item', this.props.className ) }
+			>
+				{ this.props.children }
+			</a>
+		);
+	}
+} );

client/components/logged-out-form/links.jsx

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classnames from 'classnames';
+import omit from 'lodash/object/omit';
+
+export default React.createClass( {
+	displayName: 'LoggedOutFormLinks',
+
+	propTypes: {
+		children: React.PropTypes.node.isRequired,
+		className: React.PropTypes.string
+	},
+
+	render() {
+		return (
+			<div
+				{ ...omit( this.props, 'classNames' ) }
+				className={ classnames( 'logged-out-form__links', this.props.className ) }
+			>
+				{ this.props.children }
+			</div>
+		);
+	}
+} );

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

@@ -0,0 +1,50 @@
+.logged-out-form,
+.logged-out-form__links {
+	margin: 0 auto;
+	max-width: 400px;
+}
+
+.logged-out-form__footer {
+	background: lighten( $gray, 34% );
+	border-top: 1px solid lighten( $gray, 30% );
+	box-shadow: none;
+	margin: 0 -16px -16px -16px;
+	padding: 16px;
+
+	@include breakpoint( ">480px" ) {
+		margin: 0 -24px -24px -24px;
+		padding: 24px;
+	}
+
+	.button.is-primary {
+		float: none;
+		margin: 0;
+		width: 100%;
+	}
+}
+
+.logged-out-form__link-item {
+	border-bottom: 1px solid lighten( $gray, 20% );
+	color: $gray;
+	display: block;
+	font-family: $sans;
+	font-size: 14px;
+	line-height: 21px;
+	padding: 16px 0 16px 16px;
+
+	@include breakpoint( ">480px" ) {
+		padding-left: 24px;
+	}
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	&:visited {
+		color: $gray;
+	}
+
+	&:hover {
+		color: $blue-medium;
+	}
+}

client/components/signup-form/index.jsx

@@ -1,31 +1,35 @@
 /**
  * External dependencies
  */
-import React from 'react'
-import map from 'lodash/collection/map'
-import forEach from 'lodash/collection/forEach'
-import first from 'lodash/array/first'
-import includes from 'lodash/collection/includes'
-import keys from 'lodash/object/keys'
-import debugModule from 'debug'
+import React from 'react';
+import map from 'lodash/collection/map';
+import forEach from 'lodash/collection/forEach';
+import first from 'lodash/array/first';
+import includes from 'lodash/collection/includes';
+import keys from 'lodash/object/keys';
+import debugModule from 'debug';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
-import wpcom from 'lib/wp'
-import config from 'config'
-import analytics from 'analytics'
-import ValidationFieldset from 'signup/validation-fieldset'
-import FormLabel from 'components/forms/form-label'
-import FormPasswordInput from 'components/forms/form-password-input'
-import FormSettingExplanation from 'components/forms/form-setting-explanation'
-import FormTextInput from 'components/forms/form-text-input'
-import FormButton from 'components/forms/form-button'
-import notices from 'notices'
-import Notice from 'components/notice'
-import LoggedOutForm from 'signup/logged-out-form'
-import formState from 'lib/form-state'
-import i18n from 'lib/mixins/i18n'
+import wpcom from 'lib/wp';
+import config from 'config';
+import analytics from 'analytics';
+import ValidationFieldset from 'signup/validation-fieldset';
+import FormLabel from 'components/forms/form-label';
+import FormPasswordInput from 'components/forms/form-password-input';
+import FormSettingExplanation from 'components/forms/form-setting-explanation';
+import FormTextInput from 'components/forms/form-text-input';
+import FormButton from 'components/forms/form-button';
+import notices from 'notices';
+import Notice from 'components/notice';
+import LoggedOutForm from 'components/logged-out-form';
+import formState from 'lib/form-state';
+import i18n from 'lib/mixins/i18n';
+import LoggedOutFormLinks from 'components/logged-out-form/links';
+import LoggedOutFormLinkItem from 'components/logged-out-form/link-item';
+import LoggedOutFormFooter from 'components/logged-out-form/footer';
 
 const VALIDATION_DELAY_AFTER_FIELD_CHANGES = 1500,
 	debug = debugModule( 'calypso:signup-form:form' );
@@ -371,13 +375,13 @@ export default React.createClass( {
 
 	formFooter() {
 		return (
-			<div>
+			<LoggedOutFormFooter>
 				{ this.getNotice() }
 				{ this.termsOfServiceLink() }
 				<FormButton className="signup-form__submit" disabled={ this.state.submitting || this.props.disabled }>
 					{ this.props.submitButtonText }
 				</FormButton>
-			</div>
+			</LoggedOutFormFooter>
 		);
 	},
 
@@ -398,25 +402,35 @@ export default React.createClass( {
 		if ( this.props.positionInFlow !== 0 ) {
 			return;
 		}
+
 		let logInUrl = this.localizeUrlWithSubdomain( config( 'login_url' ) );
 		if ( config.isEnabled( 'login' ) ) {
 			logInUrl = this.localizeUrlWithLastSlug( '/log-in' );
 		}
-		return <a href={ logInUrl } className="logged-out-form__link">{ this.translate( 'Already have a WordPress.com account? Log in now.' ) }</a>;
+		return (
+			<LoggedOutFormLinks>
+				<LoggedOutFormLinkItem href={ logInUrl }>
+					{ this.translate( 'Already have a WordPress.com account? Log in now.' ) }
+				</LoggedOutFormLinkItem>
+			</LoggedOutFormLinks>
+		);
 	},
 
 	render() {
 		return (
-			<LoggedOutForm
-				className='signup-form'
-				formFields={ this.formFields() }
-				formFooter={ this.props.formFooter || this.formFooter() }
-				formHeader={ this.props.formHeader }
-				footerLink={ this.props.footerLink || this.footerLink() }
-				locale={ this.props.locale }
-				onSubmit={ this.handleSubmit }
-				path={ this.props.path } />
+			<div className={ classNames( 'signup-form', this.props.className ) }>
+				<LoggedOutForm onSubmit={ this.handleSubmit } noValidate={ true }>
+					{ this.props.formHeader &&
+						<header className="signup-form__header">
+							{ this.props.formHeader }
+						</header>
+					}
+					{ this.formFields() }
+					{ this.props.formFooter || this.formFooter() }
+				</LoggedOutForm>
+
+				{ this.props.footerLink || this.footerLink() }
+			</div>
 		);
 	}
-
 } );

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

@@ -14,6 +14,8 @@ import Button from 'components/button';
 import config from 'config';
 import InviteFormHeader from 'my-sites/invites/invite-form-header';
 import { acceptInvite } from 'lib/invites/actions';
+import LoggedOutFormLinks from 'components/logged-out-form/links';
+import LoggedOutFormLinkItem from 'components/logged-out-form/link-item';
 
 export default React.createClass( {
 
@@ -34,7 +36,7 @@ export default React.createClass( {
 			signInLink = config( 'login_url' ) + '?redirect_to=' + encodeURIComponent( window.location.href );
 
 		return (
-			<div className={ classNames( 'logged-in-accept', this.props.className ) } >
+			<div className={ classNames( 'invite-accept-logged-in', this.props.className ) }>
 				<Card>
 					<InviteFormHeader { ...this.props } />
 					<div className="invite-accept-logged-in__join-as">
@@ -62,9 +64,12 @@ export default React.createClass( {
 						</Button>
 					</div>
 				</Card>
-				<a className="logged-in-accept__sign-in" href={ signInLink }>
-					{ this.translate( 'Sign in as a different user' ) }
-				</a>
+
+				<LoggedOutFormLinks>
+					<LoggedOutFormLinkItem href={ signInLink }>
+						{ this.translate( 'Sign in as a different user' ) }
+					</LoggedOutFormLinkItem>
+				</LoggedOutFormLinks>
 			</div>
 		);
 	}

client/my-sites/invites/invite-accept-logged-in/style.scss

@@ -8,6 +8,10 @@
 	text-align: center;
 }
 
+.invite-accept-logged-in .card {
+	margin-bottom: 0;
+}
+
 .invite-accept-logged-in__join-as-username {
 	font-family: $serif;
 	font-weight: 600;