fixed all the little form popup logic and the loading of the key file, now to fix decrypting it and adding it to the embedded config

public/js/pages/configBuilder.js

@@ -0,0 +1,76 @@
+$(function () {
+    var keyLocation = $('#key-location');
+    var keyLocationContainer = keyLocation.parent();
+    var decryptKeyCheckbox = $('#decrypt-key');
+    var decryptKeyCheckboxContainer = decryptKeyCheckbox.parent();
+    var password = $('#password');
+    var passwordContainer = password.parent();
+    var embedConfiguration = $('#want-embedded');
+    var embedConfigurationContainer = embedConfiguration.parent();
+
+    decryptKeyCheckbox.change(function() {
+        if (this.checked) {
+            passwordContainer.show();
+            return;
+        }
+
+        passwordContainer.hide();
+    });
+
+    function handleKeyFile(element) {
+        var keyFileContent = element.target.result;
+
+        console.log(keyFileContent);
+        // TODO: Add keyfile to embedded server config using forge
+    }
+
+    keyLocationContainer.on('show', function() {
+        decryptKeyCheckboxContainer.show();
+    });
+
+    keyLocationContainer.on('hide', function() {
+        decryptKeyCheckboxContainer.hide();
+    });
+
+    decryptKeyCheckboxContainer.on('show', function() {
+        if (decryptKeyCheckbox.prop('checked') === true) {
+            passwordContainer.show();
+        }
+    });
+
+    decryptKeyCheckboxContainer.on('hide', function() {
+        passwordContainer.hide();
+        passwordContainer.val('');
+    });
+
+    function setFileSelectVisibility() {
+        var selectedOption = $('#certificate option:selected');
+
+        if (selectedOption.data('hasPrivateKey') == '1') {
+            keyLocationContainer.show();
+            return;
+        }
+
+        keyLocationContainer.hide();
+    }
+
+    keyLocation.change(function () {
+        var file = this.files[0];
+        var reader = new FileReader();
+
+        reader.onload = handleKeyFile;
+
+        reader.readAsText(file);
+    });
+
+    embedConfiguration.change(function () {
+        if (this.checked) {
+            setFileSelectVisibility();
+            decryptKeyCheckboxContainer.show();
+            return;
+        }
+
+        decryptKeyCheckboxContainer.hide();
+        keyLocationContainer.hide();
+    });
+});

views/panel/config_builder.html.twig

@@ -1,5 +1,16 @@
 {% extends "panel.html.twig" %}
 
+{% block head %}
+    {{ parent() }}
+
+    <script src="/js/jquery.min.js"></script>
+    <script src="/js/forge.min.js"></script>
+    <script src="/js/jszip.min.js"></script>
+    <script src="/js/FileSaver.min.js"></script>
+    <script src="/js/pages/configBuilder.js"></script>
+
+{% endblock %}
+
 {% block panel_contents %}
     <h1 class="title">Config builder</h1>
     <form target="_blank" action="/panel/config-builder" method="post" class="form">
@@ -15,10 +26,30 @@
             <label for="certificate">Certificate</label>
             <select name="cert" id="certificate">
                 {% for certificate in user.getActiveCertificates() %}
-                    <option value="{{ certificate.getName() }}">{{ certificate.getName() }}</option>
+                    <option value="{{ certificate.getName() }}" data-has-private-key="{{ certificate.hasPrivateKey() ? '1' : '0' }}">{{ certificate.getName() }}</option>
                 {% endfor %}
             </select>
         </div>
+        <div class="row">
+            <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>