diff --git a/.changeset/swift-spoons-double.md b/.changeset/swift-spoons-double.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/swift-spoons-double.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/ui/src/components/sign-up/sign-up.tsx b/packages/ui/src/components/sign-up/sign-up.tsx index c407b92f9f..bdfc19c0d6 100644 --- a/packages/ui/src/components/sign-up/sign-up.tsx +++ b/packages/ui/src/components/sign-up/sign-up.tsx @@ -4,6 +4,7 @@ import * as SignUp from '@clerk/elements/sign-up'; 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 { LastNameField } from '~/common/last-name-field'; import { OTPField } from '~/common/otp-field'; @@ -43,7 +44,7 @@ function SignUpComponentLoaded() { const { enabled: lastNameEnabled, required: lastNameRequired } = useAttributes('last_name'); const { enabled: usernameEnabled, required: usernameRequired } = useAttributes('username'); const { enabled: phoneNumberEnabled, required: phoneNumberRequired } = useAttributes('phone_number'); - const { enabled: emailAddressEnabled } = useAttributes('email_address'); + const { enabled: emailAddressEnabled, required: emailAddressRequired } = useAttributes('email_address'); const { enabled: passwordEnabled, required: passwordRequired } = useAttributes('password'); const { applicationName, branded, homeUrl, logoImageUrl } = useDisplayConfig(); @@ -113,18 +114,24 @@ function SignUpComponentLoaded() { /> ) : null} - + {emailAddressEnabled && !emailAddressRequired && phoneNumberEnabled && !phoneNumberRequired ? ( + + ) : ( + <> + - {phoneNumberEnabled ? ( - - ) : null} + {phoneNumberEnabled ? ( + + ) : null} + + )} {passwordEnabled && passwordRequired ? (