From 4072fb2554f0c43ffd0c8726f849416c12eae0c8 Mon Sep 17 00:00:00 2001
From: will <will@cloud.com>
Date: Tue, 2 Nov 2010 20:59:43 -0700
Subject: [PATCH] Adding New UI support for VPN.  Missing component include the
 listing of the users that have access to the VPN.

---
 ui/jsp/ipaddress.jsp               |  65 ++++++++++++++++++
 ui/scripts/cloud.core.ipaddress.js | 103 +++++++++++++++++++++++++++--
 2 files changed, 162 insertions(+), 6 deletions(-)

diff --git a/ui/jsp/ipaddress.jsp b/ui/jsp/ipaddress.jsp
index 6132fddada5..9ed7e2978f3 100644
--- a/ui/jsp/ipaddress.jsp
+++ b/ui/jsp/ipaddress.jsp
@@ -28,6 +28,8 @@
             <%=t.t("Port Forwarding")%></div>
         <div class="content_tabs off" id="tab_load_balancer">
             <%=t.t("Load Balancer")%></div>
+		<div class="content_tabs off" id="tab_vpn">
+            <%=t.t("VPN")%></div>
     </div>  
     <div id="tab_content_details">
     	<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display: none;">
@@ -270,6 +272,51 @@
         </div>      
     </div>
     <!-- Load Balancer ends here-->
+	
+	<!-- VPN start here-->
+	<div id="tab_content_vpn" style="display:none">
+    	<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display: none;">
+            <div class="rightpanel_mainloaderbox">
+                <div class="rightpanel_mainloader_animatedicon">
+                </div>
+                <p>
+                    Loading &hellip;</p>
+            </div>
+        </div>        
+        <div id="tab_container" style="display:none">
+			<div class="grid_container">
+	        	<div class="grid_header">
+	            	<div id="grid_header_title" class="grid_header_title">VPN Users</div>
+	                <div class="grid_actionbox" id="action_link">
+	                    <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+	                        <ul class="actionsdropdown_boxlist" id="action_list">
+	                            <li><%=t.t("no.available.actions")%></li>
+	                        </ul>
+	                    </div>
+	                </div>
+	                <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+	                display: none;">
+	                    <div class="gridheader_loader" id="icon">
+	                    </div>
+	                    <p id="description">
+	                        Adding User &hellip;</p>
+	                </div>
+	            </div>
+	            <div class="grid_rows odd">
+	                <div class="grid_row_cell" style="width: 20%;">
+	                    <div class="row_celltitles">
+	                        Username:</div>
+	                </div>
+	                <div class="grid_row_cell" style="width: 79%;">
+	                    <div class="row_celltitles" id="username">
+	                    </div>
+	                </div>
+	            </div>
+	        </div>
+        </div>    
+		<div id="vpn_disabled_msg" style="display:none"> <p>VPN access is currently not enabled.  Please <a href="#" id="enable_vpn_link">click here</a> to enable VPN.</p></div>
+    </div>
+    <!-- VPN ends here-->
 </div>
 <!-- IP Address detail panel (end) -->
 
@@ -474,6 +521,24 @@
     </p>
 </div>
 
+<div id="dialog_enable_vpn" title="Enable VPN" style="display:none">
+    <p>
+        VPN is currently disabled for this IP Address.  Would you like to enable VPN access?
+    </p>
+	<!--Loading box-->
+	<div id="spinning_wheel" class="ui_dialog_loaderbox" style="display:none;">
+		<div class="ui_dialog_loader"></div>
+		<p>Enabling VPN Access....</p>
+	</div>
+   
+	<!--Confirmation msg box-->
+	<!--Note: for error msg, just have to add error besides everything for eg. add error(class) next to ui_dialog_messagebox error, ui_dialog_msgicon error, ui_dialog_messagebox_text error.  -->
+	<div id="info_container" class="ui_dialog_messagebox error" style="display:none;">
+		<div id="icon" class="ui_dialog_msgicon error"></div>
+        <div id="info" class="ui_dialog_messagebox_text error">(info)</div>
+	</div>
+</div>
+
 <div id="dialog_acquire_public_ip" title="Acquire New IP" style="display: none">
     <p> 
         <%=t.t("please.select.an.available.zone.to.associate.your.new.ip.with..acquiring.additional.ip.may.cost.you.an.additional.dollars.per.month.")%>
diff --git a/ui/scripts/cloud.core.ipaddress.js b/ui/scripts/cloud.core.ipaddress.js
index 82be41a4adc..7b3cb17426a 100644
--- a/ui/scripts/cloud.core.ipaddress.js
+++ b/ui/scripts/cloud.core.ipaddress.js
@@ -18,15 +18,16 @@
 
 function afterLoadIpJSP() {
     //***** switch between different tabs (begin) ********************************************************************
-    var tabArray = [$("#tab_details"), $("#tab_port_forwarding"), $("#tab_load_balancer")];
-    var tabContentArray = [$("#tab_content_details"), $("#tab_content_port_forwarding"), $("#tab_content_load_balancer")];
-    var afterSwitchFnArray = [ipJsonToDetailsTab, ipJsonToPortForwardingTab, ipJsonToLoadBalancerTab];
+    var tabArray = [$("#tab_details"), $("#tab_port_forwarding"), $("#tab_load_balancer"), $("#tab_vpn")];
+    var tabContentArray = [$("#tab_content_details"), $("#tab_content_port_forwarding"), $("#tab_content_load_balancer"), $("#tab_content_vpn")];
+    var afterSwitchFnArray = [ipJsonToDetailsTab, ipJsonToPortForwardingTab, ipJsonToLoadBalancerTab, ipJsonToVPNTab];
     switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);       
     //***** switch between different tabs (end) **********************************************************************
         
     //dialogs
     initDialog("dialog_acquire_public_ip", 325);
     initDialog("dialog_confirmation_release_ip");
+	initDialog("dialog_enable_vpn");
     
     //*** Acquire New IP (begin) ***
 	$.ajax({
@@ -225,12 +226,16 @@ function ipToRightPanel($midmenuItem1) {
     
     //Port Forwarding tab, Load Balancer tab
     if(isIpManageable(ipObj.domainid, ipObj.account) == true) {     
-	    $("#tab_port_forwarding, #tab_load_balancer").show();	        
+	    $("#tab_port_forwarding, #tab_load_balancer").show();
+		// Only show VPN tab if the IP is the source nat IP
+		if (ipObj.issourcenat == true) {
+			$("#tab_vpn").show();
+		}
         //ipJsonToPortForwardingTab(); 
         //ipJsonToLoadBalancerTab();        
     } 
     else { 
-	    $("#tab_port_forwarding, #tab_load_balancer").hide();
+	    $("#tab_port_forwarding, #tab_load_balancer, #tab_vpn").hide();
 	    //ipClearPortForwardingTab();
 	    //ipClearLoadBalancerTab();
 	    //$("#tab_details").click();
@@ -301,7 +306,93 @@ function ipJsonToLoadBalancerTab() {
             $thisTab.find("#tab_container").show();    	       	      		    						
         }
     });    
-}
+}
+
+function showEnableVPNDialog($thisTab) {
+	$("#dialog_enable_vpn")	
+	.dialog('option', 'buttons', { 						
+		"Enable": function() { 
+			var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");	
+			var ipObj = $midmenuItem1.data("jsonObj");
+			var $thisDialog = $(this);
+			$spinningWheel = $thisDialog.find("#spinning_wheel").show();
+			$.ajax({
+				data: createURL("command=createRemoteAccessVpn&account="+ipObj.account+"&domainid="+ipObj.domainid+"&zoneid="+ipObj.zoneid),
+				dataType: "json",
+				success: function(json) {
+					var jobId = json.createremoteaccessvpnresponse.jobid;
+					var timerKey = "asyncJob_" + jobId;					                       
+					$("body").everyTime(
+						5000,
+						timerKey,
+						function() {
+							$.ajax({
+								data: createURL("command=queryAsyncJobResult&jobId="+jobId),
+								dataType: "json",									                    					                    
+								success: function(json) {		                                                     							                       
+									var result = json.queryasyncjobresultresponse;										                   
+									if (result.jobstatus == 0) {
+										return; //Job has not completed
+									} else {											                    
+										$("body").stopTime(timerKey);				                        
+										$spinningWheel.hide(); 
+																																	 
+										if (result.jobstatus == 1) { // Succeeded 	
+											$thisDialog.dialog("close");
+											$thisTab.find("#tab_container").show();
+											$thisTab.find("#vpn_disabled_msg").hide();
+										} else if (result.jobstatus == 2) { // Failed	
+											var errorMsg = "We were unable to enable VPN access.  Please contact support.";
+											$thisDialog.find("#info_container").text(errorMsg).show();
+										}	
+									}
+								},
+								error: function(XMLHttpResponse) {	                            
+									$("body").stopTime(timerKey);		                       		                        
+									handleErrorInDialog(XMLHttpResponse, $thisDialog); 		                                             
+								}
+							});
+						},
+						0
+					);
+				},
+				error: function(XMLHttpResponse) {
+					handleErrorInDialog(XMLHttpResponse, $thisDialog);			
+				}
+			});    
+		}, 
+		"Cancel": function() { 
+			$thisTab.find("#tab_container").hide();
+			$thisTab.find("#vpn_disabled_msg").show();
+			$(this).dialog("close"); 
+			$thisTab.find("#enable_vpn_link").unbind("click").bind("click", function(event) {
+				showEnableVPNDialog($thisTab);
+			});
+		} 
+	}).dialog("open");
+}
+
+function ipJsonToVPNTab() {
+	var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");	
+	var ipObj = $midmenuItem1.data("jsonObj");	
+	var $thisTab = $("#right_panel_content #tab_content_vpn");  
+	var ipAddress = ipObj.ipaddress;
+	$.ajax({
+        data: createURL("command=listRemoteAccessVpns&publicip="+ipAddress),
+        dataType: "json",
+        success: function(json) {		                    
+            var items = json.listremoteaccessvpnsresponse.remoteaccessvpn;  
+            if (items != null && items.length > 0) {				        			        
+				// List the VPN users
+            } else {
+				showEnableVPNDialog($thisTab);
+			}
+            $thisTab.find("#tab_spinning_wheel").hide();    
+            $thisTab.find("#tab_container").show();    	
+			$thisTab.find("#vpn_disabled_msg").hide();
+        }
+    });    
+}
 
 function ipClearRightPanel() { 
     ipClearDetailsTab();