|
|
@@ -16,11 +16,12 @@ function adjustTourModalOverlayToElement(element){;
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
+ let padding = 12;
|
|
|
$("#tourModalOverlay").css({
|
|
|
- "top": $(element).offset().top,
|
|
|
- "left": $(element).offset().left,
|
|
|
- "width": $(element).width(),
|
|
|
- "height": $(element).height(),
|
|
|
+ "top": $(element).offset().top - padding - $(document).scrollTop(),
|
|
|
+ "left": $(element).offset().left - padding,
|
|
|
+ "width": $(element).width() + 2 * padding,
|
|
|
+ "height": $(element).height() + 2 * padding,
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -39,13 +40,17 @@ function tourStepFactory(config){
|
|
|
$(".tourFocusObject").removeClass("tourFocusObject");
|
|
|
$("#tourModal").addClass("nofocus");
|
|
|
$("#tourModalOverlay").hide();
|
|
|
+
|
|
|
+ //If there is a target element to scroll to
|
|
|
+ if (config.scrollto != undefined){
|
|
|
+ $('html, body').animate({
|
|
|
+ scrollTop: $(config.scrollto).offset().top - 100
|
|
|
+ }, 500);
|
|
|
+ }
|
|
|
+
|
|
|
}else{
|
|
|
- //Consists of focus element in this step
|
|
|
- $(".tourFocusObject").removeClass("tourFocusObject");
|
|
|
- $(config.element).addClass("tourFocusObject");
|
|
|
- $("#tourModal").removeClass("nofocus");
|
|
|
- $("#tourModalOverlay").hide();
|
|
|
- setTimeout(function(){
|
|
|
+
|
|
|
+ let elementHighligher = function(){
|
|
|
//Match the overlay to element position and size
|
|
|
$(window).off("resize").on("resize", function(){
|
|
|
adjustTourModalOverlayToElement(config.element);
|
|
|
@@ -58,7 +63,23 @@ function tourStepFactory(config){
|
|
|
}, 300);
|
|
|
adjustTourModalOverlayToElement(config.element);
|
|
|
$("#tourModalOverlay").fadeIn();
|
|
|
- }, 300);
|
|
|
+ }
|
|
|
+
|
|
|
+ //Consists of focus element in this step
|
|
|
+ $(".tourFocusObject").removeClass("tourFocusObject");
|
|
|
+ $(config.element).addClass("tourFocusObject");
|
|
|
+ $("#tourModal").removeClass("nofocus");
|
|
|
+ $("#tourModalOverlay").hide();
|
|
|
+ //If there is a target element to scroll to
|
|
|
+ if (config.scrollto != undefined){
|
|
|
+ $('html, body').animate({
|
|
|
+ scrollTop: $(config.scrollto).offset().top - 100
|
|
|
+ }, 500, function(){
|
|
|
+ setTimeout(elementHighligher, 300);
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ setTimeout(elementHighligher, 300);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
//Get the modal location of this step
|
|
|
@@ -75,13 +96,7 @@ function tourStepFactory(config){
|
|
|
config.callback();
|
|
|
}
|
|
|
|
|
|
- //If there is a target element to scroll to
|
|
|
- console.log(config.scrollto);
|
|
|
- if (config.scrollto != undefined){
|
|
|
- $('html, body').animate({
|
|
|
- scrollTop: $(config.scrollto).offset().top - 100
|
|
|
- }, 500);
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -104,6 +119,9 @@ function startQuickStartTour(){
|
|
|
//Enable the finish button
|
|
|
$("#tourModal .nextStepAvaible").hide();
|
|
|
$("#tourModal .nextStepFinish").show();
|
|
|
+
|
|
|
+ //Set step counter to 1
|
|
|
+ $("#tourModal .tourStepCounter").text("0 / 0");
|
|
|
return;
|
|
|
}else{
|
|
|
tourSteps[currentQuickSetupClass][0]();
|
|
|
@@ -250,14 +268,116 @@ var tourSteps = {
|
|
|
title: "💡 Start Zoraxy HTTP listener",
|
|
|
desc: `Start Zoraxy (if it is not already running) by pressing the "Start Service" button.<br>You should now be able to visit your domain and see the static web server contents show up in your browser.`,
|
|
|
tab: "status",
|
|
|
- element: $("#status .poweroptions"),
|
|
|
+ element: "#status .poweroptions",
|
|
|
pos: "bottomright",
|
|
|
})
|
|
|
],
|
|
|
|
|
|
//Subdomains tour steps
|
|
|
"subdomain":[
|
|
|
-
|
|
|
+ tourStepFactory({
|
|
|
+ title: "🎉 Creating your first subdomain",
|
|
|
+ desc: "Seems you are now ready to expand your site with more services! To do so, you can create a new subdomain for your new web services. <br><br>In this tour, you will be guided through the steps to setup a new subdomain reverse proxy.",
|
|
|
+ pos: "center"
|
|
|
+ }),
|
|
|
+ tourStepFactory({
|
|
|
+ title: "👉 Pointing subdomain DNS to Zoraxy's IP",
|
|
|
+ desc: `Setup a DNS CNAME Record that points your subdomain to your root domain. <br>
|
|
|
+ Assume your public IP is 93.184.215.14, you should have an CNAME record like this.
|
|
|
+ <table class="ui celled collapsing basic striped table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>Name</th>
|
|
|
+ <th>Type</th>
|
|
|
+ <th>Value</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>example.com</td>
|
|
|
+ <td>A</td>
|
|
|
+ <td>93.184.215.14</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>sub.example.com</td>
|
|
|
+ <td>CNAME</td>
|
|
|
+ <td>example.com</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>`,
|
|
|
+ callback: function(){
|
|
|
+ $.get("/api/acme/wizard?step=10", function(data){
|
|
|
+ if (data.error == undefined){
|
|
|
+ //Should return the public IP address from acme wizard
|
|
|
+ //Overwrite the sample IP address
|
|
|
+ let originalText = $("#tourModal .tourStepContent").html();
|
|
|
+ originalText = originalText.split("93.184.215.14").join(data);
|
|
|
+ $("#tourModal .tourStepContent").html(originalText);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ tourStepFactory({
|
|
|
+ title: "➕ Create New Proxy Rule",
|
|
|
+ desc: `Next, you can now move on to create a proxy rule that reverse proxy your new subdomain in Zoraxy. You can easily add new rules using the "New Proxy Rule" web form.`,
|
|
|
+ tab: "rules",
|
|
|
+ pos: "topright"
|
|
|
+ }),
|
|
|
+ tourStepFactory({
|
|
|
+ title: "🌐 Matching Keyword / Domain",
|
|
|
+ desc: `Fill in your new subdomain in the "Matching Keyword / Domain" field.<br> e.g. sub.example.com`,
|
|
|
+ element: "#rules .field[tourstep='matchingkeyword']",
|
|
|
+ pos: "bottomright"
|
|
|
+ }),
|
|
|
+ tourStepFactory({
|
|
|
+ title: "🖥️ Target IP Address or Domain Name with port",
|
|
|
+ desc: `Fill in the Reverse Proxy Destination. e.g. localhost:8080 or 192.168.1.100:9096. <br><br>Please make sure your web services is accessible by Zoraxy.`,
|
|
|
+ element: "#rules .field[tourstep='targetdomain']",
|
|
|
+ pos: "bottomright"
|
|
|
+ }),
|
|
|
+ tourStepFactory({
|
|
|
+ title: "🔐 Proxy Target require TLS Connection",
|
|
|
+ desc: `If your upstream service only accept https connection, select this option.`,
|
|
|
+ element: "#rules .field[tourstep='requireTLS']",
|
|
|
+ pos: "bottomright",
|
|
|
+
|
|
|
+ }),
|
|
|
+ tourStepFactory({
|
|
|
+ title: "🔓 Ignore TLS Validation Error",
|
|
|
+ desc: `Some open source projects like Proxmox or NextCloud use self-signed certificate to serve its web UI. If you are proxying services like that, enable this option. `,
|
|
|
+ element: "#rules #advanceProxyRules .field[tourstep='skipTLSValidation']",
|
|
|
+ scrollto: "#rules #advanceProxyRules",
|
|
|
+ pos: "bottomright",
|
|
|
+ callback: function(){
|
|
|
+ $("#advanceProxyRules").accordion();
|
|
|
+ if (!$("#rules #advanceProxyRules .content").is(":visible")){
|
|
|
+ //Open up the advance config menu
|
|
|
+ $("#rules #advanceProxyRules .title")[0].click()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ tourStepFactory({
|
|
|
+ title: "💾 Save New Proxy Rule",
|
|
|
+ desc: `Now, click "Create Endpoint" to add this reverse proxy rule to runtime.`,
|
|
|
+ element: "#rules div[tourstep='newProxyRule']",
|
|
|
+ scrollto: "#rules div[tourstep='newProxyRule']",
|
|
|
+ pos: "topright",
|
|
|
+ }),
|
|
|
+ tourStepFactory({
|
|
|
+ title: "🎉 New Proxy Rule Setup Completed!",
|
|
|
+ desc: `You can continue to add more subdomains or alias domain using this web form. To view the created reverse proxy rules, you can navigate to the HTTP Proxy tab.`,
|
|
|
+ element: "#rules",
|
|
|
+ tab: "rules",
|
|
|
+ pos: "bottomright",
|
|
|
+ }),
|
|
|
+ tourStepFactory({
|
|
|
+ title: "🌲 HTTP Proxy List",
|
|
|
+ desc: `In this tab, you will see all the created HTTP proxy rules and edit them if needed. You should see your newly created HTTP proxy rule in the above list. <Br><Br>
|
|
|
+ This is the end of this tour. If you want further documentation on how to setup access control filters or load balancer, check out our Github Wiki page.`,
|
|
|
+ element: "#httprp",
|
|
|
+ tab: "httprp",
|
|
|
+ pos: "bottomright",
|
|
|
+ }),
|
|
|
],
|
|
|
|
|
|
//TLS and ACME tour steps
|
Toby Chui