Add i18n strings to the login page

Change-Id: Ic85028122b238c42ead9ed956651738c4637231b
Closes-Bug: #1650557
Implements: blueprint tripleo-ui-i18n-support-for-js

src/js/components/Login.js

@@ -1,3 +1,4 @@
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Formsy from 'formsy-react';
@@ -12,6 +13,38 @@ import NotificationsToaster from './notifications/NotificationsToaster';
 import LogoSvg from '../../img/logo.svg';
 import TripleoOwlSvg from '../../img/tripleo-owl.svg';
 
+const messages = defineMessages({
+  username: {
+    id: 'Login.username',
+    defaultMessage: 'Username'
+  },
+  usernameRequired: {
+    id: 'Login.usernameRequired',
+    defaultMessage: 'Username is required'
+  },
+  password: {
+    id: 'Login.password',
+    defaultMessage: 'Password'
+  },
+  passwordRequired: {
+    id: 'Login.passwordRequired',
+    defaultMessage: 'Password is required'
+  },
+  login: {
+    id: 'Login.login',
+    defaultMessage: 'Log In'
+  },
+  welcome: {
+    id: 'Login.welcome',
+    defaultMessage: 'Welcome to TripleO!'
+  },
+  description: {
+    id: 'Login.description',
+    defaultMessage: 'TripleO will help you manage your OpenStack deployments. It\'s the best '
+                    + 'thing since sliced bread. We think you will really enjoy it!'
+  }
+});
+
 class Login extends React.Component {
   constructor() {
     super();
@@ -52,6 +85,8 @@ class Login extends React.Component {
   }
 
   render() {
+    const { formatMessage } = this.props.intl;
+
     return (
       <div>
         <span id="badge">
@@ -73,24 +108,25 @@ class Login extends React.Component {
                            onValid={this._enableButton.bind(this)}
                            onInvalid={this._disableButton.bind(this)}>
                 <LoginInput name="username"
-                            placeholder="Username"
-                            title="Username"
-                            validationError="Username is required"
+                            placeholder={formatMessage(messages.username)}
+                            title={formatMessage(messages.username)}
+                            validationError={formatMessage(messages.usernameRequired)}
                             required
-                            autoFocus
-                />
+                            autoFocus/>
                 <LoginInput type="password"
                             name="password"
-                            placeholder="Password"
-                            title="Password"
-                            validationError="Password is required"
+                            placeholder={formatMessage(messages.password)}
+                            title={formatMessage(messages.password)}
+                            validationError={formatMessage(messages.passwordRequired)}
                             required/>
                 <div className="form-group">
                   <div className="col-xs-offset-8 col-xs-4 col-sm-4 col-md-4 submit">
                     <button type="submit"
                             disabled={!this.state.canSubmit || this.props.isAuthenticating}
-                            className="btn btn-primary btn-lg" tabIndex="4" id="Login__loginButton">
-                      Log In
+                            className="btn btn-primary btn-lg"
+                            tabIndex="4"
+                            id="Login__loginButton">
+                      <FormattedMessage {...messages.login}/>
                     </button>
                   </div>
                 </div>
@@ -98,9 +134,8 @@ class Login extends React.Component {
             </div>
             <div className="col-sm-5 col-md-6 col-lg-7 details">
               <p>
-                <strong>Welcome to TripleO!</strong><br/>
-                TripleO will help you manage your OpenStack deployments. It's the best
-                thing since sliced bread. We think you will really enjoy it!
+                <strong><FormattedMessage {...messages.welcome}/></strong><br/>
+                <FormattedMessage {...messages.description}/>
               </p>
             </div>
           </div>
@@ -114,6 +149,7 @@ Login.propTypes = {
   dispatch: React.PropTypes.func.isRequired,
   formErrors: ImmutablePropTypes.list.isRequired,
   formFieldErrors: ImmutablePropTypes.map.isRequired,
+  intl: React.PropTypes.object,
   isAuthenticating: React.PropTypes.bool.isRequired,
   location: React.PropTypes.object,
   userLoggedIn: React.PropTypes.bool.isRequired
@@ -128,4 +164,4 @@ function mapStateToProps(state) {
   };
 }
 
-export default connect(mapStateToProps)(Login);
+export default connect(mapStateToProps)(injectIntl(Login));