Protege tu página con usuario y contraseña | TRiAGE

Protege tu página

El código que necesitas para que tus páginas, dashboards o reportes solo se abran con usuario y contraseña. Justo lo que viste en el video.

  • Un solo archivo, sirve para todos tus proyectos
  • Funciona en Cloudflare Pages, gratis
  • Incluye instructivo paso a paso
  • 100% gratis, sin compromiso

Recibe el código

Elige cómo quieres recibir el middleware.

Sin spam. Solo recibes el link con el archivo.

(function(){ var WEBHOOK_URL = ‘https://n8n.srv914565.hstgr.cloud/webhook/middleware’; var form = document.getElementById(‘csLeadForm’); var radios = document.querySelectorAll(‘input[name=”csChannel”]’); var waField = document.getElementById(‘csWhatsappField’); var emField = document.getElementById(‘csEmailField’); var btn = document.getElementById(‘csSubmitBtn’); var formC = document.getElementById(‘csFormContainer’); var successM = document.getElementById(‘csSuccessMessage’); var successT = document.getElementById(‘csSuccessText’); var labelWa = document.getElementById(‘csLabelWa’); var labelEm = document.getElementById(‘csLabelEm’); var activeStyle = ‘display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; background:rgba(218,165,32,0.1); border:1px solid #DAA520; border-radius:8px; cursor:pointer; font-size:0.85rem; color:#DAA520;’; var inactiveStyle = ‘display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:8px; cursor:pointer; font-size:0.85rem; color:rgba(255,255,255,0.6);’; radios.forEach(function(r){ r.addEventListener(‘change’, function(e){ var v = e.target.value; waField.style.display = ‘none’; emField.style.display = ‘none’; labelWa.style.cssText = inactiveStyle; labelEm.style.cssText = inactiveStyle; if(v === ‘whatsapp’){ waField.style.display = ‘block’; labelWa.style.cssText = activeStyle; } else { emField.style.display = ‘block’; labelEm.style.cssText = activeStyle; } btn.disabled = false; btn.style.opacity = ‘1’; btn.style.cursor = ‘pointer’; }); }); /* Solo permitir numeros en el campo de WhatsApp */ var waInput = document.getElementById(‘csWhatsapp’); waInput.addEventListener(‘input’, function(){ this.value = this.value.replace(/[^0-9]/g, ”).slice(0, 10); }); form.addEventListener(‘submit’, function(e){ e.preventDefault(); var name = document.getElementById(‘csName’).value.trim(); var ch = document.querySelector(‘input[name=”csChannel”]:checked’); if(!name || !ch) return; var channel = ch.value; var contact = ”; if(channel === ‘whatsapp’){ var raw = waInput.value.replace(/[^0-9]/g, ”); if(raw.length !== 10){ waInput.focus(); return; } contact = ‘521’ + raw; } else { contact = document.getElementById(‘csEmail’).value.trim(); if(!contact){ document.getElementById(‘csEmail’).focus(); return; } } btn.disabled = true; btn.style.opacity = ‘0.5’; btn.textContent = ‘Enviando…’; fetch(WEBHOOK_URL, { method:’POST’, headers:{‘Content-Type’:’application/json’}, body: JSON.stringify({name:name, channel:channel, contact:contact, campaign:’middleware-1′, timestamp:new Date().toISOString()}) }).catch(function(){}).finally(function(){ formC.style.display = ‘none’; successM.style.display = ‘block’; successT.textContent = channel === ‘whatsapp’ ? ‘Revisa tu WhatsApp en unos segundos.’ : ‘Revisa tu bandeja de correo en unos segundos.’; }); }); /* Responsive: stack on mobile */ var mq = window.matchMedia(‘(max-width:768px)’); function handleMq(e){ var el = document.getElementById(‘csLeadMagnet’); if(el) el.style.gridTemplateColumns = e.matches ? ‘1fr’ : ‘1fr 1fr’; } mq.addEventListener(‘change’, handleMq); handleMq(mq); })();