@@ -335,6 +446,47 @@
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 = '';
@@ -435,6 +587,8 @@
// Change password button
document.getElementById('changePasswordBtn').addEventListener('click', openPasswordModal);
+
+ document.getElementById('updateBankDetailsBtn').addEventListener('click', openBankDetailsModal);
// Password form submission
document.getElementById('passwordForm').addEventListener('submit', changePassword);
@@ -445,12 +599,19 @@
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();
}
});
@@ -473,6 +634,625 @@
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);
+ });
+ }
+
+
+ });
+
+