/**
* Toggle visibility of main user data editor container
* Shows the container that holds both profile edit form and children list editor
*/
document.addEventListener('DOMContentLoaded', function() {
const toggleBtn = document.getElementById('toggle-profile-edit');
const editorContainer = document.getElementById('edit-user-data');
if (toggleBtn && editorContainer) {
toggleBtn.addEventListener('click', function(e) {
e.preventDefault();
editorContainer.style.display = 'block';
});
}
});
/**
* Profile form data pre-population and interaction handlers
*
* Handles all profile edit form functionality:
* - Pre-fills form fields with current user data on page load
* - Manages pending email change state (disables field, shows warning)
* - Handles form cancel button to hide form without saving
* - Handles pending email cancellation via AJAX request
*/
document.addEventListener('DOMContentLoaded', function() {
// Get data from backend container
const profileData = document.getElementById('user-profile-data');
if (!profileData) return;
const displayName = profileData.dataset.displayName;
const email = profileData.dataset.email;
const phone = profileData.dataset.phone;
const pendingEmail = profileData.dataset.pendingEmail;
const nonce = profileData.dataset.nonce;
// Get form elements
const nameInput = document.getElementById('edit-profile-data-name');
const emailInput = document.getElementById('edit-profile-data-email');
const phoneInput = document.getElementById('edit-profile-data-phone');
const nonceInput = document.getElementById('profile-edit-nonce');
const pendingMessage = document.getElementById('edit-profile-data-email-message');
const cancelBtn = document.getElementById('cancel-profile-edit');
const editContainer = document.getElementById('edit-profile-data');
const cancelEmailLink = document.getElementById('edit-profile-data-email-cancel');
// Pre-fill data immediately on page load
if (nameInput) nameInput.value = displayName;
if (phoneInput) phoneInput.value = phone;
if (nonceInput) nonceInput.value = nonce;
// Handle pending email state on page load
if (pendingEmail) {
// User has pending email change - disable field and show new email
emailInput.disabled = true;
emailInput.value = pendingEmail;
if (pendingMessage) pendingMessage.style.display = 'block';
} else {
// No pending change - show current email and allow editing
emailInput.disabled = false;
emailInput.value = email;
if (pendingMessage) pendingMessage.style.display = 'none';
}
// Cancel button - hide form without saving
if (cancelBtn && editContainer) {
cancelBtn.addEventListener('click', function() {
editContainer.style.display = 'none';
});
}
// Cancel pending email change via AJAX
if (cancelEmailLink) {
cancelEmailLink.addEventListener('click', function(e) {
e.preventDefault();
// Send AJAX request to remove pending email change
fetch('/wp-admin/admin-post.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
'action': 'cancel_email_change',
'nonce': nonce
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Reload page to refresh form state
window.location.reload();
}
});
});
}
});
/**
* Profile form visibility toggle on button click
*
* Shows the profile edit form container when user clicks the edit button.
* This handler is separate from the pre-population handler above to maintain
* clean separation between page load initialization and user interaction.
* Re-populates fields on each toggle to ensure data is current.
*/
document.addEventListener('DOMContentLoaded', function() {
// Get data from backend container
const profileData = document.getElementById('user-profile-data');
if (!profileData) return;
const displayName = profileData.dataset.displayName;
const email = profileData.dataset.email;
const pendingEmail = profileData.dataset.pendingEmail;
const nonce = profileData.dataset.nonce;
// Get form elements
const toggleBtn = document.getElementById('toggle-profile-edit');
const editContainer = document.getElementById('edit-profile-data');
const cancelBtn = document.getElementById('cancel-profile-edit');
const nameInput = document.getElementById('edit-profile-data-name');
const emailInput = document.getElementById('edit-profile-data-email');
const nonceInput = document.getElementById('profile-edit-nonce');
const pendingMessage = document.getElementById('edit-profile-data-email-message');
// Toggle button - show form and populate data
if (toggleBtn && editContainer) {
toggleBtn.addEventListener('click', function(e) {
e.preventDefault();
// Show form
editContainer.style.display = 'block';
// Populate fields
if (nameInput) nameInput.value = displayName;
if (emailInput) emailInput.value = email;
if (nonceInput) nonceInput.value = nonce;
// Handle pending email state
if (pendingEmail) {
// Disable email field
emailInput.disabled = true;
emailInput.value = pendingEmail;
// Show warning message
if (pendingMessage) pendingMessage.style.display = 'block';
} else {
// Enable email field
emailInput.disabled = false;
// Hide warning message
if (pendingMessage) pendingMessage.style.display = 'none';
}
});
}
// Cancel button - hide form without saving
if (cancelBtn && editContainer) {
cancelBtn.addEventListener('click', function() {
editContainer.style.display = 'none';
});
}
});GL Forms: Parent Field Editor Actions
Ivan
·
