Add i18n with spanish and english texts.

package.json

@@ -35,6 +35,7 @@
     "react": "15.2.0",
     "react-bootstrap": "0.30.2",
     "react-dom": "15.2.0",
+    "react-intl": "2.1.5",
     "react-redux": "4.4.5",
     "react-router": "2.5.2",
     "react-router-redux": "4.0.5",

src/components/common/MainToolBar.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Link, IndexLink } from 'react-router'
+import { Link } from 'react-router'
+import { injectIntl, FormattedMessage } from 'react-intl'
 
 import LogInAndOut from '../login/LogInAndOut'
 
@@ -25,10 +26,13 @@ function MainToolBar (props) {
           <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
             <ul className="nav navbar-nav">
               <li>
-                <IndexLink to="/">Home</IndexLink>
-              </li>
-              <li>
-                <Link to="/about">About</Link>
+                <Link to="/about">
+                  <FormattedMessage
+                    id="mainToolBar.about"
+                    description="About link in main toolbar"
+                    defaultMessage="About"
+                  />
+                </Link>
               </li>
             </ul>
             <LogInAndOut />
@@ -39,4 +43,4 @@ function MainToolBar (props) {
   )
 }
 
-export default MainToolBar
+export default injectIntl(MainToolBar)

src/components/info/AboutPage.jsx

@@ -1,16 +1,44 @@
 import React from 'react'
+import { injectIntl, FormattedMessage } from 'react-intl'
 
 // Since this component is simple and static, there's no parent container for it.
 function AboutPage () {
   return (
     <div>
-      <h2 className="text-center">About</h2>
+      <h2 className="text-center">
+        <FormattedMessage
+          id="aboutPage.title"
+          description="Main title in about page"
+          defaultMessage="About"
+        />
+      </h2>
       <p>
-        With <span className="fa fa-heart" /> from XEA contributors and
-        <a target="_blank" rel="noopener noreferrer" href="http://gpul.org/">GPUL</a> association.
+        <FormattedMessage
+          id="aboutPage.footer.text1"
+          description="Text 1 in about page footer"
+          defaultMessage="With "
+        />
+        <span className="fa fa-heart" />
+        <FormattedMessage
+          id="aboutPage.footer.text2"
+          description="Text 2 in about page footer"
+          defaultMessage=" from XEA contributors and"
+        />
+        <a target="_blank" rel="noopener noreferrer" href="http://gpul.org/">
+          <FormattedMessage
+            id="aboutPage.footer.text3"
+            description="Text 3 in about page footer"
+            defaultMessage=" GPUL"
+          />
+        </a>
+        <FormattedMessage
+          id="aboutPage.footer.text4"
+          description="Text 4 in about page footer"
+          defaultMessage=" association"
+        />
       </p>
     </div>
   )
 }
 
-export default AboutPage
+export default injectIntl(AboutPage)

src/components/info/NotFoundPage.jsx

@@ -1,15 +1,26 @@
 import React from 'react'
 import { Link } from 'react-router'
+import { injectIntl, FormattedMessage } from 'react-intl'
 
 function NotFoundPage () {
   return (
     <div>
       <h4>
-        404 Page Not Found
+        <FormattedMessage
+          id="notFoundPage.title"
+          description="Page not found title"
+          defaultMessage="Page Not Found"
+        />
       </h4>
-      <Link to="/"> Go back to homepage </Link>
+      <Link to="/">
+        <FormattedMessage
+          id="notFoundPage.goBackLink"
+          description="Link to go back to the main page"
+          defaultMessage="Go back to homepage"
+        />
+      </Link>
     </div>
   )
 }
 
-export default NotFoundPage
+export default injectIntl(NotFoundPage)

src/components/login/LogInAndOut.jsx

@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { Modal } from 'react-bootstrap'
+import { injectIntl, FormattedMessage } from 'react-intl'
+
 import { loginRequest, logoutRequest } from '../../actions/authActions'
 
 import LoginForm from './LoginForm'
@@ -72,15 +74,25 @@ class LogInAndOut extends Component {
             className="btn btn-link navbar-btn btn-as-navbar-link"
             onClick={this.open}
           >
-            Log in
+            <FormattedMessage
+              id="mainToolBar.login"
+              description="Login button in main toolbar"
+              defaultMessage="Log in"
+            />
           </button>
         </li>
         <Modal
           bsSize="small"
           show={this.state.showModal} onHide={this.close}
         >
           <Modal.Header closeButton>
-            <Modal.Title>Log in</Modal.Title>
+            <Modal.Title>
+              <FormattedMessage
+                id="mainToolBar.login"
+                description="Login button in main toolbar"
+                defaultMessage="Log in"
+              />
+            </Modal.Title>
           </Modal.Header>
           <Modal.Body>
             <LoginForm error={this.props.errorMessage} handleFormSubmit={this.handleLogin} />
@@ -114,4 +126,4 @@ function mapStateToProps (state) {
   }
 }
 
-export default connect(mapStateToProps, { loginRequest, logoutRequest })(LogInAndOut)
+export default connect(mapStateToProps, { loginRequest, logoutRequest })(injectIntl(LogInAndOut))

src/components/login/LoginForm.jsx

@@ -2,10 +2,45 @@ import React, { Component, PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import { connect } from 'react-redux'
 import { Field, reduxForm } from 'redux-form'
+import { injectIntl, FormattedMessage, defineMessages, intlShape } from 'react-intl'
+
 import { FormGroup, FormControl, ControlLabel, HelpBlock } from 'react-bootstrap'
 
 import ErrorMessage from '../common/ErrorMessage'
 
+const messages = defineMessages({
+  usernameLabel: {
+    id: 'login.username',
+    description: 'User name label in login popup',
+    defaultMessage: 'User name'
+  },
+  usernamePlaceholder: {
+    id: 'login.username',
+    description: 'User name input placeholder in login popup',
+    defaultMessage: 'User name'
+  },
+  passwordLabel: {
+    id: 'login.password',
+    description: 'Password label in login popup',
+    defaultMessage: 'Password'
+  },
+  passwordPlaceholder: {
+    id: 'login.password',
+    description: 'Password input placeholder in login popup',
+    defaultMessage: 'Password'
+  },
+  loginButton: {
+    id: 'login.loginButton',
+    description: 'Login button text',
+    defaultMessage: 'Log in'
+  },
+  clearButton: {
+    id: 'login.clearButton',
+    description: 'Clear values button text',
+    defaultMessage: 'Clear'
+  }
+})
+
 class LoginForm extends Component {
   constructor (props) {
     super(props)
@@ -60,22 +95,31 @@ class LoginForm extends Component {
   }
 
   render () {
+    const formattedText = {
+      usernamePlaceholder: this.props.intl.formatMessage(messages.usernameLabel),
+      passwordPlaceholder: this.props.intl.formatMessage(messages.passwordLabel)
+    }
+
     const { handleSubmit, reset, pristine, submitting, valid, errorMessage } = this.props
     return (
       <form onSubmit={handleSubmit(this.props.handleFormSubmit)}>
         {errorMessage ? <ErrorMessage error={errorMessage} /> : null}
         <Field
           name="username"
-          label="User name"
-          placeholder="username"
+          label={
+            <FormattedMessage {...messages.usernameLabel} />
+          }
+          placeholder={formattedText.usernamePlaceholder}
           component={this.renderField}
           type="text"
           normalize={this.usernameNormalizer}
         />
         <Field
           name="password"
-          label="Password"
-          placeholder="Password"
+          label={
+            <FormattedMessage {...messages.passwordLabel} />
+          }
+          placeholder={formattedText.passwordPlaceholder}
           component={this.renderField}
           type="password"
         />
@@ -84,15 +128,15 @@ class LoginForm extends Component {
             disabled={pristine || submitting || !valid}
             className="btn btn-primary"
           >
-            Log in
+            <FormattedMessage {...messages.loginButton} />
           </button>
           <button
             type="button"
             disabled={pristine || submitting}
             onClick={reset}
             className="btn btn-warning pull-right"
           >
-            Clear Values
+            <FormattedMessage {...messages.clearButton} />
           </button>
         </div>
       </form>
@@ -107,7 +151,8 @@ LoginForm.propTypes = {
   submitting: PropTypes.bool,
   reset: PropTypes.func,
   handleSubmit: PropTypes.func,
-  handleFormSubmit: PropTypes.func
+  handleFormSubmit: PropTypes.func,
+  intl: intlShape.isRequired
 }
 
 // TODO: must be defined and enforced.
@@ -147,4 +192,4 @@ function mapStateToProps (state) {
   }
 }
 
-export default connect(mapStateToProps)(reduxForm(formOptions)(LoginForm))
+export default connect(mapStateToProps)(reduxForm(formOptions)(injectIntl(LoginForm)))

src/components/login/UserMenu.jsx

@@ -1,11 +1,28 @@
 import React, { PropTypes } from 'react'
 import { DropdownButton, MenuItem } from 'react-bootstrap'
+import { injectIntl, FormattedMessage } from 'react-intl'
 
 function UserMenu (props) {
   return (
-    <DropdownButton bsStyle="btn btn-link navbar-btn btn-as-navbar-link" title={props.username}>
-      <MenuItem>Profile</MenuItem>
-      <MenuItem onClick={props.handleLogout}>Sign out</MenuItem>
+    <DropdownButton
+      id="loginDropdown"
+      className="btn btn-link navbar-btn btn-as-navbar-link"
+      title={props.username}
+    >
+      <MenuItem>
+        <FormattedMessage
+          id="userMenu.item.profile"
+          description="Profile menu item"
+          defaultMessage="Profile"
+        />
+      </MenuItem>
+      <MenuItem onClick={props.handleLogout}>
+        <FormattedMessage
+          id="userMenu.item.signOut"
+          description="Sign out menu item"
+          defaultMessage="Sign out"
+        />
+      </MenuItem>
     </DropdownButton>
   )
 }
@@ -15,4 +32,4 @@ UserMenu.propTypes = {
   handleLogout: PropTypes.func
 }
 
-export default UserMenu
+export default injectIntl(UserMenu)

src/components/main/MainPage.jsx

@@ -1,18 +1,29 @@
 import React from 'react'
+import { injectIntl, FormattedMessage } from 'react-intl'
 import SearchMenu from '../search/SearchMenu'
 
 function MainPage () {
   return (
     <div>
-      <h2 className="text-center">Welcome to Xea</h2>
+      <h2 className="text-center">
+        <FormattedMessage
+          id="main.welcome"
+          description="Welcome header text"
+          defaultMessage="Welcome to Xea"
+        />
+      </h2>
       <div className="row">
         <SearchMenu />
       </div>
       <p className="row text-center">
-        Here you could see a list with near events
+        <FormattedMessage
+          id="main.description"
+          description="Description that tell people what they can see in the main page"
+          defaultMessage="Here you can see a list with near events"
+        />
       </p>
     </div>
   )
 }
 
-export default MainPage
+export default injectIntl(MainPage)

src/i18n/messages/en.js

@@ -0,0 +1,19 @@
+export default {
+  'mainToolBar.about': 'About',
+  'mainToolBar.login': 'Log in',
+  'login.username': 'User name',
+  'login.password': 'Password',
+  'login.loginButton': 'Log in',
+  'login.clearButton': 'Clear',
+  'userMenu.item.profile': 'Profile',
+  'userMenu.item.signOut': 'Sign out',
+  'main.description': 'Here you can see a list with near events',
+  'main.welcome': 'Welcome to Xea',
+  'aboutPage.title': 'About us',
+  'aboutPage.footer.text1': 'With ',
+  'aboutPage.footer.text2': ' from XEA contributors and ',
+  'aboutPage.footer.text3': ' GPUL',
+  'aboutPage.footer.text4': ' association.',
+  'notFoundPage.title': 'Page not found',
+  'notFoundPage.goBackLink': 'Go back to home page'
+}

src/i18n/messages/es.js

@@ -0,0 +1,19 @@
+export default {
+  'mainToolBar.about': 'Acerca de',
+  'mainToolBar.login': 'Iniciar sesión',
+  'login.username': 'Nombre de usuario',
+  'login.password': 'Contraseña',
+  'login.loginButton': 'Entra',
+  'login.clearButton': 'Limpiar',
+  'userMenu.item.profile': 'Perfil',
+  'userMenu.item.signOut': 'Cerrar sesión',
+  'main.description': 'Aquí puedes ver la lista de eventos cercanos',
+  'main.welcome': 'Bienvenido a Xea',
+  'aboutPage.title': '¿Quienes somos?',
+  'aboutPage.footer.text1': 'Con ',
+  'aboutPage.footer.text2': ' de los contribuidores de XEA y la asociación',
+  'aboutPage.footer.text3': ' GPUL',
+  'aboutPage.footer.text4': '.',
+  'notFoundPage.title': 'Página no encontrada',
+  'notFoundPage.goBackLink': 'Volver a la página principal'
+}