working prototype
This commit is contained in:
Xavier Henner
206
web/index.html
Normal file
206
web/index.html
Normal file
@@ -0,0 +1,206 @@
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OpenVPN Manager</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="bootstrap.min.css" />
|
||||
<style>
|
||||
body
|
||||
{
|
||||
padding: 0px 10px 10px 10px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#background
|
||||
{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: bottom right;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.container
|
||||
{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.section
|
||||
{
|
||||
position: relative;
|
||||
width: 930px;
|
||||
padding: 30px 0px 10px 10px;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.section_title
|
||||
{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
padding: 3px 7px 3px 7px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
border-right: 1px solid #cccccc;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
color: #989898;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.alert
|
||||
{
|
||||
float: left;
|
||||
padding-bottom: 14px;
|
||||
margin: 4px 0px 0px 0px;
|
||||
width: 867px;
|
||||
}
|
||||
.btn
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
.btn.active, .btn:active
|
||||
{
|
||||
background-color: rgb(47, 150, 180);
|
||||
color: white;
|
||||
text-shadow: 0px 0px 0px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-style: solid none solid solid;
|
||||
border-width: 1px;
|
||||
border-spacing:0;
|
||||
margin: 1em;
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
|
||||
th {
|
||||
padding: 5px 2em 5px 2em;
|
||||
border-style: solid solid none none;
|
||||
border-width: 1px;
|
||||
text-align: left;
|
||||
font-weight:bold;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 5px 2em 5px 2em;
|
||||
border-style: solid solid none none;
|
||||
border-width: 1px;
|
||||
vertical-align: middle;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
select.interface {
|
||||
width: 5em;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
last_change="";
|
||||
$(function() {
|
||||
server = "localhost:8080";
|
||||
ajax(server, {"action":"get-remotes"} );
|
||||
});
|
||||
|
||||
function ajax(server, action){
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: 'http://'+server+'/ajax',
|
||||
data: JSON.stringify(action),
|
||||
error:function(msg){
|
||||
console.log( 'Error !: (' + msg.responseText + ')' );
|
||||
},
|
||||
success:function(data){
|
||||
if (action["action"] == "get-remotes") {
|
||||
refresh(server, data);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function vpn_restart(pid) {
|
||||
if(confirm("are you sure you want to restart this session ?")) {
|
||||
ajax(server, {action: 'restart', params: {session: pid}});
|
||||
}
|
||||
}
|
||||
|
||||
function vpn_kill(pid) {
|
||||
if(confirm("are you sure you want to kill this openvpn client ?")) {
|
||||
ajax(server, {action: 'kill', params: {session: pid}});
|
||||
}
|
||||
}
|
||||
|
||||
function server_change(pid) {
|
||||
ajax(server, {action: 'set-remote', params: {server: $('#server_'+pid).val() , session: pid}});
|
||||
}
|
||||
|
||||
function refresh(server, data) {
|
||||
setTimeout(function(){ ajax(server, {"action":"get-remotes"} )}, 3000);
|
||||
if (data["last_change"] == last_change) {
|
||||
return;
|
||||
}
|
||||
last_change = data["last_change"];
|
||||
$('#result>tbody').remove();
|
||||
$('#result').append('<tbody></ybody>');
|
||||
remote = []
|
||||
$.each(data, function(index, infos) {
|
||||
if (!infos) {
|
||||
return;
|
||||
} else if (index == "remotes") {
|
||||
remotes = infos;
|
||||
} else if (index == "sessions") {
|
||||
$.each(infos, function(pid, infos) {
|
||||
line = '<tr>';
|
||||
line +='<td>'+infos['identifier']+'</td>';
|
||||
line +='<td>'+infos['provider']+'</td>';
|
||||
if (possible=remotes[infos['provider']]) {
|
||||
possible.sort();
|
||||
line += '<td><select id="server_'+pid+'" onchange="server_change('+pid+')">'
|
||||
if (infos['active-vpn']=="") {
|
||||
line += '<option value="">----------------</option>'
|
||||
}
|
||||
$.each(possible, function(i, remote) {
|
||||
line += '<option value="'+remote+'"';
|
||||
if(remote == infos['active-vpn']) {
|
||||
line += ' selected ';
|
||||
}
|
||||
line += '>'+remote+'</option>';
|
||||
});
|
||||
line+='</select></td>'
|
||||
} else {
|
||||
line +='<td>'+infos['active-vpn']+'</td>';
|
||||
}
|
||||
line +='<td>'+infos['status']+'</td>';
|
||||
|
||||
line +='<td><a href="javascript:vpn_restart('+pid+')">Reload</a></td>';
|
||||
line +='<td><a href="javascript:vpn_kill('+pid+')">Kill</a></td>';
|
||||
line += '</tr>\n';
|
||||
$('#result>tbody').append(line);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>VPN Sessions</h1>
|
||||
<table id="result">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>VPN Identifier</th>
|
||||
<th>Provider</th>
|
||||
<th>VPN Server</th>
|
||||
<th>Status</th>
|
||||
<th colspan="2"> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user