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;