support both download and push to github (refs #130)

* support both download and push to github * force reload after logout to refresh the csrf token, or generate project will fail
microsoft · Sep 11, 2018 · b2cc2c3 · b2cc2c3
1 parent abc9e04
commit b2cc2c3
Show file tree

Hide file tree

Showing 8 changed files with 208 additions and 53 deletions.
diff --git a/src/main/java/com/microsoft/azure/springcloudplayground/controller/MainController.java b/src/main/java/com/microsoft/azure/springcloudplayground/controller/MainController.java
@@ -11,10 +11,8 @@
 import org.apache.tools.ant.Project;
 import org.apache.tools.ant.taskdefs.Zip;
 import org.apache.tools.ant.types.ZipFileSet;
-import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.ResponseEntity;
 import org.springframework.lang.NonNull;
-import org.springframework.security.oauth2.client.OAuth2AuthorizedClientService;
 import org.springframework.security.oauth2.client.authentication.OAuth2AuthenticationToken;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
@@ -23,6 +21,7 @@
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.servlet.resource.ResourceUrlProvider;
 
+import javax.annotation.Nonnull;
 import java.io.File;
 import java.io.FileInputStream;
 import java.io.IOException;
@@ -124,6 +123,12 @@ public String home(Map<String, Object> model, OAuth2AuthenticationToken token) {
         return "home";
     }
 
+
+    @PostMapping("/push-to-github")
+    public String pushToGithub(@RequestBody @Nonnull ProjectRequest request) {
+        return "push to github not implemented";
+    }
+
     @ResponseBody
     @PostMapping("/project.zip")
     public ResponseEntity<byte[]> getZipProject(@RequestBody @NonNull ProjectRequest request) throws IOException {

diff --git a/src/main/java/com/microsoft/azure/springcloudplayground/security/WebSecurityConfig.java b/src/main/java/com/microsoft/azure/springcloudplayground/security/WebSecurityConfig.java
@@ -10,10 +10,11 @@ public class WebSecurityConfig extends WebSecurityConfigurerAdapter{
 
     @Override
     protected void configure(HttpSecurity http) throws Exception {
-        http.authorizeRequests().anyRequest().permitAll().and().oauth2Login().loginPage("/");
+        http.authorizeRequests().antMatchers("/push-to-github").authenticated()
+                .anyRequest().permitAll()
+                .and().oauth2Login().loginPage("/oauth2/authorization/github");
 
-        http.formLogin().disable()
-                .logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
+        http.logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
                 .logoutSuccessUrl("/").deleteCookies("JSESSIONID").invalidateHttpSession(true);
 
         http.httpBasic().disable();

diff --git a/src/main/resources/static/css/customize.css b/src/main/resources/static/css/customize.css
@@ -41,7 +41,7 @@
 }
 
 .large-bottom-padding {
-    padding-bottom: 4rem;
+    padding-bottom: 6rem;
 }
 
 .module-checkbox {
@@ -187,4 +187,15 @@ body, button, input, p, select, textarea, label, h1, h2, h3, h4 {
 
 .playground-footer .content ul {
     margin-top: 0;
+}
+
+.loading-status {
+    position: absolute;
+    height: 100%;
+}
+
+.loading-status div {
+    display: flex;
+    align-items: center;
+    padding: 0 0.5rem;
 }
diff --git a/src/main/resources/static/js/auth.js b/src/main/resources/static/js/auth.js
@@ -1,8 +1,9 @@
-(function() {
+$(function() {
     var $signInButton = $("#login_link");
     var $signOutButton = $("#logout_link");
     var $userDropdown = $("#user_dropdown");
     var $loggedUser = $("#logged_user");
+    var _hasLoggedIn = false;
 
     $signOutButton.on("click", function() {
         logout();
@@ -29,6 +30,15 @@
     function loggedOutSuccess() {
         $signInButton.removeClass("hidden");
         $userDropdown.addClass("hidden");
-        $loggedUser.text(undefined);
+        $loggedUser.text("");
+        _hasLoggedIn = false;
+        // Force reload to refresh to csrf token, or 403 error will raise up for csrf required post request
+        location.reload(true);
     }
-}())
+
+    _hasLoggedIn = $("#logged_user").text().trim().length > 0 ? true : false;
+
+    window.hasLoggedIn = function () {
+        return _hasLoggedIn;
+    }
+});
diff --git a/src/main/resources/static/js/start.js b/src/main/resources/static/js/start.js
@@ -77,6 +77,10 @@ $(function () {
     var serviceNameHelp = $("#service-name-help");
     var servicePortHelp = $("#port-help");
 
+    azureCheckbox.on("change", addServiceBtnChecker);
+    azureServiceNameInput.on("input", addServiceBtnChecker);
+    azureServicePortInput.on("input", addServiceBtnChecker);
+
     configPort.on("click", function () {
         if (infraPort.hasClass("hidden")) {
             infraPort.addClass("is-active");
@@ -153,24 +157,14 @@ $(function () {
         }
     });
 
-    $("#form").submit(function(event) {
-        var csrfToken = $("input[name='_csrf']").val();
-        var csrfTokenHeader = $("input[name='_csrf_header']").val();
-        var groupId = $("#groupId").val();
-        var artifactId = $("#artifactId").val();
-        var projectName = $("#project-name").val();
-        var description = $("#description").val();
+    $("#generate-project").on("click", function(event) {
+       event.preventDefault();
+    });
 
-        var data = {
-            name: projectName,
-            groupId: groupId,
-            artifactId: artifactId,
-            baseDir: artifactId,
-            description: description,
-            packageName: groupId + "." + artifactId,
-            microServices: allServiceList.serviceList
-        };
 
+    $("#download-project").on("click", function(event) {
+        generateInProgress();
+        var data = getProjectData();
         var xhttp = new XMLHttpRequest();
         xhttp.onreadystatechange = function() {
             var a;
@@ -188,22 +182,71 @@ $(function () {
                     a.click();
                     a.remove();
                 }
+
+                generateSucceed();
+            } else if (xhttp.readyState === 4 && xhttp.status !== 200) {
+                generateFailed();
             }
         };
 
         xhttp.open("POST", '/project.zip');
         xhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
-        xhttp.setRequestHeader(csrfTokenHeader, csrfToken);
+        setCsrfHeader(xhttp);
         // Set responseType as blob for binary responses
         xhttp.responseType = 'blob';
         xhttp.send(JSON.stringify(data));
 
         event.preventDefault();
     });
 
-    azureCheckbox.on("change", addServiceBtnChecker);
-    azureServiceNameInput.on("input", addServiceBtnChecker);
-    azureServicePortInput.on("input", addServiceBtnChecker);
+    $("#push-to-github").on("click", function() {
+        if (!hasLoggedIn()) {
+            showGithubModal();
+            event.preventDefault();
+            return;
+        }
+
+        generateInProgress();
+        var data = getProjectData();
+        var xhttp = new XMLHttpRequest();
+        xhttp.onreadystatechange = function() {
+            if (xhttp.readyState === 4 && xhttp.status === 200) {
+                generateSucceed();
+            } else {
+                generateFailed();
+            }
+        };
+
+        xhttp.open("POST", '/push-to-github');
+        xhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
+
+        setCsrfHeader(xhttp);
+        xhttp.send(JSON.stringify(data));
+    });
+
+    function setCsrfHeader(xhttp) {
+        var csrfToken = $("input[name='_csrf']").val();
+        var csrfTokenHeader = $("input[name='_csrf_header']").val();
+
+        xhttp.setRequestHeader(csrfTokenHeader, csrfToken);
+    };
+
+    function getProjectData() {
+        var groupId = $("#groupId").val();
+        var artifactId = $("#artifactId").val();
+        var projectName = $("#project-name").val();
+        var description = $("#description").val();
+
+        return {
+            name: projectName,
+            groupId: groupId,
+            artifactId: artifactId,
+            baseDir: artifactId,
+            description: description,
+            packageName: groupId + "." + artifactId,
+            microServices: allServiceList.serviceList
+        };
+    }
 
     function isValidServiceName(serviceName) {
         return serviceName && /^([a-zA-Z0-9\-]*)$/.test(serviceName);
@@ -220,8 +263,7 @@ $(function () {
     }
 
     function showMetaDataConfig() {
-        showElements([metaDataConfig]);
-        hideElements([infraModulesSelector, azureModulesSelector]);
+        toggleElements([metaDataConfig], [infraModulesSelector, azureModulesSelector]);
 
         activateStep(metaDataStep);
         disActivateStep(infraStep);
@@ -231,8 +273,7 @@ $(function () {
     }
 
     function showInfraModulesConfig() {
-        hideElements([metaDataConfig, azureModulesSelector]);
-        showElements([infraModulesSelector]);
+        toggleElements([infraModulesSelector], [metaDataConfig, azureModulesSelector]);
 
         completeStep(metaDataStep);
         activateStep(infraStep);
@@ -242,8 +283,7 @@ $(function () {
     }
 
     function showAzureModulesConfig() {
-        hideElements([metaDataConfig, infraModulesSelector]);
-        showElements([azureModulesSelector]);
+        toggleElements([azureModulesSelector], [metaDataConfig, infraModulesSelector]);
 
         completeStep(metaDataStep);
         completeStep(infraStep);
@@ -256,18 +296,6 @@ $(function () {
         $("#form div")[0].scrollIntoView(false);
     }
 
-    function showElements(elements) {
-        elements.forEach(function(element) {
-            element.removeClass("hidden");
-        })
-    }
-
-    function hideElements(elements) {
-        elements.forEach(function(element) {
-            element.addClass("hidden");
-        })
-    }
-
     function activateStep(stepElement) {
         stepElement.className = "step-item is-active";
     }
@@ -372,6 +400,34 @@ $(function () {
         }
     }
 
+    var inProgressLabel = $("#in-progress");
+    var generateSucceedLabel = $("#generate-succeed");
+    var generateFailedLabel = $("#generate-failed");
+
+    function generateInProgress() {
+        toggleElements([inProgressLabel], [generateSucceedLabel, generateFailedLabel]);
+    }
+
+    function generateSucceed() {
+        toggleElements([generateSucceedLabel], [inProgressLabel, generateFailedLabel]);
+    }
+
+    function generateFailed() {
+        toggleElements([generateFailedLabel], [inProgressLabel, generateSucceedLabel]);
+    }
+
+    var githubModal = $("#github-login-modal");
+    var githubModalClose = $("#github-login-modal .delete");
+
+    function showGithubModal() {
+        githubModal.addClass("is-active");
+    }
+
+    githubModalClose.on("click", function(event) {
+       event.preventDefault();
+       githubModal.removeClass("is-active");
+    });
+
     // Initialize already selected infra services
     infraCheckbox.each(function(){
         updateInfraService($(this), false);

diff --git a/src/main/resources/static/js/utils.js b/src/main/resources/static/js/utils.js
@@ -0,0 +1,16 @@
+function showElements(elements) {
+    elements.forEach(function(element) {
+        element.removeClass("hidden");
+    })
+}
+
+function hideElements(elements) {
+    elements.forEach(function(element) {
+        element.addClass("hidden");
+    })
+}
+
+function toggleElements(elementsToShow, elementsToHide) {
+    showElements(elementsToShow);
+    hideElements(elementsToHide);
+}