mirror of
https://github.com/tobychui/zoraxy.git
synced 2025-06-23 07:53:05 +02:00
Added tour for setup https
This commit is contained in:
Toby Chui
parent
01f68c5ef5
commit
9ea3fa2542
@ -59,7 +59,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<p>Current list of loaded certificates</p>
|
||||
<div>
|
||||
<div tourstep="certTable">
|
||||
<div style="width: 100%; overflow-x: auto; margin-bottom: 1em;">
|
||||
<table class="ui sortable unstackable basic celled table">
|
||||
<thead>
|
||||
@ -79,7 +79,8 @@
|
||||
<button class="ui basic button" onclick="initManagedDomainCertificateList();"><i class="green refresh icon"></i> Refresh List</button>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
<h3>Fallback Certificate</h3>
|
||||
<div tourstep="defaultCertificate">
|
||||
<h3>Fallback Certificate</h3>
|
||||
<p>When there are no matching certificate for the requested server name, reverse proxy router will always fallback to this one.<br>Note that you need both of them uploaded for it to fallback properly</p>
|
||||
<table class="ui very basic unstackable celled table">
|
||||
<thead>
|
||||
@ -102,43 +103,46 @@
|
||||
<button class="ui basic grey button" onclick="uploadPublicKey();"><i class="globe icon"></i> Public Key</button>
|
||||
<button class="ui basic black button" onclick="uploadPrivateKey();"><i class="black lock icon"></i> Private Key</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
<h3>Certificate Authority (CA) and Auto Renew (ACME)</h3>
|
||||
<p>Management features regarding CA and ACME</p>
|
||||
<h4>Prefered Certificate Authority</h4>
|
||||
<p>The default CA to use when create a new subdomain proxy endpoint with TLS certificate</p>
|
||||
<div class="ui fluid form">
|
||||
<div class="field">
|
||||
<label>Preferred CA</label>
|
||||
<div class="ui selection dropdown" id="defaultCA">
|
||||
<input type="hidden" name="defaultCA">
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Let's Encrypt</div>
|
||||
<div class="menu">
|
||||
<div class="item" data-value="Let's Encrypt">Let's Encrypt</div>
|
||||
<div class="item" data-value="Buypass">Buypass</div>
|
||||
<div class="item" data-value="ZeroSSL">ZeroSSL</div>
|
||||
<div tourstep="acmeSettings">
|
||||
<h3>Certificate Authority (CA) and Auto Renew (ACME)</h3>
|
||||
<p>Management features regarding CA and ACME</p>
|
||||
<h4>Prefered Certificate Authority</h4>
|
||||
<p>The default CA to use when create a new subdomain proxy endpoint with TLS certificate</p>
|
||||
<div class="ui fluid form">
|
||||
<div class="field">
|
||||
<label>Preferred CA</label>
|
||||
<div class="ui selection dropdown" id="defaultCA">
|
||||
<input type="hidden" name="defaultCA">
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Let's Encrypt</div>
|
||||
<div class="menu">
|
||||
<div class="item" data-value="Let's Encrypt">Let's Encrypt</div>
|
||||
<div class="item" data-value="Buypass">Buypass</div>
|
||||
<div class="item" data-value="ZeroSSL">ZeroSSL</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>ACME Email</label>
|
||||
<input id="prefACMEEmail" type="text" placeholder="ACME Email">
|
||||
</div>
|
||||
<button class="ui basic icon button" onclick="saveDefaultCA();"><i class="ui blue save icon"></i> Save Settings</button>
|
||||
</div><br>
|
||||
<h5>Certificate Renew / Generation (ACME) Settings</h5>
|
||||
<div class="ui basic segment acmeRenewStateWrapper">
|
||||
<h4 class="ui header" id="acmeAutoRenewer">
|
||||
<i class="white remove icon"></i>
|
||||
<div class="content">
|
||||
<span id="acmeAutoRenewerStatus">Disabled</span>
|
||||
<div class="sub header">ACME Auto-Renewer</div>
|
||||
<div class="field">
|
||||
<label>ACME Email</label>
|
||||
<input id="prefACMEEmail" type="text" placeholder="ACME Email">
|
||||
</div>
|
||||
</h4>
|
||||
<button class="ui basic icon button" onclick="saveDefaultCA();"><i class="ui blue save icon"></i> Save Settings</button>
|
||||
</div><br>
|
||||
<h5>Certificate Renew / Generation (ACME) Settings</h5>
|
||||
<div class="ui basic segment acmeRenewStateWrapper">
|
||||
<h4 class="ui header" id="acmeAutoRenewer">
|
||||
<i class="white remove icon"></i>
|
||||
<div class="content">
|
||||
<span id="acmeAutoRenewerStatus">Disabled</span>
|
||||
<div class="sub header">ACME Auto-Renewer</div>
|
||||
</div>
|
||||
</h4>
|
||||
</div>
|
||||
<p>This tool provide you a graphical interface to setup auto certificate renew on your (sub)domains. You can also manually generate a certificate if one of your domain do not have certificate.</p>
|
||||
<button class="ui basic button" tourstep="openACMEManager" onclick="openACMEManager();"><i class="yellow external icon"></i> Open ACME Tool</button>
|
||||
</div>
|
||||
<p>This tool provide you a graphical interface to setup auto certificate renew on your (sub)domains. You can also manually generate a certificate if one of your domain do not have certificate.</p>
|
||||
<button class="ui basic button" onclick="openACMEManager();"><i class="yellow external icon"></i> Open ACME Tool</button>
|
||||
</div>
|
||||
<script>
|
||||
var uploadPendingPublicKey = undefined;
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
<div class="ui divider"></div>
|
||||
<h4>Global Settings</h4>
|
||||
<p>Inbound Port (Reverse Proxy Listening Port)</p>
|
||||
<div class="ui action fluid notloopbackOnly input">
|
||||
<div class="ui action fluid notloopbackOnly input" tourstep="incomingPort">
|
||||
<small id="applyButtonReminder">Click "Apply" button to confirm listening port changes</small>
|
||||
<input type="text" id="incomingPort" placeholder="Incoming Port" value="80">
|
||||
<button class="ui green notloopbackOnly button" style="background: linear-gradient(60deg, #27e7ff, #00ca52);" onclick="handlePortChange();"><i class="ui checkmark icon"></i> Apply</button>
|
||||
@ -88,9 +88,11 @@
|
||||
<small>(Only apply when TLS enabled and not using port 80)</small></label>
|
||||
</div>
|
||||
<br>
|
||||
<div id="redirect" class="ui toggle notloopbackOnly tlsEnabledOnly checkbox" style="margin-top: 0.6em; padding-left: 2em;">
|
||||
<input type="checkbox">
|
||||
<label>Force redirect HTTP request to HTTPS</label>
|
||||
<div tourstep="forceHttpsRedirect" style="display: inline-block;">
|
||||
<div id="redirect" class="ui toggle notloopbackOnly tlsEnabledOnly checkbox" style="margin-top: 0.6em; padding-left: 2em;">
|
||||
<input type="checkbox">
|
||||
<label>Force redirect HTTP request to HTTPS</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui basic segment" style="background-color: #f7f7f7; border-radius: 1em;">
|
||||
<div class="ui accordion advanceSettings">
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
// tab -> Tab ID to switch pages
|
||||
// pos -> Where to display the tour modal, {topleft, topright, bottomleft, bottomright, center}
|
||||
// scrollto -> Element (selector) to scroll to, can be different from elements
|
||||
// ignoreVisiableCheck -> Force highlight even if element is currently not visable
|
||||
function adjustTourModalOverlayToElement(element){;
|
||||
if ($(element) == undefined || $(element).offset() == undefined){
|
||||
return;
|
||||
@ -34,8 +35,12 @@ function tourStepFactory(config){
|
||||
//This tour require tab swap. call to openTabById
|
||||
openTabById(config.tab);
|
||||
}
|
||||
|
||||
if (config.ignoreVisiableCheck == undefined){
|
||||
config.ignoreVisiableCheck = false;
|
||||
}
|
||||
|
||||
if (config.element == undefined){
|
||||
if (config.element == undefined || (!$(config.element).is(":visible") && !config.ignoreVisiableCheck)){
|
||||
//No focused element in this step.
|
||||
$(".tourFocusObject").removeClass("tourFocusObject");
|
||||
$("#tourModal").addClass("nofocus");
|
||||
@ -60,7 +65,7 @@ function tourStepFactory(config){
|
||||
}
|
||||
tourOverlayUpdateTicker = setInterval(function(){
|
||||
adjustTourModalOverlayToElement(config.element);
|
||||
}, 300);
|
||||
}, 500);
|
||||
adjustTourModalOverlayToElement(config.element);
|
||||
$("#tourModalOverlay").fadeIn();
|
||||
}
|
||||
@ -74,7 +79,7 @@ function tourStepFactory(config){
|
||||
if (config.scrollto != undefined){
|
||||
$('html, body').animate({
|
||||
scrollTop: $(config.scrollto).offset().top - 100
|
||||
}, 500, function(){
|
||||
}, 300, function(){
|
||||
setTimeout(elementHighligher, 300);
|
||||
});
|
||||
}else{
|
||||
@ -100,6 +105,13 @@ function tourStepFactory(config){
|
||||
}
|
||||
}
|
||||
|
||||
//Hide the side warpper in tour mode and prevent body from restoring to
|
||||
//overflow scroll mode
|
||||
function hideSideWrapperInTourMode(){
|
||||
hideSideWrapper(); //Call to index.html hide side wrapper function
|
||||
$("body").css("overflow", "hidden"); //Restore overflow state
|
||||
}
|
||||
|
||||
function startQuickStartTour(){
|
||||
if (currentQuickSetupClass == ""){
|
||||
msgbox("No selected setup service tour", false);
|
||||
@ -260,7 +272,7 @@ var tourSteps = {
|
||||
title: "📤 Upload Static Website",
|
||||
desc: `Upload your static website files (e.g. HTML files) to the web directory. If remote access is not avaible, you can also upload it with the web server file manager here.`,
|
||||
tab: "webserv",
|
||||
element: "#webserv",
|
||||
element: "#webserv_dirManager",
|
||||
pos: "bottomright",
|
||||
scrollto: "#webserv_dirManager"
|
||||
}),
|
||||
@ -348,6 +360,7 @@ var tourSteps = {
|
||||
element: "#rules #advanceProxyRules .field[tourstep='skipTLSValidation']",
|
||||
scrollto: "#rules #advanceProxyRules",
|
||||
pos: "bottomright",
|
||||
ignoreVisiableCheck: true,
|
||||
callback: function(){
|
||||
$("#advanceProxyRules").accordion();
|
||||
if (!$("#rules #advanceProxyRules .content").is(":visible")){
|
||||
@ -382,6 +395,112 @@ var tourSteps = {
|
||||
|
||||
//TLS and ACME tour steps
|
||||
"tls":[
|
||||
tourStepFactory({
|
||||
title: "🔐 Enable HTTPS (TLS) for your site",
|
||||
desc: `Some technologies only work with HTTPS for security reasons. In this tour, you will be guided through the steps to enable HTTPS in Zoraxy.`,
|
||||
pos: "center",
|
||||
}),
|
||||
tourStepFactory({
|
||||
title: "➡️ Change Listening Port",
|
||||
desc: `HTTPS listen on port 443 instead of 80. If your Zoraxy is currently listening to ports other than 443, change it to 443 in incoming port option and click "Apply"`,
|
||||
tab: "status",
|
||||
element: "#status div[tourstep='incomingPort']",
|
||||
scrollto: "#status div[tourstep='incomingPort']",
|
||||
pos: "bottomright",
|
||||
}),
|
||||
tourStepFactory({
|
||||
title: "🔑 Enable TLS Serving",
|
||||
desc: `Next, you can enable TLS by checking the "Use TLS to serve proxy request"`,
|
||||
element: "#tls",
|
||||
scrollto: "#tls",
|
||||
pos: "bottomright",
|
||||
}),
|
||||
tourStepFactory({
|
||||
title: "💻 Enable HTTP Server on Port 80",
|
||||
desc: `As we might want some proxy rules to be accessible by HTTP, turn on the HTTP server listener on port 80 as well.`,
|
||||
element: "#listenP80",
|
||||
scrollto: "#tls",
|
||||
pos: "bottomright",
|
||||
}),
|
||||
tourStepFactory({
|
||||
title: "↩️ Force redirect HTTP request to HTTPS",
|
||||
desc: `By default, if a HTTP host-name is not found, 404 error page will be returned. However, in common scenerio for self-hosting, you might want to redirect that request to your HTTPS server instead. <br><br>Enabling this option allows such redirection to be done automatically.`,
|
||||
element: "#status div[tourstep='forceHttpsRedirect']",
|
||||
scrollto: "#tls",
|
||||
pos: "bottomright",
|
||||
}),
|
||||
tourStepFactory({
|
||||
title: "🎉 HTTPS Enabled!",
|
||||
desc: `Now, your Zoraxy instance is ready to serve HTTPS requests.
|
||||
<br><br>By default, Zoraxy serve all your host-names by its internal self-signed certificate which is not a proper setup. That is why you will need to request a proper certificate for your site from your ISP or CA. `,
|
||||
tab: "status",
|
||||
pos: "center",
|
||||
}),
|
||||
tourStepFactory({
|
||||
title: "🔐 TLS / SSL Certificates",
|
||||
desc: `Zoraxy come with a simple and handy TLS management interface, where you can upload or request your certificates with a web form. You can click "TLS / SSL Certificate" from the side menu to open this page.`,
|
||||
tab: "cert",
|
||||
element: "#mainmenu",
|
||||
pos: "center",
|
||||
}),
|
||||
tourStepFactory({
|
||||
title: "📤 Uploading Fallback (Default) Certificate",
|
||||
desc: `If you are using Cloudflare, you can upload the Cloudflare (full) strict mode certificate in the "Fallback Certificate" section and let Cloudflare handle all the remaining certificate dispatch. <br><br>
|
||||
Public key usually use a file extension of .pub or .pem, and private key usually ends with .key.`,
|
||||
element: "#cert div[tourstep='defaultCertificate']",
|
||||
scrollto: "#cert div[tourstep='defaultCertificate']",
|
||||
pos: "bottomright",
|
||||
}),
|
||||
tourStepFactory({
|
||||
title: "⚙️ Setup ACME",
|
||||
desc: `If you didn't want to pay for a certificate, there are free CA where you can use to obtain a certificate. By default, Let's Encrypt is used and in order to use their service, you will need to fill in your webmin contact email in the "ACME EMAIL" field.
|
||||
<br><br> After you are done, click "Save Settings" and continue.`,
|
||||
element: "#cert div[tourstep='acmeSettings']",
|
||||
scrollto: "#cert div[tourstep='acmeSettings']",
|
||||
pos: "bottomright",
|
||||
}),
|
||||
tourStepFactory({
|
||||
title: "👉 Open ACME Tool",
|
||||
desc: `Open the ACME Tool by pressing the button below the ACME settings. You will see a tool window popup from the side.`,
|
||||
element: ".sideWrapper",
|
||||
pos: "center",
|
||||
callback: function(){
|
||||
//Call to function in cert.html
|
||||
openACMEManager();
|
||||
}
|
||||
}),
|
||||
tourStepFactory({
|
||||
title: "📃 Obtain Certificate with ACME",
|
||||
desc: `Now, we can finally start requesting a free certificate from the selected CA. Fill in the "Generate New Certificate" web-form and click <b>"Get Certificate"</b>.
|
||||
This usually will takes a few minutes. Wait until the spinning icon disappear before moving on the next step.
|
||||
<br><br>Tips: You can check the "Use DNS Challenge" if you are trying to request a certificate containing wildcard character (*).`,
|
||||
element: ".sideWrapper",
|
||||
pos: "topleft",
|
||||
}),
|
||||
tourStepFactory({
|
||||
title: "🔄 Enable Auto Renew",
|
||||
desc:`Free certificate only last for a few months. If you want Zoraxy to help you automate the certificate renew process, enable "Auto Renew" by clicking the <b>"Enable Certificate Auto Renew"</b> toggle switch.
|
||||
<br><br>You can fine tune which certificate to renew in the "Advance Renew Policy" dropdown.`,
|
||||
element: ".sideWrapper",
|
||||
pos: "bottomleft",
|
||||
callback: function(){
|
||||
//If the user arrive this step from "Back"
|
||||
if (!$(".sideWrapper").is(":visible")){
|
||||
openACMEManager();
|
||||
}
|
||||
}
|
||||
}),
|
||||
tourStepFactory({
|
||||
title: "🎉 Certificate Installed!",
|
||||
desc:`Now, your certificate is loaded into the database and it is ready to use! In Zoraxy, you do not need to manually assign the certificate to a domain. Zoraxy will do that automatically for you.
|
||||
<br><br>Now, you can try to visit your website with https:// and see your green lock shows up next to your domain name!`,
|
||||
element: "#cert div[tourstep='certTable']",
|
||||
scrollto: "#cert div[tourstep='certTable']",
|
||||
pos: "bottomright",
|
||||
callback: function(){
|
||||
hideSideWrapperInTourMode();
|
||||
}
|
||||
}),
|
||||
|
||||
],
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user