Files
ERP-upgrade/resources/views/vpns/index.blade.php
2026-09-23 09:03:01 +00:00

507 lines
32 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 -->
<!-- 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" novalidate>
@csrf
<div class="modal-body p-0">
<!-- Modal Navigation Tabs -->
<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="#add-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="#add-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="#add-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="add-tab-basic">
<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" required>
</div>
<div class="col-md-6">
<label class="form-label text-secondary fw-semibold small">Status *</label>
<select class="form-select" name="status" required>
<option value="Active" selected>Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
<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>
<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" 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" 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" placeholder="e.g. 10.0.0.0/24">
</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">
</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">Pre-Shared Key (PSK) *</label>
<input type="password" class="form-control font-monospace" name="preshared_key" required>
</div>
</div>
</div>
<!-- TAB 2: PHASE 1 (IKE) -->
<div class="tab-pane fade" id="add-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="add-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>
<option value="3DES">3DES</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">SHA</option>
<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="addPfsSwitch">
<label class="form-check-label text-secondary fw-semibold small" for="addPfsSwitch">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 -->
<!-- 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" novalidate>
@csrf
@method('PUT')
<input type="hidden" id="edit_vpn_id">
<div class="modal-body p-0">
<!-- Modal Navigation Tabs -->
<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="#edit-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="#edit-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="#edit-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="edit-tab-basic">
<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-md-6">
<label class="form-label text-secondary fw-semibold small">Local Device</label>
<input type="text" class="form-control" name="local_device" id="edit_local_device">
</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" id="edit_peer_device">
</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>
<!-- TAB 2: PHASE 1 (IKE) -->
<div class="tab-pane fade" id="edit-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" id="edit_ike_version">
<option value="1">v1</option>
<option value="2">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" id="edit_phase1_encryption">
<option value="AES-128">AES-128</option>
<option value="AES-256">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" id="edit_phase1_hash">
<option value="SHA-1">SHA-1</option>
<option value="SHA-256">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" id="edit_phase1_dh_group">
<option value="2">Group 2</option>
<option value="14">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" id="edit_phase1_lifetime" required>
</div>
</div>
</div>
<!-- TAB 3: PHASE 2 (IPSEC) -->
<div class="tab-pane fade" id="edit-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" id="edit_phase2_encryption">
<option value="AES-128">AES-128</option>
<option value="AES-256">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" id="edit_phase2_hash">
<option value="SHA-1">SHA-1</option>
<option value="SHA-256">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" id="edit_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" id="edit_phase2_lifetime" 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" id="edit_pfs_enabled">
<label class="form-check-label text-secondary fw-semibold small" for="edit_pfs_enabled">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="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 src="{{ asset('public/assets/js/vpn-index.js') }}"></script>
@endpush