added some cool new features
This commit is contained in:
Serjoscha Bassauer
Chocobozzz
parent
0db6ed157b
commit
eb97067d57
@ -17,3 +17,54 @@ body {
|
||||
.signed {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/*
|
||||
https://bootsnipp.com/snippets/jvP6z
|
||||
*/
|
||||
.mini-led-green, .mini-led-green-blink {
|
||||
background-color: #80FF00;
|
||||
box-shadow: #7D7B80 0 -1px 6px 1px, inset #460 0 -1px 8px, #80FF00 0 3px 11px;
|
||||
}
|
||||
.mini-led-red, .mini-led-red-blink {
|
||||
background-color: #F00;
|
||||
box-shadow: #7D7B80 0 -1px 6px 1px, inset #600 0 -1px 8px, #F00 0 3px 11px;
|
||||
}
|
||||
.mini-led-gray,
|
||||
.mini-led-gray-blink,
|
||||
.mini-led-red,
|
||||
.mini-led-red-blink,
|
||||
.mini-led-orange,
|
||||
.mini-led-orange-blink,
|
||||
.mini-led-green,
|
||||
.mini-led-green-blink,
|
||||
.mini-led-yellow,
|
||||
.mini-led-yellow-blink,
|
||||
.mini-led-blue,
|
||||
.mini-led-blue-blink {
|
||||
margin: 0 auto;
|
||||
margin-top: 5px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#config-cards textarea {
|
||||
font-family: Courier;
|
||||
}
|
||||
|
||||
#message-stage {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
#message-stage i.stauts-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#save-config-btn.get-attention a {
|
||||
background-color: #f0ad4e; /* orange */
|
||||
color: white;
|
||||
}
|
||||
#save-config-btn.saved-success a {
|
||||
background-color: #5cb85c; /* green */
|
||||
color: white;
|
||||
}
|
||||
@ -45,9 +45,27 @@
|
||||
// Creation of the LIMIT for build different pages
|
||||
$page = "LIMIT $offset, $limit";
|
||||
|
||||
// ... filtering by the bootstrap table plugin
|
||||
$filter = isset($_GET['filter']) ? json_decode($_GET['filter'],true) : []; // this is passed by the bootstrap table filter plugin (if a filter was chosen by the user): these are the concrete set filters with their value
|
||||
$where = !empty($filter)?'WHERE TRUE':'';
|
||||
$allowed_query_filters = ['user_id', 'log_trusted_ip','log_trusted_port','log_remote_ip','log_remote_port']; // these are valid filters that could be used (defined here for sql security reason)
|
||||
$query_filters_existing = [];
|
||||
foreach($filter as $unsanitized_filter_key => $unsanitized_filter_val) {
|
||||
if(in_array($unsanitized_filter_key, $allowed_query_filters)) { // if this condition does not match: ignore it, because this parameter should not be passed
|
||||
// if $unsanitized_filter_key is in array $allowed_query_filters its a valid key and can not be harmful, so it can be considered sanitized
|
||||
$where .= " AND $unsanitized_filter_key = ?";
|
||||
$query_filters_existing[] = $unsanitized_filter_key;
|
||||
}
|
||||
}
|
||||
|
||||
// Select the logs
|
||||
$req_string = "SELECT *, (SELECT COUNT(*) FROM log) AS nb FROM log ORDER BY log_id DESC $page";
|
||||
$req_string = "SELECT *, (SELECT COUNT(*) FROM log $where) AS nb FROM log $where ORDER BY log_id DESC $page";
|
||||
$req = $bdd->prepare($req_string);
|
||||
|
||||
// dynamically bind the params
|
||||
foreach(array_merge($query_filters_existing,$query_filters_existing) as $i => $query_filter) // array_merge -> duplicated the array contents; this is needed because our where clause is bound two times (in subquery + the outer query)
|
||||
$req->bindValue($i+1, $filter[$query_filter]);
|
||||
|
||||
$req->execute();
|
||||
|
||||
$list = array();
|
||||
@ -75,7 +93,6 @@
|
||||
"log_received" => $received,
|
||||
"log_send" => $sent));
|
||||
|
||||
|
||||
} while ($data = $req->fetch());
|
||||
}
|
||||
else {
|
||||
@ -203,4 +220,36 @@
|
||||
$req->execute(array($_POST['del_admin_id']));
|
||||
}
|
||||
|
||||
// ---------------- UPDATE CONFIG ----------------
|
||||
else if(isset($_POST['update_config'])){
|
||||
|
||||
$pathinfo = pathinfo($_POST['config_file']);
|
||||
|
||||
$config_full_uri = $_POST['config_file']; // the complete path to the file, including the file (name) its self and the fully qualified path
|
||||
$config_full_path = $pathinfo['dirname']; // path to file (without filename its self)
|
||||
$config_name = basename($_POST['config_file']); // config file name only (without path)
|
||||
$config_parent_dir = basename($config_full_path); // name of the dir that contains the config file (without path)
|
||||
|
||||
/*
|
||||
* create backup for history
|
||||
*/
|
||||
if (!file_exists($dir="../$config_full_path/history"))
|
||||
mkdir($dir, 0777, true);
|
||||
$ts = time();
|
||||
copy("../$config_full_uri", "../$config_full_path/history/${ts}_${config_name}");
|
||||
|
||||
/*
|
||||
* write config
|
||||
*/
|
||||
$conf_success = file_put_contents('../'.$_POST['config_file'], $_POST['config_content']);
|
||||
|
||||
echo json_encode([
|
||||
'debug' => [
|
||||
'config_file' => $_POST['config_file'],
|
||||
'config_content' => $_POST['config_content']
|
||||
],
|
||||
'config_success' => $conf_success !== false,
|
||||
]);
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
@ -1,9 +1,40 @@
|
||||
<?php
|
||||
function getHistory($cfg_file, $accordion_id, $open_first_history_tab = false) {
|
||||
ob_start(); ?>
|
||||
<h3>History</h3>
|
||||
<div class="panel-group" id="accordion<?= $accordion_id ?>">
|
||||
<?php foreach (array_reverse(glob('client-conf/'.basename(pathinfo($cfg_file, PATHINFO_DIRNAME)).'/history/*')) as $i => $file): ?>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion<?= $accordion_id ?>" href="#collapse<?= $accordion_id ?>-<?= $i ?>">
|
||||
<?php
|
||||
$history_file_name = basename($file);
|
||||
$chunks = explode('_', $history_file_name);
|
||||
printf('[%s] %s', date('r', $chunks[0]), $chunks[1]);
|
||||
?>
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapse<?= $accordion_id ?>-<?= $i ?>" class="panel-collapse collapse <?= $i===0 && $open_first_history_tab?'in':'' ?>">
|
||||
<div class="panel-body"><pre><?= file_get_contents($file) ?></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div><?php
|
||||
$history = ob_get_contents();
|
||||
ob_end_clean();
|
||||
return $history;
|
||||
}
|
||||
?>
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="#menu0">OpenVPN Users</a></li>
|
||||
<li><a data-toggle="tab" href="#menu1">OpenVPN logs</a></li>
|
||||
<li><a data-toggle="tab" href="#menu2">Web Admins</a></li>
|
||||
<li class="active"><a data-toggle="tab" href="#menu0"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> OpenVPN Users</a></li>
|
||||
<li><a data-toggle="tab" href="#menu1"><span class="glyphicon glyphicon-book" aria-hidden="true"></span> OpenVPN logs</a></li>
|
||||
<li><a data-toggle="tab" href="#menu2"><span class="glyphicon glyphicon-king" aria-hidden="true"></span> Web Admins</a></li>
|
||||
<li><a data-toggle="tab" href="#menu3"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Configs</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
|
||||
<div id="menu0" class="tab-pane fade in active">
|
||||
<!-- Users grid -->
|
||||
<div class="block-grid row" id="user-grid">
|
||||
@ -38,13 +69,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="menu1" class="tab-pane fade">
|
||||
<!-- Logs grid -->
|
||||
<div class="block-grid row" id="log-grid">
|
||||
<h4>
|
||||
OpenVPN logs
|
||||
</h4>
|
||||
<table id="table-logs" class="table"></table>
|
||||
<table id="table-logs" class="table" data-filter-control="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -82,15 +114,70 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="menu3" class="tab-pane fade">
|
||||
<!-- configs -->
|
||||
<div class="block-grid row" id="config-cards">
|
||||
<ul class="nav nav-tabs nav-tabs-justified">
|
||||
<li class="active"><a data-toggle="tab" href="#menu-1-0"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Linux</a></li>
|
||||
<li><a data-toggle="tab" href="#menu-1-1"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> Windows</a></li>
|
||||
<li><a data-toggle="tab" href="#menu-1-2"><span class="glyphicon glyphicon-apple" aria-hidden="true"></span> OSX</a></li>
|
||||
|
||||
<li id="save-config-btn" class="pull-right hidden"><a class="progress-bar-striped" href="javascript:;"><span class="glyphicon glyphicon-save" aria-hidden="true"></span></a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div id="menu-1-0" class="tab-pane fade in active">
|
||||
|
||||
<textarea class="form-control" data-config-file="<?= $cfg_file='client-conf/gnu-linux/client.conf' ?>" name="" id="" cols="30" rows="20"><?= file_get_contents($cfg_file) ?></textarea>
|
||||
<?= getHistory($cfg_file, @++$accId) ?>
|
||||
|
||||
</div>
|
||||
<div id="menu-1-1" class="tab-pane fade">
|
||||
|
||||
<textarea class="form-control" data-config-file="<?= $cfg_file='client-conf/windows/client.ovpn' ?>" name="" id="" cols="30" rows="20"><?= file_get_contents($cfg_file) ?></textarea>
|
||||
<?= getHistory($cfg_file, ++$accId) ?>
|
||||
|
||||
</div>
|
||||
<div id="menu-1-2" class="tab-pane fade">
|
||||
|
||||
<textarea class="form-control" data-config-file="<?= $cfg_file='client-conf/osx-viscosity/client.conf' ?>" name="" id="" cols="30" rows="20"><?= file_get_contents($cfg_file) ?></textarea>
|
||||
<?= getHistory($cfg_file, ++$accId) ?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="vendor/jquery/dist/jquery.min.js"></script>
|
||||
<script src="vendor/bootstrap/js/modal.js"></script>
|
||||
<script src="vendor/bootstrap/js/tooltip.js"></script>
|
||||
<script src="vendor/bootstrap/js/tab.js"></script>
|
||||
<script src="vendor/bootstrap/js/collapse.js"></script>
|
||||
<script src="vendor/bootstrap/js/popover.js"></script>
|
||||
<script src="vendor/bootstrap-table/dist/bootstrap-table.min.js"></script>
|
||||
<script src="vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
|
||||
<script src="vendor/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.min.js"></script>
|
||||
<script src="vendor/bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
|
||||
<script src="vendor/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
|
||||
<script src="js/grids.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
/*
|
||||
https://stackoverflow.com/a/19015027/3214501
|
||||
-> keep the currently active tab beyond page reloading
|
||||
*/
|
||||
$('.nav.nav-tabs a').click(function(e) {
|
||||
e.preventDefault();
|
||||
$(this).tab('show');
|
||||
});
|
||||
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
|
||||
var id = $(e.target).attr("href").substr(1);
|
||||
window.location.hash = id;
|
||||
});
|
||||
$('.nav.nav-tabs a[href="' + window.location.hash + '"]').tab('show');
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
}
|
||||
$rootPath = realpath("./client-conf/$conf_dir");
|
||||
|
||||
// Initialize archive object
|
||||
// Initialize archive object ;;;; why doing this every time the user logs in, when the cert is static?
|
||||
$archive_base_name = "openvpn-$conf_dir";
|
||||
$archive_name = "$archive_base_name.zip";
|
||||
$archive_path = "./client-conf/$archive_name";
|
||||
@ -99,6 +99,7 @@
|
||||
<link rel="stylesheet" href="vendor/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" type="text/css" />
|
||||
<link rel="stylesheet" href="vendor/bootstrap-table/dist/bootstrap-table.min.css" type="text/css" />
|
||||
<link rel="stylesheet" href="vendor/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" type="text/css" />
|
||||
<link rel="stylesheet" href="vendor/bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.css" type="text/css" />
|
||||
<link rel="stylesheet" href="css/index.css" type="text/css" />
|
||||
|
||||
<link rel="icon" type="image/png" href="css/icon.png">
|
||||
@ -193,7 +194,7 @@
|
||||
<p class="navbar-text signed">Signed in as <?php echo $_SESSION['admin_id']; ?>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<a class="navbar-text navbar-right" href="index.php?logout" title="Logout"><button class="btn btn-danger">Logout</button></a>
|
||||
<a class="navbar-text navbar-right" href="index.php?logout" title="Logout"><button class="btn btn-danger">Logout <span class="glyphicon glyphicon-off" aria-hidden="true"></span></button></a>
|
||||
<a class="navbar-text navbar-right" href="index.php" title="Configuration"><button class="btn btn-default">Configurations</button></a>
|
||||
</p>
|
||||
</div>
|
||||
@ -204,5 +205,8 @@
|
||||
require(dirname(__FILE__) . '/include/html/grids.php');
|
||||
}
|
||||
?>
|
||||
<div id="message-stage">
|
||||
<!-- used to display application messages (failures / status-notes) to the user -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
62
js/grids.js
62
js/grids.js
@ -1,6 +1,18 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
// ------------------------- GENERIC STUFF ------------------------------
|
||||
window.printStatus = function(msg, alert_type='warning', bootstrap_icon='') {
|
||||
$('#message-stage').empty()
|
||||
.append(
|
||||
$(document.createElement('div'))
|
||||
.addClass('alert alert-'+alert_type)
|
||||
.html(bootstrap_icon?'<i class="stauts-icon glyphicon glyphicon-'+bootstrap_icon+'"></i>':'')
|
||||
.append(msg)
|
||||
.hide().fadeIn().delay(2000).fadeOut()
|
||||
);
|
||||
}
|
||||
|
||||
// ------------------------- GLOBAL definitions -------------------------
|
||||
var gridsUrl = 'include/grids.php';
|
||||
|
||||
@ -21,6 +33,10 @@ $(function () {
|
||||
return '<input type="checkbox" '+(parseInt(value)===1?'checked':'')+' />';
|
||||
}
|
||||
|
||||
function LEDIndicatorFormatter(value, row, index) {
|
||||
return '<div class="'+(parseInt(value)===1?'mini-led-green':'mini-led-red')+'"></div>';
|
||||
}
|
||||
|
||||
// ------------------------- USERS definitions -------------------------
|
||||
var $userTable = $('#table-users');
|
||||
var $modalUserAdd = $('#modal-user-add');
|
||||
@ -86,6 +102,27 @@ $(function () {
|
||||
}
|
||||
}
|
||||
|
||||
function updateConfig(config_file, config_content) {
|
||||
$.ajax({
|
||||
url: gridsUrl,
|
||||
data: {
|
||||
update_config : true,
|
||||
config_file: config_file,
|
||||
config_content: config_content
|
||||
},
|
||||
success : function(res){
|
||||
printStatus(
|
||||
res.config_success?'Config Successfully updated!':'An error occured while trying to save the updated config.',
|
||||
res.config_success?'success':'danger',
|
||||
res.config_success?'ok':'warning-sign'
|
||||
);
|
||||
},
|
||||
dataType : 'json',
|
||||
method: 'POST',
|
||||
error: onAjaxError
|
||||
});
|
||||
}
|
||||
|
||||
// ES 2015 so be prudent
|
||||
if (typeof Object.assign == 'function') {
|
||||
var userDateEditable = Object.assign({ type: 'date', placement: 'bottom' }, userEditable);
|
||||
@ -164,7 +201,11 @@ $(function () {
|
||||
{ title: "Pass", field: "user_pass", editable: userEditable },
|
||||
{ title: "Mail", field: "user_mail", editable: userEditable },
|
||||
{ title: "Phone", field: "user_phone", editable: userEditable },
|
||||
{ title: "Online", field: "user_online" },
|
||||
{
|
||||
title: "Online",
|
||||
field: "user_online",
|
||||
formatter : LEDIndicatorFormatter
|
||||
},
|
||||
{
|
||||
title: "Enabled",
|
||||
field: "user_enable",
|
||||
@ -253,19 +294,28 @@ $(function () {
|
||||
},
|
||||
columns: [
|
||||
{ title: "Log ID", field: "log_id" },
|
||||
{ title: "User ID", field: "user_id" },
|
||||
{ title: "Trusted IP", field: "log_trusted_ip" },
|
||||
{ title: "Trusted Port", field: "log_trusted_port" },
|
||||
{ title: "Remote IP", field: "log_remote_ip" },
|
||||
{ title: "Remote Port", field: "log_remote_port" },
|
||||
{ title: "User ID", field: "user_id", filterControl : 'select' },
|
||||
{ title: "Trusted IP", field: "log_trusted_ip", filterControl : 'select' },
|
||||
{ title: "Trusted Port", field: "log_trusted_port", filterControl : 'select' },
|
||||
{ title: "Remote IP", field: "log_remote_ip", filterControl : 'select' },
|
||||
{ title: "Remote Port", field: "log_remote_port", filterControl : 'select' },
|
||||
{ title: "Start Time", field: "log_start_time" },
|
||||
{ title: "End Time", field: "log_end_time" },
|
||||
{ title: "Receveid", field: "log_received" },
|
||||
{ title: "Sent", field: "log_send" }
|
||||
]
|
||||
});
|
||||
|
||||
// watch the config textareas for changes an persist them if a change was made
|
||||
$('textarea').keyup(function(){
|
||||
$('#save-config-btn').removeClass('saved-success hidden').addClass('get-attention');
|
||||
}).change(function(){
|
||||
updateConfig($(this).data('config-file'), $(this).val());
|
||||
$('#save-config-btn').removeClass('get-attention').addClass('saved-success');
|
||||
});
|
||||
|
||||
}); // doc ready end
|
||||
|
||||
// -------------------- HACKS --------------------
|
||||
|
||||
// Autofocus for bootstrap modals
|
||||
|
||||
Loading…
Reference in New Issue
Block a user