Allow custom variables to be set on the client app

js/admin/src/app.js

@@ -8,8 +8,8 @@ const app = new App();
 
 app.initializers.add('store', store);
 app.initializers.add('routes', routes);
-app.initializers.add('preload', preload, -100);
 
+app.initializers.add('preload', preload, -100);
 app.initializers.add('boot', boot, -100);
 
 export default app;

js/admin/src/components/BasicsPage.js

@@ -2,6 +2,8 @@ import Component from 'flarum/Component';
 import FieldSet from 'flarum/components/FieldSet';
 import Select from 'flarum/components/Select';
 import Button from 'flarum/components/Button';
+import Alert from 'flarum/components/Alert';
+import saveConfig from 'flarum/utils/saveConfig';
 
 export default class BasicsPage extends Component {
   constructor(...args) {
@@ -19,11 +21,11 @@ export default class BasicsPage extends Component {
     ];
     this.values = {};
 
-    const config = app.forum.attribute('config');
+    const config = app.config;
     this.fields.forEach(key => this.values[key] = m.prop(config[key]));
 
     this.localeOptions = {};
-    const locales = app.forum.attribute('availableLocales');
+    const locales = app.locales;
     for (const i in locales) {
       this.localeOptions[i] = `${locales[i]} (${i})`;
     }
@@ -113,7 +115,7 @@ export default class BasicsPage extends Component {
   }
 
   changed() {
-    const config = app.forum.attribute('config');
+    const config = app.config;
 
     return this.fields.some(key => this.values[key]() !== config[key]);
   }
@@ -124,14 +126,19 @@ export default class BasicsPage extends Component {
     if (this.loading) return;
 
     this.loading = true;
+    app.alerts.dismiss(this.successAlert);
 
     const config = {};
 
     this.fields.forEach(key => config[key] = this.values[key]());
 
-    app.forum.save({config}).finally(() => {
+    saveConfig(config)
-      this.loading = false;
+      .then(() => {
-      m.redraw();
+        app.alerts.show(this.successAlert = new Alert({type: 'success', children: 'Your changes were saved.'}));
-    });
+      })
+      .finally(() => {
+        this.loading = false;
+        m.redraw();
+      });
   }
 }

js/admin/src/utils/saveConfig.js

@@ -0,0 +1,14 @@
+export default function saveConfig(config) {
+  const oldConfig = JSON.parse(JSON.stringify(app.config));
+
+  Object.assign(app.config, config);
+
+  return app.request({
+    method: 'POST',
+    url: app.forum.attribute('adminUrl') + '/config',
+    data: {config}
+  }).catch(error => {
+    app.config = oldConfig;
+    throw error;
+  });
+}

src/Admin/Actions/ClientAction.php

@@ -1,6 +1,8 @@
 <?php namespace Flarum\Admin\Actions;
 
 use Flarum\Support\ClientAction as BaseClientAction;
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Flarum\Core\Groups\Permission;
 
 class ClientAction extends BaseClientAction
 {
@@ -20,4 +22,18 @@ class ClientAction extends BaseClientAction
     protected $translationKeys = [
 
     ];
+
+    /**
+     * {@inheritdoc}
+     */
+    public function render(Request $request, array $routeParams = [])
+    {
+        $view = parent::render($request, $routeParams);
+
+        $view->setVariable('config', $this->settings->all());
+        $view->setVariable('locales', app('flarum.localeManager')->getLocales());
+        $view->setVariable('permissions', Permission::map());
+
+        return $view;
+    }
 }

src/Api/Serializers/ForumSerializer.php

@@ -1,7 +1,6 @@
 <?php namespace Flarum\Api\Serializers;
 
 use Flarum\Core;
-use Flarum\Core\Groups\Permission;
 
 class ForumSerializer extends Serializer
 {
@@ -33,9 +32,6 @@ class ForumSerializer extends Serializer
         ];
 
         if ($this->actor->isAdmin()) {
-            $attributes['config'] = app('Flarum\Core\Settings\SettingsRepository')->all();
-            $attributes['availableLocales'] = app('flarum.localeManager')->getLocales();
-            $attributes['permissions'] = Permission::map();
         }
 
         return $attributes;

src/Support/ClientView.php

@@ -26,13 +26,6 @@ class ClientView implements Renderable
      */
     protected $title;
 
-    /**
-     * An API response that should be preloaded into the page.
-     *
-     * @var null|array|object
-     */
-    protected $document;
-
     /**
      * The SEO content of the page, displayed in <noscript> tags.
      *
@@ -47,6 +40,20 @@ class ClientView implements Renderable
      */
     protected $layout;
 
+    /**
+     * An API response that should be preloaded into the page.
+     *
+     * @var null|array|object
+     */
+    protected $document;
+
+    /**
+     * Other variables to preload into the page.
+     *
+     * @var array
+     */
+    protected $variables = [];
+
     /**
      * An array of JS modules to import before booting the app.
      *
@@ -122,17 +129,6 @@ class ClientView implements Renderable
         $this->title = $title;
     }
 
-    /**
-     * Set an API response to be preloaded into the page. This should be a
-     * JSON-API document.
-     *
-     * @param null|array|object $document
-     */
-    public function setDocument($document)
-    {
-        $this->document = $document;
-    }
-
     /**
      * Set the SEO content of the page, to be displayed in <noscript> tags.
      *
@@ -173,6 +169,28 @@ class ClientView implements Renderable
         $this->footStrings[] = $string;
     }
 
+    /**
+     * Set an API response to be preloaded into the page. This should be a
+     * JSON-API document.
+     *
+     * @param null|array|object $document
+     */
+    public function setDocument($document)
+    {
+        $this->document = $document;
+    }
+
+    /**
+     * Set a variable to be preloaded into the app.
+     *
+     * @param string $name
+     * @param mixed $value
+     */
+    public function setVariable($name, $value)
+    {
+        $this->variables[$name] = $value;
+    }
+
     /**
      * Add a JavaScript module to be imported before the app is booted.
      *
@@ -210,10 +228,16 @@ class ClientView implements Renderable
             $data = array_merge($data, $this->getDataFromDocument($user));
         }
 
-        $view->data = $data;
+        $view->app = [
-        $view->session = $this->getSession();
+            'preload' => [
+                'data' => $data,
+                'session' => $this->getSession(),
+                'document' => $this->document
+            ]
+        ] + $this->variables;
+        $view->bootstrappers = $this->bootstrappers;
+
         $view->title = ($this->title ? $this->title . ' - ' : '') . $forum->data->attributes->title;
-        $view->document = $this->document;
         $view->forum = $forum->data;
         $view->layout = app('view')->file($this->layout, ['forum' => $forum->data]);
         $view->content = $this->content;
@@ -223,7 +247,6 @@ class ClientView implements Renderable
 
         $view->head = implode("\n", $this->headStrings);
         $view->foot = implode("\n", $this->footStrings);
-        $view->bootstrappers = $this->bootstrappers;
 
         return $view->render();
     }

views/app.blade.php

@@ -28,11 +28,8 @@
     <script>
       try {
         var app = System.get('flarum/app').default;
-        app.preload = {
+
-          data: {!! json_encode($data) !!},
+        babelHelpers._extends(app, {!! json_encode($app) !!});
-          document: {!! json_encode($document) !!},
-          session: {!! json_encode($session) !!}
-        };
 
         @foreach ($bootstrappers as $bootstrapper)
           System.get('{{ $bootstrapper }}');