Add support for adding Client Certificates to access-lists

Client certificate support is added as a new separate type of option for
access-lists.

This commit is the support code to enable access-lists to contain
Client Certificate references.

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

@@ -8,6 +8,7 @@
             <ul class="nav nav-tabs" role="tablist">
                 <li role="presentation" class="nav-item"><a href="#details" aria-controls="tab1" role="tab" data-toggle="tab" class="nav-link active show" aria-selected="true"><i class="fe fe-zap"></i> <%- i18n('access-lists', 'details') %></a></li>
                 <li role="presentation" class="nav-item"><a href="#auth" aria-controls="tab4" role="tab" data-toggle="tab" class="nav-link" aria-selected="false"><i class="fe fe-users"></i> <%- i18n('access-lists', 'authorization') %></a></li>
+                <li role="presentation" class="nav-item"><a href="#clientca" aria-controls="tab4" role="tab" data-toggle="tab" class="nav-link" aria-selected="false"><i class="fe fe-lock"></i> <%- i18n('access-lists', 'client-certificates') %></a></li>
                 <li role="presentation" class="nav-item"><a href="#access" aria-controls="tab2" role="tab" data-toggle="tab" class="nav-link" aria-selected="false"><i class="fe fe-radio"></i> <%- i18n('access-lists', 'access') %></a></li>
             </ul>
 
@@ -71,6 +72,34 @@
                     </div>
                 </div>
 
+                <!-- Client Certificates -->
+                <div class="tab-pane" id="clientca">
+                    <p>
+                        Client Certificate Authorization via
+                        <a target="_blank" href="http://nginx.org/en/docs/http/ngx_http_ssl_module.html#ssl_client_certificate">
+                            Nginx HTTP SSL
+                        </a>
+                    </p>
+
+                    <div class="row">
+                        <div class="col-sm-10 col-md-10">
+                            <select id="certificate_search" class="form-control custom-select" placeholder="<%- i18n('ssl', 'clientca') %>">
+                            </select>
+
+                        </div>
+                        <div class="col-sm-2 col-md-2">
+                            <div class="btn-list justify-content-end">
+                                <button type="button" class="btn btn-teal clientca_add"><%- i18n('access-lists', 'clientca-add') %></button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <label class="form-label">Authorized Client Certificate Authorities</label>
+                    <div class="clientcas">
+                        <!-- clientcas -->
+                    </div>
+                </div>
+
                 <!-- Access -->
                 <div class="tab-pane" id="access">
                     <p>

frontend/js/app/nginx/access/form.js

@@ -4,8 +4,13 @@ const AccessListModel = require('../../../models/access-list');
 const template        = require('./form.ejs');
 const ItemView        = require('./form/item');
 const ClientView      = require('./form/client');
+const ClientCAView    = require('./form/clientca');
 
 require('jquery-serializejson');
+require('selectize');
+
+const Helpers = require("../../../lib/helpers");
+const certListItemTemplate = require("../certificates-list-item.ejs");
 
 const ItemsView = Mn.CollectionView.extend({
     childView: ItemView
@@ -15,39 +20,52 @@ const ClientsView = Mn.CollectionView.extend({
     childView: ClientView
 });
 
+const ClientCAsView = Mn.CollectionView.extend({
+    childView: ClientCAView
+});
+
 module.exports = Mn.View.extend({
     template:  template,
     className: 'modal-dialog',
 
     ui: {
-        items_region:   '.items',
-        clients_region: '.clients',
-        form:           'form',
-        buttons:        '.modal-footer button',
-        cancel:         'button.cancel',
-        save:           'button.save',
-        access_add:     'button.access_add',
-        auth_add:       'button.auth_add'
+        items_region:       '.items',
+        clients_region:     '.clients',
+        clientcas_region:   '.clientcas',
+        certificate_select: 'select[id="certificate_search"]',
+        form:               'form',
+        buttons:            '.modal-footer button',
+        cancel:             'button.cancel',
+        save:               'button.save',
+        access_add:         'button.access_add',
+        auth_add:           'button.auth_add',
+        clientca_add:       'button.clientca_add',
+        clientca_del:       'button.clientca_del'
     },
 
     regions: {
         items_region:   '@ui.items_region',
-        clients_region: '@ui.clients_region'
+        clients_region: '@ui.clients_region',
+        clientcas_region: '@ui.clientcas_region'
     },
 
     events: {
         'click @ui.save': function (e) {
             e.preventDefault();
 
+            console.log(this.ui.form); // FIXME
+
             if (!this.ui.form[0].checkValidity()) {
                 $('<input type="submit">').hide().appendTo(this.ui.form).click().remove();
                 return;
             }
 
             let view         = this;
-            let form_data    = this.ui.form.serializeJSON();
             let items_data   = [];
             let clients_data = [];
+            let clientcas_data = [];
+
+            let form_data    = this.ui.form.serializeJSON();
 
             form_data.username.map(function (val, idx) {
                 if (val.trim().length) {
@@ -67,7 +85,13 @@ module.exports = Mn.View.extend({
                 }
             });
 
-            if (!items_data.length && !clients_data.length) {
+            if (form_data.certificate_id !== undefined) {
+                form_data.certificate_id.map(function (val, idx) {
+                    clientcas_data.push(parseInt(val, 10))
+                });
+            }
+
+            if (!items_data.length && !clients_data.length && !clientcas_data.length) {
                 alert('You must specify at least 1 Authorization or Access rule');
                 return;
             }
@@ -77,11 +101,10 @@ module.exports = Mn.View.extend({
                 satisfy_any: !!form_data.satisfy_any,
                 pass_auth: !!form_data.pass_auth,
                 items:      items_data,
-                clients:    clients_data
+                clients:    clients_data,
+                clientcas:  clientcas_data
             };
 
-            console.log(data);
-
             let method = App.Api.Nginx.AccessLists.create;
             let is_new = true;
 
@@ -125,16 +148,55 @@ module.exports = Mn.View.extend({
             this.showChildView('items_region', new ItemsView({
                 collection: new Backbone.Collection(items)
             }));
+        },
+        'click @ui.clientca_add': function (e) {
+            e.preventDefault();
+
+            App.Api.Nginx.Certificates.getAllClientCertificates().then((certificates) => {
+                let value = this.ui.certificate_select[0].value;
+                if (value === undefined || value === '') {
+                    return;
+                }
+
+                let certificate_id = parseInt(this.ui.certificate_select[0].value, 10);
+                let cert = certificates.filter((cert) => { return cert.id === certificate_id })[0];
+
+                let clientcas = this.model.get('clientcas');
+                clientcas.push({
+                    certificate: cert
+                });
+
+                this.ui.certificate_select[0].selectize.clear();
+
+                this.showChildView('clientcas_region', new ClientCAsView({
+                    collection: new Backbone.Collection(clientcas)
+                }));
+            })
+        },
+        'click @ui.clientca_del': function (e) {
+            e.preventDefault();
+
+            let certificate_id = parseInt(e.currentTarget.dataset.value, 10);
+
+            let clientcas = this.model.get('clientcas');
+            this.model.set('clientcas', clientcas.filter((e) => { return e.certificate.id !== certificate_id }));
+            clientcas = this.model.get('clientcas');
+
+            this.showChildView('clientcas_region', new ClientCAsView({
+                collection: new Backbone.Collection(clientcas)
+            }));
         }
     },
 
     onRender: function () {
         let items = this.model.get('items');
         let clients = this.model.get('clients');
+        let clientcas = this.model.get('clientcas');
 
         // Ensure at least one field is shown initally
         if (!items.length) items.push({});
         if (!clients.length) clients.push({});
+        if (!clientcas.length) clients.push({});
 
         this.showChildView('items_region', new ItemsView({
             collection: new Backbone.Collection(items)
@@ -143,6 +205,37 @@ module.exports = Mn.View.extend({
         this.showChildView('clients_region', new ClientsView({
             collection: new Backbone.Collection(clients)
         }));
+
+        this.showChildView('clientcas_region', new ClientCAsView({
+            collection: new Backbone.Collection(clientcas)
+        }));
+
+        this.ui.certificate_select.selectize({
+            valueField:       'id',
+            labelField:       'nice_name',
+            searchField:      ['nice_name', 'domain_names'],
+            create:           false,
+            preload:          true,
+            allowEmptyOption: true,
+            render:           {
+                option: function (item) {
+                    item.i18n         = App.i18n;
+                    item.formatDbDate = Helpers.formatDbDate;
+                    return certListItemTemplate(item);
+                }
+            },
+            load:             function (query, callback) {
+                App.Api.Nginx.Certificates.getAllClientCertificates()
+                  .then(rows => {
+                      callback(rows);
+                  })
+                  .catch(err => {
+                      console.error(err);
+                      callback();
+                  });
+            },
+            onLoad:           function () {}
+        });
     },
 
     initialize: function (options) {

frontend/js/app/nginx/access/form/clientca.ejs

@@ -0,0 +1,18 @@
+<input id="cacert-<%=certificate.id%>" class="form-selectgroup-input" name="certificate_id[]" value="<%= certificate.id %>" type="checkbox" checked hidden/>
+<div class="col-auto">
+    <i class="fe fe-shield text-green"></i>
+</div>
+<div class="col flex-fill">
+    <div class="text-truncate">
+        <strong><%= certificate.nice_name %></strong>
+        <div class="text-muted">Expires: <%- formatDbDate(certificate.expires_on, 'Do MMMM YYYY, h:mm a') %></div>
+    </div>
+</div>
+<div class="col-auto align-self-center <% if (certificate.is_deleted == 1) { %>text-danger<% } %>">
+    <% if (certificate.is_deleted == 1) { %><i>Deleted</i><% } %>
+</div>
+<div class="col-auto align-self-center">
+    <button class="btn btn-sm btn-outline-danger btn-icon clientca_del" data-value="<%=certificate.id%>">
+        <i class="fe fe-trash-2"></i>
+    </button>
+</div>

frontend/js/app/nginx/access/form/clientca.js

@@ -0,0 +1,7 @@
+const Mn       = require('backbone.marionette');
+const template = require('./clientca.ejs');
+
+module.exports = Mn.View.extend({
+    template:  template,
+    className: 'row'
+});

frontend/js/app/nginx/access/list/item.ejs

@@ -14,6 +14,9 @@
 <td>
     <%- i18n('access-lists', 'item-count', {count: items.length || 0}) %>
 </td>
+<td>
+    <%- i18n('access-lists', 'clientca-count', {count: clientcas.length || 0}) %>
+</td>
 <td>
     <%- i18n('access-lists', 'client-count', {count: clients.length || 0}) %>
 </td>

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

@@ -2,6 +2,7 @@
     <th width="30">&nbsp;</th>
     <th><%- i18n('str', 'name') %></th>
     <th><%- i18n('access-lists', 'authorization') %></th>
+    <th><%- i18n('access-lists', 'client-certificates') %></th>
     <th><%- i18n('access-lists', 'access') %></th>
     <th><%- i18n('access-lists', 'satisfy') %></th>
     <th><%- i18n('proxy-hosts', 'title') %></th>

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

@@ -73,7 +73,7 @@ module.exports = Mn.View.extend({
             e.preventDefault();
             let query = this.ui.query.val();
 
-            this.fetch(['owner', 'items', 'clients'], query)
+            this.fetch(['owner', 'items', 'clients', 'clientcas'], query)
                 .then(response => this.showData(response))
                 .catch(err => {
                     this.showError(err);
@@ -88,7 +88,7 @@ module.exports = Mn.View.extend({
     onRender: function () {
         let view = this;
 
-        view.fetch(['owner', 'items', 'clients'])
+        view.fetch(['owner', 'items', 'clients', 'clientcas'])
             .then(response => {
                 if (!view.isDestroyed()) {
                     if (response && response.length) {