Card Type
${tokenData.cardType}
Last 4 Digits
${tokenData.last4}
Card Holder
${tokenData.name}
Expiry
${tokenData.expiry}
`;
};
// --- CORE LOGIC ---
const handleTokenization = () => {
if (!validateInputs()) return;
tokenizeBtnSpinner.classList.remove('hidden');
tokenizeBtnText.textContent = 'Tokenizing...';
tokenizeBtn.disabled = true;
setTimeout(() => {
const cardNum = cardNumberInput.value.replace(/\s+/g, '');
const cardName = document.getElementById('card-name').value;
const expiry = cardExpiryInput.value;
const cardType = getCardType(cardNum);
const newToken = {
id: nextId++,
token: 'tok_' + [...Array(24)].map(() => Math.random().toString(36)[2]).join(''),
name: cardName,
cardType: cardType.name,
last4: cardNum.slice(-4),
expiry: expiry
};
tokens.push(newToken);
renderTokenizationResult(newToken);
renderConfigTable();
downloadPdfBtn.disabled = false;
tokenizeBtnSpinner.classList.add('hidden');
tokenizeBtnText.textContent = 'Securely Tokenize Card';
tokenizeBtn.disabled = false;
}, 500);
};
const validateInputs = () => {
errorMessage.classList.add('hidden');
const number = cardNumberInput.value.replace(/\s+/g, '');
const expiry = cardExpiryInput.value;
const cvv = cardCvvInput.value;
const name = document.getElementById('card-name').value;
if (!name.trim()) {
showError("Name on card is required.");
return false;
}
if (!/^\d{13,16}$/.test(number)) {
showError("Please enter a valid card number (13-16 digits).");
return false;
}
if (!/^(0[1-9]|1[0-2])\/\d{2}$/.test(expiry)) {
showError("Please enter a valid expiry date in MM/YY format.");
return false;
}
if (!/^\d{3,4}$/.test(cvv)) {
showError("Please enter a valid CVV (3-4 digits).");
return false;
}
return true;
};
const showError = (msg) => {
errorMessage.textContent = msg;
errorMessage.classList.remove('hidden');
};
const getCardType = (number) => {
if (/^4/.test(number)) return { name: 'Visa', icon: cardIcons.visa };
if (/^5[1-5]/.test(number)) return { name: 'Mastercard', icon: cardIcons.mastercard };
if (/^3[47]/.test(number)) return { name: 'Amex', icon: cardIcons.amex };
return { name: 'Unknown', icon: cardIcons.unknown };
};
// --- UI & EVENT HANDLERS ---
const switchTab = (tabId) => {
currentTab = tabId;
Object.values(tabPanes).forEach(pane => pane.classList.add('hidden'));
tabPanes[tabId].classList.remove('hidden');
Object.values(tabButtons).forEach(btn => btn.classList.replace('tab-active', 'tab-inactive'));
tabButtons[tabId].classList.replace('tab-inactive', 'tab-active');
updateNavButtons();
};
const navigateTabs = (direction) => {
const currentIndex = tabs.indexOf(currentTab);
const newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
if (newIndex >= 0 && newIndex < tabs.length) switchTab(tabs[newIndex]);
};
const updateNavButtons = () => {
const currentIndex = tabs.indexOf(currentTab);
prevBtn.disabled = currentIndex === 0;
nextBtn.disabled = currentIndex === tabs.length - 1;
prevBtn.classList.toggle('opacity-50', prevBtn.disabled);
nextBtn.classList.toggle('opacity-50', nextBtn.disabled);
};
const handlePdfDownload = () => {
if(tokens.length === 0) return;
let pdfHtml = `
Session Tokenization Report
| Token | Card Holder | Type | Last 4 | Expiry |
${tokens.map(t => `
| ${t.token} | ${t.name} | ${t.cardType} | ${t.last4} | ${t.expiry} |
`).join('')}
`;
pdfRenderContainer.innerHTML = pdfHtml;
html2canvas(pdfRenderContainer, { scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth(), margin = 40;
const contentWidth = pdfWidth - margin * 2;
const pdfHeight = (canvas.height * contentWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', margin, margin, contentWidth, pdfHeight);
pdf.save('Tokenization-Report.pdf');
});
};
const formatCardNumber = (e) => {
let value = e.target.value.replace(/\D/g, '').substring(0, 16);
let formattedValue = value.replace(/(.{4})/g, '$1 ').trim();
e.target.value = formattedValue;
const type = getCardType(value);
if (value.length > 0) {
cardTypeIcon.src = type.icon;
cardTypeIcon.classList.remove('hidden');
} else {
cardTypeIcon.classList.add('hidden');
}
};
const formatExpiry = (e) => {
let value = e.target.value.replace(/\D/g, '').substring(0, 4);
if (value.length > 2) {
e.target.value = `${value.substring(0, 2)}/${value.substring(2)}`;
} else {
e.target.value = value;
}
};
// --- EVENT LISTENERS ---
window.switchTab = switchTab;
window.navigateTabs = navigateTabs;
tokenizeBtn.addEventListener('click', handleTokenization);
downloadPdfBtn.addEventListener('click', handlePdfDownload);
cardNumberInput.addEventListener('input', formatCardNumber);
cardExpiryInput.addEventListener('input', formatExpiry);
cardCvvInput.addEventListener('input', (e) => e.target.value = e.target.value.replace(/\D/g, '').substring(0, 4));
configTableBody.addEventListener('input', e => {
if (e.target.classList.contains('config-input')) {
const id = parseInt(e.target.closest('tr').dataset.id);
const prop = e.target.dataset.prop;
const token = tokens.find(t => t.id === id);
if (token) token[prop] = e.target.value;
}
});
configTableBody.addEventListener('click', e => {
if (e.target.classList.contains('remove-row-btn')) {
const idToRemove = parseInt(e.target.closest('tr').dataset.id);
tokens = tokens.filter(t => t.id !== idToRemove);
renderConfigTable();
if(tokens.length === 0) downloadPdfBtn.disabled = true;
}
});
// --- INITIALIZATION ---
renderConfigTable();
updateNavButtons();
switchTab('dashboard');
});
