github
/
haproxy-wi
mirror of https://github.com/Aidaho12/haproxy-wi
1
0
Fork 0
Code Issues Releases Wiki Activity

v3.2.13 

New "user add" form, improved forms
pull/56/head
Aidaho12 2018-10-04 10:07:32 +06:00
parent db1cb7b772
commit 14f3ab67a0
7 changed files with 296 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
app/templates/admin.html
View File

@ -63,49 +63,8 @@
</tr>
{% endfor %}
</table>
<br /><span class="add-button" title="Add user" id="add-user-button">+ Add</span>
<br /><br />
<table class="overview" id="user-add-table" style="display: none;">
<tr class="overviewHead">
<td class="padding10 first-collumn">New user</td>
<td>Password</td>
<td>Email</td>
<td>Role</td>
<td>Group</td>
<td></td>
</tr>
<tr>
<td class="padding10 first-collumn">
<input type="text" name="new-username" id="new-username" class="form-control">
</td>
<td>
<input type="password" name="new-password" id="new-password" class="form-control">
</td>
<td>
<input type="text" name="new-email" id="new-email" class="form-control">
</td>
<td>
<select id="new-role" name="new-role">
<option disabled selected>Choose role</option>
{% for role in roles %}
<option value="{{ role.1 }}">{{ role.1 }}</option>
{% endfor %}
</select>
</td>
<td>
<select id="new-group" name="new-group">
<option disabled selected>Choose group</option>
{% for group in groups %}
<option value="{{ group.0 }}">{{ group.1 }}</option>
{% endfor %}
</select>
</td>
<td>
<a class="add-admin" id="add-user" title="Add new user" style="cursor: pointer;"></a>
</td>
</tr>
</table>
<br /><span class="add-button" title="Add user" id="add-user-button">+ Add</span>
<br /><br />
</div>
<div id="groups">
<table class="overview" id="ajax-group">
@ -474,26 +433,108 @@
<div id="ajax-telegram"></div>
</div>
</div>
<div id="user-add-table" style="display: none;">
<table class="overview">
<tr>
<td colspan="2">
<p class="validateTips alert alert-success">Form fields tag "<span class="need-field">*</span>" are required.</p>
</td>
</tr>
<tr>
<td class="padding20">
New user
<span class="need-field">*</span>
</td>
<td>
<input type="text" name="new-username" id="new-username" class="form-control">
</td>
</tr>
<tr>
<td class="padding20">
Password
<span class="need-field">*</span>
</td>
<td>
<input type="password" name="new-password" id="new-password" class="form-control">
</td>
</tr>
<tr>
<td class="padding20">
Email
</td>
<td>
<input type="text" name="new-email" id="new-email" class="form-control">
</td>
</tr>
<tr>
<td class="padding20">
Role
<span class="need-field">*</span>
</td>
<td>
<select id="new-role" name="new-role">
<option disabled selected>Choose role</option>
{% for role in roles %}
{% if role.1 != "admin" %}
<option value="{{ role.1 }}">{{ role.1 }}</option>
{% endif %}
{% endfor %}
</select>
</td>
</tr>
<tr>
<td class="padding20">
Group
<span class="need-field">*</span>
</td>
<td>
<select id="new-group" name="new-group">
<option disabled selected>Choose group</option>
{% for group in groups %}
<option value="{{ group.0 }}">{{ group.1 }}</option>
{% endfor %}
</select>
</td>
</tr>
</table>
</div>
<div id="server-add-table" title="View certificate " style="display: none;">
<table class="overview">
<tr>
<td colspan="2">
<p class="validateTips alert alert-success">Form fields tag "<span class="need-field">*</span>" are required.</p>
</td>
</tr>
<tr>
<td class="padding20">New hostname</td>
<td class="padding20">
New hostname
<span class="need-field">*</span>
</td>
<td>
<input type="text" name="new-server-add" id="new-server-add" class="form-control">
</td>
<tr>
<td class="padding20">IP</td>
<td class="padding20">
IP
<span class="need-field">*</span>
</td>
<td>
<input type="text" name="new-ip" id="new-ip" size="14" class="form-control">
</td>
<tr>
<td class="padding20"><span title="SSH port">Port(?)</span></td>
<td class="padding20" title="SSH port">
Port
<span class="need-field">*</span>
</td>
<td>
<input type="text" name="new-port" id="new-port" size=1 class="form-control" value="22">
</td>
</tr>
<tr>
<td class="padding20">Group</td>
<td class="padding20">
Group
<span class="need-field">*</span>
</td>
<td>
<select id="new-server-group-add" name="new-server-group-add">
<option disabled selected value="0">Choose group</option>
@ -510,19 +551,19 @@
</td>
</tr>
<tr>
<td class="padding20"><span title="Vitrual IP, something like VRRP">Virt(?)</span></td>
<td class="padding20" title="Vitrual IP, something like VRRP">Virt</td>
<td>
<label for="typeip"></label><input type="checkbox" id="typeip">
</td>
</tr>
<tr>
<td class="padding20"><span title="Alert if backend change status">Alert(?)</span></td>
<td class="padding20" title="Alert if backend change status">Alert</td>
<td>
<label for="alert"></label><input type="checkbox" id="alert">
</td>
</tr>
<tr>
<td class="padding20"><span title="Enable save and show metrics">Metrics(?)</span></td>
<td class="padding20" title="Enable save and show metrics">Metrics</td>
<td>
<label for="metrics"></label><input type="checkbox" id="metrics">
</td>
@ -539,7 +580,10 @@
</td>
</tr>
<tr>
<td class="padding20">Credentials</td>
<td class="padding20">
Credentials
<span class="need-field">*</span>
</td>
<td>
<select id="credentials" required>
<option disabled selected>Choose credentials</option>

4
app/templates/ajax/new_server.html
View File

@ -4,12 +4,12 @@
<input type="text" id="hostname-{{server.0}}" value="{{server.1}}" class="form-control">
</td>
<td>
<input type="text" id="ip-{{server.0}}" value="{{server.2}}" class="form-control">
<input type="text" id="ip-{{server.0}}" value="{{server.2}}" size="14" class="form-control">
{% if page == "servers.py" %}
<input type="hidden" id="servergroup-{{server.0}}" name="servergroup-{{server.0}}" value="" >
{% endif %}
</td>
<td>
<td class="checkbox">
<input type="text" id="port-{{server.0}}" value="{{server.10}}" size="1" class="form-control">
</td>
{% if page != "servers.py" %}

2
app/templates/ajax/new_user.html
View File

@ -21,7 +21,7 @@
{% endfor %}
</select>
</td>
{% if page != "servers.py" %}
{% if page != "servers.py" and page != "servers.py#users" %}
<td>
<select id="usergroup-{{user.0}}" name="usergroup-{{user.0}}">
<option disabled selected>Choose group</option>

2
app/templates/base.html
View File

@ -99,7 +99,7 @@
</ul>
</nav>
<div class="copyright-menu">
HAproxy-WI v3.2.12
HAproxy-WI v3.2.13
<br>
<a href="https://www.patreon.com/haproxy_wi" title="Donate" target="_blank" style="color: #fff; margin-left: 30px; color: red;" class="patreon"> Patreon</a>
</div>

124
app/templates/servers.html
View File

@ -59,41 +59,8 @@
{% endif %}
{% endfor %}
</table>
<br /><span class="add-button" title="Add user" id="add-user-button">+ Add</span>
<br /><br />
<table class="overview" id="user-add-table" style="display: none;">
<tr class="overviewHead">
<td class="padding10 first-collumn">New user</td>
<td>Password</td>
<td>Email</td>
<td>Role</td>
<td></td>
</tr>
<tr>
<td class="padding10 first-collumn">
<input type="text" name="new-username" id="new-username" class="form-control">
</td>
<td>
<input type="password" name="new-password" id="new-password" class="form-control">
</td>
<td>
<input type="text" name="new-email" id="new-email" class="form-control">
</td>
<td>
<select id="new-role" name="new-role">
<option disabled selected>Choose role</option>
{% for role in roles %}
{% if role.1 != "admin" %}
<option value="{{ role.1 }}">{{ role.1 }}</option>
{% endif %}
{% endfor %}
</select>
</td>
<td>
<a class="add-admin" id="add-user" title="Add new user" style="cursor: pointer;"></a>
</td>
</tr>
</table>
<br /><span class="add-button" title="Add user" id="add-user-button">+ Add</span>
<br /><br />
</div>
<div id="servers">
@ -359,23 +326,89 @@
<b>Do not edit this section if your group is "ALL"!</b> Add first<a href="users.py#groups" title="Admin Area: Groups">group</a> or edit your own group at<a href="users.py#users" title="Admin Area: Users">users</a> page
</div>
</div>
<div id="server-add-table" title="View certificate " style="display: none;">
<div id="user-add-table" style="display: none;">
<table class="overview">
<tr>
<td class="padding20">New hostname</td>
<td colspan="2">
<p class="validateTips alert alert-success">Form fields tag "<span class="need-field">*</span>" are required.</p>
</td>
</tr>
<tr>
<td class="padding20">
New user
<span class="need-field">*</span>
</td>
<td>
<input type="text" name="new-username" id="new-username" class="form-control">
</td>
</tr>
<tr>
<td class="padding20">
Password
<span class="need-field">*</span>
</td>
<td>
<input type="password" name="new-password" id="new-password" class="form-control">
</td>
</tr>
<tr>
<td class="padding20">
Email
</td>
<td>
<input type="text" name="new-email" id="new-email" class="form-control">
</td>
</tr>
<tr>
<td class="padding20">
Role
<span class="need-field">*</span>
</td>
<td>
<select id="new-role" name="new-role">
<option disabled selected>Choose role</option>
{% for role in roles %}
{% if role.1 != "admin" %}
<option value="{{ role.1 }}">{{ role.1 }}</option>
{% endif %}
{% endfor %}
</select>
</td>
</tr>
</table>
</div>
<div id="server-add-table" style="display: none;">
<form id="server-add-form">
<table class="overview">
<tr>
<td colspan="2">
<p class="validateTips alert alert-success">Form fields tag "<span class="need-field">*</span>" are required.</p>
</td>
</tr>
<tr>
<td class="padding20">
New hostname
<span class="need-field">*</span>
</td>
<td>
<input type="text" name="new-server-add" id="new-server-add" class="form-control">
</td>
</tr>
<tr>
<td class="padding20">IP</td>
<td class="padding20">
IP
<span class="need-field">*</span>
</td>
<td>
<input type="text" name="new-ip" id="new-ip" size="14" class="form-control">
<input type="hidden" id="new-sshgroup" name="new-sshgroup" value="{{ group }}" >
</td>
</tr>
<tr>
<td class="padding20"><span title="SSH port">Port(?)</span></td></td>
<td class="padding20" title="SSH port">
Port
<span class="need-field">*</span>
</td>
<td>
<input type="text" name="new-port" id="new-port" size=1 class="form-control" value="22">
</td>
@ -387,19 +420,19 @@
</td>
</tr>
<tr>
<td class="padding20"><span title="Vitrual IP, something like VRRP">Virt(?)</span></td>
<td class="padding20" title="Vitrual IP, something like VRRP">Virt</td>
<td>
<label for="typeip"></label><input type="checkbox" id="typeip">
</td>
</tr>
<tr>
<td class="padding20"><span title="Alert if backend change status">Alert(?)</span></td>
<td class="padding20" title="Alert if backend change status">Alert</td>
<td>
<label for="alert"></label><input type="checkbox" id="alert">
</td>
</tr>
<tr>
<td class="padding20"><span title="Enable save and show metrics">Metrics(?)</span></td>
<td class="padding20" title="Enable save and show metrics">Metrics</td>
<td>
<label for="metrics"></label><input type="checkbox" id="metrics">
</td>
@ -416,7 +449,10 @@
</td>
</tr>
<tr>
<td class="padding20">Credentials</td>
<td class="padding20">
Credentials
<span class="need-field">*</span>
</td>
<td>
<select id="credentials" required>
<option disabled selected value="0">Choose credentials</option>
@ -435,6 +471,8 @@
</td>
</tr>
</table>
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</form>
</div>
<script>
if($('#new-server-group-add').val() == 1) {

8
inc/style.css
View File

@ -489,6 +489,9 @@ pre {
.ui-selectmenu-open, .ui-selectmenu-menu {
z-index: 1010 !important;
}
.need-field {
color: red;
}
a {
background-color: transparent;
}
@ -635,6 +638,11 @@ a:focus {
background-color: #fff3cd;
border-color: #ffeeba;
}
.validateTips {
width: 540px;
margin: 0;
margin-bottom: 10px;
}
#errorMess {
float: right;
}

164
inc/users.js
View File

@ -124,41 +124,6 @@ $( function() {
}
} );
});
$('#add-user').click(function() {
$('#error').remove();
$.ajax( {
url: "sql.py",
data: {
newuser: "1",
newusername: $('#new-username').val(),
newpassword: $('#new-password').val(),
newemail: $('#new-email').val(),
newrole: $('#new-role').val(),
page: cur_url[0],
newgroupuser: $('#new-group').val()
},
type: "GET",
success: function( data ) {
data = data.replace(/\s+/g,' ');
if (data.indexOf('error') != '-1') {
$("#ajax-users").append(data);
$('#errorMess').click(function() {
$('#error').remove();
$('.alert-danger').remove();
});
} else {
$('.alert-danger').remove();
$("#ajax-users").append(data);
$( ".newuser" ).addClass( "update", 1000, callbackUser );
$.getScript(awesome);
//$.getScript(url);
$( "input[type=submit], button" ).button();
$( "input[type=checkbox]" ).checkboxradio();
$( "select" ).selectmenu();
}
}
} );
});
$('#add-group').click(function() {
$('#error').remove();
$('.alert-danger').remove();
@ -225,7 +190,6 @@ $( function() {
$('select:regex(id, credentials)').append('<option value='+id+'>'+$('#new-ssh-add').val()+'</option>').selectmenu("refresh");
$('select:regex(id, ssh-key-name)').append('<option value='+$('#new-ssh-add').val()+'>'+$('#new-ssh-add').val()+'</option>').selectmenu("refresh");
$.getScript(awesome);
//$.getScript(url);
$( "input[type=submit], button" ).button();
$( "input[type=checkbox]" ).checkboxradio();
$( "select" ).selectmenu();
@ -256,7 +220,6 @@ $( function() {
$("#checker_table").append(data);
$( ".newgroup" ).addClass( "update", 1000, callbackGroup );
$.getScript(awesome);
//$.getScript(url);
$( "input[type=submit], button" ).button();
$( "input[type=checkbox]" ).checkboxradio();
$( "select" ).selectmenu();
@ -264,16 +227,6 @@ $( function() {
}
} );
});
function callbackUser() {
setTimeout(function() {
$( ".newuser" ).removeClass( "update" );
}, 2500 );
}
function callbackServer() {
setTimeout(function() {
$( ".newserver" ).removeClass( "update" );
}, 2500 );
}
function callbackGroup() {
setTimeout(function() {
$( ".newgroup" ).removeClass( "update" );
@ -281,17 +234,40 @@ $( function() {
}
$('#add-user-button').click(function() {
if ($('#user-add-table').css('display', 'none')) {
$('#user-add-table').show("blind", "fast");
}
addUserDialog.dialog('open');
});
$('#add-group-button').click(function() {
if ($('#group-add-table').css('display', 'none')) {
$('#group-add-table').show("blind", "fast");
}
});
$('#add-server-button').click(function() {
$( "#server-add-table" ).dialog({
var addUserDialog = $( "#user-add-table" ).dialog({
autoOpen: false,
resizable: false,
height: "auto",
width: 600,
modal: true,
title: "Add new user",
show: {
effect: "fade",
duration: 200
},
hide: {
effect: "fade",
duration: 200
},
buttons: {
"Add": function() {
addUser();
},
Cancel: function() {
$( this ).dialog( "close" );
clearTips();
}
}
});
var addServerDialog = $( "#server-add-table" ).dialog({
autoOpen: false,
resizable: false,
height: "auto",
width: 600,
@ -311,10 +287,14 @@ $( function() {
},
Cancel: function() {
$( this ).dialog( "close" );
clearTips();
}
}
});
});
$('#add-server-button').click(function() {
addServerDialog.dialog('open');
});
$('#add-ssh-button').click(function() {
if ($('#ssh-add-table').css('display', 'none')) {
$('#ssh-add-table').show("blind", "fast");
@ -384,9 +364,76 @@ $( function() {
});
} );
function updateTips( t ) {
var tips = $( ".validateTips" );
tips.text( t ).addClass( "alert-warning" );
}
function clearTips() {
var tips = $( ".validateTips" );
tips.html('Form fields tag "<span class="need-field">*</span>" are required.').removeClass( "alert-warning" );
allFields = $( [] ).add( $('#new-server-add') ).add( $('#new-ip') ).add( $('#new-port')).add( $('#new-username') ).add( $('#new-password') )
allFields.removeClass( "ui-state-error" );
}
function checkLength( o, n, min ) {
if ( o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips("Filed "+n+" required");
return false;
} else {
return true;
}
}
function addUser() {
var valid = true;
$('#error').remove();
allFields = $( [] ).add( $('#new-username') ).add( $('#new-password') )
allFields.removeClass( "ui-state-error" );
valid = valid && checkLength( $('#new-username'), "user name", 1 );
valid = valid && checkLength( $('#new-password'), "password", 1 );
if (valid) {
$.ajax( {
url: "sql.py",
data: {
newuser: "1",
newusername: $('#new-username').val(),
newpassword: $('#new-password').val(),
newemail: $('#new-email').val(),
newrole: $('#new-role').val(),
page: cur_url[0],
newgroupuser: $('#new-group').val()
},
type: "GET",
success: function( data ) {
data = data.replace(/\s+/g,' ');
if (data.indexOf('error') != '-1') {
$("#ajax-users").append(data);
$('#errorMess').click(function() {
$('#error').remove();
$('.alert-danger').remove();
});
} else {
$('.alert-danger').remove();
$("#ajax-users").append(data);
$( ".newuser" ).addClass( "update", 1000 );
setTimeout(function() {
$( ".newuser" ).removeClass( "update" );
}, 2500 );
$.getScript(awesome);
$( "input[type=submit], button" ).button();
$( "input[type=checkbox]" ).checkboxradio();
$( "select" ).selectmenu();
}
}
} );
clearTips();
$( "#user-add-table" ).dialog("close" );
}
}
function addServer() {
$('#error').remove();
$('.alert-danger').remove();
var valid = true;
var servername = $('#new-server-add').val();
var newip = $('#new-ip').val();
var newservergroup = $('#new-server-group-add').val();
@ -407,9 +454,12 @@ function addServer() {
if ($('#metrics').is(':checked')) {
var metrics = '1';
}
if (servername == '' || newip == '' || newservergroup == '' || cred == '') {
alert('All fields must be completed');
} else {
allFields = $( [] ).add( $('#new-server-add') ).add( $('#new-ip') ).add( $('#new-port') )
allFields.removeClass( "ui-state-error" );
valid = valid && checkLength( $('#new-server-add'), "Hostname", 1 );
valid = valid && checkLength( $('#new-ip'), "IP", 1 );
valid = valid && checkLength( $('#new-port'), "Port", 1 );
if (valid) {
$.ajax( {
url: "sql.py",
data: {
@ -445,11 +495,13 @@ function addServer() {
}, 2500 );
$( "input[type=submit], button" ).button();
$( "input[type=checkbox]" ).checkboxradio();
$( ".controlgroup" ).controlgroup();
$( "select" ).selectmenu();
$.getScript(awesome);
}
}
} );
clearTips();
$( "#server-add-table" ).dialog("close" );
}
}