mirror of
https://github.com/tobychui/zoraxy.git
synced 2025-08-10 15:17:51 +02:00
Added tour for basic operations
- added static website setup tour - added subdomain setup tour
This commit is contained in:
Toby Chui
@@ -348,6 +348,20 @@
|
||||
`);
|
||||
}else if (datatype == "inbound"){
|
||||
let originalContent = $(column).html();
|
||||
|
||||
//Check if this host is covered within one of the certificates. If not, show the icon
|
||||
let domainIsCovered = true;
|
||||
let domains = [payload.RootOrMatchingDomain]; //Domain for getting certificate if needed
|
||||
for (var i = 0; i < payload.MatchingDomainAlias.length; i++){
|
||||
let thisAliasName = payload.MatchingDomainAlias[i];
|
||||
domains.push(thisAliasName);
|
||||
}
|
||||
if (true){
|
||||
domainIsCovered = false;
|
||||
}
|
||||
//encode the domain to DOM
|
||||
let certificateDomains = encodeURIComponent(JSON.stringify(domains));
|
||||
|
||||
column.empty().append(`${originalContent}
|
||||
<div class="ui divider"></div>
|
||||
<div class="ui checkbox" style="margin-top: 0.4em;">
|
||||
@@ -355,10 +369,11 @@
|
||||
<label>Allow plain HTTP access<br>
|
||||
<small>Allow inbound connections without TLS/SSL</small></label>
|
||||
</div><br>
|
||||
<button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editAliasHostnames('${uuid}');"><i class=" blue at icon"></i> Alias</button>
|
||||
<button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editAccessRule('${uuid}');"><i class="ui filter icon"></i> Access Rule</button>
|
||||
|
||||
<button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editAliasHostnames('${uuid}');"><i class=" blue at icon"></i> Alias</button>
|
||||
<button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editAccessRule('${uuid}');"><i class="ui filter icon"></i> Access Rule</button>
|
||||
<button class="ui basic compact tiny ${domainIsCovered?"disabled":""} button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="requestCertificateForExistingHost('${uuid}', '${certificateDomains}');"><i class="green lock icon"></i> Get Certificate</button>
|
||||
`);
|
||||
|
||||
|
||||
$(".hostAccessRuleSelector").dropdown();
|
||||
}else{
|
||||
@@ -517,6 +532,15 @@
|
||||
})
|
||||
}
|
||||
|
||||
/*
|
||||
Certificate Shortcut
|
||||
*/
|
||||
|
||||
function requestCertificateForExistingHost(hostUUID, RootAndAliasDomains){
|
||||
RootAndAliasDomains = JSON.parse(decodeURIComponent(RootAndAliasDomains))
|
||||
alert(RootAndAliasDomains.join(", "))
|
||||
}
|
||||
|
||||
//Bind on tab switch events
|
||||
tabSwitchEventBind["httprp"] = function(){
|
||||
listProxyEndpoints();
|
||||
|
||||
77
src/web/components/quickstart.html
Normal file
77
src/web/components/quickstart.html
Normal file
@@ -0,0 +1,77 @@
|
||||
|
||||
<div id="quickstart" class="standardContainer">
|
||||
<div class="ui container">
|
||||
<h1 class="ui header">
|
||||
<img src="img/res/1F387.png">
|
||||
<div class="content">
|
||||
Welcome to Zoraxy!
|
||||
<div class="sub header">What services are you planning to setup today?</div>
|
||||
</div>
|
||||
</h1>
|
||||
<br>
|
||||
<div class="ui stackable equal width grid">
|
||||
<div class="column">
|
||||
<div class="serviceOption homepage" name="homepage">
|
||||
<div class="titleWrapper">
|
||||
<p>Basic Homepage</p>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
<p>Host a static homepage with Zoraxy and point your domain name to your web server.</p>
|
||||
<img class="themebackground ui small image" src="img/res/1F310.png">
|
||||
<div class="activeOption">
|
||||
<i class="ui white huge circle check icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="serviceOption subdomain" name="subdomain">
|
||||
<div class="titleWrapper">
|
||||
<p>Sub-domains Routing</p>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
<p>Add and handle traffic from your subdomains and point them to a dedicated web services somewhere else.</p>
|
||||
<img class="themebackground ui small image" src="img/res/1F500.png">
|
||||
<div class="activeOption">
|
||||
<i class="ui white huge circle check icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="serviceOption tls" name="tls">
|
||||
<div class="titleWrapper">
|
||||
<p>HTTPS Green Lock(s)</p>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
<p>Turn your unsafe HTTP website into HTTPS using free certificate from public certificate authorities organizations.</p>
|
||||
<img class="themebackground ui small image" src="img/res/1F512.png">
|
||||
<div class="activeOption">
|
||||
<i class="ui white huge circle check icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
<div style="width: 100%;" align="center">
|
||||
<button onclick="startQuickStartTour();" class="ui finished button quickstartControlButton">
|
||||
Start Walkthrough
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
var currentQuickSetupClass = "";
|
||||
var currentQuickSetupTourStep = 0;
|
||||
//For tour logic, see quicksetup.js
|
||||
|
||||
|
||||
//Bind selecting events to serviceOption
|
||||
$("#quickstart .serviceOption").on("click", function(data){
|
||||
$(".serviceOption.active").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
let tourType = $(this).attr("name");
|
||||
currentQuickSetupClass = tourType;
|
||||
});
|
||||
|
||||
</script>
|
||||
<script src="script/quicksetup.js"></script>
|
||||
@@ -30,12 +30,12 @@
|
||||
<h2>New Proxy Rule</h2>
|
||||
<p>You can add more proxy rules to support more site via domain / subdomains</p>
|
||||
<div class="ui form">
|
||||
<div class="field">
|
||||
<div class="field" tourstep="matchingkeyword">
|
||||
<label>Matching Keyword / Domain</label>
|
||||
<input type="text" id="rootname" placeholder="mydomain.com">
|
||||
<small>Support subdomain and wildcard, e.g. s1.mydomain.com or *.test.mydomain.com. Use comma (,) for alias hostnames. </small>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field" tourstep="targetdomain">
|
||||
<label>Target IP Address or Domain Name with port</label>
|
||||
<input type="text" id="proxyDomain" onchange="autoFillTargetTLS(this);">
|
||||
<small>e.g. 192.168.0.101:8000 or example.com</small>
|
||||
@@ -43,7 +43,7 @@
|
||||
<div class="field dockerOptimizations" style="display:none;">
|
||||
<button style="margin-top: -2em;" class="ui basic small button" onclick="openDockerContainersList();"><i class="blue docker icon"></i> Pick from Docker Containers</button>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field" tourstep="requireTLS">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" id="reqTls">
|
||||
<label>Proxy Target require TLS Connection <br><small>(i.e. Your proxy target starts with https://)</small></label>
|
||||
@@ -67,7 +67,7 @@
|
||||
<i class="ui green lock icon"></i>
|
||||
Security
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field" tourstep="skipTLSValidation">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" id="skipTLSValidation">
|
||||
<label>Ignore TLS/SSL Verification Error<br><small>For targets that is using self-signed, expired certificate (Not Recommended)</small></label>
|
||||
@@ -154,7 +154,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<button class="ui basic button" onclick="newProxyEndpoint();"><i class="green add icon"></i> Create Endpoint</button>
|
||||
<div tourstep="newProxyRule" style="display: inline-block;">
|
||||
<button class="ui basic button" onclick="newProxyEndpoint();"><i class="green add icon"></i> Create Endpoint</button>
|
||||
</div>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -53,8 +53,10 @@
|
||||
</div>
|
||||
<div class="standardContainer" style="padding-bottom: 0 !important;">
|
||||
<!-- Power Buttons-->
|
||||
<button id="startbtn" class="ui basic button" onclick="startService();"><i class="ui green arrow alternate circle up icon"></i> Start Service</button>
|
||||
<button id="stopbtn" class="ui basic notloopbackOnly disabled button" onclick="stopService();"><i class="ui red minus circle icon"></i> Stop Service</button>
|
||||
<div class="poweroptions" style="display:inline-block;">
|
||||
<button id="startbtn" class="ui basic button" onclick="startService();"><i class="ui green arrow alternate circle up icon"></i> Start Service</button>
|
||||
<button id="stopbtn" class="ui basic notloopbackOnly disabled button" onclick="stopService();"><i class="ui red minus circle icon"></i> Stop Service</button>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
<h4>Network Status</h4>
|
||||
<p>Overall Network I/O in Current Host Server</p>
|
||||
|
||||
@@ -13,34 +13,35 @@
|
||||
</div>
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<h3>Web Server Settings</h3>
|
||||
<div class="ui form">
|
||||
<div class="inline field">
|
||||
<div class="ui toggle checkbox webservRootDisabled">
|
||||
<input id="webserv_enable" type="checkbox" class="hidden">
|
||||
<label>Enable Static Web Server</label>
|
||||
<div>
|
||||
<h3>Web Server Settings</h3>
|
||||
<div class="ui form">
|
||||
<div class="inline field">
|
||||
<div class="ui toggle checkbox webservRootDisabled">
|
||||
<input id="webserv_enable" type="checkbox" class="hidden">
|
||||
<label>Enable Static Web Server</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline field">
|
||||
<div class="ui toggle checkbox">
|
||||
<input id="webserv_enableDirList" type="checkbox" class="hidden">
|
||||
<label>Enable Directory Listing</label>
|
||||
<small>If this folder do not contains any index files, list the directory of this folder.</small>
|
||||
<div class="inline field">
|
||||
<div class="ui toggle checkbox">
|
||||
<input id="webserv_enableDirList" type="checkbox" class="hidden">
|
||||
<label>Enable Directory Listing</label>
|
||||
<small>If this folder do not contains any index files, list the directory of this folder.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Document Root Folder</label>
|
||||
<input id="webserv_docRoot" type="text" readonly="true">
|
||||
<small>
|
||||
The web server root folder can only be changed via startup flags of zoraxy for security reasons.
|
||||
See the -webserv flag for more details.
|
||||
</small>
|
||||
</div>
|
||||
<div class="field webservRootDisabled">
|
||||
<label>Port Number</label>
|
||||
<input id="webserv_listenPort" type="number" step="1" min="0" max="65535" value="8081" onchange="updateWebServLinkExample(this.value);">
|
||||
<small>Use <code>http://127.0.0.1:<span class="webserv_port">8081</span></code> in proxy rules to access the web server</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Document Root Folder</label>
|
||||
<input id="webserv_docRoot" type="text" readonly="true">
|
||||
<small>
|
||||
The web server root folder can only be changed via startup flags of zoraxy for security reasons.
|
||||
See the -webserv flag for more details.
|
||||
</small>
|
||||
</div>
|
||||
<div class="field webservRootDisabled">
|
||||
<label>Port Number</label>
|
||||
<input id="webserv_listenPort" type="number" step="1" min="0" max="65535" value="8081" onchange="updateWebServLinkExample(this.value);">
|
||||
<small>Use <code>http://127.0.0.1:<span class="webserv_port">8081</span></code> in proxy rules to access the web server</small>
|
||||
</div>
|
||||
</div>
|
||||
<small><i class="ui blue save icon"></i> Changes are saved automatically</small>
|
||||
|
||||
Reference in New Issue
Block a user