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/team_signup_url_page.jsx | 74 ++++++++++++++++++++++-----
 1 file changed, 61 insertions(+), 13 deletions(-)

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

diff --git a/web/react/components/team_signup_url_page.jsx b/web/react/components/team_signup_url_page.jsx
index 30459fc67..2f6c3df49 100644
--- a/web/react/components/team_signup_url_page.jsx
+++ b/web/react/components/team_signup_url_page.jsx
@@ -5,7 +5,32 @@ import * as Utils from '../utils/utils.jsx';
 import * as Client from '../utils/client.jsx';
 import Constants from '../utils/constants.jsx';
 
-export default class TeamSignupUrlPage extends React.Component {
+import {injectIntl, intlShape, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
+
+const holders = defineMessages({
+    required: {
+        id: 'team_signup_url.required',
+        defaultMessage: 'This field is required'
+    },
+    regex: {
+        id: 'team_signup_url.regex',
+        defaultMessage: "Use only lower case letters, numbers and dashes. Must start with a letter and can't end in a dash."
+    },
+    charLength: {
+        id: 'team_signup_url.charLength',
+        defaultMessage: 'Name must be 4 or more characters up to a maximum of 15'
+    },
+    taken: {
+        id: 'team_signup_url.taken',
+        defaultMessage: 'URL is taken or contains a reserved word'
+    },
+    unavailable: {
+        id: 'team_signup_url.unavailable',
+        defaultMessage: 'This URL is unavailable. Please try another.'
+    }
+});
+
+class TeamSignupUrlPage extends React.Component {
     constructor(props) {
         super(props);
 
@@ -23,9 +48,10 @@ export default class TeamSignupUrlPage extends React.Component {
     submitNext(e) {
         e.preventDefault();
 
+        const {formatMessage} = this.props.intl;
         const name = ReactDOM.findDOMNode(this.refs.name).value.trim();
         if (!name) {
-            this.setState({nameError: 'This field is required'});
+            this.setState({nameError: formatMessage(holders.required)});
             return;
         }
 
@@ -33,17 +59,17 @@ export default class TeamSignupUrlPage extends React.Component {
 
         const urlRegex = /^[a-z]+([a-z\-0-9]+|(__)?)[a-z0-9]+$/g;
         if (cleanedName !== name || !urlRegex.test(name)) {
-            this.setState({nameError: "Use only lower case letters, numbers and dashes. Must start with a letter and can't end in a dash."});
+            this.setState({nameError: formatMessage(holders.regex)});
             return;
         } else if (cleanedName.length < 4 || cleanedName.length > 15) {
-            this.setState({nameError: 'Name must be 4 or more characters up to a maximum of 15'});
+            this.setState({nameError: formatMessage(holders.charLength)});
             return;
         }
 
         if (global.window.mm_config.RestrictTeamNames === 'true') {
             for (let index = 0; index < Constants.RESERVED_TEAM_NAMES.length; index++) {
                 if (cleanedName.indexOf(Constants.RESERVED_TEAM_NAMES[index]) === 0) {
-                    this.setState({nameError: 'URL is taken or contains a reserved word'});
+                    this.setState({nameError: formatMessage(holders.taken)});
                     return;
                 }
             }
@@ -52,7 +78,7 @@ export default class TeamSignupUrlPage extends React.Component {
         Client.findTeamByName(name,
               (data) => {
                   if (data) {
-                      this.setState({nameError: 'This URL is unavailable. Please try another.'});
+                      this.setState({nameError: formatMessage(holders.unavailable)});
                   } else {
                       if (global.window.mm_config.SendEmailNotifications === 'true') {
                           this.props.state.wizard = 'send_invites';
@@ -96,7 +122,12 @@ export default class TeamSignupUrlPage extends React.Component {
                         className='signup-team-logo'
                         src='/static/images/logo.png'
                     />
-                    <h2>{`Team URL`}</h2>
+                    <h2>
+                        <FormattedMessage
+                            id='team_signup_url.teamUrl'
+                            defaultMessage='Team URL'
+                        />
+                    </h2>
                     <div className={nameDivClass}>
                         <div className='row'>
                             <div className='col-sm-11'>
@@ -124,25 +155,39 @@ export default class TeamSignupUrlPage extends React.Component {
                         </div>
                         {nameError}
                     </div>
-                    <p>{`Choose the web address of your new team:`}</p>
+                    <p>
+                        <FormattedMessage
+                            id='team_signup_url.webAddress'
+                            defaultMessage='Choose the web address of your new team:'
+                        />
+                    </p>
                     <ul className='color--light'>
-                        <li>Short and memorable is best</li>
-                        <li>Use lowercase letters, numbers and dashes</li>
-                        <li>Must start with a letter and can't end in a dash</li>
+                        <FormattedHTMLMessage
+                            id='team_signup_url.hint'
+                            defaultMessage="<li>Short and memorable is best</li>
+                            <li>Use lowercase letters, numbers and dashes</li>
+                            <li>Must start with a letter and can't end in a dash</li>"
+                        />
                     </ul>
                     <button
                         type='submit'
                         className='btn btn-primary margin--extra'
                         onClick={this.submitNext}
                     >
-                        Next<i className='glyphicon glyphicon-chevron-right'></i>
+                        <FormattedMessage
+                            id='team_signup_url.next'
+                            defaultMessage='Next'
+                        /><i className='glyphicon glyphicon-chevron-right'></i>
                     </button>
                     <div className='margin--extra'>
                         <a
                             href='#'
                             onClick={this.submitBack}
                         >
-                            Back to previous step
+                            <FormattedMessage
+                                id='team_signup_url.back'
+                                defaultMessage='Back to previous step'
+                            />
                         </a>
                     </div>
                 </form>
@@ -152,6 +197,9 @@ export default class TeamSignupUrlPage extends React.Component {
 }
 
 TeamSignupUrlPage.propTypes = {
+    intl: intlShape.isRequired,
     state: React.PropTypes.object,
     updateParent: React.PropTypes.func
 };
+
+export default injectIntl(TeamSignupUrlPage);
\ No newline at end of file
-- 
cgit v1.2.3-1-g7c22