PLT-7: Refactoring frontend (chunk 4)

12 files changed, 498 insertions, 82 deletions

diff --git a/web/react/components/authorize.jsx b/web/react/components/authorize.jsx
index 32e39fbff..90cbe3289 100644
--- a/web/react/components/authorize.jsx
+++ b/web/react/components/authorize.jsx
@@ -3,6 +3,8 @@
 
 import * as Client from '../utils/client.jsx';
 
+import {FormattedMessage} from 'mm-intl';
+
 export default class Authorize extends React.Component {
     constructor(props) {
         super(props);
@@ -35,25 +37,55 @@ export default class Authorize extends React.Component {
         return (
             <div className='authorize-box'>
                 <div className='authorize-inner'>
-                    <h3>{'An application would like to connect to your '}{this.props.teamName}{' account'}</h3>
-                    <label>{'The app '}{this.props.appName}{' would like the ability to access and modify your basic information.'}</label>
+                    <h3>
+                        <FormattedMessage
+                            id='authorize.title'
+                            defaultMessage='An application would like to connect to your {teamName} account'
+                            values={{
+                                teamName: this.props.teamName
+                            }}
+                        />
+                    </h3>
+                    <label>
+                        <FormattedMessage
+                            id='authorize.app'
+                            defaultMessage='The app {appName} would like the ability to access and modify your basic information.'
+                            values={{
+                                appName: this.props.appName
+                            }}
+                        />
+                    </label>
                     <br/>
                     <br/>
-                    <label>{'Allow '}{this.props.appName}{' access?'}</label>
+                    <label>
+                        <FormattedMessage
+                            id='authorize.access'
+                            defaultMessage='Allow {appName} access?'
+                            values={{
+                                appName: this.props.appName
+                            }}
+                        />
+                    </label>
                     <br/>
                     <button
                         type='submit'
                         className='btn authorize-btn'
                         onClick={this.handleDeny}
                     >
-                        {'Deny'}
+                        <FormattedMessage
+                            id='authorize.deny'
+                            defaultMessage='Deny'
+                        />
                     </button>
                     <button
                         type='submit'
                         className='btn btn-primary authorize-btn'
                         onClick={this.handleAllow}
                     >
-                        {'Allow'}
+                        <FormattedMessage
+                            id='authorize.allow'
+                            defaultMessage='Allow'
+                        />
                     </button>
                 </div>
             </div>
diff --git a/web/react/components/docs.jsx b/web/react/components/docs.jsx
index 188ca340b..6d3a109c2 100644
--- a/web/react/components/docs.jsx
+++ b/web/react/components/docs.jsx
@@ -13,7 +13,7 @@ export default class Docs extends React.Component {
         const errorState = {text: '## 404'};
 
         if (props.site) {
-            $.get('/static/help/' + props.site + '.md').then((response) => {
+            $.get(`/static/help/${props.site}_${global.window.mm_locale}.md`).then((response) => {
                 this.setState({text: response});
             }, () => {
                 this.setState(errorState);
diff --git a/web/react/components/find_team.jsx b/web/react/components/find_team.jsx
index 94ca48dbf..3ff9787ad 100644
--- a/web/react/components/find_team.jsx
+++ b/web/react/components/find_team.jsx
@@ -4,7 +4,20 @@
 import * as utils from '../utils/utils.jsx';
 import * as client from '../utils/client.jsx';
 
-export default class FindTeam extends React.Component {
+import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl';
+
+var holders = defineMessages({
+    submitError: {
+        id: 'find_team.submitError',
+        defaultMessage: 'Please enter a valid email address'
+    },
+    placeholder: {
+        id: 'find_team.placeholder',
+        defaultMessage: 'you@domain.com'
+    }
+});
+
+class FindTeam extends React.Component {
     constructor(props) {
         super(props);
         this.state = {};
@@ -19,7 +32,7 @@ export default class FindTeam extends React.Component {
 
         var email = ReactDOM.findDOMNode(this.refs.email).value.trim().toLowerCase();
         if (!email || !utils.isEmail(email)) {
-            state.email_error = 'Please enter a valid email address';
+            state.email_error = this.props.intl.formatMessage(holders.submitError);
             this.setState(state);
             return;
         }
@@ -50,25 +63,50 @@ export default class FindTeam extends React.Component {
         if (this.state.sent) {
             return (
                 <div>
-                    <h4>{'Find Your teams'}</h4>
-                    <p>{'An email was sent with links to any teams to which you are a member.'}</p>
+                    <h4>
+                        <FormattedMessage
+                            id='find_team.findTitle'
+                            defaultMessage='Find Your Team'
+                        />
+                    </h4>
+                    <p>
+                        <FormattedMessage
+                            id='find_team.findDescription'
+                            defaultMessage='An email was sent with links to any teams to which you are a member.'
+                        />
+                    </p>
                 </div>
             );
         }
 
         return (
         <div>
-                <h4>Find Your Team</h4>
+                <h4>
+                    <FormattedMessage
+                        id='find_team.findTitle'
+                        defaultMessage='Find Your Team'
+                    />
+                </h4>
                 <form onSubmit={this.handleSubmit}>
-                    <p>{'Get an email with links to any teams to which you are a member.'}</p>
+                    <p>
+                        <FormattedMessage
+                            id='find_team.getLinks'
+                            defaultMessage='Get an email with links to any teams to which you are a member.'
+                        />
+                    </p>
                     <div className='form-group'>
-                        <label className='control-label'>Email</label>
+                        <label className='control-label'>
+                            <FormattedMessage
+                                id='find_team.email'
+                                defaultMessage='Email'
+                            />
+                        </label>
                         <div className={emailErrorClass}>
                             <input
                                 type='text'
                                 ref='email'
                                 className='form-control'
-                                placeholder='you@domain.com'
+                                placeholder={this.props.intl.formatMessage(holders.placeholder)}
                                 maxLength='128'
                                 spellCheck='false'
                             />
@@ -79,10 +117,19 @@ export default class FindTeam extends React.Component {
                         className='btn btn-md btn-primary'
                         type='submit'
                     >
-                        Send
+                        <FormattedMessage
+                            id='find_team.send'
+                            defaultMessage='Send'
+                        />
                     </button>
                 </form>
                 </div>
         );
     }
 }
+
+FindTeam.propTypes = {
+    intl: intlShape.isRequired
+};
+
+export default injectIntl(FindTeam);
\ No newline at end of file
diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx
index 3c1d66334..c4f530af0 100644
--- a/web/react/components/login.jsx
+++ b/web/react/components/login.jsx
@@ -7,7 +7,7 @@ import LoginLdap from './login_ldap.jsx';
 import * as Utils from '../utils/utils.jsx';
 import Constants from '../utils/constants.jsx';
 
-var FormattedMessage = ReactIntl.FormattedMessage;
+import {FormattedMessage} from 'mm-intl';
 
 export default class Login extends React.Component {
     constructor(props) {
@@ -24,10 +24,16 @@ export default class Login extends React.Component {
             loginMessage.push(
                     <a
                         className='btn btn-custom-login gitlab'
+                        key='gitlab'
                         href={'/' + teamName + '/login/gitlab'}
                     >
                         <span className='icon' />
-                        <span>{'with GitLab'}</span>
+                        <span>
+                            <FormattedMessage
+                                id='login.gitlab'
+                                defaultMessage='with GitLab'
+                            />
+                        </span>
                     </a>
            );
         }
@@ -36,10 +42,16 @@ export default class Login extends React.Component {
             loginMessage.push(
                     <a
                         className='btn btn-custom-login google'
+                        key='google'
                         href={'/' + teamName + '/login/google'}
                     >
                         <span className='icon' />
-                        <span>{'with Google Apps'}</span>
+                        <span>
+                            <FormattedMessage
+                                id='login.google'
+                                defaultMessage='with Google Apps'
+                            />
+                        </span>
                     </a>
            );
         }
@@ -49,9 +61,19 @@ export default class Login extends React.Component {
         if (extraParam) {
             let msg;
             if (extraParam === Constants.SIGNIN_CHANGE) {
-                msg = ' Sign-in method changed successfully';
+                msg = (
+                    <FormattedMessage
+                        id='login.changed'
+                        defaultMessage=' Sign-in method changed successfully'
+                    />
+                );
             } else if (extraParam === Constants.SIGNIN_VERIFIED) {
-                msg = ' Email Verified';
+                msg = (
+                    <FormattedMessage
+                        id='login.verified'
+                        defaultMessage=' Email Verified'
+                    />
+                );
             }
 
             if (msg != null) {
@@ -78,7 +100,12 @@ export default class Login extends React.Component {
                 <div>
                     {loginMessage}
                     <div className='or__container'>
-                        <span>{'or'}</span>
+                        <span>
+                            <FormattedMessage
+                                id='login.or'
+                                defaultMessage='or'
+                            />
+                        </span>
                     </div>
                 </div>
             );
@@ -90,7 +117,7 @@ export default class Login extends React.Component {
                 <div className='form-group'>
                     <a href={'/' + teamName + '/reset_password'}>
                         <FormattedMessage
-                            id='login.forgot_password'
+                            id='login.forgot'
                             defaultMessage='I forgot my password'
                         />
                     </a>
@@ -102,12 +129,19 @@ export default class Login extends React.Component {
         if (this.props.inviteId) {
             userSignUp = (
                 <div>
-                    <span>{`Don't have an account? `}
+                    <span>
+                        <FormattedMessage
+                            id='login.noAccount'
+                            defaultMessage="Don't have an account? "
+                        />
                         <a
                             href={'/signup_user_complete/?id=' + this.props.inviteId}
                             className='signup-team-login'
                         >
-                            {'Create one now'}
+                            <FormattedMessage
+                                id='login.create'
+                                defaultMessage='Create one now'
+                            />
                         </a>
                     </span>
                 </div>
@@ -122,7 +156,10 @@ export default class Login extends React.Component {
                         href='/'
                         className='signup-team-login'
                     >
-                        {'Create a new team'}
+                        <FormattedMessage
+                            id='login.createTeam'
+                            defaultMessage='Create a new team'
+                        />
                     </a>
                 </div>
             );
@@ -144,7 +181,7 @@ export default class Login extends React.Component {
                     <span>
                         <a href='/find_team'>
                             <FormattedMessage
-                                id='login.find_teams'
+                                id='login.find'
                                 defaultMessage='Find your other teams'
                             />
                         </a></span>
@@ -154,9 +191,22 @@ export default class Login extends React.Component {
 
         return (
             <div className='signup-team__container'>
-                <h5 className='margin--less'>{'Sign in to:'}</h5>
+                <h5 className='margin--less'>
+                    <FormattedMessage
+                        id='login.signTo'
+                        defaultMessage='Sign in to:'
+                    />
+                </h5>
                 <h2 className='signup-team__name'>{teamDisplayName}</h2>
-                <h2 className='signup-team__subdomain'>{'on '}{global.window.mm_config.SiteName}</h2>
+                <h2 className='signup-team__subdomain'>
+                    <FormattedMessage
+                        id='login.on'
+                        defaultMessage='on {siteName}'
+                        values={{
+                            siteName: global.window.mm_config.SiteName
+                        }}
+                    />
+                </h2>
                     {extraBox}
                     {loginMessage}
                     {emailSignup}
diff --git a/web/react/components/login_email.jsx b/web/react/components/login_email.jsx
index cfe34d1c7..cf1e1bc40 100644
--- a/web/react/components/login_email.jsx
+++ b/web/react/components/login_email.jsx
@@ -5,7 +5,32 @@ import * as Utils from '../utils/utils.jsx';
 import * as Client from '../utils/client.jsx';
 import UserStore from '../stores/user_store.jsx';
 
-export default class LoginEmail extends React.Component {
+import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl';
+
+var holders = defineMessages({
+    badTeam: {
+        id: 'login_email.badTeam',
+        defaultMessage: 'Bad team name'
+    },
+    emailReq: {
+        id: 'login_email.emailReq',
+        defaultMessage: 'An email is required'
+    },
+    pwdReq: {
+        id: 'login_email.pwdReq',
+        defaultMessage: 'A password is required'
+    },
+    email: {
+        id: 'login_email.email',
+        defaultMessage: 'Email'
+    },
+    pwd: {
+        id: 'login_email.pwd',
+        defaultMessage: 'Password'
+    }
+});
+
+class LoginEmail extends React.Component {
     constructor(props) {
         super(props);
 
@@ -17,25 +42,26 @@ export default class LoginEmail extends React.Component {
     }
     handleSubmit(e) {
         e.preventDefault();
+        const {formatMessage} = this.props.intl;
         var state = {};
 
         const name = this.props.teamName;
         if (!name) {
-            state.serverError = 'Bad team name';
+            state.serverError = formatMessage(holders.badTeam);
             this.setState(state);
             return;
         }
 
         const email = this.refs.email.value.trim();
         if (!email) {
-            state.serverError = 'An email is required';
+            state.serverError = formatMessage(holders.emailReq);
             this.setState(state);
             return;
         }
 
         const password = this.refs.password.value.trim();
         if (!password) {
-            state.serverError = 'A password is required';
+            state.serverError = formatMessage(holders.pwdReq);
             this.setState(state);
             return;
         }
@@ -55,7 +81,7 @@ export default class LoginEmail extends React.Component {
                 }
             },
             (err) => {
-                if (err.message === 'Login failed because email address has not been verified') {
+                if (err.id === 'api.user.login.not_verified.app_error') {
                     window.location.href = '/verify_email?teamname=' + encodeURIComponent(name) + '&email=' + encodeURIComponent(email);
                     return;
                 }
@@ -87,6 +113,7 @@ export default class LoginEmail extends React.Component {
             priorEmail = decodeURIComponent(emailParam);
         }
 
+        const {formatMessage} = this.props.intl;
         return (
             <form onSubmit={this.handleSubmit}>
                 <div className='signup__email-container'>
@@ -101,7 +128,7 @@ export default class LoginEmail extends React.Component {
                             name='email'
                             defaultValue={priorEmail}
                             ref='email'
-                            placeholder='Email'
+                            placeholder={formatMessage(holders.email)}
                             spellCheck='false'
                         />
                     </div>
@@ -112,7 +139,7 @@ export default class LoginEmail extends React.Component {
                             className='form-control'
                             name='password'
                             ref='password'
-                            placeholder='Password'
+                            placeholder={formatMessage(holders.pwd)}
                             spellCheck='false'
                         />
                     </div>
@@ -121,7 +148,10 @@ export default class LoginEmail extends React.Component {
                             type='submit'
                             className='btn btn-primary'
                         >
-                            {'Sign in'}
+                            <FormattedMessage
+                                id='login_email.signin'
+                                defaultMessage='Sign in'
+                            />
                         </button>
                     </div>
                 </div>
@@ -133,5 +163,8 @@ LoginEmail.defaultProps = {
 };
 
 LoginEmail.propTypes = {
+    intl: intlShape.isRequired,
     teamName: React.PropTypes.string.isRequired
 };
+
+export default injectIntl(LoginEmail);
\ No newline at end of file
diff --git a/web/react/components/login_ldap.jsx b/web/react/components/login_ldap.jsx
index 1e0e32f4f..d67f15fa5 100644
--- a/web/react/components/login_ldap.jsx
+++ b/web/react/components/login_ldap.jsx
@@ -4,7 +4,32 @@
 import * as Utils from '../utils/utils.jsx';
 import * as Client from '../utils/client.jsx';
 
-export default class LoginLdap extends React.Component {
+import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl';
+
+const holders = defineMessages({
+    badTeam: {
+        id: 'login_ldap.badTeam',
+        defaultMessage: 'Bad team name'
+    },
+    idReq: {
+        id: 'login_ldap.idlReq',
+        defaultMessage: 'An LDAP ID is required'
+    },
+    pwdReq: {
+        id: 'login_ldap.pwdReq',
+        defaultMessage: 'An LDAP password is required'
+    },
+    username: {
+        id: 'login_ldap.username',
+        defaultMessage: 'LDAP Username'
+    },
+    pwd: {
+        id: 'login_ldap.pwd',
+        defaultMessage: 'LDAP Password'
+    }
+});
+
+class LoginLdap extends React.Component {
     constructor(props) {
         super(props);
 
@@ -16,25 +41,26 @@ export default class LoginLdap extends React.Component {
     }
     handleSubmit(e) {
         e.preventDefault();
+        const {formatMessage} = this.props.intl;
         var state = {};
 
         const teamName = this.props.teamName;
         if (!teamName) {
-            state.serverError = 'Bad team name';
+            state.serverError = formatMessage(holders.badTeam);
             this.setState(state);
             return;
         }
 
         const id = this.refs.id.value.trim();
         if (!id) {
-            state.serverError = 'An LDAP ID is required';
+            state.serverError = formatMessage(holders.idReq);
             this.setState(state);
             return;
         }
 
         const password = this.refs.password.value.trim();
         if (!password) {
-            state.serverError = 'An LDAP password is required';
+            state.serverError = formatMessage(holders.pwdReq);
             this.setState(state);
             return;
         }
@@ -64,7 +90,7 @@ export default class LoginLdap extends React.Component {
             serverError = <label className='control-label'>{this.state.serverError}</label>;
             errorClass = ' has-error';
         }
-
+        const {formatMessage} = this.props.intl;
         return (
             <form onSubmit={this.handleSubmit}>
                 <div className='signup__email-container'>
@@ -76,7 +102,7 @@ export default class LoginLdap extends React.Component {
                             autoFocus={true}
                             className='form-control'
                             ref='id'
-                            placeholder='LDAP Username'
+                            placeholder={formatMessage(holders.username)}
                             spellCheck='false'
                         />
                     </div>
@@ -85,7 +111,7 @@ export default class LoginLdap extends React.Component {
                             type='password'
                             className='form-control'
                             ref='password'
-                            placeholder='LDAP Password'
+                            placeholder={formatMessage(holders.pwd)}
                             spellCheck='false'
                         />
                     </div>
@@ -94,7 +120,10 @@ export default class LoginLdap extends React.Component {
                             type='submit'
                             className='btn btn-primary'
                         >
-                            {'Sign in'}
+                            <FormattedMessage
+                                id='login_ldap.signin'
+                                defaultMessage='Sign in'
+                            />
                         </button>
                     </div>
                 </div>
@@ -106,5 +135,8 @@ LoginLdap.defaultProps = {
 };
 
 LoginLdap.propTypes = {
+    intl: intlShape.isRequired,
     teamName: React.PropTypes.string.isRequired
 };
+
+export default injectIntl(LoginLdap);
\ No newline at end of file
diff --git a/web/react/components/password_reset_form.jsx b/web/react/components/password_reset_form.jsx
index 8063db05a..380dbe973 100644
--- a/web/react/components/password_reset_form.jsx
+++ b/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);
\ No newline at end of file
diff --git a/web/react/components/password_reset_send_link.jsx b/web/react/components/password_reset_send_link.jsx
index 051b8b02c..8cc8a050d 100644
--- a/web/react/components/password_reset_send_link.jsx
+++ b/web/react/components/password_reset_send_link.jsx
@@ -4,7 +4,28 @@
 import * as Utils from '../utils/utils.jsx';
 import * as client from '../utils/client.jsx';
 
-export default class PasswordResetSendLink extends React.Component {
+import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl';
+
+const holders = defineMessages({
+    error: {
+        id: 'password_send.error',
+        defaultMessage: 'Please enter a valid email address.'
+    },
+    link: {
+        id: 'password_send.link',
+        defaultMessage: '<p>A password reset link has been sent to <b>{email}</b> for your <b>{teamDisplayName}</b> team on {hostname}.</p>'
+    },
+    checkInbox: {
+        id: 'password_send.checkInbox',
+        defaultMessage: 'Please check your inbox.'
+    },
+    email: {
+        id: 'password_send.email',
+        defaultMessage: 'Email'
+    }
+});
+
+class PasswordResetSendLink extends React.Component {
     constructor(props) {
         super(props);
 
@@ -15,10 +36,11 @@ export default class PasswordResetSendLink extends React.Component {
     handleSendLink(e) {
         e.preventDefault();
         var state = {};
+        const {formatMessage} = this.props.intl;
 
         var email = ReactDOM.findDOMNode(this.refs.email).value.trim().toLowerCase();
         if (!email || !Utils.isEmail(email)) {
-            state.error = 'Please enter a valid email address.';
+            state.error = formatMessage(holders.error);
             this.setState(state);
             return;
         }
@@ -32,7 +54,7 @@ export default class PasswordResetSendLink extends React.Component {
 
         client.sendPasswordReset(data,
              function passwordResetSent() {
-                 this.setState({error: null, updateText: <p>A password reset link has been sent to <b>{email}</b> for your <b>{this.props.teamDisplayName}</b> team on {window.location.hostname}.</p>, moreUpdateText: 'Please check your inbox.'});
+                 this.setState({error: null, updateText: formatMessage(holders.link, {email: email, teamDisplayName: this.props.teamDisplayName, hostname: window.location.hostname}), moreUpdateText: formatMessage(holders.checkInbox)});
                  $(ReactDOM.findDOMNode(this.refs.reset_form)).hide();
              }.bind(this),
              function passwordResetFailedToSend(err) {
@@ -43,7 +65,12 @@ export default class PasswordResetSendLink extends React.Component {
     render() {
         var updateText = null;
         if (this.state.updateText) {
-            updateText = <div className='reset-form alert alert-success'>{this.state.updateText}{this.state.moreUpdateText}</div>;
+            updateText = (
+                <div className='reset-form alert alert-success'
+                    dangerouslySetInnerHTML={{__html: this.state.updateText + this.state.moreUpdateText}}
+                >
+                </div>
+            );
         }
 
         var error = null;
@@ -56,23 +83,37 @@ export default class PasswordResetSendLink 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_send.title'
+                            defaultMessage='Password Reset'
+                        />
+                    </h3>
                     {updateText}
                     <form
                         onSubmit={this.handleSendLink}
                         ref='reset_form'
                     >
-                        <p>{'To reset your password, enter the email address you used to sign up for ' + this.props.teamDisplayName + '.'}</p>
+                        <p>
+                            <FormattedMessage
+                                id='password_send.description'
+                                defaultMessage='To reset your password, enter the email address you used to sign up for {teamName}.'
+                                values={{
+                                    teamName: this.props.teamDisplayName
+                                }}
+                            />
+                        </p>
                         <div className={formClass}>
                             <input
                                 type='email'
                                 className='form-control'
                                 name='email'
                                 ref='email'
-                                placeholder='Email'
+                                placeholder={formatMessage(holders.email)}
                                 spellCheck='false'
                             />
                         </div>
@@ -81,7 +122,10 @@ export default class PasswordResetSendLink extends React.Component {
                             type='submit'
                             className='btn btn-primary'
                         >
-                            Reset my password
+                            <FormattedMessage
+                                id='password_send.reset'
+                                defaultMessage='Reset my password'
+                            />
                         </button>
                     </form>
                 </div>
@@ -95,6 +139,9 @@ PasswordResetSendLink.defaultProps = {
     teamDisplayName: ''
 };
 PasswordResetSendLink.propTypes = {
+    intl: intlShape.isRequired,
     teamName: React.PropTypes.string,
     teamDisplayName: React.PropTypes.string
 };
+
+export default injectIntl(PasswordResetSendLink);
\ No newline at end of file
diff --git a/web/react/components/signup_team.jsx b/web/react/components/signup_team.jsx
index a554427d5..098e9f65a 100644
--- a/web/react/components/signup_team.jsx
+++ b/web/react/components/signup_team.jsx
@@ -6,6 +6,8 @@ import EmailSignUpPage from './team_signup_with_email.jsx';
 import SSOSignupPage from './team_signup_with_sso.jsx';
 import Constants from '../utils/constants.jsx';
 
+import {FormattedMessage} from 'mm-intl';
+
 export default class TeamSignUp extends React.Component {
     constructor(props) {
         super(props);
@@ -43,12 +45,24 @@ export default class TeamSignUp extends React.Component {
         if (global.window.mm_config.EnableTeamListing === 'true') {
             if (this.props.teams.length === 0) {
                 if (global.window.mm_config.EnableTeamCreation !== 'true') {
-                    teamListing = (<div>{'There are no teams include in the Team Directory and team creation has been disabled.'}</div>);
+                    teamListing = (
+                        <div>
+                            <FormattedMessage
+                                id='signup_team.noTeams'
+                                defaultMessage='There are no teams include in the Team Directory and team creation has been disabled.'
+                            />
+                        </div>
+                    );
                 }
             } else {
                 teamListing = (
                     <div>
-                        <h4>{'Choose a Team'}</h4>
+                        <h4>
+                            <FormattedMessage
+                                id='signup_team.choose'
+                                defaultMessage='Choose a Team'
+                            />
+                        </h4>
                         <div className='signup-team-all'>
                             {
                                 this.props.teams.map((team) => {
@@ -71,7 +85,12 @@ export default class TeamSignUp extends React.Component {
                                 })
                             }
                         </div>
-                        <h4>{'Or Create a Team'}</h4>
+                        <h4>
+                            <FormattedMessage
+                                id='signup_team.createTeam'
+                                defaultMessage='Or Create a Team'
+                            />
+                        </h4>
                     </div>
                 );
             }
@@ -79,7 +98,14 @@ export default class TeamSignUp extends React.Component {
 
         if (global.window.mm_config.EnableTeamCreation !== 'true') {
             if (teamListing == null) {
-                return (<div>{'Team creation has been disabled.  Please contact an administrator for access.'}</div>);
+                return (
+                    <div>
+                        <FormattedMessage
+                            id='signup_team.disabled'
+                            defaultMessage='Team creation has been disabled.  Please contact an administrator for access.'
+                        />
+                    </div>
+                );
             }
 
             return (
@@ -122,7 +148,14 @@ export default class TeamSignUp extends React.Component {
                 </div>
             );
         } else if (this.state.page === 'none') {
-            return (<div>{'No team creation method has been enabled.  Please contact an administrator for access.'}</div>);
+            return (
+                <div>
+                    <FormattedMessage
+                        id='signup_team.none'
+                        defaultMessage='No team creation method has been enabled.  Please contact an administrator for access.'
+                    />
+                </div>
+            );
         }
     }
 }
diff --git a/web/react/components/team_signup_choose_auth.jsx b/web/react/components/team_signup_choose_auth.jsx
index 19b9750b3..2dc67e92e 100644
--- a/web/react/components/team_signup_choose_auth.jsx
+++ b/web/react/components/team_signup_choose_auth.jsx
@@ -1,6 +1,8 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import {FormattedMessage} from 'mm-intl';
+
 export default class ChooseAuthPage extends React.Component {
     constructor(props) {
         super(props);
@@ -12,6 +14,7 @@ export default class ChooseAuthPage extends React.Component {
             buttons.push(
                     <a
                         className='btn btn-custom-login gitlab btn-full'
+                        key='gitlab'
                         href='#'
                         onClick={
                             function clickGit(e) {
@@ -21,7 +24,12 @@ export default class ChooseAuthPage extends React.Component {
                         }
                     >
                         <span className='icon' />
-                        <span>{'Create new team with GitLab Account'}</span>
+                        <span>
+                            <FormattedMessage
+                                id='choose_auth_page.gitlabCreate'
+                                defaultMessage='Create new team with GitLab Account'
+                            />
+                        </span>
                     </a>
             );
         }
@@ -30,6 +38,7 @@ export default class ChooseAuthPage extends React.Component {
             buttons.push(
                     <a
                         className='btn btn-custom-login google btn-full'
+                        key='google'
                         href='#'
                         onClick={
                             (e) => {
@@ -39,7 +48,12 @@ export default class ChooseAuthPage extends React.Component {
                         }
                     >
                         <span className='icon' />
-                        <span>{'Create new team with Google Apps Account'}</span>
+                        <span>
+                            <FormattedMessage
+                                id='choose_auth_page.googleCreate'
+                                defaultMessage='Create new team with Google Apps Account'
+                            />
+                        </span>
                     </a>
             );
         }
@@ -48,6 +62,7 @@ export default class ChooseAuthPage extends React.Component {
             buttons.push(
                     <a
                         className='btn btn-custom-login email btn-full'
+                        key='email'
                         href='#'
                         onClick={
                             function clickEmail(e) {
@@ -57,20 +72,37 @@ export default class ChooseAuthPage extends React.Component {
                         }
                     >
                         <span className='fa fa-envelope' />
-                        <span>{'Create new team with email address'}</span>
+                        <span>
+                            <FormattedMessage
+                                id='choose_auth_page.emailCreate'
+                                defaultMessage='Create new team with email address'
+                            />
+                        </span>
                     </a>
             );
         }
 
         if (buttons.length === 0) {
-            buttons = <span>{'No sign-up methods configured, please contact your system administrator.'}</span>;
+            buttons = (
+                <span>
+                    <FormattedMessage
+                        id='choose_auth_page.noSignup'
+                        defaultMessage='No sign-up methods configured, please contact your system administrator.'
+                    />
+                </span>
+            );
         }
 
         return (
             <div>
                 {buttons}
                 <div className='form-group margin--extra-2x'>
-                    <span><a href='/find_team'>{'Find my teams'}</a></span>
+                    <span><a href='/find_team'>
+                        <FormattedMessage
+                            id='choose_auth_page.find'
+                            defaultMessage='Find my teams'
+                        />
+                    </a></span>
                 </div>
             </div>
         );
diff --git a/web/react/components/team_signup_with_email.jsx b/web/react/components/team_signup_with_email.jsx
index 4150a0013..7dd645b25 100644
--- a/web/react/components/team_signup_with_email.jsx
+++ b/web/react/components/team_signup_with_email.jsx
@@ -4,7 +4,20 @@
 import * as Utils from '../utils/utils.jsx';
 import * as Client from '../utils/client.jsx';
 
-export default class EmailSignUpPage extends React.Component {
+import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl';
+
+const holders = defineMessages({
+    emailError: {
+        id: 'email_signup.emailError',
+        defaultMessage: 'Please enter a valid email address'
+    },
+    address: {
+        id: 'email_signup.address',
+        defaultMessage: 'Email Address'
+    }
+});
+
+class EmailSignUpPage extends React.Component {
     constructor() {
         super();
 
@@ -20,7 +33,7 @@ export default class EmailSignUpPage extends React.Component {
 
         team.email = ReactDOM.findDOMNode(this.refs.email).value.trim().toLowerCase();
         if (!team.email || !Utils.isEmail(team.email)) {
-            state.emailError = 'Please enter a valid email address';
+            state.emailError = this.props.intl.formatMessage(holders.emailError);
             isValid = false;
         } else {
             state.emailError = null;
@@ -67,7 +80,7 @@ export default class EmailSignUpPage extends React.Component {
                         type='email'
                         ref='email'
                         className='form-control'
-                        placeholder='Email Address'
+                        placeholder={this.props.intl.formatMessage(holders.address)}
                         maxLength='128'
                         spellCheck='false'
                     />
@@ -78,12 +91,20 @@ export default class EmailSignUpPage extends React.Component {
                         className='btn btn-md btn-primary'
                         type='submit'
                     >
-                        {'Create Team'}
+                        <FormattedMessage
+                            id='email_signup.createTeam'
+                            defaultMessage='Create Team'
+                        />
                     </button>
                     {serverError}
                 </div>
                 <div className='form-group margin--extra-2x'>
-                    <span><a href='/find_team'>{`Find my teams`}</a></span>
+                    <span><a href='/find_team'>
+                        <FormattedMessage
+                            id='email_signup.find'
+                            defaultMessage='Find my teams'
+                        />
+                    </a></span>
                 </div>
             </form>
         );
@@ -93,4 +114,7 @@ export default class EmailSignUpPage extends React.Component {
 EmailSignUpPage.defaultProps = {
 };
 EmailSignUpPage.propTypes = {
+    intl: intlShape.isRequired
 };
+
+export default injectIntl(EmailSignUpPage);
\ No newline at end of file
diff --git a/web/react/components/team_signup_with_sso.jsx b/web/react/components/team_signup_with_sso.jsx
index f4b323956..465f73fd2 100644
--- a/web/react/components/team_signup_with_sso.jsx
+++ b/web/react/components/team_signup_with_sso.jsx
@@ -5,7 +5,24 @@ import * as utils from '../utils/utils.jsx';
 import * as client from '../utils/client.jsx';
 import Constants from '../utils/constants.jsx';
 
-export default class SSOSignUpPage extends React.Component {
+import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl';
+
+const holders = defineMessages({
+    team_error: {
+        id: 'sso_signup.team_error',
+        defaultMessage: 'Please enter a team name'
+    },
+    length_error: {
+        id: 'sso_signup.length_error',
+        defaultMessage: 'Name must be 3 or more characters up to a maximum of 15'
+    },
+    teamName: {
+        id: 'sso_signup.teamName',
+        defaultMessage: 'Enter name of new team'
+    }
+});
+
+class SSOSignUpPage extends React.Component {
     constructor(props) {
         super(props);
 
@@ -16,6 +33,7 @@ export default class SSOSignUpPage extends React.Component {
     }
     handleSubmit(e) {
         e.preventDefault();
+        const {formatMessage} = this.props.intl;
         var team = {};
         var state = this.state;
         state.nameError = null;
@@ -24,13 +42,13 @@ export default class SSOSignUpPage extends React.Component {
         team.display_name = this.state.name;
 
         if (!team.display_name) {
-            state.nameError = 'Please enter a team name';
+            state.nameError = formatMessage(holders.team_error);
             this.setState(state);
             return;
         }
 
         if (team.display_name.length <= 2) {
-            state.nameError = 'Name must be 3 or more characters up to a maximum of 15';
+            state.nameError = formatMessage(holders.length_error);
             this.setState(state);
             return;
         }
@@ -80,24 +98,36 @@ export default class SSOSignUpPage extends React.Component {
             button = (
                 <a
                     className='btn btn-custom-login gitlab btn-full'
+                    key='gitlab'
                     href='#'
                     onClick={this.handleSubmit}
                     disabled={disabled}
                 >
                     <span className='icon'/>
-                    <span>{'Create team with GitLab Account'}</span>
+                    <span>
+                        <FormattedMessage
+                            id='sso_signup.gitlab'
+                            defaultMessage='Create team with GitLab Account'
+                        />
+                    </span>
                 </a>
             );
         } else if (this.props.service === Constants.GOOGLE_SERVICE) {
             button = (
                 <a
                     className='btn btn-custom-login google btn-full'
+                    key='google'
                     href='#'
                     onClick={this.handleSubmit}
                     disabled={disabled}
                 >
                     <span className='icon'/>
-                    <span>{'Create team with Google Apps Account'}</span>
+                    <span>
+                        <FormattedMessage
+                            id='sso_signup.google'
+                            defaultMessage='Create team with Google Apps Account'
+                        />
+                    </span>
                 </a>
             );
         }
@@ -113,7 +143,7 @@ export default class SSOSignUpPage extends React.Component {
                         type='text'
                         ref='teamname'
                         className='form-control'
-                        placeholder='Enter name of new team'
+                        placeholder={this.props.intl.formatMessage(holders.teamName)}
                         maxLength='128'
                         onChange={this.nameChange}
                         spellCheck='false'
@@ -125,7 +155,12 @@ export default class SSOSignUpPage extends React.Component {
                     {serverError}
                 </div>
                 <div className='form-group margin--extra-2x'>
-                    <span><a href='/find_team'>{'Find my teams'}</a></span>
+                    <span><a href='/find_team'>
+                        <FormattedMessage
+                            id='sso_signup.find'
+                            defaultMessage='Find my teams'
+                        />
+                    </a></span>
                 </div>
             </form>
         );
@@ -136,5 +171,8 @@ SSOSignUpPage.defaultProps = {
     service: ''
 };
 SSOSignUpPage.propTypes = {
+    intl: intlShape.isRequired,
     service: React.PropTypes.string
 };
+
+export default injectIntl(SSOSignUpPage);
\ No newline at end of file