update app.js

Author: Ptechgithub

js/app.js

@@ -5,26 +5,24 @@ const wireGuardConfig = document.querySelector('.wire-guard-config');
 const v2rayConfig = document.querySelector('.v2ray-config');
 const container = document.querySelector('.container');
 
-// Event Listener for Config Button
+// Event: Generate Config
 getConfigBtn.addEventListener('click', async () => {
     getConfigBtn.disabled = true;
     getConfigBtn.textContent = 'Generating...';
-    console.log('Button clicked!');
     try {
         showSpinner();
         const { publicKey, privateKey } = await fetchKeys();
         const installId = generateRandomString(22);
         const fcmToken = `${installId}:APA91b${generateRandomString(134)}`;
         const accountData = await fetchAccount(publicKey, installId, fcmToken);
-        if (accountData) generateConfig(accountData, privateKey);
+        if (accountData) await generateConfig(accountData, privateKey);
     } catch (error) {
         console.error('Error processing configuration:', error);
         showPopup('Failed to generate config. Please try again.', 'error');
     } finally {
         hideSpinner();
         getConfigBtn.disabled = false;
         getConfigBtn.textContent = 'Get Free Config';
-        // Scroll to the config section after generating
         setTimeout(() => {
             if (wireGuardConfig.firstChild) {
                 wireGuardConfig.scrollIntoView({ behavior: 'smooth', block: 'start' });
@@ -33,7 +31,7 @@ getConfigBtn.addEventListener('click', async () => {
     }
 });
 
-// Fetch Public and Private Keys
+// Fetch Key Pair
 const fetchKeys = async () => {
     try {
         const response = await fetch('https://www.iranguard.workers.dev/keys');
@@ -49,11 +47,11 @@ const fetchKeys = async () => {
     }
 };
 
-// Extract Specific Key from Text Data
+// Extract key from text
 const extractKey = (data, keyName) =>
     data.match(new RegExp(`${keyName}:\\s(.+)`))?.[1].trim() || null;
 
-// Fetch Account Configuration
+// Fetch Account Config
 const fetchAccount = async (publicKey, installId, fcmToken) => {
     const apiUrl = 'https://www.iranguard.workers.dev/wg';
     try {
@@ -82,29 +80,48 @@ const fetchAccount = async (publicKey, installId, fcmToken) => {
     }
 };
 
-// Generate and Display Configurations
-const generateConfig = (data, privateKey) => {
+// Fetch random IPv4 endpoint
+const fetchRandomEndpoint = async () => {
+    const fallback = 'engage.cloudflareclient.com:2408';
+    try {
+        const res = await fetch('https://raw.githubusercontent.com/ircfspace/endpoint/refs/heads/main/ip.json');
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const data = await res.json();
+        if (!Array.isArray(data.ipv4) || data.ipv4.length === 0) throw new Error("No IPv4 available");
+        const random = data.ipv4[Math.floor(Math.random() * data.ipv4.length)];
+        return random;
+    } catch (e) {
+        console.warn("Falling back to default endpoint:", e);
+        return fallback;
+    }
+};
+
+// Generate Config and Update UI
+const generateConfig = async (data, privateKey) => {
     const reserved = generateReserved(data.config.client_id);
-    const wireGuardText = generateWireGuardConfig(data, privateKey);
+    const endpoint = await fetchRandomEndpoint();
+
+    const wireGuardText = generateWireGuardConfig(data, privateKey, endpoint);
     const v2rayText = generateV2RayURL(
         privateKey,
         data.config.peers[0].public_key,
         data.config.interface.addresses.v4,
         data.config.interface.addresses.v6,
-        reserved
+        reserved,
+        endpoint
     );
+
     updateDOM(wireGuardConfig, 'WireGuard Format', 'wireguardBox', wireGuardText, 'message1');
     updateDOM(v2rayConfig, 'V2Ray Format', 'v2rayBox', v2rayText, 'message2');
     downloadBtn.style.display = 'block';
-    
-    // Add event listeners to newly created copy buttons
+
     document.querySelectorAll('.copy-button').forEach(btn => {
         btn.addEventListener('click', handleCopyButtonClick);
     });
 };
 
-// Generate WireGuard Configuration Text
-const generateWireGuardConfig = (data, privateKey) => `
+// WireGuard Config Template
+const generateWireGuardConfig = (data, privateKey, endpoint) => `
 [Interface]
 PrivateKey = ${privateKey}
 Address = ${data.config.interface.addresses.v4}/32, ${data.config.interface.addresses.v6}/128
@@ -114,25 +131,25 @@ MTU = 1280
 [Peer]
 PublicKey = ${data.config.peers[0].public_key}
 AllowedIPs = 0.0.0.0/0, ::/0
-Endpoint = engage.cloudflareclient.com:2408
+Endpoint = ${endpoint}
 `;
 
-// Generate Reserved Parameter Dynamically
+// Reserved parameter
 const generateReserved = (clientId) =>
     Array.from(atob(clientId))
         .map((char) => char.charCodeAt(0))
         .slice(0, 3)
         .join('%2C');
 
 // Generate V2Ray URL
-const generateV2RayURL = (privateKey, publicKey, ipv4, ipv6, reserved) =>
-    `wireguard://${encodeURIComponent(privateKey)}@engage.cloudflareclient.com:2408?address=${encodeURIComponent(
+const generateV2RayURL = (privateKey, publicKey, ipv4, ipv6, reserved, endpoint) =>
+    `wireguard://${encodeURIComponent(privateKey)}@${endpoint}?address=${encodeURIComponent(
         ipv4 + '/32'
     )},${encodeURIComponent(ipv6 + '/128')}&reserved=${reserved}&publickey=${encodeURIComponent(
         publicKey
     )}&mtu=1420#V2ray-Config`;
 
-// Update DOM with Configurations
+// Update Config Boxes in UI
 const updateDOM = (container, title, textareaId, content, messageId) => {
     container.innerHTML = `
         <h2>${title}</h2>
@@ -142,19 +159,18 @@ const updateDOM = (container, title, textareaId, content, messageId) => {
     `;
 };
 
-// Show and Hide Spinner
+// Spinner Show/Hide
 const showSpinner = () => {
     const spinner = document.querySelector('.spinner');
     if (spinner) spinner.style.display = 'block';
 };
-
 const hideSpinner = () => {
     const spinner = document.querySelector('.spinner');
     if (spinner) spinner.style.display = 'none';
 };
 
-// Handle Copy Button Click
-const handleCopyButtonClick = async function(e) {
+// Handle Copy
+const handleCopyButtonClick = async function () {
     const targetId = this.getAttribute('data-target');
     const messageId = this.getAttribute('data-message');
     try {
@@ -169,7 +185,7 @@ const handleCopyButtonClick = async function(e) {
     }
 };
 
-// Show Copy Success or Error Message
+// Show Copy Message
 const showCopyMessage = (messageId, message) => {
     const messageElement = document.getElementById(messageId);
     if (messageElement) {
@@ -182,21 +198,15 @@ const showCopyMessage = (messageId, message) => {
     }
 };
 
-// Show popup notification
+// Show Popup Message
 const showPopup = (message, type = 'success') => {
     const popup = document.createElement('div');
     popup.className = 'popup-message';
     popup.textContent = message;
-    
-    if (type === 'error') {
-        popup.style.backgroundColor = '#d32f2f';
-    }
-    
+    if (type === 'error') popup.style.backgroundColor = '#d32f2f';
     document.body.appendChild(popup);
     setTimeout(() => {
-        if (popup.parentNode) {
-            popup.parentNode.removeChild(popup);
-        }
+        if (popup.parentNode) popup.parentNode.removeChild(popup);
     }, 2500);
 };
 
@@ -208,7 +218,7 @@ const generateRandomString = (length) =>
         )
     ).join('');
 
-// Download Configuration as File
+// Download Config Button
 downloadBtn.addEventListener('click', () => {
     const content = document.querySelector('#wireguardBox')?.value || "No configuration available";
     if (content === "No configuration available") {
@@ -219,6 +229,7 @@ downloadBtn.addEventListener('click', () => {
     showPopup('Configuration file downloaded');
 });
 
+// Download Config File
 const downloadConfig = (fileName, content) => {
     const element = document.createElement('a');
     const file = new Blob([content], { type: 'text/plain' });
@@ -229,20 +240,15 @@ const downloadConfig = (fileName, content) => {
     document.body.removeChild(element);
 };
 
-// Check for viewport size changes
+// Responsive UI
 function checkViewportSize() {
     if (window.innerWidth <= 480) {
-        // For very small screens
         container.style.padding = '15px';
     } else if (window.innerWidth <= 768) {
-        // For small screens
         container.style.padding = '20px';
     } else {
-        // For larger screens
         container.style.padding = '32px';
     }
 }
-
-// Run on page load and when window is resized
 window.addEventListener('load', checkViewportSize);
-window.addEventListener('resize', checkViewportSize);
+window.addEventListener('resize', checkViewportSize);