219 lines
10 KiB
Plaintext
219 lines
10 KiB
Plaintext
<% content_for :title, "Block Countries" %>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900">🌍 Block Countries</h1>
|
|
<p class="mt-2 text-gray-600">Create country-based firewall policies to block or redirect traffic from specific countries</p>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<%= link_to "← Back to Policies", waf_policies_path,
|
|
class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" %>
|
|
</div>
|
|
</div>
|
|
|
|
<%= form_with(url: create_country_waf_policies_path, method: :post, local: true, class: "space-y-6") do |form| %>
|
|
<!-- Display validation errors -->
|
|
<% if defined?(@waf_policy) && @waf_policy&.errors&.any? %>
|
|
<div class="rounded-md bg-red-50 p-4 border border-red-200">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-medium text-red-800">
|
|
<%= pluralize(@waf_policy.errors.count, "error") %> prohibited this policy from being saved:
|
|
</h3>
|
|
<div class="mt-2 text-sm text-red-700">
|
|
<ul class="list-disc pl-5 space-y-1">
|
|
<% @waf_policy.errors.full_messages.each do |message| %>
|
|
<li><%= message %></li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- Popular Countries Quick Selection -->
|
|
<div class="bg-white shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">🚨 Popular Countries for Blocking</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<% CountryHelper.popular_for_blocking.each do |country| %>
|
|
<label class="relative flex items-start p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
|
|
<div class="flex items-center h-5">
|
|
<%= check_box_tag "countries[]", country[:code], false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" %>
|
|
</div>
|
|
<div class="ml-3 text-sm">
|
|
<div class="font-medium text-gray-900">
|
|
<%= country[:display] %>
|
|
</div>
|
|
<div class="text-gray-500">
|
|
<%= country[:reason] %>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Regional Selection -->
|
|
<div class="bg-white shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">🗺️ Select by Region</h3>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<% CountryHelper.by_region.each do |region_name, country_codes| %>
|
|
<div>
|
|
<h4 class="font-medium text-gray-900 mb-2"><%= region_name %></h4>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<% CountryHelper.countries_for_region(region_name).each do |country| %>
|
|
<label class="flex items-center text-sm">
|
|
<%= check_box_tag "countries[]", country[:code], false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-2" %>
|
|
<%= country[:display] %>
|
|
</label>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Policy Settings -->
|
|
<div class="bg-white shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6 space-y-4">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">⚙️ Policy Settings</h3>
|
|
|
|
<!-- Action Selection -->
|
|
<div>
|
|
<%= form.label :policy_action, "What should happen to traffic from selected countries?", class: "block text-sm font-medium text-gray-700" %>
|
|
<div class="mt-2 space-y-2">
|
|
<label class="flex items-center">
|
|
<%= radio_button_tag "policy_action", "deny", true, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
|
|
<span class="ml-2 text-sm text-gray-700">
|
|
<span class="font-medium">🚫 Block (Deny)</span> - Show 403 Forbidden error
|
|
</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<%= radio_button_tag "policy_action", "challenge", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
|
|
<span class="ml-2 text-sm text-gray-700">
|
|
<span class="font-medium">🛡️ Challenge</span> - Present CAPTCHA challenge
|
|
</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<%= radio_button_tag "policy_action", "redirect", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
|
|
<span class="ml-2 text-sm text-gray-700">
|
|
<span class="font-medium">🔄 Redirect</span> - Redirect to compliance page
|
|
</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<%= radio_button_tag "policy_action", "allow", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
|
|
<span class="ml-2 text-sm text-gray-700">
|
|
<span class="font-medium">✅ Allow</span> - Explicitly allow traffic
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Redirect Settings (conditional) -->
|
|
<div id="redirect-settings" class="hidden space-y-3">
|
|
<%= form.label :redirect_url, "Redirect URL", class: "block text-sm font-medium text-gray-700" %>
|
|
<%= text_field_tag "additional_data[redirect_url]", nil,
|
|
placeholder: "https://example.com/compliance",
|
|
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" %>
|
|
|
|
<%= form.label :redirect_status, "HTTP Status", class: "block text-sm font-medium text-gray-700 mt-2" %>
|
|
<%= select_tag "additional_data[redirect_status]",
|
|
options_for_select([["301 Moved Permanently", 301], ["302 Found", 302], ["307 Temporary Redirect", 307]], 302),
|
|
{ class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" } %>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div>
|
|
<%= form.label :description, "Description (optional)", class: "block text-sm font-medium text-gray-700" %>
|
|
<%= text_area_tag "description", nil, rows: 3,
|
|
placeholder: "e.g., Block countries with high scanner activity",
|
|
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" %>
|
|
</div>
|
|
|
|
<!-- Preview -->
|
|
<div id="policy-preview" class="border-t pt-4">
|
|
<h4 class="text-sm font-medium text-gray-900 mb-2">📋 Policy Preview</h4>
|
|
<div class="bg-gray-50 rounded-md p-3 text-sm text-gray-600">
|
|
<span id="preview-text">Select countries above to see policy preview...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Buttons -->
|
|
<div class="flex justify-end space-x-3">
|
|
<%= link_to "Cancel", waf_policies_path,
|
|
class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" %>
|
|
<%= submit_tag "Create Country Policy",
|
|
class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<script>
|
|
// Show/hide redirect settings based on policy action selection
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const actionRadios = document.querySelectorAll('input[name="policy_action"]');
|
|
const redirectSettings = document.getElementById('redirect-settings');
|
|
const previewText = document.getElementById('preview-text');
|
|
|
|
function updateVisibility() {
|
|
const selectedAction = document.querySelector('input[name="policy_action"]:checked')?.value;
|
|
|
|
if (selectedAction === 'redirect') {
|
|
redirectSettings.classList.remove('hidden');
|
|
} else {
|
|
redirectSettings.classList.add('hidden');
|
|
}
|
|
|
|
updatePreview();
|
|
}
|
|
|
|
function updatePreview() {
|
|
const selectedCountries = document.querySelectorAll('input[name="countries[]"]:checked');
|
|
const selectedAction = document.querySelector('input[name="policy_action"]:checked')?.value || 'deny';
|
|
const actionText = {
|
|
'deny': '🚫 Block',
|
|
'challenge': '🛡️ Challenge',
|
|
'redirect': '🔄 Redirect',
|
|
'allow': '✅ Allow'
|
|
}[selectedAction];
|
|
|
|
if (selectedCountries.length > 0) {
|
|
const countryNames = Array.from(selectedCountries).map(cb => {
|
|
const label = cb.closest('label');
|
|
const countryName = label.querySelector('.font-medium')?.textContent || cb.value;
|
|
return countryName;
|
|
}).join(', ');
|
|
|
|
previewText.textContent = `${actionText} ${selectedCountries.length} countries: ${countryNames}`;
|
|
} else {
|
|
previewText.textContent = 'Select countries above to see policy preview...';
|
|
}
|
|
}
|
|
|
|
// Add event listeners
|
|
actionRadios.forEach(radio => {
|
|
radio.addEventListener('change', updateVisibility);
|
|
});
|
|
|
|
document.querySelectorAll('input[name="countries[]"]').forEach(checkbox => {
|
|
checkbox.addEventListener('change', updatePreview);
|
|
});
|
|
|
|
// Initial update
|
|
updateVisibility();
|
|
});
|
|
</script> |