vpn-btcpay-provisioner/app/templates/payment_success.html

{% extends "base.html" %}

{% block content %}
<div class="min-h-screen bg-dark py-8 px-4">
    <div class="max-w-2xl mx-auto bg-dark-lighter rounded-lg shadow-lg p-6">
        <h1 class="text-2xl font-bold mb-4 text-center">Payment Successful!</h1>
        
        <div class="mb-8">
            <p class="text-gray-300 text-center mb-4">
                Your VPN subscription is now active. Please follow the instructions below to set up your VPN connection.
            </p>
        </div>

        <div class="space-y-6">
            <!-- WireGuard Configuration Section -->
            <div id="config-section" class="hidden">
                <h2 class="text-xl font-semibold mb-2">Your WireGuard Configuration</h2>
                <pre id="wireguard-config" class="bg-dark p-4 rounded-md font-mono text-sm overflow-x-auto"></pre>
                <button 
                    id="copy-config" 
                    class="mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors"
                >
                    Copy Configuration
                </button>
                <button 
                    id="download-config" 
                    class="mt-2 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition-colors"
                >
                    Download Configuration
                </button>
            </div>

            <!-- Installation Instructions -->
            <div class="space-y-4">
                <h2 class="text-xl font-semibold">Installation Instructions</h2>
                <ol class="list-decimal list-inside space-y-2 text-gray-300">
                    <li>Download WireGuard for your platform:
                        <div class="ml-6 mt-2 space-y-2">
                            <a href="https://www.wireguard.com/install/" 
                               target="_blank"
                               class="text-blue-400 hover:text-blue-300 block">
                               Official WireGuard Downloads
                            </a>
                        </div>
                    </li>
                    <li>Create a new tunnel in WireGuard</li>
                    <li>Copy the configuration above and paste it into the new tunnel</li>
                    <li>Activate the tunnel to connect</li>
                </ol>
            </div>

            <div class="space-y-2 text-sm text-gray-400">
                <p>• Save your configuration securely - you'll need it to reconnect</p>
                <p>• Your private key is stored in your browser's local storage</p>
                <p>• For security, clear your browser data after saving the configuration</p>
            </div>
        </div>

        <div class="mt-8 text-center">
            <a href="/" class="text-blue-400 hover:text-blue-300">
                Return to Home
            </a>
        </div>
    </div>
</div>

<script type="module">
import { WireGuard } from '/static/js/utils/wireguard.js';

document.addEventListener('DOMContentLoaded', async function() {
    const userId = new URLSearchParams(window.location.search).get('userId');
    if (!userId) {
        console.error('No user ID found in URL');
        return;
    }

    try {
        // Retrieve keys from storage
        const keyData = WireGuard.getKeys(userId);
        if (!keyData) {
            console.error('No key data found');
            return;
        }

        // Hardcoded server details for demonstration purposes
        const serverData = {
            serverPublicKey: 'your-server-public-key',
            serverEndpoint: 'your-server-endpoint',
            clientIp: 'your-client-ip'
        };

        // Generate WireGuard config
        const config = WireGuard.generateConfig(
            keyData,
            serverData.serverPublicKey,
            serverData.serverEndpoint,
            serverData.clientIp
        );

        // Show configuration section
        const configSection = document.getElementById('config-section');
        configSection.classList.remove('hidden');
        
        // Display config
        document.getElementById('wireguard-config').textContent = config;

        // Setup copy button
        document.getElementById('copy-config').addEventListener('click', async function() {
            try {
                await navigator.clipboard.writeText(config);
                this.textContent = 'Copied!';
                setTimeout(() => {
                    this.textContent = 'Copy Configuration';
                }, 2000);
            } catch (error) {
                console.error('Failed to copy config:', error);
                alert('Failed to copy configuration. Please try manually copying.');
            }
        });

        // Setup download button
        document.getElementById('download-config').addEventListener('click', function() {
            try {
                const blob = new Blob([config], { type: 'text/plain' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'wireguard.conf';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            } catch (error) {
                console.error('Failed to download config:', error);
                alert('Failed to download configuration. Please try copying manually.');
            }
        });

        // Clear keys from storage after successful display
        WireGuard.removeKeys(userId);

    } catch (error) {
        console.error('Error setting up configuration:', error);
        alert('Failed to load VPN configuration. Please contact support.');
    }
});
</script>
{% endblock %}