first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,271 @@
|
||||
<div class="modal fade" id="ipAddressModal" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
|
||||
<!-- Modal content-->
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h4 class="modal-title text-capitalize">Modal Header</h4>
|
||||
</div>
|
||||
<form id="ipAddressForm">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="recipient-name" class="control-label">IP Address:</label>
|
||||
<div class="input">
|
||||
<input type="text" class="form-control" id="ip_address" name="ip_address">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="reason-group">
|
||||
<label for="message-text" class="control-label">Reason:</label>
|
||||
<div class="input">
|
||||
<input type="text" class="form-control" id="reason" name="reason" maxlength="20">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="modal-btn-apply" disabled >Apply</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard content -->
|
||||
<div class="row">
|
||||
<div class="col-xs-8 col-xs-offset-2">
|
||||
<div class="row p-b-md">
|
||||
<div class="col-xs-1 col-xs-offset-10">
|
||||
<button type="button" class="btn btn-primary btn-sm btn-block"
|
||||
data-toggle="modal"
|
||||
data-target="#ipAddressModal"
|
||||
data-action="block"
|
||||
>Block</button>
|
||||
</div>
|
||||
<div class="col-xs-1">
|
||||
<button type="button" class="btn btn-primary btn-sm btn-block"
|
||||
data-toggle="modal"
|
||||
data-target="#ipAddressModal"
|
||||
data-action="unblock"
|
||||
>Unblock</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="panel panel-white">
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<form method="GET" class="blocked-ip-search-form" action="/security/blockedIpData">
|
||||
<div class="row">
|
||||
<div class="col-xs-4 col-md-2">
|
||||
<div class="form-group">
|
||||
<label for="">IP address</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
name="ip_address_filter"
|
||||
value="<?= $filterData['ip_address_filter'] ?? '' ?>">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-4 col-md-2">
|
||||
<div class="form-group">
|
||||
<label for="">Reason</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
name="reason_filter"
|
||||
value="<?= $filterData['reason_filter'] ?? '' ?>" >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-4 col-md-3">
|
||||
<div class="form-group">
|
||||
<label for="">Blocked date</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
name="blocked_date_filter"
|
||||
readonly
|
||||
value="<?= $filterData['blocked_date_filter'] ?? (date('Y-m-d', strtotime('-30 days')).' - '.date('Y-m-d')) ?>" >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-3 col-sm-2">
|
||||
<div class="form-group">
|
||||
<label for=""></label>
|
||||
<div style="margin-top: 7px">
|
||||
<button type="submit" class=" btn btn-primary btn-sm">Search</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="m-y-sm"><?= $links ?: '' ?></div>
|
||||
<div>
|
||||
<?= $blocked_ip_table?>
|
||||
</div>
|
||||
<div class="m-y-sm"><?= $links ?: '' ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /dashboard content -->
|
||||
|
||||
<script type="text/javascript">
|
||||
$( document ).ready( function () {
|
||||
/*********** date range picker ***********/
|
||||
let datepickerOptions = {
|
||||
autoUpdateInput: false,
|
||||
locale: {
|
||||
format: 'YYYY-MM-DD',
|
||||
cancelLabel: 'Clear'
|
||||
}
|
||||
};
|
||||
|
||||
let fromToElement = $('input[name="blocked_date_filter"]');
|
||||
const fromToVal = fromToElement.val();
|
||||
if (fromToVal == '') {
|
||||
datepickerOptions.startDate = moment().subtract(30, 'days').format('YYYY-MM-DD');
|
||||
datepickerOptions.endDate = moment().format('YYYY-MM-DD');
|
||||
}
|
||||
fromToElement.daterangepicker(datepickerOptions);
|
||||
|
||||
fromToElement.on('apply.daterangepicker', function(ev, picker) {
|
||||
$(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
|
||||
});
|
||||
|
||||
fromToElement.on('cancel.daterangepicker', function(ev, picker) {
|
||||
fromToElement.val('');
|
||||
});
|
||||
/***************************************/
|
||||
|
||||
jQuery.validator.addMethod("ip", function(value, element) {
|
||||
return this.optional(element) || /^(((([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])(((\/([4-9]|[12][0-9]|3[0-2]))?)|\s?-\s?((([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]))))(,\s?|$))+/.test(value);
|
||||
}, "Please specify the correct IP Address");
|
||||
|
||||
$('#ipAddressForm').on('blur keyup change', 'input', function (event) {
|
||||
validateForm('#ipAddressForm');
|
||||
});
|
||||
|
||||
$(".blocked-ip-search-form").validate({
|
||||
rules: {
|
||||
ip_address_filter: {
|
||||
ip: true
|
||||
},
|
||||
},
|
||||
errorElement: "em",
|
||||
errorPlacement: function ( error, element ) {
|
||||
error.addClass( "text-danger" );
|
||||
error.insertAfter( element );
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function validateForm(id) {
|
||||
if ($(id).valid()) {
|
||||
$('#modal-btn-apply').prop('disabled', false);
|
||||
} else {
|
||||
$('#modal-btn-apply').prop('disabled', 'disabled');
|
||||
}
|
||||
}
|
||||
|
||||
var ipAddressModal = function(callback){
|
||||
var action = null;
|
||||
var validator;
|
||||
$('#ipAddressModal').on('show.bs.modal', function (event) {
|
||||
|
||||
var button = $(event.relatedTarget);
|
||||
action = button.data('action');
|
||||
var modal = $(this);
|
||||
|
||||
modal.find('.modal-title').text(action);
|
||||
modal.find('#ip_address').val('');
|
||||
modal.find('#reason').val('');
|
||||
|
||||
var rules = {
|
||||
ip_address: {
|
||||
required: true,
|
||||
ip: true
|
||||
},
|
||||
reason: {
|
||||
required: true,
|
||||
minlength: 5,
|
||||
maxlength: 20
|
||||
}
|
||||
};
|
||||
|
||||
if(action === 'unblock') {
|
||||
modal.find("#reason-group").hide();
|
||||
rules = {};
|
||||
} else if(action === 'block') {
|
||||
modal.find("#reason-group").show();
|
||||
}
|
||||
|
||||
|
||||
validator = $('#ipAddressForm').validate({
|
||||
rules: rules,
|
||||
errorElement: "em",
|
||||
errorPlacement: function ( error, element ) {
|
||||
// Add the `help-block` class to the error element
|
||||
error.addClass( "help-block" );
|
||||
error.insertAfter( element );
|
||||
},
|
||||
highlight: function ( element, errorClass, validClass ) {
|
||||
$( element ).parents( ".input" ).addClass( "has-error" );
|
||||
},
|
||||
unhighlight: function (element, errorClass, validClass) {
|
||||
$( element ).parents( ".input" ).removeClass( "has-error" );
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$('#ipAddressModal').on('hide.bs.modal', function(event) {
|
||||
if(validator) {
|
||||
validator.destroy()
|
||||
}
|
||||
});
|
||||
|
||||
$("#modal-btn-apply").on("click", function() {
|
||||
if(validator.valid()) {
|
||||
var ipAddress = $("#ip_address").val();
|
||||
var reason = $("#reason").val();
|
||||
callback(action, {'ip_address': ipAddress, reason: reason });
|
||||
$("#ipAddressModal").modal('hide');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var ipAction = function (action, data) {
|
||||
var url = `/security/${action}ip`;
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'POST',
|
||||
dataType:'JSON',
|
||||
data: data,
|
||||
success: function(data) {
|
||||
location.reload();
|
||||
},
|
||||
error: function(err) {
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
return false;
|
||||
};
|
||||
|
||||
ipAddressModal(ipAction);
|
||||
|
||||
function confirmUnblockIp(ipAddress) {
|
||||
bootbox.confirm(`The IP '${ipAddress}' will be unblocked`, function(result) {
|
||||
if (result === true) {
|
||||
ipAction('unblock', {'ip_address': `${ipAddress}`})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user