I've got file downloading working for the zip file, basically as before - now on to the meat and potatoes

public/js/pages/configBuilder.js

@@ -7,8 +7,11 @@ $(function () {
     var passwordContainer = password.parent();
     var embedConfiguration = $('#want-embedded');
     var embedConfigurationContainer = embedConfiguration.parent();
+    var keyFileContent = null;
+    var buildConfigZip = $('#build-config-zip');
+    var getCertificateForm = $('#get-certificate-form');
 
-    decryptKeyCheckbox.change(function() {
+    decryptKeyCheckbox.change(function () {
         if (this.checked) {
             passwordContainer.show();
             return;
@@ -18,27 +21,86 @@ $(function () {
     });
 
     function handleKeyFile(element) {
-        var keyFileContent = element.target.result;
+        keyFileContent = element.target.result;
 
         console.log(keyFileContent);
         // TODO: Add keyfile to embedded server config using forge
     }
 
-    keyLocationContainer.on('show', function() {
+    // Retrieve zip file with post
+    getCertificateForm.submit(function (event) {
+        event.preventDefault();
+    });
+
+    function handleZipResult(data) {
+        //var blob = new Blob(data, {type: 'application/zip'});
+        var blobUrl = URL.createObjectURL(data);
+        saveBlobUrl(blobUrl, 'config.zip');
+    }
+
+    function handleEmbeddedResult(data) {
+        console.log("I haven't implemented this yet")
+    }
+
+    var downloadElement = document.createElement("a");
+    document.body.appendChild(downloadElement);
+    downloadElement.style = "display: none";
+
+    function saveBlobUrl(url, fileName) {
+        downloadElement.href = url;
+        downloadElement.download = fileName;
+        downloadElement.click();
+        window.URL.revokeObjectURL(url);
+    }
+
+    function submitCertificateForm(event) {
+        console.log('submitCert');
+        var url = getCertificateForm.attr('action'),
+            method = getCertificateForm.attr('method'),
+            data = getCertificateForm.serialize(),
+            dataType = 'application/zip',
+            handler = handleZipResult;
+
+        if (embedConfiguration.checked) {
+            dataType = 'text/plain';
+            handler = handleEmbeddedResult;
+        }
+
+        var xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = function () {
+            if (this.readyState == 4 && this.status == 200) {
+                //this.response is what you're looking for
+                handler(this.response);
+            }
+        };
+        xhr.open(method, url);
+        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+        xhr.responseType = 'blob';
+        xhr.send(data);
+    }
+
+    buildConfigZip.on('click', submitCertificateForm);
+
+    // Load content of embedded server config
+    // Put keyfile content in embedded server config if it is not null
+    // If the decrypt key checkbox is checked, attempt to decrypt the private key in the embedded server config
+    // Offer the decrypted server config up as a file
+
+    keyLocationContainer.on('show', function () {
         decryptKeyCheckboxContainer.show();
     });
 
-    keyLocationContainer.on('hide', function() {
+    keyLocationContainer.on('hide', function () {
         decryptKeyCheckboxContainer.hide();
     });
 
-    decryptKeyCheckboxContainer.on('show', function() {
+    decryptKeyCheckboxContainer.on('show', function () {
         if (decryptKeyCheckbox.prop('checked') === true) {
             passwordContainer.show();
         }
     });
 
-    decryptKeyCheckboxContainer.on('hide', function() {
+    decryptKeyCheckboxContainer.on('hide', function () {
         passwordContainer.hide();
         passwordContainer.val('');
     });

src/Handler/Panel/ConfigBuilder/Action.php

@@ -24,8 +24,13 @@ class Action extends Session
 
         if ($cert !== null && $wantEmbedded !== null) {
             $certModel = CertificateQuery::create()->findOneByUserAndName($this->getUser(), $cert);
-            $this->fillZipWithEmbeddedConfig($zip, $server, $certModel);
+            $config = $this->getEmbeddedConfig($zip, $server, $certModel);
             $name .= '-' . $certModel->getName() . '.' . $certModel->getSerial();
+
+            return $this->getResponse()
+                ->withHeader('Content-Type', 'text/plain')
+                ->withHeader('Content-Disposition', 'attachment; filename="' . $name . '-embedded.conf"')
+                ->write($config);
         }
 
         if ($cert !== null && $wantEmbedded === null) {
@@ -62,14 +67,14 @@ class Action extends Session
     }
 
     /**
-     * @param \ZipArchive $zip
      * @param Server $server
      * @param Certificate $cert
      * @throws \Twig_Error_Loader
      * @throws \Twig_Error_Runtime
      * @throws \Twig_Error_Syntax
+     * @return string
      */
-    public function fillZipWithEmbeddedConfig($zip, $server, $cert)
+    public function getEmbeddedConfig($server, $cert)
     {
         /** @var \Twig_Environment $twig */
         $twig = $this->get('twig');
@@ -85,9 +90,7 @@ class Action extends Session
             $parameters['key'] = $cert->getPrivateKey();
         }
 
-        $config = $twig->render('etc/openvpn-client-embedded.conf.twig', $parameters);
+        return $twig->render('etc/openvpn-client-embedded.conf.twig', $parameters);
-
-        $zip->addFromString('server-embedded.conf', $config);
     }
 
     /**

views/panel/config_builder.html.twig

@@ -13,7 +13,7 @@
 
 {% block panel_contents %}
     <h1 class="title">Config builder</h1>
-    <form target="_blank" action="/panel/config-builder" method="post" class="form">
+    <form target="_blank" action="/panel/config-builder" method="post" class="form" id="get-certificate-form">
         <div class="row">
             <label for="server">Server</label>
             <select name="fingerprint" id="server">
@@ -34,24 +34,23 @@
             <label for="want-embedded">Generate embedded server config</label>
             <input type="checkbox" id="want-embedded" name="want-embedded">
         </div>
-        <!-- TODO: Check data attribute to see if the cert is present -->
-        <!-- If cert is not on server, also ask for this -->
-        <!-- TODO: Make sure this field is not sent when form is submitted -->
-        <div class="row" style="display: none">
-            <label for="key-location">Select key file</label>
-            <input type="file" id="key-location" name="key-location">
-        </div>
-        <div class="row" style="display: none">
-            <label for="decrypt-key">Decrypt embedded private key?</label>
-            <input type="checkbox" id="decrypt-key" name="decrypt-key">
-        </div>
-        <!-- TODO: Make sure this field is not sent when form is submitted -->
-        <div class="row" style="display: none">
-            <label for="password">Password</label>
-            <input type="password" id="password" name="password">
-        </div>
-        <div class="buttons">
-            <button type="submit">Build</button>
-        </div>
     </form>
+
+    <!-- TODO: Check data attribute to see if the cert is present -->
+    <!-- If cert is not on server, also ask for this -->
+    <div class="row" style="display: none">
+        <label for="key-location">Select key file</label>
+        <input type="file" id="key-location" name="key-location">
+    </div>
+    <div class="row" style="display: none">
+        <label for="decrypt-key">Decrypt embedded private key?</label>
+        <input type="checkbox" id="decrypt-key" name="decrypt-key">
+    </div>
+    <div class="row" style="display: none">
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password">
+    </div>
+    <div class="buttons">
+        <button id="build-config-zip" type="submit">Build</button>
+    </div>
 {% endblock %}