mirror of
https://github.com/tobychui/zoraxy.git
synced 2025-06-03 06:07:20 +02:00
393 lines
18 KiB
HTML
393 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
|
|
<meta charset="UTF-8">
|
|
<meta name="theme-color" content="#4b75ff">
|
|
<link rel="icon" type="image/png" href="img/small_icon.png"/>
|
|
<link rel="stylesheet" href="script/semantic/semantic.min.css">
|
|
<script src="script/jquery-3.6.0.min.js"></script>
|
|
<script src="../script/ao_module.js"></script>
|
|
<script src="script/semantic/semantic.min.js"></script>
|
|
<title>Reverse Proxy</title>
|
|
<style>
|
|
body{
|
|
background-color:white;
|
|
}
|
|
|
|
.functiontab{
|
|
display:none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<br>
|
|
<div class="ui container">
|
|
<h3><img class="ui middle aligned mini image" src="img/desktop_icon.png" style="margin-right: 4px;"> Reverse Proxy Settings</h3>
|
|
<div class="ui divider"></div>
|
|
<div id="errmsg" class="ui red message" style="display: none;"></div>
|
|
<div class="ui stackable grid">
|
|
<div class="four wide column">
|
|
<div id="mainmenu" class="ui secondary vertical pointing menu">
|
|
<a class="item active" tag="status">
|
|
Status
|
|
</a>
|
|
<a class="item" tag="vdir">
|
|
Virtual Directory
|
|
</a>
|
|
<a class="item" tag="subd">
|
|
Subdomain Proxy
|
|
</a>
|
|
<a class="item" tag="rules">
|
|
Create Proxy Rules
|
|
</a>
|
|
<a class="item" tag="setroot">
|
|
Set Proxy Root
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="twelve wide column">
|
|
|
|
|
|
<!-- Status Tab -->
|
|
<div id="status" class="functiontab">
|
|
<div id="serverstatus" class="ui message">
|
|
<h3 class="ui header">
|
|
<i class="power off icon"></i>
|
|
<div class="content">
|
|
<span id="statusTitle">Offline</span>
|
|
<div class="sub header" id="statusText">Reverse proxy server is offline</div>
|
|
</div>
|
|
</h3>
|
|
</div>
|
|
<div class="ui divider"></div>
|
|
<button id="startbtn" class="ui teal button" onclick="startService();">Start Service</button>
|
|
<button id="stopbtn" class="ui red disabled button" onclick="stopService();">Stop Service</button>
|
|
</div>
|
|
|
|
<!-- Virtual Directory Tab -->
|
|
<div id="vdir" class="functiontab">
|
|
<table class="ui celled table">
|
|
<thead>
|
|
<tr>
|
|
<th>Virtual Directory</th>
|
|
<th>Proxy To</th>
|
|
<th>Remove</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="vdirList">
|
|
<tr>
|
|
<td data-label="">test</td>
|
|
<td data-label="">test</td>
|
|
<td data-label=""><button class="ui circular mini red basic button"><i class="remove icon"></i> Remove Proxy</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Subdomain Proxy -->
|
|
<div id="subd" class="functiontab">
|
|
<table class="ui celled table">
|
|
<thead>
|
|
<tr>
|
|
<th>Subdomain</th>
|
|
<th>Proxy To</th>
|
|
<th>Remove</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="subdList">
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Create Rules -->
|
|
<div id="rules" class="functiontab">
|
|
<div class="">
|
|
<h3><i class="ui exchange icon"></i> New Proxy Endpoint</h3>
|
|
<p>You can create a proxy endpoing by subdomain or virtual directories</p>
|
|
<div class="ui form">
|
|
<div class="field">
|
|
<label>Proxy Type</label>
|
|
<div class="ui selection dropdown">
|
|
<input type="hidden" id="ptype" value="subd">
|
|
<i class="dropdown icon"></i>
|
|
<div class="default text">Proxy Type</div>
|
|
<div class="menu">
|
|
<div class="item" data-value="subd">Sub-domain</div>
|
|
<div class="item" data-value="vdir">Virtual Directory</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Subdomain Matching Keyword / Virtual Directory Name</label>
|
|
<input type="text" id="rootname" placeholder="s1">
|
|
<div class="ui message">
|
|
Example of subdomain matching keyword:<br>
|
|
<code>s1.arozos.com</code> <br>(Any access starting with s1.arozos.com will be proxy to the IP address below)<br>
|
|
Example of virtual directory name: <br>
|
|
<code>/s1/home</code> <br>(Any access to {this_server}/s1/ will be proxy to the IP address below)
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>IP Address or Domain Name with port</label>
|
|
<input type="text" id="proxyDomain">
|
|
<small>E.g. 192.168.0.101:8000 or example.com</small>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" id="reqTls">
|
|
<label>Proxy Target require TLS Connection (Unstable)</label>
|
|
</div>
|
|
</div>
|
|
<button class="ui teal button" onclick="newProxyEndpoint();">Create Proxy Endpoint</button>
|
|
</div>
|
|
<div class="ui green message" id="proxyaddSucc" style="display:none">
|
|
<i class="ui checkmark icon"></i> Proxy Endpoint Added
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Set proxy root -->
|
|
<div id="setroot" class="functiontab">
|
|
<h3><i class="ui home icon"></i> Set Proxy Root</h3>
|
|
<p>For all routing not found in the proxy rule, will be redirected to the proxy root server.</p>
|
|
<div class="ui form">
|
|
<div class="field">
|
|
<label>Proxy Root</label>
|
|
<input type="text" id="proxyRoot">
|
|
<small>E.g. localhost:8080</small>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" id="rootReqTLS">
|
|
<label>Root require TLS Connection (Not Recommended)</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<button class="ui teal button" onclick="setProxyRoot()"><i class="home icon" ></i> Set Proxy Root</button>
|
|
<div class="ui green message" id="ProxyRootUpdate" style="display:none">
|
|
<i class="ui checkmark icon"></i> Proxy Root Updated
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br><br>
|
|
<div class="ui divider"></div>
|
|
<div class="ui container" style="color: grey; font-size: 90%">
|
|
<p>Reverse Proxy Subservice. CopyRight imuslab, Licensed under MIT</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
initRPStaste();
|
|
$("#status").slideDown('fast');
|
|
$(".ui.dropdown").dropdown();
|
|
$(".ui.checkbox").checkbox();
|
|
|
|
$("#mainmenu").find(".item").each(function(){
|
|
$(this).on("click", function(e){
|
|
$("#mainmenu").find(".item").removeClass("active");
|
|
$(this).addClass("active");
|
|
let targetOpeningTab = $(this).attr("tag");
|
|
$(".functiontab").hide();
|
|
$("#" + targetOpeningTab).slideDown('fast');
|
|
});
|
|
});
|
|
|
|
function initRPStaste(){
|
|
$.get("status", function(data){
|
|
if (data.Running == true){
|
|
$("#startbtn").addClass("disabled");
|
|
$("#stopbtn").removeClass("disabled");
|
|
$("#serverstatus").addClass("green");
|
|
$("#statusTitle").text("Online");
|
|
$("#statusText").text("Reverse proxying request on port: " + data.ListenPort);
|
|
}else{
|
|
$("#startbtn").removeClass("disabled");
|
|
$("#stopbtn").addClass("disabled");
|
|
$("#statusTitle").text("Offline");
|
|
$("#statusText").text("Reverse proxy server is offline");
|
|
$("#serverstatus").removeClass("green");
|
|
}
|
|
});
|
|
}
|
|
|
|
function deleteEndpoint(ptype, epoint){
|
|
if (confirm("Confirm remove proxy for :" + epoint + " (type: " + ptype + ")?")){
|
|
$.ajax({
|
|
url: "./del",
|
|
data: {ep: epoint, ptype: ptype},
|
|
success: function(){
|
|
listVdirs();
|
|
listSubd();
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
function startService(){
|
|
$.post("enable", {enable: true}, function(data){
|
|
if (data.error != undefined){
|
|
errmsg(data.error);
|
|
}
|
|
initRPStaste();
|
|
});
|
|
}
|
|
|
|
function stopService(){
|
|
$.post("enable", {enable: false}, function(data){
|
|
if (data.error != undefined){
|
|
errmsg(data.error);
|
|
}
|
|
initRPStaste();
|
|
});
|
|
}
|
|
|
|
//Virtual directories functions
|
|
listVdirs();
|
|
function listVdirs(){
|
|
$("#vdirList").html(``);
|
|
$.get("list?type=vdir", function(data){
|
|
if (data.error !== undefined){
|
|
$("#vdirList").append(`<tr>
|
|
<td data-label="" colspan="3"><i class="remove icon"></i> ${data.error}</td>
|
|
</tr>`);
|
|
}else if (data.length == 0){
|
|
$("#vdirList").append(`<tr>
|
|
<td data-label="" colspan="3"><i class="question icon"></i> No Virtual Directory Record</td>
|
|
</tr>`);
|
|
}else{
|
|
data.forEach(vdir => {
|
|
let tlsIcon = "";
|
|
if (vdir.RequireTLS){
|
|
tlsIcon = `<i class="lock icon"></i>`;
|
|
}
|
|
$("#vdirList").append(`<tr>
|
|
<td data-label="">${vdir.Root}</td>
|
|
<td data-label="">${vdir.Domain} ${tlsIcon}</td>
|
|
<td data-label=""><button class="ui circular mini red basic button" onclick='deleteEndpoint("subd","${subd.Root}")'><i class="remove icon"></i> Remove Vdir</button></td>
|
|
</tr>`);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
listSubd();
|
|
function listSubd(){
|
|
$("#subdList").html(``);
|
|
$.get("list?type=subd", function(data){
|
|
if (data.error !== undefined){
|
|
$("#subdList").append(`<tr>
|
|
<td data-label="" colspan="3"><i class="remove icon"></i> ${data.error}</td>
|
|
</tr>`);
|
|
}else if (data.length == 0){
|
|
$("#subdList").append(`<tr>
|
|
<td data-label="" colspan="3"><i class="question icon"></i> No Subdomain Proxy Record</td>
|
|
</tr>`);
|
|
}else{
|
|
data.forEach(subd => {
|
|
let tlsIcon = "";
|
|
if (subd.RequireTLS){
|
|
tlsIcon = `<i class="lock icon"></i>`;
|
|
}
|
|
$("#subdList").append(`<tr>
|
|
<td data-label="">${subd.MatchingDomain}</td>
|
|
<td data-label="">${subd.Domain} ${tlsIcon}</td>
|
|
<td data-label=""><button class="ui circular mini red basic button" onclick='deleteEndpoint("subd","${subd.MatchingDomain}")'><i class="remove icon"></i> Remove Subd</button></td>
|
|
</tr>`);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
//New Proxy Endpoint
|
|
function newProxyEndpoint(){
|
|
var type = $("#ptype").val();
|
|
var rootname = $("#rootname").val();
|
|
var proxyDomain = $("#proxyDomain").val();
|
|
var useTLS = $("#reqTls")[0].checked;
|
|
|
|
if (rootname.trim() == ""){
|
|
$("#rootname").parent().addClass("error");
|
|
return
|
|
}else{
|
|
$("#rootname").parent().removeClass("error");
|
|
}
|
|
|
|
if (proxyDomain.trim() == ""){
|
|
$("#proxyDomain").parent().addClass("error");
|
|
return
|
|
}else{
|
|
$("#proxyDomain").parent().removeClass("error");
|
|
}
|
|
|
|
//Create the endpoint by calling add
|
|
$.ajax({
|
|
url: "./add",
|
|
data: {type: type, rootname: rootname, tls: useTLS, ep: proxyDomain},
|
|
success: function(data){
|
|
if (data.error != undefined){
|
|
alert(data.error);
|
|
}else{
|
|
//OK
|
|
listVdirs();
|
|
listSubd();
|
|
$("#proxyaddSucc").stop().slideDown('fast').delay(3000).slideUp('fast');
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function setProxyRoot(){
|
|
var newpr = $("#proxyRoot").val();
|
|
if (newpr.trim() == ""){
|
|
$("#proxyRoot").parent().addClass('error');
|
|
return
|
|
}else{
|
|
$("#proxyRoot").parent().removeClass('error');
|
|
}
|
|
|
|
var rootReqTls = $("#rootReqTLS")[0].checked;
|
|
|
|
//Create the endpoint by calling add
|
|
$.ajax({
|
|
url: "./add",
|
|
data: {"type": "root", tls: rootReqTls, ep: newpr},
|
|
success: function(data){
|
|
if (data.error != undefined){
|
|
alert(data.error);
|
|
}else{
|
|
//OK
|
|
initRootInfo();
|
|
$("#ProxyRootUpdate").stop().slideDown('fast').delay(3000).slideUp('fast');
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
initRootInfo();
|
|
function initRootInfo(){
|
|
$.get("list?type=root", function(data){
|
|
if (data == null){
|
|
|
|
}else{
|
|
$("#proxyRoot").val(data.Domain);
|
|
}
|
|
});
|
|
}
|
|
|
|
function errmsg(message){
|
|
$("#errmsg").html(`<i class="red remove icon"></i> ${message}`);
|
|
$("#errmsg").slideDown('fast').delay(5000).slideUp('fast');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |