4444
This commit is contained in:
parent
16c40428e5
commit
0dc1ca6104
BIN
assets/pasted-20251017-100534-44f1cec7.png
Normal file
BIN
assets/pasted-20251017-100534-44f1cec7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
142
register.php
142
register.php
@ -23,20 +23,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
|||||||
header('Content-Type: application/json');
|
header('Content-Type: application/json');
|
||||||
|
|
||||||
// --- DATA CAPTURE ---
|
// --- DATA CAPTURE ---
|
||||||
$webinar_id = filter_input(INPUT_POST, 'webinar_id', FILTER_VALIDATE_INT);
|
// The $webinar object is already available from the initial page load.
|
||||||
|
|
||||||
// --- WEBINAR DETAILS ---
|
|
||||||
$webinar = null;
|
|
||||||
if ($webinar_id) {
|
|
||||||
try {
|
|
||||||
// Fetch webinar details to create calendar links
|
|
||||||
$stmt = $pdo->prepare("SELECT title, description, starts_at, ends_at FROM webinars WHERE id = ?");
|
|
||||||
$stmt->execute([$webinar_id]);
|
|
||||||
$webinar = $stmt->fetch(PDO::FETCH_ASSOC);
|
|
||||||
} catch (PDOException $e) {
|
|
||||||
// Log error, but don't show to user
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
|
$email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
|
||||||
$first_name = filter_input(INPUT_POST, 'first_name', FILTER_SANITIZE_STRING);
|
$first_name = filter_input(INPUT_POST, 'first_name', FILTER_SANITIZE_STRING);
|
||||||
$last_name = filter_input(INPUT_POST, 'last_name', FILTER_SANITIZE_STRING);
|
$last_name = filter_input(INPUT_POST, 'last_name', FILTER_SANITIZE_STRING);
|
||||||
@ -149,17 +136,14 @@ if (!$webinar) {
|
|||||||
.form-card h2 { margin-top: 0; font-size: 1.5rem; color: #f6e05e; text-align: center; }
|
.form-card h2 { margin-top: 0; font-size: 1.5rem; color: #f6e05e; text-align: center; }
|
||||||
.form-group { margin-bottom: 1.5rem; }
|
.form-group { margin-bottom: 1.5rem; }
|
||||||
label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
|
label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
|
||||||
input[type="email"], input[type="text"] { width: 100%; padding: 0.75rem; background-color: #1a202c; border: 1px solid #4a5568; border-radius: 0.375rem; color: #e2e8f0; font-size: 1rem; box-sizing: border-box; }
|
input[type="email"], input[type="text"], input[type="password"] { width: 100%; padding: 0.75rem; background-color: #1a202c; border: 1px solid #4a5568; border-radius: 0.375rem; color: #e2e8f0; font-size: 1rem; box-sizing: border-box; }
|
||||||
.consent-group { display: flex; align-items: start; gap: 0.75rem; }
|
|
||||||
.consent-group label { font-weight: normal; font-size: 0.9rem; color: #a0aec0; }
|
|
||||||
.microcopy { font-size: 0.8rem; color: #718096; margin-top: 0.5rem; }
|
|
||||||
.submit-btn { display: block; width: 100%; background-color: #f6e05e; color: #1a202c; padding: 0.85rem; border: none; border-radius: 0.375rem; font-weight: bold; font-size: 1.125rem; cursor: pointer; transition: background-color 0.2s; }
|
.submit-btn { display: block; width: 100%; background-color: #f6e05e; color: #1a202c; padding: 0.85rem; border: none; border-radius: 0.375rem; font-weight: bold; font-size: 1.125rem; cursor: pointer; transition: background-color 0.2s; }
|
||||||
.submit-btn:hover { background-color: #f6d32d; }
|
.submit-btn:hover { background-color: #f6d32d; }
|
||||||
.submit-btn:disabled { background-color: #4a5568; cursor: not-allowed; }
|
.submit-btn:disabled { background-color: #4a5568; cursor: not-allowed; }
|
||||||
#form-result { margin-top: 1.5rem; text-align: center; }
|
#form-result { margin-top: 1.5rem; text-align: center; }
|
||||||
.success-message { background-color: #2d3748; border: 1px solid #4a5568; padding: 2rem; border-radius: 0.5rem; }
|
.success-message { background-color: #2d3748; border: 1px solid #4a5568; padding: 2rem; border-radius: 0.5rem; text-align: center; }
|
||||||
.error-message { background-color: #c53030; padding: 1rem; border-radius: 0.375rem; }
|
.error-message { background-color: #c53030; padding: 1rem; border-radius: 0.375rem; }
|
||||||
.calendar-buttons a, .copy-link-btn { display: inline-block; background-color: #4a5568; color: #e2e8f0; padding: 0.75rem 1.5rem; border-radius: 0.375rem; text-decoration: none; margin: 0.5rem; font-weight: bold; }
|
.calendar-buttons a { display: inline-block; background-color: #4a5568; color: #e2e8f0; padding: 0.75rem 1.5rem; border-radius: 0.375rem; text-decoration: none; margin: 0.5rem; font-weight: bold; }
|
||||||
@media (max-width: 768px) { .container { grid-template-columns: 1fr; } }
|
@media (max-width: 768px) { .container { grid-template-columns: 1fr; } }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@ -187,7 +171,6 @@ if (!$webinar) {
|
|||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="email">Email (required)</label>
|
<label for="email">Email (required)</label>
|
||||||
<input type="email" id="email" name="email" required>
|
<input type="email" id="email" name="email" required>
|
||||||
<p class="microcopy">We’ll send the join link & calendar invite.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="first_name">First name</label>
|
<label for="first_name">First name</label>
|
||||||
@ -264,76 +247,79 @@ if (!$webinar) {
|
|||||||
submitButton.textContent = 'Processing...';
|
submitButton.textContent = 'Processing...';
|
||||||
|
|
||||||
const formData = new FormData(form);
|
const formData = new FormData(form);
|
||||||
fetch(window.location.href, {
|
const xhr = new XMLHttpRequest();
|
||||||
method: 'POST',
|
xhr.open('POST', window.location.href, true);
|
||||||
body: formData
|
|
||||||
})
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
if (data.success) {
|
|
||||||
formContainer.style.display = 'none';
|
|
||||||
const webinarTitle = encodeURIComponent(data.webinar_title);
|
|
||||||
const webinarDate = new Date(data.webinar_date_utc + 'Z');
|
|
||||||
|
|
||||||
// Correctly format dates for UTC (YYYYMMDDTHHMMSSZ)
|
xhr.onload = function() {
|
||||||
const formatUTCDate = (date) => {
|
if (xhr.status >= 200 && xhr.status < 400) {
|
||||||
return date.toISOString().replace(/\.\d{3}Z$/, 'Z').replace(/[-:]/g, '');
|
console.log("Response from server:", xhr.responseText);
|
||||||
};
|
let data;
|
||||||
|
try {
|
||||||
|
data = JSON.parse(xhr.responseText);
|
||||||
|
} catch (e) {
|
||||||
|
formResult.innerHTML = '<div class="error-message">An unexpected error occurred parsing the server response.</div>';
|
||||||
|
console.error("JSON Parsing Error:", e);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const startTime = formatUTCDate(webinarDate);
|
|
||||||
const endTime = formatUTCDate(new Date(webinarDate.getTime() + (60 * 60 * 1000)));
|
|
||||||
|
|
||||||
const googleLink = `https://www.google.com/calendar/render?action=TEMPLATE&text=${webinarTitle}&dates=${startTime}/${endTime}&details=Join+the+webinar!&ctz=UTC`;
|
if (data.success) {
|
||||||
|
formContainer.style.display = 'none';
|
||||||
|
const webinarTitle = encodeURIComponent(data.webinar_title);
|
||||||
|
const webinarDate = new Date(data.webinar_date_utc + 'Z');
|
||||||
|
|
||||||
const icsContent = [
|
const formatUTCDate = (date) => {
|
||||||
'BEGIN:VCALENDAR',
|
return date.toISOString().replace(/\.\d{3}Z$/, 'Z').replace(/[-:]/g, '');
|
||||||
'VERSION:2.0',
|
};
|
||||||
'BEGIN:VEVENT',
|
|
||||||
`URL:${window.location.href}`,
|
|
||||||
`DTSTART:${startTime}`,
|
|
||||||
`DTEND:${endTime}`,
|
|
||||||
`SUMMARY:${data.webinar_title}`,
|
|
||||||
'DESCRIPTION:Join the webinar!',
|
|
||||||
'END:VEVENT',
|
|
||||||
'END:VCALENDAR'
|
|
||||||
].join('\n');
|
|
||||||
const outlookLink = `data:text/calendar;charset=utf-8,${encodeURIComponent(icsContent)}`;
|
|
||||||
|
|
||||||
formResult.innerHTML = `
|
const startTime = formatUTCDate(webinarDate);
|
||||||
<div class="success-message">
|
const endTime = formatUTCDate(new Date(webinarDate.getTime() + (60 * 60 * 1000)));
|
||||||
<h3 style="color: #f6e05e; font-size: 1.75rem;">You’re in for ${data.webinar_title}!</h3>
|
|
||||||
<p style="color: #cbd5e0; font-size: 1.1rem;">Check your email for your confirmation. You can now log in to see the details.</p>
|
const googleLink = `https://www.google.com/calendar/render?action=TEMPLATE&text=${webinarTitle}&dates=${startTime}/${endTime}&details=Join+the+webinar!&ctz=UTC`;
|
||||||
<div class="calendar-buttons">
|
|
||||||
<a href="${googleLink}" target="_blank">Add to Google Calendar</a>
|
const icsContent = [
|
||||||
<a href="${outlookLink}" download="webinar.ics">Add to Outlook (ICS)</a>
|
'BEGIN:VCALENDAR',
|
||||||
|
'VERSION:2.0',
|
||||||
|
'BEGIN:VEVENT',
|
||||||
|
`URL:${window.location.href}`,
|
||||||
|
`DTSTART:${startTime}`,
|
||||||
|
`DTEND:${endTime}`,
|
||||||
|
`SUMMARY:${data.webinar_title}`,
|
||||||
|
'DESCRIPTION:Join the webinar!',
|
||||||
|
'END:VEVENT',
|
||||||
|
'END:VCALENDAR'
|
||||||
|
].join('\n');
|
||||||
|
const outlookLink = `data:text/calendar;charset=utf-8,${encodeURIComponent(icsContent)}`;
|
||||||
|
|
||||||
|
formResult.innerHTML = `
|
||||||
|
<div class="success-message">
|
||||||
|
<h3 style="color: #f6e05e; font-size: 1.75rem;">You’re in for ${data.webinar_title}!</h3>
|
||||||
|
<p style="color: #cbd5e0; font-size: 1.1rem;">Check your email for your confirmation. You can now log in to see the details.</p>
|
||||||
|
<div class="calendar-buttons">
|
||||||
|
<a href="${googleLink}" target="_blank">Add to Google Calendar</a>
|
||||||
|
<a href="${outlookLink}" download="webinar.ics">Add to Outlook (ICS)</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
`;
|
||||||
`;
|
} else {
|
||||||
|
formResult.innerHTML = `<div class="error-message">${data.error || 'An unknown error occurred.'}</div>`;
|
||||||
|
submitButton.disabled = false;
|
||||||
|
submitButton.textContent = 'Register Now';
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
formResult.innerHTML = `<div class="error-message">${data.error}</div>`;
|
formResult.innerHTML = '<div class="error-message">A server error occurred. Please try again later.</div>';
|
||||||
submitButton.disabled = false;
|
submitButton.disabled = false;
|
||||||
submitButton.textContent = 'Register Now';
|
submitButton.textContent = 'Register Now';
|
||||||
}
|
}
|
||||||
})
|
};
|
||||||
.catch(error => {
|
|
||||||
formResult.innerHTML = `<div class="error-message">An unexpected error occurred.</div>`;
|
xhr.onerror = function() {
|
||||||
|
formResult.innerHTML = '<div class="error-message">A network error occurred. Please check your connection.</div>';
|
||||||
submitButton.disabled = false;
|
submitButton.disabled = false;
|
||||||
submitButton.textContent = 'Register Now';
|
submitButton.textContent = 'Register Now';
|
||||||
});
|
};
|
||||||
});
|
|
||||||
|
|
||||||
// --- COPY LINK ---
|
xhr.send(formData);
|
||||||
formResult.addEventListener('click', function(e) {
|
|
||||||
if (e.target.classList.contains('copy-link-btn')) {
|
|
||||||
e.preventDefault();
|
|
||||||
const link = e.target.dataset.link;
|
|
||||||
navigator.clipboard.writeText(link).then(() => {
|
|
||||||
e.target.textContent = 'Copied!';
|
|
||||||
setTimeout(() => {
|
|
||||||
e.target.textContent = 'Copy Join Link';
|
|
||||||
}, 2000);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user