wip

app/Client/Client.php

@@ -61,6 +61,11 @@ class Client
                     exit(1);
                 });
 
+                $connection->on('subdomainTaken', function ($data) {
+                    $this->logger->error("The chosen subdomain \"{$data->data->subdomain}\" is already taken. Please choose a different subdomain.");
+                    exit(1);
+                });
+
                 $connection->on('authenticated', function ($data) {
                     $this->logger->info("Connected to http://$data->subdomain.{$this->configuration->host()}:{$this->configuration->port()}");
 

app/Client/Connections/ControlConnection.php

@@ -35,6 +35,7 @@ class ControlConnection
             $decodedEntry = json_decode($message);
 
             $this->emit($decodedEntry->event ?? '', [$decodedEntry]);
+
             if (method_exists($this, $decodedEntry->event ?? '')) {
                 call_user_func([$this, $decodedEntry->event], $decodedEntry);
             }

app/HttpServer/Controllers/Controller.php

@@ -26,12 +26,13 @@ abstract class Controller implements HttpServerInterface
     {
     }
 
-    protected function getView(string $view, array $data)
+    protected function getView(string $view, array $data = [])
     {
         $templatePath = implode(DIRECTORY_SEPARATOR, explode('.', $view));
 
         $twig = new Environment(
             new ArrayLoader([
+                'app' => file_get_contents(base_path('resources/views/server/layouts/app.twig')),
                 'template' => file_get_contents(base_path('resources/views/'.$templatePath.'.twig')),
             ])
         );

app/Providers/AppServiceProvider.php

@@ -31,10 +31,13 @@ class AppServiceProvider extends ServiceProvider
 
     protected function loadConfigurationFile()
     {
+        $builtInConfig = config('expose');
+
         $localConfigFile = getcwd() . DIRECTORY_SEPARATOR . '.expose.php';
 
         if (file_exists($localConfigFile)) {
-            config()->set('expose', require_once $localConfigFile);
+            $localConfig = require_once $localConfigFile;
+            config()->set('expose', array_merge($builtInConfig, $localConfig));
             return;
         }
 
@@ -46,7 +49,8 @@ class AppServiceProvider extends ServiceProvider
         ]);
 
         if (file_exists($configFile)) {
-            config()->set('expose', require_once $configFile);
+            $globalConfig = require_once $configFile;
+            config()->set('expose', array_merge($builtInConfig, $globalConfig));
         }
     }
 }

app/Server/Factory.php

@@ -9,12 +9,15 @@ use App\Server\Connections\ConnectionManager;
 use App\Server\Http\Controllers\Admin\DeleteUsersController;
 use App\Server\Http\Controllers\Admin\ListSitesController;
 use App\Server\Http\Controllers\Admin\ListUsersController;
+use App\Server\Http\Controllers\Admin\LoginController;
 use App\Server\Http\Controllers\Admin\StoreUsersController;
+use App\Server\Http\Controllers\Admin\VerifyLoginController;
 use App\Server\Http\Controllers\ControlMessageController;
 use App\Server\Http\Controllers\TunnelMessageController;
+use App\Server\Http\RouteGenerator;
+use App\Server\Http\Router;
 use App\Server\SubdomainGenerator\RandomSubdomainGenerator;
 use Clue\React\SQLite\DatabaseInterface;
-use Ratchet\Http\Router;
 use Ratchet\Server\IoServer;
 use Ratchet\WebSocket\WsServer;
 use React\Socket\Server;
@@ -22,6 +25,7 @@ use React\EventLoop\LoopInterface;
 use React\EventLoop\Factory as LoopFactory;
 use Symfony\Component\Finder\Finder;
 use Symfony\Component\Finder\SplFileInfo;
+use Symfony\Component\HttpFoundation\Session\Storage\Handler\NativeFileSessionHandler;
 use Symfony\Component\Routing\Matcher\UrlMatcher;
 use Symfony\Component\Routing\RequestContext;
 use Symfony\Component\Routing\Route;
@@ -41,13 +45,13 @@ class Factory
     /** @var \React\EventLoop\LoopInterface */
     protected $loop;
 
-    /** @var RouteCollection */
-    protected $routes;
+    /** @var RouteGenerator */
+    protected $router;
 
     public function __construct()
     {
         $this->loop = LoopFactory::create();
-        $this->routes = new RouteCollection();
+        $this->router = new RouteGenerator();
     }
 
     public function setHost(string $host)
@@ -80,17 +84,9 @@ class Factory
 
     protected function addExposeRoutes()
     {
-        $wsServer = new WsServer(app(ControlMessageController::class));
-        $wsServer->enableKeepAlive($this->loop);
+        $this->router->get('/__expose_control__', ControlMessageController::class);
 
-        $this->routes->add('control',
-            new Route('/__expose_control__', [
-                '_controller' => $wsServer
-            ], [], [], null, [], []
-            )
-        );
-
-        $this->routes->add('tunnel',
+        $this->router->addSymfonyRoute('tunnel',
             new Route('/{__catchall__}', [
                 '_controller' => app(TunnelMessageController::class),
             ], [
@@ -100,29 +96,14 @@ class Factory
 
     protected function addAdminRoutes()
     {
-        $this->routes->add('admin.users.index',
-            new Route('/expose/users', [
-                '_controller' => app(ListUsersController::class),
-            ], [], [], null, [], ['GET'])
-        );
+        $adminCondition = 'request.headers.get("Host") matches "/'.config('expose.dashboard_subdomain').'./i"';
 
-        $this->routes->add('admin.users.store',
-            new Route('/expose/users', [
-                '_controller' => app(StoreUsersController::class),
-            ], [], [], null, [], ['POST'])
-        );
-
-        $this->routes->add('admin.users.delete',
-            new Route('/expose/users/delete/{id}', [
-                '_controller' => app(DeleteUsersController::class),
-            ], [], [], null, [], ['DELETE'])
-        );
-
-        $this->routes->add('admin.sites.index',
-            new Route('/expose/sites', [
-                '_controller' => app(ListSitesController::class),
-            ], [], [], null, [], ['GET'])
-        );
+        $this->router->get('/', LoginController::class, $adminCondition);
+        $this->router->post('/', VerifyLoginController::class, $adminCondition);
+        $this->router->get('/users', ListUsersController::class, $adminCondition);
+        $this->router->post('/users', StoreUsersController::class, $adminCondition);
+        $this->router->delete('/users/delete/{id}', DeleteUsersController::class, $adminCondition);
+        $this->router->get('/sites', ListSitesController::class, $adminCondition);
     }
 
     protected function bindConfiguration()
@@ -164,7 +145,7 @@ class Factory
 
         $this->addExposeRoutes();
 
-        $urlMatcher = new UrlMatcher($this->routes, new RequestContext);
+        $urlMatcher = new UrlMatcher($this->router->getRoutes(), new RequestContext);
 
         $router = new Router($urlMatcher);
 

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

@@ -26,8 +26,14 @@ class ListSitesController extends PostController
 
     public function handle(Request $request, ConnectionInterface $httpConnection)
     {
+        try {
+            $sites = $this->getView('server.sites.index', ['sites' => $this->connectionManager->getConnections()]);
+        } catch (\Exception $e) {
+            dump($e->getMessage());
+        }
+
         $httpConnection->send(
-            respond_html($this->getView('server.sites.index', ['sites' => $this->connectionManager->getConnections()]))
+            respond_html($sites)
         );
     }
 }

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

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Server\Http\Controllers\Admin;
+
+use App\Contracts\ConnectionManager;
+use App\HttpServer\Controllers\PostController;
+use Clue\React\SQLite\DatabaseInterface;
+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 LoginController extends PostController
+{
+    public function handle(Request $request, ConnectionInterface $httpConnection)
+    {
+        $httpConnection->send(
+            respond_html($this->getView('server.login'))
+        );
+    }
+}

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

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Server\Http\Controllers\Admin;
+
+use App\Contracts\ConnectionManager;
+use App\HttpServer\Controllers\PostController;
+use Clue\React\SQLite\DatabaseInterface;
+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 VerifyLoginController extends PostController
+{
+    protected $keepConnectionOpen = true;
+
+    /** @var DatabaseInterface */
+    protected $database;
+
+    public function __construct(DatabaseInterface $database)
+    {
+        $this->database = $database;
+    }
+
+    public function handle(Request $request, ConnectionInterface $httpConnection)
+    {
+        $this->database->query("SELECT * FROM users WHERE email = :email", ['email' => $request->email])
+            ->then(function (Result $result) use ($httpConnection) {
+                if (!is_null($result->rows)) {
+                    $httpConnection->send(
+                        str(new Response(
+                            301,
+                            ['Location' => '/users']
+                        ))
+                    );
+                } else {
+                    $httpConnection->send(
+                        str(new Response(
+                            301,
+                            ['Location' => '/users']
+                        ))
+                    );
+                }
+                $httpConnection->close();
+            });
+    }
+}

app/Server/Http/Controllers/ControlMessageController.php

@@ -78,6 +78,10 @@ class ControlMessageController implements MessageComponentInterface
             $this->verifyAuthToken($connection);
         }
 
+        if (! $this->hasValidSubdomain($connection, $data->subdomain)) {
+            return;
+        }
+
         $connectionInfo = $this->connectionManager->storeConnection($data->host, $data->subdomain, $connection);
 
         $connection->send(json_encode([
@@ -122,4 +126,24 @@ class ControlMessageController implements MessageComponentInterface
                 }
         });
     }
+
+    protected function hasValidSubdomain(ConnectionInterface $connection, ?string $subdomain): bool
+    {
+        if (! is_null($subdomain)) {
+            $controlConnection = $this->connectionManager->findControlConnectionForSubdomain($subdomain);
+            if (! is_null($controlConnection) || $subdomain === config('expose.dashboard_subdomain')) {
+                $connection->send(json_encode([
+                    'event' => 'subdomainTaken',
+                    'data' => [
+                        'subdomain' => $subdomain,
+                    ]
+                ]));
+                $connection->close();
+
+                return false;
+            }
+        }
+
+        return true;
+    }
 }

app/Server/Http/Controllers/TunnelMessageController.php

@@ -82,6 +82,7 @@ class TunnelMessageController extends PostController
     protected function prepareRequest(Request $request, ControlConnection $controlConnection): Request
     {
         $request->headers->set('Host', $controlConnection->host);
+        $request->headers->set('X-Forwarded-Proto', $request->isSecure() ? 'https' : 'http');
         $request->headers->set('X-Expose-Request-ID', uniqid());
         $request->headers->set('X-Exposed-By', config('app.name') . ' '. config('app.version'));
         $request->headers->set('X-Original-Host', "{$controlConnection->subdomain}.{$this->configuration->hostname()}:{$this->configuration->port()}");

app/Server/Http/RouteGenerator.php

@@ -0,0 +1,78 @@
+<?php
+
+namespace App\Server\Http;
+
+use Ratchet\MessageComponentInterface;
+use Ratchet\WebSocket\WsServer;
+use React\EventLoop\LoopInterface;
+use Symfony\Component\Routing\Route;
+use Symfony\Component\Routing\RouteCollection;
+
+class RouteGenerator
+{
+    /** @var \Symfony\Component\Routing\RouteCollection */
+    protected $routes;
+
+    public function __construct()
+    {
+        $this->routes = new RouteCollection;
+    }
+
+    public function getRoutes(): RouteCollection
+    {
+        return $this->routes;
+    }
+
+    public function get(string $uri, $action, string $condition = '')
+    {
+        $this->addRoute('GET', $uri, $action, $condition);
+    }
+
+    public function post(string $uri, $action, string $condition = '')
+    {
+        $this->addRoute('POST', $uri, $action, $condition);
+    }
+
+    public function put(string $uri, $action, string $condition = '')
+    {
+        $this->addRoute('PUT', $uri, $action, $condition);
+    }
+
+    public function patch(string $uri, $action, string $condition = '')
+    {
+        $this->addRoute('PATCH', $uri, $action, $condition);
+    }
+
+    public function delete(string $uri, $action, string $condition = '')
+    {
+        $this->addRoute('DELETE', $uri, $action, $condition);
+    }
+
+    public function addRoute(string $method, string $uri, $action, string $condition = '')
+    {
+        $this->routes->add("{$method}-($uri}", $this->getRoute($method, $uri, $action, $condition));
+    }
+
+    public function addSymfonyRoute(string $name, Route $route)
+    {
+        $this->routes->add($name, $route);
+    }
+
+    protected function getRoute(string $method, string $uri, $action, string $condition = ''): Route
+    {
+        $action = is_subclass_of($action, MessageComponentInterface::class)
+            ? $this->createWebSocketsServer($action)
+            : app($action);
+
+        return new Route($uri, ['_controller' => $action], [], [], null, [], [$method], $condition);
+    }
+
+    protected function createWebSocketsServer(string $action): WsServer
+    {
+        $wServer = new WsServer(app($action));
+
+        $wServer->enableKeepAlive(app(LoopInterface::class));
+
+        return $wServer;
+    }
+}

app/Server/Http/Router.php

@@ -0,0 +1,126 @@
+<?php
+
+namespace App\Server\Http;
+
+use App\HttpServer\QueryParameters;
+use GuzzleHttp\Psr7\ServerRequest;
+use Psr\Http\Message\RequestInterface;
+use Ratchet\ConnectionInterface;
+use Ratchet\Http\CloseResponseTrait;
+use Ratchet\Http\HttpServerInterface;
+use Ratchet\Http\NoOpHttpServerController;
+use Symfony\Bridge\PsrHttpMessage\Factory\HttpFoundationFactory;
+use Symfony\Component\Routing\Exception\MethodNotAllowedException;
+use Symfony\Component\Routing\Exception\ResourceNotFoundException;
+use Symfony\Component\Routing\Matcher\UrlMatcher;
+use function GuzzleHttp\Psr7\build_query;
+use function GuzzleHttp\Psr7\parse_query;
+
+class Router implements HttpServerInterface
+{
+    use CloseResponseTrait;
+
+    /**
+     * @var UrlMatcher
+     */
+    protected $_matcher;
+
+    private $_noopController;
+
+    public function __construct(UrlMatcher $matcher)
+    {
+        $this->_matcher = $matcher;
+        $this->_noopController = new NoOpHttpServerController;
+    }
+
+    /**
+     * {@inheritdoc}
+     * @throws \UnexpectedValueException If a controller is not \Ratchet\Http\HttpServerInterface
+     */
+    public function onOpen(ConnectionInterface $conn, RequestInterface $request = null)
+    {
+        if (null === $request) {
+            throw new \UnexpectedValueException('$request can not be null');
+        }
+
+        $conn->controller = $this->_noopController;
+
+        $uri = $request->getUri();
+
+        $context = $this->_matcher->getContext();
+        $context->setMethod($request->getMethod());
+        $context->setHost($uri->getHost());
+
+        $symfonyRequest = $this->createSymfonyRequest($request);
+
+        try {
+            $route = $this->_matcher->matchRequest($symfonyRequest);
+        } catch (MethodNotAllowedException $nae) {
+            return $this->close($conn, 405, array('Allow' => $nae->getAllowedMethods()));
+        } catch (ResourceNotFoundException $nfe) {
+            return $this->close($conn, 404);
+        }
+
+        if (is_string($route['_controller']) && class_exists($route['_controller'])) {
+            $route['_controller'] = new $route['_controller'];
+        }
+
+        if (!($route['_controller'] instanceof HttpServerInterface)) {
+            throw new \UnexpectedValueException('All routes must implement Ratchet\Http\HttpServerInterface');
+        }
+
+        $parameters = [];
+        foreach ($route as $key => $value) {
+            if ((is_string($key)) && ('_' !== substr($key, 0, 1))) {
+                $parameters[$key] = $value;
+            }
+        }
+        $parameters = array_merge($parameters, parse_query($uri->getQuery() ?: ''));
+
+        $request = $request->withUri($uri->withQuery(build_query($parameters)));
+
+        $conn->controller = $route['_controller'];
+        $conn->controller->onOpen($conn, $request);
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function onMessage(ConnectionInterface $from, $msg)
+    {
+        $from->controller->onMessage($from, $msg);
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function onClose(ConnectionInterface $conn)
+    {
+        if (isset($conn->controller)) {
+            $conn->controller->onClose($conn);
+        }
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function onError(ConnectionInterface $conn, \Exception $e)
+    {
+        if (isset($conn->controller)) {
+            $conn->controller->onError($conn, $e);
+        }
+    }
+
+    protected function createSymfonyRequest(RequestInterface $request)
+    {
+        $serverRequest = (new ServerRequest(
+            $request->getMethod(),
+            $request->getUri(),
+            $request->getHeaders(),
+            $request->getBody(),
+            $request->getProtocolVersion()
+        ))->withQueryParams(QueryParameters::create($request)->all());
+
+        return (new HttpFoundationFactory())->createRequest($serverRequest);
+    }
+}

composer.json

@@ -20,8 +20,6 @@
         "ext-json": "*"
     },
     "require-dev": {
-        "mockery/mockery": "^1.3.1",
-        "phpunit/phpunit": "^8.5",
         "bfunky/http-parser": "^2.2",
         "cboden/ratchet": "^0.4.2",
         "clue/buzz-react": "^2.7",
@@ -33,11 +31,14 @@
         "illuminate/validation": "^7.7",
         "laminas/laminas-http": "^2.11",
         "laravel-zero/framework": "^7.0",
+        "mockery/mockery": "^1.3.1",
         "namshi/cuzzle": "^2.0",
         "nyholm/psr7": "^1.2",
+        "phpunit/phpunit": "^8.5",
         "ratchet/pawl": "^0.3.4",
         "react/socket": "^1.4",
         "riverline/multipart-parser": "^2.0",
+        "seregazhuk/react-promise-testing": "^0.4.0",
         "symfony/expression-language": "^5.0",
         "symfony/http-kernel": "^4.0|^5.0",
         "symfony/psr-http-message-bridge": "^2.0",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "2696eac6d05332230aa69e21a6aee524",
+    "content-hash": "3199f5982eed399c719f72239be99a83",
     "packages": [],
     "packages-dev": [
         {
@@ -108,6 +108,59 @@
             ],
             "time": "2020-01-27T23:08:40+00:00"
         },
+        {
+            "name": "clue/block-react",
+            "version": "v1.3.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/clue/reactphp-block.git",
+                "reference": "2f516b28259c203d67c4c963772dd7e9db652737"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/clue/reactphp-block/zipball/2f516b28259c203d67c4c963772dd7e9db652737",
+                "reference": "2f516b28259c203d67c4c963772dd7e9db652737",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3",
+                "react/event-loop": "^1.0 || ^0.5 || ^0.4 || ^0.3.5",
+                "react/promise": "^2.7 || ^1.2.1",
+                "react/promise-timer": "^1.5"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^6.4 || ^5.7 || ^4.8.35"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "src/functions_include.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Christian Lück",
+                    "email": "christian@lueck.tv"
+                }
+            ],
+            "description": "Lightweight library that eases integrating async components built for ReactPHP in a traditional, blocking environment.",
+            "homepage": "https://github.com/clue/reactphp-block",
+            "keywords": [
+                "async",
+                "await",
+                "blocking",
+                "event loop",
+                "promise",
+                "reactphp",
+                "sleep",
+                "synchronous"
+            ],
+            "time": "2019-04-09T11:45:04+00:00"
+        },
         {
             "name": "clue/buzz-react",
             "version": "v2.7.0",
@@ -5438,6 +5491,55 @@
             "homepage": "https://github.com/sebastianbergmann/version",
             "time": "2016-10-03T07:35:21+00:00"
         },
+        {
+            "name": "seregazhuk/react-promise-testing",
+            "version": "0.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/seregazhuk/php-react-promise-testing.git",
+                "reference": "a56481a6feae2cb51f91d554af41a66802a01a37"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/seregazhuk/php-react-promise-testing/zipball/a56481a6feae2cb51f91d554af41a66802a01a37",
+                "reference": "a56481a6feae2cb51f91d554af41a66802a01a37",
+                "shasum": ""
+            },
+            "require": {
+                "clue/block-react": "^1.3",
+                "php": ">=7.2",
+                "phpunit/phpunit": "^8.2",
+                "react/promise": "^2.7"
+            },
+            "require-dev": {
+                "codeclimate/php-test-reporter": "^0.4.4"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "seregazhuk\\React\\PromiseTesting\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Sergey Zhuk",
+                    "email": "seregazhuk88@gmail.com"
+                }
+            ],
+            "description": "PHPUnit-based library for testing ReactPHP promises",
+            "homepage": "https://github.com/seregazhuk/php-react-promise-testing",
+            "keywords": [
+                "promise",
+                "reactphp",
+                "test",
+                "testing"
+            ],
+            "time": "2020-03-09T12:02:56+00:00"
+        },
         {
             "name": "symfony/cache",
             "version": "v5.0.7",

database/migrations/01_create_users_table.sql

@@ -1,6 +1,7 @@
 CREATE TABLE IF NOT EXISTS users (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
     name STRING NOT NULL,
+    email STRING,
     auth_token STRING,
     created_at DATETIME,
     updated_at DATETIME

resources/views/server/layouts/app.twig

@@ -0,0 +1,67 @@
+<html>
+<head>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css">
+</head>
+<body>
+<div class="min-h-screen bg-white" id="app">
+    <nav class="bg-white border-b border-gray-200">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex">
+                    <div class="flex-shrink-0 flex items-center font-bold">
+                        Expose
+                    </div>
+                    <div class="hidden sm:-my-px sm:ml-6 sm:flex">
+                        <a href="/users"
+                           class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
+                            Users
+                        </a>
+                        <a href="/sites"
+                           class="ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out">
+                            Shared sites
+                        </a>
+                        <a href="#"
+                           class="ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
+                            Settings
+                        </a>
+                    </div>
+                </div>
+                <div class="-mr-2 flex items-center sm:hidden">
+                    <!-- Mobile menu button -->
+                    <button
+                        class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
+                        <!-- Menu open: "hidden", Menu closed: "block" -->
+                        <svg class="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M4 6h16M4 12h16M4 18h16"/>
+                        </svg>
+                        <!-- Menu open: "block", Menu closed: "hidden" -->
+                        <svg class="hidden h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M6 18L18 6M6 6l12 12"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <div class="py-10">
+        <header>
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <h1 class="text-3xl font-bold leading-tight text-gray-900">
+                    {% block title %}{% endblock %}
+                </h1>
+            </div>
+        </header>
+        <main>
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                {% block content %}{% endblock %}
+            </div>
+        </main>
+    </div>
+</div>
+{% block scripts %}{% endblock %}
+</body>
+</html>

resources/views/server/login.twig

@@ -0,0 +1,47 @@
+<html>
+<head>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css">
+</head>
+<body>
+<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <div class="max-w-md w-full">
+        <div>
+            <h2 class="mt-6 text-center text-3xl leading-9 font-extrabold text-gray-900">
+                Expose
+            </h2>
+        </div>
+        <form class="mt-8" action="" method="POST">
+            <input type="hidden" name="remember" value="true" />
+            <div class="rounded-md shadow-sm">
+                <div>
+                    <input aria-label="Email address" name="email" type="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5" placeholder="Email address" />
+                </div>
+                <div class="-mt-px">
+                    <input aria-label="Password" name="password" type="password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5" placeholder="Password" />
+                </div>
+            </div>
+
+            <div class="mt-6 flex items-center justify-between">
+                <div class="flex items-center">
+                    <input id="remember_me" type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out" />
+                    <label for="remember_me" class="ml-2 block text-sm leading-5 text-gray-900">
+                        Remember me
+                    </label>
+                </div>
+            </div>
+
+            <div class="mt-6">
+                <button type="submit" class="group relative w-full 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">
+          <span class="absolute left-0 inset-y-0 flex items-center pl-3">
+            <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400 transition ease-in-out duration-150" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
+            </svg>
+          </span>
+                    Sign in
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+</body>

resources/views/server/sites/index.twig

@@ -1,194 +1,94 @@
-<html>
-<head>
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css">
-</head>
-<body>
-<div class="min-h-screen bg-white" id="app">
-    <nav class="bg-white border-b border-gray-200">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between h-16">
-                <div class="flex">
-                    <div class="flex-shrink-0 flex items-center font-bold">
-                        Expose
-                    </div>
-                    <div class="hidden sm:-my-px sm:ml-6 sm:flex">
-                        <a href="/expose/users"
-                           class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
-                            Users
-                        </a>
-                        <a href="#"
-                           class="ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out">
-                            Shared sites
-                        </a>
-                        <a href="#"
-                           class="ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
-                            Settings
-                        </a>
-                    </div>
-                </div>
-                <div class="-mr-2 flex items-center sm:hidden">
-                    <!-- Mobile menu button -->
-                    <button
-                        class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
-                        <!-- Menu open: "hidden", Menu closed: "block" -->
-                        <svg class="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="M4 6h16M4 12h16M4 18h16"/>
-                        </svg>
-                        <!-- Menu open: "block", Menu closed: "hidden" -->
-                        <svg class="hidden h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="M6 18L18 6M6 6l12 12"/>
-                        </svg>
-                    </button>
-                </div>
+{% extends "app" %}
+{% block title %}Sites{% endblock %}
+{% block content %}
+    <div class="flex flex-col py-8">
+        <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
+            <div
+                class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
+                <table class="min-w-full">
+                    <thead>
+                    <tr>
+                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                            Host
+                        </th>
+                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                            Subdomain
+                        </th>
+                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                            Shared At
+                        </th>
+                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
+                    </tr>
+                    </thead>
+                    <tbody class="bg-white">
+                    {% for site in sites %}
+                        <tr>
+                            <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium text-gray-900">
+                                {{ site.host }}
+                            </td>
+                            <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
+                                {{ site.subdomain }}.localhost:8080
+                            </td>
+                            <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
+                                {{ site.shared_at }}
+                            </td>
+                            <td class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-200 text-sm leading-5 font-medium">
+                                <a href="http://{{ site.subdomain }}.localhost:8080" target="_blank"
+                                   class="text-indigo-600 hover:text-indigo-900">Visit</a>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                    </tbody>
+                </table>
             </div>
         </div>
-
-        <!--
-          Mobile menu, toggle classes based on menu state.
-
-          Open: "block", closed: "hidden"
-        -->
-        <div class="hidden sm:hidden">
-            <div class="pt-2 pb-3">
-                <a href="#"
-                   class="block pl-3 pr-4 py-2 border-l-4 border-indigo-500 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out">Dashboard</a>
-                <a href="#"
-                   class="mt-1 block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out">Team</a>
-                <a href="#"
-                   class="mt-1 block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out">Projects</a>
-                <a href="#"
-                   class="mt-1 block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out">Calendar</a>
-            </div>
-            <div class="pt-4 pb-3 border-t border-gray-200">
-                <div class="flex items-center px-4">
-                    <div class="flex-shrink-0">
-                        <img class="h-10 w-10 rounded-full"
-                             src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                             alt=""/>
-                    </div>
-                    <div class="ml-3">
-                        <div class="text-base font-medium leading-6 text-gray-800">Tom Cook</div>
-                        <div class="text-sm font-medium leading-5 text-gray-500">tom@example.com</div>
-                    </div>
-                </div>
-                <div class="mt-3" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
-                    <a href="#"
-                       class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100 focus:outline-none focus:text-gray-800 focus:bg-gray-100 transition duration-150 ease-in-out"
-                       role="menuitem">Your Profile</a>
-                    <a href="#"
-                       class="mt-1 block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100 focus:outline-none focus:text-gray-800 focus:bg-gray-100 transition duration-150 ease-in-out"
-                       role="menuitem">Settings</a>
-                    <a href="#"
-                       class="mt-1 block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100 focus:outline-none focus:text-gray-800 focus:bg-gray-100 transition duration-150 ease-in-out"
-                       role="menuitem">Sign out</a>
-                </div>
-            </div>
-        </div>
-    </nav>
-
-    <div class="py-10">
-        <header>
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <h1 class="text-3xl font-bold leading-tight text-gray-900">
-                    Sites
-                </h1>
-            </div>
-        </header>
-        <main>
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div class="flex flex-col py-8">
-                    <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
-                        <div
-                            class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
-                            <table class="min-w-full">
-                                <thead>
-                                <tr>
-                                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-                                        Host
-                                    </th>
-                                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-                                        Subdomain
-                                    </th>
-                                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-                                        Shared At
-                                    </th>
-                                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
-                                </tr>
-                                </thead>
-                                <tbody class="bg-white">
-                                {% for site in sites %}
-                                    <tr>
-                                        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium text-gray-900">
-                                            {{ site.host }}
-                                        </td>
-                                        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
-                                            {{ site.subdomain }}.localhost:8080
-                                        </td>
-                                        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
-                                            {{ site.shared_at }}
-                                        </td>
-                                        <td class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-200 text-sm leading-5 font-medium">
-                                            <a href="http://{{ site.subdomain }}.localhost:8080" target="_blank" class="text-indigo-600 hover:text-indigo-900">Visit</a>
-                                        </td>
-                                    </tr>
-                                {%  endfor %}
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </main>
     </div>
-</div>
-<script>
-    new Vue({
-        el: '#app',
+{% endblock %}
+{% block scripts %}
+    <script>
+        new Vue({
+            el: '#app',
 
-        delimiters: ['@{', '}'],
+            delimiters: ['@{', '}'],
 
-        data: {
-            userForm: {
-                name: '',
-                errors: {},
+            data: {
+                userForm: {
+                    name: '',
+                    errors: {},
+                },
+                users: {{ users|json_encode|raw }}
             },
-            users: {{ users|json_encode|raw }}
-        },
 
-        methods: {
-            deleteUser(user) {
-                fetch('/expose/users/delete/'+user.id, {
-                    method: 'DELETE',
-                }).then((response) => {
-                    return response.json();
-                }).then((data) => {
-                    this.users = this.users.filter(u => u.id !== user.id);
-                });
-            },
-            saveUser() {
-                fetch('/expose/users', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify(this.userForm)
-                }).then((response) => {
-                    return response.json();
-                }).then((data) => {
-                    if (data.user) {
-                        this.userForm.errors = {};
-                        this.users.unshift(data.user);
-                    }
-                    if (data.errors) {
-                        this.userForm.errors = data.errors;
-                    }
-                });
+            methods: {
+                deleteUser(user) {
+                    fetch('/expose/users/delete/' + user.id, {
+                        method: 'DELETE',
+                    }).then((response) => {
+                        return response.json();
+                    }).then((data) => {
+                        this.users = this.users.filter(u => u.id !== user.id);
+                    });
+                },
+                saveUser() {
+                    fetch('/expose/users', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(this.userForm)
+                    }).then((response) => {
+                        return response.json();
+                    }).then((data) => {
+                        if (data.user) {
+                            this.userForm.errors = {};
+                            this.users.unshift(data.user);
+                        }
+                        if (data.errors) {
+                            this.userForm.errors = data.errors;
+                        }
+                    });
+                }
             }
-        }
-    })
-</script>
-</body>
-</html>
+        })
+    </script>
+{% endblock %}

resources/views/server/users/index.twig

@@ -1,238 +1,93 @@
-<html>
-<head>
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css">
-</head>
-<body>
-<div class="min-h-screen bg-white" id="app">
-    <nav class="bg-white border-b border-gray-200">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between h-16">
-                <div class="flex">
-                    <div class="flex-shrink-0 flex items-center font-bold">
-                        Expose
-                    </div>
-                    <div class="hidden sm:-my-px sm:ml-6 sm:flex">
-                        <a href="#"
-                           class="inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out">
-                            Users
-                        </a>
-                        <a href="/expose/sites"
-                           class="ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
-                            Shared sites
-                        </a>
-                        <a href="#"
-                           class="ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
-                            Settings
-                        </a>
-                    </div>
-                </div>
-                <div class="-mr-2 flex items-center sm:hidden">
-                    <!-- Mobile menu button -->
-                    <button
-                        class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
-                        <!-- Menu open: "hidden", Menu closed: "block" -->
-                        <svg class="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="M4 6h16M4 12h16M4 18h16"/>
-                        </svg>
-                        <!-- Menu open: "block", Menu closed: "hidden" -->
-                        <svg class="hidden h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="M6 18L18 6M6 6l12 12"/>
-                        </svg>
-                    </button>
-                </div>
+{% extends "app" %}
+{% block title %}Users{% endblock %}
+{% block content %}
+    <div class="flex flex-col py-8">
+        <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
+            <div
+                class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
+                <table class="min-w-full">
+                    <thead>
+                    <tr>
+                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                            Name
+                        </th>
+                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                            Auth-Token
+                        </th>
+                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                            Created At
+                        </th>
+                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
+                    </tr>
+                    </thead>
+                    <tbody class="bg-white">
+                    <tr v-for="user in users">
+                        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium text-gray-900">
+                            @{ user.name }
+                        </td>
+                        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
+                            @{ user.auth_token }
+                        </td>
+                        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
+                            @{ user.created_at }
+                        </td>
+                        <td class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-200 text-sm leading-5 font-medium">
+                            <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                            <a href="#" @click.prevent="deleteUser(user)"
+                               class="pl-4 text-red-600 hover:text-red-900">Delete</a>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
             </div>
         </div>
-
-        <!--
-          Mobile menu, toggle classes based on menu state.
-
-          Open: "block", closed: "hidden"
-        -->
-        <div class="hidden sm:hidden">
-            <div class="pt-2 pb-3">
-                <a href="#"
-                   class="block pl-3 pr-4 py-2 border-l-4 border-indigo-500 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out">Dashboard</a>
-                <a href="#"
-                   class="mt-1 block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out">Team</a>
-                <a href="#"
-                   class="mt-1 block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out">Projects</a>
-                <a href="#"
-                   class="mt-1 block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out">Calendar</a>
-            </div>
-            <div class="pt-4 pb-3 border-t border-gray-200">
-                <div class="flex items-center px-4">
-                    <div class="flex-shrink-0">
-                        <img class="h-10 w-10 rounded-full"
-                             src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                             alt=""/>
-                    </div>
-                    <div class="ml-3">
-                        <div class="text-base font-medium leading-6 text-gray-800">Tom Cook</div>
-                        <div class="text-sm font-medium leading-5 text-gray-500">tom@example.com</div>
-                    </div>
-                </div>
-                <div class="mt-3" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
-                    <a href="#"
-                       class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100 focus:outline-none focus:text-gray-800 focus:bg-gray-100 transition duration-150 ease-in-out"
-                       role="menuitem">Your Profile</a>
-                    <a href="#"
-                       class="mt-1 block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100 focus:outline-none focus:text-gray-800 focus:bg-gray-100 transition duration-150 ease-in-out"
-                       role="menuitem">Settings</a>
-                    <a href="#"
-                       class="mt-1 block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100 focus:outline-none focus:text-gray-800 focus:bg-gray-100 transition duration-150 ease-in-out"
-                       role="menuitem">Sign out</a>
-                </div>
-            </div>
-        </div>
-    </nav>
-
-    <div class="py-10">
-        <header>
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <h1 class="text-3xl font-bold leading-tight text-gray-900">
-                    Users
-                </h1>
-            </div>
-        </header>
-        <main>
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <form>
-                    <div>
-                        <div>
-                            <div class="mt-6 sm:mt-5">
-                                <div
-                                    class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
-                                    <label for="exposeUserName"
-                                           class="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
-                                        Name
-                                    </label>
-                                    <div class="mt-1 sm:mt-0 sm:col-span-2">
-                                        <div class="max-w-xs rounded-md shadow-sm">
-                                            <span v-if="userForm.errors.name" class="inline-block text-red-600 pb-2">
-                                                @{ userForm.errors.name[0] }
-                                            </span>
-                                            <input id="exposeUserName"
-                                                   autocomplete="no"
-                                                   v-model="userForm.name"
-                                                   :class="{'border border-red-600': userForm.errors.name}"
-                                                   class="form-input block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"/>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </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="saveUser"
-                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">
-          Add User
-        </button>
-      </span>
-                        </div>
-                    </div>
-                </form>
-                <div class="flex flex-col py-8">
-                    <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
-                        <div
-                            class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
-                            <table class="min-w-full">
-                                <thead>
-                                <tr>
-                                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-                                        Name
-                                    </th>
-                                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-                                        Auth-Token
-                                    </th>
-                                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-                                        Created At
-                                    </th>
-                                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
-                                </tr>
-                                </thead>
-                                <tbody class="bg-white">
-                                <tr v-for="user in users">
-                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium text-gray-900">
-                                        @{ user.name }
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
-                                        @{ user.auth_token }
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
-                                        @{ user.created_at }
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-200 text-sm leading-5 font-medium">
-                                        <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
-                                        <a href="#" @click.prevent="deleteUser(user)"
-                                           class="pl-4 text-red-600 hover:text-red-900">Delete</a>
-                                    </td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </main>
     </div>
-</div>
-<script>
-    new Vue({
-        el: '#app',
+{% endblock %}
+{% block scripts %}
+    <script>
+        new Vue({
+            el: '#app',
 
-        delimiters: ['@{', '}'],
+            delimiters: ['@{', '}'],
 
-        data: {
-            userForm: {
-                name: '',
-                errors: {},
+            data: {
+                userForm: {
+                    name: '',
+                    errors: {},
+                },
+                users: {{ users|json_encode|raw }}
             },
-            users: {{ users|json_encode|raw }}
-        },
 
-        methods: {
-            deleteUser(user) {
-                fetch('/expose/users/delete/'+user.id, {
-                    method: 'DELETE',
-                }).then((response) => {
-                    return response.json();
-                }).then((data) => {
-                    this.users = this.users.filter(u => u.id !== user.id);
-                });
-            },
-            saveUser() {
-                fetch('/expose/users', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify(this.userForm)
-                }).then((response) => {
-                    return response.json();
-                }).then((data) => {
-                    if (data.user) {
-                        this.userForm.errors = {};
-                        this.users.unshift(data.user);
-                    }
-                    if (data.errors) {
-                        this.userForm.errors = data.errors;
-                    }
-                });
+            methods: {
+                deleteUser(user) {
+                    fetch('/expose/users/delete/'+user.id, {
+                        method: 'DELETE',
+                    }).then((response) => {
+                        return response.json();
+                    }).then((data) => {
+                        this.users = this.users.filter(u => u.id !== user.id);
+                    });
+                },
+                saveUser() {
+                    fetch('/expose/users', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(this.userForm)
+                    }).then((response) => {
+                        return response.json();
+                    }).then((data) => {
+                        if (data.user) {
+                            this.userForm.errors = {};
+                            this.users.unshift(data.user);
+                        }
+                        if (data.errors) {
+                            this.userForm.errors = data.errors;
+                        }
+                    });
+                }
             }
-        }
-    })
-</script>
-</body>
-</html>
+        })
+    </script>
+{% endblock %}

tests/Unit/ExampleTest.php

@@ -2,7 +2,7 @@
 
 namespace Tests\Unit;
 
-use Tests\TestCase;
+use seregazhuk\React\PromiseTesting\TestCase;
 
 class ExampleTest extends TestCase
 {