111 lines
4.4 KiB
HTML
111 lines
4.4 KiB
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>
|
|
</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>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const userId = new URLSearchParams(window.location.search).get('userId');
|
|
if (userId) {
|
|
// Retrieve keys from localStorage
|
|
const keyData = localStorage.getItem(`vpn_keys_${userId}`);
|
|
if (keyData) {
|
|
const keys = JSON.parse(keyData);
|
|
|
|
// Make config section visible
|
|
document.getElementById('config-section').classList.remove('hidden');
|
|
|
|
// Get server details from response
|
|
fetch(`/api/subscription/config?userId=${userId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const config = `[Interface]
|
|
PrivateKey = ${keys.privateKey}
|
|
Address = ${data.clientIp}/24
|
|
DNS = 1.1.1.1
|
|
|
|
[Peer]
|
|
PublicKey = ${data.serverPublicKey}
|
|
Endpoint = ${data.serverEndpoint}:51820
|
|
AllowedIPs = 0.0.0.0/0
|
|
PersistentKeepalive = 25`;
|
|
|
|
document.getElementById('wireguard-config').textContent = config;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching configuration:', error);
|
|
});
|
|
|
|
// Setup copy button
|
|
document.getElementById('copy-config').addEventListener('click', function() {
|
|
const config = document.getElementById('wireguard-config').textContent;
|
|
navigator.clipboard.writeText(config).then(() => {
|
|
this.textContent = 'Copied!';
|
|
setTimeout(() => {
|
|
this.textContent = 'Copy Configuration';
|
|
}, 2000);
|
|
});
|
|
});
|
|
|
|
// Clear keys from localStorage after showing config
|
|
localStorage.removeItem(`vpn_keys_${userId}`);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |