added the install of libbrotli-dev

for some reason it refuses to install without it

.idea/NginxInstaller.iml

@@ -8,5 +8,6 @@
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="jquery" level="application" />
   </component>
 </module>

app.js

@@ -1,5 +1,8 @@
 document.getElementById("submit").addEventListener("click", generateQuickCmd, false);
 
+const debug = false; // DISABLE FOR PRODUCTION
+const baseURL = debug ? "http://localhost:8081/ngx" : "https://api.nevets.tech/ngx";
+
 const service = "[Unit]\n" +
     "Description=The NGINX HTTP and reverse proxy server\n" +
     "After=syslog.target network-online.target remote-fs.target nss-lookup.target\n" +
@@ -17,22 +20,70 @@ const service = "[Unit]\n" +
     "[Install]\n" +
     "WantedBy=multi-user.target";
 
-function generateQuickCmd() {
-    let reqData = "{" +
-        "\"content\":\"" + encodeURI(buildCmd()) + "\"" +
-        "}";
 
-    fetch("https://api.nevets.tech/ngx/create", {
+// async function fetch1() {
+//     let url = "https://thingproxy.freeboard.io/fetch/ " + encodeURIComponent("https://nginx.org/download/");
+//     await $.get(url, (data, status) => {
+//         console.log(data);
+//         return data.body;
+//     });
+//     return "ERROR?";
+// }
+// const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+
+async function generateQuickCmd() {
+    let nginxStr = document.getElementById("link").value;
+
+    if (nginxStr === "") {
+        document.getElementById("script").innerHTML = "ERROR!? Did you leave the NGINX Verison field blank?" + "\n<span class=\"tooltiptext\" id=\"myTooltip\">Copy to clipboard</span>";
+        return;
+    }
+    if (extractNginxVersion(nginxStr)===null || extractNginxVersion(nginxStr).includes("null")) {
+        document.getElementById("script").innerHTML = "ERROR!? Regex could not find the version in the input field!" + "\n<span class=\"tooltiptext\" id=\"myTooltip\">Copy to clipboard</span>";
+        return;
+    }
+
+
+    let reqData = "{" +
+        "\"version\":\"" + encodeURIComponent(extractNginxVersion(nginxStr)) + "\"" + "}";
+    let continueCycle = true;
+    await fetch(baseURL + "/dhv", {
         method: "POST",
         body: reqData,
-        mode: "cors"
     }).then(res => res.json().then(json => {
-        document.getElementById("script").innerText = "curl -s " + json.url + " | bash";
+        if (json.url.includes("false")) {
+            document.getElementById("script").innerHTML = "ERROR!? Do you have a valid verison of NGINX?" + "\n<span class=\"tooltiptext\" id=\"myTooltip\">Copy to clipboard</span>";
+            continueCycle = false;
+        }
+    }));
+    if (!continueCycle) {
+        return;
+    }
+    reqData = "{" +
+        "\"content\":\"" + encodeURI(buildCmd()) + "\"" +
+        "}";
+    fetch(baseURL + "/create", {
+        method: "POST",
+        body: reqData,
+    }).then(res => res.json().then(json => {
+        document.getElementById("script").innerHTML = "curl -s " + json.url + " | bash" + "\n<span class=\"tooltiptext\" id=\"myTooltip\">Copy to clipboard</span>";
     }));
 }
 
+function outFunc() {
+    var tooltip = document.getElementById("myTooltip");
+    tooltip.innerHTML = "Copy to clipboard";
+}
+
+function copy() {
+    var copyText = document.getElementById("script").innerHTML.split("<span")[0];
+    var tooltip = document.getElementById("myTooltip");
+    navigator.clipboard.writeText(copyText).then(r => tooltip.innerHTML = "Copied!");
+}
+
 function buildCmd() {
-    let nginxStr = document.getElementById("link").value; //https://nginx.org/download/nginx-x.xx.x.tar.gz
+    let nginxStr = document.getElementById("link").value; //user input
 
     let script = "#!/bin/bash\n" +
         "if [ \"$EUID\" -ne 0 ]\n" +
@@ -40,17 +91,17 @@ function buildCmd() {
         "  exit\n" +
         "fi\n\n" +
         "apt-get update\n" +
-        "apt-get install -y build-essential libpcre3 libpcre3-dev zlib1g zlib1g-dev libssl-dev wget git\n" +
+        "apt-get install -y libbrotli-dev build-essential libpcre3 libpcre3-dev zlib1g zlib1g-dev libssl-dev wget git\n" +
-        "wget " + document.getElementById("link").value + "\n" +
+        "wget https://nginx.org/download/nginx-" + extractNginxVersion(nginxStr) + ".tar.gz\n" +
-        "tar -xzvf " + extractNginxVersion(nginxStr) + "\n";
+        "tar -xzvf " + "nginx-" + extractNginxVersion(nginxStr) + ".tar.gz\n";
         if (document.getElementById("extMod").checked === true) {
             script += "git clone https://github.com/google/ngx_brotli.git\n" +
             "git clone https://github.com/openresty/headers-more-nginx-module.git\n" +
             "cd ngx_brotli/\n" +
             "git submodule update --init\n" +
-            "cd ../" + extractNginxVersion(nginxStr).replace(/\.tar\.gz$/, '') + "/\n";
+            "cd ../nginx-" + extractNginxVersion(nginxStr) + "/\n";
         } else {
-            script += "cd " + extractNginxVersion(nginxStr).replace(/\.tar\.gz$/, '') + "\n";
+            script += "cd nginx-" + extractNginxVersion(nginxStr) + "\n";
         }
         script += "cp -r conf /etc/nginx\n" +
         "mkdir /var/cache/nginx\n" +
@@ -80,7 +131,7 @@ function getConfigureStr() {
 
 function extractNginxVersion(url) {
     // This regex matches 'nginx' followed by a hyphen and a version number, followed by '.tar.gz'
-    const regex = /nginx-\d+\.\d+\.\d+\.tar\.gz/;
+    const regex = /\d+\.\d+\.\d+/;
 
     // Use the regex to search the string
     const match = url.match(regex);

index.html

@@ -2,15 +2,17 @@
 <html lang="en-US ">
 <head>
     <meta charset="UTF-8">
-    <title>Nginx Installer</title>
+    <title>NGINX Installer</title>
     <link rel="stylesheet" href="style.css">
     <link href='https://fonts.googleapis.com/css?family=JetBrains Mono' rel='stylesheet'>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>
 <body>
   <div class="main">
-<!--    <h1 style="margin-left: auto; margin-right: auto">Nginx Script Gen</h1>-->
+    <h1 style="margin: 0 auto;">NGINX Script Gen</h1>
+
     <label for="link" style="height: 50px">
-        <p style="width: 300px; "><a href="https://nginx.org/download/" target=”_blank”>NGINX Archive Link:</a></p>
+        <a style="width: 180px; text-align: center " href="https://nginx.org/download/" target=”_blank”>NGINX Version:</a>
         <input type="text" id="link" style="margin-top: 10px">
     </label>
 
@@ -33,7 +35,9 @@
     </label>
 
     <button id="submit" class="centered-button">Generate Script</button>
-    <code lang="bash" id="script"></code>
+    <code class="tooltip" onclick="copy()" onmouseout="outFunc()" lang="bash" id="script">
+        <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
+    </code>
   </div>
 <script src="app.js"></script>
 </body>

style.css

@@ -20,7 +20,7 @@ body {
     text-align: center;
 }
 
-p {
+p, a {
     padding: 0px;
     margin: 0px 2px 0px 0px;
     font-size: 14px;
@@ -37,6 +37,7 @@ label {
     margin-left: auto;
     margin-right: auto;
     padding: 5px;
+    text-align: center;
 }
 
 /* Adjust the spacing specifically for the first label */
@@ -56,6 +57,18 @@ a {
     text-decoration: none;
 }
 
+code {
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #b8d9ff;
+    padding: 2px;
+    border-radius: 5px;
+    transition: background .2s ease-in;
+}
+code:hover {
+    background-color: #88a8c5;
+}
+
 a:hover {
     text-decoration: underline;
 }
@@ -89,4 +102,45 @@ button:active {
     display: block;
     margin: 20px auto; /* Adds 20px space above and centers horizontally */
     width: fit-content; /* Auto width to fit the button's content */
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 140px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 150%;
+    left: 50%;
+    margin-left: -75px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+    transition: opacity 0.3s;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+
+    transition: opacity 0.3s;
 }