auto update script executed

web/components/status.html

@@ -72,17 +72,30 @@
         <label>Use TLS to serve proxy request</label>
     </div>
     <br>
-    <div id="tlsMinVer" class="ui toggle notloopbackOnly tlsEnabledOnly checkbox" style="margin-top: 0.6em;">
-        <input type="checkbox">
-        <label>Force TLS v1.2 or above<br>
-        <small>(Not compatible with legacy browsers)</small></label>
-    </div>
-    <br>
     <div id="redirect" class="ui toggle notloopbackOnly tlsEnabledOnly checkbox" style="margin-top: 0.6em;">
         <input type="checkbox">
         <label>Force redirect HTTP request to HTTPS<br>
             <small>(Only apply when listening port is not 80)</small></label>
     </div>
+    <div class="ui basic segment" style="background-color: #f7f7f7; border-radius: 1em;">
+        <div class="ui accordion statusAdvanceSettings">
+            <div class="title">
+              <i class="dropdown icon"></i>
+                Advance Settings
+            </div>
+            <div class="content">
+                <p>If you have no idea what are these, you can leave them as default :)</p>
+                <div id="tlsMinVer" class="ui toggle notloopbackOnly tlsEnabledOnly checkbox" style="margin-top: 0.6em;">
+                    <input type="checkbox">
+                    <label>Force TLS v1.2 or above<br>
+                    <small>(Enhance security, but not compatible with legacy browsers)</small></label>
+                </div>
+                <br>
+            </div>
+        </div>
+    </div>
+    
+    
     <br><br>
     <button id="startbtn" class="ui teal button" onclick="startService();">Start Service</button>
     <button id="stopbtn" class="ui red notloopbackOnly disabled button" onclick="stopService();">Stop Service</button>
@@ -134,6 +147,8 @@
 </div>
 <script>
     let loopbackProxiedInterface = false;
+    $(".statusAdvanceSettings").accordion();
+
     //Initial the start stop button if this is reverse proxied
     $.get("/api/proxy/requestIsProxied", function(data){
         if (data == true){
@@ -399,7 +414,27 @@
                             alert(data.error);
                         }else{
                             //Updated
-                            msgbox("Setting Updated");
+                            
+                            //Check for case if the port is invalid default ports
+                            if ($("#incomingPort").val() == "80" && thisValue == true){
+                                confirmBox("Change listen port to :443?", function(choice){
+                                    if (choice == true){
+                                        $("#incomingPort").val("443");
+                                        handlePortChange();
+                                    }
+                                });
+                                   
+                            }else if ($("#incomingPort").val() == "443" && thisValue == false){
+                                confirmBox("Change listen port to :80?", function(choice){
+                                    if (choice == true){
+                                        $("#incomingPort").val("80");
+                                        handlePortChange();
+                                    }
+                                });
+                            }else{
+                                msgbox("Setting Updated");
+                            }
+
                             initRPStaste();
                         }
                     }

web/index.html

@@ -148,6 +148,17 @@
             <p><i class="green check circle icon"></i> There are no message</p>
         </div>
         
+     
+        <div id="confirmBox" style="display:none;">
+            <div class="ui top attached progress">
+                <div class="bar" style="width: 100%; min-width: 0px;"></div>
+            </div>
+            <div class="confirmBoxBody">
+                <button class="ui red mini circular icon right floated button" style="margin-left: 0.4em;"><i class="ui times icon"></i></button>
+                <button class="ui green mini circular icon right floated button"><i class="ui check icon"></i></button>
+                <div class="questionToConfirm">Confirm Exit?</div>
+            </div>
+        </div>
         <br><br>
         <script>
             $(".year").text(new Date().getFullYear());
@@ -280,6 +291,64 @@
                 $("#messageBox").stop().finish().fadeIn("fast").delay(delayDuration).fadeOut("fast");
             }
 
+            function confirmBox(question_to_confirm, callback, delaytime=15) {
+                
+                var progressBar = $("#confirmBox .bar");
+                var questionElement = $("#confirmBox .questionToConfirm");
+                
+                //Just to make sure there are no animation runnings
+                progressBar.stop();
+
+                // Update the question to confirm
+                questionElement.text(question_to_confirm);
+
+                // Start the progress bar animation
+                progressBar.css("width", "100%");
+                progressBar.animate({ width: "0%", easing: "linear" }, delaytime * 1000, function() {
+                    // Animation complete, invoke the callback with undefined
+                    callback(undefined);
+
+                    //Unset the event listener
+                    $("#confirmBox .ui.green.button").off("click");
+
+                    // Hide the confirm box
+                    $("#confirmBox").hide();
+                });
+
+                // Bind click event to "Yes" button
+                $("#confirmBox .ui.green.button").on("click", function() {
+                    // Stop the progress bar animation
+                    progressBar.stop();
+
+                    // Invoke the callback with true
+                    callback(true);
+
+                    // Hide the confirm box
+                    $("#confirmBox").hide();
+
+                    //Unset the event listener
+                    $("#confirmBox .ui.green.button").off("click");
+                });
+
+                // Bind click event to "No" button
+                $("#confirmBox .ui.red.button").on("click", function() {
+                    // Stop the progress bar animation
+                    progressBar.stop();
+
+                    // Invoke the callback with false
+                    callback(false);
+
+                    // Hide the confirm box
+                    $("#confirmBox").hide();
+
+                     //Unset the event listener
+                     $("#confirmBox .ui.red.button").off("click");
+                });
+
+                // Show the confirm box
+                $("#confirmBox").show().transition('jiggle');
+            }
+
             /*
                 Toggles for side wrapper
             */

web/main.css

@@ -89,6 +89,36 @@ body{
     z-index: 999;
 }
 
+/* Confirm Box */
+#confirmBox{
+    position: fixed;
+    z-index: 999;
+    bottom: 1em;
+    right: 1em;
+    min-width: 300px;
+    border-bottom-right-radius: 1em;
+    background-color: #414141;
+    color: white;
+    box-shadow: 10px 10px 5px -2px rgba(0,0,0,0.13);
+}
+
+#confirmBox .confirmBoxBody{
+    padding: 1em;
+    border-bottom-right-radius: 1em;
+}
+
+#confirmBox .ui.progress .bar{
+    background: var(--theme_green) !important;
+}
+
+#confirmBox .confirmBoxBody .button{
+    margin-top: -0.4em;
+}
+
+#confirmBox .questionToConfirm{
+    margin-top: -0.2em;
+}
+
 /* Standard containers */
 .standardContainer{
     position: relative;