From da0035c0b95d3bc3ab9fb30599398eb565119c5c Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 2 Aug 2024 01:05:45 -0400 Subject: [PATCH] refactor(ui): Ensure global errors are translated using localization hook (#3881) --- .changeset/poor-cougars-visit.md | 2 + packages/ui/src/common/global-error.tsx | 15 ++++ .../ui/src/components/sign-in/sign-in.tsx | 74 ++++--------------- .../ui/src/components/sign-up/sign-up.tsx | 32 ++------ packages/ui/src/utils/makeLocalizable.ts | 2 +- 5 files changed, 37 insertions(+), 88 deletions(-) create mode 100644 .changeset/poor-cougars-visit.md create mode 100644 packages/ui/src/common/global-error.tsx diff --git a/.changeset/poor-cougars-visit.md b/.changeset/poor-cougars-visit.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/poor-cougars-visit.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/ui/src/common/global-error.tsx b/packages/ui/src/common/global-error.tsx new file mode 100644 index 0000000000..0f144a2189 --- /dev/null +++ b/packages/ui/src/common/global-error.tsx @@ -0,0 +1,15 @@ +import { GlobalError as ElementsGlobalError } from '@clerk/elements/common'; + +import { useLocalizations } from '~/hooks/use-localizations'; +import { Alert } from '~/primitives/alert'; + +export function GlobalError() { + const { translateError } = useLocalizations(); + return ( + + {({ message, code }) => { + return {translateError(message, code)}; + }} + + ); +} diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx index d3404af5a7..c62f62104f 100644 --- a/packages/ui/src/components/sign-in/sign-in.tsx +++ b/packages/ui/src/components/sign-in/sign-in.tsx @@ -9,6 +9,7 @@ import { EmailField } from '~/common/email-field'; import { EmailOrPhoneNumberField } from '~/common/email-or-phone-number-field'; import { EmailOrUsernameField } from '~/common/email-or-username-field'; import { EmailOrUsernameOrPhoneNumberField } from '~/common/email-or-username-or-phone-number-field'; +import { GlobalError } from '~/common/global-error'; import { OTPField } from '~/common/otp-field'; import { PasswordField } from '~/common/password-field'; import { PhoneNumberField } from '~/common/phone-number-field'; @@ -21,7 +22,6 @@ import { useEnvironment } from '~/hooks/use-environment'; import { useLocalizations } from '~/hooks/use-localizations'; import { useResetPasswordFactor } from '~/hooks/use-reset-password-factor'; import { useSupportEmail } from '~/hooks/use-support-email'; -import { Alert } from '~/primitives/alert'; import { Button } from '~/primitives/button'; import * as Card from '~/primitives/card'; import * as Icon from '~/primitives/icon'; @@ -144,11 +144,7 @@ export function SignInComponentLoaded() { {t('signIn.start.subtitle', { applicationName })} - - {({ message }) => { - return {message}; - }} - + @@ -313,11 +309,7 @@ export function SignInComponentLoaded() { - - {({ message }) => { - return {message}; - }} - + - - {({ message }) => { - return {message}; - }} - + {isSubmitting => { @@ -466,11 +454,7 @@ export function SignInComponentLoaded() { {t('signIn.backupCodeMfa.subtitle')} - - {({ message }) => { - return {message}; - }} - + @@ -541,11 +525,7 @@ export function SignInComponentLoaded() { - - {({ message }) => { - return {message}; - }} - + - - {({ message }) => { - return {message}; - }} - + - - {({ message }) => { - return {message}; - }} - + - - {({ message }) => { - return {message}; - }} - + {t('signIn.totpMfa.subtitle', { applicationName })} - - {({ message }) => { - return {message}; - }} - + {t('signIn.alternativeMethods.subtitle')} - - {({ message }) => { - return {message}; - }} - +
@@ -1046,11 +1006,7 @@ export function SignInComponentLoaded() { {t('signIn.forgotPasswordAlternativeMethods.title')} - - {({ message }) => { - return {message}; - }} - + {t('signIn.resetPassword.title')} - - {({ message }) => { - return {message}; - }} - +
diff --git a/packages/ui/src/components/sign-up/sign-up.tsx b/packages/ui/src/components/sign-up/sign-up.tsx index d184c17625..671348ab60 100644 --- a/packages/ui/src/components/sign-up/sign-up.tsx +++ b/packages/ui/src/components/sign-up/sign-up.tsx @@ -6,6 +6,7 @@ import { Connections } from '~/common/connections'; import { EmailField } from '~/common/email-field'; import { EmailOrPhoneNumberField } from '~/common/email-or-phone-number-field'; import { FirstNameField } from '~/common/first-name-field'; +import { GlobalError } from '~/common/global-error'; import { LastNameField } from '~/common/last-name-field'; import { OTPField } from '~/common/otp-field'; import { PasswordField } from '~/common/password-field'; @@ -16,7 +17,6 @@ import { useDisplayConfig } from '~/hooks/use-display-config'; import { useEnabledConnections } from '~/hooks/use-enabled-connections'; import { useEnvironment } from '~/hooks/use-environment'; import { useLocalizations } from '~/hooks/use-localizations'; -import { Alert } from '~/primitives/alert'; import { Button } from '~/primitives/button'; import * as Card from '~/primitives/card'; import * as Icon from '~/primitives/icon'; @@ -74,11 +74,7 @@ function SignUpComponentLoaded() { - - {({ message }) => { - return {message}; - }} - + @@ -201,11 +197,7 @@ function SignUpComponentLoaded() { - - {({ message }) => { - return {message}; - }} - + - - {({ message }) => { - return {message}; - }} - + - - {({ message }) => { - return {message}; - }} - + {t('signUp.continue.subtitle')} - - {({ message }) => { - return {message}; - }} - +
diff --git a/packages/ui/src/utils/makeLocalizable.ts b/packages/ui/src/utils/makeLocalizable.ts index 8024a0065a..53c0b0d620 100644 --- a/packages/ui/src/utils/makeLocalizable.ts +++ b/packages/ui/src/utils/makeLocalizable.ts @@ -211,7 +211,7 @@ export const makeLocalizeable = (resource: LocalizationResource) => { * @example * translateError('Invalid email address', 'form_param_format_invalid', 'email_address') */ - const translateError = (message: string, code: string, name: string) => { + const translateError = (message: string, code: string, name?: string) => { return t(`unstable__errors.${code}__${name}` as any) || t(`unstable__errors.${code}` as any) || message; };