Add button to add custom certificate in certificate list

Author: badkeyy

frontend/js/app/empty/main.ejs

@@ -6,6 +6,10 @@ if (subtitle) { %>
     <p class="h4 text-muted font-weight-normal mb-7"><%- subtitle %></p>
 <% }
 
-if (link) { %>
-    <a class="btn btn-<%- btn_color %>" href="#"><%- link %></a>
+if (links && links.length) { %>
+    <% links.forEach(function(link, index) { %>
+        <div style="margin-bottom: 10px;">
+            <a class="btn btn-<%- btn_color %>" href="#" data-index="<%- index %>"><%- link %></a>
+        </div>
+    <% }); %>
 <% } %>

frontend/js/app/empty/main.js

@@ -6,7 +6,9 @@ module.exports = Mn.View.extend({
     template:  template,
 
     options: {
-        btn_color: 'teal'
+        btn_color: 'teal',
+        links: [],      // Added to accept multiple links
+        actions: []     // Added to accept multiple actions
     },
 
     ui: {
@@ -16,17 +18,19 @@ module.exports = Mn.View.extend({
     events: {
         'click @ui.action': function (e) {
             e.preventDefault();
-            this.getOption('action')();
+            const index = $(e.currentTarget).data('index');
+            this.getOption('actions')[index]();
         }
     },
 
     templateContext: function () {
         return {
-            title:     this.getOption('title'),
-            subtitle:  this.getOption('subtitle'),
-            link:      this.getOption('link'),
-            action:    typeof this.getOption('action') === 'function',
-            btn_color: this.getOption('btn_color')
+            title:      this.getOption('title'),
+            subtitle:   this.getOption('subtitle'),
+            links:      this.getOption('links'),    // Changed to array
+            actions:    this.getOption('actions'),  // Changed to array
+            hasActions: this.getOption('actions').length > 0,
+            btn_color:  this.getOption('btn_color')
         };
     }
 

frontend/js/app/nginx/access/main.js

@@ -45,12 +45,14 @@ module.exports = Mn.View.extend({
         this.showChildView('list_region', new EmptyView({
             title:      App.i18n('access-lists', 'empty'),
             subtitle:   App.i18n('all-hosts', 'empty-subtitle', {manage: manage}),
-            link:       manage ? App.i18n('access-lists', 'add') : null,
+            links:       manage ? [App.i18n('access-lists', 'add')] : [],
             btn_color:  'teal',
             permission: 'access_lists',
-            action:     function () {
-                App.Controller.showNginxAccessListForm();
-            }
+            actions:     [
+                function () {
+                    App.Controller.showNginxAccessListForm();
+                }
+            ]
         }));
     },
 

frontend/js/app/nginx/certificates/main.js

@@ -45,12 +45,16 @@ module.exports = Mn.View.extend({
         this.showChildView('list_region', new EmptyView({
             title:      App.i18n('certificates', 'empty'),
             subtitle:   App.i18n('all-hosts', 'empty-subtitle', {manage: manage}),
-            link:       manage ? App.i18n('certificates', 'add') : null,
+            links:      manage ? [App.i18n('certificates', 'add-letsencrypt'), App.i18n('certificates', 'add-custom')] : [],
+            actions:    [
+                function () {
+                    App.Controller.showNginxCertificateForm();
+                }, 
+                function () {
+                    App.Controller.showNginxCertificateForm(new CertificateModel.Model({provider: 'custom'}));
+            }],
             btn_color:  'pink',
-            permission: 'certificates',
-            action:     function () {
-                App.Controller.showNginxCertificateForm();
-            }
+            permission: 'certificates'
         }));
     },
 

frontend/js/app/nginx/dead/main.js

@@ -45,12 +45,14 @@ module.exports = Mn.View.extend({
         this.showChildView('list_region', new EmptyView({
             title:      App.i18n('dead-hosts', 'empty'),
             subtitle:   App.i18n('all-hosts', 'empty-subtitle', {manage: manage}),
-            link:       manage ? App.i18n('dead-hosts', 'add') : null,
+            links:       manage ? [App.i18n('dead-hosts', 'add')] : [],
             btn_color:  'danger',
             permission: 'dead_hosts',
-            action:     function () {
-                App.Controller.showNginxDeadForm();
-            }
+            actions:     [
+                function () {
+                    App.Controller.showNginxDeadForm();
+                }
+            ]
         }));
     },
 

frontend/js/app/nginx/proxy/main.js

@@ -41,16 +41,17 @@ module.exports = Mn.View.extend({
 
     showEmpty: function() {
         let manage = App.Cache.User.canManage('proxy_hosts');
-
         this.showChildView('list_region', new EmptyView({
             title:      App.i18n('proxy-hosts', 'empty'),
             subtitle:   App.i18n('all-hosts', 'empty-subtitle', {manage: manage}),
-            link:       manage ? App.i18n('proxy-hosts', 'add') : null,
+            links:      manage ? [App.i18n('proxy-hosts', 'add')] : [],
+            actions:    [
+                function () {
+                    App.Controller.showNginxProxyForm();
+                }
+            ],
             btn_color:  'success',
             permission: 'proxy_hosts',
-            action:     function () {
-                App.Controller.showNginxProxyForm();
-            }
         }));
     },
 

frontend/js/app/nginx/redirection/main.js

@@ -44,12 +44,14 @@ module.exports = Mn.View.extend({
         this.showChildView('list_region', new EmptyView({
             title:      App.i18n('redirection-hosts', 'empty'),
             subtitle:   App.i18n('all-hosts', 'empty-subtitle', {manage: manage}),
-            link:       manage ? App.i18n('redirection-hosts', 'add') : null,
+            links:       manage ? [App.i18n('redirection-hosts', 'add')] : [],
             btn_color:  'yellow',
             permission: 'redirection_hosts',
-            action:     function () {
-                App.Controller.showNginxRedirectionForm();
-            }
+            actions:     [
+                function () {
+                    App.Controller.showNginxRedirectionForm();
+                }
+            ]
         }));
     },
 

frontend/js/app/nginx/stream/main.js

@@ -45,12 +45,14 @@ module.exports = Mn.View.extend({
         this.showChildView('list_region', new EmptyView({
             title:      App.i18n('streams', 'empty'),
             subtitle:   App.i18n('all-hosts', 'empty-subtitle', {manage: manage}),
-            link:       manage ? App.i18n('streams', 'add') : null,
+            links:       manage ? [App.i18n('streams', 'add')] : [],
             btn_color:  'blue',
             permission: 'streams',
-            action:     function () {
-                App.Controller.showNginxStreamForm();
-            }
+            actions:     [
+                function () {
+                    App.Controller.showNginxStreamForm();
+                }
+            ]
         }));
     },
 

frontend/js/i18n/messages.json

@@ -185,6 +185,8 @@
       "title": "SSL Certificates",
       "empty": "There are no SSL Certificates",
       "add": "Add SSL Certificate",
+      "add-letsencrypt": "Add SSL Certificate with Let's Encrypt",
+      "add-custom": "Add Custom SSL Certificate",
       "form-title": "Add {provider, select, letsencrypt{Let's Encrypt} other{Custom}} Certificate",
       "delete": "Delete SSL Certificate",
       "delete-confirm": "Are you sure you want to delete this SSL Certificate? Any hosts using it will need to be updated later.",