diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx index a757fbf55..bea4d67bf 100644 --- a/packages/ui/src/App.tsx +++ b/packages/ui/src/App.tsx @@ -10,6 +10,7 @@ import initI18n from './i18n/init'; import Callback from './pages/Callback'; import Consent from './pages/Consent'; import Continue from './pages/Continue'; +import ContinueWithEmailOrPhone from './pages/Continue/EmailOrPhone'; import ErrorPage from './pages/ErrorPage'; import ForgotPassword from './pages/ForgotPassword'; import Passcode from './pages/Passcode'; @@ -93,6 +94,7 @@ const App = () => { } /> {/* Continue set up missing profile */} + } /> } /> {/* Social sign-in pages */} diff --git a/packages/ui/src/containers/PasswordlessSwitch/index.tsx b/packages/ui/src/containers/PasswordlessSwitch/index.tsx index d640335fb..7e723cb3a 100644 --- a/packages/ui/src/containers/PasswordlessSwitch/index.tsx +++ b/packages/ui/src/containers/PasswordlessSwitch/index.tsx @@ -10,12 +10,12 @@ type Props = { const PasswordlessSwitch = ({ target, className }: Props) => { const { t } = useTranslation(); - const { pathname } = useLocation(); + const { pathname, search } = useLocation(); - const targetPathname = pathname.replace(target === 'email' ? 'sms' : 'email', target); + const targetPathname = pathname.split('/').slice(0, -1).join('/') + `/${target}`; return ( - + {t('action.switch_to', { method: t(`description.${target === 'email' ? 'email' : 'phone_number'}`), })} diff --git a/packages/ui/src/hooks/use-required-profile-error-handler.ts b/packages/ui/src/hooks/use-required-profile-error-handler.ts index 8bfb01b73..2866f1b89 100644 --- a/packages/ui/src/hooks/use-required-profile-error-handler.ts +++ b/packages/ui/src/hooks/use-required-profile-error-handler.ts @@ -47,7 +47,7 @@ const useRequiredProfileErrorHandler = (replace?: boolean) => { 'user.require_email_or_sms': () => { navigate( { - pathname: `/${UserFlow.continue}/email`, + pathname: `/${UserFlow.continue}/email-or-sms/email`, search: location.search, }, { replace } diff --git a/packages/ui/src/pages/Continue/EmailOrPhone/index.test.tsx b/packages/ui/src/pages/Continue/EmailOrPhone/index.test.tsx new file mode 100644 index 000000000..e593a5332 --- /dev/null +++ b/packages/ui/src/pages/Continue/EmailOrPhone/index.test.tsx @@ -0,0 +1,48 @@ +import { MemoryRouter, Routes, Route } from 'react-router-dom'; + +import renderWithPageContext from '@/__mocks__/RenderWithPageContext'; +import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider'; + +import EmailOrPhone from '.'; + +jest.mock('i18next', () => ({ + language: 'en', +})); + +describe('EmailOrPhone', () => { + it('render set phone with email alterations', () => { + const { queryByText, container } = renderWithPageContext( + + + + } /> + + + + ); + + expect(queryByText('description.link_email_or_phone')).not.toBeNull(); + expect(queryByText('description.link_email_or_phone_description')).not.toBeNull(); + expect(container.querySelector('input[name="phone"]')).not.toBeNull(); + expect(queryByText('action.continue')).not.toBeNull(); + expect(queryByText('action.switch_to')).not.toBeNull(); + }); + + it('render set email with phone alterations', () => { + const { queryByText, container } = renderWithPageContext( + + + + } /> + + + + ); + + expect(queryByText('description.link_email_or_phone')).not.toBeNull(); + expect(queryByText('description.link_email_or_phone_description')).not.toBeNull(); + expect(container.querySelector('input[name="email"]')).not.toBeNull(); + expect(queryByText('action.continue')).not.toBeNull(); + expect(queryByText('action.switch_to')).not.toBeNull(); + }); +}); diff --git a/packages/ui/src/pages/Continue/EmailOrPhone/index.tsx b/packages/ui/src/pages/Continue/EmailOrPhone/index.tsx new file mode 100644 index 000000000..5c3c4f090 --- /dev/null +++ b/packages/ui/src/pages/Continue/EmailOrPhone/index.tsx @@ -0,0 +1,41 @@ +import { SignInIdentifier } from '@logto/schemas'; +import { useParams } from 'react-router-dom'; + +import SecondaryPageWrapper from '@/components/SecondaryPageWrapper'; +import { EmailContinue } from '@/containers/EmailForm'; +import { SmsContinue } from '@/containers/PhoneForm'; +import ErrorPage from '@/pages/ErrorPage'; + +type Parameters = { + method?: string; +}; + +const EmailOrPhone = () => { + const { method = '' } = useParams(); + + if (method === SignInIdentifier.Email) { + return ( + + + + ); + } + + if (method === SignInIdentifier.Sms) { + return ( + + + + ); + } + + return ; +}; + +export default EmailOrPhone; diff --git a/packages/ui/src/pages/Continue/SetEmail/index.test.tsx b/packages/ui/src/pages/Continue/SetEmail/index.test.tsx index 6e759b9a3..3bc0cfb54 100644 --- a/packages/ui/src/pages/Continue/SetEmail/index.test.tsx +++ b/packages/ui/src/pages/Continue/SetEmail/index.test.tsx @@ -32,26 +32,4 @@ describe('SetEmail', () => { expect(container.querySelector('input[name="email"]')).not.toBeNull(); expect(queryByText('action.continue')).not.toBeNull(); }); - - it('render set email with phone alterations', () => { - const { queryByText, container } = renderWithPageContext( - - - - ); - - expect(queryByText('description.link_email_or_phone')).not.toBeNull(); - expect(queryByText('description.link_email_or_phone_description')).not.toBeNull(); - expect(container.querySelector('input[name="email"]')).not.toBeNull(); - expect(queryByText('action.continue')).not.toBeNull(); - expect(queryByText('action.switch_to')).not.toBeNull(); - }); }); diff --git a/packages/ui/src/pages/Continue/SetEmail/index.tsx b/packages/ui/src/pages/Continue/SetEmail/index.tsx index 40f3a8432..3ee3eeaa2 100644 --- a/packages/ui/src/pages/Continue/SetEmail/index.tsx +++ b/packages/ui/src/pages/Continue/SetEmail/index.tsx @@ -1,31 +1,13 @@ -import { SignInIdentifier } from '@logto/schemas'; - import SecondaryPageWrapper from '@/components/SecondaryPageWrapper'; import { EmailContinue } from '@/containers/EmailForm'; -import { useSieMethods } from '@/hooks/use-sie'; -import ErrorPage from '@/pages/ErrorPage'; -const SetEmail = () => { - const { signUpMethods } = useSieMethods(); - - if (!signUpMethods.includes(SignInIdentifier.Email)) { - return ; - } - - const phoneSignUpAlteration = signUpMethods.includes(SignInIdentifier.Sms); - - return ( - - - - ); -}; +const SetEmail = () => ( + + + +); export default SetEmail; diff --git a/packages/ui/src/pages/Continue/SetPassword/index.tsx b/packages/ui/src/pages/Continue/SetPassword/index.tsx index fe2340260..04e3bd326 100644 --- a/packages/ui/src/pages/Continue/SetPassword/index.tsx +++ b/packages/ui/src/pages/Continue/SetPassword/index.tsx @@ -1,20 +1,11 @@ import SecondaryPageWrapper from '@/components/SecondaryPageWrapper'; import SetPasswordForm from '@/containers/SetPassword'; -import { useSieMethods } from '@/hooks/use-sie'; -import ErrorPage from '@/pages/ErrorPage'; import useSetPassword from './use-set-password'; const SetPassword = () => { const { setPassword } = useSetPassword(); - const { signUpSettings } = useSieMethods(); - - // Password not enabled for sign-up identifiers - if (!signUpSettings.password) { - return ; - } - return ( diff --git a/packages/ui/src/pages/Continue/SetPhone/index.test.tsx b/packages/ui/src/pages/Continue/SetPhone/index.test.tsx index ec822b03a..f27a775ef 100644 --- a/packages/ui/src/pages/Continue/SetPhone/index.test.tsx +++ b/packages/ui/src/pages/Continue/SetPhone/index.test.tsx @@ -36,26 +36,4 @@ describe('SetPhone', () => { expect(container.querySelector('input[name="phone"]')).not.toBeNull(); expect(queryByText('action.continue')).not.toBeNull(); }); - - it('render set phone with email alterations', () => { - const { queryByText, container } = renderWithPageContext( - - - - ); - - expect(queryByText('description.link_email_or_phone')).not.toBeNull(); - expect(queryByText('description.link_email_or_phone_description')).not.toBeNull(); - expect(container.querySelector('input[name="phone"]')).not.toBeNull(); - expect(queryByText('action.continue')).not.toBeNull(); - expect(queryByText('action.switch_to')).not.toBeNull(); - }); }); diff --git a/packages/ui/src/pages/Continue/SetPhone/index.tsx b/packages/ui/src/pages/Continue/SetPhone/index.tsx index d93c5e15c..4ba9d2b07 100644 --- a/packages/ui/src/pages/Continue/SetPhone/index.tsx +++ b/packages/ui/src/pages/Continue/SetPhone/index.tsx @@ -1,29 +1,13 @@ -import { SignInIdentifier } from '@logto/schemas'; - import SecondaryPageWrapper from '@/components/SecondaryPageWrapper'; import { SmsContinue } from '@/containers/PhoneForm'; -import { useSieMethods } from '@/hooks/use-sie'; -import ErrorPage from '@/pages/ErrorPage'; const SetPhone = () => { - const { signUpMethods } = useSieMethods(); - - if (!signUpMethods.includes(SignInIdentifier.Sms)) { - return ; - } - - const emailSignUpAlteration = signUpMethods.includes(SignInIdentifier.Email); - return ( - + ); }; diff --git a/packages/ui/src/pages/Continue/SetUsername/index.tsx b/packages/ui/src/pages/Continue/SetUsername/index.tsx index dab8e2b77..4e7e3b493 100644 --- a/packages/ui/src/pages/Continue/SetUsername/index.tsx +++ b/packages/ui/src/pages/Continue/SetUsername/index.tsx @@ -1,25 +1,13 @@ -import { SignInIdentifier } from '@logto/schemas'; - import SecondaryPageWrapper from '@/components/SecondaryPageWrapper'; import { SetUsername as SetUsernameForm } from '@/containers/UsernameForm'; -import { useSieMethods } from '@/hooks/use-sie'; -import ErrorPage from '@/pages/ErrorPage'; -const SetUsername = () => { - const { signUpMethods } = useSieMethods(); - - if (!signUpMethods.includes(SignInIdentifier.Username)) { - return ; - } - - return ( - - - - ); -}; +const SetUsername = () => ( + + + +); export default SetUsername;