chore(ui): SignIn hook up field translations (#3802)

clerk · Jul 25, 2024 · 17c7321 · 17c7321
1 parent cfeb5dd
commit 17c7321
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git a/.changeset/plenty-buttons-repair.md b/.changeset/plenty-buttons-repair.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/common/email-or-username-or-phone-number-field.tsx b/packages/ui/src/common/email-or-username-or-phone-number-field.tsx
@@ -12,12 +12,16 @@ export function EmailOrUsernameOrPhoneNumberField({
   name = undefined,
   labelEmailOrUsername = 'Email address or username',
   labelPhoneNumber = 'Phone number',
+  toggleLabelEmailOrUsername = 'Use email or username',
+  toggleLabelPhoneNumber = 'Use phone',
   locationBasedCountryIso,
   toggleDescription = 'Toggle between email or username, and phone.',
   ...props
 }: {
   labelEmailOrUsername?: React.ReactNode;
   labelPhoneNumber?: React.ReactNode;
+  toggleLabelEmailOrUsername?: string;
+  toggleLabelPhoneNumber?: string;
   locationBasedCountryIso: React.ComponentProps<typeof PhoneNumberField>['locationBasedCountryIso'];
   toggleDescription?: string;
 } & Omit<React.ComponentProps<typeof Common.Input>, 'type'>) {
@@ -30,7 +34,7 @@ export function EmailOrUsernameOrPhoneNumberField({
       className={link({ size: 'sm', disabled: props.disabled, focusVisible: 'data-attribute' })}
     >
       <span className='sr-only'>{toggleDescription}</span>
-      {showPhoneNumberField ? 'Use email or username' : 'Use phone'}
+      {showPhoneNumberField ? toggleLabelEmailOrUsername : toggleLabelPhoneNumber}
     </ToggleButton>
   );
 

diff --git a/packages/ui/src/common/phone-number-or-username-field.tsx b/packages/ui/src/common/phone-number-or-username-field.tsx
@@ -13,12 +13,16 @@ export function PhoneNumberOrUsernameField({
   labelPhoneNumber = 'Phone number',
   labelUsername = 'Username',
   locationBasedCountryIso,
+  toggleLabelPhoneNumber = 'Use phone',
+  toggleLabelUsername = 'Use username',
   toggleDescription = 'Toggle between phone and username.',
   ...props
 }: {
   labelUsername?: React.ReactNode;
   labelPhoneNumber?: React.ReactNode;
   locationBasedCountryIso: React.ComponentProps<typeof PhoneNumberField>['locationBasedCountryIso'];
+  toggleLabelPhoneNumber?: string;
+  toggleLabelUsername?: string;
   toggleDescription?: string;
 } & Omit<React.ComponentProps<typeof Common.Input>, 'type'>) {
   const [showUsernameField, setShowUsernameField] = React.useState(false);
@@ -30,7 +34,7 @@ export function PhoneNumberOrUsernameField({
       className={link({ size: 'sm', disabled: props.disabled, focusVisible: 'data-attribute' })}
     >
       <span className='sr-only'>{toggleDescription}</span>
-      {showUsernameField ? 'Use phone' : 'Use username'}
+      {showUsernameField ? toggleLabelPhoneNumber : toggleLabelUsername}
     </ToggleButton>
   );
 

diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -164,6 +164,7 @@ export function SignInComponentLoaded() {
                         {emailAddressEnabled && !phoneNumberEnabled && !usernameEnabled ? (
                           <EmailField
                             name='identifier'
+                            label={t('formFieldLabel__emailAddress')}
                             disabled={isGlobalLoading}
                             required
                           />
@@ -172,6 +173,7 @@ export function SignInComponentLoaded() {
                         {usernameEnabled && !emailAddressEnabled && !phoneNumberEnabled ? (
                           <UsernameField
                             name='identifier'
+                            label={t('formFieldLabel__username')}
                             disabled={isGlobalLoading}
                             required
                           />
@@ -180,6 +182,7 @@ export function SignInComponentLoaded() {
                         {phoneNumberEnabled && !emailAddressEnabled && !usernameEnabled ? (
                           <PhoneNumberField
                             name='identifier'
+                            label={t('formFieldLabel__phoneNumber')}
                             disabled={isGlobalLoading}
                             locationBasedCountryIso={locationBasedCountryIso}
                             required
@@ -189,6 +192,7 @@ export function SignInComponentLoaded() {
                         {emailAddressEnabled && usernameEnabled && !phoneNumberEnabled ? (
                           <EmailOrUsernameField
                             name='identifier'
+                            label={t('formFieldLabel__emailAddress_username')}
                             disabled={isGlobalLoading}
                             required
                           />
@@ -197,6 +201,10 @@ export function SignInComponentLoaded() {
                         {emailAddressEnabled && phoneNumberEnabled && !usernameEnabled ? (
                           <EmailOrPhoneNumberField
                             name='identifier'
+                            labelEmail={t('formFieldLabel__emailAddress')}
+                            toggleLabelEmail={t('signIn.start.actionLink__use_email')}
+                            labelPhoneNumber={t('formFieldLabel__phoneNumber')}
+                            toggleLabelPhoneNumber={t('signIn.start.actionLink__use_phone')}
                             disabled={isGlobalLoading}
                             locationBasedCountryIso={locationBasedCountryIso}
                             required
@@ -206,6 +214,10 @@ export function SignInComponentLoaded() {
                         {usernameEnabled && phoneNumberEnabled && !emailAddressEnabled ? (
                           <PhoneNumberOrUsernameField
                             name='identifier'
+                            labelPhoneNumber={t('formFieldLabel__phoneNumber')}
+                            toggleLabelPhoneNumber={t('signIn.start.actionLink__use_phone')}
+                            labelUsername={t('formFieldLabel__username')}
+                            toggleLabelUsername={t('signIn.start.actionLink__use_username')}
                             disabled={isGlobalLoading}
                             locationBasedCountryIso={locationBasedCountryIso}
                             required
@@ -215,6 +227,10 @@ export function SignInComponentLoaded() {
                         {emailAddressEnabled && usernameEnabled && phoneNumberEnabled ? (
                           <EmailOrUsernameOrPhoneNumberField
                             name='identifier'
+                            labelEmailOrUsername={t('formFieldLabel__emailAddress_username')}
+                            toggleLabelEmailOrUsername={t('signIn.start.actionLink__use_email_username')}
+                            labelPhoneNumber={t('formFieldLabel__phoneNumber')}
+                            toggleLabelPhoneNumber={t('signIn.start.actionLink__use_phone')}
                             disabled={isGlobalLoading}
                             locationBasedCountryIso={locationBasedCountryIso}
                             required