wip

app/Server/Configuration.php

@@ -2,7 +2,7 @@
 
 namespace App\Server;
 
-class Configuration
+class Configuration implements \JsonSerializable
 {
     /** @var string */
     protected $hostname;
@@ -36,4 +36,15 @@ class Configuration
     {
         return $this->$key ?? config('expose.admin.'.$key);
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function jsonSerialize()
+    {
+        return array_merge([
+            'hostname' => $this->hostname(),
+            'port' => $this->port(),
+        ], config('expose.admin'));
+    }
 }

app/Server/Factory.php

@@ -9,6 +9,9 @@ use App\Http\Server as HttpServer;
 use App\Server\Connections\ConnectionManager;
 use App\Server\Http\Controllers\Admin\DeleteUsersController;
 use App\Server\Http\Controllers\Admin\DisconnectSiteController;
+use App\Server\Http\Controllers\Admin\GetSettingsController;
+use App\Server\Http\Controllers\Admin\GetSitesController;
+use App\Server\Http\Controllers\Admin\GetUsersController;
 use App\Server\Http\Controllers\Admin\ListSitesController;
 use App\Server\Http\Controllers\Admin\ListUsersController;
 use App\Server\Http\Controllers\Admin\RedirectToUsersController;
@@ -117,11 +120,15 @@ class Factory
         $this->router->get('/', RedirectToUsersController::class, $adminCondition);
         $this->router->get('/users', ListUsersController::class, $adminCondition);
         $this->router->get('/settings', ShowSettingsController::class, $adminCondition);
-        $this->router->post('/settings', SaveSettingsController::class, $adminCondition);
-        $this->router->post('/users', StoreUsersController::class, $adminCondition);
-        $this->router->delete('/users/{id}', DeleteUsersController::class, $adminCondition);
         $this->router->get('/sites', ListSitesController::class, $adminCondition);
-        $this->router->delete('/sites/{id}', DisconnectSiteController::class, $adminCondition);
+
+        $this->router->get('/api/settings', GetSettingsController::class, $adminCondition);
+        $this->router->post('/api/settings', SaveSettingsController::class, $adminCondition);
+        $this->router->get('/api/users', GetUsersController::class, $adminCondition);
+        $this->router->post('/api/users', StoreUsersController::class, $adminCondition);
+        $this->router->delete('/api/users/{id}', DeleteUsersController::class, $adminCondition);
+        $this->router->get('/api/sites', GetSitesController::class, $adminCondition);
+        $this->router->delete('/api/sites/{id}', DisconnectSiteController::class, $adminCondition);
     }
 
     protected function bindConfiguration()

app/Server/Http/Controllers/Admin/GetSettingsController.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Server\Http\Controllers\Admin;
+
+use App\Contracts\ConnectionManager;
+use App\Server\Configuration;
+use Illuminate\Http\Request;
+use Ratchet\ConnectionInterface;
+use Twig\Environment;
+use Twig\Loader\ArrayLoader;
+use function GuzzleHttp\Psr7\str;
+use function GuzzleHttp\Psr7\stream_for;
+
+class GetSettingsController extends AdminController
+{
+    /** @var Configuration */
+    protected $configuration;
+
+    public function __construct(ConnectionManager $connectionManager, Configuration $configuration)
+    {
+        $this->configuration = $configuration;
+    }
+
+    public function handle(Request $request, ConnectionInterface $httpConnection)
+    {
+        $httpConnection->send(
+            respond_json([
+                'configuration' => $this->configuration,
+            ])
+        );
+    }
+}

app/Server/Http/Controllers/Admin/GetSitesController.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Server\Http\Controllers\Admin;
+
+use App\Contracts\ConnectionManager;
+use App\Http\Controllers\Controller;
+use App\Server\Configuration;
+use Illuminate\Http\Request;
+use Ratchet\ConnectionInterface;
+use Twig\Environment;
+use Twig\Loader\ArrayLoader;
+use function GuzzleHttp\Psr7\str;
+use function GuzzleHttp\Psr7\stream_for;
+
+class GetSitesController extends AdminController
+{
+    /** @var ConnectionManager */
+    protected $connectionManager;
+    /** @var Configuration */
+    protected $configuration;
+
+    public function __construct(ConnectionManager $connectionManager, Configuration $configuration)
+    {
+        $this->connectionManager = $connectionManager;
+    }
+
+    public function handle(Request $request, ConnectionInterface $httpConnection)
+    {
+        $httpConnection->send(
+            respond_json([
+                'sites' => $this->connectionManager->getConnections()
+            ])
+        );
+    }
+}

app/Server/Http/Controllers/Admin/GetUsersController.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Server\Http\Controllers\Admin;
+
+use App\Contracts\UserRepository;
+use App\Http\Controllers\Controller;
+use Clue\React\SQLite\Result;
+use GuzzleHttp\Psr7\Response;
+use Illuminate\Http\Request;
+use Ratchet\ConnectionInterface;
+use Twig\Environment;
+use Twig\Loader\ArrayLoader;
+use function GuzzleHttp\Psr7\str;
+use function GuzzleHttp\Psr7\stream_for;
+
+class GetUsersController extends AdminController
+{
+    protected $keepConnectionOpen = true;
+
+    /** @var UserRepository */
+    protected $userRepository;
+
+    public function __construct(UserRepository $userRepository)
+    {
+        $this->userRepository = $userRepository;
+    }
+
+    public function handle(Request $request, ConnectionInterface $httpConnection)
+    {
+        $this->userRepository
+            ->getUsers()
+            ->then(function ($users) use ($httpConnection) {
+                $httpConnection->send(
+                    respond_json(['users' => $users])
+                );
+
+                $httpConnection->close();
+            });
+    }
+}

app/Server/Http/Controllers/Admin/SaveSettingsController.php

@@ -8,6 +8,7 @@ use App\Server\Configuration;
 use Clue\React\SQLite\Result;
 use GuzzleHttp\Psr7\Response;
 use Illuminate\Http\Request;
+use Illuminate\Support\Arr;
 use Ratchet\ConnectionInterface;
 use Twig\Environment;
 use Twig\Loader\ArrayLoader;
@@ -16,15 +17,11 @@ use function GuzzleHttp\Psr7\stream_for;
 
 class SaveSettingsController extends AdminController
 {
-    /** @var ConnectionManager */
-    protected $connectionManager;
-
     /** @var Configuration */
     protected $configuration;
 
-    public function __construct(ConnectionManager $connectionManager, Configuration $configuration)
+    public function __construct(Configuration $configuration)
     {
-        $this->connectionManager = $connectionManager;
         $this->configuration = $configuration;
     }
 
@@ -32,14 +29,18 @@ class SaveSettingsController extends AdminController
     {
         config()->set('expose.admin.validate_auth_tokens', $request->has('validate_auth_tokens'));
 
-        config()->set('expose.admin.messages.invalid_auth_token', $request->get('invalid_auth_token'));
+        $messages = $request->get('messages');
 
-        config()->set('expose.admin.messages.subdomain_taken', $request->get('subdomain_taken'));
+        config()->set('expose.admin.messages.invalid_auth_token', Arr::get($messages, 'invalid_auth_token'));
 
-        config()->set('expose.admin.messages.message_of_the_day', $request->get('motd'));
+        config()->set('expose.admin.messages.subdomain_taken', Arr::get($messages, 'subdomain_taken'));
 
-        $httpConnection->send(str(new Response(301, [
+        config()->set('expose.admin.messages.message_of_the_day', Arr::get($messages, 'message_of_the_day'));
-            'Location' => '/settings'
+
-        ])));
+        $httpConnection->send(
+            respond_json([
+                'configuration' => $this->configuration,
+            ])
+        );
     }
 }

resources/views/server/settings/index.twig

@@ -25,7 +25,7 @@
                                                                type="checkbox"
                                                                name="validate_auth_tokens"
                                                                value="1"
-                                                            {% if configuration.validate_auth_tokens %} checked="checked" {% endif %}
+                                                               v-model="configuration.validate_auth_tokens"
                                                                class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"/>
                                                     </div>
                                                     <div class="pl-7 text-sm leading-5">
@@ -48,7 +48,8 @@
                                         <div class="mt-1 sm:mt-0 sm:col-span-2">
                                             <div class="max-w-lg flex rounded-md shadow-sm">
                                                 <textarea id="motd" name="motd" rows="3"
-                                                          class="form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5">{{ attribute(configuration, 'messages.message_of_the_day') }}</textarea>
+                                                          v-model="configuration.messages.message_of_the_day"
+                                                          class="form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"></textarea>
                                             </div>
                                             <p class="mt-2 text-sm text-gray-500">This message will be shown, when a
                                                 successful connection can be established.</p>
@@ -66,7 +67,8 @@
                                                 <textarea id="invalid_auth_token"
                                                           name="invalid_auth_token"
                                                           rows="3"
-                                                          class="form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5">{{ attribute(configuration, 'messages.invalid_auth_token') }}</textarea>
+                                                          v-model="configuration.messages.invalid_auth_token"
+                                                          class="form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"></textarea>
                                             </div>
                                             <p class="mt-2 text-sm text-gray-500">This message will be shown, when a
                                                 user tries to connect with an invalid authentication token.</p>
@@ -82,7 +84,8 @@
                                         <div class="mt-1 sm:mt-0 sm:col-span-2">
                                             <div class="max-w-lg flex rounded-md shadow-sm">
                                                 <textarea id="subdomain_taken" name="subdomain_taken" rows="3"
-                                                          class="form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5">{{ attribute(configuration, 'messages.subdomain_taken') }}</textarea>
+                                                          v-model="configuration.messages.subdomain_taken"
+                                                          class="form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"></textarea>
                                             </div>
                                             <p class="mt-2 text-sm text-gray-500">This message will be shown, when a
                                                 user tries to connect with an already registered subdomain. You can use
@@ -97,14 +100,9 @@
                 </div>
                 <div class="mt-8 border-t border-gray-200 pt-5">
                     <div class="flex justify-end">
-      <span class="inline-flex rounded-md shadow-sm">
-        <button type="button"
-                class="py-2 px-4 border border-gray-300 rounded-md text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
-          Cancel
-        </button>
-      </span>
                         <span class="ml-3 inline-flex rounded-md shadow-sm">
         <button type="submit"
+                @click.prevent="saveSettings"
                 class="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
           Save
         </button>
@@ -115,3 +113,32 @@
         </div>
     </div>
 {% endblock %}
+{% block scripts %}
+    <script>
+        new Vue({
+            el: '#app',
+
+            delimiters: ['@{', '}'],
+
+            data: {
+                configuration: {{ configuration|json_encode|raw }}
+            },
+
+            methods: {
+                saveSettings() {
+                    fetch('/api/settings', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(this.configuration)
+                    }).then((response) => {
+                        return response.json();
+                    }).then((data) => {
+                        this.configuration = data.configuration;
+                    });
+                }
+            }
+        })
+    </script>
+{% endblock %}

resources/views/server/sites/index.twig

@@ -58,7 +58,7 @@
 
             methods: {
                 disconnectSite(id) {
-                    fetch('/sites/' + id, {
+                    fetch('/api/sites/' + id, {
                         method: 'DELETE',
                     }).then((response) => {
                         return response.json();

resources/views/server/users/index.twig

@@ -97,7 +97,7 @@
 
                 methods: {
                     deleteUser(user) {
-                        fetch('/users/' + user.id, {
+                        fetch('/api/users/' + user.id, {
                             method: 'DELETE',
                         }).then((response) => {
                             return response.json();
@@ -106,7 +106,7 @@
                         });
                     },
                     saveUser() {
-                        fetch('/users', {
+                        fetch('/api/users', {
                             method: 'POST',
                             headers: {
                                 'Content-Type': 'application/json'