Revize aca9f61d

Re #8583 Certificate creation - highlight CN if empty

static/create_certificate.html

@@ -117 +117 @@
                 <div class="form-group">
                     <td><label for="subject_CN">Common Name:</label></td>
                     <td class="pl-3">
-                        <input type="text" v-model:value="certificateData.subject.CN" id="subject_CN" name="subject_CN" class="form-control">
+                        <input type="text" v-bind:class="{ 'is-invalid': invalidCN }" v-model:value="certificateData.subject.CN" id="subject_CN" name="subject_CN" class="form-control">
                     </td>
                 </div>
             </tr>

static/js/create_certificate.js

@@ -6 +6 @@
                 notBefore: "",
                 notAfter: "",
                 isSelfSigned: false,
+                invalidCN: false,
                 // available certificate authorities
                 authorities: [],
                 // data of the selected certificate authorities to be displayed in the form
@@ -63 +64 @@
                         return;
                     }
                     if(this.certificateData.subject.CN === "") {
-                        this.showError("CN field must be filled in!") // TODO highlight the field
+                        this.showError("CN field must be filled in!")
+                        this.invalidCN = true;
                         return;
                     }
                     this.certificateData.validityDays = parseInt(this.certificateData.validityDays);
@@ -101 +103 @@
                     var endDate = new Date(new Date().getTime()+(val*24*60*60*1000));
                     this.notAfter = endDate.toDateInputValue(); // init notAfter to today + validityDays
                 },
+                'certificateData.subject.CN': function (val, oldVal) {
+                    if (val !== '') this.invalidCN = false;
+                },
                 'certificateData.CA': function (val, oldVal) {
                     // self-signed certificate - all fields are empty
                     if (val === "null" || val == null) {