Connect form email.
Gitea CI/CD / build (push) Successful in 1m40s

This commit is contained in:
Clive
2026-08-20 15:55:24 +10:00
parent e5d1446791
commit b7809615c7
3 changed files with 133 additions and 4 deletions
+59 -4
View File
@@ -100,10 +100,14 @@
<div>
<h5 class="text-white text-sm font-semibold mb-4">Connect</h5>
<p class="text-xs text-slate-500 mb-4">Subscribe to our technical updates and newsletter.</p>
<div class="flex gap-2">
<input type="email" placeholder="Enter email" class="bg-slate-900 border border-slate-800 text-xs px-3 py-2 rounded-lg text-white focus:outline-none focus:border-brand w-full">
<button class="bg-[#1c8098] hover:bg-[#145f72] text-white text-xs px-4 py-2 rounded-lg font-semibold transition-colors">Join</button>
</div>
<form id="newsletter-form" action="/Subscribe" method="post">
@Html.AntiForgeryToken()
<div class="flex gap-2">
<input type="email" name="Email" required aria-label="Email address" placeholder="Enter email" class="bg-slate-900 border border-slate-800 text-xs px-3 py-2 rounded-lg text-white focus:outline-none focus:border-brand w-full">
<button type="submit" class="bg-[#1c8098] hover:bg-[#145f72] text-white text-xs px-4 py-2 rounded-lg font-semibold transition-colors">Join</button>
</div>
<p id="newsletter-message" class="mt-2 text-xs" hidden></p>
</form>
</div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 pt-8 border-t border-slate-900 text-center text-xs text-slate-600">
@@ -140,6 +144,57 @@
})();
</script>
<script>
// Footer "Connect" newsletter form — posts to /Subscribe and shows
// the result inline instead of navigating away.
(function () {
var form = document.getElementById('newsletter-form');
if (!form) return;
var input = form.querySelector('input[type="email"]');
var button = form.querySelector('button[type="submit"]');
var message = document.getElementById('newsletter-message');
function show(ok, text) {
message.textContent = text;
message.classList.toggle('text-emerald-400', ok);
message.classList.toggle('text-red-400', !ok);
message.hidden = false;
}
form.addEventListener('submit', async function (event) {
event.preventDefault();
var email = input.value.trim();
if (!email) {
show(false, 'Please enter your email address.');
return;
}
button.disabled = true;
try {
var response = await fetch(form.action, {
method: 'POST',
// FormData picks up the Email input plus the antiforgery token.
body: new URLSearchParams(new FormData(form)),
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
});
var payload = null;
try { payload = await response.json(); } catch (e) { /* non-JSON response */ }
if (response.ok && payload && payload.success) {
input.value = '';
show(true, payload.message || "You're on the list — thanks for subscribing!");
} else {
show(false, (payload && payload.message) || "We couldn't sign you up right now. Please try again later.");
}
} catch (err) {
show(false, 'Something went wrong. Please try again later.');
} finally {
button.disabled = false;
}
});
})();
</script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>