Contextual host type colors

package.json

@@ -16,6 +16,7 @@
     "file-loader": "^1.1.11",
     "imports-loader": "^0.8.0",
     "jquery": "^3.3.1",
+    "jquery-mask-plugin": "^1.14.15",
     "jquery-serializejson": "^2.8.1",
     "mini-css-extract-plugin": "^0.4.0",
     "moment": "^2.22.2",

src/frontend/js/app/controller.js

@@ -42,7 +42,7 @@ module.exports = {
     /**
      * User Form
      *
-     * @param model
+     * @param [model]
      */
     showUserForm: function (model) {
         if (Cache.User.isAdmin()) {
@@ -134,6 +134,19 @@ module.exports = {
         }
     },
 
+    /**
+     * Nginx Proxy Host Form
+     *
+     * @param [model]
+     */
+    showNginxProxyForm: function (model) {
+        if (Cache.User.isAdmin() || Cache.User.canManage('proxy_hosts')) {
+            require(['./main', './nginx/proxy/form'], function (App, View) {
+                App.UI.showModalDialog(new View({model: model}));
+            });
+        }
+    },
+
     /**
      * Nginx Redirection Hosts
      */

src/frontend/js/app/empty/main.ejs

@@ -7,5 +7,5 @@ if (subtitle) { %>
 <% }
 
 if (link) { %>
-    <a class="btn btn-teal" href="#"><%- link %></a>
+    <a class="btn btn-<%- btn_color %>" href="#"><%- link %></a>
 <% } %>

src/frontend/js/app/empty/main.js

@@ -7,6 +7,10 @@ module.exports = Mn.View.extend({
     className: 'text-center m-7',
     template:  template,
 
+    options: {
+        btn_color: 'teal'
+    },
+
     ui: {
         action: 'a'
     },
@@ -23,7 +27,8 @@ module.exports = Mn.View.extend({
             title:     this.getOption('title'),
             subtitle:  this.getOption('subtitle'),
             link:      this.getOption('link'),
-            action:   typeof this.getOption('action') === 'function'
+            action:    typeof this.getOption('action') === 'function',
+            btn_color: this.getOption('btn_color')
         };
     }
 

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

@@ -1,8 +1,9 @@
 <div class="card">
+    <div class="card-status bg-danger"></div>
     <div class="card-header">
         <h3 class="card-title">404 Hosts</h3>
         <div class="card-options">
-            <a href="#" class="btn btn-outline-teal btn-sm ml-2 add-item">Add 404 Host</a>
+            <a href="#" class="btn btn-outline-danger btn-sm ml-2 add-item">Add 404 Host</a>
         </div>
     </div>
     <div class="card-body no-padding min-100">

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

@@ -45,6 +45,7 @@ module.exports = Mn.View.extend({
                             title:     'There are no 404 Hosts',
                             subtitle:  'Why don\'t you create one?',
                             link:      'Add 404 Host',
+                            btn_color: 'danger',
                             action:    function () {
                                 Controller.showNginxDeadForm();
                             }

src/frontend/js/app/nginx/proxy/form.ejs

@@ -0,0 +1,34 @@
+<div class="modal-content">
+    <div class="modal-header">
+        <h5 class="modal-title"><% if (typeof id !== 'undefined') { %>Edit<% } else { %>New<% } %> Proxy Host</h5>
+        <button type="button" class="close cancel" aria-label="Close" data-dismiss="modal">&nbsp;</button>
+    </div>
+    <div class="modal-body">
+        <form>
+            <div class="row">
+                <div class="col-sm-12 col-md-12">
+                    <div class="form-group">
+                        <label class="form-label">Domain Name <span class="form-required">*</span></label>
+                        <input name="domain_name" type="text" class="form-control" placeholder="example.com" value="<%- domain_name %>" required>
+                    </div>
+                </div>
+                <div class="col-sm-8 col-md-8">
+                    <div class="form-group">
+                        <label class="form-label">Forward IP <span class="form-required">*</span></label>
+                        <input type="text" name="forward_ip" class="form-control" placeholder="000.000.000.000" autocomplete="off" maxlength="15" required>
+                    </div>
+                </div>
+                <div class="col-sm-4 col-md-4">
+                    <div class="form-group">
+                        <label class="form-label">Forward Port <span class="form-required">*</span></label>
+                        <input name="forward_port" type="number" class="form-control" placeholder="80" value="<%- forward_port %>" required>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-secondary cancel" data-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-teal save">Save</button>
+    </div>
+</div>

src/frontend/js/app/nginx/proxy/form.js

@@ -0,0 +1,98 @@
+'use strict';
+
+const Mn             = require('backbone.marionette');
+const template       = require('./form.ejs');
+const Controller     = require('../../controller');
+const Cache          = require('../../cache');
+const Api            = require('../../api');
+const App            = require('../../main');
+const ProxyHostModel = require('../../../models/proxy-host');
+
+require('jquery-serializejson');
+require('jquery-mask-plugin');
+
+module.exports = Mn.View.extend({
+    template:  template,
+    className: 'modal-dialog',
+
+    ui: {
+        form:       'form',
+        forward_ip: 'input[name="forward_ip"]',
+        buttons:    '.modal-footer button',
+        cancel:     'button.cancel',
+        save:       'button.save',
+        error:      '.secret-error'
+    },
+
+    events: {
+
+        'click @ui.save': function (e) {
+            e.preventDefault();
+            return;
+
+            this.ui.error.hide();
+            let view = this;
+            let data = this.ui.form.serializeJSON();
+
+            // Manipulate
+            data.roles = [];
+            if ((this.model.get('id') === Cache.User.get('id') && this.model.isAdmin()) || (typeof data.is_admin !== 'undefined' && data.is_admin)) {
+                data.roles.push('admin');
+                delete data.is_admin;
+            }
+
+            data.is_disabled = typeof data.is_disabled !== 'undefined' ? !!data.is_disabled : false;
+            this.ui.buttons.prop('disabled', true).addClass('btn-disabled');
+            let method = Api.Users.create;
+
+            if (this.model.get('id')) {
+                // edit
+                method  = Api.Users.update;
+                data.id = this.model.get('id');
+            }
+
+            method(data)
+                .then(result => {
+                    if (result.id === Cache.User.get('id')) {
+                        Cache.User.set(result);
+                    }
+
+                    if (view.model.get('id') !== Cache.User.get('id')) {
+                        Controller.showUsers();
+                    }
+
+                    view.model.set(result);
+                    App.UI.closeModal(function () {
+                        if (method === Api.Users.create) {
+                            // Show permissions dialog immediately
+                            Controller.showUserPermissions(view.model);
+                        }
+                    });
+                })
+                .catch(err => {
+                    this.ui.error.text(err.message).show();
+                    this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
+                });
+        }
+    },
+
+    onRender: function () {
+        this.ui.forward_ip.mask('099.099.099.099', {
+            clearIfNotMatch: true,
+            placeholder:     '000.000.000.000'
+        });
+        /*
+        this.ui.forward_ip.mask('099.099.099.099', {
+            reverse:         true,
+            clearIfNotMatch: true,
+            placeholder:     '000.000.000.000'
+        });
+        */
+    },
+
+    initialize: function (options) {
+        if (typeof options.model === 'undefined' || !options.model) {
+            this.model = new ProxyHostModel.Model();
+        }
+    }
+});

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

@@ -1,8 +1,9 @@
 <div class="card">
+    <div class="card-status bg-success"></div>
     <div class="card-header">
         <h3 class="card-title">Proxy Hosts</h3>
         <div class="card-options">
-            <a href="#" class="btn btn-outline-teal btn-sm ml-2 add-item">Add Proxy Host</a>
+            <a href="#" class="btn btn-outline-success btn-sm ml-2 add-item">Add Proxy Host</a>
         </div>
     </div>
     <div class="card-body no-padding min-100">

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

@@ -45,6 +45,7 @@ module.exports = Mn.View.extend({
                             title:     'There are no Proxy Hosts',
                             subtitle:  'Why don\'t you create one?',
                             link:      'Add Proxy Host',
+                            btn_color: 'success',
                             action:    function () {
                                 Controller.showNginxProxyForm();
                             }

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

@@ -1,8 +1,9 @@
 <div class="card">
+    <div class="card-status bg-yellow"></div>
     <div class="card-header">
         <h3 class="card-title">Redirection Hosts</h3>
         <div class="card-options">
-            <a href="#" class="btn btn-outline-teal btn-sm ml-2 add-item">Add Redirection Host</a>
+            <a href="#" class="btn btn-outline-yellow btn-sm ml-2 add-item">Add Redirection Host</a>
         </div>
     </div>
     <div class="card-body no-padding min-100">

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

@@ -45,6 +45,7 @@ module.exports = Mn.View.extend({
                             title:     'There are no Redirection Hosts',
                             subtitle:  'Why don\'t you create one?',
                             link:      'Add Redirection Host',
+                            btn_color: 'yellow',
                             action:    function () {
                                 Controller.showNginxRedirectionForm();
                             }

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

@@ -1,8 +1,9 @@
 <div class="card">
+    <div class="card-status bg-blue"></div>
     <div class="card-header">
         <h3 class="card-title">Streams</h3>
         <div class="card-options">
-            <a href="#" class="btn btn-outline-teal btn-sm ml-2 add-item">Add Stream</a>
+            <a href="#" class="btn btn-outline-blue btn-sm ml-2 add-item">Add Stream</a>
         </div>
     </div>
     <div class="card-body no-padding min-100">

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

@@ -45,6 +45,7 @@ module.exports = Mn.View.extend({
                             title:     'There are no Streams',
                             subtitle:  'Why don\'t you create one?',
                             link:      'Add Stream',
+                            btn_color: 'blue',
                             action:    function () {
                                 Controller.showNginxStreamForm();
                             }

src/frontend/js/models/proxy-host.js

@@ -12,8 +12,8 @@ const model = Backbone.Model.extend({
             owner:           null,
             domain_name:     '',
             forward_ip:      '',
-            forward_port:    0,
-            access_list_id:  0,
+            forward_port:    null,
+            access_list_id:  null,
             ssl_enabled:     false,
             ssl_provider:    false,
             ssl_forced:      false,

src/frontend/scss/tabler-extra.scss

@@ -1,4 +1,6 @@
 $teal: #2bcbba;
+$yellow: #f1c40f;
+$blue: #467fcf;
 
 /* For Card bodies where I don't want padding */
 .card-body.no-padding {
@@ -25,6 +27,48 @@ $teal: #2bcbba;
     border-color: $teal;
 }
 
+/* Yellow Outline Buttons */
+.btn-outline-yellow {
+    color: $yellow;
+    background-color: transparent;
+    background-image: none;
+    border-color: $yellow;
+}
+
+.btn-outline-yellow:hover {
+    color: #fff;
+    background-color: $yellow;
+    border-color: $yellow;
+}
+
+.btn-outline-yellow:not(:disabled):not(.disabled):active, .btn-outline-yellow:not(:disabled):not(.disabled).active, .show > .btn-outline-yellow.dropdown-toggle {
+    color: #fff;
+    background-color: $yellow;
+    border-color: $yellow;
+}
+
+/* Blue Outline Buttons */
+.btn-outline-blue {
+    color: $blue;
+    background-color: transparent;
+    background-image: none;
+    border-color: $blue;
+}
+
+.btn-outline-blue:hover {
+    color: #fff;
+    background-color: $blue;
+    border-color: $blue;
+}
+
+.btn-outline-blue:not(:disabled):not(.disabled):active, .btn-outline-blue:not(:disabled):not(.disabled).active, .show > .btn-outline-blue.dropdown-toggle {
+    color: #fff;
+    background-color: $blue;
+    border-color: $blue;
+}
+
+/* dimmer */
+
 .dimmer .loader {
     margin-top: 50px;
 }