|
|
@@ -0,0 +1,248 @@
|
|
|
+
|
|
|
+<div class="content-header">
|
|
|
+ <div class="container-fluid">
|
|
|
+ <div class="row mb-2">
|
|
|
+ <div class="col-sm-6">
|
|
|
+ <h1 class="m-0">Gestione Connessione VPN</h1>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-6">
|
|
|
+ <ol class="breadcrumb float-sm-right">
|
|
|
+ <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
|
|
|
+ <li class="breadcrumb-item active">VPN</li>
|
|
|
+ </ol>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- Main content -->
|
|
|
+<div class="row">
|
|
|
+ <!-- Stato VPN -->
|
|
|
+ <div class="col-md-6">
|
|
|
+ <div class="card card-primary">
|
|
|
+ <div class="card-header">
|
|
|
+ <h3 class="card-title">
|
|
|
+ <i class="fas fa-shield-alt"></i> Stato Connessione VPN
|
|
|
+ </h3>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-6">
|
|
|
+ <div class="info-box">
|
|
|
+ <span class="info-box-icon bg-info" id="vpn-status-icon">
|
|
|
+ <i class="fas fa-question"></i>
|
|
|
+ </span>
|
|
|
+ <div class="info-box-content">
|
|
|
+ <span class="info-box-text">Stato VPN</span>
|
|
|
+ <span class="info-box-number" id="vpn-status-text">Caricamento...</span>
|
|
|
+ <span class="info-box-more" id="vpn-last-update">--</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-6">
|
|
|
+ <div class="text-center">
|
|
|
+ <button type="button" class="btn btn-success btn-lg" id="connect-vpn-btn">
|
|
|
+ <i class="fas fa-play"></i> Connetti VPN
|
|
|
+ </button>
|
|
|
+ <button type="button" class="btn btn-warning btn-lg mt-2" id="disconnect-vpn-btn">
|
|
|
+ <i class="fas fa-stop"></i> Disconnetti VPN
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Configurazione Credenziali -->
|
|
|
+ <div class="col-md-6">
|
|
|
+ <div class="card card-warning">
|
|
|
+ <div class="card-header">
|
|
|
+ <h3 class="card-title">
|
|
|
+ <i class="fas fa-cog"></i> Configurazione Credenziali
|
|
|
+ </h3>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ @if(session('success'))
|
|
|
+ <div class="alert alert-success alert-dismissible">
|
|
|
+ <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
|
|
+ {{ session('success') }}
|
|
|
+ </div>
|
|
|
+ @endif
|
|
|
+
|
|
|
+ <form action="/vpn/update-credentials" method="POST">
|
|
|
+ @csrf
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="username">Username</label>
|
|
|
+ <input type="text" class="form-control" id="username" name="username"
|
|
|
+ value="{{ old('username', 'com.cmrmp013.0001') }}" required>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="password">Password</label>
|
|
|
+ <input type="password" class="form-control" id="password" name="password"
|
|
|
+ placeholder="Inserisci la password" required>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="server">Server VPN</label>
|
|
|
+ <input type="text" class="form-control" id="server" name="server"
|
|
|
+ value="{{ old('server', 'anyvpn.ilportaledellautomobilista.it/utentiMCTC') }}" required>
|
|
|
+ </div>
|
|
|
+ <button type="submit" class="btn btn-primary">
|
|
|
+ <i class="fas fa-save"></i> Salva Credenziali
|
|
|
+ </button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- Log VPN -->
|
|
|
+<div class="row mt-4">
|
|
|
+ <div class="col-md-12">
|
|
|
+ <div class="card card-info">
|
|
|
+ <div class="card-header">
|
|
|
+ <h3 class="card-title">
|
|
|
+ <i class="fas fa-file-alt"></i> Log Connessione VPN
|
|
|
+ </h3>
|
|
|
+ <div class="card-tools">
|
|
|
+ <button type="button" class="btn btn-tool" id="refresh-logs">
|
|
|
+ <i class="fas fa-sync"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="table-responsive">
|
|
|
+ <table class="table table-striped">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>Data/Ora</th>
|
|
|
+ <th>Tipo</th>
|
|
|
+ <th>Messaggio</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="vpn-logs-table">
|
|
|
+ <tr>
|
|
|
+ <td colspan="3" class="text-center">Caricamento logs...</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+@push('css')
|
|
|
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
|
|
|
+@endpush
|
|
|
+
|
|
|
+@push('scripts')
|
|
|
+<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
|
|
|
+<script>
|
|
|
+ $(document).ready(function() {
|
|
|
+ // Funzione per aggiornare lo stato VPN
|
|
|
+ function updateVpnStatus() {
|
|
|
+ $.ajax({
|
|
|
+ url: '/vpn/status',
|
|
|
+ type: 'GET',
|
|
|
+ success: function(data) {
|
|
|
+ const status = data.status;
|
|
|
+ const statusIcon = $('#vpn-status-icon i');
|
|
|
+ const statusText = $('#vpn-status-text');
|
|
|
+ const statusBadge = $('#vpn-status-badge');
|
|
|
+ const lastUpdate = $('#vpn-last-update');
|
|
|
+
|
|
|
+ // Aggiorna icona e testo in base al stato
|
|
|
+ if (status === 'connected') {
|
|
|
+ statusIcon.removeClass().addClass('fas fa-check');
|
|
|
+ $('#vpn-status-icon').removeClass().addClass('info-box-icon bg-success');
|
|
|
+ statusText.text('Connesso');
|
|
|
+ if (statusBadge.length) statusBadge.removeClass().addClass('badge badge-success right').text('ON');
|
|
|
+ } else if (status === 'disconnected') {
|
|
|
+ statusIcon.removeClass().addClass('fas fa-times');
|
|
|
+ $('#vpn-status-icon').removeClass().addClass('info-box-icon bg-danger');
|
|
|
+ statusText.text('Disconnesso');
|
|
|
+ if (statusBadge.length) statusBadge.removeClass().addClass('badge badge-danger right').text('OFF');
|
|
|
+ } else {
|
|
|
+ statusIcon.removeClass().addClass('fas fa-question');
|
|
|
+ $('#vpn-status-icon').removeClass().addClass('info-box-icon bg-warning');
|
|
|
+ statusText.text('Sconosciuto');
|
|
|
+ if (statusBadge.length) statusBadge.removeClass().addClass('badge badge-warning right').text('?');
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data.last_update) {
|
|
|
+ lastUpdate.text('Ultimo aggiornamento: ' + new Date(data.last_update).toLocaleString());
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function() {
|
|
|
+ $('#vpn-status-text').text('Errore nel recupero dello stato');
|
|
|
+ const statusBadge = $('#vpn-status-badge');
|
|
|
+ if (statusBadge.length) statusBadge.removeClass().addClass('badge badge-danger right').text('ERR');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // Funzione per connettere VPN
|
|
|
+ $('#connect-vpn-btn').click(function() {
|
|
|
+ const btn = $(this);
|
|
|
+ btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Connettendo...');
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ url: '/vpn/connect',
|
|
|
+ type: 'POST',
|
|
|
+ data: {
|
|
|
+ _token: '{{ csrf_token() }}'
|
|
|
+ },
|
|
|
+ success: function(data) {
|
|
|
+ if (data.success) {
|
|
|
+ toastr.success('Comando di connessione VPN inviato!');
|
|
|
+ setTimeout(updateVpnStatus, 3000); // Aggiorna lo stato dopo 3 secondi
|
|
|
+ } else {
|
|
|
+ toastr.error('Errore nel lancio della connessione VPN');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function() {
|
|
|
+ toastr.error('Errore nel lancio della connessione VPN');
|
|
|
+ },
|
|
|
+ complete: function() {
|
|
|
+ btn.prop('disabled', false).html('<i class="fas fa-play"></i> Connetti VPN');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // Funzione per disconnettere VPN
|
|
|
+ $('#disconnect-vpn-btn').click(function() {
|
|
|
+ const btn = $(this);
|
|
|
+ btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Disconnettendo...');
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ url: '/vpn/disconnect',
|
|
|
+ type: 'POST',
|
|
|
+ data: {
|
|
|
+ _token: '{{ csrf_token() }}'
|
|
|
+ },
|
|
|
+ success: function(data) {
|
|
|
+ if (data.success) {
|
|
|
+ toastr.success('Comando di disconnessione VPN inviato!');
|
|
|
+ setTimeout(updateVpnStatus, 3000);
|
|
|
+ } else {
|
|
|
+ toastr.error('Errore nella disconnessione VPN');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function() {
|
|
|
+ toastr.error('Errore nella disconnessione VPN');
|
|
|
+ },
|
|
|
+ complete: function() {
|
|
|
+ btn.prop('disabled', false).html('<i class="fas fa-stop"></i> Disconnetti VPN');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // Aggiorna lo stato all'avvio
|
|
|
+ updateVpnStatus();
|
|
|
+
|
|
|
+ // Aggiorna lo stato ogni 30 secondi
|
|
|
+ setInterval(updateVpnStatus, 30000);
|
|
|
+ });
|
|
|
+</script>
|
|
|
+@endpush
|