wmantly/vpn-p2p
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Gui work

Browse Source
This commit is contained in:
William Mantly 2019-12-20 13:40:53 -05:00
parent 9bf224a8cb
commit abb3689603
Signed by: wmantly
GPG Key ID: E1EEC7650BA97160
3 changed files with 156 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
nodejs/public/js/layout.js
View File

@ -13,9 +13,12 @@ app.api = (function(app){
data: JSON.stringify(data), data: JSON.stringify(data),
contentType: "application/json; charset=utf-8", contentType: "application/json; charset=utf-8",
dataType: "json", dataType: "json",
success: callack, complete: function(res, text){
error: function(info, error, type){ callack(
callack(JSON.parse(info.responseText), info) text !== 'success' ? res.statusText : null,
JSON.parse(res.responseText),
res.status
)
} }
}); });
} }
@ -29,8 +32,13 @@ app.api = (function(app){
}, },
contentType: "application/json; charset=utf-8", contentType: "application/json; charset=utf-8",
dataType: "json", dataType: "json",
success: callack, complete: function(res, text){
error: callack callack(
text !== 'success' ? res.statusText : null,
JSON.parse(res.responseText),
res.status
)
}
}); });
} }
@ -48,8 +56,8 @@ app.auth = (function(app) {
function isLoggedIn(callack){ function isLoggedIn(callack){
if(getToken()){ if(getToken()){
return app.api.get('users/me', function(data){ return app.api.get('users/me', function(error, data){
return callack(null, data.username); return callack(error, data.username);
}) })
}else{ }else{
callack(false, false); callack(false, false);
@ -57,11 +65,11 @@ app.auth = (function(app) {
} }
function logIn(args, callack){ function logIn(args, callack){
app.api.post('auth/login', args, function(data){ app.api.post('auth/login', args, function(error, data){
if(data.login){ if(data.login){
setToken(data.token); setToken(data.token);
} }
callack(!data.token, !!data.token); callack(error, !!data.token);
}); });
} }
@ -75,21 +83,47 @@ app.auth = (function(app) {
app.users = (function(app){ app.users = (function(app){
function createInvite(callack){ function createInvite(callack){
app.api.post('users/invite', function(data){ app.api.post('users/invite', function(error, data, status){
callack(error, data.token);
callack(!data.token, data.token);
}); });
} }
function consumeInvite(args){ function consumeInvite(args){
app.api.post('/auth/invite/'+args.token, args, function(data){ app.api.post('/auth/invite/'+args.token, args, function(error, data){
if(data.token){ if(data.token){
app.auth.setToken(data.token) app.auth.setToken(data.token)
return callack(null, true) return callack(null, true)
} }
callack(error)
}); });
} }
})(app); })(app);
app.hosts = (function(app){
function list(callack){
app.api.get('hosts/?detail=true', function(error, data){
callack(error, data.hosts)
});
}
function get(host, callack){
app.api.get('hosts/' + host, function(error, data){
callack(error, data)
});
}
function add(args, callack){
app.api.post('hosts/', args, function(error, data){
callack(error, data);
});
}
return {
list: list,
get: get,
add: add
}
})(app);
app.util = (function(app){ app.util = (function(app){
function getUrlParameter(name) { function getUrlParameter(name) {
@ -99,6 +133,21 @@ app.util = (function(app){
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}; };
function actionMessage(message, $target){
$target = $target || $('div.actionMessage');
if($target.html() === message) return;
if($target.html()){
$target.slideUp('fast', function(){
$target.html('')
if(message) actionMessage(message);
})
return;
}else{
$target.html(message).slideDown('fast');
}
}
$.fn.serializeObject = function() { $.fn.serializeObject = function() {
var var
@ -119,21 +168,11 @@ app.util = (function(app){
}; };
return { return {
getUrlParameter: getUrlParameter getUrlParameter: getUrlParameter,
actionMessage: actionMessage
} }
})(app); })(app);
// app.hosts = (function(app){
// var hosts = []
// function getHost(callack){
// app.api.get('hosts/?detail=true', function(data){
// hosts = data.hosts
// callack(hosts)
// });
// }
// })(app);
$( document ).ready( function () { $( document ).ready( function () {

137
nodejs/views/hosts.ejs
View File

@ -17,51 +17,61 @@
function editHost(btn){ function editHost(btn){
var btn = $(btn); var btn = $(btn);
currentEditHost = btn.data('host'); currentEditHost = btn.data('host');
$.getJSON('api/' + btn.data('host'), function( data ) { $('.editWindow').slideDown('fast');
$('.editWindow').slideDown('fast'); $('.editWindow .panel-body').slideDown('fast');
$('.editWindow .panel-body').slideDown('fast'); $('.editWindow .panel-title .pull-left').html("Edit "+btn.data('host'))
$('.editWindow .panel-title .pull-left').html("Edit "+btn.data('host'))
$.each( data, function( key, val ) { $('div.editWindow .panel-body span').html($('#addHost').html())
$(".editWindow input[name='" + key + "']").attr('value', val); $('div.editWindow .panel-body span button').remove()
app.hosts.get(currentEditHost, function(error, data){
console.log(data)
$.each( data.results, function( key, val ) {
$(".editWindow input[name='" + key + "']").val(val);
}); });
$("input[name='old_host']").attr('value', btn.data('host'));
}); });
// $.getJSON('api/hosts/' + btn.data('host'), function( data ) {
// $("input[name='old_host']").attr('value', btn.data('host'));
// });
} }
function tableAJAX(actionMessage){ function tableAJAX(actionMessage){
$('#tableAJAX').html('').hide(); $('#tableAJAX').html('').hide();
$('div.actionMessage').html('Refreshing host list...').show(); app.util.actionMessage('')
$.get('hosts' ,function(data){
var c = 0;
$.each( data, function( key, value ) {
if(currentEditHost == value.host){c++}
host_row = ich.rowTemplate(value);
$('#tableAJAX').append(host_row);
});
$('#tableAJAX').fadeIn('slow'); app.hosts.list(function(err, data){
if(c == 0){//host is not in list if(err) return app.util.actionMessage(err);
if(currentEditHost){ if(data){
$('div.editWindow').slideUp('fast'); $.each(data, function( key, value ) {
actionMessage = 'Host, <i>'+ currentEditHost+' gone! Editor sleeping...'; host_row = ich.rowTemplate(value);
currentEditHost = null; $('#tableAJAX').append(host_row);
} });
} $('#tableAJAX').fadeIn('slow');
if(!actionMessage){
$('div.actionMessage').slideUp('fast');
}else{ }else{
$('div.actionMessage').html(actionMessage).slideDown('fast'); app.util.actionMessage('No hosts...')
} }
}); });
} }
/*$.validateSettings(
});*/
$(document).ready(function(){ $(document).ready(function(){
tableAJAX(); //populate the table tableAJAX(); //populate the table
setInterval(tableAJAX, 30000); setInterval(tableAJAX, 30000);
$('#addHost').on('submit', function(){
event.preventDefault();
$form = $(this);
app.util.actionMessage('')
if($form.attr('isValid') === 'true'){
app.hosts.add($form.serializeObject(), function(error, data){
app.util.actionMessage(data.message || 'Error!');
if(!error) $form.trigger('reset');
})
}
});
}); });
</script> </script>
<div class="row" style="display:none"> <div class="row" style="display:none">
@ -79,21 +89,9 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
<form action="api" evalAJAX="$('div.editWindow').slideUp();currentEditHost = null;"> <form action="api" evalAJAX="$('div.editWindow').slideUp();currentEditHost = null;">
<input type="hidden" name="old_host" value="" /> <span></span>
<div class="form-group"> <button type="button" class="btn btn-danger">Update</button>
<label class="control-label">Host</label> <button class="btn btn-link" type="reset">Cancel</button>
<input type="text" class="form-control" name="host" value="" validate="host:3"/>
</div>
<div class="form-group">
<label class="control-label">Mapped IP</label>
<input type="text" class="form-control" name="ip" value=""/>
</div>
<div class="form-group">
<label class="control-label">Last Updated</label>
<input type="text" class="form-control" name="updated" value="" />
</div>
<button type="button" onclick="formAJAX(this)" class="btn btn-danger">Update</button>
<button class="btn btn-link" type="reset" onclick="$('div.editWindow').slideUp();">Cancel</button>
</form> </form>
</div> </div>
</div> </div>
@ -108,17 +106,58 @@
</div> </div>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<form action="api" evalAJAX="$form.trigger('reset')" valRules=''> <form id="addHost" onsubmit="$(this).validate()">
<div class="form-group">
<label class="control-label">Incoming SSL</label>
<div class="radio">
<label>
<input type="radio" name="forceSSL" id="forceSSL1" value="true" checked>
Force incoming connections over HTTPS <b>Recommended</b>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="forceSSL" id="forceSSL2" value="false">
Allow use of both HTTP and HTTPS
</label>
</div>
</div>
<div class="form-group"> <div class="form-group">
<label class="control-label">Hostname</label> <label class="control-label">Hostname</label>
<input type="text" name="host" class="form-control" placeholder="ex: proxy.cloud-ops.net" validate="host:3" > <input type="text" name="host" class="form-control" placeholder="ex: proxy.cloud-ops.net" validate="host:3" >
</div> </div>
<hr />
<div class="form-group"> <div class="form-group">
<label class="control-label">IP</label> <label class="control-label">Target IP or Host Name</label>
<input type="text" onkeyup="$(this).validate()" name="ip" class="form-control" placeholder="ex: 10.10.10.10" validate="ip:7" /> <input type="text" name="ip" class="form-control" placeholder="ex: 10.10.10.10" />
</div>
<div class="form-group">
<label class="control-label">Target TCP Port</label>
<input type="number" name="targetPort" class="form-control" value="80" min="0" max="65535" />
</div>
<div class="form-group">
<label class="control-label">Target SSL</label>
<div class="radio">
<label>
<input type="radio" name="targetSSL" id="targetSSL1" value="true">
Proxt to HTTPS
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="targetSSL" id="targetSSL2" value="false" checked>
Proxy to HTTP <b>Recommended</b>
</label>
</div>
</div> </div>
<button type="button" onclick="formAJAX(this)" class="btn btn-default">Add</button> <button type="submit" class="btn btn-default">Add</button>
</form> </form>
</div> </div>
</div> </div>

23
nodejs/views/login.ejs
View File

@ -1,40 +1,25 @@
<%- include('top') %> <%- include('top') %>
<script type="text/javascript"> <script type="text/javascript">
function actionMessage(message, $target){
$target = $target || $('div.actionMessage');
if($target.html() === message) return;
if($target.html()){
$target.slideUp('fast', function(){
$target.html('')
if(message) actionMessage(message);
})
return;
}else{
$target.html(message).slideDown('fast');
}
}
$(document).ready(function(){ $(document).ready(function(){
$( "form[action='login']" ).submit(function( event ) { $( "form[action='login']" ).submit(function( event ) {
$form = $(this); $form = $(this);
actionMessage('') app.util.actionMessage('')
if($form.attr('isValid') === 'true'){ if($form.attr('isValid') === 'true'){
app.auth.logIn($form.serializeObject(), function(error, data){ app.auth.logIn($form.serializeObject(), function(error, data){
if(data){ if(data){
actionMessage('Login successful!'); app.util.actionMessage('Login successful!');
window.location.href = app.util.getUrlParameter('redirect') || '/hosts/'; window.location.href = app.util.getUrlParameter('redirect') || '/hosts/';
}else{ }else{
actionMessage('Login Failed, please try again'); app.util.actionMessage('Login Failed, please try again');
} }
}); });
}else{ }else{
actionMessage('Please fix the errors bellow!') app.util.actionMessage('Please fix the errors bellow!')
} }
event.preventDefault(); event.preventDefault();
}); });