diff --git a/Dockerfile b/Dockerfile index ef9ca8e..58fddef 100644 --- a/Dockerfile +++ b/Dockerfile @@ -6,6 +6,6 @@ COPY . . RUN npm install RUN npm run build -RUN npm install -g +RUN npm install -g serve CMD ["serve", "-s", "dist"] \ No newline at end of file diff --git a/public/locales/common/en.json b/public/locales/common/en.json index 3900f78..5ed13c5 100644 --- a/public/locales/common/en.json +++ b/public/locales/common/en.json @@ -170,7 +170,9 @@ "success": "Your message has been sent successfully!", "error": "An error occurred while sending your message. Please try again later.", "empty": "Please fill out all the fields before sending the message.", - "invalidCountryCode": "Please enter a valid country code." + "invalidCountryCode": "Please enter a valid country code.", + "invalidEmail": "Please enter a valid email address.", + "invalidPhone": "Please enter a valid phone number." } }, "footer": { diff --git a/public/locales/common/pt.json b/public/locales/common/pt.json index f72f316..1811221 100644 --- a/public/locales/common/pt.json +++ b/public/locales/common/pt.json @@ -170,7 +170,9 @@ "success": "A tua mensagem foi enviada com sucesso!", "error": "Ocorreu um erro ao enviar a tua mensagem. Por favor, tenta novamente mais tarde.", "empty": "Por favor, preenche todos os campos antes de enviar a mensagem.", - "invalidCountryCode": "Por favor, preenche um código de país válido." + "invalidCountryCode": "Por favor, preenche um código de país válido.", + "invalidEmail": "Por favor, preenche um endereço de email válido.", + "invalidPhone": "Por favor, preenche um número de telefone válido." } }, "footer": { diff --git a/src/Components/Pages/Contact/ContactForm.tsx b/src/Components/Pages/Contact/ContactForm.tsx index 0a56532..13d5baf 100644 --- a/src/Components/Pages/Contact/ContactForm.tsx +++ b/src/Components/Pages/Contact/ContactForm.tsx @@ -5,6 +5,7 @@ import "react-toastify/dist/ReactToastify.css"; import { useTranslation } from "react-i18next"; import PhoneInput, { formatPhoneNumber, + isValidPhoneNumber, parsePhoneNumber, } from "react-phone-number-input"; import "react-phone-number-input/style.css"; @@ -26,6 +27,15 @@ const ContactForm = () => { toast.warning(t("contact.toasts.empty")); }; + const validateEmail = (email: string) => { + const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return re.test(email); + }; + + const invalidEmail = () => { + toast.error(t("contact.toasts.invalidEmail")); + }; + const invalidCountryCode = () => { toast.error(t("contact.toasts.invalidCountryCode")); }; @@ -40,8 +50,17 @@ const ContactForm = () => { ); if (isEmpty || !phone) { - // Check if phone is also empty - emptyForm(); + if (!phone || !isValidPhoneNumber(phone)) { + toast.error(t("contact.toasts.invalidPhone")); + } else { + emptyForm(); + } + return; + } + + const email = e.currentTarget.user_email.value; + if (!validateEmail(email)) { + invalidEmail(); return; }