Add destination URL field

Automattic · Aug 17, 2016 · 77ea136 · 77ea136
1 parent 31228e0
commit 77ea136
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 14 deletions.
diff --git a/client/my-sites/guided-transfer/host-credentials-page/bluehost.jsx b/client/my-sites/guided-transfer/host-credentials-page/bluehost.jsx
@@ -8,7 +8,13 @@ import { localize } from 'i18n-calypso';
  * Internal dependencies
  */
 import CompactCard from 'components/card/compact';
-import { Username, Password, CreateAccountTip, SubmitSection } from './fields';
+import {
+	Username,
+	Password,
+	CreateAccountTip,
+	SubmitSection,
+	DestinationURL,
+} from './fields';
 
 class Bluehost extends Component {
 	render() {
@@ -42,6 +48,10 @@ class Bluehost extends Component {
 					<CreateAccountTip
 						hostLabel={ hostInfo.label }
 						hostUrl={ hostInfo.url } />
+					<DestinationURL
+						value={ fieldValues.wporg_url }
+						onChange={ onFieldChange( 'wporg_url' ) }
+					/>
 				</CompactCard>
 				<SubmitSection submit={ this.props.submit } />
 			</div>

diff --git a/client/my-sites/guided-transfer/host-credentials-page/fields.jsx b/client/my-sites/guided-transfer/host-credentials-page/fields.jsx
@@ -21,7 +21,7 @@ import FormButton from 'components/forms/form-button';
 import FormSettingExplanation from 'components/forms/form-setting-explanation';
 
 export const Username = localize( props =>
-	<FormFieldset className="guided-transfer__account-username-fieldset">
+	<FormFieldset className="host-credentials-page__account-username-fieldset">
 		<FormLabel htmlFor="username">{ props.translate( '%(host)s account username', {
 			args: {
 				host: props.hostLabel
@@ -36,7 +36,7 @@ export const Username = localize( props =>
 );
 
 export const Password = localize( props =>
-	<FormFieldset className="guided-transfer__account-password-fieldset">
+	<FormFieldset className="host-credentials-page__account-password-fieldset">
 		<FormLabel htmlFor="password">{ props.translate( '%(host)s account password', {
 			args: {
 				host: props.hostLabel
@@ -54,7 +54,7 @@ export const Password = localize( props =>
 );
 
 export const Email = localize( props =>
-	<FormFieldset className="guided-transfer__account-email-fieldset">
+	<FormFieldset className="host-credentials-page__account-email-fieldset">
 		<FormLabel htmlFor="email">
 			{ props.translate( '%(host)s account email address', {
 				args: {
@@ -71,7 +71,7 @@ export const Email = localize( props =>
 );
 
 export const CreateAccountTip = localize( props =>
-	<FormSettingExplanation className="guided-transfer__account-info-tip">
+	<FormSettingExplanation className="host-credentials-page__account-info-tip">
 		{ props.translate(
 			'You don\'t have a %(host)s account yet? ' +
 			'{{host_link}}Create one{{/host_link}} and return here.', {
@@ -86,6 +86,19 @@ export const CreateAccountTip = localize( props =>
 	</FormSettingExplanation>
 );
 
+export const DestinationURL = localize( props =>
+	<FormFieldset className="host-credentials-page__account-wporg_url-fieldset">
+		<FormLabel htmlFor="wporg_url">
+			{ props.translate( "New site's web address" ) }
+		</FormLabel>
+		<FormTextInput
+			id="wporg_url"
+			value={ props.value }
+			onChange={ props.onChange }
+			placeholder={ props.translate( 'new-site.com' ) } />
+	</FormFieldset>
+);
+
 export const SubmitSection = localize( props =>
 	<CompactCard>
 		<FormButton onClick={ props.submit }>Continue</FormButton>

diff --git a/client/my-sites/guided-transfer/host-credentials-page/index.jsx b/client/my-sites/guided-transfer/host-credentials-page/index.jsx
@@ -14,7 +14,7 @@ import SectionHeader from 'components/section-header';
 class HostCredentialsPage extends Component {
 	constructor() {
 		super();
-		this.state = { fieldValues: { username: 'test' } };
+		this.state = { fieldValues: {} };
 	}
 
 	setFieldValue = ( fieldName, fieldValue ) => {

diff --git a/client/my-sites/guided-transfer/host-credentials-page/siteground.jsx b/client/my-sites/guided-transfer/host-credentials-page/siteground.jsx
@@ -8,7 +8,13 @@ import { localize } from 'i18n-calypso';
  * Internal dependencies
  */
 import CompactCard from 'components/card/compact';
-import { Username, Email, CreateAccountTip, SubmitSection } from './fields';
+import {
+	Username,
+	Email,
+	CreateAccountTip,
+	SubmitSection,
+	DestinationURL,
+} from './fields';
 
 class SiteGround extends Component {
 	render() {
@@ -42,6 +48,10 @@ class SiteGround extends Component {
 					<CreateAccountTip
 						hostLabel={ hostInfo.label }
 						hostUrl={ hostInfo.url } />
+					<DestinationURL
+						value={ fieldValues.wporg_url }
+						onChange={ onFieldChange( 'wporg_url' ) }
+					/>
 				</CompactCard>
 				<SubmitSection submit={ this.props.submit } />
 			</div>

diff --git a/client/my-sites/guided-transfer/style.scss b/client/my-sites/guided-transfer/style.scss
@@ -3,13 +3,18 @@
 		margin: 0 0 17px 0;
 	}
 
-	.guided-transfer__account-username-fieldset,
-	.guided-transfer__account-password-fieldset,
-	.guided-transfer__account-email-fieldset, {
+	.host-credentials-page__account-username-fieldset,
+	.host-credentials-page__account-password-fieldset,
+	.host-credentials-page__account-email-fieldset,
+	.host-credentials-page__account-wporg_url-fieldset {
 		display: inline-block;
 		width: 100%;
 	}
 
+	.host-credentials-page__account-wporg_url-fieldset {
+		margin-top: 19px;
+	}
+
 	.guided-transfer__host-button-image {
 		vertical-align: middle;
 		height: 50%;
@@ -23,16 +28,16 @@
 	}
 
 	@include breakpoint( ">960px" ) {
-		.guided-transfer__account-username-fieldset,
-		.guided-transfer__account-password-fieldset,
-		.guided-transfer__account-email-fieldset {
+		.host-credentials-page__account-username-fieldset,
+		.host-credentials-page__account-password-fieldset,
+		.host-credentials-page__account-email-fieldset {
 			width: 50%;
 
 			/* Override the default margin bottom provided for FormFieldset */
 			margin-bottom: 0px;
 		}
 
-		.guided-transfer__account-username-fieldset, {
+		.host-credentials-page__account-username-fieldset, {
 			padding-right: 10px;
 		}