1241 lines
40 KiB
JavaScript
1241 lines
40 KiB
JavaScript
// API base URL
|
|
const API_BASE = '/api/v1/client';
|
|
|
|
|
|
// Format empty fields
|
|
function formatEmptyFields() {
|
|
const inputs = document.querySelectorAll('.form-input');
|
|
inputs.forEach(input => {
|
|
if (!input.value.trim()) {
|
|
input.value = 'Not provided';
|
|
input.classList.add('empty-field');
|
|
} else {
|
|
input.classList.remove('empty-field');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Load profile data
|
|
async function loadProfileData() {
|
|
try {
|
|
const response = await fetchWithAuth(`${API_BASE}/profile`);
|
|
if (!response) return;
|
|
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
const data = result.data;
|
|
|
|
// Populate only personal and address information
|
|
const fieldsToShow = ['name', 'email', 'position', 'address', 'city', 'state', 'zip'];
|
|
|
|
fieldsToShow.forEach(key => {
|
|
const element = document.getElementById(key);
|
|
if (element && data[key]) {
|
|
element.value = data[key];
|
|
}
|
|
});
|
|
|
|
formatEmptyFields();
|
|
|
|
} else {
|
|
console.error('Failed to load profile data:', result.message);
|
|
alert('Failed to load profile data');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading profile data:', error);
|
|
alert('Error loading profile data');
|
|
}
|
|
}
|
|
|
|
// Password Modal Functions
|
|
function openPasswordModal() {
|
|
const modal = document.getElementById('passwordModal');
|
|
modal.style.display = 'flex';
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
// Clear form
|
|
document.getElementById('passwordForm').reset();
|
|
clearErrorMessages();
|
|
}
|
|
|
|
function closePasswordModal() {
|
|
const modal = document.getElementById('passwordModal');
|
|
modal.style.display = 'none';
|
|
document.body.style.overflow = 'auto';
|
|
|
|
// Clear form and errors
|
|
document.getElementById('passwordForm').reset();
|
|
clearErrorMessages();
|
|
}
|
|
|
|
// Bank Details Modal Functions
|
|
function openBankDetailsModal() {
|
|
const modal = document.getElementById('bankDetailsModal');
|
|
modal.style.display = 'flex';
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
// Clear form and errors
|
|
document.getElementById('payment-form').reset();
|
|
document.querySelectorAll('.payment-option').forEach(option => {
|
|
option.classList.remove('selected');
|
|
});
|
|
|
|
document.querySelectorAll('.payment-details').forEach(details => {
|
|
details.classList.remove('active');
|
|
// Remove required attributes from all payment fields
|
|
details.querySelectorAll('[required]').forEach(field => {
|
|
field.removeAttribute('required');
|
|
});
|
|
});
|
|
}
|
|
|
|
function closeBankDetailsModal() {
|
|
const modal = document.getElementById('bankDetailsModal');
|
|
modal.style.display = 'none';
|
|
document.body.style.overflow = 'auto';
|
|
|
|
// Clear form and errors
|
|
document.getElementById('payment-form').reset();
|
|
document.querySelectorAll('.payment-option').forEach(option => {
|
|
option.classList.remove('selected');
|
|
});
|
|
|
|
document.querySelectorAll('.payment-details').forEach(details => {
|
|
details.classList.remove('active');
|
|
// Remove required attributes from all payment fields
|
|
details.querySelectorAll('[required]').forEach(field => {
|
|
field.removeAttribute('required');
|
|
});
|
|
});
|
|
}
|
|
|
|
function clearErrorMessages() {
|
|
document.getElementById('currentPasswordError').textContent = '';
|
|
document.getElementById('newPasswordError').textContent = '';
|
|
document.getElementById('confirmPasswordError').textContent = '';
|
|
}
|
|
|
|
// Change password
|
|
async function changePassword(event) {
|
|
event.preventDefault();
|
|
|
|
const currentPassword = document.getElementById('currentPassword').value;
|
|
const newPassword = document.getElementById('newPassword').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
|
|
// Reset errors
|
|
clearErrorMessages();
|
|
|
|
let hasError = false;
|
|
|
|
if (!currentPassword) {
|
|
document.getElementById('currentPasswordError').textContent = 'Current password is required';
|
|
hasError = true;
|
|
}
|
|
|
|
if (!newPassword) {
|
|
document.getElementById('newPasswordError').textContent = 'New password is required';
|
|
hasError = true;
|
|
} else if (newPassword.length < 6) {
|
|
document.getElementById('newPasswordError').textContent = 'Password must be at least 6 characters';
|
|
hasError = true;
|
|
}
|
|
|
|
if (!confirmPassword) {
|
|
document.getElementById('confirmPasswordError').textContent = 'Please confirm your password';
|
|
hasError = true;
|
|
} else if (newPassword !== confirmPassword) {
|
|
document.getElementById('confirmPasswordError').textContent = 'Passwords do not match';
|
|
hasError = true;
|
|
}
|
|
|
|
if (hasError) return;
|
|
|
|
try {
|
|
const saveBtn = document.getElementById('savePasswordBtn');
|
|
saveBtn.disabled = true;
|
|
saveBtn.textContent = 'Changing Password...';
|
|
|
|
const response = await fetchWithAuth(`${API_BASE}/profile`, {
|
|
method: 'PATCH',
|
|
body: JSON.stringify({
|
|
userDetails: {
|
|
currentPassword,
|
|
newPassword,
|
|
confirmPassword
|
|
}
|
|
})
|
|
});
|
|
|
|
if (!response) {
|
|
saveBtn.disabled = false;
|
|
saveBtn.textContent = 'Change Password';
|
|
return;
|
|
}
|
|
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
alert('Password changed successfully!');
|
|
closePasswordModal();
|
|
} else {
|
|
alert(result.message || 'Failed to change password');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error changing password:', error);
|
|
alert('Error changing password');
|
|
} finally {
|
|
const saveBtn = document.getElementById('savePasswordBtn');
|
|
saveBtn.disabled = false;
|
|
saveBtn.textContent = 'Change Password';
|
|
}
|
|
}
|
|
|
|
// Change bank details
|
|
async function changeBankDetails(event) {
|
|
event.preventDefault();
|
|
|
|
const formData = {
|
|
userDetails: {}
|
|
};
|
|
|
|
const activePaymentDetails = document.querySelector('.payment-details.active');
|
|
if (activePaymentDetails) {
|
|
const requiredFields = activePaymentDetails.querySelectorAll('[required]');
|
|
let isValid = true;
|
|
formData.userDetails.paymentMethod = activePaymentDetails.id === 'card-details' ? 'card' : 'bank';
|
|
|
|
// Validate card payment
|
|
if (formData.userDetails.paymentMethod === 'card') {
|
|
// Card number validation
|
|
const cardNumber = document.getElementById('card-number').value;
|
|
if (!validateCardNumber(cardNumber)) {
|
|
isValid = false;
|
|
showBankError('card-number');
|
|
return isValid;
|
|
} else {
|
|
// Show card type
|
|
const cardType = detectCardType(cardNumber);
|
|
if (cardType !== 'unknown') {
|
|
// You can display card type to user if needed
|
|
console.log('Detected card type:', cardType);
|
|
}
|
|
}
|
|
|
|
// Expiry date validation
|
|
const expiryDate = document.getElementById('expiry-date').value;
|
|
if (!validateExpiryDate(expiryDate)) {
|
|
isValid = false;
|
|
showBankError('expiry-date');
|
|
return isValid;
|
|
}
|
|
|
|
// CVV validation
|
|
const cvv = document.getElementById('security-code').value;
|
|
const cardType = detectCardType(cardNumber);
|
|
if (!validateCVV(cvv, cardType)) {
|
|
isValid = false;
|
|
showBankError('security-code');
|
|
return isValid;
|
|
}
|
|
|
|
// ZIP code validation
|
|
const zipCode = document.getElementById('card-zip').value;
|
|
if (!validateZipCodeRegex(zipCode)) {
|
|
isValid = false;
|
|
showBankError('card-zip');
|
|
return isValid;
|
|
}
|
|
|
|
}
|
|
// Validate bank payment
|
|
else if (formData.userDetails.paymentMethod === 'bank') {
|
|
// Account number validation
|
|
const accountNumber = document.getElementById('account-number').value;
|
|
if (!validateBankAccount(accountNumber)) {
|
|
isValid = false;
|
|
showBankError('account-number');
|
|
return isValid;
|
|
}
|
|
|
|
// Routing number validation
|
|
const routingNumber = document.getElementById('routing-number').value;
|
|
if (!validateRoutingNumber(routingNumber)) {
|
|
isValid = false;
|
|
showBankError('routing-number');
|
|
return isValid;
|
|
}
|
|
|
|
// Basic validation for other bank fields
|
|
requiredFields.forEach(field => {
|
|
if (!field.value.trim()) {
|
|
isValid = false;
|
|
field.classList.add('field-error');
|
|
if (isValid === false) {
|
|
showBankError(field.id);
|
|
}
|
|
} else {
|
|
field.classList.remove('field-error');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
let accountCardNumber = document.getElementById('card-number');
|
|
let accountExpiryDate = document.getElementById('expiry-date');
|
|
let accountSecurityCode = document.getElementById('security-code');
|
|
let accountCardZip = document.getElementById('card-zip');
|
|
let accountBankName = document.getElementById('bank-name');
|
|
let accountAccountNumber = document.getElementById('account-number');
|
|
let accountRoutingNumber = document.getElementById('routing-number');
|
|
let accountAccountType = document.getElementById('account-type');
|
|
let accountAccountHolderName = document.getElementById('account-holder-name');
|
|
|
|
if(accountCardNumber.value) {
|
|
formData.userDetails.cardNumber = accountCardNumber.value;
|
|
}
|
|
|
|
if(accountExpiryDate.value) {
|
|
formData.userDetails.expiryDate = accountExpiryDate.value;
|
|
}
|
|
|
|
if(accountSecurityCode.value) {
|
|
formData.userDetails.securityCode = accountSecurityCode.value;
|
|
}
|
|
|
|
if(accountCardZip.value) {
|
|
formData.userDetails.cardZip = accountCardZip.value;
|
|
}
|
|
|
|
if(accountBankName.value) {
|
|
formData.userDetails.bankName = accountBankName.value;
|
|
}
|
|
|
|
if(accountAccountNumber.value) {
|
|
formData.userDetails.accountNumber = accountAccountNumber.value;
|
|
}
|
|
|
|
if(accountRoutingNumber.value) {
|
|
formData.userDetails.routingNumber = accountRoutingNumber.value;
|
|
}
|
|
|
|
if(accountAccountType.value) {
|
|
formData.userDetails.accountType = accountAccountType.value;
|
|
}
|
|
|
|
if(accountAccountHolderName.value) {
|
|
formData.userDetails.accountHolderName = accountAccountHolderName.value;
|
|
}
|
|
|
|
try {
|
|
const saveBtn = document.getElementById('saveBankDetailsBtn');
|
|
saveBtn.disabled = true;
|
|
saveBtn.textContent = 'Updatind Details...';
|
|
|
|
const response = await fetchWithAuth(`${API_BASE}/profile`, {
|
|
method: 'POST',
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
if (!response) {
|
|
saveBtn.disabled = false;
|
|
saveBtn.textContent = 'Update Bank Details';
|
|
return;
|
|
}
|
|
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
alert('Bank details updated successfully!');
|
|
closeBankDetailsModal();
|
|
} else {
|
|
alert(result.message || 'Failed to update bank details');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error changing Bank Details:', error);
|
|
alert('Error changing bank details');
|
|
} finally {
|
|
const saveBtn = document.getElementById('saveBankDetailsBtn');
|
|
saveBtn.disabled = false;
|
|
saveBtn.textContent = 'Update Bank Details';
|
|
}
|
|
}
|
|
|
|
// Bank account validation
|
|
function validateBankAccount(accountNumber) {
|
|
return /^\d{8,17}$/.test(accountNumber.replace(/\s/g, ''));
|
|
}
|
|
|
|
// Routing number validation (basic US routing number check)
|
|
function validateRoutingNumber(routingNumber) {
|
|
const cleanRouting = routingNumber.replace(/\s/g, '');
|
|
|
|
if (!/^\d{9}$/.test(cleanRouting)) {
|
|
return false;
|
|
}
|
|
|
|
// Check for invalid patterns
|
|
if (isInvalidRoutingNumberPattern(cleanRouting)) {
|
|
return false;
|
|
}
|
|
|
|
// ABA routing number checksum validation
|
|
return isValidABAChecksum(cleanRouting);
|
|
}
|
|
|
|
function isInvalidRoutingNumberPattern(routingNumber) {
|
|
const invalidPatterns = [
|
|
/^0+$/, // All zeros
|
|
/^1+$/, // All ones
|
|
/^2+$/, // All twos
|
|
/^3+$/, // All threes
|
|
/^4+$/, // All fours
|
|
/^5+$/, // All fives
|
|
/^6+$/, // All sixes
|
|
/^7+$/, // All sevens
|
|
/^8+$/, // All eights
|
|
/^9+$/, // All nines
|
|
/^012345678/, // Sequential
|
|
/^876543210/, // Reverse sequential
|
|
];
|
|
|
|
return invalidPatterns.some(pattern => pattern.test(routingNumber));
|
|
}
|
|
|
|
function isValidABAChecksum(routingNumber) {
|
|
const digits = routingNumber.split('').map(Number);
|
|
|
|
// ABA routing number checksum formula
|
|
const sum = (3 * (digits[0] + digits[3] + digits[6])) +
|
|
(7 * (digits[1] + digits[4] + digits[7])) +
|
|
(1 * (digits[2] + digits[5] + digits[8]));
|
|
|
|
return sum % 10 === 0;
|
|
}
|
|
|
|
// Expiry date validation
|
|
function validateExpiryDate(expiryDate) {
|
|
const expiryRegex = /^(0[1-9]|1[0-2])\/([0-9]{2})$/;
|
|
if (!expiryRegex.test(expiryDate)) {
|
|
return false;
|
|
}
|
|
|
|
const [month, year] = expiryDate.split('/');
|
|
const expiry = new Date(2000 + parseInt(year), parseInt(month));
|
|
const currentDate = new Date();
|
|
const currentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth());
|
|
|
|
return expiry >= currentMonth;
|
|
}
|
|
|
|
// CVV validation
|
|
function validateCVV(cvv, cardType) {
|
|
if (!/^\d+$/.test(cvv)) {
|
|
return false;
|
|
}
|
|
|
|
const cvvLengths = {
|
|
visa: 3,
|
|
mastercard: 3,
|
|
amex: 4,
|
|
discover: 3,
|
|
diners: 3,
|
|
jcb: 3
|
|
};
|
|
|
|
const expectedLength = cvvLengths[cardType] || 3;
|
|
return cvv.length === expectedLength;
|
|
}
|
|
|
|
// ZIP code validation
|
|
function validateZipCodeRegex(zipCode) {
|
|
return /^\d{5}(-\d{4})?$/.test(zipCode);
|
|
}
|
|
|
|
function validateCardNumber(cardNumber) {
|
|
const cleanNumber = cardNumber.replace(/[\s-]/g, '');
|
|
|
|
// Check if it's all digits and has proper length
|
|
if (!/^\d+$/.test(cleanNumber) || cleanNumber.length < 13 || cleanNumber.length > 19) {
|
|
return false;
|
|
}
|
|
|
|
// Check for invalid patterns
|
|
if (isInvalidCardPattern(cleanNumber)) {
|
|
return false;
|
|
}
|
|
|
|
// Check for invalid BIN ranges
|
|
if (hasInvalidBIN(cleanNumber)) {
|
|
return false;
|
|
}
|
|
|
|
// Luhn algorithm
|
|
return isValidLuhn(cleanNumber);
|
|
}
|
|
|
|
// Enhanced Luhn algorithm
|
|
function isValidLuhn(cardNumber) {
|
|
let sum = 0;
|
|
let isEven = false;
|
|
|
|
for (let i = cardNumber.length - 1; i >= 0; i--) {
|
|
let digit = parseInt(cardNumber.charAt(i));
|
|
|
|
if (isEven) {
|
|
digit *= 2;
|
|
if (digit > 9) {
|
|
digit -= 9;
|
|
}
|
|
}
|
|
|
|
sum += digit;
|
|
isEven = !isEven;
|
|
}
|
|
|
|
return sum % 10 === 0;
|
|
}
|
|
|
|
// Function to check for invalid card patterns
|
|
function isInvalidCardPattern(cardNumber) {
|
|
const invalidPatterns = [
|
|
/^0+$/, // All zeros
|
|
/^1+$/, // All ones
|
|
/^2+$/, // All twos
|
|
/^3+$/, // All threes
|
|
/^4+$/, // All fours
|
|
/^5+$/, // All fives
|
|
/^6+$/, // All sixes
|
|
/^7+$/, // All sevens
|
|
/^8+$/, // All eights
|
|
/^9+$/, // All nines
|
|
/^0123/, // Sequential
|
|
/^1234/, // Sequential
|
|
];
|
|
|
|
return invalidPatterns.some(pattern => pattern.test(cardNumber));
|
|
}
|
|
|
|
// Function to check for invalid BIN ranges
|
|
function hasInvalidBIN(cardNumber) {
|
|
const firstSix = cardNumber.substring(0, 6);
|
|
const firstFour = cardNumber.substring(0, 4);
|
|
const firstTwo = cardNumber.substring(0, 2);
|
|
|
|
// Invalid BIN ranges
|
|
const invalidBINs = [
|
|
'000000', '000001', '000002', '000003', // Test cards should be handled separately
|
|
'111111', '222222', '333333', '444444',
|
|
'555555', '666666', '777777', '888888',
|
|
'999999', '123456', '654321'
|
|
];
|
|
|
|
// Check specific invalid ranges
|
|
if (invalidBINs.includes(firstSix)) {
|
|
return true;
|
|
}
|
|
|
|
// Check for known invalid starting digits
|
|
if (['0', '3', '6', '7', '8'].includes(firstTwo)) {
|
|
// 0 - Reserved
|
|
// 3 - Should only be 34, 37 (AMEX)
|
|
// 6 - Should follow Discover patterns
|
|
// 7, 8 - Not currently assigned to major networks
|
|
if (!isValidCardPrefix(cardNumber)) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
function isValidCardPrefix(cardNumber) {
|
|
const type = detectCardType(cardNumber);
|
|
return type !== 'unknown';
|
|
}
|
|
|
|
// Event listeners
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
loadProfileData();
|
|
|
|
// Change password button
|
|
document.getElementById('changePasswordBtn').addEventListener('click', openPasswordModal);
|
|
|
|
document.getElementById('updateBankDetailsBtn').addEventListener('click', openBankDetailsModal);
|
|
|
|
// Password form submission
|
|
document.getElementById('passwordForm').addEventListener('submit', changePassword);
|
|
|
|
document.getElementById('payment-form').addEventListener('submit', changeBankDetails);
|
|
|
|
// Close modal when clicking outside
|
|
document.getElementById('passwordModal').addEventListener('click', function (e) {
|
|
if (e.target === this) {
|
|
closePasswordModal();
|
|
}
|
|
});
|
|
|
|
document.getElementById('bankDetailsModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeBankDetailsModal();
|
|
}
|
|
});
|
|
|
|
// Close modal with escape key
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') {
|
|
closePasswordModal();
|
|
closeLogoutModal();
|
|
closeBankDetailsModal();
|
|
}
|
|
});
|
|
|
|
document.getElementById('logoutModal').addEventListener('click', function (e) {
|
|
if (e.target === this) {
|
|
closeLogoutModal();
|
|
}
|
|
});
|
|
|
|
// Logout button - opens confirmation modal instead of directly logging out
|
|
document.getElementById('logoutButton').addEventListener('click', openLogoutModal);
|
|
|
|
// Confirm logout button
|
|
document.getElementById('confirmLogoutBtn').addEventListener('click', handleLogout);
|
|
|
|
// Mobile menu toggle
|
|
const menuToggle = document.querySelector('.mobile-menu-button');
|
|
const sidebar = document.querySelector('.dashboard-sidebar');
|
|
menuToggle.addEventListener('click', () => {
|
|
sidebar.classList.toggle('active');
|
|
});
|
|
});
|
|
|
|
// Function to select payment option
|
|
function selectPaymentOption(type) {
|
|
// Remove selected class from all options
|
|
document.querySelectorAll('.payment-option').forEach(option => {
|
|
option.classList.remove('selected');
|
|
});
|
|
|
|
document.querySelectorAll('.payment-details').forEach(details => {
|
|
details.classList.remove('active');
|
|
// Remove required attributes from all payment fields
|
|
details.querySelectorAll('[required]').forEach(field => {
|
|
field.removeAttribute('required');
|
|
});
|
|
});
|
|
|
|
// Add selected class to clicked option
|
|
event.currentTarget.classList.add('selected');
|
|
|
|
if (type === 'card') {
|
|
document.getElementById('card-details').classList.add('active');
|
|
// Add required attributes only to card fields
|
|
document.getElementById('card-number').setAttribute('required', 'true');
|
|
document.getElementById('expiry-date').setAttribute('required', 'true');
|
|
document.getElementById('security-code').setAttribute('required', 'true');
|
|
document.getElementById('card-zip').setAttribute('required', 'true');
|
|
|
|
} else if (type === 'bank') {
|
|
document.getElementById('bank-details').classList.add('active');
|
|
// Add required attributes only to bank fields
|
|
document.getElementById('bank-name').setAttribute('required', 'true');
|
|
document.getElementById('account-number').setAttribute('required', 'true');
|
|
document.getElementById('routing-number').setAttribute('required', 'true');
|
|
document.getElementById('account-type').setAttribute('required', 'true');
|
|
document.getElementById('account-holder-name').setAttribute('required', 'true');
|
|
}
|
|
}
|
|
|
|
|
|
// Bank Name validation
|
|
function validateBankName(input) {
|
|
const errorElement = document.getElementById('bank-name-error');
|
|
const value = input.value;
|
|
|
|
// Remove numbers and invalid special characters
|
|
const cleanValue = value.replace(/[^a-zA-Z\s\-'&.,()]/g, '');
|
|
|
|
if (value !== cleanValue) {
|
|
input.value = cleanValue;
|
|
}
|
|
|
|
// Check content
|
|
const contentCheck = value.replace(/[\s\-'&.,()]/g, '');
|
|
const hasOnlyNumbers = /^[0-9]+$/.test(contentCheck) && contentCheck.length > 0;
|
|
const hasOnlySpecialChars = /^[^a-zA-Z0-9]+$/.test(contentCheck) && contentCheck.length > 0;
|
|
const hasLetters = /[a-zA-Z]/.test(value);
|
|
|
|
if (value !== cleanValue && value.length > 0) {
|
|
errorElement.textContent = 'Bank name can only contain letters, spaces, and common punctuation';
|
|
errorElement.style.display = 'block';
|
|
input.classList.add('field-error');
|
|
return false;
|
|
} else if (hasOnlyNumbers) {
|
|
errorElement.textContent = 'Bank name cannot be only numbers';
|
|
errorElement.style.display = 'block';
|
|
input.classList.add('field-error');
|
|
return false;
|
|
} else if (hasOnlySpecialChars) {
|
|
errorElement.textContent = 'Bank name cannot be only special characters';
|
|
errorElement.style.display = 'block';
|
|
input.classList.add('field-error');
|
|
return false;
|
|
} else if (!hasLetters && value.trim().length > 0) {
|
|
errorElement.textContent = 'Bank name must include letters';
|
|
errorElement.style.display = 'block';
|
|
input.classList.add('field-error');
|
|
return false;
|
|
} else {
|
|
errorElement.style.display = 'none';
|
|
input.classList.remove('field-error');
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function preventInvalidBankNameChars(event) {
|
|
const charCode = event.which ? event.which : event.keyCode;
|
|
const key = event.key;
|
|
|
|
if ((charCode >= 65 && charCode <= 90) ||
|
|
(charCode >= 97 && charCode <= 122) ||
|
|
charCode === 32 || charCode === 45 || charCode === 39 ||
|
|
charCode === 38 || charCode === 46 || charCode === 44 ||
|
|
charCode === 40 || charCode === 41 ||
|
|
charCode === 8 || charCode === 9 || charCode === 37 ||
|
|
charCode === 39 || charCode === 46 || charCode === 16 ||
|
|
charCode === 17 || charCode === 18 || charCode === 91 ||
|
|
/^[a-zA-Z\s\-'&.,()]$/.test(key)) {
|
|
return true;
|
|
}
|
|
|
|
event.preventDefault();
|
|
return false;
|
|
}
|
|
|
|
// Enhanced Account Number validation
|
|
function validateAccountNumber(input) {
|
|
const errorElement = document.getElementById('account-number-error');
|
|
const value = input.value.replace(/\s/g, '');
|
|
|
|
// Remove any non-digit characters
|
|
const cleanValue = value.replace(/\D/g, '');
|
|
|
|
if (value !== cleanValue) {
|
|
input.value = cleanValue;
|
|
}
|
|
|
|
// Validate account number
|
|
const isValid = validateAccountNumberStrict(cleanValue);
|
|
|
|
if (!isValid && cleanValue.length > 0) {
|
|
errorElement.textContent = getAccountNumberErrorMessage(cleanValue);
|
|
errorElement.style.display = 'block';
|
|
input.classList.add('field-error');
|
|
return false;
|
|
} else {
|
|
errorElement.style.display = 'none';
|
|
input.classList.remove('field-error');
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function preventInvalidAccountNumberChars(event) {
|
|
const charCode = event.which ? event.which : event.keyCode;
|
|
|
|
if ((charCode >= 48 && charCode <= 57) ||
|
|
charCode === 8 || charCode === 9 || charCode === 37 ||
|
|
charCode === 39 || charCode === 46 || charCode === 16 ||
|
|
charCode === 17 || charCode === 18 || charCode === 91) {
|
|
return true;
|
|
}
|
|
|
|
event.preventDefault();
|
|
return false;
|
|
}
|
|
|
|
function validateAccountNumberStrict(accountNumber) {
|
|
if (!accountNumber || !/^\d+$/.test(accountNumber)) {
|
|
return false;
|
|
}
|
|
|
|
// Check length
|
|
if (accountNumber.length < 8 || accountNumber.length > 17) {
|
|
return false;
|
|
}
|
|
|
|
// Check for invalid patterns
|
|
if (isInvalidAccountNumberPattern(accountNumber)) {
|
|
return false;
|
|
}
|
|
|
|
// Simple checksum validation (basic example)
|
|
if (!isValidAccountNumberChecksum(accountNumber)) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function isInvalidAccountNumberPattern(accountNumber) {
|
|
const invalidPatterns = [
|
|
/^0+$/, // All zeros
|
|
/^1+$/, // All ones
|
|
/^2+$/, // All twos
|
|
/^3+$/, // All threes
|
|
/^4+$/, // All fours
|
|
/^5+$/, // All fives
|
|
/^6+$/, // All sixes
|
|
/^7+$/, // All sevens
|
|
/^8+$/, // All eights
|
|
/^9+$/, // All nines
|
|
/^12345678/, // Sequential
|
|
/^87654321/, // Reverse sequential
|
|
];
|
|
|
|
return invalidPatterns.some(pattern => pattern.test(accountNumber));
|
|
}
|
|
|
|
function isValidAccountNumberChecksum(accountNumber) {
|
|
// Basic checksum validation - you might want to implement
|
|
// a more specific algorithm based on bank requirements
|
|
let sum = 0;
|
|
for (let i = 0; i < accountNumber.length; i++) {
|
|
sum += parseInt(accountNumber.charAt(i));
|
|
}
|
|
|
|
// Simple check: sum shouldn't be too low (e.g., all zeros)
|
|
return sum > 0;
|
|
}
|
|
|
|
function getAccountNumberErrorMessage(accountNumber) {
|
|
if (!accountNumber) {
|
|
return 'Account number is required';
|
|
}
|
|
|
|
if (!/^\d+$/.test(accountNumber)) {
|
|
return 'Account number must contain only numbers';
|
|
}
|
|
|
|
if (accountNumber.length < 8) {
|
|
return 'Account number must be at least 8 digits';
|
|
}
|
|
|
|
if (accountNumber.length > 17) {
|
|
return 'Account number cannot exceed 17 digits';
|
|
}
|
|
|
|
if (isInvalidAccountNumberPattern(accountNumber)) {
|
|
return 'Please enter a valid account number';
|
|
}
|
|
|
|
return 'Please enter a valid account number';
|
|
}
|
|
|
|
// Account Holder Name validation
|
|
function validateAccountHolderName(input) {
|
|
const errorElement = document.getElementById('account-holder-name-error');
|
|
const value = input.value;
|
|
|
|
// Remove numbers and special characters (keep only letters and spaces)
|
|
const cleanValue = value.replace(/[^a-zA-Z\s]/g, '');
|
|
|
|
if (value !== cleanValue) {
|
|
input.value = cleanValue;
|
|
}
|
|
|
|
// Check content
|
|
const hasOnlyNumbers = /^[0-9]+$/.test(value.replace(/\s/g, ''));
|
|
const hasOnlySpecialChars = /^[^a-zA-Z0-9]+$/.test(value.replace(/\s/g, ''));
|
|
const hasLetters = /[a-zA-Z]/.test(value);
|
|
|
|
if (value !== cleanValue && value.length > 0) {
|
|
errorElement.textContent = 'Account holder name can only contain letters and spaces';
|
|
errorElement.style.display = 'block';
|
|
input.classList.add('field-error');
|
|
return false;
|
|
} else if (hasOnlyNumbers) {
|
|
errorElement.textContent = 'Account holder name cannot contain only numbers';
|
|
errorElement.style.display = 'block';
|
|
input.classList.add('field-error');
|
|
return false;
|
|
} else if (hasOnlySpecialChars) {
|
|
errorElement.textContent = 'Account holder name cannot contain only special characters';
|
|
errorElement.style.display = 'block';
|
|
input.classList.add('field-error');
|
|
return false;
|
|
} else if (!hasLetters && value.trim().length > 0) {
|
|
errorElement.textContent = 'Account holder name must include letters';
|
|
errorElement.style.display = 'block';
|
|
input.classList.add('field-error');
|
|
return false;
|
|
} else {
|
|
errorElement.style.display = 'none';
|
|
input.classList.remove('field-error');
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function preventInvalidAccountHolderChars(event) {
|
|
const charCode = event.which ? event.which : event.keyCode;
|
|
const key = event.key;
|
|
|
|
if ((charCode >= 65 && charCode <= 90) ||
|
|
(charCode >= 97 && charCode <= 122) ||
|
|
charCode === 32 ||
|
|
charCode === 8 || charCode === 9 || charCode === 37 ||
|
|
charCode === 39 || charCode === 46 || charCode === 16 ||
|
|
charCode === 17 || charCode === 18 || charCode === 91 ||
|
|
/^[a-zA-Z\s]$/.test(key)) {
|
|
return true;
|
|
}
|
|
|
|
event.preventDefault();
|
|
return false;
|
|
}
|
|
|
|
|
|
function preventNonNumericZip(event) {
|
|
const charCode = event.which ? event.which : event.keyCode;
|
|
const key = event.key;
|
|
const currentValue = event.target.value;
|
|
|
|
// Allow: numbers, hyphens (only in specific positions), and editing keys
|
|
if ((charCode >= 48 && charCode <= 57) || // 0-9
|
|
(charCode === 45 && currentValue.length === 5 && !currentValue.includes('-')) || // hyphen only after 5 digits
|
|
charCode === 8 || // backspace
|
|
charCode === 9 || // tab
|
|
charCode === 37 || // left arrow
|
|
charCode === 39 || // right arrow
|
|
charCode === 46 || // delete
|
|
charCode === 16 || // shift
|
|
charCode === 17 || // ctrl
|
|
charCode === 18 || // alt
|
|
charCode === 91) { // cmd (Mac)
|
|
return true;
|
|
}
|
|
|
|
// Prevent all other characters including letters and special characters
|
|
event.preventDefault();
|
|
return false;
|
|
}
|
|
|
|
// Function to validate ZIP code in real-time
|
|
function validateZipCode(input) {
|
|
let errorElement;
|
|
|
|
// Determine which error element to use based on input ID
|
|
if (input.id === 'billing-zip') {
|
|
errorElement = document.getElementById('billing-zip-error');
|
|
} else if (input.id === 'card-zip') {
|
|
errorElement = document.getElementById('card-zip-error');
|
|
} else {
|
|
errorElement = document.getElementById('zip-error');
|
|
}
|
|
|
|
const value = input.value;
|
|
|
|
// Remove any non-numeric characters except hyphens
|
|
const cleanValue = value.replace(/[^0-9\-]/g, '');
|
|
|
|
// If invalid characters were removed, update the input value
|
|
if (value !== cleanValue) {
|
|
input.value = cleanValue;
|
|
}
|
|
|
|
// Format ZIP code as user types (add hyphen after 5 digits)
|
|
if (cleanValue.length === 5 && !cleanValue.includes('-')) {
|
|
input.value = cleanValue;
|
|
} else if (cleanValue.length > 5 && !cleanValue.includes('-')) {
|
|
input.value = cleanValue.substring(0, 5) + '' + cleanValue.substring(5, 9);
|
|
}
|
|
|
|
|
|
if (input.value.length < 4) {
|
|
errorElement.style.display = 'block';
|
|
input.classList.add('field-error');
|
|
return false;
|
|
} else {
|
|
errorElement.style.display = 'none';
|
|
input.classList.remove('field-error');
|
|
return true;
|
|
}
|
|
}
|
|
|
|
|
|
// Function to validate CVV in real-time
|
|
function validateCVVVV(input) {
|
|
const errorElement = document.getElementById('security-code-error');
|
|
const value = input.value;
|
|
|
|
// Remove any non-digit characters
|
|
const cleanValue = value.replace(/\D/g, '');
|
|
|
|
// If non-digits were removed, update the input value
|
|
if (value !== cleanValue) {
|
|
input.value = cleanValue;
|
|
}
|
|
|
|
// Get card type to determine expected CVV length
|
|
const cardNumber = document.getElementById('card-number').value;
|
|
const cardType = detectCardType(cardNumber);
|
|
|
|
// Validate CVV format and content
|
|
const isValid = validateCVVStrict(cleanValue, cardType);
|
|
|
|
if (!isValid && cleanValue.length > 0) {
|
|
errorElement.textContent = getCVVErrorMessage(cleanValue, cardType);
|
|
errorElement.style.display = 'block';
|
|
input.classList.add('field-error');
|
|
return false;
|
|
} else {
|
|
errorElement.style.display = 'none';
|
|
input.classList.remove('field-error');
|
|
return true;
|
|
}
|
|
}
|
|
|
|
// Card type detection
|
|
function detectCardType(cardNumber) {
|
|
// Remove spaces and dashes
|
|
const cleanNumber = cardNumber.replace(/[\s-]/g, '');
|
|
|
|
const cardPatterns = {
|
|
visa: /^4[0-9]{12}(?:[0-9]{3})?$/,
|
|
mastercard: /^5[1-5][0-9]{14}$/,
|
|
amex: /^3[47][0-9]{13}$/,
|
|
discover: /^6(?:011|5[0-9]{2})[0-9]{12}$/,
|
|
diners: /^3(?:0[0-5]|[68][0-9])[0-9]{11}$/,
|
|
jcb: /^(?:2131|1800|35\d{3})\d{11}$/
|
|
};
|
|
|
|
for (const [type, pattern] of Object.entries(cardPatterns)) {
|
|
if (pattern.test(cleanNumber)) {
|
|
return type;
|
|
}
|
|
}
|
|
return 'unknown';
|
|
}
|
|
|
|
// Function to prevent invalid character input in CVV field
|
|
function preventInvalidCVVChars(event) {
|
|
const charCode = event.which ? event.which : event.keyCode;
|
|
const key = event.key;
|
|
|
|
// Allow only digits and common editing keys
|
|
if ((charCode >= 48 && charCode <= 57) || // 0-9
|
|
charCode === 8 || // backspace
|
|
charCode === 9 || // tab
|
|
charCode === 37 || // left arrow
|
|
charCode === 39 || // right arrow
|
|
charCode === 46 || // delete
|
|
charCode === 16 || // shift
|
|
charCode === 17 || // ctrl
|
|
charCode === 18 || // alt
|
|
charCode === 91) { // cmd (Mac)
|
|
return true;
|
|
}
|
|
|
|
// Prevent all non-digit characters
|
|
event.preventDefault();
|
|
return false;
|
|
}
|
|
|
|
// Enhanced CVV validation function
|
|
function validateCVVStrict(cvv, cardType) {
|
|
if (!cvv || !/^\d+$/.test(cvv)) {
|
|
return false;
|
|
}
|
|
|
|
// Check for invalid patterns
|
|
if (isInvalidCVVPattern(cvv)) {
|
|
return false;
|
|
}
|
|
|
|
const cvvLengths = {
|
|
visa: 3,
|
|
mastercard: 3,
|
|
amex: 4,
|
|
discover: 3,
|
|
diners: 3,
|
|
jcb: 3
|
|
};
|
|
|
|
const expectedLength = cvvLengths[cardType] || 3;
|
|
|
|
// Check length
|
|
if (cvv.length !== expectedLength) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
// Function to check for invalid CVV patterns
|
|
function isInvalidCVVPattern(cvv) {
|
|
const invalidPatterns = [
|
|
/^0+$/, // All zeros: 000, 0000
|
|
/^1+$/, // All ones: 111, 1111
|
|
/^2+$/, // All twos: 222, 2222
|
|
/^3+$/, // All threes: 333, 3333
|
|
/^4+$/, // All fours: 444, 4444
|
|
/^5+$/, // All fives: 555, 5555
|
|
/^6+$/, // All sixes: 666, 6666
|
|
/^7+$/, // All sevens: 777, 7777
|
|
/^8+$/, // All eights: 888, 8888
|
|
/^9+$/, // All nines: 999, 9999
|
|
];
|
|
|
|
return invalidPatterns.some(pattern => pattern.test(cvv));
|
|
}
|
|
|
|
// Function to get appropriate CVV error message
|
|
function getCVVErrorMessage(cvv, cardType) {
|
|
if (!cvv) {
|
|
return 'Security code is required';
|
|
}
|
|
|
|
if (!/^\d+$/.test(cvv)) {
|
|
return 'Security code must contain only numbers';
|
|
}
|
|
|
|
if (isInvalidCVVPattern(cvv)) {
|
|
return 'Please enter a valid security code';
|
|
}
|
|
|
|
const cvvLengths = {
|
|
visa: 3,
|
|
mastercard: 3,
|
|
amex: 4,
|
|
discover: 3,
|
|
diners: 3,
|
|
jcb: 3
|
|
};
|
|
|
|
const expectedLength = cvvLengths[cardType] || 3;
|
|
|
|
if (cvv.length !== expectedLength) {
|
|
if (cardType === 'amex') {
|
|
return 'American Express cards require a 4-digit security code';
|
|
} else {
|
|
return `Security code must be ${expectedLength} digits`;
|
|
}
|
|
}
|
|
|
|
return 'Please enter a valid security code';
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Real-time card number formatting and validation
|
|
const cardNumberInput = document.getElementById('card-number');
|
|
if (cardNumberInput) {
|
|
cardNumberInput.addEventListener('input', function(e) {
|
|
const cursorPosition = e.target.selectionStart;
|
|
const originalLength = e.target.value.length;
|
|
// Format card number with spaces
|
|
let value = e.target.value.replace(/\s/g, '');
|
|
let formattedValue = '';
|
|
|
|
for (let i = 0; i < value.length; i++) {
|
|
if (i > 0 && i % 4 === 0) {
|
|
formattedValue += ' ';
|
|
}
|
|
formattedValue += value[i];
|
|
}
|
|
|
|
e.target.value = formattedValue;
|
|
|
|
let newCursorPosition = cursorPosition;
|
|
|
|
if (formattedValue.length > originalLength) {
|
|
const addedChars = formattedValue.length - originalLength;
|
|
|
|
// Count how many spaces were added before the cursor position
|
|
let spacesAddedBeforeCursor = 0;
|
|
for (let i = 0; i < cursorPosition && i < formattedValue.length; i++) {
|
|
if (formattedValue[i] === ' ' && (i < cursorPosition ||
|
|
(i === cursorPosition && formattedValue[i] === ' '))) {
|
|
spacesAddedBeforeCursor++;
|
|
}
|
|
}
|
|
|
|
newCursorPosition = cursorPosition + spacesAddedBeforeCursor;
|
|
} else if (formattedValue.length < originalLength) {
|
|
const removedChars = originalLength - formattedValue.length;
|
|
|
|
// Count how many spaces were removed before the cursor position
|
|
let spacesRemovedBeforeCursor = 0;
|
|
const oldValue = e.target.getAttribute('data-old-value') || '';
|
|
for (let i = 0; i < cursorPosition && i < oldValue.length; i++) {
|
|
if (oldValue[i] === ' ' && i < cursorPosition) {
|
|
spacesRemovedBeforeCursor++;
|
|
}
|
|
}
|
|
|
|
newCursorPosition = Math.max(0, cursorPosition - spacesRemovedBeforeCursor);
|
|
}
|
|
|
|
e.target.setAttribute('data-old-value', formattedValue);
|
|
e.target.setSelectionRange(newCursorPosition, newCursorPosition);
|
|
|
|
// Real-time card type detection
|
|
const cardType = detectCardType(value);
|
|
if (cardType !== 'unknown') {
|
|
// You can add visual feedback for card type here
|
|
console.log('Card type:', cardType);
|
|
}
|
|
});
|
|
|
|
cardNumberInput.addEventListener('keydown', function(e) {
|
|
// Allow: backspace, delete, tab, escape, enter, arrows, home, end
|
|
if ([8, 9, 13, 27, 37, 38, 39, 40, 46].includes(e.keyCode) ||
|
|
// Allow: Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
|
|
(e.keyCode === 65 && e.ctrlKey === true) ||
|
|
(e.keyCode === 67 && e.ctrlKey === true) ||
|
|
(e.keyCode === 86 && e.ctrlKey === true) ||
|
|
(e.keyCode === 88 && e.ctrlKey === true) ||
|
|
// Allow: numbers and numpad numbers
|
|
(e.keyCode >= 48 && e.keyCode <= 57) ||
|
|
(e.keyCode >= 96 && e.keyCode <= 105)) {
|
|
return;
|
|
}
|
|
|
|
// Prevent all other keys
|
|
e.preventDefault();
|
|
});
|
|
}
|
|
|
|
// Real-time expiry date formatting
|
|
const expiryInput = document.getElementById('expiry-date');
|
|
if (expiryInput) {
|
|
expiryInput.addEventListener('input', function(e) {
|
|
let value = e.target.value.replace(/\D/g, '');
|
|
if (value.length >= 2) {
|
|
value = value.substring(0, 2) + '/' + value.substring(2, 4);
|
|
}
|
|
e.target.value = value;
|
|
});
|
|
}
|
|
|
|
// Real-time CVV validation
|
|
const cvvInput = document.getElementById('security-code');
|
|
if (cvvInput) {
|
|
cvvInput.addEventListener('input', function(e) {
|
|
e.target.value = e.target.value.replace(/\D/g, '').substring(0, 4);
|
|
});
|
|
}
|
|
|
|
|
|
});
|
|
|
|
function showBankError(fieldId = null) {
|
|
// Highlight specific field if provided
|
|
if (fieldId) {
|
|
const field = document.getElementById(fieldId);
|
|
if (field) {
|
|
field.classList.add('field-error');
|
|
// Remove error after 5 seconds
|
|
setTimeout(() => {
|
|
field.classList.remove('field-error');
|
|
}, 5000);
|
|
}
|
|
}
|
|
} |