<?php
require_once('classes/Io.php');

session_start();

if(!isset($_SESSION['authorized']) || $_SESSION['authorized'] !== true || empty($_SESSION['username']))
{
    header("Location: /login.php");
    die();
}

$configs = array();
$names = array();

if(is_dir('/var/lib/vpnportal/userConfigs/'.$_SESSION['username']))
{
    $files = glob('/var/lib/vpnportal/userConfigs/'.$_SESSION['username'].'/*.conf');
    foreach($files as $file)
    {
        $content = Io::safeFileGetContents($file);
        $config = array();
        $config['name'] = basename($file, '.conf');
        $publicKeyPos = strpos($content, 'PublicKey =');
        if($publicKeyPos === false) continue;
        $publicKeyEndPos = strpos($content, "\n", $publicKeyPos);
        $config['publicKey'] = substr($content, $publicKeyPos + 12, $publicKeyEndPos - $publicKeyPos - 12);
        $names[] = $config['name'];
        $configs[] = $config;
    }
}
?>
<!DOCTYPE html>
<html class="login-page" lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>VPN-Portal</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">VPN-Portal</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Navigation umschalten">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto"></ul>
            <form class="form-inline my-2 my-lg-0" method="GET" action="/logout.php">
                <button class="btn btn-secondary my-2 my-sm-0" type="submit">Abmelden</button>
            </form>
        </div>
    </nav>
    <div class="container">
        <div style="height: 20px;"></div>
        <div class="row">
            <div class="col-sm-3">
                <div style="margin: 5px;"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#tutorialModal">Installationsanleitung</button></div>
            </div>
            <div class="col-sm-3"></div>
            <div class="col-sm-3"></div>
            <div class="col-sm-3">
                <div style="margin: 5px;text-align: right;"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createConfigModal">Zugang hinzufügen</button></div>
            </div>
        </div>
        <div style="height: 20px;"></div>
        <div class="row">
<?php
if(count($configs) === 0)
{
    echo '<p>Keine Konfigurationen vorhanden.</p>';
}

foreach($configs as $config)
{
    echo '<div class="col-sm-4">';
    echo '    <div class="card" style="margin: 5px;">';
    echo '        <div class="card-body">';
    echo '            <h5 class="card-title">'.$config['name'].'</h5>';
    echo '            <h6 class="card-subtitle mb-2 text-muted">Öffentlicher Schlüssel:</h6>';
    echo '            <p class="card-text text-muted">'.$config['publicKey'].'</p>';
    echo '            <a href="#" class="card-link remove-config" data-name="'.$config['name'].'">Zugang entfernen</a>';
    echo '        </div>';
    echo '    </div>';
    echo '</div>';
}
?>
        </div>
    </div>
    <!-- Create config modal -->
    <div class="modal fade" id="createConfigModal" tabindex="-1" role="dialog" aria-labelledby="createConfigModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">Zugang hinzufügen</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group"><input id="createConfigModalName" type="text" placeholder="Name der Verbindung" class="form-control" id="createConfigModalName"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
                    <button id="createConfigModalAdd" type="button" class="btn btn-secondary">Hinzufügen</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="configModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="configModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">Zugangsdaten</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="waitModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="waitModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Bitte warten</h5>
                </div>
                <div class="modal-body">
                    <p>Änderungen werden angewendet.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="tutorialModal" tabindex="-1" role="dialog" aria-labelledby="waitModal" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Installationsanleitung</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <video style="width: 100%;" controls>
                        <source src="/assets/videos/WireguardTutorial.mp4" type="video/mp4">
                        Ihr Browser unterstützt keine Videowiedergabe.
                    </video>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
                </div>
            </div>
        </div>
    </div>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script>
var names = <?php print(json_encode($names)); ?>;

$('#createConfigModalAdd').on('click', function(e) {
    var name = $('#createConfigModalName').val().trim();
    if(name && $.inArray(name, names) == -1)
    {
        $('#createConfigModal').modal('hide');
        $.ajax({
            url: '/ajax.php?cmd=generateConfig&name=' + encodeURIComponent(name)
        }).done(function(data) {
            if(data['result'] == 'success') {
                $('#configModal .modal-body').html('<p>Zur Nutzung auf dem Smartphone scannen Sie den QR-Code mit der Wireguard-App. Zur Nutzung auf dem Computer laden Sie die Konfigurationsdatei herunter und importieren Sie diese in Wireguard.</p><p><b>Achtung: Die Zugangsdaten können nach dem Klick auf "Schließen" nicht erneut heruntergeladen werden!</b></p><p><b>Achtung: Jedes Endgerät benötigt einen eigenen Zugang!</b></p><div style="text-align: center">' + data['qrCode'] + '</div><div style="text-align: center"><a class="btn btn-dark" download="ib.conf" href="data:text/plain;charset=utf-8,' + encodeURIComponent(data['config']) + '">Konfigurationsdatei herunterladen</a></div>');
                $('#configModal').modal('show');
            }
            else
            {
                alert('Fehler beim Generieren der Zugangsdaten: ' + data['faultString']);
            }
        });
    }
});

$('#configModal').on('hidden.bs.modal', function(e) {
    $('#waitModal').modal('show');
});

$('.remove-config').on('click', function(e) {
    var name = $(this).data('name');
    $.ajax({
        url: '/ajax.php?cmd=removeConfig&name=' + encodeURIComponent(name)
    });
    $(this).parent().parent().parent().remove();
    $('#waitModal').modal('show');
});

$('#waitModal').on('shown.bs.modal', function(e) {
    setTimeout(function() { window.location.href = '/'; }, 5000);
});
    </script>
</body>
</html>
