Files
proxy/nodejs/views/hosts.ejs
T
2024-07-30 20:47:46 -04:00

319 lines
8.4 KiB
Plaintext
Executable File

<%- include('top') %>
<script type="text/javascript">
// Require login to see this page.
app.auth.forceLogin()
</script>
<style type="text/css">
label.control-label{
font-weight: bold;
margin-bottom: 1px;
}
.card-title{
font-weight: bold;
}
div.editWindow{
margin-bottom: 1em;
}
</style>
<script type="text/javascript">
function parseHostRow(host) {
host['updated_on_text'] = moment(host['updated_on'], "x").fromNow();
host['targetssl_text'] = host['targetssl'] ? 'https://' : 'http://';
host['forcessl_text'] = host['forcessl'] ? 'https://' : 'http://';
return host;
}
function populateHosts(){
app.host.list(function(error, res){
if(error) return app.util.actionMessage(error, $.scope.hosts.$this, 'danger');
for(let host of res){
$.scope.hosts.push(parseHostRow(host));
}
$.scope.hosts.__setPut(function($el, item, list){
$el.addClass('bg-success');
$el.fadeIn(1000, function(){
$el.removeClass('bg-success');
});
});
});
}
function cancleHostEdit(){
$('#hostsTable').find('tr').each(function(idx, el){
console.log('here?')
$(el).removeClass('table-warning');
});
$('.editWindow').slideUp('fast');
}
function editHost(btn, host){
cancleHostEdit();
$(btn).closest('tr').addClass('table-warning');
$('.editWindow .card-title').html("Edit "+ host);
$('div.editWindow .card-body span').html($('#addHost').html());
$('div.editWindow .card-body span button').remove();
$(".editWindow input[name='edit_host']").val(host);
$('.editWindow').slideDown('fast');
app.host.get(host, function(error, data){
$.each( data.results, function( key, value ) {
if(typeof value == "boolean"){
$(".editWindow #"+ key +"-"+ value).prop('checked', true)
}else{
$(".editWindow input[name='" + key + "']").val(value);
}
});
});
};
function deleteHost(host){
app.host.remove({host: host}, function(err, data){
// app.util.actionMessage(`Host ${host} deleted!`, $.scope.hosts.$this, 'danger');
$.scope.hosts.remove(host);
});
}
$(document).ready(function(){
populateHosts(); //populate the table
$.scope.hosts.__setTake(function($el, item, list){
$el.addClass('bg-danger');
$el.fadeOut(1000, function(){
$el.remove()
});
});
$('form.addHost').on('submit', function(){
event.preventDefault();
$form = $(this);
var action = $($form.find('button[type="submit"]')[0]).data('type');
app.util.actionMessage('', $form);
if($form.attr('isValid') === 'true'){
var formdata = $form.serializeObject();
if(formdata.targetPort) formdata.targetPort = Number(formdata.targetPort);
if(formdata.targetssl) formdata.targetssl = formdata.targetssl == 'true' ? true : false;
if(formdata.forcessl) formdata.forcessl = formdata.forcessl == 'true' ? true : false;
app.host[action](formdata, function(error, data){
if(error){
app.util.actionMessage(error + data.message, $form, 'danger');
return;
}
if($.scope.hosts.indexOf(data.__requestedHost) >= 0){
$.scope.hosts.update(data.__requestedHost, parseHostRow(data));
}else{
$.scope.hosts.splice(0,0, parseHostRow(data))
}
if(action == 'edit') $('.editWindow').slideUp('fast');
$form.trigger('reset');
})
}
});
});
</script>
<div class="row" style="display:none">
<div class="col col-md-12 col-lg-4 col-xl-3 col-xxl-2">
<!--
left column
-->
<div class="card shadow-lg editWindow" style="display:none">
<!--
Edit host card
-->
<div class="card-header text-center bg-warning">
<span class="card-icon float-start">
<i class="fa-solid fa-pencil"></i>
</span>
<span class="card-title">
</span>
<span class="float-end">
<i class="fa-solid fa-circle-minus"></i>
<i class="fa-solid fa-circle-xmark" onclick="cancleHostEdit()"></i>
</span>
</div>
<div class="card-body">
<form class="addHost" onsubmit="$(this).validate()">
<span></span>
<input type="hidden" name="edit_host" />
<button type="submit" data-type="edit" class="btn btn-warning">
<i class="fa-solid fa-pencil"></i>
Update
</button>
<button class="btn btn-secondary" type="reset" onclick="cancleHostEdit()">
<i class="fa-solid fa-ban"></i>
Cancel
</button>
</form>
</div>
</div>
<div class="card shadow-lg">
<!--
Add new host card
-->
<div class="card-header text-center">
<span class="card-icon float-start">
<i class="fa-solid fa-plus"></i>
</span>
<span class="card-title">
New Entry
</span>
<span class="float-end">
<i class="fa-solid fa-circle-minus"></i>
</span>
</div>
<div class="card-header actionMessage" style="display:none"></div>
<div class="card-body">
<form class="addHost" 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="forcessl-true" value="true" checked>
Force incoming connections over HTTPS <b>Recommended</b>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="forcessl" id="forcessl-false" value="false">
Allow use of both HTTP and HTTPS
</label>
</div>
</div>
<div class="form-group">
<label class="control-label">Incoming Host Name</label>
<input type="text" name="host" class="form-control" placeholder="ex: proxy.cloud-ops.net" validate=":3" >
</div>
<div class="form-group">
<label class="control-label">Target IP or Host Name</label>
<input type="text" name="ip" class="form-control" placeholder="ex: 10.10.10.10" validate=":3" />
</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="targetssl-true" value="true">
Proxy to HTTPS
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="targetssl" id="targetssl-false" value="false" checked>
Proxy to HTTP <b>Recommended</b>
</label>
</div>
</div>
<hr />
<button type="submit" data-type="add" class="btn btn-success">
<i class="fa-solid fa-plus"></i>
Add
</button>
</form>
</div>
</div>
</div>
<div class="col col-md-12 col-lg-8 col-xl-9 col-xxl-10">
<!--
Right column
-->
<div class="card shadow-lg">
<!--
List current hosts
-->
<div class="card-header text-center">
<span class="card-icon float-start">
<i class="fa-solid fa-network-wired"></i>
</span>
<span class="card-title">
Proxy List
</span>
<span class="float-end">
<i class="fa-solid fa-circle-minus"></i>
</span>
</div>
<div class="card-header actionMessage" style="display:none"></div>
<table class="card-body table table-striped" style="margin-bottom:0">
<thead>
<th>
Host Name
</th>
<th>
target
</th>
<th class="hidden-xs">
Updated
</th>
<th>
Actions
</th>
</thead>
<tbody id="hostsTable">
<tr action="api" jq-repeat="hosts" jq-repeat-index='host' style="display:none">
<td>
<a target="_blank" href="{{ forcessl_text }}{{ host }}">
{{{ forcessl_text }}}{{ host }}
</a>
</td>
<td>
{{{ targetssl_text }}}{{ ip }}:{{ targetPort }}
</td>
<td class="hidden-xs momentFromNow" data-date="{{ updated_on }}">
{{ updated_on_text }}
</td>
<td>
<div class="btn-group">
<!-- <button type="button" class="btn btn-info">
<i class="fa-brands fa-expeditedssl"></i>
Cert
</button> -->
<button type="button" onclick="editHost(this, '{{ host }}');" class="btn btn-sm btn-warning">
<i class="fa-solid fa-pencil"></i> Edit
</button>
<button type="button" onclick="deleteHost('{{ host }}')" class="btn btn-sm btn-danger">
<i class="fa-solid fa-trash-can"></i>
Delete
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<%- include('bottom') %>