ui - add workarounds for HTTPS-only setup wizard

src/common/core/ui/confs/default-server-http/ui.conf

@@ -38,7 +38,27 @@ location /setup/check {
     add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
     default_type 'text/plain';
     content_by_lua_block {
-        ngx.say("ok")
+        local logger = require "bunkerweb.logger":new("UI")
+        local args, err = ngx.req.get_uri_args(1)
+        if err == "truncated" or not args["server_name"] or args["server_name"] == "" then
+            logger:log(ngx.NOTICE, "Received standard server name check")
+            ngx.print("ok")
+        else
+            logger:log(ngx.NOTICE, "Received remote server name check for " .. args["server_name"])
+            local http = require "resty.http".new()
+            local res, err = http:request_uri("https://" .. args["server_name"] .. "/setup/check", {ssl_verify = false})
+            if not res then
+                ngx.print("ko")
+                logger:log(ngx.ERR, "Server name check failed : " .. err)
+                return
+            end
+            if res.status == 200 and res.body == "ok" then
+                ngx.print("ok")
+                return
+            end
+            logger:log(ngx.ERR, "Server name check failed : status = " .. tostring(res.status) .. " and body != ok")
+            ngx.print("ko")
+        end
     }
 }
 

src/ui/main.py

@@ -645,6 +645,9 @@ def setup():
         random_url=f"/{''.join(choice(ascii_letters + digits) for _ in range(10))}",
     )
 
+@app.route("/setup/loading", methods=["GET"])
+def setup_loading():
+    return render_template("setup_loading.html")
 
 @app.route("/totp", methods=["GET", "POST"])
 @login_required

src/ui/templates/setup.html

@@ -246,6 +246,7 @@
                                         <span class="sr-only" aria-check-result></span>
                                     </button>
                                 </div>
+                                <p class="mt-4">In case of issues, you can also click <a id="check_url" class="privacy-link" href="https://www.example.com/setup/check" target="_blank">here</a> to perform a manual check.</p>
                             </div>
                             <!-- auto let's encrypt-->
                             <div class="flex flex-col relative col-span-12 my-3 mx-2 max-w-[400px] w-full">
@@ -369,15 +370,38 @@
           this.checkBtn.addEventListener("click", (e) => {
             e.preventDefault();
             this.updateCheck("unknown");
-            // get resume
-            const api = `https://${this.servInp.value}/setup/check`;
-            fetch(api)
-              .then((res) => {
+            const self = this;
+            async function fetchCheck(url) {
+                try {
+                  let res = await fetch(url);
+                  let text = await res.text();
+                  text = text.trim();
+                  if (res.status == 200 && text == "ok") {
+                    return true;
+                  }
+                }
+                catch (err) {
+                  return false;
+                }
+                return false;
+            }
+            (async () => {
+              // Check DNS setup
+              let ok = await fetchCheck(`https://${this.servInp.value}/setup/check`);
+              if (!ok) {
+                // Fallback to remote call
+                ok = await fetchCheck(`${window.location.origin}/setup/check?server_name=${this.servInp.value}`);
+                if (!ok) {
+                  this.updateCheck("error");
+                }
+                else {
+                  this.updateCheck("success");
+                }
+              }
+              else {
                 this.updateCheck("success");
-              })
-              .catch((err) => {
-                this.updateCheck("error");
-              });
+              }
+            })();
           });
         }
 
@@ -417,6 +441,7 @@
           this.sslCheck = document.querySelector("#auto_lets_encrypt");
           this.urlInp = document.querySelector("#ui_url");
           this.resumeEl = document.querySelector("[data-resume]");
+          this.checkUrl = document.querySelector("#check_url");
           this.init();
         }
 
@@ -443,6 +468,7 @@
           }
           this.urlInp.value = this.urlInp.value.replace("//", "/");
           this.resumeEl.textContent = `https://${this.servInp.value}${this.urlInp.value}`;
+          this.checkUrl.href = `https://${this.servInp.value}/setup/check`;
         }
       }
 
@@ -592,7 +618,7 @@
             this.hideErrMsg();
 
             // Send email
-            if(this.checkEmailInp.checked && this.emailInp.checkValidity()) {
+            if(this.checkEmailInp.checked && this.emailInp.checkValidity() && this.emailInp.value != "") {
               this.subscribe();
             }
 
@@ -613,27 +639,7 @@
             })
               .then((res) => {
                 if (res.status === 200) {
-                  setTimeout(() => {
-                    window.open(`${api}login`, "_self");
-                  }, 60000);
-                  setTimeout(() => {
-                    setInterval(() => {
-                      fetch(`${api}check`, {
-                        mode: "cors",
-                        cache: "no-cache",
-                      })
-                        .then((res) => {
-                          if (res.status === 200 ) {
-                            return res.json();
-                          }
-                        }).then(res => {
-                          if (res.message === "ok") {
-                            window.open(`${api}login`, "_self");
-                          }
-                        })
-                        .catch((err) => {});
-                    }, 1000);
-                  }, 5000);
+                  window.location.href = `https://${this.servInp.value}/setup/loading?target_uri=${this.urlInp.value}`;
                 }
               })
               .catch((err) => {