2018-07-22 11:16:48 +08:00
< html >
< head >
< link rel = "stylesheet" type = "text/css" href = "../../css/adapter.css" / >
< link rel = "stylesheet" type = "text/css" href = "../../lib/css/materialize.css" >
< script type = "text/javascript" src = "../../lib/js/jquery-3.2.1.min.js" > < / script >
< script type = "text/javascript" src = "../../socket.io/socket.io.js" > < / script >
< script type = "text/javascript" src = "../../js/translate.js" > < / script >
< script type = "text/javascript" src = "../../lib/js/materialize.js" > < / script >
< script type = "text/javascript" src = "../../js/adapter-settings.js" > < / script >
< script type = "text/javascript" src = "words.js" > < / script >
< script type = "text/javascript" >
var supportedSockets = ['socketio'];
var BACK_FILE_NAME = 'login-bg.png';
function initDropZone() {
document.getElementById('files').addEventListener('change', handleFileSelect, false);
var dropZone = document.getElementById('drop_zone');
if (dropZone) {
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
dropZone.addEventListener('dragend', function () {
$(this).css({background: 'white'});
console.log('dragend');
return false;
}, false);
dropZone.addEventListener('dragstart', function () {
console.log('dragstart');
}, false);
dropZone.addEventListener('dragleave', function () {
$(this).css({background: 'white'});
}, false);
dropZone.addEventListener('dragenter', function () {
$(this).css({background: 'gray'});
}, false);
}
}
function showBackImage() {
// Read names of files for gong
socket.emit('readFile', 'web.' + instance, BACK_FILE_NAME, function (err, file) {
if (!err & & file) {
var arrayBufferView = new Uint8Array(file);
var blob = new Blob([arrayBufferView], {type: 'image/png'});
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( blob );
$('#login_image').attr('src', imageUrl).show();
} else {
$('#login_image').hide();
}
});
}
function uploadFile(file, callback) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = function(e) {
socket.emit('writeFile', 'web.' + instance, BACK_FILE_NAME, e.target.result, function () {
if (callback) callback(BACK_FILE_NAME);
});
};
// Read in the image file as a data URL.
reader.readAsArrayBuffer(file);
}
function handleFileSelect(evt) {
evt.preventDefault();
var files = evt.target.files || evt.dataTransfer.files; // FileList object
$('#drop_indcator').hide();
// files is a FileList of File objects. List some properties.
if (!files.length) return;
var f = files[0];
if (f.size > 5 * 1024 * 1024) {
showMessage(_('File %s is too big. Maximum 5MB', escape(f.name)));
$('#files').val('');
return;
}
uploadFile(f, function (name) {
$('#files').val('');
showBackImage();
});
}
function handleFileSelectDrop(evt) {
$('#drop_indcator').hide();
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
if (f.size > 1024 * 1024) {
showMessage(_('File %s is too big. Maximum 1MB', escape(f.name)));
return;
}
console.log(escape(f.name));
}
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
$('#drop_indcator').show();
}
function showHideSettings(id) {
var $secure = $('#secure');
var $auth = $('#auth');
if ($secure.prop('checked')) {
$('.col-certPublic').show();
$('.col-certPrivate').show();
$('.col-certChained').show();
$('.le-settings').removeClass('disabled');
if ($('#leEnabled').prop('checked')) {
$('.le-sub-settings').show();
if ($('#leUpdate').prop('checked')) {
$('.le-sub-settings-update').show();
} else {
$('.le-sub-settings-update').hide();
}
} else {
$('.le-sub-settings').hide();
}
} else {
$('.col-certPublic').hide();
$('.col-certPrivate').hide();
$('.col-certChained').hide();
$('.le-settings').addClass('disabled');
}
if ($auth.prop('checked')) {
$('.tab-login').removeClass('disabled');
$('#defaultUser').val('admin');
$('.col-defaultUser').hide();
$('.col-ttl').show();
if ((id === 'auth' || id === 'secure') & & !$secure.prop('checked')) {
confirmMessage(_('Unsecure_Auth'), _('Warning!'), 'security', [_('Ignore warning'), _('Disable authentication')], function (result) {
if (result === 1) {
$('#auth').prop('checked', false).trigger('change');
showToast(null, _('Authentication was deactivated'));
}
});
}
} else {
$('.tab-login').addClass('disabled');
$('.col-defaultUser').show();
$('.col-ttl').hide();
}
if ($('#whiteListEnabled').prop('checked')) {
$('.white-list-settings').show();
} else {
$('.white-list-settings').hide();
}
if ($('#loginBackgroundImage').prop('checked')) {
$('.background').show();
} else {
$('.background').hide();
}
}
// the function loadSettings has to exist ...
function load(settings, onChange) {
if (!settings) return;
if (!settings.lePort) settings.lePort = 80;
if (settings.whiteListEnabled === undefined) settings.whiteListEnabled = false;
getIPs(function(ips) {
for (var i = 0; i < ips.length ; i + + ) {
$('#bind').append('< option value = "' + ips[i].address + '" > ' + ips[i].name + '< / option > ');
}
$('#bind.value').val(settings.bind).select();
});
$('#socketio')
.append('< option value = "none" > ' + _('none') + '< / option > ')
.append('< option value = "" > ' + _('integrated') + '< / option > ');
var count = 0;
for (var i = 0; i < supportedSockets.length ; i + + ) {
count++;
getAdapterInstances(supportedSockets[i], function (res) {
if (!res) return;
for (var t = 0; t < res.length ; t + + ) {
$('#socketio').append('< option value = "' + res[t]._id + '" > ' + res[t].common.name + ' [' + res[t]._id.replace('system.adapter.', '') + ']< / option > ');
}
if (!--count) {
var $socketio = $('#socketio');
$socketio.val(settings.socketio);
if (settings.socketio !== '') {
$('.socketio').hide();
}
$socketio.on('change', function () {
if ($(this).val() === '') {
$('.socketio').show();
} else {
$('.socketio').hide();
}
});
$socketio.select();
}
});
}
$('.value').each(function () {
var key = $(this).attr('id');
var $value = $('#' + key + '.value');
if ($value.attr('type') === 'checkbox') {
$value.prop('checked', settings[key]).on('change', function() {
showHideSettings($(this).attr('id'));
onChange();
});
} else {
$value.val(settings[key]).on('change', function() {
onChange();
}).keyup(function() {
$(this).trigger('change');
});
}
});
onChange(false);
fillSelectCertificates('#certPublic', 'public', settings.certPublic);
fillSelectCertificates('#certPrivate', 'private', settings.certPrivate);
fillSelectCertificates('#certChained', 'chained', settings.certChained);
fillUsers('#defaultUser', settings.defaultUser);
showHideSettings();
initDropZone();
showBackImage();
$('#auth').on('change', function () {
updateNameSelects();
setDefaultIpUserToDefaultUser();
});
$('#defaultUser').on('change', function () {
setDefaultIpUserToDefaultUser();
});
$('.btn-floating.white-list-settings').on('click', function () {
addWhiteListTableRow(true, true);
});
$('#loginBackgroundColorHelper').on('change', function () {
$('#loginBackgroundColor').val($(this).val());
});
if (settings.loginBackgroundColor) {
$('#loginBackgroundColorHelper').val(settings.loginBackgroundColor);
}
$('#loginBackgroundColor').on('change', function () {
$('#loginBackgroundColorHelper').val($(this).val() || 'black');
});
applyWhiteListSettings(settings, onChange);
}
function save(callback) {
var obj = {};
$('.value').each(function () {
var $this = $(this);
if ($this.attr('type') === 'checkbox') {
obj[$this.attr('id')] = $this.prop('checked');
} else {
obj[$this.attr('id')] = $this.val();
}
});
if ($('#secure').prop('checked') & & (!$('#certPrivate').val() || !$('#certPublic').val())) {
showToast(null, _('Set certificates or load it first in the system settings (right top).'));
return;
}
obj['whiteListSettings'] = getWhiteListSettings();
callback(obj);
}
var ips = {};
var inputIndex = 0;
function addWhiteListTableRow(change, later) {
var table = document.getElementById('whiteListTable');
var row = table.insertRow(2);
var rowCount = table.rows.length;
var defaultRowIndex = rowCount - 1;
var colCount = table.rows[defaultRowIndex].cells.length;
for (var i = 0; i < colCount ; i + + ) {
var newCell = row.insertCell(i);
var cellClass = $(table.rows[defaultRowIndex].cells[i]).attr('class');
if (cellClass.indexOf('defaultUserName') !== -1) {
newCell.innerHTML = '< select class = "select-username" / > ';
} else {
$(newCell).addClass(cellClass);
newCell.innerHTML = table.rows[defaultRowIndex].cells[i].innerHTML;
}
if (newCell.innerHTML === 'default') {
var id = 'input_' + inputIndex++;
var ip = '192.168.0.1';
ips[id] = ip;
newCell.innerHTML = '< input name = "ip" size = "15" maxlength = "255" id = "' + id + '" value = "' + ip + '" / > ';
}
if (newCell.childNodes[0].type === 'checkbox') {
newCell.childNodes[0].checked = false;
}
}
$('.select-username:not(:has(option))').each(function () {
fillNameSelect($(this));
});
if (change & & changedCallback) changedCallback();
defaultHandling();
if (later) {
$('#tab-white-list').find('select').select();
}
return row;
}
function deleteWhiteListTableRow(index) {
try {
changedCallback & & changedCallback();
var table = document.getElementById('whiteListTable');
var rowCount = table.rows.length;
if (index === rowCount - 1) return;
table.deleteRow(index);
} catch (e) {
showError(e);
}
}
function getWhiteListSettings() {
var settings = {};
try {
var table = document.getElementById('whiteListTable');
var rowCount = table.rows.length;
for (var i = 2; i < rowCount ; i + + ) {
var row = table.rows[i];
var ip = (i === (rowCount - 1)) ? 'default' : $(row.cells[1]).find('input').val();
var userSelected = (i === (rowCount - 1)) ? $(row.cells[2]).html().toLowerCase() : $(row.cells[2]).find('select').val();
settings[ip] = {
user: userSelected,
object: {},
state: {},
file: {}
};
for (var c = 2; c < row.cells.length ; c + + ) {
var $cell = $(row.cells[c]).find('input');
var permobject = $cell.attr('permobject');
var perm = $cell.attr('perm');
if (permobject & & perm & & settings[ip].hasOwnProperty(permobject)) {
settings[ip][permobject][perm] = $cell.prop('checked');
}
}
}
} catch (e) {
alert(e);
}
return settings;
}
function validateIp(ip) {
if (ip.indexOf('*') !== -1 & & ip.lastIndexOf('.') > ip.indexOf('*')) {
return false;
}
var expression = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$|^(([a-zA-Z]|[a-zA-Z][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z]|[A-Za-z][A-Za-z0-9\-]*[A-Za-z0-9])$|^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/;
return expression.test(ip.replace('*', '111'));
}
function createWhiteListTable(whiteListSettings) {
var table = document.getElementById('whiteListTable');
var rowCount = table.rows.length;
for (var i = rowCount - 2; i > 1; i--) {
table.deleteRow(i);
}
if (whiteListSettings) {
Object.keys(whiteListSettings).forEach(function (key) {
rowCount = table.rows.length;
if (key !== 'default') {
addWhiteListTableRow(false);
}
});
}
}
var changedCallback = null;
var whiteListSettings = null;
function applyWhiteListSettings(settings, onChange) {
try {
whiteListSettings = settings['whiteListSettings'];
createWhiteListTable(whiteListSettings);
fillNameSelects(whiteListSettings);
changedCallback = onChange;
$('#tab-white-list').find('select').select();
} catch (e) {
alert(e);
}
}
function handleIpChange() {
var ip = $(this).val();
var id = $(this).attr('id');
if (ip & & !validateIp(ip)) {
showToast(null, _('The provided IP is not valid'));
if (ips.hasOwnProperty(id)) {
$(this).val(ips[id]);
}
} else {
ips[id] = ip;
}
changedCallback & & changedCallback();
}
function wireClickEvents() {
$('.delete-btn-clmn')
.off('click')
.on('click', function () {
var rowIndex = $(this).parent().parent().children().index($(this).parent());
deleteWhiteListTableRow(rowIndex + 2);
});
}
function wireChangeEvents() {
var table = document.getElementById('whiteListTable');
var rowCount = table.rows.length;
for (var i = 2; i < rowCount ; i + + ) {
var row = table.rows[i];
if (i !== rowCount - 1) {
$(row.cells[1])
.find('input')
.off('change')
.off('keyup')
.on('change', handleIpChange)
.on('keyup', handleIpChange);
}
$(row.cells[2])
.find('select')
.off('change')
.on('change', function () {
changedCallback & & changedCallback();
});
for (var c = 3; c < row.cells.length ; c + + ) {
$(row.cells[c])
.find('input')
.off('change')
.on('change', function () {
changedCallback & & changedCallback();
});
}
}
$('.select-username')
.off('change')
.on('change', function () {
changedCallback & & changedCallback();
});
}
function hideDefaultDeleteBtn() {
$('.delete-btn').show();
$('.delete-btn:last').hide();
}
function addOptionIfAbsent($e, value, valueText, defaultUser) {
if (!$e.find('option[value="' + value + '"]').length) {
$e.append('< option value = "' + value + '" ' + ( ( defaultUser = == value ) ? ' selected ' : ' ' ) + ' > ' + valueText + '< / option > ');
}
}
function fillNameSelect($this, defaultUser) {
for (var u in users) {
if (!users.hasOwnProperty(u)) continue;
var value = users[u].common.name;
var valueText = users[u].common.name[0].toUpperCase() + users[u].common.name.substring(1);
addOptionIfAbsent($this, value, valueText, defaultUser);
}
}
var users = {};
function fillNameSelects(whiteListSettings) {
if (!whiteListSettings) return;
getUsers(function (err, response) {
users = response;
$('.select-username')
.off('change')
.each(function () {
fillNameSelect($(this));
});
applyRowSettings(whiteListSettings);
defaultHandling();
});
}
function applyRowSettings(whiteListSettings) {
if (!whiteListSettings) return;
var table = document.getElementById('whiteListTable');
var rowCount = table.rows.length;
var i = 2;
Object.keys(whiteListSettings).forEach(function (key) {
var row = key === 'default' ? table.rows[rowCount - 1] : table.rows[i++];
setRowSettings(row, key, whiteListSettings[key]);
});
}
function setRowSettings(row, ip, ipSettings) {
var $ip = $(row.cells[1]).find('input');
$ip.val(ip);
for (var c = 2; c < row.cells.length ; c + + ) {
var $cell = $(row.cells[c]).find('input');
if (c > 2) {
var permobject = $cell.attr('permobject');
var perm = $cell.attr('perm');
if (ipSettings.hasOwnProperty(permobject) & & ipSettings[permobject].hasOwnProperty(perm)) {
$cell.prop('checked', ipSettings[permobject][perm]);
}
} else {
$(row.cells[2]).find('select').val(ipSettings.user).trigger('change');
}
}
}
function setDefaultIpUserToDefaultUser() {
var auth = $('#auth').prop('checked');
var defaultUser = auth ? 'Auth' : $('#defaultUser').find('option:selected').text();
$('.defaultUserName').html(defaultUser);
}
function updateNameSelects() {
var auth = $('#auth').prop('checked');
var $selects = $('.select-username');
if (auth) {
$selects.each(function () {
addOptionIfAbsent($(this), 'auth', 'Auth');
});
} else {
$selects.find('option[value="auth"]').remove();
}
$selects.select();
}
function defaultHandling() {
hideDefaultDeleteBtn();
updateNameSelects();
setDefaultIpUserToDefaultUser();
wireClickEvents();
wireChangeEvents();
// workaround for materialize checkbox problem
$('#whiteListTable').find('input[type="checkbox"]+span').off('click').on('click', function () {
var $input = $(this).prev();
if (!$input.prop('disabled')) {
$input.prop('checked', !$input.prop('checked')).trigger('change');
}
});
}
< / script >
< style >
#whiteListTable {
font-size: smaller;
border-radius: 0;
}
#whiteListTable th,
#whiteListTable td {
border-radius: 0;
}
.whiteListTableHeader {
background-color: lightgrey;
color: darkslateblue;
}
.whiteListTableHeader th {
text-align: center;
}
.whiteListTableHeader td {
text-align: center;
padding: 5px;
}
.whiteListTableUnevenBlock {
background-color: gainsboro;
}
.whiteListTableEvenBlock {
background-color: lavender;
}
.m .select-wrapper+label {
top: 100% !important;
}
#drop_zone {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
font-size: 20pt;
2018-09-16 09:46:35 +08:00
/*font-weight: bold;*/
font-family: Arial,PingFangSC-Light,"Microsoft YaHei",sans-serif;
2018-07-22 11:16:48 +08:00
color: #bbb;;
min-width: 320px;
min-height: 200px
}
.error {
border: 2px solid red;
}
#login_image {
width: 320px;
height: auto;
}
< / style >
< / head >
< body >
< div class = "m adapter-container" >
< div class = "row" >
< div class = "col s12" >
< ul class = "tabs" >
< li class = "tab col s2" > < a href = "#tab-main" class = "translate active" > Main settings< / a > < / li >
< li class = "tab col s2 le-settings" > < a href = "#tab-le" class = "translate" > Let's Encrypt SSL< / a > < / li >
< li class = "tab col s2" > < a href = "#tab-white-list" class = "translate" > White List< / a > < / li >
< li class = "tab col s2 tab-login" > < a href = "#tab-login" class = "translate" > Background< / a > < / li >
< / ul >
< / div >
< div id = "tab-main" class = "col s12 page" >
< div class = "row" >
< div class = "col s12 m4 l2" >
< img src = "web.png" class = "logo" >
< / div >
< / div >
< div class = "row" >
< div class = "col s12 m8 l5" >
< select class = "value" id = "bind" > < / select >
< label class = "translate" for = "bind" > IP:< / label >
< / div >
< div class = "col s12 m4 l1" >
< input class = "value" id = "port" size = "5" maxlength = "5" type = "number" / >
< label class = "translate" for = "port" > Port:< / label >
< / div >
< / div >
< div class = "row" >
< div class = "col s12 m3" >
< input class = "value" id = "secure" type = "checkbox" / >
< label class = "translate" for = "secure" > Secure(HTTPS):< / label >
< / div >
< div class = "col s12 m3 col-certPublic" >
< select id = "certPublic" class = "value" > < / select >
< label class = "translate" for = "certPublic" > Public certificate:< / label >
< / div >
< div class = "col s12 m3 col-certPrivate" >
< select id = "certPrivate" class = "value" > < / select >
< label class = "translate" for = "certPrivate" > Private certificate:< / label >
< / div >
< div class = "col s12 m3 col-certChained" >
< select id = "certChained" class = "value" > < / select >
< label class = "translate" for = "certChained" > Chained certificate:< / label >
< / div >
< / div >
< div class = "row" >
< div class = "col s12 m3" >
< input class = "value" id = "auth" type = "checkbox" / >
< label class = "translate" for = "auth" > Authentication:< / label >
< / div >
< div class = "col s12 m3 col-defaultUser" >
< select class = "value" id = "defaultUser" > < / select >
< label class = "translate" for = "defaultUser" > Run as:< / label >
< / div >
< div class = "col s12 m3 col-ttl" >
< input class = "value" id = "ttl" / >
< label class = "translate" for = "ttl" > Login timeout(sec):< / label >
< / div >
< / div >
< div class = "row" >
< div class = "col s12 m3" >
< input class = "value" id = "cache" type = "checkbox" / >
< span class = "translate" for = "cache" > Cache:< / span >
< / div >
< div class = "col s12 m3" >
< input type = "checkbox" class = "value" id = "simpleapi" / >
< label class = "translate" for = "simpleapi" > Internal 'Simple API':< / label >
< / div >
< / div >
< div class = "row" >
< div class = "col s12 m3" >
< select class = "value" id = "socketio" > < / select >
< label for = "socketio" > < span > Socket.IO Instance (Optional):< / span > (< span class = "translate" style = "padding-left: 20px" > socket_help< / span > )< / label >
< / div >
< div class = "col s12 m3 socketio" >
< input type = "checkbox" class = "value" id = "forceWebSockets" / >
< span class = "translate" for = "forceWebSockets" > Force Web-Sockets:< / span >
< / div >
< / div >
< / div >
< div id = "tab-le" class = "col s12 page" >
< div class = "row" >
< div class = "col s12" >
< img src = "../../img/le.png" class = "logo-le" >
< / div >
< / div >
< div class = "row" >
< div class = "col s11" >
< input class = "value" id = "leEnabled" type = "checkbox" data-link = "lets-encrypt-certificates" / >
< label for = "leEnabled" class = "translate" > Use Lets Encrypt certificates:< / label >
< / div >
< / div >
< div class = "row le-sub-settings" >
< div class = "col s11" >
< input class = "value" id = "leUpdate" type = "checkbox" data-link = "lets-encrypt-certificates" / >
< label for = "leUpdate" class = "translate" > Use this instance for automatic update:< / label >
< / div >
< / div >
< div class = "row le-sub-settings le-sub-settings-update" >
< div class = "col s11 m4 l2" >
< input class = "value" id = "lePort" type = "number" size = "5" maxlength = "5" data-link = "lets-encrypt-certificates" / >
< label for = "lePort" class = "translate" > Port to check the domain:< / label >
< / div >
< / div >
< / div >
< div id = "tab-white-list" class = "col s12 page" >
< div >
< input id = "whiteListEnabled" class = "value" type = "checkbox" / >
< span class = "translate" for = "whiteListEnabled" > Enabled:< / span >
< / div >
< a class = "btn-floating waves-effect waves-light white-list-settings" >
< i class = "material-icons" > add< / i >
< / a >
< table id = "whiteListTable" cellpadding = "3" cellspacing = "2" border = "0" class = "white-list-settings" >
< thead >
< tr class = "whiteListTableHeader" >
< th rowspan = "2" colspan = "2" class = "translate" > IP< / th >
< th rowspan = "2" class = "translate" > User< / th >
< th colspan = "4" class = "translate" > object< / th >
< th colspan = "5" class = "translate" > state< / th >
< th colspan = "5" class = "translate" > file< / th >
< / tr >
< tr class = "whiteListTableHeader" >
< th class = "translate" > read< / th >
< th class = "translate" > list< / th >
< th class = "translate" > write< / th >
< th class = "translate" > remove< / th >
< th class = "translate" > read< / th >
< th class = "translate" > list< / th >
< th class = "translate" > write< / th >
< th class = "translate" > create< / th >
< th class = "translate" > remove< / th >
< th class = "translate" > read< / th >
< th class = "translate" > list< / th >
< th class = "translate" > write< / th >
< th class = "translate" > create< / th >
< th class = "translate" > remove< / th >
< / tr >
< / thead >
< tbody id = "whiteListTableBody" >
< tr >
< td class = "whiteListTableUnevenBlock delete-btn-clmn" >
< a class = "btn-floating waves-effect waves-light red delete-btn" href = "#" > < i class = "material-icons" > delete< / i > < / a >
< / td >
< td class = "whiteListTableUnevenBlock" > default< / td >
< td class = "whiteListTableUnevenBlock defaultUserName" > defaultName< / td >
< td class = "whiteListTableEvenBlock" >
< input permobject = "object" perm = "read" type = "checkbox" checked = "true" class = "filled-in" / >
< span > < / span >
< / td >
< td class = "whiteListTableEvenBlock" >
< input permobject = "object" perm = "list" type = "checkbox" checked = "true" class = "filled-in" / >
< span > < / span >
< / td >
< td class = "whiteListTableEvenBlock" >
< input permobject = "object" perm = "write" type = "checkbox" checked = "true" class = "filled-in" / >
< span > < / span >
< / td >
< td class = "whiteListTableEvenBlock" >
< input permobject = "object" perm = "delete" type = "checkbox" checked = "true" class = "filled-in" / >
< span > < / span >
< / td >
< td class = "whiteListTableUnevenBlock" >
< input permobject = "state" perm = "read" type = "checkbox" checked = "true" class = "filled-in" / >
< span > < / span >
< / td >
< td class = "whiteListTableUnevenBlock" >
< input permobject = "state" perm = "list" type = "checkbox" checked = "true" class = "filled-in" / >
< span > < / span >
< / td >
< td class = "whiteListTableUnevenBlock" >
< input permobject = "state" perm = "write" type = "checkbox" checked = "true" class = "filled-in" / >
< span > < / span >
< / td >
< td class = "whiteListTableUnevenBlock" >
< input permobject = "state" perm = "create" type = "checkbox" checked = "true" class = "filled-in" / >
< span > < / span >
< / td >
< td class = "whiteListTableUnevenBlock" >
< input permobject = "state" perm = "delete" type = "checkbox" checked = "true" class = "filled-in" / >
< span > < / span >
< / td >
< td class = "whiteListTableEvenBlock" >
< input permobject = "file" perm = "read" type = "checkbox" checked = "true" class = "filled-in" / >
< span > < / span >
< / td >
< td class = "whiteListTableEvenBlock" >
< input permobject = "file" perm = "list" type = "checkbox" checked = "true" class = "filled-in" / >
< span > < / span >
< / td >
< td class = "whiteListTableEvenBlock" >
< input permobject = "file" perm = "write" type = "checkbox" checked = "true" class = "filled-in" / >
< span > < / span >
< / td >
< td class = "whiteListTableEvenBlock" >
< input permobject = "file" perm = "create" type = "checkbox" checked = "true" class = "filled-in" / >
< span > < / span >
< / td >
< td class = "whiteListTableEvenBlock" >
< input permobject = "file" perm = "delete" type = "checkbox" checked = "true" class = "filled-in" / >
< span > < / span >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< div id = "tab-login" class = "col s12 page" >
< div class = "row" >
< div class = "col s12 m8 l4" >
< input class = "value" id = "loginBackgroundColor" type = "text" / >
< label class = "translate" for = "loginBackgroundColor" > Background color of the login screen< / label >
< input id = "loginBackgroundColorHelper" type = "color" / >
< / div >
< / div >
< div class = "row" >
< div class = "col s12 m4 l4" >
< input class = "value" id = "loginBackgroundImage" type = "checkbox" / >
< span class = "translate" for = "loginBackgroundImage" > Background image< / span >
< / div >
< / div >
< div class = "row" >
< div class = "col s12 m4 l4 file-field input-field background" >
< div class = "btn" >
< span class = "translate" > Upload image< / span >
< input type = "file" accept = ".png,image/png" id = "files" name = "files" / >
< / div >
< div class = "file-path-wrapper" >
< input class = "file-path validate" type = "text" >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col s12 m4 l4 background" >
< div id = "drop_zone" >
< span class = "translate" > place here< / span >
< img id = "login_image" src = "" / >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- div class="m adapter - container">
< table >
< tr >
< td > < img src = "web.png" > < / td >
< td > < h3 class = "translate" > Web Server adapter settings< / h3 > < / td >
< / tr >
< / table >
< div id = "tabs" >
< ul >
< li > < a href = "#tabs-1" class = "translate" > General< / a > < / li >
< li > < a href = "#tabs-2" class = "translate" > White List< / a > < / li >
< / ul >
< div id = "tabs-1" >
< table >
< tr >
< td > < label class = "translate" for = "bind" > IP:< / label > < / td >
< td > < select class = "value" id = "bind" > < / select > < / td >
< td > < / td >
< / tr >
< tr >
< td > < label class = "translate" for = "port" > Port:< / label > < / td >
< td > < input class = "value" id = "port" size = "5" maxlength = "5" type = "number" / > < / td >
< td > < / td >
< / tr >
< tr >
< td > < label class = "translate" for = "secure" > Secure(HTTPS):< / label > < / td >
< td > < input class = "value" id = "secure" type = "checkbox" / > < / td >
< td > < / td >
< / tr >
< tr id = "_certPublic" >
< td > < label class = "translate" for = "certPublic" > Public certificate:< / label > < / td >
< td > < select id = "certPublic" class = "value" > < / select > < / td >
< / tr >
< tr id = "_certPrivate" >
< td > < label class = "translate" for = "certPrivate" > Private certificate:< / label > < / td >
< td > < select id = "certPrivate" class = "value" > < / select > < / td >
< / tr >
< tr id = "_certChained" >
< td > < label class = "translate" for = "certChained" > Chained certificate:< / label > < / td >
< td > < select id = "certChained" class = "value" > < / select > < / td >
< / tr >
< tr >
< td > < label class = "translate" for = "auth" > Authentication:< / label > < / td >
< td > < input class = "value" id = "auth" type = "checkbox" / > < / td >
< td > < / td >
< / tr >
< tr id = "_ttl" >
< td > < label class = "translate" for = "ttl" > Login timeout(sec):< / label > < / td >
< td > < input class = "value" id = "ttl" type = "number" / > < / td >
< td > < / td > < / tr >
< tr >
< td > < label class = "translate" for = "cache" > Cache:< / label > < / td >
< td > < input class = "value" id = "cache" type = "checkbox" / > < / td >
< td > < / td >
< / tr >
< tr >
< td > < label class = "translate" for = "socketio" > Socket.IO Instance (Optional):< / label > < / td >
< td > < select class = "value" id = "socketio" > < / select > < span class = "translate"
style="padding-left: 20px">socket_help< / span >
< / td >
< / tr >
< tr class = "socketio" >
< td > < label class = "translate" for = "forceWebSockets" > Force Web-Sockets:< / label > < / td >
< td > < input type = "checkbox" class = "value" id = "forceWebSockets" / > < / td > < / tr >
< tr >
< td > < label class = "translate" for = "simpleapi" > Internal 'Simple API':< / label > < / td >
< td > < input type = "checkbox" class = "value" id = "simpleapi" / > < / td >
< / tr >
< tr class = "defaultUser" >
< td > < label class = "translate" for = "defaultUser" > Run as:< / label > < / td >
< td > < select class = "value" id = "defaultUser" > < / select > < / td >
< / tr >
< tr > < td colspan = "2" > < / td > < / tr >
< tr class = "le-settings" > < td colspan = "2" > < h3 class = "translate" > Let's Encrypt settings< / h3 > < / tr >
< tr class = "le-settings" > < td > < label for = "leEnabled" class = "translate" > Use Lets Encrypt certificates:< / label > < / td > < td > < input class = "value" id = "leEnabled" type = "checkbox" / > < / td > < / tr >
< tr class = "le-settings le-sub-settings" > < td > < label for = "leUpdate" class = "translate" > Use this instance for automatic update:< / label > < / td > < td > < input class = "value" id = "leUpdate" type = "checkbox" / > < / td > < / tr >
< tr class = "le-settings le-sub-settings le-sub-settings-update" > < td > < label for = "lePort" class = "translate" > Port to check the domain:< / label > < / td > < td > < input class = "value" id = "lePort" type = "number" size = "5" maxlength = "5" / > < / td > < / tr >
< / table >
< / div >
< div id = "tabs-2" >
< div >
< span > < label class = "translate" for = "whiteListEnabled" > Enabled:< / label > < / span > < input id = "whiteListEnabled" class = "value" type = "checkbox" / >
< / div >
< button style = "display: inline-block; width: 2em; height: 2em;" onclick = "addWhiteListTableRow(true)"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only white-list-settings" role="button">
< span class = "ui-button-icon-primary ui-icon ui-icon-plus" > < / span >
< span class = "ui-button-text" > < / span >
< / button >
< table id = "whiteListTable" cellpadding = "3" cellspacing = "2" border = "0" class = "white-list-settings" >
< thead >
< tr class = "whiteListTableHeader" >
< th rowspan = "2" colspan = "2" class = "translate" > IP< / th >
< th rowspan = "2" class = "translate" > User< / th >
< th colspan = "4" class = "translate" > object< / th >
< th colspan = "5" class = "translate" > state< / th >
< th colspan = "5" class = "translate" > file< / th >
< / tr >
< tr class = "whiteListTableHeader" >
< th class = "translate" > read< / th >
< th class = "translate" > list< / th >
< th class = "translate" > write< / th >
< th class = "translate" > remove< / th >
< th class = "translate" > read< / th >
< th class = "translate" > list< / th >
< th class = "translate" > write< / th >
< th class = "translate" > create< / th >
< th class = "translate" > remove< / th >
< th class = "translate" > read< / th >
< th class = "translate" > list< / th >
< th class = "translate" > write< / th >
< th class = "translate" > create< / th >
< th class = "translate" > remove< / th >
< / tr >
< / thead >
< tbody id = "whiteListTableBody" >
< tr >
< td class = "whiteListTableUnevenBlock delete-btn-clmn" > < a class = "delete-btn" href = "#" > < span
class="ui-icon ui-icon-trash">< / span > < / a > < / td >
< td class = "whiteListTableUnevenBlock" > default< / td >
< td class = "whiteListTableUnevenBlock defaultUserName" > defaultName< / td >
< td class = "whiteListTableEvenBlock" > < input permobject = "object" perm = "read" type = "checkbox"
checked="true" class="filled-in"/>< / td >
< td class = "whiteListTableEvenBlock" > < input permobject = "object" perm = "list" type = "checkbox"
checked="true" class="filled-in"/>< / td >
< td class = "whiteListTableEvenBlock" > < input permobject = "object" perm = "write" type = "checkbox"
checked="true" class="filled-in"/>< / td >
< td class = "whiteListTableEvenBlock" > < input permobject = "object" perm = "delete" type = "checkbox"
checked="true" class="filled-in"/>< / td >
< td class = "whiteListTableUnevenBlock" > < input permobject = "state" perm = "read" type = "checkbox"
checked="true" class="filled-in"/>< / td >
< td class = "whiteListTableUnevenBlock" > < input permobject = "state" perm = "list" type = "checkbox"
checked="true" class="filled-in"/>< / td >
< td class = "whiteListTableUnevenBlock" > < input permobject = "state" perm = "write" type = "checkbox"
checked="true" class="filled-in"/>< / td >
< td class = "whiteListTableUnevenBlock" > < input permobject = "state" perm = "create" type = "checkbox"
checked="true" class="filled-in"/>< / td >
< td class = "whiteListTableUnevenBlock" > < input permobject = "state" perm = "delete" type = "checkbox"
checked="true" class="filled-in"/>< / td >
< td class = "whiteListTableEvenBlock" > < input permobject = "file" perm = "read" type = "checkbox"
checked="true" class="filled-in"/>< / td >
< td class = "whiteListTableEvenBlock" > < input permobject = "file" perm = "list" type = "checkbox"
checked="true" class="filled-in"/>< / td >
< td class = "whiteListTableEvenBlock" > < input permobject = "file" perm = "write" type = "checkbox"
checked="true" class="filled-in"/>< / td >
< td class = "whiteListTableEvenBlock" > < input permobject = "file" perm = "create" type = "checkbox"
checked="true" class="filled-in"/>< / td >
< td class = "whiteListTableEvenBlock" > < input permobject = "file" perm = "delete" type = "checkbox"
checked="true" class="filled-in"/>< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div >
< / div-- >
< / body >
< / html >
