Added setup tour design

mod/dynamicproxy/dpcore/dpcore.go

@@ -54,6 +54,9 @@ type ReverseProxy struct {
 	Prepender string
 
 	Verbal bool
+
+	//Appended by Zoraxy project
+
 }
 
 type ResponseRewriteRuleSet struct {

web/components/quickstart.html

@@ -4,126 +4,79 @@
         <h1 class="ui header">
             <img src="img/res/1F387.png">
             <div class="content">
-              Hi! Welcome to Zoraxy!
+              Welcome to Zoraxy!
               <div class="sub header">What services are you planning to setup today?</div>
             </div>
         </h1>
         <br>
         <div class="ui stackable equal width grid">
             <div class="column">
-                <div class="serviceOption homepage">
+                <div class="serviceOption homepage" name="homepage">
                     <div class="titleWrapper">
                         <p>Static Homepage</p>
                     </div>
                     <div class="ui divider"></div>
                     <p>Host a static personal homepage with HTML, CSS and JavaScript using your domain name.</p>
                     <img class="themebackground ui small image" src="img/res/1F310.png">
+                    <div class="activeOption">
+                        <i class="ui white huge circle check icon"></i>
+                    </div>
                 </div>
             </div>
             <div class="column">
-                <div class="serviceOption subdomain">
+                <div class="serviceOption subdomain" name="subdomain">
                     <div class="titleWrapper">
                         <p>Sub-domains Routing</p>
                     </div>
                     <div class="ui divider"></div>
                     <p>Add and handle traffic from your subdomains and point them to a dedicated web services somewhere else.</p>
                     <img class="themebackground ui small image" src="img/res/1F500.png">
+                    <div class="activeOption">
+                        <i class="ui white huge circle check icon"></i>
+                    </div>
                 </div>
             </div>
             <div class="column">
-                <div class="serviceOption tls">
+                <div class="serviceOption tls" name="tls">
                     <div class="titleWrapper">
                         <p>HTTPS Green Lock(s)</p>
                     </div>
                     <div class="ui divider"></div>
                     <p>Turn your unsafe HTTP website into HTTPS using free certificate from public certificate authorities organizations.</p>
                     <img class="themebackground ui small image" src="img/res/1F512.png">
+                    <div class="activeOption">
+                        <i class="ui white huge circle check icon"></i>
+                    </div>
                 </div>
             </div>
         </div>
         <div class="ui divider"></div>
+        <div style="width: 100%;" align="center">
+            <button onclick="startQuickStartTour();" class="ui finished button quickstartControlButton">
+                Start Walkthrough
+            </button>
+        </div>
     </div>
    
 </div>
 <script>
-   
-    //Set the new proxy root option
-    function setProxyRoot(btn=undefined){
-        var newpr = $("#proxyRoot").val();
-        if (newpr.trim() == "" && currentDefaultSiteOption == 0){
-            //Fill in the web server info
-            newpr = "127.0.0.1:" +  $("#webserv_listenPort").val();
-            $("#proxyRoot").val(newpr);
-            
-        }
+    var currentQuickSetupClass = "";
 
-        var rootReqTls = $("#rootReqTLS")[0].checked;
+    //Bind selecting events to serviceOption
+    $("#quickstart .serviceOption").on("click", function(data){
+        $(".serviceOption.active").removeClass("active");
+        $(this).addClass("active");
+        let tourType = $(this).attr("name");
+        currentQuickSetupClass = tourType;
+    });
 
-        if (btn != undefined){
-            $(btn).addClass("disabled");
+    function startQuickStartTour(){
+        if (currentQuickSetupClass == ""){
+            msgbox("No selected setup service tour", false);
+            return;
         }
 
-        //proxy mode or redirect mode, check for input values
-        var defaultSiteValue = "";
-        if (currentDefaultSiteOption == 1){
-            if ($("#proxyRoot").val().trim() == ""){
-                $("#proxyRoot").parent().addClass("error");
-                return;
-            }
-            defaultSiteValue = $("#proxyRoot").val().trim();
-            $("#proxyRoot").parent().removeClass("error");
-
-        }else if (currentDefaultSiteOption == 2){
-            if ($("#redirectDomain").val().trim() == ""){
-                $("#redirectDomain").parent().addClass("error");
-                return;
-            }
-            defaultSiteValue = $("#redirectDomain").val().trim();
-            $("#redirectDomain").parent().removeClass("error");
-        }
-
-        //Create the endpoint by calling add
-        $.cjax({
-            url: "/api/proxy/add",
-            data: {
-                "type": "root", 
-                "tls": rootReqTls, 
-                "ep": newpr,
-                "defaultSiteOpt": currentDefaultSiteOption,
-                "defaultSiteVal":defaultSiteValue,
-            },
-            method: "POST",
-            success: function(data){
-                if (data.error != undefined){
-                    msgbox(data.error, false, 5000);
-                }else{
-                    //OK
-                    
-                    initRootInfo(function(){
-                        
-                        //Check if WebServ is enabled
-                        isUsingStaticWebServerAsRoot(function(isUsingWebServ){
-                            if (isUsingWebServ){
-                                //Force enable static web server
-                                //See webserv.html for details
-                                setWebServerRunningState(true);
-                            }
-                            
-                            msgbox("Default Site Updated");
-                        })
-                    });
-                    
-                }
-
-                if (btn != undefined){
-                    $(btn).removeClass("disabled");
-                }
-            },
-            error: function(){
-                msgbox("Unknown error occured", false);
-            }
-        });
-
+        alert(currentQuickSetupClass);
     }
 
 </script>

web/main.css

@@ -46,7 +46,7 @@ body.darkTheme{
     --button_border_color: #646464;
 }
 
-/* Theme Toggle Css */
+/* Theme Toggle CSS */
 #themeColorButton{
     background-color: black;
     color: var(--text_color_inverted);
@@ -85,7 +85,6 @@ body{
     top: 0;
     width: 100%;
     z-index: 10;
-    
 }
 
 .menubar .logo{
@@ -724,8 +723,22 @@ body{
     border-radius: 0.6em;
     cursor: pointer;
     min-height: 250px;
+    transition: opacity 0.1s ease-in-out;
+}
+
+
+#quickstart .serviceOption .activeOption{
+    position: absolute;
+    bottom: 0.2em;
+    left: 0.2em;
+    display:none;
+}
+
+#quickstart .serviceOption.active .activeOption{
+    display: block;
 }
 
+
 #quickstart .serviceOption .titleWrapper{
     text-align: center;
     width: 100%;
@@ -748,8 +761,8 @@ body{
     user-select: none;
 }
 
-#quickstart .serviceOption:hover{
-    opacity: 0.7;
+#quickstart .serviceOption:not(.active):hover{
+    opacity: 0.8;
 }
 
 #quickstart .serviceOption.tls{
@@ -765,4 +778,10 @@ body{
 #quickstart .serviceOption.homepage{
     background: var(--theme_background_inverted);
     color: white;
+}
+
+
+#quickstart .finished.ui.button{
+    background: var(--theme_green);
+    color: white;
 }