Automated Personalized Customer Authentication Verifier

Automated Personalized Customer Authentication Verifier

Simulate and visualize how modern multi-factor authentication systems work.

${totalScore}

${outcome}
`; } else { resultsHtml = `

Run a verification simulation using the form to see the results.

`; } dashboardContent.innerHTML = `

Authentication Simulation

${resultsHtml}
`; lucide.createIcons(); document.getElementById('verify-btn').addEventListener('click', runVerification); document.getElementById('download-pdf-btn').addEventListener('click', generatePdf); }; const renderDataConfig = () => { const configContent = document.getElementById('content-data-configuration'); if (!configContent) return; configContent.innerHTML = `

Known User Profile

Set the "correct" data for the user being authenticated.

`; attachConfigListeners(); }; // --- EVENT HANDLERS & LOGIC --- const attachConfigListeners = () => { document.querySelectorAll('.config-input').forEach(input => { input.addEventListener('change', e => { const field = e.target.dataset.field; appData.knownProfile[field] = e.target.value; appData.analysisResults = null; renderDashboard(); }); }); }; const generatePdf = () => { if(!appData.analysisResults) { alert('Please run a verification first to generate a report.'); return; } loadingOverlay.style.display = 'flex'; const { jsPDF } = window.jspdf; document.getElementById('pdf-generated-date').textContent = new Date().toLocaleString(); const pdfHeader = document.getElementById('pdf-header'); pdfHeader.classList.remove('hidden'); const fullContent = document.getElementById('pdf-content-area'); html2canvas(fullContent, { scale: 2, useCORS: true, logging: false, windowWidth: 1200 }) .then(canvas => { pdfHeader.classList.add('hidden'); const imgData = canvas.toDataURL('image/jpeg', 0.9); const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const imgProps = pdf.getImageProperties(imgData); const imgHeight = (imgProps.height * pdfWidth) / imgProps.width; pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, imgHeight); pdf.save('Authentication-Report.pdf'); loadingOverlay.style.display = 'none'; }).catch(err => { console.error("PDF generation failed:", err); pdfHeader.classList.add('hidden'); loadingOverlay.style.display = 'none'; alert('An error occurred generating the PDF.'); }); }; // --- TAB NAVIGATION & INITIALIZATION --- const switchTab = (tabIndex) => { activeTabIndex = tabIndex; document.querySelectorAll('.tab-btn').forEach((btn, i) => btn.classList.toggle('active', i === tabIndex)); document.querySelectorAll('.tab-content').forEach((content, i) => content.classList.toggle('hidden', i !== tabIndex)); updateNavButtons(); }; const updateNavButtons = () => { prevTabBtn.disabled = activeTabIndex === 0; nextTabBtn.disabled = activeTabIndex === tabIdentifiers.length - 1; }; const initializeUI = () => { const tabs = [ { name: 'Authentication Verifier', id: 'auth-verifier' }, { name: 'User & Rule Configuration', id: 'data-configuration' } ]; tabIdentifiers = tabs.map(t => t.id); tabsContainer.innerHTML = tabs.map(tab => ``).join(''); mainContent.innerHTML = tabs.map(tab => `
`).join(''); tabs.forEach((tab, index) => { document.getElementById(`tab-${tab.id}`).addEventListener('click', () => switchTab(index)); }); renderDashboard(); renderDataConfig(); switchTab(0); lucide.createIcons(); }; initializeUI(); prevTabBtn.addEventListener('click', () => { if (activeTabIndex > 0) switchTab(activeTabIndex - 1); }); nextTabBtn.addEventListener('click', () => { if (activeTabIndex < tabIdentifiers.length - 1) switchTab(activeTabIndex + 1); }); });
Scroll to Top