Allow locale to be selected in footer

js/forum/src/components/FooterSecondary.js

@@ -1,4 +1,6 @@
 import Component from 'flarum/Component';
+import SelectDropdown from 'flarum/components/SelectDropdown';
+import Button from 'flarum/components/Button';
 import ItemList from 'flarum/utils/ItemList';
 import listItems from 'flarum/helpers/listItems';
 
@@ -24,6 +26,31 @@ export default class FooterSecondary extends Component {
   items() {
     const items = new ItemList();
 
+    if (Object.keys(app.locales).length > 1) {
+      const locales = [];
+
+      for (const locale in app.locales) {
+        locales.push(Button.component({
+          active: app.locale === locale,
+          children: app.locales[locale],
+          icon: app.locale === locale ? 'check' : true,
+          onclick: () => {
+            if (app.session.user) {
+              app.session.user.savePreferences({locale}).then(() => window.location.reload());
+            } else {
+              document.cookie = `locale=${locale}; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT`;
+              window.location.reload();
+            }
+          }
+        }));
+      }
+
+      items.add('locale', SelectDropdown.component({
+        children: locales,
+        buttonClassName: 'Button Button--text'
+      }));
+    }
+
     items.add('poweredBy', (
       <a href="http://flarum.org?r=forum" target="_blank">
         {app.trans('core.powered_by_flarum')}

js/forum/src/components/SettingsPage.js

@@ -98,13 +98,10 @@ export default class SettingsPage extends UserPage {
    */
   preferenceSaver(key) {
     return (value, component) => {
-      const preferences = this.user.preferences();
-      preferences[key] = value;
-
       if (component) component.loading = true;
       m.redraw();
 
-      this.user.save({preferences}).then(() => {
+      this.user.savePreferences({[key]: value}).then(() => {
         if (component) component.loading = false;
         m.redraw();
       });

js/lib/components/SelectDropdown.js

@@ -27,7 +27,7 @@ export default class SelectDropdown extends Dropdown {
     if (label instanceof Array) label = label[0];
 
     return [
-      <span className="Button-label">{label}</span>, ' ',
+      <span className="Button-label">{label}</span>,
       icon(this.props.caretIcon, {className: 'Button-caret'})
     ];
   }

js/lib/models/User.js

@@ -100,4 +100,18 @@ export default class User extends mixin(Model, {
     };
     image.src = this.avatarUrl();
   }
+
+  /**
+   * Update the user's preferences.
+   *
+   * @param {Object} newPreferences
+   * @return {Promise}
+   */
+  savePreferences(newPreferences) {
+    const preferences = this.preferences();
+
+    Object.assign(preferences, newPreferences);
+
+    return this.save({preferences});
+  }
 }