From 0455920355b377be2944fd080cea585b3ea5cd8d Mon Sep 17 00:00:00 2001 From: Jamie Curnow Date: Mon, 9 Jul 2018 12:21:03 +1000 Subject: [PATCH] Contextual host type colors --- package.json | 1 + src/frontend/js/app/controller.js | 15 ++- src/frontend/js/app/empty/main.ejs | 2 +- src/frontend/js/app/empty/main.js | 13 ++- src/frontend/js/app/nginx/dead/main.ejs | 3 +- src/frontend/js/app/nginx/dead/main.js | 9 +- src/frontend/js/app/nginx/proxy/form.ejs | 34 +++++++ src/frontend/js/app/nginx/proxy/form.js | 98 +++++++++++++++++++ src/frontend/js/app/nginx/proxy/main.ejs | 3 +- src/frontend/js/app/nginx/proxy/main.js | 9 +- .../js/app/nginx/redirection/main.ejs | 3 +- src/frontend/js/app/nginx/redirection/main.js | 9 +- src/frontend/js/app/nginx/stream/main.ejs | 3 +- src/frontend/js/app/nginx/stream/main.js | 9 +- src/frontend/js/models/proxy-host.js | 4 +- src/frontend/scss/tabler-extra.scss | 44 +++++++++ 16 files changed, 231 insertions(+), 28 deletions(-) create mode 100644 src/frontend/js/app/nginx/proxy/form.ejs create mode 100644 src/frontend/js/app/nginx/proxy/form.js diff --git a/package.json b/package.json index ab3c3f52..e52293b5 100644 --- a/package.json +++ b/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", diff --git a/src/frontend/js/app/controller.js b/src/frontend/js/app/controller.js index 0a78388e..2365f90c 100644 --- a/src/frontend/js/app/controller.js +++ b/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 */ diff --git a/src/frontend/js/app/empty/main.ejs b/src/frontend/js/app/empty/main.ejs index dea219a6..11633dfc 100644 --- a/src/frontend/js/app/empty/main.ejs +++ b/src/frontend/js/app/empty/main.ejs @@ -7,5 +7,5 @@ if (subtitle) { %> <% } if (link) { %> - <%- link %> + <%- link %> <% } %> diff --git a/src/frontend/js/app/empty/main.js b/src/frontend/js/app/empty/main.js index 0ec24661..e6f54e45 100644 --- a/src/frontend/js/app/empty/main.js +++ b/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' }, @@ -20,10 +24,11 @@ module.exports = Mn.View.extend({ templateContext: function () { return { - title: this.getOption('title'), - subtitle: this.getOption('subtitle'), - link: this.getOption('link'), - action: typeof this.getOption('action') === 'function' + title: this.getOption('title'), + subtitle: this.getOption('subtitle'), + link: this.getOption('link'), + action: typeof this.getOption('action') === 'function', + btn_color: this.getOption('btn_color') }; } diff --git a/src/frontend/js/app/nginx/dead/main.ejs b/src/frontend/js/app/nginx/dead/main.ejs index 51cf0f74..efa270d2 100644 --- a/src/frontend/js/app/nginx/dead/main.ejs +++ b/src/frontend/js/app/nginx/dead/main.ejs @@ -1,8 +1,9 @@
+

404 Hosts

- Add 404 Host + Add 404 Host
diff --git a/src/frontend/js/app/nginx/dead/main.js b/src/frontend/js/app/nginx/dead/main.js index b1739973..e41a0958 100644 --- a/src/frontend/js/app/nginx/dead/main.js +++ b/src/frontend/js/app/nginx/dead/main.js @@ -42,10 +42,11 @@ module.exports = Mn.View.extend({ })); } else { view.showChildView('list_region', new EmptyView({ - title: 'There are no 404 Hosts', - subtitle: 'Why don\'t you create one?', - link: 'Add 404 Host', - action: function () { + title: 'There are no 404 Hosts', + subtitle: 'Why don\'t you create one?', + link: 'Add 404 Host', + btn_color: 'danger', + action: function () { Controller.showNginxDeadForm(); } })); diff --git a/src/frontend/js/app/nginx/proxy/form.ejs b/src/frontend/js/app/nginx/proxy/form.ejs new file mode 100644 index 00000000..f0e6bce5 --- /dev/null +++ b/src/frontend/js/app/nginx/proxy/form.ejs @@ -0,0 +1,34 @@ +
+
+
<% if (typeof id !== 'undefined') { %>Edit<% } else { %>New<% } %> Proxy Host
+ +
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ + +
+
diff --git a/src/frontend/js/app/nginx/proxy/form.js b/src/frontend/js/app/nginx/proxy/form.js new file mode 100644 index 00000000..67abf474 --- /dev/null +++ b/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(); + } + } +}); diff --git a/src/frontend/js/app/nginx/proxy/main.ejs b/src/frontend/js/app/nginx/proxy/main.ejs index 7d8def8d..5968e3d6 100644 --- a/src/frontend/js/app/nginx/proxy/main.ejs +++ b/src/frontend/js/app/nginx/proxy/main.ejs @@ -1,8 +1,9 @@
+

Proxy Hosts

- Add Proxy Host + Add Proxy Host
diff --git a/src/frontend/js/app/nginx/proxy/main.js b/src/frontend/js/app/nginx/proxy/main.js index 1101f4c8..16aa52f7 100644 --- a/src/frontend/js/app/nginx/proxy/main.js +++ b/src/frontend/js/app/nginx/proxy/main.js @@ -42,10 +42,11 @@ module.exports = Mn.View.extend({ })); } else { view.showChildView('list_region', new EmptyView({ - title: 'There are no Proxy Hosts', - subtitle: 'Why don\'t you create one?', - link: 'Add Proxy Host', - action: function () { + title: 'There are no Proxy Hosts', + subtitle: 'Why don\'t you create one?', + link: 'Add Proxy Host', + btn_color: 'success', + action: function () { Controller.showNginxProxyForm(); } })); diff --git a/src/frontend/js/app/nginx/redirection/main.ejs b/src/frontend/js/app/nginx/redirection/main.ejs index 6e67537d..838f98e9 100644 --- a/src/frontend/js/app/nginx/redirection/main.ejs +++ b/src/frontend/js/app/nginx/redirection/main.ejs @@ -1,8 +1,9 @@
+

Redirection Hosts

- Add Redirection Host + Add Redirection Host
diff --git a/src/frontend/js/app/nginx/redirection/main.js b/src/frontend/js/app/nginx/redirection/main.js index 4a0213ff..c2c60c67 100644 --- a/src/frontend/js/app/nginx/redirection/main.js +++ b/src/frontend/js/app/nginx/redirection/main.js @@ -42,10 +42,11 @@ module.exports = Mn.View.extend({ })); } else { view.showChildView('list_region', new EmptyView({ - title: 'There are no Redirection Hosts', - subtitle: 'Why don\'t you create one?', - link: 'Add Redirection Host', - action: function () { + title: 'There are no Redirection Hosts', + subtitle: 'Why don\'t you create one?', + link: 'Add Redirection Host', + btn_color: 'yellow', + action: function () { Controller.showNginxRedirectionForm(); } })); diff --git a/src/frontend/js/app/nginx/stream/main.ejs b/src/frontend/js/app/nginx/stream/main.ejs index 202cd54b..c367f07a 100644 --- a/src/frontend/js/app/nginx/stream/main.ejs +++ b/src/frontend/js/app/nginx/stream/main.ejs @@ -1,8 +1,9 @@
+

Streams

- Add Stream + Add Stream
diff --git a/src/frontend/js/app/nginx/stream/main.js b/src/frontend/js/app/nginx/stream/main.js index fce7915d..2746274e 100644 --- a/src/frontend/js/app/nginx/stream/main.js +++ b/src/frontend/js/app/nginx/stream/main.js @@ -42,10 +42,11 @@ module.exports = Mn.View.extend({ })); } else { view.showChildView('list_region', new EmptyView({ - title: 'There are no Streams', - subtitle: 'Why don\'t you create one?', - link: 'Add Stream', - action: function () { + title: 'There are no Streams', + subtitle: 'Why don\'t you create one?', + link: 'Add Stream', + btn_color: 'blue', + action: function () { Controller.showNginxStreamForm(); } })); diff --git a/src/frontend/js/models/proxy-host.js b/src/frontend/js/models/proxy-host.js index cba7f8ba..9748c75b 100644 --- a/src/frontend/js/models/proxy-host.js +++ b/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, diff --git a/src/frontend/scss/tabler-extra.scss b/src/frontend/scss/tabler-extra.scss index 55089d1f..e5113483 100644 --- a/src/frontend/scss/tabler-extra.scss +++ b/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; }