diff --git a/server/source/utils.ts b/server/source/utils.ts index 068a58d09..9f0a68fd9 100644 --- a/server/source/utils.ts +++ b/server/source/utils.ts @@ -47,7 +47,7 @@ export const validateCrispBody = (body: BodyType): BodyType => { isStringAndNotEmpty(subject) && subject.length <= SHORT_MAX_LENGTH && isStringAndNotEmpty(message) && - typeof email === 'string' && + isStringAndNotEmpty(email) && email.length <= SHORT_MAX_LENGTH ) { return body diff --git a/site/source/components/Feedback/FeedbackForm.tsx b/site/source/components/Feedback/FeedbackForm.tsx index c207c8f7d..8f91071e6 100644 --- a/site/source/components/Feedback/FeedbackForm.tsx +++ b/site/source/components/Feedback/FeedbackForm.tsx @@ -8,12 +8,19 @@ import { TextAreaField, TextField } from '@/design-system' import { Button } from '@/design-system/buttons' import { Body } from '@/design-system/typography/paragraphs' +type SubmitError = { + message?: string + email?: string +} + const SHORT_MAX_LENGTH = 254 export default function FeedbackForm() { const [isSubmittedSuccessfully, setIsSubmittedSuccessfully] = useState(false) const [isLoading, setIsLoading] = useState(false) - const [isError, setIsError] = useState(false) + const [submitError, setSubmitError] = useState( + undefined + ) const pathname = useLocation().pathname const page = pathname.split('/').slice(-1)[0] @@ -45,12 +52,22 @@ export default function FeedbackForm() { // Show error message } } - const resetIsError = () => setIsError(false) const requiredErrorMessage = t( 'Veuillez entrer un message avant de soumettre le formulaire.' ) + const requiredErrorEmail = t('Veuillez renseigner votre adresse email.') + + const resetSubmitErrorField = (field: keyof SubmitError) => + submitError?.[field] + ? () => + setSubmitError((previousValue) => ({ + ...previousValue, + [field]: '', + })) + : undefined + return ( {isSubmittedSuccessfully && ( @@ -68,9 +85,15 @@ export default function FeedbackForm() { document.getElementById('email') as HTMLInputElement )?.value - // Message est requis - if (!message || message === '') { - setIsError(true) + // message et email sont requis + const isMessageEmpty = !message || message === '' + const isEmailEmpty = !email || email === '' + + if (isMessageEmpty || isEmailEmpty) { + setSubmitError({ + message: isMessageEmpty ? requiredErrorMessage : '', + email: isEmailEmpty ? requiredErrorEmail : '', + }) return } @@ -84,27 +107,29 @@ export default function FeedbackForm() { resetIsError() : undefined} + onChange={resetSubmitErrorField('message')} description={t( 'Éviter de communiquer des informations personnelles' )} id="message" rows={7} isDisabled={isLoading} - errorMessage={isError && requiredErrorMessage} + errorMessage={submitError?.message} />