243 lines
6.9 KiB
HTML
243 lines
6.9 KiB
HTML
|
|
<!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() {
|
|
ajax({"action":"get-remotes"} );
|
|
});
|
|
|
|
function ajax(action){
|
|
$.ajax({
|
|
type: 'post',
|
|
url: 'ajax',
|
|
data: JSON.stringify(action),
|
|
error:function(msg){
|
|
console.log( 'Error !: (' + msg.responseText + ')' );
|
|
},
|
|
success:function(data){
|
|
if (action["action"] == "get-remotes") {
|
|
refresh(data);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function vpn_restart(pid) {
|
|
if(confirm("are you sure you want to restart this session ?")) {
|
|
ajax({action: 'restart', params: {session: pid}});
|
|
}
|
|
}
|
|
|
|
function vpn_kill(pid) {
|
|
if(confirm("are you sure you want to kill this openvpn client ?")) {
|
|
ajax({action: 'kill', params: {session: pid}});
|
|
}
|
|
}
|
|
|
|
function server_change(pid) {
|
|
ajax({action: 'set-remote', params: {server: $('#server_'+pid).val() , session: pid}});
|
|
}
|
|
|
|
function auth(pid) {
|
|
ajax({action: "auth-user-pass", params:{session: pid,
|
|
user:$('#auth_'+pid+'>input.user').val(),
|
|
password:$('#auth_'+pid+'>input.pass').val(),
|
|
otp:$('#auth_'+pid+'>input.otp').val()
|
|
}});
|
|
}
|
|
|
|
function refresh(data) {
|
|
setTimeout(function(){ ajax({"action":"get-remotes"} )}, 3000);
|
|
if (data["last_change"] == last_change) {
|
|
return;
|
|
}
|
|
last_change = data["last_change"];
|
|
$('#result>tbody').remove();
|
|
$('#result').append('<tbody></ybody>');
|
|
$.each(data, function(index, infos) {
|
|
if (!infos) {
|
|
return;
|
|
} else if (index == "remotes") {
|
|
remotes = {};
|
|
$.each(infos, function(provider, list) {
|
|
remotes[provider]={};
|
|
var keys = [];
|
|
for (var key in list) {
|
|
keys.push(key);
|
|
}
|
|
keys.sort ();
|
|
for (i in keys) {
|
|
remotes[provider][keys[i]]=list[keys[i]];
|
|
}
|
|
});
|
|
} else if (index == "sessions") {
|
|
$.each(infos, function(pid, infos) {
|
|
line = '<tr>';
|
|
line +='<td';
|
|
if(infos['status']=="Need Password") {
|
|
line += ' rowspan="2"';
|
|
}
|
|
line +='>'+infos['identifier']+'</td>';
|
|
line +='<td>'+infos['provider']+'</td>';
|
|
if (possible=remotes[infos['provider']]) {
|
|
line += '<td><select id="server_'+pid+'" onchange="server_change('+pid+')">'
|
|
if (infos['active-vpn']=="") {
|
|
line += '<option value="">----------------</option>'
|
|
}
|
|
$.each(possible, function(name, remote) {
|
|
line += '<option value="'+remote+'"';
|
|
if(remote == infos['active-vpn']) {
|
|
line += ' selected ';
|
|
}
|
|
line += '>'+name+'</option>';
|
|
});
|
|
line+='</select></td>'
|
|
} else {
|
|
line +='<td>'+infos['active-vpn']+'</td>';
|
|
}
|
|
line +='<td>'+infos['status']+'</td>';
|
|
line += '<td>';
|
|
line += '<a href="javascript:vpn_restart('+pid+')"><img width="24" height="24" src="refresh.png"/></a>';
|
|
line += '<a href="javascript:vpn_kill('+pid+')"><img width="24" height="24" src="disconnect.png"/></a></td>';
|
|
line += '</td>\n';
|
|
line += '</tr>\n';
|
|
|
|
if(infos['status'].startsWith("Need")) {
|
|
line +='<tr><td colspan="4">';
|
|
line +='<form id="auth_'+pid+'" action="#" onsubmit="auth('+pid+') ; return false" >';
|
|
if (infos['status'].includes("Password")) {
|
|
line +='<input class="user" placeholder="Enter login" size="15">';
|
|
line +='<input type="password" placeholder="Password" size="15" class="pass">';
|
|
}
|
|
if (infos['status'].includes("OTP")) {
|
|
line +='<input class="otp" placeholder="'+infos["message"]+'" size="15">';
|
|
}
|
|
line +='<input type="submit" value="G0">';
|
|
line +='</form>';
|
|
line +='</td></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> </th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</body>
|
|
</html>
|