Merge pull request 'Modified scripts and added some tooltips. Made it so that NGINX version is required instead of URL.' (#2) from 5gi/NginxInstaller:master into master

Reviewed-on: Steven/NginxInstaller#2

.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

@@ -17,7 +17,33 @@ const service = "[Unit]\n" +
     "[Install]\n" +
     "WantedBy=multi-user.target";
 
-function generateQuickCmd() {
+
+// 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 getHTML() {
+    return fetch("corsurl" + encodeURIComponent("https://nginx.org/download/"))
+        .then((response)=>response.body.toString())
+        .then((responseJson)=>{return responseJson});
+}
+
+async function generateQuickCmd() {
+    let nginxStr = document.getElementById("link").value;
+    // if (!st.toString().includes(extractNginxVersion(nginxStr))) {
+    //     document.getElementById("script").innerHTML = "ERROR!? Do you have a valid verison of NGINX?" + "\n<span class=\"tooltiptext\" id=\"myTooltip\">Copy to clipboard</span>";
+    //     return;
+    // }
+    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;
+    }
     let reqData = "{" +
         "\"content\":\"" + encodeURI(buildCmd()) + "\"" +
         "}";
@@ -27,12 +53,23 @@ function generateQuickCmd() {
         body: reqData,
         mode: "cors"
     }).then(res => res.json().then(json => {
-        document.getElementById("script").innerText = "curl -s " + json.url + " | bash";
+        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" +
@@ -41,16 +78,16 @@ function buildCmd() {
         "fi\n\n" +
         "apt-get update\n" +
         "apt-get install -y build-essential libpcre3 libpcre3-dev zlib1g zlib1g-dev libssl-dev wget git\n" +
-        "wget " + document.getElementById("link").value + "\n" +
-        "tar -xzvf " + extractNginxVersion(nginxStr) + "\n";
+        "wget https://nginx.org/download/nginx-" + extractNginxVersion(nginxStr) + ".tar.gz\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 +117,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;
 }