From 94a19ae75e71b59d01a37cc1c0415d5796d45440 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Fri, 29 Jan 2016 00:24:43 -0300
Subject: PLT-7: Refactoring frontend (chunk 5) - Signup Team Complete - Signup
 User Complete - Email Verify

---
 web/react/components/signup_user_complete.jsx | 151 ++++++++++++++++++++++----
 1 file changed, 130 insertions(+), 21 deletions(-)

(limited to 'web/react/components/signup_user_complete.jsx')

diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx
index ace0d28ae..47ec58e98 100644
--- a/web/react/components/signup_user_complete.jsx
+++ b/web/react/components/signup_user_complete.jsx
@@ -7,7 +7,32 @@ import UserStore from '../stores/user_store.jsx';
 import BrowserStore from '../stores/browser_store.jsx';
 import Constants from '../utils/constants.jsx';
 
-export default class SignupUserComplete extends React.Component {
+import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
+
+const holders = defineMessages({
+    required: {
+        id: 'signup_user_completed.required',
+        defaultMessage: 'This field is required'
+    },
+    validEmail: {
+        id: 'signup_user_completed.validEmail',
+        defaultMessage: 'Please enter a valid email address'
+    },
+    reserved: {
+        id: 'signup_user_completed.reserved',
+        defaultMessage: 'This username is reserved, please choose a new one.'
+    },
+    usernameLength: {
+        id: 'signup_user_completed.usernameLength',
+        defaultMessage: 'Username must begin with a letter, and contain between {min} to {max} lowercase characters made up of numbers, letters, and the symbols \'.\', \'-\' and \'_\'.'
+    },
+    passwordLength: {
+        id: 'signup_user_completed.passwordLength',
+        defaultMessage: 'Please enter at least {min} characters'
+    }
+});
+
+class SignupUserComplete extends React.Component {
     constructor(props) {
         super(props);
 
@@ -29,30 +54,31 @@ export default class SignupUserComplete extends React.Component {
     handleSubmit(e) {
         e.preventDefault();
 
+        const {formatMessage} = this.props.intl;
         const providedEmail = ReactDOM.findDOMNode(this.refs.email).value.trim();
         if (!providedEmail) {
-            this.setState({nameError: '', emailError: 'This field is required', passwordError: ''});
+            this.setState({nameError: '', emailError: formatMessage(holders.required), passwordError: ''});
             return;
         }
 
         if (!Utils.isEmail(providedEmail)) {
-            this.setState({nameError: '', emailError: 'Please enter a valid email address', passwordError: ''});
+            this.setState({nameError: '', emailError: formatMessage(holders.validEmail), passwordError: ''});
             return;
         }
 
         const providedUsername = ReactDOM.findDOMNode(this.refs.name).value.trim().toLowerCase();
         if (!providedUsername) {
-            this.setState({nameError: 'This field is required', emailError: '', passwordError: '', serverError: ''});
+            this.setState({nameError: formatMessage(holders.required), emailError: '', passwordError: '', serverError: ''});
             return;
         }
 
         const usernameError = Utils.isValidUsername(providedUsername);
         if (usernameError === 'Cannot use a reserved word as a username.') {
-            this.setState({nameError: 'This username is reserved, please choose a new one.', emailError: '', passwordError: '', serverError: ''});
+            this.setState({nameError: formatMessage(holders.reserved), emailError: '', passwordError: '', serverError: ''});
             return;
         } else if (usernameError) {
             this.setState({
-                nameError: 'Username must begin with a letter, and contain between ' + Constants.MIN_USERNAME_LENGTH + ' to ' + Constants.MAX_USERNAME_LENGTH + ' lowercase characters made up of numbers, letters, and the symbols \'.\', \'-\' and \'_\'.',
+                nameError: formatMessage(holders.usernameLength, {min: Constants.MIN_USERNAME_LENGTH, max: Constants.MAX_USERNAME_LENGTH}),
                 emailError: '',
                 passwordError: '',
                 serverError: ''
@@ -62,7 +88,7 @@ export default class SignupUserComplete extends React.Component {
 
         const providedPassword = ReactDOM.findDOMNode(this.refs.password).value.trim();
         if (!providedPassword || providedPassword.length < Constants.MIN_PASSWORD_LENGTH) {
-            this.setState({nameError: '', emailError: '', passwordError: 'Please enter at least ' + Constants.MIN_PASSWORD_LENGTH + ' characters', serverError: ''});
+            this.setState({nameError: '', emailError: '', passwordError: formatMessage(holders.passwordLength, {min: Constants.MIN_PASSWORD_LENGTH}), serverError: ''});
             return;
         }
 
@@ -95,7 +121,7 @@ export default class SignupUserComplete extends React.Component {
                         window.location.href = '/' + this.props.teamName + '/channels/town-square';
                     },
                     (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?email=' + encodeURIComponent(user.email) + '&teamname=' + encodeURIComponent(this.props.teamName);
                         } else {
                             this.setState({serverError: err.message});
@@ -112,7 +138,14 @@ export default class SignupUserComplete extends React.Component {
         client.track('signup', 'signup_user_01_welcome');
 
         if (this.state.wizard === 'finished') {
-            return <div>{"You've already completed the signup process for this invitation or this invitation has expired."}</div>;
+            return (
+                <div>
+                    <FormattedMessage
+                        id='signup_user_completed.expired'
+                        defaultMessage="You've already completed the signup process for this invitation or this invitation has expired."
+                    />
+                </div>
+            );
         }
 
         // set up error labels
@@ -124,7 +157,18 @@ export default class SignupUserComplete extends React.Component {
         }
 
         var nameError = null;
-        var nameHelpText = <span className='help-block'>{'Username must begin with a letter, and contain between ' + Constants.MIN_USERNAME_LENGTH + ' to ' + Constants.MAX_USERNAME_LENGTH + " lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'"}</span>;
+        var nameHelpText = (
+            <span className='help-block'>
+                <FormattedMessage
+                    id='signup_user_completed.userHelp'
+                    defaultMessage="Username must begin with a letter, and contain between {min} to {max} lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'"
+                    values={{
+                        min: Constants.MIN_USERNAME_LENGTH,
+                        max: Constants.MAX_USERNAME_LENGTH
+                    }}
+                />
+            </span>
+        );
         var nameDivStyle = 'form-group';
         if (this.state.nameError) {
             nameError = <label className='control-label'>{this.state.nameError}</label>;
@@ -151,7 +195,16 @@ export default class SignupUserComplete extends React.Component {
         // set up the email entry and hide it if an email was provided
         var yourEmailIs = '';
         if (this.state.user.email) {
-            yourEmailIs = <span>{'Your email address is '}<strong>{this.state.user.email}</strong>{". You'll use this address to sign in to " + global.window.mm_config.SiteName + '.'}</span>;
+            yourEmailIs = (
+                <FormattedHTMLMessage
+                    id='signup_user_completed.emailIs'
+                    defaultMessage="Your email address is <strong>{email}</strong>. You'll use this address to sign in to {siteName}."
+                    values={{
+                        email: this.state.user.email,
+                        siteName: global.window.mm_config.SiteName
+                    }}
+                />
+            );
         }
 
         var emailContainerStyle = 'margin--extra';
@@ -161,7 +214,12 @@ export default class SignupUserComplete extends React.Component {
 
         var email = (
             <div className={emailContainerStyle}>
-                <h5><strong>{"What's your email address?"}</strong></h5>
+                <h5><strong>
+                    <FormattedMessage
+                        id='signup_user_completed.whatis'
+                        defaultMessage="What's your email address?"
+                    />
+                </strong></h5>
                 <div className={emailDivStyle}>
                     <input
                         type='email'
@@ -183,10 +241,16 @@ export default class SignupUserComplete extends React.Component {
             signupMessage.push(
                     <a
                         className='btn btn-custom-login gitlab'
+                        key='gitlab'
                         href={'/' + this.props.teamName + '/signup/gitlab' + window.location.search}
                     >
                         <span className='icon' />
-                        <span>{'with GitLab'}</span>
+                        <span>
+                            <FormattedMessage
+                                id='signup_user_completed.gitlab'
+                                defaultMessage='with GitLab'
+                            />
+                        </span>
                     </a>
            );
         }
@@ -195,10 +259,16 @@ export default class SignupUserComplete extends React.Component {
             signupMessage.push(
                 <a
                     className='btn btn-custom-login google'
+                    key='google'
                     href={'/' + this.props.teamName + '/signup/google' + window.location.search}
                 >
                     <span className='icon' />
-                    <span>{'with Google'}</span>
+                    <span>
+                        <FormattedMessage
+                            id='signup_user_completed.google'
+                            defaultMessage='with Google'
+                        />
+                    </span>
                 </a>
            );
         }
@@ -211,7 +281,12 @@ export default class SignupUserComplete extends React.Component {
                         {email}
                         {yourEmailIs}
                         <div className='margin--extra'>
-                            <h5><strong>{'Choose your username'}</strong></h5>
+                            <h5><strong>
+                                <FormattedMessage
+                                    id='signup_user_completed.chooseUser'
+                                    defaultMessage='Choose your username'
+                                />
+                            </strong></h5>
                             <div className={nameDivStyle}>
                                 <input
                                     type='text'
@@ -226,7 +301,12 @@ export default class SignupUserComplete extends React.Component {
                             </div>
                         </div>
                         <div className='margin--extra'>
-                            <h5><strong>{'Choose your password'}</strong></h5>
+                            <h5><strong>
+                                <FormattedMessage
+                                    id='signup_user_completed.choosePwd'
+                                    defaultMessage='Choose your password'
+                                />
+                            </strong></h5>
                             <div className={passwordDivStyle}>
                             <input
                                 type='password'
@@ -246,7 +326,10 @@ export default class SignupUserComplete extends React.Component {
                             onClick={this.handleSubmit}
                             className='btn-primary btn'
                         >
-                            {'Create Account'}
+                            <FormattedMessage
+                                id='signup_user_completed.create'
+                                defaultMessage='Create Account'
+                            />
                         </button>
                     </p>
                 </div>
@@ -258,7 +341,12 @@ export default class SignupUserComplete extends React.Component {
                 <div>
                     {signupMessage}
                     <div className='or__container'>
-                        <span>{'or'}</span>
+                        <span>
+                            <FormattedMessage
+                                id='signup_user_completed.or'
+                                defaultMessage='or'
+                            />
+                        </span>
                     </div>
                 </div>
             );
@@ -271,10 +359,28 @@ export default class SignupUserComplete extends React.Component {
                         className='signup-team-logo'
                         src='/static/images/logo.png'
                     />
-                    <h5 className='margin--less'>{'Welcome to:'}</h5>
+                    <h5 className='margin--less'>
+                        <FormattedMessage
+                            id='signup_user_completed.welcome'
+                            defaultMessage='Welcome to:'
+                        />
+                    </h5>
                     <h2 className='signup-team__name'>{this.props.teamDisplayName}</h2>
-                    <h2 className='signup-team__subdomain'>{'on ' + global.window.mm_config.SiteName}</h2>
-                    <h4 className='color--light'>{"Let's create your account"}</h4>
+                    <h2 className='signup-team__subdomain'>
+                        <FormattedMessage
+                            id='signup_user_completed.onSite'
+                            defaultMessage='on {siteName}'
+                            values={{
+                                siteName: global.window.mm_config.SiteName
+                            }}
+                        />
+                    </h2>
+                    <h4 className='color--light'>
+                        <FormattedMessage
+                            id='signup_user_completed.lets'
+                            defaultMessage="Let's create your account"
+                        />
+                    </h4>
                     {signupMessage}
                     {emailSignup}
                     {serverError}
@@ -293,6 +399,7 @@ SignupUserComplete.defaultProps = {
     teamDisplayName: ''
 };
 SignupUserComplete.propTypes = {
+    intl: intlShape.isRequired,
     teamName: React.PropTypes.string,
     hash: React.PropTypes.string,
     teamId: React.PropTypes.string,
@@ -300,3 +407,5 @@ SignupUserComplete.propTypes = {
     data: React.PropTypes.string,
     teamDisplayName: React.PropTypes.string
 };
+
+export default injectIntl(SignupUserComplete);
\ No newline at end of file
-- 
cgit v1.2.3-1-g7c22

