[Ivan Diaz] - Add i18n functionality and styling login widget styling tweaks

package.json

@@ -46,6 +46,7 @@
     "humps": "^0.6.0",
     "jest-cli": "^0.4.19",
     "lodash": "^3.10.0",
+    "messageformat": "^0.2.2",
     "morgan": "^1.6.1",
     "react": "^0.13.x",
     "react-document-title": "^1.0.2",

src/actions/common-actions.js

@@ -0,0 +1,7 @@
+import Reflux from 'reflux';
+
+var CommonActions = Reflux.createActions([
+    'changeLanguage'
+]);
+
+export default CommonActions;

src/app/App.js

@@ -1,17 +1,29 @@
 import React              from 'react/addons';
+import Reflux             from 'reflux';
 import {ListenerMixin}    from 'reflux';
 import {RouteHandler}     from 'react-router';
 
+import CommonActions      from 'actions/common-actions';
+import CommonStore        from 'stores/common-store';
+
 var App = React.createClass({
 
-  render() {
-    return (
-      <div>
-        <RouteHandler params={this.props.params}
-                      query={this.props.query} />
-      </div>
-    );
-  }
+    mixins: [Reflux.listenTo(CommonStore, 'onCommonStoreChanged')],
+
+    render() {
+        return (
+          <div>
+            <RouteHandler params={this.props.params}
+                          query={this.props.query} />
+          </div>
+        );
+    },
+
+    onCommonStoreChanged(change) {
+        if (change === 'i18n') {
+            this.forceUpdate();
+        }
+    }
 
 });
 

src/app/main/main-home/main-home-page-login-widget.js

@@ -21,7 +21,7 @@ var MainHomePageLoginWidget = React.createClass({
                     </div>
                     <Button type="primary">LOG IN</Button>
                 </Form>
-                <Button type="link">{'Forgot your password?'}</Button>
+                <Button className="login-widget--forgot-password"type="link">{'Forgot your password?'}</Button>
             </Widget>
         );
     },

src/app/main/main-home/main-home-page-login-widget.scss

@@ -6,6 +6,11 @@
     margin: 10px 0;
   }
 
-  &--form {
+  &--inputs {
+    margin-bottom: 20px;
+  }
+
+  &--forgot-password {
+    margin-top: 20px;
   }
 }

src/app/main/main-layout-header.js

@@ -1,5 +1,7 @@
 import React              from 'react/addons';
 import Button             from 'core-components/button';
+import CommonActions      from 'actions/common-actions';
+import i18n               from 'utils/i18n';
 
 var MainLayoutHeader = React.createClass({
 
@@ -7,8 +9,10 @@ var MainLayoutHeader = React.createClass({
         return (
             <div className="main-layout-header">
                 <div className="main-layout-header--login-links">
-                   <Button type="clean" route={{to:'home'}}>Log in</Button>
+                   <Button type="clean" route={{to:'home'}}>{i18n('LOG_IN')}</Button>
                    <Button type="clean" route={{to:'signup'}}>Sign up</Button>
+                   <Button type="clean" onClick={function () {CommonActions.changeLanguage('es');}}>Spanish</Button>
+                   <Button type="clean" onClick={function () {CommonActions.changeLanguage('en');}}>English</Button>
                 </div>
             </div>
         );

src/app/main/main-layout.scss

@@ -4,6 +4,6 @@
 .main-layout {
   margin: 0 auto;
   background-color: $grey;
-  width: 1100px;
+  max-width: 1100px;
   border-radius: 4px;
 }

src/data/i18n-data.js

@@ -0,0 +1,15 @@
+import keys         from 'data/i18n-keys'
+
+var languages = [
+    'en',
+    'es'
+];
+
+
+var i18nData = function (key, lang) {
+    var langIndex = languages.indexOf(lang);
+
+    return keys[key][langIndex];
+};
+
+export default i18nData

src/data/i18n-keys.js

@@ -0,0 +1,4 @@
+export default {
+    'SUBMIT': ['Submit', 'Enviar'],
+    'LOG_IN': ['Log is', 'Logearse']
+};

src/stores/common-store.js

@@ -0,0 +1,19 @@
+import Reflux             from 'reflux';
+
+import CommonActions      from 'actions/common-actions';
+
+var CommonStore = Reflux.createStore({
+
+    init() {
+        this.language = 'en';
+
+        this.listenTo(CommonActions.changeLanguage, this.changeLanguage);
+    },
+
+    changeLanguage(lang) {
+        this.language = lang;
+        this.trigger('i18n');
+    }
+});
+
+export default CommonStore;

src/utils/i18n.js

@@ -0,0 +1,15 @@
+import MessageFormat                 from 'messageformat';
+
+import CommonStore        from 'stores/common-store';
+import i18nData           from 'data/i18n-data';
+
+var mf = new MessageFormat('en');
+
+var i18n = function (key, params = null) {
+    var i18nKey = i18nData(key, CommonStore.language);
+    var message = mf.compile(i18nKey);
+
+    return message(params);
+};
+
+export default i18n;