TC
/
Zoraxy
peilaus alkaen https://git.hkwtc.org/TC/ReverseProxy


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
							<!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="./favicon.png" />
        <title>HTTPS Setup Wizard | Zoraxy</title>
        <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>
        <script src="../script/tablesort.js"></script>
        <link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
        <script src="shepherd.js/dist/js/shepherd.min.js"></script>
        <link rel="stylesheet" href="../main.css">
    </head>
    <body>
        <br>
        <div class="ui container">
            <div class="ui yellow message">
                This Wizard require both client and server connected to the internet.
            </div>
            <div class="ui segment">
                <h3 class="ui header">
                    HTTPS (TLS/SSL Certificate) Setup Wizard
                    <div class="sub header">This tool help you setup https with your domain / subdomain on your Zoraxy host. <br>
                    Follow the steps below to get started</div>
                </h3>
            </div>
            <div class="ui segment stepContainer" step="1">
                <h4 class="ui header">
                    1. Setup Zoraxy to listen to port 80 or 443 and start listening
                    <div class="sub header">ACME can only works on port 80 (or 80 redirected 443). Please make sure Zoarxy is listening to either one of the ports.</div>
                </h4>
                <button class="ui basic green button" onclick="checkStep(1, step1Callback, this);">Check Port Setup</button>
                <div class="checkResult" style="margin-top: 1em;">

                </div>
            </div>
            <div class="ui segment stepContainer" step="2">
                <h4 class="ui header">
                    2. If you are under NAT, setup Port Forward and forward external port 80 (<b style="color: rgb(206, 29, 29); font-weight:bolder;">and</b> 443, if you are using 443) to your Zoraxy's LAN IP address port 80 (and 443)
                    <div class="sub header">If your Zoraxy server IP address starts with 192.168., you are mostly under a NAT router.</div>
                </h4>
                <small>The check function below will use public ip to check if port is opened. Make sure your host is reachable from the internet!<br>
                    <b style="color: rgb(206, 29, 29); font-weight:bolder;">If you are using 443, you still need to forward port 80 for performing 80 to 443 redirect.</b></small><br>
                <button style="margin-top: 0.6em;" class="ui basic green button" onclick="checkStep(2, step2Callback, this);">Check Internet Reachable</button>
                <div class="checkResult" style="margin-top: 1em;">

                </div>
            </div>

            <div class="ui segment stepContainer" step="3">
                <h4 class="ui header">
                    3. Point your domain (or sub-domain) to your Zoraxy server public IP address
                    <div class="sub header">DNS records might takes 5 - 10 minutes to take effect. If checking did not poss the first time, wait for a few minutes and retry.</div>
                </h4>
                <div class="ui fluid input">
                    <input type="text" name="domain" placeholder="Your Domain / DNS name (e.g. dev.example.com)">
                </div>
                <br>
                <button class="ui basic green button" onclick="checkStep(3, step3Callback, this);">Check Domain Reachable</button>
                <div class="checkResult" style="margin-top: 1em;">

                </div>
            </div>

            <div class="ui segment stepContainer" step="4">
                <h4 class="ui header">
                    4. Request a public CA to assign you a certificate
                    <div class="sub header">This process might take a few minutes and usually fully automated. If there are any error, you can see Zoraxy STDOUT / log for more information.</div>
                </h4>
                <div class="ui form">
                    <div class="field">
                        <label>Renewer Email</label>
                        <div class="ui fluid input">
                            <input id="caRegisterEmail" type="text" placeholder="[email protected]">
                        </div>
                        <small>Your CA might send expire notification to you via this email.</small>
                    </div>
                    <div class="field">
                      <label>Domain(s)</label>
                      <input id="domainsInput" type="text" placeholder="example.com" onkeyup="checkIfInputDomainIsMultiple();">
                      <small>If you have more than one domain in a single certificate, enter the domains separated by commas (e.g. s1.dev.example.com,s2.dev.example.com)</small>
                    </div>
                    <div class="field multiDomainOnly" style="display:none;">
                      <label>Matching Rule</label>
                      <input id="filenameInput" type="text" placeholder="Enter filename (no file extension)">
                      <small>Matching rule to let Zoraxy pick which certificate to use (Also be used as filename). Usually is the longest common suffix of the entered addresses. (e.g. dev.example.com)</small>
                    </div>
                    <div class="field multiDomainOnly" style="display:none;">
                      <button class="ui basic fluid button" onclick="autoDetectMatchingRules();">Auto Detect Matching Rule</button>
                    </div>
                    <div class="field">
                      <label>Certificate Authority (CA)</label>
                      <div class="ui selection dropdown" id="ca">
                        <input type="hidden" name="ca">
                        <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 class="item" data-value="Google">Google</div> -->
                        </div>
                      </div>
                    </div>
                    <button id="obtainButton" class="ui green basic button" type="submit"><i class="green download icon"></i> Get Certificate</button>
                </div>
                <div class="ui green message" id="installSucc" style="display:none;">
                    <i class="ui check icon"></i> Certificate for this domain has been installed. Visit the TLS/SSL tab for advance operations.
                </div>
            </div>
        <script>

            function checkIfInputDomainIsMultiple(){
                var inputDomains = $("#domainsInput").val();
                if (inputDomains.includes(",")){
                    $(".multiDomainOnly").show();
                }else{
                    $(".multiDomainOnly").hide();
                }
            }

             //Grab the longest common suffix of all domains
    //not that smart technically
    function autoDetectMatchingRules(){
      var domainsString = $("#domainsInput").val();
      if (!domainsString.includes(",")){
        return domainsString;
      }

      let domains = domainsString.split(",");

      //Clean out any spacing between commas
      for (var i = 0; i < domains.length; i++){
        domains[i] = domains[i].trim();
      }

      function getLongestCommonSuffix(strings) {
        if (strings.length === 0) {
          return ''; // Return an empty string if the array is empty
        }

        var sortedStrings = strings.slice().sort(); // Create a sorted copy of the array

        var firstString = sortedStrings[0];
        var lastString = sortedStrings[sortedStrings.length - 1];

        var suffix = '';
        var minLength = Math.min(firstString.length, lastString.length);

        for (var i = 0; i < minLength; i++) {
          if (firstString[firstString.length - 1 - i] !== lastString[lastString.length - 1 - i]) {
            break; // Stop iterating if characters don't match
          }
          suffix = firstString[firstString.length - 1 - i] + suffix;
        }

        return suffix;
      }

      let longestSuffix = getLongestCommonSuffix(domains);

      //Check if the suffix is a valid domain
      if (longestSuffix.substr(0,1) == "."){
        //Trim off the first dot
        longestSuffix = longestSuffix.substr(1);
      }

      if (!longestSuffix.includes(".")){
        alert("Auto Detect failed: Multiple Domains");
        return;
      }
      $("#filenameInput").val(longestSuffix);
    }

    $("#obtainButton").click(function() {
      $("#obtainButton").addClass("loading").addClass("disabled");
      obtainCertificate();
    });

    // Obtain certificate from API
    function obtainCertificate() {
      var domains = $("#domainsInput").val();
      var filename = $("#filenameInput").val();
      var email = $("#caRegisterEmail").val();
      if (email == ""){
        alert("ACME renew email is not set")
        return;
      }
      if (filename.trim() == "" && !domains.includes(",")){
        //Zoraxy filename are the matching name for domains.
        //Use the same as domains
        filename = domains;
      }else if (filename != "" && !domains.includes(",")){
        //Invalid settings. Force the filename to be same as domain
        //if there are only 1 domain
        filename = domains;
      }else{
        alert("Filename cannot be empty for certs containing multiple domains.")
        return;
      }
      var ca = $("#ca").dropdown("get value");
      $.ajax({
        url: "/api/acme/obtainCert",
        method: "GET",
        data: {
          domains: domains,
          filename: filename,
          email: email,
          ca: ca,
        },
        success: function(response) {
          $("#obtainButton").removeClass("loading").removeClass("disabled");
          if (response.error) {
            console.log("Error:", response.error);
            // Show error message
            alert(response.error);
            $("#installSucc").hide();
          } else {
            console.log("Certificate installed successfully");
            // Show success message
            //alert("Certificate installed successfully");
            $("#installSucc").show();
          }
        },
        error: function(error) {
          $("#obtainButton").removeClass("loading").removeClass("disabled");
          console.log("Failed to renewed certificate:", error);
        }
      });
    }


            function step3Callback(resultContainer, data){
                if (data == true){
                    $(resultContainer).html(`<div class="ui green message">
                        <i class="ui check icon"></i> Domain is reachable and seems there is a HTTP server listening. Please move on to the next step.
                    </div>`);
                }else{
                    $(resultContainer).html(`<div class="ui red message">
                        <i class="ui remove icon"></i> Domain is reachable but there are no HTTP server listening<br>
                        Make sure you have point to the correct IP address and there are not another proxy server above Zoraxy.
                    </div>`);
                }
            }   

            function step2Callback(resultContainer, data){
                if (data == true){
                    $(resultContainer).html(`<div class="ui green message">
                        <i class="ui check icon"></i> HTTP Server reachable from public IP address. Please move on to the next step.
                    </div>`);
                }else{
                    $(resultContainer).html(`<div class="ui red message">
                        <i class="ui remove icon"></i> Server unreachable from public IP address<br>
                        Check if you have correct NAT port forward setup in your home router, firewall and make sure network is reachable from the public internet.
                    </div>`);
                }
            }

            function step1Callback(resultContainer, data){
                if (data == true){
                    $(resultContainer).html(`<div class="ui green message">
                        <i class="ui check icon"></i> Supported listening port. Please move on to the next step.
                    </div>`);
                }else{
                    $(resultContainer).html(`<div class="ui red message">
                        <i class="ui remove icon"></i> Invalid listening port.<br>
                        Go to Status tab and change the listening port to 80 or 443
                    </div>`);
                }
            }

            function getStepContainerByNo(stepNo){
                let targetStepContainer = undefined;
                $(".stepContainer").each(function(){
                    if ($(this).attr("step") == stepNo){
                        let thisContainer = $(this);
                        targetStepContainer = thisContainer;
                    }
                });

                return targetStepContainer;
            }
            function checkStep(stepNo, callback, btn){
                let targetContainer = getStepContainerByNo(stepNo);
                $(btn).addClass("loading");

                //Load all the inputs 
                data = {};
                $(targetContainer).find("input").each(function(){
                    let key = $(this).attr("name")
                    if (key != undefined){
                        data[key] = $(this).val();
                    }
                });
                $.ajax({
                    url: "/api/acme/wizard?step=" + stepNo,
                    data: data,
                    success: function(data){
                        $(btn).removeClass("loading");
                        if (data.error != undefined){
                            $(targetContainer).find(".checkResult").html(`
                            <div class="ui red message">${data.error}</div>`);
                        }else{
                            callback($(targetContainer).find(".checkResult"), data);
                        }
                    },
                    error: function(){
                        $(btn).removeClass("loading");
                        $(targetContainer).find(".checkResult").html(`
                            <div class="ui red message">Server return an Unknown Error</div>`);
                    }
                });
            }
        </script>
    </body>
</html>