commit 9cac7fd4be43409a8a6b9e5295e13cf4450022db
Author: Jan Pašek <janpasek97@gmail.com>
Date:   Sat Apr 3 10:51:48 2021 +0200

    Re #8475 - Create certificate, binding input fields

diff --git a/static/create_certificate.html b/static/create_certificate.html
index 9f0c4af..2960d6c 100644
--- a/static/create_certificate.html
+++ b/static/create_certificate.html
@@ -13,7 +13,7 @@
                 <div class="form-group">
                     <td><label for="CA">Certificate Authority:</label></td>
                     <td class="pl-3">
-                        <select v-model="selectedCA" name="CA" id="CA" class="form-control">
+                        <select v-model="certificateData.CA" name="CA" id="CA" class="form-control">
                             <option value=null>Self-Signed</option>
                             <option is="ca-select-item"
                                     v-for="ca in authorities"
@@ -26,13 +26,13 @@
             <tr>
                 <div class="form-group">
                     <td><label for="validity_start">Validity start:</label></td>
-                    <td class="pl-3"><input type="date" id="validity_start" name="validity_start" class="form-control"></td>
+                    <td class="pl-3"><input v-model="certificateData.notBefore" type="date" id="validity_start" name="validity_start" class="form-control"></td>
                 </div>
             </tr>
             <tr>
                 <div class="form-group">
                     <td><label for="validity_end">Validity end:</label></td>
-                    <td class="pl-3"><input type="date" id="validity_end" name="validity_end" class="form-control"></td>
+                    <td class="pl-3"><input v-model="certificateData.notAfter" type="date" id="validity_end" name="validity_end" class="form-control"></td>
                 </div>
             </tr>
             <tr>
@@ -100,58 +100,72 @@
             <tr>
                 <div class="form-group">
                     <td><label for="subject_CN">Common Name:</label></td>
-                    <td class="pl-3"><input type="text" id="subject_CN" name="subject_CN" class="form-control"></td>
+                    <td class="pl-3">
+                        <input type="text" v-model:value="certificateData.subject.CN" id="subject_CN" name="subject_CN" class="form-control">
+                    </td>
                 </div>
             </tr>
             <tr>
                 <div class="form-group">
                     <td><label for="subject_C">Country Code:</label></td>
-                    <td class="pl-3"><input type="text" id="subject_C" name="subject_C" class="form-control"></td>
+                    <td class="pl-3">
+                        <input type="text"  v-model:value="certificateData.subject.C" id="subject_C" name="subject_C" class="form-control">
+                    </td>
                 </div>
             </tr>
             <tr>
                 <div class="form-group">
                     <td><label for="subject_L">Locality:</label></td>
-                    <td class="pl-3"><input type="text" id="subject_L" name="subject_L" class="form-control"></td>
+                    <td class="pl-3">
+                        <input type="text" v-model:value="certificateData.subject.L" id="subject_L" name="subject_L" class="form-control">
+                    </td>
                 </div>
             </tr>
             <tr>
                 <div class="form-group">
                     <td><label for="subject_ST">Province/State:</label></td>
-                    <td class="pl-3"><input type="text" id="subject_ST" name="subject_ST" class="form-control"></td>
+                    <td class="pl-3">
+                        <input type="text" v-model:value="certificateData.subject.ST" id="subject_ST" name="subject_ST" class="form-control">
+                    </td>
                 </div>
             </tr>
             <tr>
                 <div class="form-group">
                     <td><label for="subject_O">Organization:</label></td>
-                    <td class="pl-3"><input type="text" id="subject_O" name="subject_O" class="form-control"></td>
+                    <td class="pl-3">
+                        <input type="text" v-model:value="certificateData.subject.O" id="subject_O" name="subject_O" class="form-control">
+                    </td>
                 </div>
             </tr>
             <tr>
                 <div class="form-group">
                     <td><label for="subject_OU">Organization Unit:</label></td>
-                    <td class="pl-3"><input type="text" id="subject_OU" name="subject_OU" class="form-control"></td>
+                    <td class="pl-3">
+                        <input type="text" v-model:value="certificateData.subject.OU" id="subject_OU" name="subject_OU" class="form-control">
+                    </td>
                 </div>
             </tr>
             <tr>
                 <div class="form-group">
                     <td><label for="subject_emailAddress">Email:</label></td>
-                    <td class="pl-3"><input type="email" id="subject_emailAddress" name="subject_emailAddress" class="form-control"></td>
+                    <td class="pl-3">
+                        <input type="email" v-model:value="certificateData.subject.emailAddress" id="subject_emailAddress" name="subject_emailAddress" class="form-control">
+                    </td>
                 </div>
             </tr>
             <tr>
                 <td>Usage:</td>
                 <td class="form-check">
-                    <input class="form-check-input" type="checkbox" id="isCA" name="isCA" value="CA">
+                    <input class="form-check-input" v-model="certificateData.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA">
                     <label class="form-check-label" for="isCA">CA</label><br>
 
-                    <input class="form-check-input" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature">
+                    <input class="form-check-input" v-model="certificateData.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature">
                     <label class="form-check-label" for="isDigitalSignature">Digital Signature</label><br>
 
-                    <input class="form-check-input" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication">
+                    <input class="form-check-input" v-model="certificateData.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication">
                     <label class="form-check-label" for="isAuthentication">Authentication</label><br>
 
-                    <input class="form-check-input" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS">
+                    <input class="form-check-input" v-model="certificateData.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS">
                     <label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>
                 </td>
             </tr>
diff --git a/static/js/create_certificate.js b/static/js/create_certificate.js
index a1a127e..ab7131e 100644
--- a/static/js/create_certificate.js
+++ b/static/js/create_certificate.js
@@ -2,7 +2,6 @@
             el: "#create-certificate-content",
             data: {
                 authorities: [{id: 5, CN: "Test"}],
-                selectedCA: null,
                 selectedCAData: {
                     CN: "",
                     C:  "",
@@ -11,10 +10,35 @@
                     O:  "",
                     OU: "",
                     emailAddress: ""
+                },
+                certificateData: {
+                    subject: {
+                        CN: "",
+                        C: "",
+                        L: "",
+                        ST: "",
+                        O: "",
+                        OU: "",
+                        emailAddress: ""
+                    },
+                    notBefore: "",
+                    notAfter: "",
+                    usage: {
+                        CA: false,
+                        authentication: false,
+                        digitalSignature: false,
+                        SSL: false
+                    },
+                    CA: null
                 }
             },
+            mounted () {
+              this.certificateData.notBefore = new Date().toDateInputValue();
+              var endDate = new Date(new Date().getTime()+(30*24*60*60*1000));
+              this.certificateData.notAfter = endDate.toDateInputValue();
+            },
             watch: {
-                selectedCA: function (val, oldVal) {
+                'certificateData.CA': function (val, oldVal) {
                     if (val === "null" || val == null) {
                         createCertificateApp.selectedCAData = {
                             CN: "",
diff --git a/static/js/utilities.js b/static/js/utilities.js
index 92fda13..75066fb 100644
--- a/static/js/utilities.js
+++ b/static/js/utilities.js
@@ -9,4 +9,10 @@ function download(filename, text) {
   element.click();
 
   document.body.removeChild(element);
-}
\ No newline at end of file
+}
+
+Date.prototype.toDateInputValue = (function() {
+    var local = new Date(this);
+    local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
+    return local.toJSON().slice(0,10);
+});
\ No newline at end of file
