diff --git a/.changeset/curly-monkeys-sort.md b/.changeset/curly-monkeys-sort.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/curly-monkeys-sort.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/ui/src/components/sign-up/index.tsx b/packages/ui/src/components/sign-up/index.tsx index b97c1fa90a..9f3d8da45f 100644 --- a/packages/ui/src/components/sign-up/index.tsx +++ b/packages/ui/src/components/sign-up/index.tsx @@ -1 +1,15 @@ -export { SignUpComponent as SignUp } from './sign-up'; +import { Root as SignUpRoot } from '@clerk/elements/sign-up'; + +import { SignUpContinue } from './steps/continue'; +import { SignUpStart } from './steps/start'; +import { SignUpVerifications } from './steps/verifications'; + +export function SignUp() { + return ( + + + + + + ); +} diff --git a/packages/ui/src/components/sign-up/sign-up.tsx b/packages/ui/src/components/sign-up/sign-up.tsx deleted file mode 100644 index 671348ab60..0000000000 --- a/packages/ui/src/components/sign-up/sign-up.tsx +++ /dev/null @@ -1,466 +0,0 @@ -import { useClerk } from '@clerk/clerk-react'; -import * as Common from '@clerk/elements/common'; -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 { GlobalError } from '~/common/global-error'; -import { LastNameField } from '~/common/last-name-field'; -import { OTPField } from '~/common/otp-field'; -import { PasswordField } from '~/common/password-field'; -import { PhoneNumberField } from '~/common/phone-number-field'; -import { UsernameField } from '~/common/username-field'; -import { useAttributes } from '~/hooks/use-attributes'; -import { useDisplayConfig } from '~/hooks/use-display-config'; -import { useEnabledConnections } from '~/hooks/use-enabled-connections'; -import { useEnvironment } from '~/hooks/use-environment'; -import { useLocalizations } from '~/hooks/use-localizations'; -import { Button } from '~/primitives/button'; -import * as Card from '~/primitives/card'; -import * as Icon from '~/primitives/icon'; -import { LinkButton } from '~/primitives/link'; -import { Separator } from '~/primitives/separator'; - -import { SignUpIdentifier } from './indentifiers'; - -export function SignUpComponent() { - return ( - - - - ); -} - -function SignUpComponentLoaded() { - const clerk = useClerk(); - const enabledConnections = useEnabledConnections(); - const { isDevelopmentOrStaging, userSettings } = useEnvironment(); - const { t } = useLocalizations(); - const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name'); - 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, required: emailAddressRequired } = useAttributes('email_address'); - const { enabled: passwordEnabled, required: passwordRequired } = useAttributes('password'); - const { applicationName, branded, homeUrl, logoImageUrl } = useDisplayConfig(); - - const hasConnection = enabledConnections.length > 0; - const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled; - const isDev = isDevelopmentOrStaging(); - - return ( - - {isGlobalLoading => { - return ( - <> - - - - - {logoImageUrl ? ( - - ) : null} - {t('signUp.start.title')} - - {t('signUp.start.subtitle', { - applicationName, - })} - - - - - - - - - {hasConnection && hasIdentifier ? {t('dividerText')} : null} - - {hasIdentifier ? ( -
- {firstNameEnabled && lastNameEnabled ? ( -
- - -
- ) : null} - - {usernameEnabled ? ( - - ) : null} - - {emailAddressEnabled && !emailAddressRequired && phoneNumberEnabled && !phoneNumberRequired ? ( - - ) : ( - <> - - - {phoneNumberEnabled ? ( - - ) : null} - - )} - - {passwordEnabled && passwordRequired ? ( - - ) : null} -
- ) : null} - - {userSettings.signUp.captcha_enabled ? : null} - - {hasConnection || hasIdentifier ? ( - - {isSubmitting => { - return ( - - - - - - ); - }} - - ) : null} - {isDev ? Development mode : null} - - - - - {t('signUp.start.actionText')}{' '} - {t('signUp.start.actionLink')} - - - - - - - - - - - - {t('signUp.phoneCode.title')} - {t('signUp.phoneCode.subtitle')} - - - - - - - - - - - - - - ( - - {t('signUp.phoneCode.resendButton')} ( - {resendableAfter}) - - )} - > - {t('signUp.phoneCode.resendButton')} - - } - /> - - - {isSubmitting => { - return ( - - - - - - ); - }} - - - - - - {t('signUp.emailCode.title')} - {t('signUp.emailCode.subtitle')} - - - - - - - - - - - - - - ( - - {t('signUp.emailCode.resendButton')} ( - {resendableAfter}) - - )} - > - {t('signUp.emailCode.resendButton')} - - } - /> - - - {isSubmitting => { - return ( - - - - - - ); - }} - - - - - - {t('signUp.emailLink.title')} - - {t('signUp.emailLink.subtitle', { - applicationName, - })} - - - - - - - - - - - - - - - { - return ( - - {t('signUp.emailLink.resendButton')} ( - {resendableAfter}) - - ); - }} - > - {t('signUp.emailLink.resendButton')} - - - - {isDev ? Development mode : null} - - - - - - - - - - {t('signUp.continue.title')} - {t('signUp.continue.subtitle')} - - - - - -
- {firstNameEnabled && lastNameEnabled ? ( -
- - -
- ) : null} - - {usernameEnabled ? ( - - ) : null} - - {phoneNumberEnabled ? ( - - ) : null} - - - - {passwordEnabled && passwordRequired ? ( - - ) : null} -
- - - {isSubmitting => { - return ( - - - - - - ); - }} - - {isDev ? Development mode : null} - - - - - {t('signUp.continue.actionText')}{' '} - {t('signUp.continue.actionLink')} - - - - - - - ); - }} - - ); -} diff --git a/packages/ui/src/components/sign-up/steps/continue.tsx b/packages/ui/src/components/sign-up/steps/continue.tsx new file mode 100644 index 0000000000..12f152beda --- /dev/null +++ b/packages/ui/src/components/sign-up/steps/continue.tsx @@ -0,0 +1,130 @@ +import * as Common from '@clerk/elements/common'; +import * as SignUp from '@clerk/elements/sign-up'; + +import { EmailField } from '~/common/email-field'; +import { FirstNameField } from '~/common/first-name-field'; +import { LastNameField } from '~/common/last-name-field'; +import { PasswordField } from '~/common/password-field'; +import { PhoneNumberField } from '~/common/phone-number-field'; +import { UsernameField } from '~/common/username-field'; +import { useAttributes } from '~/hooks/use-attributes'; +import { useDisplayConfig } from '~/hooks/use-display-config'; +import { useEnvironment } from '~/hooks/use-environment'; +import { useLocalizations } from '~/hooks/use-localizations'; +import { GlobalError } from '~/common/global-error'; +import { Button } from '~/primitives/button'; +import * as Card from '~/primitives/card'; +import * as Icon from '~/primitives/icon'; + +export function SignUpContinue() { + const { isDevelopmentOrStaging } = useEnvironment(); + const { t } = useLocalizations(); + const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name'); + 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: passwordEnabled, required: passwordRequired } = useAttributes('password'); + const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig(); + + const isDev = isDevelopmentOrStaging(); + + return ( + + {isGlobalLoading => { + return ( + + + + + {logoImageUrl ? ( + + ) : null} + {t('signUp.continue.title')} + {t('signUp.continue.subtitle')} + + + + + +
+ {firstNameEnabled && lastNameEnabled ? ( +
+ + +
+ ) : null} + + {usernameEnabled ? ( + + ) : null} + + {phoneNumberEnabled ? ( + + ) : null} + + + + {passwordEnabled && passwordRequired ? ( + + ) : null} +
+ + + {isSubmitting => { + return ( + + + + + + ); + }} + + {isDev ? Development mode : null} + + + + + {t('signUp.continue.actionText')}{' '} + {t('signUp.continue.actionLink')} + + + + + + ); + }} + + ); +} diff --git a/packages/ui/src/components/sign-up/steps/start.tsx b/packages/ui/src/components/sign-up/steps/start.tsx new file mode 100644 index 0000000000..6289360989 --- /dev/null +++ b/packages/ui/src/components/sign-up/steps/start.tsx @@ -0,0 +1,164 @@ +import { useClerk } from '@clerk/clerk-react'; +import * as Common from '@clerk/elements/common'; +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 { GlobalError } from '~/common/global-error'; +import { LastNameField } from '~/common/last-name-field'; +import { PasswordField } from '~/common/password-field'; +import { PhoneNumberField } from '~/common/phone-number-field'; +import { UsernameField } from '~/common/username-field'; +import { useAttributes } from '~/hooks/use-attributes'; +import { useDisplayConfig } from '~/hooks/use-display-config'; +import { useEnabledConnections } from '~/hooks/use-enabled-connections'; +import { useEnvironment } from '~/hooks/use-environment'; +import { useLocalizations } from '~/hooks/use-localizations'; +import { Alert } from '~/primitives/alert'; +import { Button } from '~/primitives/button'; +import * as Card from '~/primitives/card'; +import * as Icon from '~/primitives/icon'; +import { Separator } from '~/primitives/separator'; + +export function SignUpStart() { + const clerk = useClerk(); + const enabledConnections = useEnabledConnections(); + const { isDevelopmentOrStaging, userSettings } = useEnvironment(); + const { t } = useLocalizations(); + const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name'); + 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, required: emailAddressRequired } = useAttributes('email_address'); + const { enabled: passwordEnabled, required: passwordRequired } = useAttributes('password'); + const { applicationName, branded, homeUrl, logoImageUrl } = useDisplayConfig(); + + const hasConnection = enabledConnections.length > 0; + const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled; + const isDev = isDevelopmentOrStaging(); + return ( + + {isGlobalLoading => { + return ( + + + + + {logoImageUrl ? ( + + ) : null} + {t('signUp.start.title')} + + {t('signUp.start.subtitle', { + applicationName, + })} + + + + + + + + + {hasConnection && hasIdentifier ? {t('dividerText')} : null} + + {hasIdentifier ? ( +
+ {firstNameEnabled && lastNameEnabled ? ( +
+ + +
+ ) : null} + + {usernameEnabled ? ( + + ) : null} + + {emailAddressEnabled && !emailAddressRequired && phoneNumberEnabled && !phoneNumberRequired ? ( + + ) : ( + <> + + + {phoneNumberEnabled ? ( + + ) : null} + + )} + + {passwordEnabled && passwordRequired ? ( + + ) : null} +
+ ) : null} + + {userSettings.signUp.captcha_enabled ? : null} + + {hasConnection || hasIdentifier ? ( + + {isSubmitting => { + return ( + + + + + + ); + }} + + ) : null} + {isDev ? Development mode : null} + + + + + {t('signUp.start.actionText')}{' '} + {t('signUp.start.actionLink')} + + + + + + ); + }} + + ); +} diff --git a/packages/ui/src/components/sign-up/steps/verifications.tsx b/packages/ui/src/components/sign-up/steps/verifications.tsx new file mode 100644 index 0000000000..24f4eace1a --- /dev/null +++ b/packages/ui/src/components/sign-up/steps/verifications.tsx @@ -0,0 +1,255 @@ +import * as Common from '@clerk/elements/common'; +import * as SignUp from '@clerk/elements/sign-up'; + +import { OTPField } from '~/common/otp-field'; +import { useDisplayConfig } from '~/hooks/use-display-config'; +import { useEnvironment } from '~/hooks/use-environment'; +import { useLocalizations } from '~/hooks/use-localizations'; +import { Alert } from '~/primitives/alert'; +import { Button } from '~/primitives/button'; +import * as Card from '~/primitives/card'; +import * as Icon from '~/primitives/icon'; +import { LinkButton } from '~/primitives/link'; + +import { SignUpIdentifier } from '../indentifiers'; +import { GlobalError } from '~/common/global-error'; + +export function SignUpVerifications() { + const { isDevelopmentOrStaging } = useEnvironment(); + const { t } = useLocalizations(); + const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig(); + + const isDev = isDevelopmentOrStaging(); + + return ( + + {isGlobalLoading => { + return ( + + + + + + {logoImageUrl ? ( + + ) : null} + {t('signUp.phoneCode.title')} + {t('signUp.phoneCode.subtitle')} + + + + + + + + + + + + + + ( + + {t('signUp.phoneCode.resendButton')} ( + {resendableAfter}) + + )} + > + {t('signUp.phoneCode.resendButton')} + + } + /> + + + {isSubmitting => { + return ( + + + + + + ); + }} + + + + + + {logoImageUrl ? ( + + ) : null} + {t('signUp.emailCode.title')} + {t('signUp.emailCode.subtitle')} + + + + + + + + + + + + + + ( + + {t('signUp.emailCode.resendButton')} ( + {resendableAfter}) + + )} + > + {t('signUp.emailCode.resendButton')} + + } + /> + + + {isSubmitting => { + return ( + + + + + + ); + }} + + + + + + {logoImageUrl ? ( + + ) : null} + {t('signUp.emailLink.title')} + + {t('signUp.emailLink.subtitle', { + applicationName, + })} + + + + + + + + + + + + + + + { + return ( + + {t('signUp.emailLink.resendButton')} ( + {resendableAfter}) + + ); + }} + > + {t('signUp.emailLink.resendButton')} + + + + {isDev ? Development mode : null} + + + + + ); + }} + + ); +}