update all panel pages

master
Corne Oppelaar 8 years ago
parent 414f17476f
commit 45ee7b2ebc

3
Vagrantfile vendored

@ -18,9 +18,10 @@ installphp
vpn.vm.box = "ubuntu/wily64" vpn.vm.box = "ubuntu/wily64"
vpn.vm.network "private_network", ip: "192.168.50.8" vpn.vm.network "private_network", ip: "192.168.50.8"
vpn.vm.synced_folder "../zer.ooo-server", "/server" vpn.vm.synced_folder "../zer.ooo-server", "/server"
vpn.vm.synced_folder "../zer.ooo-service", "/service"
vpn.vm.network "forwarded_port", guest: 7864, host: 7864 vpn.vm.network "forwarded_port", guest: 7864, host: 7864
vpn.vm.provision :shell, inline: <<installnode vpn.vm.provision :shell, inline: <<installnode
bash /server/main.sh all "http://192.168.50.4:8888"; SERVICE_REPO="/service" bash /server/main.sh all "http://192.168.50.4:8888";
installnode installnode
end end

@ -27,6 +27,7 @@ routes:
/download/{name}: Panel\Certificates\Download /download/{name}: Panel\Certificates\Download
/revoke: /revoke:
post: Panel\Certificates\Revoke post: Panel\Certificates\Revoke
/servers: Panel\Servers
/server: /server:
/remove: /remove:
post: Panel\Servers\Remove post: Panel\Servers\Remove

@ -133,11 +133,21 @@ body {
border-right: 3px solid #d2d5e7; border-right: 3px solid #d2d5e7;
padding: 15px; padding: 15px;
margin-top: 20px; } margin-top: 20px; }
.panel-content .buttons {
float: right; }
.panel-content .buttons button {
padding: 10px;
font-size: 15px; }
.panel-content::after {
content: "";
display: table;
clear: both; }
.invite-create { .invite-create {
float: right; } float: right; }
.certificate-create, .invite-create button { .certificate-create,
.invite-create button {
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
background: #53257e; background: #53257e;
@ -158,57 +168,119 @@ body {
color: #999999; color: #999999;
margin-bottom: 25px; } margin-bottom: 25px; }
.certificate-list, .invites { .certificate-list,
.servers,
.invites {
margin: 0; margin: 0;
list-style: none; list-style: none;
padding: 0; } padding: 0; }
.certificate-list li, .invites li { .certificate-list li,
.servers li,
.invites li {
border-left: 3px #e3b2a6 solid; border-left: 3px #e3b2a6 solid;
padding-left: 5px; padding-left: 5px;
margin-bottom: 10px; margin-bottom: 10px;
position: relative; } position: relative; }
.certificate-list li .text .expiry, .invites li .text .expiry { .certificate-list li .text .expiry,
.servers li .text .expiry,
.invites li .text .expiry {
font-size: 14px; font-size: 14px;
color: #999999; } color: #999999; }
.certificate-list li .revoke-q, .invites li .revoke-q { .certificate-list li .revoke-q,
.servers li .revoke-q,
.invites li .revoke-q {
display: none; } display: none; }
.certificate-list li .actions, .certificate-list li .revoke-q, .invites li .actions, .invites li .revoke-q { .certificate-list li .actions, .certificate-list li .revoke-q,
.servers li .actions,
.servers li .revoke-q,
.invites li .actions,
.invites li .revoke-q {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; } bottom: 0; }
.certificate-list li .actions span, .certificate-list li .revoke-q span, .invites li .actions span, .invites li .revoke-q span { .certificate-list li .actions span, .certificate-list li .revoke-q span,
.servers li .actions span,
.servers li .revoke-q span,
.invites li .actions span,
.invites li .revoke-q span {
transition: .2s; transition: .2s;
cursor: pointer; cursor: pointer;
padding: 5px; padding: 5px;
float: left; float: left;
display: block; } display: block; }
.certificate-list li .actions span a, .certificate-list li .revoke-q span a, .invites li .actions span a, .invites li .revoke-q span a { .certificate-list li .actions span a,
.certificate-list li .actions span button, .certificate-list li .revoke-q span a,
.certificate-list li .revoke-q span button,
.servers li .actions span a,
.servers li .actions span button,
.servers li .revoke-q span a,
.servers li .revoke-q span button,
.invites li .actions span a,
.invites li .actions span button,
.invites li .revoke-q span a,
.invites li .revoke-q span button {
background: none;
font-size: 100%;
font-family: 'Karla', sans-serif;
color: black; color: black;
text-decoration: none; text-decoration: none;
display: block; display: block;
margin: -5px; margin: -5px;
padding: 5px; } padding: 5px;
cursor: pointer; }
.certificate-list li .actions .certificate-delete:hover, .certificate-list li .actions .certificate-delete:hover,
.certificate-list li .actions .yes:hover, .certificate-list li .revoke-q .certificate-delete:hover, .certificate-list li .actions .yes:hover,
.certificate-list li .revoke-q .yes:hover, .invites li .actions .certificate-delete:hover, .certificate-list li .actions .delete:hover, .certificate-list li .revoke-q .certificate-delete:hover,
.invites li .actions .yes:hover, .invites li .revoke-q .certificate-delete:hover, .certificate-list li .revoke-q .yes:hover,
.invites li .revoke-q .yes:hover { .certificate-list li .revoke-q .delete:hover,
.servers li .actions .certificate-delete:hover,
.servers li .actions .yes:hover,
.servers li .actions .delete:hover,
.servers li .revoke-q .certificate-delete:hover,
.servers li .revoke-q .yes:hover,
.servers li .revoke-q .delete:hover,
.invites li .actions .certificate-delete:hover,
.invites li .actions .yes:hover,
.invites li .actions .delete:hover,
.invites li .revoke-q .certificate-delete:hover,
.invites li .revoke-q .yes:hover,
.invites li .revoke-q .delete:hover {
background: #dc6a6a; } background: #dc6a6a; }
.certificate-list li .actions .certificate-download:hover, .certificate-list li .actions .certificate-download:hover,
.certificate-list li .actions .certificate-download-key:hover, .certificate-list li .actions .certificate-download-key:hover,
.certificate-list li .actions .no:hover, .certificate-list li .actions .no:hover,
.certificate-list li .actions .copy:hover, .certificate-list li .revoke-q .certificate-download:hover, .certificate-list li .actions .copy:hover,
.certificate-list li .actions .edit:hover, .certificate-list li .revoke-q .certificate-download:hover,
.certificate-list li .revoke-q .certificate-download-key:hover, .certificate-list li .revoke-q .certificate-download-key:hover,
.certificate-list li .revoke-q .no:hover, .certificate-list li .revoke-q .no:hover,
.certificate-list li .revoke-q .copy:hover, .invites li .actions .certificate-download:hover, .certificate-list li .revoke-q .copy:hover,
.certificate-list li .revoke-q .edit:hover,
.servers li .actions .certificate-download:hover,
.servers li .actions .certificate-download-key:hover,
.servers li .actions .no:hover,
.servers li .actions .copy:hover,
.servers li .actions .edit:hover,
.servers li .revoke-q .certificate-download:hover,
.servers li .revoke-q .certificate-download-key:hover,
.servers li .revoke-q .no:hover,
.servers li .revoke-q .copy:hover,
.servers li .revoke-q .edit:hover,
.invites li .actions .certificate-download:hover,
.invites li .actions .certificate-download-key:hover, .invites li .actions .certificate-download-key:hover,
.invites li .actions .no:hover, .invites li .actions .no:hover,
.invites li .actions .copy:hover, .invites li .revoke-q .certificate-download:hover, .invites li .actions .copy:hover,
.invites li .actions .edit:hover,
.invites li .revoke-q .certificate-download:hover,
.invites li .revoke-q .certificate-download-key:hover, .invites li .revoke-q .certificate-download-key:hover,
.invites li .revoke-q .no:hover, .invites li .revoke-q .no:hover,
.invites li .revoke-q .copy:hover { .invites li .revoke-q .copy:hover,
.invites li .revoke-q .edit:hover {
background: #aca4bc; } background: #aca4bc; }
.certificate-list li .actions .no, .certificate-list li .revoke-q .no, .invites li .actions .no, .invites li .revoke-q .no { .certificate-list li .actions .no, .certificate-list li .revoke-q .no,
.servers li .actions .no,
.servers li .revoke-q .no,
.invites li .actions .no,
.invites li .revoke-q .no {
width: 65px; width: 65px;
text-align: center; } text-align: center; }

File diff suppressed because one or more lines are too long

@ -146,13 +146,30 @@ body {
border-right: 3px solid #d2d5e7; border-right: 3px solid #d2d5e7;
padding: 15px; padding: 15px;
margin-top: 20px; margin-top: 20px;
.buttons {
float: right;
button {
padding: 10px;
font-size: 15px;
}
}
&::after {
content: "";
display: table;
clear: both;
}
} }
.invite-create { .invite-create {
float:right; float:right;
} }
.certificate-create, .invite-create button { .certificate-create,
.invite-create button {
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
background: hsl(271, 55%, 32%); background: hsl(271, 55%, 32%);
@ -176,7 +193,9 @@ body {
margin-bottom: 25px; margin-bottom: 25px;
} }
.certificate-list, .invites { .certificate-list,
.servers,
.invites {
margin: 0; margin: 0;
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -210,17 +229,23 @@ body {
float: left; float: left;
display: block; display: block;
a { a,
button {
background: none;
font-size: 100%;
font-family: 'Karla', sans-serif;
color: black; color: black;
text-decoration: none; text-decoration: none;
display: block; display: block;
margin: -5px; margin: -5px;
padding: 5px; padding: 5px;
cursor: pointer;
} }
} }
.certificate-delete, .certificate-delete,
.yes { .yes,
.delete {
&:hover { &:hover {
background: hsl(0, 62%, 64%); background: hsl(0, 62%, 64%);
} }
@ -229,7 +254,8 @@ body {
.certificate-download, .certificate-download,
.certificate-download-key, .certificate-download-key,
.no, .no,
.copy { .copy,
.edit {
&:hover { &:hover {
background: #aca4bc; background: #aca4bc;
} }

@ -1,5 +1,9 @@
$(function () { $(function () {
var error = $('<div class="alert alert-danger" role="alert"></div>'); var errorDiv = $('<div>').addClass('error-message');
function error(msg) {
$('.title').after(errorDiv.text(msg));
}
$('.save').click(function () { $('.save').click(function () {
save(function(){}); save(function(){});
@ -17,9 +21,8 @@ $(function () {
var data = $('.server-form input,.server-form select').serializeArray(); var data = $('.server-form input,.server-form select').serializeArray();
$.post('/panel/server/' + fingerprint, data, function (data) { $.post('/panel/server/' + fingerprint, data, function (data) {
console.log(data);
if (!data.success) { if (!data.success) {
$('h2').after(error.text(data.error)); error(data.error);
return; return;
} }
@ -36,7 +39,7 @@ $(function () {
}, },
function (data) { function (data) {
if (!data.success) { if (!data.success) {
$('h2').after(error.text(data.error)); error(data.error);
return; return;
} }

@ -0,0 +1,34 @@
<?php
namespace Eater\Glim\Handler\Panel;
use Aura\Session\Segment;
use Eater\Glim\Handler\Panel;
use Eater\Glim\Model\ServerQuery;
class Servers extends Panel
{
public function handle()
{
/** @var Segment $segment */
$segment = $this->get('session')->getSegment('main');
$this->get('twig-vars')->def('message', $segment->getFlash('message'));
$superuser = $this->getUser()->getSuperuser();
$vars = [
'superuser' => $superuser,
'servers' => $this->fetchServers()
];
if ($superuser) {
$vars['registered_servers'] = $this->fetchServers('registered');
}
return $this->render('panel/servers.html.twig', $vars);
}
public function fetchServers($status = "signed")
{
return ServerQuery::create()->filterByStatus($status)->find();
}
}

@ -9,10 +9,10 @@
namespace Eater\Glim\Handler\Panel\Servers\Edit; namespace Eater\Glim\Handler\Panel\Servers\Edit;
use Eater\Glim\Handler\Session; use Eater\Glim\Handler\Panel;
use Eater\Glim\Model\ServerQuery; use Eater\Glim\Model\ServerQuery;
class Show extends Session class Show extends Panel
{ {
protected $shouldHaveSuperuser = true; protected $shouldHaveSuperuser = true;

@ -15,10 +15,18 @@ class Remove extends Session
public function handle() public function handle()
{ {
$server = ServerQuery::create()->findOneByFingerprint($this->post('fingerprint')); $server = ServerQuery::create()->findOneByFingerprint($this->post('fingerprint'));
if ($server === null || $server->getStatus() !== 'registered') {
/** @var \Aura\Session\Session $session */
$session = $this->get('session');
$segment = $session->getSegment('main');
$segment->setFlash("message", "Couldn't delete server that is already signed");
return $this->redirect('/panel/servers');
}
$server->delete(); $server->delete();
return $this->json([ return $this->redirect('/panel/servers');
'success' => true
]);
} }
} }

@ -0,0 +1,56 @@
{% extends "panel.html.twig" %}
{% block head %}
{{ parent() }}
<script src="/js/clipboard.min.js"></script>
<script src="/js/pages/invites.js"></script>
{% endblock %}
{% block panel_contents %}
<h1>Servers</h1>
{% if message %}
<div class="error-message">{{ message }}</div>
{% endif %}
<ul class="servers">
{% for server in servers %}
<li>
<div class="text">
{{ server.getName() }}
</div>
<div class="actions">
<span><a href="/panel/servers/{{ server.getFingerprint() }}">Details</a></span>
</div>
</li>
{% else %}
<li>
There are no servers :(
</li>
{% endfor %}
</ul>
{% if superuser %}
<h1>Registered servers</h1>
<ul class="servers">
{% for server in registered_servers %}
<li>
<div class="text">
{{ server.getFingerprint() }}
</div>
<div class="actions">
<span class="delete">
<form action="/panel/server/remove" method="post">
<input type="hidden" value="{{ server.getFingerprint() }}" name="fingerprint">
<button type="submit">remove</button>
</form>
</span>
<span class="edit" >
<a href="/panel/server/{{ server.getFingerprint() }}">edit</a>
</span>
</div>
</li>
{% else %}
<li>No servers registered</li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}

@ -1,4 +1,4 @@
{% extends "base_bootstrap.html.twig" %} {% extends "panel.html.twig" %}
{% block head %} {% block head %}
{{ parent() }} {{ parent() }}
@ -6,91 +6,60 @@
<script src="/js/edit_server.js"></script> <script src="/js/edit_server.js"></script>
{% endblock %} {% endblock %}
{% block content %} {% block panel_contents %}
<div class="container"> <h1>Editing server '{{ server.getFqdn() }}'</h1>
<div data-fingerprint="{{ server.getFingerprint() }}" class="row server-form"> <div class="server-form">
<div class="col-md-6 col-md-offset-3">
<div class="row"> <div class="row">
<h2>Editing server '{{ server.getFqdn() }}'</h2> <label for="fqdn">Hostname</label>
<input name="fqdn" id="fqdn" type="text" value="{{ server.getFqdn() }}">
</div> </div>
<div class="form-horizontal"> <div class="row">
<div class="form-group"> <label for="external-ip">External IP</label>
<label class="control-label col-md-4" for="fqdn">Hostname</label> <input name="external-ip" id="external-ip" type="text" value="{{ server.getExternalIp() }}">
<div class="col-md-8">
<input name="fqdn" id="fqdn" type="text" class="form-control" value="{{ server.getFqdn() }}">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4" for="external-ip">External IP</label>
<div class="col-md-8">
<input name="external-ip" id="external-ip" type="text" min="-1" class="form-control" value="{{ server.getExternalIp() }}">
</div>
</div>
<h3>Details</h3>
<div class="form-group">
<label class="control-label col-md-4" for="location">Location</label>
<div class="col-md-8">
<input name="location" id="location" type="text" class="form-control" value="{{ server.getLocation() }}">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4" for="speed">Speed</label>
<div class="col-md-8">
<input name="speed" id="speed" type="number" min="-1" class="form-control" value="{{ server.getSpeed() }}">
</div>
</div>
<h3>Config</h3>
<div class="form-group">
<label class="control-label col-md-4" for="internal-ip">Internal IP</label>
<div class="col-md-8">
<input name="internal-ip" id="internal-ip" type="text" min="-1" class="form-control" value="{{ server.getInternalIp() ?: '10.24.0.0' }}">
</div> </div>
<h2>Details</h2>
<div class="row">
<label for="location">Location</label>
<input name="location" id="location" type="text" value="{{ server.getLocation() }}">
</div> </div>
<div class="form-group"> <div class="row">
<label class="control-label col-md-4" for="speed">Netmask</label> <label for="speed">Speed</label>
<div class="col-md-8"> <input name="speed" id="speed" type="number" min="-1" value="{{ server.getSpeed() }}">
<input name="netmask" id="netmask" type="number" min="8" max="24" class="form-control" value="{{ server.getNetmask() ?: 16 }}">
</div> </div>
<h2>Config</h2>
<div class="row">
<label for="internal-ip">Internal IP</label>
<input name="internal-ip" id="internal-ip" type="text" value="{{ server.getInternalIp() ?: '10.24.0.0' }}">
</div> </div>
<div class="form-group"> <div class="row">
<label class="control-label col-md-4" for="port">Port</label> <label for="netmask">Netmask</label>
<div class="col-md-8"> <input name="netmask" id="netmask" type="number" min="8" max="24" value="{{ server.getNetmask() ?: 16 }}">
<input name="port" id="port" type="number" class="form-control" value="{{ server.getPort() ?: 1194 }}">
</div> </div>
<div class="row">
<label for="port">Port</label>
<input name="port" id="port" type="number" value="{{ server.getPort() ?: 1194 }}">
</div> </div>
<div class="form-group"> <div class="row">
<label class="control-label col-md-4" for="protocol">Protocol</label> <label for="protocol">Protocol</label>
<div class="col-md-8"> <select name="protocol" id="protocol">
<select name="protocol" id="protocol" class="form-control">
<option value="udp" {{ server.getProtocol() == 'udp' ? 'selected' }}>UDP</option> <option value="udp" {{ server.getProtocol() == 'udp' ? 'selected' }}>UDP</option>
<option value="tcp" {{ server.getProtocol() == 'tcp' ? 'selected' }}>TCP</option> <option value="tcp" {{ server.getProtocol() == 'tcp' ? 'selected' }}>TCP</option>
</select> </select>
</div> </div>
<div class="row">
<label for="second-dns">second DNS</label>
<input name="second-dns" id="first-dns" type="text" value="{{ server.getSecondDns() ?: '8.8.4.4' }}" />
</div> </div>
<div class="form-group"> <div class="row">
<label class="control-label col-md-4" for="first-dns">First DNS</label>
<div class="col-md-8">
<input name="first-dns" id="first-dns" type="text" class="form-control" value="{{ server.getFirstDns() ?: '8.8.8.8' }}">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4" for="second-dns">second DNS</label> <label class="control-label col-md-4" for="second-dns">second DNS</label>
<div class="col-md-8"> <input name="second-dns" id="first-dns" type="text" class="form-control" value="{{ server.getSecondDns() ?: '8.8.4.4' }}" />
<input name="second-dns" id="first-dns" type="text" class="form-control" value="{{ server.getSecondDns() ?: '8.8.4.4' }}">
</div> </div>
</div> </div>
<div class="form-group">
<div class="col-md-12"> <div class="buttons">
<div class="pull-right"> <button type="button">Save</button>
<button type="button" class="btn save">Save</button>
{% if server.getStatus() == 'registered' %} {% if server.getStatus() == 'registered' %}
<button type="button" class="btn btn-primary save-and-sign">Sign and save</button> <button type="button">Sign and save</button>
{% endif %} {% endif %}
</div> </div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %} {% endblock %}
Loading…
Cancel
Save