From 11ebb978a5ee77ab77d473a9e537b219b2b99b2d Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Tue, 7 Mar 2023 13:29:23 +0000 Subject: [PATCH] Update i18n for confirmation messages (#152) --- .changeset/ten-otters-reflect.md | 8 ++++++++ .../react/src/components/Auth/interfaces/EmailAuth.tsx | 5 +---- .../src/components/Auth/interfaces/ForgottenPassword.tsx | 2 +- .../react/src/components/Auth/interfaces/MagicLink.tsx | 2 +- .../src/components/Auth/interfaces/UpdatePassword.tsx | 2 +- packages/shared/src/localization/en.json | 9 ++++++--- packages/shared/src/types.ts | 3 +++ .../solid/src/components/Auth/interfaces/EmailAuth.tsx | 2 +- .../src/components/Auth/interfaces/ForgottenPassword.tsx | 2 +- .../solid/src/components/Auth/interfaces/MagicLink.tsx | 2 +- .../src/components/Auth/interfaces/UpdatePassword.tsx | 2 +- packages/svelte/src/lib/Auth/interfaces/EmailAuth.svelte | 7 +++++-- .../src/lib/Auth/interfaces/ForgottenPassword.svelte | 2 +- packages/svelte/src/lib/Auth/interfaces/MagicLink.svelte | 2 +- .../svelte/src/lib/Auth/interfaces/UpdatePassword.svelte | 2 +- 15 files changed, 33 insertions(+), 19 deletions(-) create mode 100644 .changeset/ten-otters-reflect.md diff --git a/.changeset/ten-otters-reflect.md b/.changeset/ten-otters-reflect.md new file mode 100644 index 00000000..924d3476 --- /dev/null +++ b/.changeset/ten-otters-reflect.md @@ -0,0 +1,8 @@ +--- +'@supabase/auth-ui-react': patch +'@supabase/auth-ui-shared': patch +'@supabase/auth-ui-solid': patch +'@supabase/auth-ui-svelte': patch +--- + +Update i18n for confirmation messages diff --git a/packages/react/src/components/Auth/interfaces/EmailAuth.tsx b/packages/react/src/components/Auth/interfaces/EmailAuth.tsx index 19a7e4f8..503f7411 100644 --- a/packages/react/src/components/Auth/interfaces/EmailAuth.tsx +++ b/packages/react/src/components/Auth/interfaces/EmailAuth.tsx @@ -91,10 +91,7 @@ function EmailAuth({ if (signUpError) setError(signUpError.message) // Check if session is null -> email confirmation setting is turned on else if (signUpUser && !signUpSession) - setMessage( - i18n?.sign_up?.confirmation_text || - 'Check your email for the confirmation link.' - ) + setMessage(i18n?.sign_up?.confirmation_text as string) break } diff --git a/packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx b/packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx index 13dc3d64..ea85e20a 100644 --- a/packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx +++ b/packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx @@ -40,7 +40,7 @@ function ForgottenPassword({ redirectTo, }) if (error) setError(error.message) - else setMessage('Check your email for the password reset link') + else setMessage(i18n?.forgotten_password?.confirmation_text as string) setLoading(false) } diff --git a/packages/react/src/components/Auth/interfaces/MagicLink.tsx b/packages/react/src/components/Auth/interfaces/MagicLink.tsx index 79d30dc5..11dd6b29 100644 --- a/packages/react/src/components/Auth/interfaces/MagicLink.tsx +++ b/packages/react/src/components/Auth/interfaces/MagicLink.tsx @@ -41,7 +41,7 @@ function MagicLink({ options: { emailRedirectTo: redirectTo }, }) if (error) setError(error.message) - else setMessage('Check your email for the magic link') + else setMessage(i18n?.magic_link?.confirmation_text as string) setLoading(false) } diff --git a/packages/react/src/components/Auth/interfaces/UpdatePassword.tsx b/packages/react/src/components/Auth/interfaces/UpdatePassword.tsx index f000ace8..7b45e460 100644 --- a/packages/react/src/components/Auth/interfaces/UpdatePassword.tsx +++ b/packages/react/src/components/Auth/interfaces/UpdatePassword.tsx @@ -25,7 +25,7 @@ function UpdatePassword({ setLoading(true) const { error } = await supabaseClient.auth.updateUser({ password }) if (error) setError(error.message) - else setMessage('Your password has been updated') + else setMessage(i18n?.update_password?.confirmation_text as string) setLoading(false) } diff --git a/packages/shared/src/localization/en.json b/packages/shared/src/localization/en.json index 069887b2..399d3e65 100644 --- a/packages/shared/src/localization/en.json +++ b/packages/shared/src/localization/en.json @@ -25,7 +25,8 @@ "email_input_placeholder": "Your email address", "button_label": "Send Magic Link", "loading_button_label": "Sending Magic Link ...", - "link_text": "Send a magic link email" + "link_text": "Send a magic link email", + "confirmation_text": "Check your email for the magic link" }, "forgotten_password": { "email_label": "Email address", @@ -33,12 +34,14 @@ "email_input_placeholder": "Your email address", "button_label": "Send reset password instructions", "loading_button_label": "Sending reset instructions ...", - "link_text": "Forgot your password?" + "link_text": "Forgot your password?", + "confirmation_text": "Check your email for the password reset link" }, "update_password": { "password_label": "New password", "password_input_placeholder": "Your new password", "button_label": "Update password", - "loading_button_label": "Updating password ..." + "loading_button_label": "Updating password ...", + "confirmation_text": "Your password has been updated" } } diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts index d0df7c48..64ebbcb6 100644 --- a/packages/shared/src/types.ts +++ b/packages/shared/src/types.ts @@ -120,6 +120,7 @@ export type I18nVariables = { button_label?: string loading_button_label?: string link_text?: string + confirmation_text?: string } forgotten_password?: { email_label?: string @@ -128,11 +129,13 @@ export type I18nVariables = { button_label?: string loading_button_label?: string link_text?: string + confirmation_text?: string } update_password?: { password_label?: string password_input_placeholder?: string button_label?: string loading_button_label?: string + confirmation_text?: string } } diff --git a/packages/solid/src/components/Auth/interfaces/EmailAuth.tsx b/packages/solid/src/components/Auth/interfaces/EmailAuth.tsx index eb6ae381..a5e1fa5d 100644 --- a/packages/solid/src/components/Auth/interfaces/EmailAuth.tsx +++ b/packages/solid/src/components/Auth/interfaces/EmailAuth.tsx @@ -79,7 +79,7 @@ function EmailAuth(props: EmailAuthProps) { if (signUpError) setError(signUpError.message) // Check if session is null -> email confirmation setting is turned on else if (signUpUser && !signUpSession) - setMessage('Check your email for the confirmation link.') + setMessage(props.i18n.sign_up?.confirmation_text as string) break } diff --git a/packages/solid/src/components/Auth/interfaces/ForgottenPassword.tsx b/packages/solid/src/components/Auth/interfaces/ForgottenPassword.tsx index d168cd8a..2b7fa444 100644 --- a/packages/solid/src/components/Auth/interfaces/ForgottenPassword.tsx +++ b/packages/solid/src/components/Auth/interfaces/ForgottenPassword.tsx @@ -34,7 +34,7 @@ function ForgottenPassword(props: { } ) if (error) setError(error.message) - else setMessage('Check your email for the password reset link') + else setMessage(props.i18n.forgotten_password?.confirmation_text as string) setLoading(false) } diff --git a/packages/solid/src/components/Auth/interfaces/MagicLink.tsx b/packages/solid/src/components/Auth/interfaces/MagicLink.tsx index 2c3c1c3d..a1acc6a3 100644 --- a/packages/solid/src/components/Auth/interfaces/MagicLink.tsx +++ b/packages/solid/src/components/Auth/interfaces/MagicLink.tsx @@ -32,7 +32,7 @@ function MagicLink(props: { options: { emailRedirectTo: props.redirectTo }, }) if (error) setError(error.message) - else setMessage('Check your email for the magic link') + else setMessage(props.i18n.magic_link?.confirmation_text as string) setLoading(false) } diff --git a/packages/solid/src/components/Auth/interfaces/UpdatePassword.tsx b/packages/solid/src/components/Auth/interfaces/UpdatePassword.tsx index 211c3e5f..17cd3b42 100644 --- a/packages/solid/src/components/Auth/interfaces/UpdatePassword.tsx +++ b/packages/solid/src/components/Auth/interfaces/UpdatePassword.tsx @@ -23,7 +23,7 @@ function UpdatePassword(props: { password: password(), }) if (error) setError(error.message) - else setMessage('Your password has been updated') + else setMessage(props.i18n.update_password?.confirmation_text as string) setLoading(false) } diff --git a/packages/svelte/src/lib/Auth/interfaces/EmailAuth.svelte b/packages/svelte/src/lib/Auth/interfaces/EmailAuth.svelte index d718760e..55d3f29a 100644 --- a/packages/svelte/src/lib/Auth/interfaces/EmailAuth.svelte +++ b/packages/svelte/src/lib/Auth/interfaces/EmailAuth.svelte @@ -21,12 +21,14 @@ let message = ''; let error = ''; + let loading = false; let lngKey: 'sign_in' | 'sign_up' = authView === 'sign_in' ? 'sign_in' : 'sign_up'; async function handleSubmit() { loading = true; error = ''; + message = ''; switch (authView) { case VIEWS.SIGN_IN: @@ -35,6 +37,7 @@ password }); if (signInError) error = signInError.message; + loading = false; break; case VIEWS.SIGN_UP: const { @@ -50,10 +53,10 @@ if (signUpError) error = signUpError.message; // Check if session is null -> email confirmation setting is turned on - else if (signUpUser && !signUpSession) - message = 'Check your email for the confirmation link.'; + else if (signUpUser && !signUpSession) message = i18n.sign_up?.confirmation_text as string; break; } + loading = false; } diff --git a/packages/svelte/src/lib/Auth/interfaces/ForgottenPassword.svelte b/packages/svelte/src/lib/Auth/interfaces/ForgottenPassword.svelte index 130eeb11..38c536b3 100644 --- a/packages/svelte/src/lib/Auth/interfaces/ForgottenPassword.svelte +++ b/packages/svelte/src/lib/Auth/interfaces/ForgottenPassword.svelte @@ -29,7 +29,7 @@ redirectTo }); if (resetPasswordError) error = resetPasswordError.message; - else message = 'Check your email for the password reset link'; + else message = i18n.forgotten_password?.confirmation_text as string; loading = false; } diff --git a/packages/svelte/src/lib/Auth/interfaces/MagicLink.svelte b/packages/svelte/src/lib/Auth/interfaces/MagicLink.svelte index 48fcf881..b03fe27e 100644 --- a/packages/svelte/src/lib/Auth/interfaces/MagicLink.svelte +++ b/packages/svelte/src/lib/Auth/interfaces/MagicLink.svelte @@ -32,7 +32,7 @@ } }); if (resetPasswordError) error = resetPasswordError.message; - else message = 'Check your email for the magic link'; + else message = i18n.magic_link?.confirmation_text as string; loading = false; } diff --git a/packages/svelte/src/lib/Auth/interfaces/UpdatePassword.svelte b/packages/svelte/src/lib/Auth/interfaces/UpdatePassword.svelte index ec3ecf8f..fd0a0675 100644 --- a/packages/svelte/src/lib/Auth/interfaces/UpdatePassword.svelte +++ b/packages/svelte/src/lib/Auth/interfaces/UpdatePassword.svelte @@ -29,7 +29,7 @@ redirectTo }); if (resetPasswordError) error = resetPasswordError.message; - else message = 'Check your email for the password reset link'; + else message = i18n.update_password?.confirmation_text as string; loading = false; }