diff --git a/app/Http/Controllers/Base/IndexController.php b/app/Http/Controllers/Base/IndexController.php index f5272935f..765c66ee2 100644 --- a/app/Http/Controllers/Base/IndexController.php +++ b/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]); } /** diff --git a/resources/assets/scripts/app.js b/resources/assets/scripts/app.js index 180df2a40..2581626f5 100644 --- a/resources/assets/scripts/app.js +++ b/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 }, ] }); diff --git a/resources/assets/scripts/components/base/Base.vue b/resources/assets/scripts/components/base/Base.vue new file mode 100644 index 000000000..e69de29bb diff --git a/resources/assets/scripts/components/errors/Flash.template.js b/resources/assets/scripts/components/errors/Flash.template.js deleted file mode 100644 index 78ff0561f..000000000 --- a/resources/assets/scripts/components/errors/Flash.template.js +++ /dev/null @@ -1,28 +0,0 @@ -module.exports = ` -
- - - - - - - - - - - - -
-`; diff --git a/resources/assets/styles/components/animations.css b/resources/assets/styles/components/animations.css index 854df8974..a081fb4f7 100644 --- a/resources/assets/styles/components/animations.css +++ b/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; + } +} diff --git a/resources/assets/styles/components/miscellaneous.css b/resources/assets/styles/components/miscellaneous.css new file mode 100644 index 000000000..e5ae73578 --- /dev/null +++ b/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; + } +} diff --git a/resources/assets/styles/components/navigation.css b/resources/assets/styles/components/navigation.css new file mode 100644 index 000000000..cc1146c4d --- /dev/null +++ b/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; + + } + } + } + } + } +} diff --git a/resources/assets/styles/main.css b/resources/assets/styles/main.css index 85fed4d9b..cfbd00666 100644 --- a/resources/assets/styles/main.css +++ b/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"; diff --git a/resources/themes/pterodactyl/templates/auth/core.blade.php b/resources/themes/pterodactyl/templates/auth/core.blade.php index 1d190e1f3..58afc4876 100644 --- a/resources/themes/pterodactyl/templates/auth/core.blade.php +++ b/resources/themes/pterodactyl/templates/auth/core.blade.php @@ -1,34 +1,15 @@ - - - {{ config('app.name', 'Pterodactyl') }} +@extends('templates/wrapper', [ + 'css' => ['body' => 'bg-grey-darkest'] +]) - @section('meta') - - - - - @show - - @section('assets') - {!! $asset->css('assets/css/bundle.css') !!} - @show - - @include('layouts.scripts') - - -
-
-
- -
- -

- {!! trans('strings.copyright', ['year' => date('Y')]) !!} -

-
+@section('container') +
+
+
- @section('scripts') - {!! $asset->js('assets/scripts/bundle.js') !!} - @show - - + +

+ {!! trans('strings.copyright', ['year' => date('Y')]) !!} +

+
+@endsection diff --git a/resources/themes/pterodactyl/templates/base/core.blade.php b/resources/themes/pterodactyl/templates/base/core.blade.php new file mode 100644 index 000000000..e3a75fe5d --- /dev/null +++ b/resources/themes/pterodactyl/templates/base/core.blade.php @@ -0,0 +1,73 @@ +@extends('templates/wrapper') + +@section('above-container') +
+ +
+ +
+
+@endsection + +@section('container') +
+ @foreach($servers as $server) +
+
+
+
+
+
+ {{--@if ($server->owner_id !== Auth::user()->id)--}} + {{--

--}} + {{----}} + {{----}} + {{----}} + {{--Restricted Access--}} + {{--

--}} + {{--@endif--}} +
{{ $server->name }}
+ {{--
--}} + {{--
68%
--}} + {{--
124 / 1024 Mb
--}} + {{--
--}} +
+
+
+

{{ $server->node->name }}

+

{{ $server->allocation->ip }}:{{ $server->allocation->port }}

+
+
+
+
+ @endforeach +
+
+

+ {!! trans('strings.copyright', ['year' => date('Y')]) !!} +

+
+@endsection diff --git a/resources/themes/pterodactyl/templates/wrapper.blade.php b/resources/themes/pterodactyl/templates/wrapper.blade.php new file mode 100644 index 000000000..81bb3a0ee --- /dev/null +++ b/resources/themes/pterodactyl/templates/wrapper.blade.php @@ -0,0 +1,28 @@ + + + {{ config('app.name', 'Pterodactyl') }} + + @section('meta') + + + + + @show + + @section('assets') + {!! $asset->css('assets/css/bundle.css') !!} + @show + + @include('layouts.scripts') + + + @yield('above-container') +
+ @yield('container') +
+ @yield('below-container') + @section('scripts') + {!! $asset->js('assets/scripts/bundle.js') !!} + @show + + diff --git a/routes/base.php b/routes/base.php index 4955afd42..88058345f 100644 --- a/routes/base.php +++ b/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');