mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Add Invalid Email Error (#2637)

Browse source 
* Add error message UI

* Add border color

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>
This commit is contained in:
sean-brydon 2022-05-09 09:24:39 +01:00 committed by GitHub
parent 44736ac461
commit 351622c4a2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/web/components/booking/pages/BookingPage.tsx
View file

@ -2,6 +2,7 @@ import {
CalendarIcon, CalendarIcon,
ClockIcon, ClockIcon,
CreditCardIcon, CreditCardIcon,
ExclamationCircleIcon,
ExclamationIcon, ExclamationIcon,
InformationCircleIcon, InformationCircleIcon,
RefreshIcon, RefreshIcon,
@ -545,13 +546,22 @@ const BookingPage = ({
{...bookingForm.register("email")} {...bookingForm.register("email")}
required required
className={classNames( 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", "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" : "" 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" placeholder="you@example.com"
type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...) type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...)
disabled={disableInput} disabled={disableInput}
/> />
{bookingForm.formState.errors.email && (
<div className="mt-2 flex items-center text-sm text-red-700 ">
<ExclamationCircleIcon className="mr-2 h-3 w-3" />
<p>{t("email_validation_error")}</p>
</div>
)}
</div> </div>
</div> </div>
{locations.length > 1 && ( {locations.length > 1 && (

1
apps/web/public/static/locales/en/common.json
View file

@ -804,6 +804,7 @@
"impersonate_user_tip":"All uses of this feature is audited.", "impersonate_user_tip":"All uses of this feature is audited.",
"impersonating_user_warning":"Impersonating username \"{{user}}\".", "impersonating_user_warning":"Impersonating username \"{{user}}\".",
"impersonating_stop_instructions": "<0>Click Here to stop</0>.", "impersonating_stop_instructions": "<0>Click Here to stop</0>.",
"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.", "place_where_cal_widget_appear": "Place this code in your HTML where you want your Cal widget to appear.",
"copy_code": "Copy Code", "copy_code": "Copy Code",
"code_copied": "Code copied!", "code_copied": "Code copied!",