PLT-7: Refactoring frontend (chunk 3)

- Tutorial components
- Claim components
- Suggestion components

3 files changed, 127 insertions, 17 deletions

diff --git a/web/react/components/claim/claim_account.jsx b/web/react/components/claim/claim_account.jsx
index f38f558db..87026b762 100644
--- a/web/react/components/claim/claim_account.jsx
+++ b/web/react/components/claim/claim_account.jsx
@@ -4,6 +4,8 @@
 import EmailToSSO from './email_to_sso.jsx';
 import SSOToEmail from './sso_to_email.jsx';
 
+import {FormattedMessage} from 'mm-intl';
+
 export default class ClaimAccount extends React.Component {
     constructor(props) {
         super(props);
@@ -13,7 +15,14 @@ export default class ClaimAccount extends React.Component {
     render() {
         let content;
         if (this.props.email === '') {
-            content = <p>{'No email specified.'}</p>;
+            content = (
+                <p>
+                    <FormattedMessage
+                        id='claim.account.noEmail'
+                        defaultMessage='No email specified'
+                    />
+                </p>
+            );
         } else if (this.props.currentType === '' && this.props.newType !== '') {
             content = (
                 <EmailToSSO
diff --git a/web/react/components/claim/email_to_sso.jsx b/web/react/components/claim/email_to_sso.jsx
index ac0cf876b..3d4b9e91f 100644
--- a/web/react/components/claim/email_to_sso.jsx
+++ b/web/react/components/claim/email_to_sso.jsx
@@ -4,7 +4,20 @@
 import * as Utils from '../../utils/utils.jsx';
 import * as Client from '../../utils/client.jsx';
 
-export default class EmailToSSO extends React.Component {
+import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
+
+const holders = defineMessages({
+    pwdError: {
+        id: 'claim.email_to_sso.pwdError',
+        defaultMessage: 'Please enter your password.'
+    },
+    pwd: {
+        id: 'claim.email_to_sso.pwd',
+        defaultMessage: 'Password'
+    }
+});
+
+class EmailToSSO extends React.Component {
     constructor(props) {
         super(props);
 
@@ -18,7 +31,7 @@ export default class EmailToSSO extends React.Component {
 
         var password = ReactDOM.findDOMNode(this.refs.password).value.trim();
         if (!password) {
-            state.error = 'Please enter your password.';
+            state.error = this.props.intl.formatMessage(holders.pwdError);
             this.setState(state);
             return;
         }
@@ -59,17 +72,42 @@ export default class EmailToSSO extends React.Component {
         return (
             <div className='col-sm-12'>
                 <div className='signup-team__container'>
-                    <h3>{'Switch Email/Password Account to ' + uiType}</h3>
+                    <h3>
+                        <FormattedMessage
+                            id='claim.email_to_sso.title'
+                            defaultMessage='Switch Email/Password Account to {uiType}'
+                            values={{
+                                uiType: uiType
+                            }}
+                        />
+                    </h3>
                     <form onSubmit={this.submit}>
-                        <p>{'Upon claiming your account, you will only be able to login with ' + Utils.toTitleCase(this.props.type) + ' SSO.'}</p>
-                        <p>{'Enter the password for your ' + this.props.teamDisplayName + ' ' + global.window.mm_config.SiteName + ' account.'}</p>
+                        <p>
+                            <FormattedMessage
+                                id='claim.email_to_sso.ssoType'
+                                defaultMessage='Upon claiming your account, you will only be able to login with {type} SSO'
+                                values={{
+                                    type: Utils.toTitleCase(this.props.type)
+                                }}
+                            />
+                        </p>
+                        <p>
+                            <FormattedMessage
+                                id='claim.email_to_sso.enterPwd'
+                                defaultMessage='Enter the password for your {team} {site} account'
+                                values={{
+                                    team: this.props.teamDisplayName,
+                                    site: global.window.mm_config.SiteName
+                                }}
+                            />
+                        </p>
                         <div className={formClass}>
                             <input
                                 type='password'
                                 className='form-control'
                                 name='password'
                                 ref='password'
-                                placeholder='Password'
+                                placeholder={this.props.intl.formatMessage(holders.pwd)}
                                 spellCheck='false'
                             />
                         </div>
@@ -78,7 +116,13 @@ export default class EmailToSSO extends React.Component {
                             type='submit'
                             className='btn btn-primary'
                         >
-                            {'Switch account to ' + uiType}
+                            <FormattedMessage
+                                id='claim.email_to_sso.switchTo'
+                                defaultMessage='Switch account to {uiType}'
+                                values={{
+                                    uiType: uiType
+                                }}
+                            />
                         </button>
                     </form>
                 </div>
@@ -90,8 +134,11 @@ export default class EmailToSSO extends React.Component {
 EmailToSSO.defaultProps = {
 };
 EmailToSSO.propTypes = {
+    intl: intlShape.isRequired,
     type: React.PropTypes.string.isRequired,
     email: React.PropTypes.string.isRequired,
     teamName: React.PropTypes.string.isRequired,
     teamDisplayName: React.PropTypes.string.isRequired
 };
+
+export default injectIntl(EmailToSSO);
\ No newline at end of file
diff --git a/web/react/components/claim/sso_to_email.jsx b/web/react/components/claim/sso_to_email.jsx
index 0868b7f2f..73ff13cc9 100644
--- a/web/react/components/claim/sso_to_email.jsx
+++ b/web/react/components/claim/sso_to_email.jsx
@@ -4,7 +4,28 @@
 import * as Utils from '../../utils/utils.jsx';
 import * as Client from '../../utils/client.jsx';
 
-export default class SSOToEmail extends React.Component {
+import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
+
+const holders = defineMessages({
+    enterPwd: {
+        id: 'claim.sso_to_email.enterPwd',
+        defaultMessage: 'Please enter a password.'
+    },
+    pwdNotMatch: {
+        id: 'claim.sso_to_email.pwdNotMatch',
+        defaultMessage: 'Password do not match.'
+    },
+    newPwd: {
+        id: 'claim.sso_to_email.newPwd',
+        defaultMessage: 'New Password'
+    },
+    confirm: {
+        id: 'claim.sso_to_email.confirm',
+        defaultMessage: 'Confirm Password'
+    }
+});
+
+class SSOToEmail extends React.Component {
     constructor(props) {
         super(props);
 
@@ -13,19 +34,20 @@ export default class SSOToEmail extends React.Component {
         this.state = {};
     }
     submit(e) {
+        const {formatMessage} = this.props.intl;
         e.preventDefault();
         const state = {};
 
         const password = ReactDOM.findDOMNode(this.refs.password).value.trim();
         if (!password) {
-            state.error = 'Please enter a password.';
+            state.error = formatMessage(holders.enterPwd);
             this.setState(state);
             return;
         }
 
         const confirmPassword = ReactDOM.findDOMNode(this.refs.passwordconfirm).value.trim();
         if (!confirmPassword || password !== confirmPassword) {
-            state.error = 'Passwords do not match.';
+            state.error = formatMessage(holders.pwdNotMatch);
             this.setState(state);
             return;
         }
@@ -50,6 +72,7 @@ export default class SSOToEmail extends React.Component {
         );
     }
     render() {
+        const {formatMessage} = this.props.intl;
         var error = null;
         if (this.state.error) {
             error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>;
@@ -65,17 +88,39 @@ export default class SSOToEmail extends React.Component {
         return (
             <div className='col-sm-12'>
                 <div className='signup-team__container'>
-                    <h3>{'Switch ' + uiType + ' Account to Email'}</h3>
+                    <h3>
+                        <FormattedMessage
+                            id='claim.sso_to_email.title'
+                            defaultMessage='Switch {type} Account to Email'
+                            values={{
+                                type: uiType
+                            }}
+                        />
+                    </h3>
                     <form onSubmit={this.submit}>
-                        <p>{'Upon changing your account type, you will only be able to login with your email and password.'}</p>
-                        <p>{'Enter a new password for your ' + this.props.teamDisplayName + ' ' + global.window.mm_config.SiteName + ' account.'}</p>
+                        <p>
+                            <FormattedMessage
+                                id='claim.sso_to_email.description'
+                                defaultMessage='Upon changing your account type, you will only be able to login with your email and password.'
+                            />
+                        </p>
+                        <p>
+                            <FormattedMessage
+                                id='claim.sso_to_email_newPwd'
+                                defaultMessage='Enter a new password for your {team} {site} account'
+                                values={{
+                                    team: this.props.teamDisplayName,
+                                    site: global.window.mm_config.SiteName
+                                }}
+                            />
+                        </p>
                         <div className={formClass}>
                             <input
                                 type='password'
                                 className='form-control'
                                 name='password'
                                 ref='password'
-                                placeholder='New Password'
+                                placeholder={formatMessage(holders.newPwd)}
                                 spellCheck='false'
                             />
                         </div>
@@ -85,7 +130,7 @@ export default class SSOToEmail extends React.Component {
                                 className='form-control'
                                 name='passwordconfirm'
                                 ref='passwordconfirm'
-                                placeholder='Confirm Password'
+                                placeholder={formatMessage(holders.confirm)}
                                 spellCheck='false'
                             />
                         </div>
@@ -94,7 +139,13 @@ export default class SSOToEmail extends React.Component {
                             type='submit'
                             className='btn btn-primary'
                         >
-                            {'Switch ' + uiType + ' account to email and password'}
+                            <FormattedMessage
+                                id='claim.sso_to_email.switchTo'
+                                defaultMessage='Switch {type} to email and password'
+                                values={{
+                                    type: uiType
+                                }}
+                            />
                         </button>
                     </form>
                 </div>
@@ -106,8 +157,11 @@ export default class SSOToEmail extends React.Component {
 SSOToEmail.defaultProps = {
 };
 SSOToEmail.propTypes = {
+    intl: intlShape.isRequired,
     currentType: React.PropTypes.string.isRequired,
     email: React.PropTypes.string.isRequired,
     teamName: React.PropTypes.string.isRequired,
     teamDisplayName: React.PropTypes.string.isRequired
 };
+
+export default injectIntl(SSOToEmail);
\ No newline at end of file