diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx index 6e3be9b4..bffe4de7 100644 --- a/apps/web/components/booking/pages/BookingPage.tsx +++ b/apps/web/components/booking/pages/BookingPage.tsx @@ -2,6 +2,7 @@ import { CalendarIcon, ClockIcon, CreditCardIcon, + ExclamationCircleIcon, ExclamationIcon, InformationCircleIcon, RefreshIcon, @@ -545,13 +546,22 @@ const BookingPage = ({ {...bookingForm.register("email")} required className={classNames( - "focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 sm:text-sm", - disableInput ? "bg-gray-200 dark:text-gray-500" : "" + "focus:border-brand block w-full rounded-sm shadow-sm focus:ring-black dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 sm:text-sm", + disableInput ? "bg-gray-200 dark:text-gray-500" : "", + bookingForm.formState.errors.email + ? "border-red-700 focus:ring-red-700" + : " border-gray-300 dark:border-gray-900" )} placeholder="you@example.com" type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...) disabled={disableInput} /> + {bookingForm.formState.errors.email && ( +
+ +

{t("email_validation_error")}

+
+ )} {locations.length > 1 && ( diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 5d1f4bb0..0bd6a2f6 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -804,6 +804,7 @@ "impersonate_user_tip":"All uses of this feature is audited.", "impersonating_user_warning":"Impersonating username \"{{user}}\".", "impersonating_stop_instructions": "<0>Click Here to stop.", + "email_validation_error":"That doesn't look like an email address", "place_where_cal_widget_appear": "Place this code in your HTML where you want your Cal widget to appear.", "copy_code": "Copy Code", "code_copied": "Code copied!",