Added tour for setup https

This commit is contained in:
Toby Chui 2024-08-16 22:28:21 +08:00
parent 01f68c5ef5
commit 9ea3fa2542
3 changed files with 167 additions and 42 deletions

View File

@ -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;

View File

@ -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">

View File

@ -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();
}
}),
],
}