From e7eb852c669d46f66a637bd87e5e1a7236b51f25 Mon Sep 17 00:00:00 2001
From: Tim Bazuin <krageon@gmail.com>
Date: Sat, 3 Aug 2019 15:24:37 +0200
Subject: [PATCH] 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     | 76 ++++++++++++++++++++++++++++
 views/panel/config_builder.html.twig | 33 +++++++++++-
 2 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 public/js/pages/configBuilder.js

diff --git a/public/js/pages/configBuilder.js b/public/js/pages/configBuilder.js
new file mode 100644
index 0000000..06b521e
--- /dev/null
+++ b/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();
+    });
+});
\ No newline at end of file
diff --git a/views/panel/config_builder.html.twig b/views/panel/config_builder.html.twig
index 72fe298..d8a76a3 100644
--- a/views/panel/config_builder.html.twig
+++ b/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>