Skip to content

Commit

Permalink
Auth: Run i18n codemod on login.jsx
Browse files Browse the repository at this point in the history
  • Loading branch information
ockham committed Oct 3, 2017
1 parent 4e04f25 commit 8361756
Showing 1 changed file with 28 additions and 27 deletions.
55 changes: 28 additions & 27 deletions client/auth/login.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* External dependencies
*/
import ReactDom from 'react-dom';
import { localize } from 'i18n-calypso';
import React from 'react';
import LinkedStateMixin from 'react-addons-linked-state-mixin';
import Gridicon from 'gridicons';
Expand All @@ -25,26 +26,26 @@ import WordPressLogo from 'components/wordpress-logo';
import AuthCodeButton from './auth-code-button';
import { addLocaleToWpcomUrl, getLocaleSlug } from 'lib/i18n-utils';

const LostPassword = React.createClass( {
const LostPassword = localize(React.createClass( {
render: function() {
const url = addLocaleToWpcomUrl(
'https://wordpress.com/wp-login.php?action=lostpassword',
getLocaleSlug()
);
return (
<p className="auth__lost-password">
<p className="auth__lost-password">
<a href={ url } target="_blank" rel="noopener noreferrer">
{ this.translate( 'Lost your password?' ) }
{ this.props.translate( 'Lost your password?' ) }
</a>
</p>
);
);
},
} );
} ));

const SelfHostedInstructions = React.createClass( {
const SelfHostedInstructions = localize(React.createClass( {
render: function() {
return (
<div className="auth__self-hosted-instructions">
<div className="auth__self-hosted-instructions">
<a
href="#"
onClick={ this.props.onClickClose }
Expand All @@ -53,39 +54,39 @@ const SelfHostedInstructions = React.createClass( {
<Gridicon icon="cross" size={ 24 } />
</a>

<h2>{ this.translate( 'Add self-hosted site' ) }</h2>
<h2>{ this.props.translate( 'Add self-hosted site' ) }</h2>
<p>
{ this.translate(
{ this.props.translate(
'By default when you sign into the WordPress.com app, you can edit blogs and sites hosted at WordPress.com'
) }
</p>
<p>
{ this.translate(
{ this.props.translate(
"If you'd like to edit your self-hosted WordPress blog or site, you can do that by following these instructions:"
) }
</p>

<ol>
<li>
<strong>{ this.translate( 'Install the Jetpack plugin.' ) }</strong>
<strong>{ this.props.translate( 'Install the Jetpack plugin.' ) }</strong>
<br />
<a href="http://jetpack.me/install/">
{ this.translate( 'Please follow these instructions to install Jetpack' ) }
{ this.props.translate( 'Please follow these instructions to install Jetpack' ) }
</a>.
</li>
<li>{ this.translate( 'Connect Jetpack to WordPress.com.' ) }</li>
<li>{ this.props.translate( 'Connect Jetpack to WordPress.com.' ) }</li>
<li>
{ this.translate(
{ this.props.translate(
'Now you can sign in to the app using the WordPress.com account Jetpack is connected to, and you can find your self-hosted site under the "My Sites" section.'
) }
</li>
</ol>
</div>
);
);
},
} );
} ));

module.exports = React.createClass( {
module.exports = localize(React.createClass( {
displayName: 'Auth',

mixins: [ LinkedStateMixin, eventRecorder ],
Expand Down Expand Up @@ -158,7 +159,7 @@ module.exports = React.createClass( {
const { requires2fa, inProgress, errorMessage, errorLevel, showInstructions } = this.state;

return (
<Main className="auth">
<Main className="auth">
<div className="auth__content">
<WordPressLogo />
<form className="auth__form" onSubmit={ this.submitForm }>
Expand All @@ -169,7 +170,7 @@ module.exports = React.createClass( {
name="login"
ref="login"
disabled={ requires2fa || inProgress }
placeholder={ this.translate( 'Username or email address' ) }
placeholder={ this.props.translate( 'Username or email address' ) }
onFocus={ this.recordFocusEvent( 'Username or email address' ) }
valueLink={ this.linkState( 'login' ) }
/>
Expand All @@ -180,7 +181,7 @@ module.exports = React.createClass( {
name="password"
ref="password"
disabled={ requires2fa || inProgress }
placeholder={ this.translate( 'Password' ) }
placeholder={ this.props.translate( 'Password' ) }
onFocus={ this.recordFocusEvent( 'Password' ) }
hideToggle={ requires2fa }
submitting={ inProgress }
Expand All @@ -194,7 +195,7 @@ module.exports = React.createClass( {
type="number"
ref="auth_code"
disabled={ inProgress }
placeholder={ this.translate( 'Verification code' ) }
placeholder={ this.props.translate( 'Verification code' ) }
onFocus={ this.recordFocusEvent( 'Verification code' ) }
valueLink={ this.linkState( 'auth_code' ) }
/>
Expand All @@ -206,7 +207,7 @@ module.exports = React.createClass( {
disabled={ ! this.canSubmitForm() }
onClick={ this.recordClickEvent( 'Sign in' ) }
>
{ requires2fa ? this.translate( 'Verify' ) : this.translate( 'Sign in' ) }
{ requires2fa ? this.props.translate( 'Verify' ) : this.props.translate( 'Sign in' ) }
</FormButton>
</FormButtonsBar>
{ ! requires2fa && <LostPassword /> }
Expand All @@ -221,22 +222,22 @@ module.exports = React.createClass( {
className="auth__help"
target="_blank"
rel="noopener noreferrer"
title={ this.translate( 'Visit the WordPress.com support site for help' ) }
title={ this.props.translate( 'Visit the WordPress.com support site for help' ) }
href="https://en.support.wordpress.com/"
>
<Gridicon icon="help" />
</a>
<div className="auth__links">
<a href="#" onClick={ this.toggleSelfHostedInstructions }>
{ this.translate( 'Add self-hosted site' ) }
{ this.props.translate( 'Add self-hosted site' ) }
</a>
<a href={ config( 'signup_url' ) }>{ this.translate( 'Create account' ) }</a>
<a href={ config( 'signup_url' ) }>{ this.props.translate( 'Create account' ) }</a>
</div>
{ showInstructions && (
<SelfHostedInstructions onClickClose={ this.toggleSelfHostedInstructions } />
) }
</div>
</Main>
);
);
},
} );
} ));

0 comments on commit 8361756

Please sign in to comment.