Make front-end localizable

framework/core/js/lib/Translator.js

@@ -1,3 +1,8 @@
+import User from 'flarum/models/User';
+import username from 'flarum/helpers/username';
+import extractText from 'flarum/utils/extractText';
+import extract from 'flarum/utils/extract';
+
 /**
  * The `Translator` class translates strings using the loaded localization.
  */
@@ -30,9 +35,10 @@ export default class Translator {
    *
    * @param {String} key
    * @param {Object} input
-   * @return {String}
+   * @param {VirtualElement} fallback
+   * @return {VirtualElement}
    */
-  trans(key, input = {}) {
+  trans(key, input = {}, fallback) {
     const parts = key.split('.');
     let translation = this.translations;
 
@@ -46,19 +52,33 @@ export default class Translator {
     // in the input, we'll work out which option to choose using the `plural`
     // method.
     if (typeof translation === 'object' && typeof input.count !== 'undefined') {
-      translation = translation[this.plural(input.count)];
+      translation = translation[this.plural(extractText(input.count))];
+    }
+
+    // If we've been given a user model as one of the input parameters, then
+    // we'll extract the username and use that for the translation. In the
+    // future there should be a hook here to inspect the user and change the
+    // translation key. This will allow a gender property to determine which
+    // translation key is used.
+    if (input.user instanceof User) {
+      input.username = username(extract(input, 'user'));
     }
 
     // If we've found the appropriate translation string, then we'll sub in the
     // input.
     if (typeof translation === 'string') {
-      for (const i in input) {
-        translation = translation.replace(new RegExp('{' + i + '}', 'gi'), input[i]);
-      }
+      translation = translation.split(new RegExp('({[^}]+})', 'gi'));
+
+      translation.forEach((part, i) => {
+        const match = part.match(/^{(.+)}$/i);
+        if (match) {
+          translation[i] = input[match[1]];
+        }
+      });
 
       return translation;
     }
 
-    return key;
+    return fallback || [key];
   }
 }

framework/core/js/lib/components/Dropdown.js

@@ -24,7 +24,7 @@ export default class Dropdown extends Component {
     props.buttonClassName = props.buttonClassName || '';
     props.contentClassName = props.contentClassName || '';
     props.icon = props.icon || 'ellipsis-v';
-    props.label = props.label || app.trans('controls');
+    props.label = props.label || app.trans('core.controls');
   }
 
   view() {

framework/core/js/lib/components/Modal.js

@@ -2,7 +2,6 @@ import Component from 'flarum/Component';
 import LoadingIndicator from 'flarum/components/LoadingIndicator';
 import Alert from 'flarum/components/Alert';
 import Button from 'flarum/components/Button';
-import icon from 'flarum/helpers/icon';
 
 /**
  * The `Modal` component displays a modal dialog, wrapped in a form. Subclasses

framework/core/js/lib/models/User.js

@@ -65,9 +65,11 @@ export default class User extends mixin(Model, {
     const items = new ItemList();
 
     this.groups().forEach(group => {
+      const name = group.nameSingular();
+
       items.add('group' + group.id(),
         Badge.component({
-          label: group.nameSingular(),
+          label: app.trans('core.group_' + name.toLowerCase(), undefined, name),
           icon: group.icon(),
           style: {backgroundColor: group.color()}
         })