Allow inputs to update

Author: duhruh

frontend/js/app/nginx/certificates/form.ejs

@@ -42,7 +42,7 @@
                             <div class="form-label"><%- i18n('certificates', 'other-certificate-key') %><span class="form-required">*</span></div>
                             <div class="custom-file">
                                 <input type="file" class="custom-file-input" name="meta[other_certificate_key]" id="other_certificate_key" required>
-                                <label class="custom-file-label"><%- i18n('str', 'choose-file') %></label>
+                                <label id="other_certificate_key_label" class="custom-file-label"><%- i18n('str', 'choose-file') %></label>
                             </div>
                         </div>
                     </div>
@@ -51,7 +51,7 @@
                             <div class="form-label"><%- i18n('certificates', 'other-certificate') %><span class="form-required">*</span></div>
                             <div class="custom-file">
                                 <input type="file" class="custom-file-input" name="meta[other_certificate]" id="other_certificate">
-                                <label class="custom-file-label"><%- i18n('str', 'choose-file') %></label>
+                                <label id="other_certificate_label" class="custom-file-label"><%- i18n('str', 'choose-file') %></label>
                             </div>
                         </div>
                     </div>
@@ -60,7 +60,7 @@
                             <div class="form-label"><%- i18n('certificates', 'other-intermediate-certificate') %></div>
                             <div class="custom-file">
                                 <input type="file" class="custom-file-input" name="meta[other_intermediate_certificate]" id="other_intermediate_certificate">
-                                <label class="custom-file-label"><%- i18n('str', 'choose-file') %></label>
+                                <label id="other_intermediate_certificate_label" class="custom-file-label"><%- i18n('str', 'choose-file') %></label>
                             </div>
                         </div>
                     </div>

frontend/js/app/nginx/certificates/form.js

@@ -19,10 +19,13 @@ module.exports = Mn.View.extend({
         cancel:                         'button.cancel',
         save:                           'button.save',
         other_certificate:              '#other_certificate',
+        other_certificate_label:        '#other_certificate_label',
         other_certificate_key:          '#other_certificate_key',
-        other_intermediate_certificate: '#other_intermediate_certificate'
+        other_certificate_key_label:    '#other_certificate_key_label',
+        other_intermediate_certificate: '#other_intermediate_certificate',
+        other_intermediate_certificate_label: '#other_intermediate_certificate_label'
     },
-
+    
     events: {
         'click @ui.save': function (e) {
             e.preventDefault();
@@ -120,9 +123,20 @@ module.exports = Mn.View.extend({
                     alert(err.message);
                     this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
                 });
+        },
+        'change @ui.other_certificate_key': function(e){
+            this.setFileName("other_certificate_key_label", e)
+        },
+        'change @ui.other_certificate': function(e){
+            this.setFileName("other_certificate_label", e)
+        },
+        'change @ui.other_intermediate_certificate': function(e){
+            this.setFileName("other_intermediate_certificate_label", e)
         }
     },
-
+    setFileName(ui, e){
+        this.getUI(ui).text(e.target.files[0].name)
+    },
     templateContext: {
         getLetsencryptEmail: function () {
             return typeof this.meta.letsencrypt_email !== 'undefined' ? this.meta.letsencrypt_email : App.Cache.User.get('email');