new front end #33
This commit is contained in:
+104
-82
@@ -1,109 +1,131 @@
|
||||
<%- include('top') %>
|
||||
<script id="rowTemplate" type="text/html">
|
||||
<tr action="user/password/<< username >>" method="put" evalAJAX="$form.trigger('reset')">
|
||||
<td>
|
||||
<< uid >>:<< username >>
|
||||
</td>
|
||||
<td>
|
||||
<input type="hidden" name="username" value="<< username >>" />
|
||||
<div class="col-xs-10 form-group">
|
||||
<label class="control-label"></label>
|
||||
<input type="password" size="15" class="form-control" name="password" placeholder="New password" validate="password:5"/>
|
||||
</div>
|
||||
<style type="text/css">
|
||||
@include color-mode(dark) {
|
||||
// CSS variable overrides here...
|
||||
}
|
||||
label.control-label{
|
||||
font-weight: bold;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.card-title{
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button type="button btn-warn" onclick="formAJAX(this)" class="btn btn-sm btn-warn">
|
||||
Change
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" onclick="app.user.remove({username: '<<username>>'}, function(){tableAJAX('username <<username>> delete.')})" class="btn btn-sm btn-danger">
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
|
||||
function tableAJAX(actionMessage){
|
||||
$('#tableAJAX').html('').hide();
|
||||
app.util.actionMessage('Refreshing user list...')
|
||||
|
||||
function populateUsers(actionMessage){
|
||||
app.user.list(function(error, data){
|
||||
$.each( data.results, function(key, value) {
|
||||
if(value.uid+'' && value.uid < 1000) return;
|
||||
user_row = ich.rowTemplate(value);
|
||||
$('#tableAJAX').append(user_row);
|
||||
});
|
||||
|
||||
$('#tableAJAX').fadeIn('slow');
|
||||
|
||||
app.util.actionMessage(actionMessage || '', {type: 'info'});
|
||||
if(error) return app.util.actionMessage(error, $.scope.users.$this, 'danger');
|
||||
for(let user of data.results){
|
||||
$.scope.users.push(user);
|
||||
}
|
||||
$.scope.users.__setPut(function($el, item, list){
|
||||
$el.addClass('bg-success');
|
||||
$el.fadeIn(3000, function(){
|
||||
$el.removeClass('bg-success');
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function removeUser(username){
|
||||
app.user.remove({username: username}, function(error, data){
|
||||
if(error) return app.util.actionMessage(error, $.scope.users.$this, 'danger');
|
||||
$.scope.users.remove(username);
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
tableAJAX(); //populate the table
|
||||
populateUsers(); //populate the table
|
||||
|
||||
$.scope.users.__setTake(function($el, item, list){
|
||||
$el.addClass('bg-danger');
|
||||
$el.fadeOut(1000, function(){
|
||||
$el.remove()
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<div class="row" style="display:none">
|
||||
<div class="col-md-4">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-title">
|
||||
Add new user
|
||||
<div class="pull-right">
|
||||
<label class="glyphicon glyphicon-circle-arrow-down panel-toggle"></label>
|
||||
</div>
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header">
|
||||
<span class="card-header-icon">
|
||||
<i class="fa-solid fa-user-plus"></i>
|
||||
</span>
|
||||
<span class="card-title mx-auto p-2">
|
||||
Add New User
|
||||
</span>
|
||||
<div class="float-right">
|
||||
<i class="fa-solid fa-circle-minus"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form action="user/" evalAJAX="$form.trigger('reset')">
|
||||
<input type="hidden" class="form-control" name="delete" value="false" />
|
||||
<div class="form-group">
|
||||
<label class="control-label">User-name</label>
|
||||
<input type="text" class="form-control" name="username" placeholder="Letter, numbers, -, _, . and @ only" validate="user:3" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">Password</label>
|
||||
<input type="password" class="form-control" name="password" placeholder="Atleast 5 char. long" validate="password:5"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">Again</label>
|
||||
<input type="password" class="form-control" name="passwordMatch" placeholder="Retype password" validate="eq:password"/>
|
||||
</div>
|
||||
<button type="button" onclick="formAJAX(this)" class="btn btn-default">Add</button>
|
||||
</form>
|
||||
<div class="card-header actionMessage" style="display:none"></div>
|
||||
<div class="card-body">
|
||||
<form action="user/" evalAJAX="
|
||||
$.scope.users.splice(0, 0, data);
|
||||
">
|
||||
<input type="hidden" class="form-control" name="delete" value="false" />
|
||||
<div class="form-group">
|
||||
<label class="control-label">User-name</label>
|
||||
<input type="text" class="form-control" name="username" placeholder="Letter, numbers, -, _, . and @ only" validate="user:3" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">Password</label>
|
||||
<input type="password" class="form-control" name="password" placeholder="Atleast 5 char. long" validate="password:5"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">Again</label>
|
||||
<input type="password" class="form-control" name="passwordMatch" placeholder="Retype password" validate="eq:password"/>
|
||||
</div>
|
||||
<button type="button" onclick="formAJAX(this)" class="btn btn-info">Add</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-title">
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<i class="fa-solid fa-users"></i>
|
||||
User List
|
||||
<div class="pull-right">
|
||||
<label class="glyphicon glyphicon-circle-arrow-down panel-toggle"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body" style="padding-bottom:0">
|
||||
<div class="alert alert-warning actionMessage" style="display:none">
|
||||
<!-- Message after AJAX action is preformed -->
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<th>Name</th>
|
||||
<th>Password</th>
|
||||
<th>Delete</th>
|
||||
</thead>
|
||||
<tbody id="tableAJAX">
|
||||
<!-- ajax loaded table -->
|
||||
</tbody>
|
||||
</table>
|
||||
</span>
|
||||
<div class="float-right">
|
||||
<i class="fa-solid fa-circle-minus"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-header actionMessage" style="display:none"></div>
|
||||
<table class="card-body table table-striped" style="margin-bottom:0">
|
||||
<thead>
|
||||
<th>Name</th>
|
||||
<th>Password</th>
|
||||
<th>Delete</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr jq-repeat="users" jq-repeat-index="username" style="display:none" >
|
||||
<td class="align-middle">
|
||||
{{ username }}
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<form class="input-group" action="user/password/{{ username }}" method="put" onsubmit="formAJAX(this)">
|
||||
<input type="password" name="password" class="form-control" placeholder="Change {{ username }} password" aria-label="Update password">
|
||||
<button class="btn btn-warning" type="submit">Change</button>
|
||||
</form>
|
||||
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<button type="button" class="btn btn-danger" onclick="removeUser('{{username}}')">
|
||||
<i class="fa-solid fa-user-slash"></i>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user