feat: Add JavaScript handlers for membership linking UI
- Add form submission handler for linkUserForm - Validates form input and sends email + relationship to /link_membership_user - Displays success message and reloads page on successful link - Shows error messages with proper styling - Add unlink button click handlers - Confirms deletion before removing linked account - Sends link_id to /unlink_membership_user processor - Reloads page on successful removal - Integrate CSRF token validation - Form includes CSRF token generation - JavaScript captures and includes token in AJAX requests The membership linking UI is now fully functional. Secondary users can be linked to primary memberships and removed as needed.
This commit is contained in:
twotalesanimation
@@ -216,6 +216,74 @@ if (empty($application['id_number'])) {
|
|||||||
</a>';
|
</a>';
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
<!-- Linked Accounts Section -->
|
||||||
|
<div style="margin-top: 40px; padding: 20px; background: white; border-radius: 8px; border: 1px solid #ddd;">
|
||||||
|
<div class="section-title" style="margin-bottom: 20px;">
|
||||||
|
<h3>Linked Accounts (Family & Partners)</h3>
|
||||||
|
<p style="color: #666; font-size: 0.95rem; margin-top: 10px;">Link additional family members or partners to your membership to give them access to member benefits.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// Get linked secondary users
|
||||||
|
$linkedUsers = getLinkedSecondaryUsers($user_id);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<?php if (!empty($linkedUsers)): ?>
|
||||||
|
<div style="margin-bottom: 30px;">
|
||||||
|
<h4 style="margin-bottom: 15px;">Currently Linked Accounts</h4>
|
||||||
|
<div class="linked-users-list">
|
||||||
|
<?php foreach ($linkedUsers as $linkedUser): ?>
|
||||||
|
<div style="padding: 15px; background: #f9f9f7; border-radius: 6px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
|
||||||
|
<div>
|
||||||
|
<p style="margin: 0; font-weight: 600;"><?php echo htmlspecialchars($linkedUser['first_name'] . ' ' . $linkedUser['last_name']); ?></p>
|
||||||
|
<p style="margin: 5px 0 0 0; font-size: 0.9rem; color: #666;">
|
||||||
|
<?php echo htmlspecialchars($linkedUser['email']); ?> •
|
||||||
|
<span style="text-transform: capitalize;"><?php echo htmlspecialchars($linkedUser['relationship']); ?></span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="unlink-btn" data-link-id="<?php echo $linkedUser['link_id']; ?>" style="background: #f44336; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-size: 0.9rem;">
|
||||||
|
<i class="fal fa-trash"></i> Remove
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php else: ?>
|
||||||
|
<div style="padding: 20px; text-align: center; background: #f9f9f7; border-radius: 6px; margin-bottom: 20px;">
|
||||||
|
<p style="color: #999; margin: 0;">No linked accounts yet.</p>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<!-- Link New User Form -->
|
||||||
|
<div style="padding: 20px; background: #f5f5f0; border-radius: 6px; border: 1px solid #e0e0e0;">
|
||||||
|
<h4 style="margin-top: 0; margin-bottom: 20px;">Add Linked Account</h4>
|
||||||
|
<form id="linkUserForm" style="display: flex; flex-direction: column; gap: 15px;">
|
||||||
|
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label style="display: block; margin-bottom: 8px; font-weight: 600;">Email Address *</label>
|
||||||
|
<input type="email" id="secondary_email" name="secondary_email" placeholder="Enter the email of the person to link" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;">
|
||||||
|
<p style="font-size: 0.85rem; color: #999; margin: 5px 0 0 0;">They must have an existing 4WDCSA account</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label style="display: block; margin-bottom: 8px; font-weight: 600;">Relationship *</label>
|
||||||
|
<select id="relationship" name="relationship" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;">
|
||||||
|
<option value="spouse">Spouse/Partner</option>
|
||||||
|
<option value="family_member">Family Member</option>
|
||||||
|
<option value="dependent">Dependent</option>
|
||||||
|
<option value="other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" style="background: #667eea; color: white; border: none; padding: 12px 20px; border-radius: 4px; cursor: pointer; font-size: 1rem; font-weight: 600; align-self: flex-start; transition: background 0.3s;">
|
||||||
|
<i class="fal fa-plus"></i> Link Account
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<div id="linkMessage" style="margin-top: 15px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<form id="infoForm" name="registerForm" action="update_application" method="post" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">
|
<form id="infoForm" name="registerForm" action="update_application" method="post" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">
|
||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
<div id="responseMessage"></div> <!-- Message display area -->
|
<div id="responseMessage"></div> <!-- Message display area -->
|
||||||
@@ -466,6 +534,75 @@ if (empty($application['id_number'])) {
|
|||||||
$('#responseMessage').html(''); // Clear the message
|
$('#responseMessage').html(''); // Clear the message
|
||||||
$('#responseMessage2').html(''); // Clear the message
|
$('#responseMessage2').html(''); // Clear the message
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Link User Form
|
||||||
|
$('#linkUserForm').on('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const email = $('#secondary_email').val();
|
||||||
|
const relationship = $('#relationship').val();
|
||||||
|
const csrfToken = $('input[name="csrf_token"]').val();
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: 'link_membership_user',
|
||||||
|
type: 'POST',
|
||||||
|
dataType: 'json',
|
||||||
|
data: {
|
||||||
|
secondary_email: email,
|
||||||
|
relationship: relationship,
|
||||||
|
csrf_token: csrfToken
|
||||||
|
},
|
||||||
|
success: function(response) {
|
||||||
|
if (response.success) {
|
||||||
|
$('#linkMessage').html('<div class="alert alert-success" style="padding: 12px; border-radius: 4px; background: #d4edda; color: #155724; border: 1px solid #c3e6cb;">' + response.message + '</div>');
|
||||||
|
$('#linkUserForm')[0].reset();
|
||||||
|
// Reload page after 2 seconds to show updated list
|
||||||
|
setTimeout(function() {
|
||||||
|
location.reload();
|
||||||
|
}, 2000);
|
||||||
|
} else {
|
||||||
|
$('#linkMessage').html('<div class="alert alert-danger" style="padding: 12px; border-radius: 4px; background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;">' + response.message + '</div>');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: function(xhr) {
|
||||||
|
try {
|
||||||
|
const response = JSON.parse(xhr.responseText);
|
||||||
|
$('#linkMessage').html('<div class="alert alert-danger" style="padding: 12px; border-radius: 4px; background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;">' + response.message + '</div>');
|
||||||
|
} catch (e) {
|
||||||
|
$('#linkMessage').html('<div class="alert alert-danger" style="padding: 12px; border-radius: 4px; background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;">Error linking user. Please try again.</div>');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Unlink User
|
||||||
|
$(document).on('click', '.unlink-btn', function() {
|
||||||
|
const linkId = $(this).data('link-id');
|
||||||
|
const csrfToken = $('input[name="csrf_token"]').val();
|
||||||
|
|
||||||
|
if (confirm('Are you sure you want to remove this linked account?')) {
|
||||||
|
$.ajax({
|
||||||
|
url: 'unlink_membership_user',
|
||||||
|
type: 'POST',
|
||||||
|
dataType: 'json',
|
||||||
|
data: {
|
||||||
|
link_id: linkId,
|
||||||
|
csrf_token: csrfToken
|
||||||
|
},
|
||||||
|
success: function(response) {
|
||||||
|
if (response.success) {
|
||||||
|
// Reload page to show updated list
|
||||||
|
location.reload();
|
||||||
|
} else {
|
||||||
|
alert('Error: ' + response.message);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
alert('Error removing linked account. Please try again.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Profile Picture Upload
|
// Profile Picture Upload
|
||||||
$('#uploadPictureBtn').click(function() {
|
$('#uploadPictureBtn').click(function() {
|
||||||
$('#profile_picture').click();
|
$('#profile_picture').click();
|
||||||
|
|||||||
Reference in New Issue
Block a user