491 lines
27 KiB
PHP
491 lines
27 KiB
PHP
@extends('layouts.masterbeta')
|
|
|
|
@section('title', 'Click ERP - VPN Management')
|
|
|
|
@section('breadcrumbs')
|
|
<a href="{{ url('/') }}" class="text-secondary text-decoration-none"><i class="bi bi-house me-2"></i></a>
|
|
<i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
|
|
<span class="fw-bold" style="font-size: 0.95rem;">VPN Management</span>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h4 class="fw-bold mb-1">VPN Management</h4>
|
|
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage IPsec configurations with partners.</p>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<!-- Global Standard Template Export -->
|
|
<a href="{{ route('vpns.standard-template') }}" class="btn btn-outline-dark fw-bold d-flex align-items-center" style="border-radius: 8px;">
|
|
<i class="bi bi-file-earmark-arrow-down me-2"></i> Standard Parameters
|
|
</a>
|
|
|
|
<button class="btn text-white fw-bold d-flex align-items-center" style="background-color: #5c4df0; border-radius: 8px;" data-bs-toggle="modal" data-bs-target="#addVpnModal">
|
|
<i class="bi bi-plus-lg me-2"></i> Add VPN Config
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-card shadow-sm bg-white rounded-3 overflow-hidden">
|
|
<!-- Filters Header -->
|
|
<div class="p-3 border-bottom bg-light bg-opacity-50">
|
|
<div class="row g-3 align-items-center">
|
|
<div class="col-md-5">
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-white border-end-0 text-secondary"><i class="bi bi-search"></i></span>
|
|
<input type="text" class="form-control bg-white border-start-0 ps-0" id="searchVpn" placeholder="Search by partner name or IP...">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead class="table-light text-secondary" style="font-size: 0.85rem;">
|
|
<tr>
|
|
<th class="ps-4">Partner</th>
|
|
<th>Gateways (Local ➔ Peer)</th>
|
|
<th>Encryption Domains (Local ➔ Remote)</th>
|
|
<th>Status</th>
|
|
<th class="text-end pe-4">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($vpns as $vpn)
|
|
<tr>
|
|
<td class="ps-4 fw-bold text-dark">{{ $vpn->partner_name }}</td>
|
|
<td>
|
|
<div class="font-monospace small">
|
|
<span class="text-primary">{{ $vpn->local_ip }}</span>
|
|
<i class="bi bi-arrow-right mx-1 text-secondary"></i>
|
|
<span class="text-danger">{{ $vpn->peer_ip }}</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="font-monospace small text-secondary">
|
|
{{ $vpn->encryption_domain_local ?? 'Any' }}
|
|
<i class="bi bi-arrow-right mx-1"></i>
|
|
{{ $vpn->encryption_domain_remote ?? 'Any' }}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge {{ $vpn->status == 'Active' ? 'bg-success' : 'bg-warning' }} bg-opacity-10 text-{{ $vpn->status == 'Active' ? 'success' : 'warning' }}">
|
|
{{ $vpn->status }}
|
|
</span>
|
|
</td>
|
|
<td class="text-end pe-4">
|
|
<button class="btn btn-sm btn-outline-dark fw-bold btn-export-vpn me-2" data-id="{{ $vpn->id }}">
|
|
<i class="bi bi-download me-1"></i> Export
|
|
</button>
|
|
<button class="btn btn-sm btn-light text-primary btn-edit-vpn" data-id="{{ $vpn->id }}" title="Edit">
|
|
<i class="bi bi-pencil"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="text-center py-5 text-secondary">
|
|
<i class="bi bi-shield-slash fs-1 text-muted mb-2 d-block"></i>
|
|
No VPN configurations added yet.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
@if($vpns->hasPages())
|
|
<div class="card-footer bg-white border-top p-3 d-flex justify-content-center">
|
|
{{ $vpns->links('pagination::bootstrap-5') }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endsection
|
|
|
|
@push('modals')
|
|
<!-- ADD VPN MODAL -->
|
|
<div class="modal fade" id="addVpnModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-light border-bottom-0">
|
|
<h5 class="modal-title fw-bold">Add VPN Configuration</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<form id="addVpnForm">
|
|
@csrf
|
|
<div class="modal-body p-0">
|
|
<ul class="nav nav-tabs px-4 pt-3 bg-light" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active fw-bold" data-bs-toggle="tab" data-bs-target="#tab-basic" type="button">Basic Info</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link fw-bold text-dark" data-bs-toggle="tab" data-bs-target="#tab-phase1" type="button">Phase 1 (IKE)</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link fw-bold text-dark" data-bs-toggle="tab" data-bs-target="#tab-phase2" type="button">Phase 2 (IPSec)</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content p-4">
|
|
<!-- TAB 1: BASIC INFO -->
|
|
<div class="tab-pane fade show active" id="tab-basic">
|
|
<!-- Place your existing Partner Name, Status, IPs, Subnets, and PSK fields here -->
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Local Device</label>
|
|
<input type="text" class="form-control" name="local_device" placeholder="e.g. Cisco Catalyst 8500">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Peer Device</label>
|
|
<input type="text" class="form-control" name="peer_device" placeholder="e.g. FortiGate 61E">
|
|
</div>
|
|
<!-- ... existing gateway/subnet inputs ... -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TAB 2: PHASE 1 (IKE) -->
|
|
<div class="tab-pane fade" id="tab-phase1">
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<label class="form-label text-secondary fw-semibold small">IKE Version *</label>
|
|
<select class="form-select" name="ike_version">
|
|
<option value="1">v1</option>
|
|
<option value="2" selected>v2</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label text-secondary fw-semibold small">Encryption *</label>
|
|
<select class="form-select" name="phase1_encryption">
|
|
<option value="AES-128">AES-128</option>
|
|
<option value="AES-256" selected>AES-256</option>
|
|
<option value="3DES">3DES</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label text-secondary fw-semibold small">Hash *</label>
|
|
<select class="form-select" name="phase1_hash">
|
|
<option value="SHA-1">SHA-1</option>
|
|
<option value="SHA-256" selected>SHA-256</option>
|
|
<option value="SHA-512">SHA-512</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">DH Group *</label>
|
|
<select class="form-select" name="phase1_dh_group">
|
|
<option value="2">Group 2</option>
|
|
<option value="14" selected>Group 14</option>
|
|
<option value="21">Group 21</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Lifetime (Seconds) *</label>
|
|
<input type="number" class="form-control" name="phase1_lifetime" value="28800" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TAB 3: PHASE 2 (IPSEC) -->
|
|
<div class="tab-pane fade" id="tab-phase2">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Encryption *</label>
|
|
<select class="form-select" name="phase2_encryption">
|
|
<option value="AES-128">AES-128</option>
|
|
<option value="AES-256" selected>AES-256</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Hash *</label>
|
|
<select class="form-select" name="phase2_hash">
|
|
<option value="SHA-1">SHA-1</option>
|
|
<option value="SHA-256" selected>SHA-256</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label text-secondary fw-semibold small">DH Group</label>
|
|
<select class="form-select" name="phase2_dh_group">
|
|
<option value="">Match Phase 1</option>
|
|
<option value="14">Group 14</option>
|
|
<option value="21">Group 21</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label text-secondary fw-semibold small">Lifetime (Secs) *</label>
|
|
<input type="number" class="form-control" name="phase2_lifetime" value="3600" required>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-end">
|
|
<div class="form-check form-switch mb-2">
|
|
<input class="form-check-input" type="checkbox" name="pfs_enabled" value="1" checked id="pfsSwitch">
|
|
<label class="form-check-label text-secondary fw-semibold small" for="pfsSwitch">Enable PFS</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-light border-top-0">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" id="btnSaveVpn" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">
|
|
Save Configuration
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EDIT VPN MODAL -->
|
|
<div class="modal fade" id="editVpnModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-light border-bottom-0">
|
|
<h5 class="modal-title fw-bold">Edit VPN Configuration</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<form id="editVpnForm">
|
|
@csrf
|
|
@method('PUT')
|
|
<input type="hidden" id="edit_vpn_id">
|
|
|
|
<div class="modal-body p-4">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Partner Name *</label>
|
|
<input type="text" class="form-control" name="partner_name" id="edit_partner_name" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Status *</label>
|
|
<select class="form-select" name="status" id="edit_status" required>
|
|
<option value="Active">Active</option>
|
|
<option value="Inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-12 mt-4 mb-2 border-bottom pb-2">
|
|
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-router me-2"></i>Gateway IP Addresses</h6>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Local Gateway IP *</label>
|
|
<input type="text" class="form-control font-monospace" name="local_ip" id="edit_local_ip" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Peer Gateway IP *</label>
|
|
<input type="text" class="form-control font-monospace" name="peer_ip" id="edit_peer_ip" required>
|
|
</div>
|
|
|
|
<div class="col-12 mt-4 mb-2 border-bottom pb-2">
|
|
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-diagram-3 me-2"></i>Encryption Domains (Subnets)</h6>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Local Encryption Domain</label>
|
|
<input type="text" class="form-control font-monospace" name="encryption_domain_local" id="edit_encryption_domain_local">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Remote Encryption Domain</label>
|
|
<input type="text" class="form-control font-monospace" name="encryption_domain_remote" id="edit_encryption_domain_remote">
|
|
</div>
|
|
|
|
<div class="col-12 mt-4 mb-2 border-bottom pb-2">
|
|
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-key me-2"></i>Authentication</h6>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<label class="form-label text-secondary fw-semibold small">Update Pre-Shared Key (PSK)</label>
|
|
<input type="password" class="form-control font-monospace" name="preshared_key" placeholder="Leave blank to keep current PSK">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-light border-top-0">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" id="btnUpdateVpn" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">
|
|
Update Configuration
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EXPORT VPN CONFIG MODAL -->
|
|
<div class="modal fade" id="exportVpnModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-dark text-white border-bottom-0">
|
|
<h5 class="modal-title fw-bold"><i class="bi bi-file-earmark-code me-2"></i>Export Partner Config</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<form action="{{ route('vpns.download') }}" method="POST">
|
|
@csrf
|
|
<input type="hidden" name="partner_name" id="export_partner_name">
|
|
|
|
<div class="modal-body p-4">
|
|
<div class="alert alert-info py-2 d-flex align-items-center" style="font-size: 0.85rem;">
|
|
<i class="bi bi-info-circle-fill me-2 fs-5"></i>
|
|
<div>You can edit the configuration parameters below before downloading the file to share with the partner.</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<textarea class="form-control font-monospace bg-light" name="config_content" id="export_config_content" rows="15" required style="font-size: 0.85rem; white-space: pre;"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-light border-top-0 d-flex justify-content-between">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-success btn-sm fw-bold px-4">
|
|
<i class="bi bi-download me-1"></i> Download .txt File
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
let baseUrl = "{{ url('/') }}";
|
|
|
|
// 1. Add VPN Config
|
|
$('#addVpnForm').on('submit', function(e) {
|
|
e.preventDefault();
|
|
let $form = $(this);
|
|
let $btn = $('#btnSaveVpn');
|
|
let originalText = $btn.html();
|
|
|
|
$btn.html('<span class="spinner-border spinner-border-sm me-2"></span>Saving...').prop('disabled', true);
|
|
$form.find('.is-invalid').removeClass('is-invalid');
|
|
|
|
$.ajax({
|
|
url: `${baseUrl}/vpns`,
|
|
type: 'POST',
|
|
data: $form.serialize(),
|
|
success: function(response) {
|
|
$('#addVpnModal').modal('hide');
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Added!',
|
|
text: response.message,
|
|
timer: 1500,
|
|
showConfirmButton: false
|
|
}).then(() => location.reload());
|
|
},
|
|
error: function(xhr) {
|
|
if (xhr.status === 422) {
|
|
$.each(xhr.responseJSON.errors, function(key, value) {
|
|
let $input = $form.find('[name="' + key + '"]');
|
|
$input.addClass('is-invalid');
|
|
$input.parent().append('<div class="invalid-feedback d-block fw-medium">' + value[0] + '</div>');
|
|
});
|
|
} else {
|
|
Swal.fire('Error', 'An unexpected error occurred.', 'error');
|
|
}
|
|
},
|
|
complete: function() {
|
|
$btn.html(originalText).prop('disabled', false);
|
|
}
|
|
});
|
|
});
|
|
|
|
// 2. Fetch Data for Edit Modal
|
|
$(document).on('click', '.btn-edit-vpn', function(e) {
|
|
e.preventDefault();
|
|
let vpnId = $(this).data('id');
|
|
|
|
$.ajax({
|
|
url: `${baseUrl}/vpns/${vpnId}`,
|
|
type: 'GET',
|
|
success: function(vpn) {
|
|
$('#edit_vpn_id').val(vpn.id);
|
|
$('#edit_partner_name').val(vpn.partner_name);
|
|
$('#edit_local_ip').val(vpn.local_ip);
|
|
$('#edit_peer_ip').val(vpn.peer_ip);
|
|
$('#edit_encryption_domain_local').val(vpn.encryption_domain_local);
|
|
$('#edit_encryption_domain_remote').val(vpn.encryption_domain_remote);
|
|
$('#edit_status').val(vpn.status);
|
|
|
|
$('#editVpnModal').modal('show');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 3. Update VPN Config
|
|
$('#editVpnForm').on('submit', function(e) {
|
|
e.preventDefault();
|
|
let $form = $(this);
|
|
let vpnId = $('#edit_vpn_id').val();
|
|
let $btn = $('#btnUpdateVpn');
|
|
let originalText = $btn.html();
|
|
|
|
$btn.html('<span class="spinner-border spinner-border-sm me-2"></span>Updating...').prop('disabled', true);
|
|
$form.find('.is-invalid').removeClass('is-invalid');
|
|
$form.find('.invalid-feedback').remove();
|
|
|
|
$.ajax({
|
|
url: `${baseUrl}/vpns/${vpnId}`,
|
|
type: 'POST',
|
|
data: $form.serialize(),
|
|
success: function(response) {
|
|
$('#editVpnModal').modal('hide');
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Updated!',
|
|
text: response.message,
|
|
timer: 1500,
|
|
showConfirmButton: false
|
|
}).then(() => location.reload());
|
|
},
|
|
error: function(xhr) {
|
|
if (xhr.status === 422) {
|
|
$.each(xhr.responseJSON.errors, function(key, value) {
|
|
let $input = $form.find('[name="' + key + '"]');
|
|
$input.addClass('is-invalid');
|
|
$input.parent().append('<div class="invalid-feedback d-block fw-medium">' + value[0] + '</div>');
|
|
});
|
|
}
|
|
},
|
|
complete: function() {
|
|
$btn.html(originalText).prop('disabled', false);
|
|
}
|
|
});
|
|
});
|
|
|
|
// 4. Export VPN Configuration (Trigger Modal)
|
|
$(document).on('click', '.btn-export-vpn', function(e) {
|
|
e.preventDefault();
|
|
let vpnId = $(this).data('id');
|
|
let $btn = $(this);
|
|
let originalHtml = $btn.html();
|
|
|
|
$btn.html('<span class="spinner-border spinner-border-sm"></span>').prop('disabled', true);
|
|
|
|
$.ajax({
|
|
url: `${baseUrl}/vpns/${vpnId}/template`,
|
|
type: 'GET',
|
|
success: function(response) {
|
|
$('#export_partner_name').val(response.partner_name);
|
|
$('#export_config_content').val(response.template);
|
|
$('#exportVpnModal').modal('show');
|
|
},
|
|
error: function() {
|
|
Swal.fire('Error', 'Failed to generate configuration template.', 'error');
|
|
},
|
|
complete: function() {
|
|
$btn.html(originalHtml).prop('disabled', false);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Clean up modals on close
|
|
$('#addVpnModal, #editVpnModal, #exportVpnModal').on('hidden.bs.modal', function () {
|
|
$(this).find('form')[0].reset();
|
|
$(this).find('.is-invalid').removeClass('is-invalid');
|
|
$(this).find('.invalid-feedback').remove();
|
|
});
|
|
});
|
|
</script>
|
|
@endpush |