mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2026-01-16 20:42:06 +01:00
323 lines
12 KiB
HTML
323 lines
12 KiB
HTML
{% extends "baseTemplate/index.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}
|
|
Security Management - CyberPanel
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
<i class="fas fa-shield-alt"></i>
|
|
Security Management
|
|
</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Security Alerts Section -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="alert alert-warning">
|
|
<h5><i class="fas fa-exclamation-triangle"></i> Security Alerts</h5>
|
|
<p>Monitor and manage security threats detected by the system.</p>
|
|
<button class="btn btn-warning" onclick="refreshSecurityAlerts()">
|
|
<i class="fas fa-sync"></i> Refresh Alerts
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Alerts List -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Recent Security Alerts</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="securityAlertsContainer">
|
|
<!-- Alerts will be loaded here -->
|
|
<div class="text-center">
|
|
<i class="fas fa-spinner fa-spin"></i> Loading security alerts...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Blocked IPs Management -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Blocked IP Addresses</h4>
|
|
<button class="btn btn-success btn-sm" onclick="refreshBlockedIPs()">
|
|
<i class="fas fa-sync"></i> Refresh
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped" id="blockedIPsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>IP Address</th>
|
|
<th>Blocked At</th>
|
|
<th>Reason</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="blockedIPsTableBody">
|
|
<tr>
|
|
<td colspan="4" class="text-center">
|
|
<i class="fas fa-spinner fa-spin"></i> Loading...
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Manual IP Blocking -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Manual IP Blocking</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="blockIPForm">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="ipAddress">IP Address</label>
|
|
<input type="text" class="form-control" id="ipAddress" name="ip_address" placeholder="192.168.1.100" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="blockReason">Reason</label>
|
|
<input type="text" class="form-control" id="blockReason" name="reason" placeholder="Suspicious activity" value="Manual block via CyberPanel">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-danger">
|
|
<i class="fas fa-ban"></i> Block IP Address
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Sample security alerts data (in a real implementation, this would come from the backend)
|
|
const sampleAlerts = [
|
|
{
|
|
id: 1,
|
|
type: 'brute_force',
|
|
ip: '129.212.176.254',
|
|
attempts: 85,
|
|
severity: 'HIGH',
|
|
timestamp: '2024-01-15 14:30:25',
|
|
description: 'IP address 129.212.176.254 has made 85 failed password attempts. This indicates a potential brute force attack.'
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 'brute_force',
|
|
ip: '177.10.47.186',
|
|
attempts: 10,
|
|
severity: 'HIGH',
|
|
timestamp: '2024-01-15 14:25:10',
|
|
description: 'IP address 177.10.47.186 has made 10 failed password attempts. This indicates a potential brute force attack.'
|
|
}
|
|
];
|
|
|
|
function refreshSecurityAlerts() {
|
|
const container = document.getElementById('securityAlertsContainer');
|
|
|
|
if (sampleAlerts.length === 0) {
|
|
container.innerHTML = '<div class="alert alert-info">No security alerts found.</div>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
sampleAlerts.forEach(alert => {
|
|
const severityClass = alert.severity === 'HIGH' ? 'danger' : alert.severity === 'MEDIUM' ? 'warning' : 'info';
|
|
|
|
html += `
|
|
<div class="alert alert-${severityClass} mb-3">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<h6 class="alert-heading">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
${alert.type.replace('_', ' ').toUpperCase()} Attack Detected
|
|
</h6>
|
|
<p class="mb-2">${alert.description}</p>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<strong>IP Address:</strong> ${alert.ip}
|
|
</div>
|
|
<div class="col-md-3">
|
|
<strong>Failed Attempts:</strong> ${alert.attempts}
|
|
</div>
|
|
<div class="col-md-3">
|
|
<strong>Attack Type:</strong> Brute Force
|
|
</div>
|
|
<div class="col-md-3">
|
|
<strong>Time:</strong> ${alert.timestamp}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ml-3">
|
|
<span class="badge badge-${severityClass}">${alert.severity}</span>
|
|
<div class="mt-2">
|
|
<button class="btn btn-sm btn-danger" onclick="blockIP('${alert.ip}', 'Brute force attack - ${alert.attempts} attempts')">
|
|
<i class="fas fa-ban"></i> Block IP
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
function blockIP(ipAddress, reason) {
|
|
if (!confirm(`Are you sure you want to block IP address ${ipAddress}?`)) {
|
|
return;
|
|
}
|
|
|
|
const formData = {
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}',
|
|
'ip_address': ipAddress,
|
|
'reason': reason
|
|
};
|
|
|
|
$.post('{% url "blockIPAddress" %}', formData, function(data) {
|
|
if (data.status === 1) {
|
|
showNotification('success', data.message);
|
|
refreshBlockedIPs();
|
|
refreshSecurityAlerts(); // Refresh to remove the alert or update its status
|
|
} else {
|
|
showNotification('error', data.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
function unblockIP(ipAddress) {
|
|
if (!confirm(`Are you sure you want to unblock IP address ${ipAddress}?`)) {
|
|
return;
|
|
}
|
|
|
|
const formData = {
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}',
|
|
'ip_address': ipAddress
|
|
};
|
|
|
|
$.post('{% url "unblockIPAddress" %}', formData, function(data) {
|
|
if (data.status === 1) {
|
|
showNotification('success', data.message);
|
|
refreshBlockedIPs();
|
|
} else {
|
|
showNotification('error', data.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
function refreshBlockedIPs() {
|
|
$.post('{% url "getBlockedIPs" %}', {
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
|
}, function(data) {
|
|
if (data.status === 1) {
|
|
displayBlockedIPs(data.blocked_ips);
|
|
} else {
|
|
showNotification('error', data.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
function displayBlockedIPs(blockedIPs) {
|
|
const tbody = document.getElementById('blockedIPsTableBody');
|
|
|
|
if (blockedIPs.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="4" class="text-center">No blocked IP addresses found</td></tr>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
blockedIPs.forEach(ip => {
|
|
html += `
|
|
<tr>
|
|
<td>${ip}</td>
|
|
<td>N/A</td>
|
|
<td>Blocked via CyberPanel</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-warning" onclick="unblockIP('${ip}')">
|
|
<i class="fas fa-unlock"></i> Unblock
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
tbody.innerHTML = html;
|
|
}
|
|
|
|
function showNotification(type, message) {
|
|
const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
|
|
const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
|
|
|
|
const notification = `
|
|
<div class="alert ${alertClass} alert-dismissible fade show" role="alert">
|
|
<i class="fas ${icon}"></i> ${message}
|
|
<button type="button" class="close" data-dismiss="alert">
|
|
<span>×</span>
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
$('.card-body').prepend(notification);
|
|
|
|
setTimeout(() => {
|
|
$('.alert').fadeOut();
|
|
}, 5000);
|
|
}
|
|
|
|
// Handle manual IP blocking form
|
|
$(document).ready(function() {
|
|
$('#blockIPForm').on('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const ipAddress = $('#ipAddress').val();
|
|
const reason = $('#blockReason').val();
|
|
|
|
if (!ipAddress) {
|
|
showNotification('error', 'Please enter an IP address');
|
|
return;
|
|
}
|
|
|
|
blockIP(ipAddress, reason);
|
|
$('#blockIPForm')[0].reset();
|
|
});
|
|
|
|
// Load initial data
|
|
refreshSecurityAlerts();
|
|
refreshBlockedIPs();
|
|
});
|
|
</script>
|
|
{% endblock %}
|