fix(ui): If SafeIdentifier is a phone number format it

clerk · Jul 17, 2024 · db9d2d6 · db9d2d6
1 parent e884aad
commit db9d2d6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -10,6 +10,7 @@ import { EmailOrUsernameOrPhoneNumberField } from '~/common/email-or-username-or
 import { OTPField } from '~/common/otp-field';
 import { PasswordField } from '~/common/password-field';
 import { PhoneNumberField } from '~/common/phone-number-field';
+import { parsePhoneString } from '~/common/phone-number-field/utils';
 import { PhoneNumberOrUsernameField } from '~/common/phone-number-or-username-field';
 import { UsernameField } from '~/common/username-field';
 import { useAttributes } from '~/hooks/use-attributes';
@@ -24,6 +25,7 @@ import * as Icon from '~/primitives/icon';
 import { LinkButton } from '~/primitives/link-button';
 import { SecondaryButton } from '~/primitives/secondary-button';
 import { Seperator } from '~/primitives/seperator';
+import { isPhoneNumber } from '~/utils/is-phone-number';
 
 export function SignInComponent() {
   return (
@@ -204,7 +206,14 @@ export function SignInComponentLoaded() {
                       <Card.Description>{t('signIn.password.subtitle')}</Card.Description>
                       <Card.Description>
                         <span className='flex items-center justify-center gap-2'>
-                          <SignIn.SafeIdentifier />
+                          <SignIn.SafeIdentifier
+                            transform={val => {
+                              if (!isPhoneNumber(val)) {
+                                return parsePhoneString(val).formattedNumberWithCode;
+                              }
+                              return val;
+                            }}
+                          />
                           <SignIn.Action
                             navigate='start'
                             asChild

diff --git a/packages/ui/src/utils/is-phone-number.ts b/packages/ui/src/utils/is-phone-number.ts
@@ -0,0 +1,5 @@
+const phoneRegex = /^(\+\d{1,3}[-\s]?)?\(?[0-9]{3}\)?[-\s]?[0-9]{3}[-\s]?[0-9]{4}$/;
+
+export function isPhoneNumber(str: string) {
+  return phoneRegex.test(str);
+}