Skip to content

Commit da0035c

Browse files
alexcarpenteralexcarpenter
authored
refactor(ui): Ensure global errors are translated using localization hook (#3881)
1 parent a462e6b commit da0035c

File tree

5 files changed

+37
-88
lines changed

5 files changed

+37
-88
lines changed

‎.changeset/poor-cougars-visit.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎packages/ui/src/common/global-error.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { GlobalError as ElementsGlobalError } from '@clerk/elements/common';
2+
3+
import { useLocalizations } from '~/hooks/use-localizations';
4+
import { Alert } from '~/primitives/alert';
5+
6+
export function GlobalError() {
7+
const { translateError } = useLocalizations();
8+
return (
9+
<ElementsGlobalError>
10+
{({ message, code }) => {
11+
return <Alert>{translateError(message, code)}</Alert>;
12+
}}
13+
</ElementsGlobalError>
14+
);
15+
}

‎packages/ui/src/components/sign-in/sign-in.tsx

+13-61
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { EmailField } from '~/common/email-field';
99
import { EmailOrPhoneNumberField } from '~/common/email-or-phone-number-field';
1010
import { EmailOrUsernameField } from '~/common/email-or-username-field';
1111
import { EmailOrUsernameOrPhoneNumberField } from '~/common/email-or-username-or-phone-number-field';
12+
import { GlobalError } from '~/common/global-error';
1213
import { OTPField } from '~/common/otp-field';
1314
import { PasswordField } from '~/common/password-field';
1415
import { PhoneNumberField } from '~/common/phone-number-field';
@@ -21,7 +22,6 @@ import { useEnvironment } from '~/hooks/use-environment';
2122
import { useLocalizations } from '~/hooks/use-localizations';
2223
import { useResetPasswordFactor } from '~/hooks/use-reset-password-factor';
2324
import { useSupportEmail } from '~/hooks/use-support-email';
24-
import { Alert } from '~/primitives/alert';
2525
import { Button } from '~/primitives/button';
2626
import * as Card from '~/primitives/card';
2727
import * as Icon from '~/primitives/icon';
@@ -144,11 +144,7 @@ export function SignInComponentLoaded() {
144144
<Card.Description>{t('signIn.start.subtitle', { applicationName })}</Card.Description>
145145
</Card.Header>
146146

147-
<Common.GlobalError>
148-
{({ message }) => {
149-
return <Alert>{message}</Alert>;
150-
}}
151-
</Common.GlobalError>
147+
<GlobalError />
152148

153149
<Card.Body>
154150
<Connections disabled={isGlobalLoading} />
@@ -313,11 +309,7 @@ export function SignInComponentLoaded() {
313309
</Card.Description>
314310
</Card.Header>
315311

316-
<Common.GlobalError>
317-
{({ message }) => {
318-
return <Alert>{message}</Alert>;
319-
}}
320-
</Common.GlobalError>
312+
<GlobalError />
321313

322314
<Card.Body>
323315
<PasswordField
@@ -403,11 +395,7 @@ export function SignInComponentLoaded() {
403395
</Card.Description>
404396
</Card.Header>
405397

406-
<Common.GlobalError>
407-
{({ message }) => {
408-
return <Alert>{message}</Alert>;
409-
}}
410-
</Common.GlobalError>
398+
<GlobalError />
411399

412400
<Common.Loading>
413401
{isSubmitting => {
@@ -466,11 +454,7 @@ export function SignInComponentLoaded() {
466454
<Card.Description>{t('signIn.backupCodeMfa.subtitle')}</Card.Description>
467455
</Card.Header>
468456

469-
<Common.GlobalError>
470-
{({ message }) => {
471-
return <Alert>{message}</Alert>;
472-
}}
473-
</Common.GlobalError>
457+
<GlobalError />
474458

475459
<Card.Body>
476460
<BackupCodeField />
@@ -541,11 +525,7 @@ export function SignInComponentLoaded() {
541525
</Card.Description>
542526
</Card.Header>
543527

544-
<Common.GlobalError>
545-
{({ message }) => {
546-
return <Alert>{message}</Alert>;
547-
}}
548-
</Common.GlobalError>
528+
<GlobalError />
549529

550530
<Card.Body>
551531
<OTPField
@@ -631,11 +611,7 @@ export function SignInComponentLoaded() {
631611
</Card.Description>
632612
</Card.Header>
633613

634-
<Common.GlobalError>
635-
{({ message }) => {
636-
return <Alert>{message}</Alert>;
637-
}}
638-
</Common.GlobalError>
614+
<GlobalError />
639615

640616
<Card.Body>
641617
<OTPField
@@ -722,11 +698,7 @@ export function SignInComponentLoaded() {
722698
</Card.Description>
723699
</Card.Header>
724700

725-
<Common.GlobalError>
726-
{({ message }) => {
727-
return <Alert>{message}</Alert>;
728-
}}
729-
</Common.GlobalError>
701+
<GlobalError />
730702

731703
<Card.Body>
732704
<SignIn.Action
@@ -765,11 +737,7 @@ export function SignInComponentLoaded() {
765737
</Card.Description>
766738
</Card.Header>
767739

768-
<Common.GlobalError>
769-
{({ message }) => {
770-
return <Alert>{message}</Alert>;
771-
}}
772-
</Common.GlobalError>
740+
<GlobalError />
773741

774742
<Card.Body>
775743
<OTPField
@@ -832,11 +800,7 @@ export function SignInComponentLoaded() {
832800
<Card.Description>{t('signIn.totpMfa.subtitle', { applicationName })}</Card.Description>
833801
</Card.Header>
834802

835-
<Common.GlobalError>
836-
{({ message }) => {
837-
return <Alert>{message}</Alert>;
838-
}}
839-
</Common.GlobalError>
803+
<GlobalError />
840804

841805
<Card.Body>
842806
<OTPField
@@ -895,11 +859,7 @@ export function SignInComponentLoaded() {
895859
<Card.Description>{t('signIn.alternativeMethods.subtitle')}</Card.Description>
896860
</Card.Header>
897861

898-
<Common.GlobalError>
899-
{({ message }) => {
900-
return <Alert>{message}</Alert>;
901-
}}
902-
</Common.GlobalError>
862+
<GlobalError />
903863

904864
<Card.Body>
905865
<div className='flex flex-col gap-6'>
@@ -1046,11 +1006,7 @@ export function SignInComponentLoaded() {
10461006
<Card.Title>{t('signIn.forgotPasswordAlternativeMethods.title')}</Card.Title>
10471007
</Card.Header>
10481008

1049-
<Common.GlobalError>
1050-
{({ message }) => {
1051-
return <Alert>{message}</Alert>;
1052-
}}
1053-
</Common.GlobalError>
1009+
<GlobalError />
10541010

10551011
<Card.Body>
10561012
<SignIn.SupportedStrategy
@@ -1181,11 +1137,7 @@ export function SignInComponentLoaded() {
11811137
<Card.Title>{t('signIn.resetPassword.title')}</Card.Title>
11821138
</Card.Header>
11831139

1184-
<Common.GlobalError>
1185-
{({ message }) => {
1186-
return <Alert>{message}</Alert>;
1187-
}}
1188-
</Common.GlobalError>
1140+
<GlobalError />
11891141

11901142
<Card.Body>
11911143
<div className='flex flex-col justify-center gap-4'>

‎packages/ui/src/components/sign-up/sign-up.tsx

+6-26
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Connections } from '~/common/connections';
66
import { EmailField } from '~/common/email-field';
77
import { EmailOrPhoneNumberField } from '~/common/email-or-phone-number-field';
88
import { FirstNameField } from '~/common/first-name-field';
9+
import { GlobalError } from '~/common/global-error';
910
import { LastNameField } from '~/common/last-name-field';
1011
import { OTPField } from '~/common/otp-field';
1112
import { PasswordField } from '~/common/password-field';
@@ -16,7 +17,6 @@ import { useDisplayConfig } from '~/hooks/use-display-config';
1617
import { useEnabledConnections } from '~/hooks/use-enabled-connections';
1718
import { useEnvironment } from '~/hooks/use-environment';
1819
import { useLocalizations } from '~/hooks/use-localizations';
19-
import { Alert } from '~/primitives/alert';
2020
import { Button } from '~/primitives/button';
2121
import * as Card from '~/primitives/card';
2222
import * as Icon from '~/primitives/icon';
@@ -74,11 +74,7 @@ function SignUpComponentLoaded() {
7474
</Card.Description>
7575
</Card.Header>
7676

77-
<Common.GlobalError>
78-
{({ message }) => {
79-
return <Alert>{message}</Alert>;
80-
}}
81-
</Common.GlobalError>
77+
<GlobalError />
8278

8379
<Card.Body>
8480
<Connections disabled={isGlobalLoading} />
@@ -201,11 +197,7 @@ function SignUpComponentLoaded() {
201197
</Card.Description>
202198
</Card.Header>
203199

204-
<Common.GlobalError>
205-
{({ message }) => {
206-
return <Alert>{message}</Alert>;
207-
}}
208-
</Common.GlobalError>
200+
<GlobalError />
209201

210202
<Card.Body>
211203
<OTPField
@@ -277,11 +269,7 @@ function SignUpComponentLoaded() {
277269
</Card.Description>
278270
</Card.Header>
279271

280-
<Common.GlobalError>
281-
{({ message }) => {
282-
return <Alert>{message}</Alert>;
283-
}}
284-
</Common.GlobalError>
272+
<GlobalError />
285273

286274
<Card.Body>
287275
<OTPField
@@ -357,11 +345,7 @@ function SignUpComponentLoaded() {
357345
</Card.Description>
358346
</Card.Header>
359347

360-
<Common.GlobalError>
361-
{({ message }) => {
362-
return <Alert>{message}</Alert>;
363-
}}
364-
</Common.GlobalError>
348+
<GlobalError />
365349

366350
<Card.Body>
367351
<SignUp.Action
@@ -398,11 +382,7 @@ function SignUpComponentLoaded() {
398382
<Card.Description>{t('signUp.continue.subtitle')}</Card.Description>
399383
</Card.Header>
400384

401-
<Common.GlobalError>
402-
{({ message }) => {
403-
return <Alert>{message}</Alert>;
404-
}}
405-
</Common.GlobalError>
385+
<GlobalError />
406386

407387
<Card.Body>
408388
<div className='space-y-4'>

‎packages/ui/src/utils/makeLocalizable.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ export const makeLocalizeable = (resource: LocalizationResource) => {
211211
* @example
212212
* translateError('Invalid email address', 'form_param_format_invalid', 'email_address')
213213
*/
214-
const translateError = (message: string, code: string, name: string) => {
214+
const translateError = (message: string, code: string, name?: string) => {
215215
return t(`unstable__errors.${code}__${name}` as any) || t(`unstable__errors.${code}` as any) || message;
216216
};
217217

0 commit comments

Comments
 (0)