dev-chiefworks
272 lines
11 KiB
PHP
272 lines
11 KiB
PHP
<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>
|