365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add spam review functionality to contact form and update translations

Browse Source 
- Introduced a new spamReview property in the Form interface to handle manual review requests for messages flagged as spam.
- Updated the Form component to display a spam warning and a manual review form with dynamic labels and placeholders based on translations.
- Enhanced the Tailwind CSS styles for responsive subtitles across various components.
- Added corresponding translations for the spam review feature in English, Dutch, German, and French, ensuring consistency and clarity in messaging.
- Updated various components to integrate the new spamReview functionality, improving user experience and interaction.
This commit is contained in:
becarta
2025-07-12 00:28:44 +02:00
parent bbf85be7c8
commit e8833ce52b
15 changed files with 145 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/styles/tailwind.css
View File

@@ -26,6 +26,11 @@
.text-muted {
color: var(--aw-color-text-muted);
}
/* Responsive subtitle utility */
.subtitle-responsive {
@apply text-base md:text-lg lg:text-xl;
}
}
@layer components {

73
src/components/ui/Form.astro
View File

@@ -2,7 +2,7 @@
import type { Form as Props } from '~/types';
import Button from '~/components/ui/Button.astro';
const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props;
const { inputs, textarea, disclaimer, button = 'Contact us', description = '', spamReview } = Astro.props;
---
<style>
@@ -15,14 +15,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
}
</style>
<form
id="contact-form"
name="contact"
method="POST"
action="/api/contact"
class="needs-validation"
novalidate
>
<form id="contact-form" name="contact" method="POST" action="/api/contact" class="needs-validation" novalidate>
<!-- Form status messages -->
<div id="form-success" class="hidden mb-6 p-4 bg-green-100 border border-green-200 text-green-700 rounded-lg">
Your message has been sent successfully. We will get back to you soon!
@@ -132,23 +125,51 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
</form>
<!-- Manual Review UI -->
<div id="spam-warning" style="display:none;" class="max-w-xl mx-auto rounded-lg backdrop-blur-sm bg-white/15 dark:bg-slate-900 border border-gray-200 dark:border-gray-700 shadow-md p-4 sm:p-6 lg:p-8 w-full mb-6">
<div
id="spam-warning"
style="display:none;"
class="max-w-xl mx-auto rounded-lg backdrop-blur-sm bg-white/15 dark:bg-slate-900 border border-gray-200 dark:border-gray-700 shadow-md p-4 sm:p-6 lg:p-8 w-full mb-6"
>
<p class="mb-4 text-lg font-medium text-gray-800 dark:text-gray-100">
Your message was detected as spam and was not sent.<br>
<span class="text-base font-normal text-gray-600 dark:text-gray-300">If you believe this is a mistake, you can request a manual review.</span>
{spamReview?.title}<br />
<span class="text-base font-normal text-gray-600 dark:text-gray-300">{spamReview?.description}</span>
</p>
<form id="manual-review-form" class="space-y-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="manual-email">Please re-enter your email address for confirmation</label>
<input type="email" id="manual-email" required placeholder="Enter your email address again" class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900" />
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="manual-justification">Why is this not spam? <span class="text-gray-400">(optional)</span></label>
<textarea id="manual-justification" placeholder="Explain why your message is legitimate..." class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"></textarea>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="manual-email"
>{spamReview?.emailLabel}</label
>
<input
type="email"
id="manual-email"
required
placeholder={spamReview?.emailPlaceholder}
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
/>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="manual-justification"
>{spamReview?.justificationLabel} <span class="text-gray-400">{spamReview?.justificationOptional}</span></label
>
<textarea
id="manual-justification"
placeholder={spamReview?.justificationPlaceholder}
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
></textarea>
<input type="hidden" id="manual-token" />
<button type="submit" class="mt-2 w-full py-3 px-4 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors">Request Manual Review</button>
<button
type="submit"
class="mt-2 w-full py-3 px-4 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors"
>{spamReview?.button}</button
>
</form>
<div id="manual-review-result" class="mt-4 text-center text-green-700 dark:text-green-400 font-medium"></div>
</div>
<script>
// TypeScript: declare the property on window
declare global {
interface Window {
__originalEmail?: string;
}
}
async function setCsrfToken() {
try {
const res = await fetch('/api/contact?csrf=true');
@@ -156,7 +177,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
const data = await res.json();
const csrfInput = document.getElementById('csrf_token');
if (csrfInput && data.csrfToken) {
csrfInput.value = data.csrfToken;
(csrfInput as HTMLInputElement).value = data.csrfToken;
}
}
} catch (e) {
@@ -195,9 +216,11 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
const spamWarning = document.getElementById('spam-warning');
const manualEmail = document.getElementById('manual-email') as HTMLInputElement | null;
const manualToken = document.getElementById('manual-token') as HTMLInputElement | null;
// Store the original email in a variable (not in the input)
window.__originalEmail = String(formData.get('email'));
if (spamWarning && manualEmail && manualToken) {
spamWarning.style.display = 'block';
manualEmail.value = String(formData.get('email'));
manualEmail.value = '';
manualToken.value = result.token;
}
return;
@@ -236,7 +259,11 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
const email = manualEmail.value;
const justification = manualJustification.value;
const token = manualToken.value;
// Check if the entered email matches the original
if (typeof window.__originalEmail !== 'undefined' && email !== window.__originalEmail) {
resultDiv.textContent = 'Email addresses do not match.';
return;
}
const res = await fetch('/api/contact/manual-review', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
@@ -244,7 +271,8 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
});
const data = await res.json();
if (data.success) {
resultDiv.textContent = 'Your request for manual review has been submitted. Thank you!';
resultDiv.textContent =
spamReview?.resultSuccess || 'Your request for manual review has been submitted. Thank you!';
// Hide spam-warning and show the normal form again after a short delay
setTimeout(() => {
if (spamWarning) spamWarning.style.display = 'none';
@@ -255,7 +283,8 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
resultDiv.textContent = '';
}, 2000);
} else {
resultDiv.textContent = data.error || 'There was an error submitting your manual review request.';
resultDiv.textContent =
data.error || spamReview?.resultError || 'There was an error submitting your manual review request.';
}
};
}

2
src/components/ui/Headline.astro
View File

@@ -12,7 +12,7 @@ const {
const {
container: containerClass = 'max-w-3xl',
title: titleClass = 'text-3xl md:text-4xl ',
subtitle: subtitleClass = 'text-xl',
subtitle: subtitleClass = 'text-base md:text-lg lg:text-xl',
} = classes;
---

2
src/components/widgets/CallToAction.astro
View File

@@ -36,7 +36,7 @@ const {
classes={{
container: 'mb-0 md:mb-0',
title: 'text-4xl md:text-4xl font-bold tracking-tighter mb-4 font-heading',
subtitle: 'text-xl text-muted dark:text-slate-400',
subtitle: 'text-base md:text-lg lg:text-xl text-muted dark:text-slate-400',
}}
/>
{

2
src/components/widgets/Contact.astro
View File

@@ -18,6 +18,7 @@ const {
isDark = false,
classes = {},
bg = await Astro.slots.render('bg'),
spamReview,
} = Astro.props;
---
@@ -33,6 +34,7 @@ const {
disclaimer={disclaimer}
button={button}
description={description}
spamReview={spamReview}
/>
</div>
)

2
src/components/widgets/Content.astro
View File

@@ -38,7 +38,7 @@ const {
classes={{
container: 'max-w-xl sm:mx-auto lg:max-w-2xl',
title: 'text-4xl md:text-5xl font-bold tracking-tighter mb-4 font-heading',
subtitle: 'max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400',
subtitle: 'max-w-3xl mx-auto sm:text-center text-base md:text-lg lg:text-xl text-muted dark:text-slate-400',
}}
/>
<div class="mx-auto max-w-7xl p-4 md:px-8">

2
src/components/widgets/Hero.astro
View File

@@ -57,7 +57,7 @@ const {
{
subtitle && (
<p
class="text-xl mb-6 dark:text-slate-300 intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade content-backdrop p-2 rounded-md"
class="text-base md:text-lg lg:text-xl mb-6 dark:text-slate-300 intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade content-backdrop p-2 rounded-md"
set:html={subtitle}
/>
)

2
src/components/widgets/Hero2.astro
View File

@@ -50,7 +50,7 @@ const {
{
subtitle && (
<p
class="text-xl text-muted mb-6 dark:text-slate-300 content-backdrop p-2 rounded-md"
class="text-base md:text-lg lg:text-xl text-muted mb-6 dark:text-slate-300 content-backdrop p-2 rounded-md"
set:html={subtitle}
/>
)

2
src/components/widgets/HeroText.astro
View File

@@ -47,7 +47,7 @@ const {
{
subtitle && (
<p
class="text-xl text-muted mb-6 dark:text-slate-300 intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"
class="text-base md:text-lg lg:text-xl text-muted mb-6 dark:text-slate-300 intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"
set:html={subtitle}
/>
)

2
src/components/widgets/WorkExperience.astro
View File

@@ -67,7 +67,7 @@ const timelineItems = items.map((item) => {
{title}
</h2>
)}
{subtitle && <p class={`${compact ? 'text-lg' : 'text-xl'} text-muted dark:text-slate-400`}>{subtitle}</p>}
{subtitle && <p class={`${compact ? 'text-base md:text-lg' : 'text-base md:text-lg lg:text-xl'} text-muted dark:text-slate-400`}>{subtitle}</p>}
</div>
)
}

60
src/i18n/translations.homepage.ts
View File

@@ -45,6 +45,18 @@ export interface ExplosiveHomepageTranslation {
};
disclaimer: string;
};
spamReview: {
title: string;
description: string;
emailLabel: string;
emailPlaceholder: string;
justificationLabel: string;
justificationOptional: string;
justificationPlaceholder: string;
button: string;
resultSuccess: string;
resultError: string;
};
}
export const supportedLanguages = ['en', 'nl', 'de', 'fr'] as const;
@@ -136,6 +148,18 @@ export const explosiveHomepageTranslations: Record<string, ExplosiveHomepageTran
},
disclaimer: '🔒 Your information stays secure. No spam — just results.',
},
spamReview: {
title: "Your message was detected as spam and was not sent.",
description: "If you believe this is a mistake, you can request a manual review.",
emailLabel: "Please re-enter your email address for confirmation",
emailPlaceholder: "Enter your email address again",
justificationLabel: "Why is this not spam?",
justificationOptional: "(optional)",
justificationPlaceholder: "Explain why your message is legitimate...",
button: "Request Manual Review",
resultSuccess: "Your request for manual review has been submitted. Thank you!",
resultError: "There was an error submitting your manual review request."
},
},
nl: {
hero: {
@@ -221,6 +245,18 @@ export const explosiveHomepageTranslations: Record<string, ExplosiveHomepageTran
},
disclaimer: '🔒 Jouw gegevens blijven privé. Geen spam – alleen oplossingen.',
},
spamReview: {
title: "Je bericht is als spam gemarkeerd en niet verzonden.",
description: "Denk je dat dit onterecht is? Vraag dan een handmatige beoordeling aan.",
emailLabel: "Voer je e-mailadres opnieuw in ter bevestiging",
emailPlaceholder: "Voer opnieuw je e-mailadres in",
justificationLabel: "Waarom is dit geen spam?",
justificationOptional: "(optioneel)",
justificationPlaceholder: "Leg uit waarom je bericht legitiem is...",
button: "Handmatige beoordeling aanvragen",
resultSuccess: "Je verzoek voor handmatige beoordeling is ingediend. Bedankt!",
resultError: "Er is een fout opgetreden bij het verzenden van je verzoek."
},
},
de: {
hero: {
@@ -306,6 +342,18 @@ export const explosiveHomepageTranslations: Record<string, ExplosiveHomepageTran
},
disclaimer: '🔒 Ihre Daten sind bei uns sicher. Kein Spam – nur Lösungen.',
},
spamReview: {
title: "Ihre Nachricht wurde als Spam erkannt und nicht versendet.",
description: "Wenn Sie der Meinung sind, dass es sich um einen Fehler handelt, können Sie eine manuelle Prüfung anfordern.",
emailLabel: "Bitte geben Sie zur Bestätigung Ihre E-Mail-Adresse erneut ein",
emailPlaceholder: "E-Mail-Adresse erneut eingeben",
justificationLabel: "Warum ist das kein Spam?",
justificationOptional: "(optional)",
justificationPlaceholder: "Erklären Sie, warum Ihre Nachricht legitim ist...",
button: "Manuelle Prüfung anfordern",
resultSuccess: "Ihre Anfrage zur manuellen Prüfung wurde übermittelt. Vielen Dank!",
resultError: "Beim Absenden Ihrer Anfrage ist ein Fehler aufgetreten."
},
},
fr: {
hero: {
@@ -390,5 +438,17 @@ export const explosiveHomepageTranslations: Record<string, ExplosiveHomepageTran
},
disclaimer: '🔒 Vos données sont confidentielles. Aucune publicité – uniquement des solutions concrètes.',
},
spamReview: {
title: "Votre message a été détecté comme spam et n’a pas été envoyé.",
description: "Si vous pensez qu’il s’agit d’une erreur, vous pouvez demander une révision manuelle.",
emailLabel: "Veuillez saisir à nouveau votre adresse e-mail pour confirmation",
emailPlaceholder: "Saisissez à nouveau votre adresse e-mail",
justificationLabel: "Pourquoi ce message n’est-il pas du spam ?",
justificationOptional: "(optionnel)",
justificationPlaceholder: "Expliquez pourquoi votre message est légitime...",
button: "Demander une révision manuelle",
resultSuccess: "Votre demande de révision manuelle a été envoyée. Merci !",
resultError: "Une erreur s’est produite lors de l’envoi de votre demande."
},
},
};

1
src/pages/[lang]/index copy.astro
View File

@@ -208,5 +208,6 @@ const metadata = {
}}
description={t.homepage?.contact?.description ||
"I'll respond to your message as soon as possible. You can also connect with me on LinkedIn or GitHub."}
spamReview={t.homepage?.spamReview}
/>
</Layout>

7
src/pages/[lang]/index.astro
View File

@@ -466,6 +466,10 @@ const metadata = {
font-size: 1rem;
margin-left: 1rem;
}
.cta-subtitle {
font-size: 1.1rem !important;
}
}
</style>
@@ -608,7 +612,7 @@ const metadata = {
}}
>
<Fragment slot="title">
<div class="text-6xl font-black mb-6">
<div class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black mb-6">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-pink-400 via-purple-400 to-blue-400">
{explosive.cta.title}
</span>
@@ -654,6 +658,7 @@ const metadata = {
classes={{
container: 'glass-vibrant'
}}
spamReview={explosive.spamReview}
/>
</div>
</Layout>

1
src/pages/index.astro
View File

@@ -163,5 +163,6 @@ const metadata = {
}}
description={t.homepage?.contact?.description ||
"I'll respond to your message as soon as possible. You can also connect with me on LinkedIn or GitHub."}
spamReview={t.homepage?.spamReview}
/>
</Layout>

12
src/types.d.ts vendored
View File

@@ -213,6 +213,18 @@ export interface Form {
disclaimer?: Disclaimer;
button?: string;
description?: string;
spamReview?: {
title: string;
description: string;
emailLabel: string;
emailPlaceholder: string;
justificationLabel: string;
justificationOptional: string;
justificationPlaceholder: string;
button: string;
resultSuccess: string;
resultError: string;
};
}
// WIDGETS