mirror of
https://github.com/jc21/nginx-proxy-manager.git
synced 2024-08-30 18:22:48 +00:00
Contextual host type colors
This commit is contained in:
Jamie Curnow
parent
54d220a191
commit
0455920355
@ -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",
|
||||
|
||||
@ -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
|
||||
*/
|
||||
|
||||
@ -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>
|
||||
<% } %>
|
||||
|
||||
@ -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')
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}));
|
||||
|
||||
34
src/frontend/js/app/nginx/proxy/form.ejs
Normal file
34
src/frontend/js/app/nginx/proxy/form.ejs
Normal file
@ -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"> </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>
|
||||
98
src/frontend/js/app/nginx/proxy/form.js
Normal file
98
src/frontend/js/app/nginx/proxy/form.js
Normal file
@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -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">
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}));
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}));
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}));
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user