PLT-7: Refactoring frontend (chunk 4)

web/react/components/password_reset_form.jsx

@@ -4,7 +4,24 @@
 import * as Client from '../utils/client.jsx';
 import Constants from '../utils/constants.jsx';
 
-export default class PasswordResetForm extends React.Component {
+import {injectIntl, intlShape, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
+
+const holders = defineMessages({
+    error: {
+        id: 'password_form.error',
+        defaultMessage: 'Please enter at least {chars} characters.'
+    },
+    update: {
+        id: 'password_form.update',
+        defaultMessage: 'Your password has been updated successfully.'
+    },
+    pwd: {
+        id: 'password_form.pwd',
+        defaultMessage: 'Password'
+    }
+});
+
+class PasswordResetForm extends React.Component {
     constructor(props) {
         super(props);
 
@@ -14,11 +31,13 @@ export default class PasswordResetForm extends React.Component {
     }
     handlePasswordReset(e) {
         e.preventDefault();
+
+        const {formatMessage} = this.props.intl;
         var state = {};
 
         var password = ReactDOM.findDOMNode(this.refs.password).value.trim();
         if (!password || password.length < Constants.MIN_PASSWORD_LENGTH) {
-            state.error = 'Please enter at least ' + Constants.MIN_PASSWORD_LENGTH + ' characters.';
+            state.error = formatMessage(holders.error, {chars: Constants.MIN_PASSWORD_LENGTH});
             this.setState(state);
             return;
         }
@@ -34,7 +53,7 @@ export default class PasswordResetForm extends React.Component {
 
         Client.resetPassword(data,
             function resetSuccess() {
-                this.setState({error: null, updateText: 'Your password has been updated successfully.'});
+                this.setState({error: null, updateText: formatMessage(holders.update)});
             }.bind(this),
             function resetFailure(err) {
                 this.setState({error: err.message, updateText: null});
@@ -44,7 +63,15 @@ export default class PasswordResetForm extends React.Component {
     render() {
         var updateText = null;
         if (this.state.updateText) {
-            updateText = <div className='form-group'><br/><label className='control-label reset-form'>{this.state.updateText} Click <a href={'/' + this.props.teamName + '/login'}>here</a> to log in.</label></div>;
+            updateText = (<div className='form-group'><br/><label className='control-label reset-form'>{this.state.updateText}
+                <FormattedHTMLMessage
+                    id='password_form.click'
+                    defaultMessage='Click <a href={url}>here</a> to log in.'
+                    values={{
+                        url: '/' + this.props.teamName + '/login'
+                    }}
+                />
+                </label></div>);
         }
 
         var error = null;
@@ -57,19 +84,34 @@ export default class PasswordResetForm extends React.Component {
             formClass += ' has-error';
         }
 
+        const {formatMessage} = this.props.intl;
         return (
             <div className='col-sm-12'>
                 <div className='signup-team__container'>
-                    <h3>{'Password Reset'}</h3>
+                    <h3>
+                        <FormattedMessage
+                            id='password_form.title'
+                            defaultMessage='Password Reset'
+                        />
+                    </h3>
                     <form onSubmit={this.handlePasswordReset}>
-                        <p>{'Enter a new password for your ' + this.props.teamDisplayName + ' ' + global.window.mm_config.SiteName + ' account.'}</p>
+                        <p>
+                            <FormattedMessage
+                                id='password_form.enter'
+                                defaultMessage='Enter a new password for your {teamDisplayName} {siteName} account.'
+                                values={{
+                                    teamDisplayName: this.props.teamDisplayName,
+                                    siteName: global.window.mm_config.SiteName
+                                }}
+                            />
+                        </p>
                         <div className={formClass}>
                             <input
                                 type='password'
                                 className='form-control'
                                 name='password'
                                 ref='password'
-                                placeholder='Password'
+                                placeholder={formatMessage(holders.pwd)}
                                 spellCheck='false'
                             />
                         </div>
@@ -78,7 +120,10 @@ export default class PasswordResetForm extends React.Component {
                             type='submit'
                             className='btn btn-primary'
                         >
-                            {'Change my password'}
+                            <FormattedMessage
+                                id='password_form.change'
+                                defaultMessage='Change my password'
+                            />
                         </button>
                         {updateText}
                     </form>
@@ -95,8 +140,11 @@ PasswordResetForm.defaultProps = {
     data: ''
 };
 PasswordResetForm.propTypes = {
+    intl: intlShape.isRequired,
     teamName: React.PropTypes.string,
     teamDisplayName: React.PropTypes.string,
     hash: React.PropTypes.string,
     data: React.PropTypes.string
 };
+
+export default injectIntl(PasswordResetForm);