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 {
            // Get stored keys from localStorage
            const storedKeys = localStorage.getItem(`vpn_keys_${userId}`);
            if (!storedKeys) {
                console.error('No key data found');
                return;
            }
            const keyData = JSON.parse(storedKeys);

            // Fetch VPN configuration from server
            const response = await fetch(`/api/vpn-config/${userId}`);
            if (!response.ok) {
                throw new Error('Failed to fetch VPN configuration');
            }

            const data = await response.json();
            if (!data.configText) {
                throw new Error('No configuration received');
            }

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

            // Display config
            const configText = data.configText;
            document.getElementById('wireguard-config').textContent = configText;

            // Setup copy button
            document.getElementById('copy-config').addEventListener('click', async function () {
                try {
                    await navigator.clipboard.writeText(configText);
                    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([configText], { 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 stored keys
            localStorage.removeItem(`vpn_keys_${userId}`);

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