Iframe tag replaced with div tag. Context Path and HTTPS settings. (#9)

* Changed so sub pages is inject to div tag. Underscore is valid to be specified in SubscriptionName.

* Fixed visually sorting list arraws css class.

* Fixed alot of small fixes and pages that did not load properly with new way of loading sub pages.

* Some minor visual improvements in subscription datatables and login page.

* Solved alot of css/js conflicts which caused some issues with menus and buttons.

* Solved knockout observables cleanup when Subscription page is reloaded.

* Changed so Knockout object applybindings to a div tag dom object so it easier can be cleaned and used in webui.

* Solved issue with menu arrow button that didn't minimize vertical menu bar. Fixed Save subscription button that had stopped working.

* Added back some css templates that was commented out and that is needed.

* Added new properties file which has now settings for address context path and secure HTTPS.

Author: tobiasake

src/main/java/com/ericsson/ei/frontend/EIRequestsController.java

@@ -72,6 +72,8 @@ public class EIRequestsController {
 
 	private String backendServerHost;
     private int backendServerPort;
+    private String backendContextPath;
+    private boolean useSecureHttp;
 
     private static final String APPLICATION_JSON = "application/json";
 
@@ -91,9 +93,33 @@ public int getBackendServerPort() {
     public void setBackendServerPort(int backendServerPort) {
         this.backendServerPort = backendServerPort;
     }
+
+    public String getBackendContextPath() {
+        return backendContextPath;
+    }
+
+    public void setBackendContextPath(String backendContextPath) {
+        this.backendContextPath = backendContextPath;
+    }
+    
+    public boolean getUseSecureHttp() {
+        return useSecureHttp;
+    }
+
+    public void setUseSecureHttp(boolean useSecureHttp) {
+        this.useSecureHttp = useSecureHttp;
+    }
 
     public String getEIBackendSubscriptionAddress() {
-    	return "http://" + this.getBackendServerHost() + ":" + this.getBackendServerPort();
+    	String httpMethod = "http";
+    	if (useSecureHttp) {
+    		httpMethod = "https";
+    	}
+    	
+    	if (backendContextPath != null && !backendContextPath.isEmpty()) {
+        	return httpMethod + "://" + this.getBackendServerHost() + ":" + this.getBackendServerPort() + "/" + backendContextPath;
+    	}
+    	return httpMethod + "://" + this.getBackendServerHost() + ":" + this.getBackendServerPort();
 	}
 
 

src/main/java/com/ericsson/ei/frontend/WebController.java

@@ -31,6 +31,8 @@ public class WebController {
     private int frontendServicePort;
     private String backendServerHost;
     private int backendServerPort;
+    private String frontendContextPath;
+    private boolean useSecureHttp;
 
     private String eiffelDocumentationUrls;
 
@@ -49,11 +51,21 @@ public String greeting(Model model) {
 
     @RequestMapping("/subscriptionpage.html")
     public String subscription(Model model) {
-
-        String frontendServiceUrl = String.format("http://%s:%d", frontendServiceHost, frontendServicePort);
-
+    	
+    	String httpMethod = "http";
+    	if (useSecureHttp) {
+    		httpMethod = "https";
+    	}
+
+    	String frontendServiceUrl;
+    	if (frontendContextPath != null && !frontendContextPath.isEmpty()) {
+    		frontendServiceUrl = String.format("%s://%s:%d/%s", httpMethod , frontendServiceHost, frontendServicePort, frontendContextPath);
+    	}
+    	else {
+    		frontendServiceUrl = String.format("%s://%s:%d", httpMethod, frontendServiceHost, frontendServicePort);
+    	}
         model.addAttribute("frontendServiceUrl", frontendServiceUrl);  // inject in DOM for AJAX etc
-
+                
         return "subscription";
     }
 
@@ -110,6 +122,22 @@ public void setFrontendServicePort(int frontendServicePort) {
         this.frontendServicePort = frontendServicePort;
     }
 
+    public String getFrontendContextPath() {
+        return frontendContextPath;
+    }
+
+    public void setFrontendContextPath(String contextPath) {
+        this.frontendContextPath = contextPath;
+    }
+    
+    public boolean getUseSecureHttp() {
+        return useSecureHttp;
+    }
+
+    public void setUseSecureHttp(boolean useSecureHttp) {
+        this.useSecureHttp = useSecureHttp;
+    }
+    
     public String getBackendServerHost() {
         return backendServerHost;
     }

src/main/resources/application.properties

@@ -5,12 +5,20 @@ spring.application.name=ei-frontend
   #${project.artifactId}
 
 server.port=8080
+#server.ssl.key-store: <keystore.p12>
+#server.ssl.key-store-password: <mypassword>
+#server.ssl.keyStoreType: <PKCS12>
+#server.ssl.keyAlias: <tomcat>
+
 
 ######## EI Backend
 ei.frontendServiceHost=localhost
 ei.frontendServicePort=8080
+ei.frontendContextPath=
 ei.backendServerHost=localhost
 ei.backendServerPort=8090
+ei.backendContextPath=
+ei.useSecureHttp=false
 
 ###### Subscription Template file ########
 ei.subscriptionFilePath=subscriptions/subscriptionsTemplate.json

src/main/resources/static/js/eiInfo.js

@@ -9,8 +9,8 @@ jQuery(document).ready(function() {
 
     var tableTdKeyWidth = '250';
 
-    var body = document.getElementsByTagName('body')[0];
-
+    var body = document.getElementById('eiPageFrame');
+    
     function createTable() {
         var tbl = document.createElement('table');
         tbl.style.width = '40%';

src/main/resources/static/js/main.js

@@ -6,21 +6,19 @@ jQuery(document).ready(function() {
 	var frontendServiceUrl = $('#frontendServiceUrl').text();
 
 	document.getElementById("testRulesBtn").onclick = function() {		  
-		
-    	var iframe = document.getElementById("mainFrame");
-    	iframe.src = frontendServiceUrl + "/testRules.html";    
+
+    	$("#mainFrame").load("testRules.html");
 	}
 
 	document.getElementById("eiInfoBtn").onclick = function() {		  
-		
-    	var iframe = document.getElementById("mainFrame");
-    	iframe.src = frontendServiceUrl + "/eiInfo.html";    
+  
+    	$("#mainFrame").load("eiInfo.html");
 	}
 
 
 	function loadLoginPage() {
-    	var iframe = document.getElementById("mainFrame");
-    	iframe.src = frontendServiceUrl + "/login.html";  
+ 
+    	$("#mainFrame").load("login.html");
 	}
 
 	document.getElementById("loginBtn").onclick = function() {		  
@@ -34,25 +32,23 @@ jQuery(document).ready(function() {
 	}
 
 	document.getElementById("registerBtn").onclick = function() {		  
-		
-    	var iframe = document.getElementById("mainFrame");
-    	iframe.src = frontendServiceUrl + "/register.html";
+
+    	$("#mainFrame").load("register.html");
 	}
 
 	document.getElementById("forgotPasswordBtn").onclick = function() {		  
-		
-    	var iframe = document.getElementById("mainFrame");
-    	iframe.src = frontendServiceUrl + "/forgot-password.html";
+
+    	$("#mainFrame").load("forgot-password.html");
 	}
 
 	function loadMainPage() {
-		var iframe = document.getElementById("mainFrame");
-    	iframe.src = frontendServiceUrl + "/subscriptionpage.html";
+
+    	$("#mainFrame").load("subscriptionpage.html");
 	}
 
 	document.getElementById("subscriptionBtn").onclick = function() {
 
-    	loadMainPage();    
+    	loadMainPage();
 	}
 
 	function loadDocumentLinks(){

src/main/resources/static/js/subscription.js

@@ -4,6 +4,7 @@ var table;
 var frontendServiceUrl;
 var subscriptionTemplateFile;
 
+
 jQuery(document).ready(function() {
 
 
@@ -59,7 +60,9 @@ jQuery(document).ready(function() {
     // Check EI Backend Server Status ########################################
     function checkEiBackendServer() {
     	var EIConnBtn = document.getElementById("btnEIConnection");
-
+    	if (EIConnBtn == null ) {
+    		return;
+    	}
     	   $.ajax({
     		      url: frontendServiceUrl + "/subscriptions/testDummySubscription",
     		      contentType : 'application/json; charset=utf-8',
@@ -114,8 +117,8 @@ jQuery(document).ready(function() {
 
         // Validating subscriptionName inputs
         this.subscriptionName.subscribe(function (subscriptionName) {
-        	if (!(/[a-z]|[A-Z]|[0-9]/.test(String(subscriptionName).slice(-1)))) {
-                $.jGrowl("Only numbers and letters is valid to type in subscriptionName field.", {
+        	if (!(/[a-z]|[A-Z]|[0-9]|[\_]/.test(String(subscriptionName).slice(-1)))) {
+                $.jGrowl("Only numbers,letters and underscore is valid to type in subscriptionName field.", {
                     sticky : false,
                     theme : 'Error'
                 });
@@ -203,11 +206,12 @@ jQuery(document).ready(function() {
 
     };// var SubscriptionViewModel = function(){
 
-
+	// Cleanup old ViewModel and Knockout Obeservables from previous page load.
+    var observableObject = $('#ViewModelDOMObject')[0]; 
+    ko.cleanNode(observableObject);
     // Apply bindings
-    var vm = new SubscriptionViewModel();
-    ko.applyBindings(vm);
-
+	var vm = new SubscriptionViewModel();
+    ko.applyBindings(vm,  document.getElementById("ViewModelDOMObject"));
 
 
     // /Stop ## Knockout #####################################################
@@ -291,7 +295,7 @@ jQuery(document).ready(function() {
             },
 
         ],
-
+      
     });
     // /Stop ## Datatables ##################################################
 
@@ -665,7 +669,7 @@ jQuery(document).ready(function() {
 
 
     // /Start ## Save Subscription ##########################################
-    $('div.modal-content').on( 'click', 'button.save_record', function (event) {
+    $('div.modal-footer').on( 'click', 'button.save_record', function (event) {
 
         event.stopPropagation();
         event.preventDefault();

src/main/resources/static/vendor/bootstrap/css/bootstrap.css.map

@@ -7,35 +7,18 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>Eiffel Intelligence Subscription Handling</title>
 
-<!-- Style Sheets -->
-
-<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
-
-<!-- JavaScript imports -->
-
-<script type="text/javascript" src="assets/jquery/jquery-3.2.1.min.js"></script>
-<script type="text/javascript"
-	src="assets/bootstrap/js/bootstrap.min.js"></script>
-<script type="text/javascript"
-	src="assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
-<script type="text/javascript" src="assets/knockout/knockout-3.4.2.js"></script>
-<script type="text/javascript" src="assets/knockout/knockout.mapping.js"></script>
-<script type="text/javascript"
-	src="assets/jquery-confirm/js/jquery-confirm.js"></script>
-<script type="text/javascript" src="assets/jgrowl/jquery.jgrowl.min.js"></script>
-<script type="text/javascript" src="assets/jquery-ui/jquery-ui.min.js"></script>
-<script type="text/javascript" src="assets/datatables/js/jquery.dataTables.min.js"></script>
-<script type="text/javascript" src="assets/datatables/js/dataTables.bootstrap.min.js"></script>
-
 
 </head>
 
 <body class="nav-link">
-	<div class="hidden" id="frontendServiceUrl"
+	<div class="hidden" id="frontendServiceUrl" style="display: none"
 		th:text="${frontendServiceUrl}"></div>
-	<div class="hidden" id="backendServerUrl"
+	<div class="hidden" id="backendServerUrl" style="display: none"
 		th:text="${backendServerUrl}"></div>
-	
+		
+	<div id="eiPageFrame"></div>
+
 	<script type="text/javascript" src="js/eiInfo.js"></script>
+	
 </body>
 </html>

src/main/resources/static/vendor/bootstrap/css/bootstrap.min.css.map

@@ -13,6 +13,9 @@
   <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
   <!-- Custom styles for this template-->
   <link href="css/sb-admin.css" rel="stylesheet" />
+
+
+    
 </head>
 
 <body class="bg-dark">
@@ -37,11 +40,6 @@ <h4>Forgot your password?</h4>
       </div>
     </div>
   </div>
-  <!-- Bootstrap core JavaScript-->
-  <script src="vendor/jquery/jquery.min.js"></script>
-  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
-  <!-- Core plugin JavaScript-->
-  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
 </body>
 
 </html>