Skip to content

fix: improve reCAPTCHA handling and update toast message styling #190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 1, 2025
Merged

fix: improve reCAPTCHA handling and update toast message styling #190

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b04b55d
fix: improve reCAPTCHA handling and update toast message styling
Monil-KTX Oct 1, 2025
74f185f
fix: remove unused newsletter toast element from footer
Monil-KTX Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 62 additions & 21 deletions overrides/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,10 +164,6 @@
updates from OpenObserve.
</p>
</form>
<div
id="newsletter-toast"
class="tw-fixed tw-bottom-5 tw-right-2 tw-transform tw-bg-[#7782FF] tw-text-white tw-p-6 tw-rounded-lg tw-shadow-lg tw-z-50 tw-hidden tw-transition-opacity tw-duration-300"
></div>
</div>

<script>
Expand Down Expand Up @@ -306,7 +302,10 @@
const recaptchaContainer = document.getElementById(
"newsletter-recaptcha"
);
if (!recaptchaContainer || recaptchaWidgetId !== null) return;
if (!recaptchaContainer) return;

// If widget already exists, don't create another one
if (recaptchaWidgetId !== null) return;

try {
recaptchaWidgetId = window.grecaptcha.render(recaptchaContainer, {
Expand All @@ -315,8 +314,7 @@
"expired-callback": window.onRecaptchaExpired,
theme: "dark",
});
} catch (error) {
// Silent error handling
} catch (error) {
}
}

Expand All @@ -327,15 +325,25 @@
"newsletter-recaptcha-container"
);
const recaptchaDiv = document.getElementById("newsletter-recaptcha");
const loader = document.getElementById("newsletter-captcha-loader");

if (container) {
container.classList.remove("tw-hidden");
container.classList.add("tw-flex");
}

// Hide loader when showing reCAPTCHA
if (loader) {
loader.style.display = "none";
}

// Wait for DOM update, then render reCAPTCHA
setTimeout(() => {
if (recaptchaDiv && window.grecaptcha && !recaptchaWidgetId) {
if (
recaptchaDiv &&
window.grecaptcha &&
recaptchaWidgetId === null
) {
initializeRecaptcha();
}
}, 100);
Expand All @@ -352,7 +360,9 @@
"Please complete the reCAPTCHA to proceed.",
"error"
);
// Re-enable submit button
// Show submit button again
const buttonContainer = subscribeBtn.parentElement;
buttonContainer.style.display = "block";
subscribeBtn.disabled = false;
subscribeBtn.textContent = "Subscribe";
return;
Expand All @@ -373,7 +383,9 @@
"Captcha validation failed. Please try again.",
"error"
);
// Re-enable submit button
// Show submit button again
const buttonContainer = subscribeBtn.parentElement;
buttonContainer.style.display = "block";
subscribeBtn.disabled = false;
subscribeBtn.textContent = "Subscribe";
return;
Expand All @@ -384,7 +396,7 @@

// Success flow
showToastMessage(
`Successfully subscribed! Welcome to OpenObserve updates.`,
`Subscribed successfully with: ${email}`,
"success"
);

Expand All @@ -402,8 +414,20 @@
container.classList.remove("tw-flex");
}

if (window.grecaptcha && recaptchaWidgetId) {
window.grecaptcha.reset(recaptchaWidgetId);
// Completely destroy and recreate reCAPTCHA widget
if (window.grecaptcha && recaptchaWidgetId !== null) {
try {
window.grecaptcha.reset(recaptchaWidgetId);
// Clear the container completely
const recaptchaDiv = document.getElementById(
"newsletter-recaptcha"
);
if (recaptchaDiv) {
recaptchaDiv.innerHTML = "";
}
recaptchaWidgetId = null;
} catch (error) {
}
}
recaptchaToken = "";

Expand Down Expand Up @@ -443,8 +467,21 @@
container.classList.remove("tw-flex");
}

if (window.grecaptcha && recaptchaWidgetId) {
window.grecaptcha.reset(recaptchaWidgetId);
// Completely destroy and recreate reCAPTCHA widget on error
if (window.grecaptcha && recaptchaWidgetId !== null) {
try {
window.grecaptcha.reset(recaptchaWidgetId);
// Clear the container completely
const recaptchaDiv = document.getElementById(
"newsletter-recaptcha"
);
if (recaptchaDiv) {
recaptchaDiv.innerHTML = "";
}
recaptchaWidgetId = null;
} catch (error) {

}
}
recaptchaToken = "";

Expand All @@ -459,7 +496,9 @@
});
} finally {
isSubmitting = false;
// Re-enable submit button
// Show submit button again
const buttonContainer = subscribeBtn.parentElement;
buttonContainer.style.display = "block";
subscribeBtn.disabled = false;
subscribeBtn.textContent = "Subscribe";
}
Expand Down Expand Up @@ -511,17 +550,19 @@
return false; // Prevent further processing
}

// Disable submit button to prevent multiple submissions
subscribeBtn.disabled = true;
subscribeBtn.textContent = "Processing...";
// Hide submit button after click
const buttonContainer = subscribeBtn.parentElement;
buttonContainer.style.display = "none";

try {
// Show reCAPTCHA (like Vue component submitForm)
submitForm();
} catch (error) {
showToastMessage("An error occurred. Please try again.", "error");

// Re-enable submit button
// Show submit button again on error
const buttonContainer = subscribeBtn.parentElement;
buttonContainer.style.display = "block";
subscribeBtn.disabled = false;
subscribeBtn.textContent = "Subscribe";
}
Expand All @@ -535,7 +576,7 @@
<!-- Toast -->
<div
id="newsletter-toast"
class="tw-fixed tw-bottom-5 tw-right-2 tw-transform tw-bg-[#7782FF] tw-text-white tw-p-6 tw-rounded-lg tw-shadow-lg tw-z-50 tw-hidden tw-transition-opacity tw-duration-300"
class="tw-fixed tw-bottom-5 tw-right-2 tw-transform tw-bg-[#7782FF] tw-text-white tw-p-6 tw-rounded-lg tw-shadow-lg tw-z-50 tw-hidden tw-transition-opacity tw-duration-300 tw-text-[15px]"
></div>

<div class="tw-flex tw-justify-center lg:tw-justify-end">
Expand Down