Get initial mockup of new server list up

app/Http/Controllers/Base/IndexController.php

@@ -53,13 +53,13 @@ class IndexController extends Controller
      * @param \Illuminate\Http\Request $request
      * @return \Illuminate\View\View
      */
-    public function getIndex(Request $request)
+    public function index(Request $request)
     {
         $servers = $this->repository->setSearchTerm($request->input('query'))->filterUserAccessServers(
             $request->user(), User::FILTER_LEVEL_ALL
         );
 
-        return view('base.index', ['servers' => $servers]);
+        return view('templates/base.core', ['servers' => $servers]);
     }
 
     /**

resources/assets/scripts/app.js

@@ -10,6 +10,7 @@ import { flash } from './mixins/flash';
 
 // Base Vuejs Templates
 import Login from './components/auth/Login';
+import Base from './components/base/Base';
 import ResetPassword from './components/auth/ResetPassword';
 
 window.events = new Vue;
@@ -44,7 +45,10 @@ const router = new VueRouter({
                 return { token: route.params.token, email: route.query.email || '' };
             }
         },
-        { path: '*', redirect: '/auth/login' }
+        { name : 'index', path: '/', component: Base },
+        { name : 'account', path: '/account', component: Base },
+        { name : 'account-api', path: '/account/api', component: Base },
+        { name : 'account-security', path: '/account/security', component: Base },
     ]
 });
 

resources/assets/scripts/components/errors/Flash.template.js

@@ -1,28 +0,0 @@
-module.exports = `
-    <div class="pb-2" v-if="show">
-        <transition v-if="variant === 'success'">
-            <div class="p-2 bg-green-dark border-green-darker border items-center text-green-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
-                <span class="flex rounded-full bg-green uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Success</span>
-                <span class="mr-2 text-left flex-auto">{{ message }}</span>
-            </div>
-        </transition>
-        <transition v-if="variant === 'danger'">
-            <div class="p-2 bg-red-dark border-red-darker border items-center text-red-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
-                <span class="flex rounded-full bg-red uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Error</span>
-                <span class="mr-2 text-left flex-auto">{{ message }}</span>
-            </div>
-        </transition>
-        <transition v-if="variant === 'info'">
-            <div class="p-2 bg-blue-dark border-blue-darker border items-center text-blue-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
-                <span class="flex rounded-full bg-blue uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Info</span>
-                <span class="mr-2 text-left flex-auto">{{ message }}</span>
-            </div>
-        </transition>
-        <transition v-if="variant === 'warning'">
-            <div class="p-2 bg-yellow-dark border-yellow-darker border items-center text-yellow-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
-                <span class="flex rounded-full bg-yellow uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Warning</span>
-                <span class="mr-2 text-left flex-auto">{{ message }}</span>
-            </div>
-        </transition>
-    </div>
-`;

resources/assets/styles/components/animations.css

@@ -16,3 +16,21 @@
   from { opacity: 0; }
   to   { opacity: 1; }
 }
+
+@keyframes onlineblink {
+  0% {
+    @apply .bg-green;
+  }
+  100% {
+    @apply .bg-green-dark;
+  }
+}
+
+@keyframes offlineblink {
+  0% {
+    @apply .bg-red;
+  }
+  100% {
+    @apply .bg-red-dark;
+  }
+}

resources/assets/styles/components/miscellaneous.css

@@ -0,0 +1,28 @@
+code {
+    @apply .font-mono .px-2 .py-1;
+    background-color: #eef1f6;
+    color: #596981;
+    border-radius: 2px;
+    border: 1px solid rgba(0, 0, 0, .1);
+    display: inline-block;
+}
+
+/**
+ * Indicators for server online status.
+ */
+.indicator {
+    @apply .bg-grey-darker .border .border-grey;
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+
+    &.online {
+        @apply .bg-green-dark .border-green;
+        animation: onlineblink 2s infinite alternate;
+    }
+
+    &.offline {
+        @apply .bg-green-dark .border-red;
+        animation: offlineblink 2s infinite alternate;
+    }
+}

resources/assets/styles/components/navigation.css

@@ -0,0 +1,28 @@
+.nav {
+    @apply .bg-blue;
+    height: 48px;
+
+    & > .logo {
+        @apply .mx-8 .font-sans .font-thin .text-2xl .text-white .inline-block .pt-2;
+    }
+
+    & > .menu {
+        @apply .float-right .mx-8 .inline-block;
+
+        & > ul {
+            @apply .list-reset;
+            & > li {
+                @apply .inline-block;
+                & > a {
+                    @apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm;
+                    padding: 15px;
+
+                    &:hover {
+                        @apply .bg-blue-dark;
+
+                    }
+                }
+            }
+        }
+    }
+}

resources/assets/styles/main.css

@@ -11,6 +11,8 @@
 @import "components/authentication.css";
 @import "components/buttons.css";
 @import "components/forms.css";
+@import "components/miscellaneous.css";
+@import "components/navigation.css";
 @import "components/notifications.css";
 @import "components/spinners.css";
 

resources/themes/pterodactyl/templates/auth/core.blade.php

@@ -1,34 +1,15 @@
-<html>
+@extends('templates/wrapper', [
-    <head>
+    'css' => ['body' => 'bg-grey-darkest']
-        <title>{{ config('app.name', 'Pterodactyl') }}</title>
+])
 
-        @section('meta')
+@section('container')
-            <meta charset="utf-8">
+    <div class="w-full max-w-xs sm:max-w-sm m-auto mt-8">
-            <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <div class="text-center">
-            <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+            <img src="/favicons/android-chrome-512x512.png" class="max-w-xxs">
-            <meta name="csrf-token" content="{{ csrf_token() }}">
-        @show
-
-        @section('assets')
-            {!! $asset->css('assets/css/bundle.css') !!}
-        @show
-
-        @include('layouts.scripts')
-    </head>
-    <body class="bg-grey-darkest">
-        <div class="container" id="pterodactyl">
-            <div class="w-full max-w-xs sm:max-w-sm m-auto mt-8">
-                <div class="text-center">
-                    <img src="/favicons/android-chrome-512x512.png" class="max-w-xxs">
-                </div>
-                <router-view></router-view>
-                <p class="text-center text-grey text-xs">
-                    {!! trans('strings.copyright', ['year' => date('Y')]) !!}
-                </p>
-            </div>
         </div>
-        @section('scripts')
+        <router-view></router-view>
-            {!! $asset->js('assets/scripts/bundle.js') !!}
+        <p class="text-center text-grey text-xs">
-        @show
+            {!! trans('strings.copyright', ['year' => date('Y')]) !!}
-    </body>
+        </p>
-</html>
+    </div>
+@endsection

resources/themes/pterodactyl/templates/base/core.blade.php

@@ -0,0 +1,73 @@
+@extends('templates/wrapper')
+
+@section('above-container')
+    <div class="nav">
+        <div class="logo">
+            Pterodactyl
+        </div>
+        <div class="menu">
+            <ul>
+                <li>
+                    <a href="#">
+                        <span>Your Servers</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#">
+                        <span>Admin</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#">
+                        <span>dane</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="{{ route('auth.logout') }}">
+                        <span>L</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+@endsection
+
+@section('container')
+    <div class="w-full m-auto mt-8 animate fadein sm:block md:flex">
+        @foreach($servers as $server)
+            <div class="w-full mr-4 flex flex-col">
+                <div class="border border-grey-light bg-white rounded p-4 justify-between leading-normal">
+                    <div class="float-right">
+                        <div class="indicator {{ ['online', 'offline'][rand(0, 1)] }}"></div>
+                    </div>
+                    <div class="mb-4">
+                        {{--@if ($server->owner_id !== Auth::user()->id)--}}
+                        {{--<p class="text-sm text-grey-dark flex items-center">--}}
+                            {{--<svg class="fill-current text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">--}}
+                                {{--<path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" ></path>--}}
+                            {{--</svg>--}}
+                            {{--Restricted Access--}}
+                        {{--</p>--}}
+                        {{--@endif--}}
+                        <div class="text-black font-bold text-xl">{{ $server->name }}</div>
+                        {{--<div class="flex text-center">--}}
+                            {{--<div class="flex-1">68%</div>--}}
+                            {{--<div class="flex-1">124 / 1024 Mb</div>--}}
+                        {{--</div>--}}
+                    </div>
+                    <div class="flex items-center">
+                        <div class="text-sm">
+                            <p class="text-grey">{{ $server->node->name }}</p>
+                            <p class="text-grey-dark">{{ $server->allocation->ip }}:{{ $server->allocation->port }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        @endforeach
+    </div>
+    <div class="w-full m-auto mt-4">
+        <p class="text-right text-grey-dark text-xs">
+            {!! trans('strings.copyright', ['year' => date('Y')]) !!}
+        </p>
+    </div>
+@endsection

resources/themes/pterodactyl/templates/wrapper.blade.php

@@ -0,0 +1,28 @@
+<html>
+    <head>
+        <title>{{ config('app.name', 'Pterodactyl') }}</title>
+
+        @section('meta')
+            <meta charset="utf-8">
+            <meta http-equiv="X-UA-Compatible" content="IE=edge">
+            <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+            <meta name="csrf-token" content="{{ csrf_token() }}">
+        @show
+
+        @section('assets')
+            {!! $asset->css('assets/css/bundle.css') !!}
+        @show
+
+        @include('layouts.scripts')
+    </head>
+    <body class="{{ $css['body'] ?? 'bg-grey-lighter' }}">
+        @yield('above-container')
+        <div class="container" id="pterodactyl">
+            @yield('container')
+        </div>
+        @yield('below-container')
+        @section('scripts')
+            {!! $asset->js('assets/scripts/bundle.js') !!}
+        @show
+    </body>
+</html>

routes/base.php

@@ -6,7 +6,7 @@
  * This software is licensed under the terms of the MIT license.
  * https://opensource.org/licenses/MIT
  */
-Route::get('/', 'IndexController@getIndex')->name('index');
+Route::get('/', 'IndexController@index')->name('index');
 Route::get('/status/{server}', 'IndexController@status')->name('index.status');
 
 /*
@@ -58,3 +58,6 @@ Route::group(['prefix' => 'account/security'], function () {
 
     Route::delete('/totp', 'SecurityController@disableTotp')->name('account.security.totp.disable');
 });
+
+// Catch any other combinations of routes and pass them off to the Vuejs component.
+Route::fallback('IndexController@index');