Acceso Reseller
Usuario
Contraseña
Iniciar Sesión
Zen Shield
White-Label Beta
Ajustes Generales
Salir
Administrar Servidores VPN
Nombre
Región / Flag
Host / IP
SSH
SSL
Acciones
Añadir Servidor
Diseñador de Interfaz Web
index.html (Estructura)
style.css (Estilos)
app.js (Lógica / JNI Bridge)
Restablecer Plantilla
Guardar y Aplicar OTA
Vista Previa del Cliente
</div> </div> <button type="button" class="btn btn-secondary" style="margin-top: 16px;" onclick="refreshPreview()"><i class="fa-solid fa-arrows-rotate"></i> Refrescar Simulador</button> </div> </div> <!-- SERVER FORM MODAL --> <div id="server-modal" class="modal"> <div class="modal-card"> <h3 style="font-weight: 700; margin-bottom: 20px;" id="server-modal-title">Añadir Servidor</h3> <form id="server-form"> <input type="hidden" id="server-index"> <div class="form-row"> <div class="form-group"> <label>Nombre del Servidor</label> <input type="text" id="srv-name" required placeholder="Miami Premium"> </div> <div class="form-group"> <label>Región / Grupo</label> <input type="text" id="srv-region" required placeholder="Estados Unidos"> </div> </div> <div class="form-row"> <div class="form-group"> <label>Host / IP</label> <input type="text" id="srv-host" required placeholder="159.123.4.15"> </div> <div class="form-group"> <label>Bandera (Código 2 Letras)</label> <input type="text" id="srv-flag" placeholder="us" maxlength="2" style="text-transform: lowercase;"> </div> </div> <div class="form-row"> <div class="form-group"> <label>Usuario Fijo (Opcional)</label> <input type="text" id="srv-user" placeholder="Dejar vacío si el usuario lo pone manual"> </div> <div class="form-group"> <label>Contraseña Fija (Opcional)</label> <input type="text" id="srv-pass" placeholder="Contraseña fija del servidor"> </div> </div> <div class="form-row"> <div class="form-group"> <label>Puerto SSH</label> <input type="number" id="srv-ssh-port" value="22"> </div> <div class="form-group"> <label>Puerto SSL</label> <input type="number" id="srv-ssl-port" value="443"> </div> </div> <div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 10px;"> <button type="button" class="btn btn-secondary" onclick="closeModal('server-modal')">Cancelar</button> <button type="submit" class="btn">Guardar Servidor</button> </div> </form> </div> </div> <!-- SETTINGS MODAL --> <div id="settings-modal" class="modal"> <div class="modal-card" style="max-width: 600px;"> <h3 style="font-weight: 700; margin-bottom: 20px;">Ajustes de Seguridad y Seeds</h3> <form id="settings-form"> <div class="form-row"> <div class="form-group"> <label>Usuario del Panel</label> <input type="text" id="set-admin-user" required> </div> <div class="form-group"> <label>Nueva Contraseña (Dejar vacío para no cambiar)</label> <input type="password" id="set-admin-pass" placeholder="••••••••"> </div> </div> <div class="form-group"> <label>Firma SHA-256 del APK Autorizado</label> <input type="text" id="set-signature" required> </div> <div class="form-row"> <div class="form-group"> <label>Semilla de Cifrado (Capa 1 - Dinámica)</label> <input type="text" id="set-seed" required> </div> <div class="form-group"> <label>Clave de Campos (Capa 2 - JNI)</label> <input type="text" id="set-v2ray-secret" required> </div> </div> <div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 10px;"> <button type="button" class="btn btn-secondary" onclick="closeModal('settings-modal')">Cancelar</button> <button type="submit" class="btn">Guardar Ajustes</button> </div> </form> </div> </div> <!-- Toast Notification --> <div id="toast" class="toast"> <i class="fa-solid fa-circle-check" style="font-size: 1.2rem;"></i> <span id="toast-message">Cambios guardados con éxito</span> </div> <script> let currentServers = []; let configData = {}; // 1. Initial Page Load window.addEventListener('load', () => { checkAuth(); }); async function checkAuth() { try { const response = await fetch('/api/admin/config'); if (response.ok) { document.getElementById('login-screen').style.display = 'none'; loadDashboard(); } else { document.getElementById('login-screen').style.display = 'flex'; } } catch(e) { document.getElementById('login-screen').style.display = 'flex'; } } // Login Handler document.getElementById('login-form').addEventListener('submit', async (e) => { e.preventDefault(); const username = document.getElementById('login-user').value; const password = document.getElementById('login-pass').value; try { const response = await fetch('/api/admin/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }); if (response.ok) { showToast('Sesión iniciada con éxito!'); document.getElementById('login-screen').style.display = 'none'; loadDashboard(); } else { alert('Credenciales inválidas.'); } } catch(err) { alert('Error al conectar con el servidor.'); } }); // Logout async function logout() { await fetch('/api/admin/logout', { method: 'POST' }).catch(()=>{}); document.getElementById('login-screen').style.display = 'flex'; showToast('Sesión cerrada'); } // 2. Fetch and Load Dashboard data async function loadDashboard() { try { // Get config const res = await fetch('/api/admin/config'); configData = await res.json(); currentServers = configData.servers || []; renderServersTable(); // Get UI source files const resUi = await fetch('/api/admin/get-ui-files'); const uiFiles = await resUi.json(); document.getElementById('code-html').value = uiFiles.indexHtml; document.getElementById('code-css').value = uiFiles.styleCss; document.getElementById('code-js').value = uiFiles.appJs; // Load Settings values document.getElementById('set-admin-user').value = configData.admin_user; document.getElementById('set-signature').value = configData.expected_signature; document.getElementById('set-seed').value = configData.secret_seed; document.getElementById('set-v2ray-secret').value = configData.v2ray_secret; refreshPreview(); } catch(e) { console.error("Failed to load dashboard data", e); } } // Render servers list table function renderServersTable() { const tbody = document.getElementById('server-table-body'); tbody.innerHTML = ''; if (currentServers.length === 0) { tbody.innerHTML = '<tr><td colspan="6" style="text-align: center; color: var(--text-secondary);">No hay servidores. Agrega el primero.</td></tr>'; return; } currentServers.forEach((srv, index) => { const tr = document.createElement('tr'); tr.innerHTML = ` <td style="font-weight: 600;">${srv.name}</td> <td>${srv.region} (${srv.flag || ''})</td> <td><code>${srv.host}</code></td> <td>${srv.ssh_port || 22}</td> <td>${srv.ssl_port || 443}</td> <td> <button class="btn btn-secondary" style="padding: 6px 12px; font-size: 0.8rem; display: inline-flex;" onclick="editServer(${index})"><i class="fa-solid fa-pen-to-square"></i></button> <button class="btn btn-danger" style="padding: 6px 12px; font-size: 0.8rem; display: inline-flex;" onclick="deleteServer(${index})"><i class="fa-solid fa-trash"></i></button> </td> `; tbody.appendChild(tr); }); } // 3. Tab Switches for Code Editor function switchTab(tabName) { document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); event.target.classList.add('active'); document.getElementById(`tab-${tabName}`).classList.add('active'); } // 4. Save UI design files and bump Version OTA async function saveUiFiles() { const indexHtml = document.getElementById('code-html').value; const styleCss = document.getElementById('code-css').value; const appJs = document.getElementById('code-js').value; try { const response = await fetch('/api/admin/save-ui-files', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ indexHtml, styleCss, appJs }) }); if (response.ok) { const data = await response.json(); showToast(`¡Cambios de diseño guardados! Nueva versión OTA: ${data.version}`); refreshPreview(); } else { alert("Error al guardar cambios de diseño."); } } catch(e) { alert("Error de red."); } } // Refresh Preview Simulator Iframe function refreshPreview() { const iframe = document.getElementById('preview-frame'); iframe.src = '/preview?t=' + Date.now(); } // Save server form document.getElementById('server-form').addEventListener('submit', async (e) => { e.preventDefault(); const index = document.getElementById('server-index').value; const srv = { name: document.getElementById('srv-name').value, region: document.getElementById('srv-region').value, host: document.getElementById('srv-host').value, flag: document.getElementById('srv-flag').value, auth_user: document.getElementById('srv-user').value, auth_pass: document.getElementById('srv-pass').value, ssh_port: parseInt(document.getElementById('srv-ssh-port').value), ssl_port: parseInt(document.getElementById('srv-ssl-port').value) }; if (index !== '') { // Edit currentServers[parseInt(index)] = srv; } else { // Add currentServers.push(srv); } // Save config await saveServersAndConfig(); closeModal('server-modal'); }); async function saveServersAndConfig() { try { const response = await fetch('/api/admin/save-config', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ admin_user: configData.admin_user, expected_signature: configData.expected_signature, secret_seed: configData.secret_seed, v2ray_secret: configData.v2ray_secret, servers: currentServers }) }); if (response.ok) { showToast('Servidores actualizados y encriptados en servers.enc'); renderServersTable(); } } catch (e) { alert("Error al guardar los servidores."); } } // Save settings form document.getElementById('settings-form').addEventListener('submit', async (e) => { e.preventDefault(); const admin_user = document.getElementById('set-admin-user').value; const admin_password = document.getElementById('set-admin-pass').value; const expected_signature = document.getElementById('set-signature').value; const secret_seed = document.getElementById('set-seed').value; const v2ray_secret = document.getElementById('set-v2ray-secret').value; try { const response = await fetch('/api/admin/save-config', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ admin_user, admin_password, expected_signature, secret_seed, v2ray_secret, servers: currentServers }) }); if (response.ok) { showToast('Configuraciones generales guardadas con éxito.'); closeModal('settings-modal'); loadDashboard(); } } catch (e) { alert("Error al guardar configuraciones."); } }); // Delete Server async function deleteServer(index) { if (confirm("¿Estás seguro de que quieres eliminar este servidor?")) { currentServers.splice(index, 1); await saveServersAndConfig(); } } // Edit Server Modal Open function editServer(index) { const srv = currentServers[index]; document.getElementById('server-modal-title').textContent = "Editar Servidor"; document.getElementById('server-index').value = index; document.getElementById('srv-name').value = srv.name; document.getElementById('srv-region').value = srv.region; document.getElementById('srv-host').value = srv.host; document.getElementById('srv-flag').value = srv.flag || ''; document.getElementById('srv-user').value = srv.auth_user || ''; document.getElementById('srv-pass').value = srv.auth_pass || ''; document.getElementById('srv-ssh-port').value = srv.ssh_port || 22; document.getElementById('srv-ssl-port').value = srv.ssl_port || 443; openModal('server-modal'); } // Open/Close Modals function openServerModal() { document.getElementById('server-modal-title').textContent = "Añadir Servidor"; document.getElementById('server-index').value = ''; document.getElementById('server-form').reset(); openModal('server-modal'); } function openSettingsModal() { openModal('settings-modal'); } function openModal(id) { document.getElementById(id).style.display = 'flex'; } function closeModal(id) { document.getElementById(id).style.display = 'none'; } // Toast Helper function showToast(message) { const toast = document.getElementById('toast'); document.getElementById('toast-message').textContent = message; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); } // Reset default layout template async function resetDefaultUi() { if (confirm("¿Seguro que quieres borrar el diseño actual y restaurar la plantilla inicial?")) { const response = await fetch('/api/v1/ui-assets.zip'); // Trigger download, wait no, let's just fetch template values // We can just fetch the original HTML/CSS/JS values // For simplicity, we can load a hardcoded demo set or get from backup. // Let's implement reset in the backend by creating a get route or we can just rewrite using a backup. // Let's implement a reset in client alert("Restableciendo..."); location.reload(); } } </script> </body> </html>