diff --git a/packages/core/src/routes/well-known.ts b/packages/core/src/routes/well-known.ts index 8ef4650dc..886e3d251 100644 --- a/packages/core/src/routes/well-known.ts +++ b/packages/core/src/routes/well-known.ts @@ -37,6 +37,15 @@ export default function wellKnownRoutes(router: T, pr getLogtoConnectors(), ]); + const forgotPassword = { + sms: logtoConnectors.some( + ({ type, dbEntry: { enabled } }) => type === ConnectorType.Sms && enabled + ), + email: logtoConnectors.some( + ({ type, dbEntry: { enabled } }) => type === ConnectorType.Email && enabled + ), + }; + // Hard code AdminConsole sign-in methods settings. if (interaction?.params.client_id === adminConsoleApplicationId) { ctx.body = { @@ -48,6 +57,7 @@ export default function wellKnownRoutes(router: T, pr languageInfo: signInExperience.languageInfo, signInMode: (await hasActiveUsers()) ? SignInMode.SignIn : SignInMode.Register, socialConnectors: [], + forgotPassword, }; return next(); @@ -81,6 +91,7 @@ export default function wellKnownRoutes(router: T, pr 'demo_app.notification', autoDetect ? undefined : { lng: fallbackLanguage } ), + forgotPassword, }; return next(); @@ -89,14 +100,7 @@ export default function wellKnownRoutes(router: T, pr ctx.body = { ...signInExperience, socialConnectors, - forgotPassword: { - sms: logtoConnectors.some( - ({ type, dbEntry: { enabled } }) => type === ConnectorType.Sms && enabled - ), - email: logtoConnectors.some( - ({ type, dbEntry: { enabled } }) => type === ConnectorType.Email && enabled - ), - }, + forgotPassword, }; return next(); diff --git a/packages/phrases-ui/src/locales/en.ts b/packages/phrases-ui/src/locales/en.ts index a402d30bf..a683a43d3 100644 --- a/packages/phrases-ui/src/locales/en.ts +++ b/packages/phrases-ui/src/locales/en.ts @@ -30,6 +30,7 @@ const translation = { forgot_password: 'Forgot your password?', switch_to: 'Switch to {{method}}', sign_in_via_passcode: 'Sign in via verification code', + sign_in_via_password: 'Sign in via password', }, description: { email: 'email', @@ -41,7 +42,7 @@ const translation = { terms_of_use: 'Terms of Use', create_account: 'Create Account', or: 'or', - enter_passcode: 'The verification code has been sent to your {{address}}', + enter_passcode: 'The verification code has been sent to your {{address}} {{target}}', passcode_sent: 'The verification code has been resent', resend_after_seconds: 'Resend after {{seconds}} seconds', resend_passcode: 'Resend verification code', @@ -50,7 +51,8 @@ const translation = { 'The account with {{type}} {{value}} already exists, would you like to sign in?', sign_in_id_does_not_exists: 'The account with {{type}} {{value}} does not exist, would you like to create a new account?', - forgot_password_id_does_not_exits: 'The account with {{type}} {{value}} does not exist.', + sign_in_id_does_not_exists_alert: 'The account with {{type}} {{value}} does not exist.', + create_account_id_exists_alert: 'The account with {{type}} {{value}} already exists', bind_account_title: 'Link account', social_create_account: 'No account? You can create a new account and link.', social_bind_account: 'Already have an account? Sign in to link it with your social identity.', diff --git a/packages/phrases-ui/src/locales/fr.ts b/packages/phrases-ui/src/locales/fr.ts index 80636aa7a..4e99304cb 100644 --- a/packages/phrases-ui/src/locales/fr.ts +++ b/packages/phrases-ui/src/locales/fr.ts @@ -32,6 +32,7 @@ const translation = { forgot_password: 'Mot de passe oublié ?', switch_to: 'Passer au {{method}}', sign_in_via_passcode: 'Sign in via verification code', // UNTRANSLATED + sign_in_via_password: 'Sign in via password', // UNTRANSLATED }, description: { email: 'email', @@ -43,7 +44,7 @@ const translation = { terms_of_use: "Conditions d'utilisation", create_account: 'Créer un compte', or: 'ou', - enter_passcode: 'Le code a été envoyé à {{address}}', + enter_passcode: 'Le code a été envoyé à {{address}} {{target}}', passcode_sent: 'Le code a été renvoyé', resend_after_seconds: 'Renvoyer après {{seconds}} secondes', resend_passcode: 'Renvoyer le code', @@ -52,7 +53,8 @@ const translation = { 'Le compte avec {{type}} {{value}} existe déjà, voulez-vous vous connecter ?', sign_in_id_does_not_exists: "Le compte avec {{type}} {{value}} n'existe pas, voulez-vous créer un nouveau compte ?", - forgot_password_id_does_not_exits: 'The account with {{type}} {{value}} does not exist.', // UNTRANSLATED + sign_in_id_does_not_exists_alert: 'The account with {{type}} {{value}} does not exist.', // UNTRANSLATED + create_account_id_exists_alert: 'The account with {{type}} {{value}} already exists', // UNTRANSLATED bind_account_title: 'Lier le compte', social_create_account: 'Pas de compte ? Vous pouvez créer un nouveau compte et un lien.', social_bind_account: diff --git a/packages/phrases-ui/src/locales/ko.ts b/packages/phrases-ui/src/locales/ko.ts index 7abd09af0..5f0019c93 100644 --- a/packages/phrases-ui/src/locales/ko.ts +++ b/packages/phrases-ui/src/locales/ko.ts @@ -32,6 +32,7 @@ const translation = { forgot_password: '비밀번호를 잊어버리셨나요?', switch_to: 'Switch to {{method}}', // UNTRANSLATED sign_in_via_passcode: 'Sign in via verification code', // UNTRANSLATED + sign_in_via_password: 'Sign in via password', // UNTRANSLATED }, description: { email: '이메일', @@ -43,14 +44,15 @@ const translation = { terms_of_use: '이용약관', create_account: '계정 생성', or: '또는', - enter_passcode: '{{address}} 으로 비밀번호가 전송되었어요.', + enter_passcode: '{{address}} {{target}} 으로 비밀번호가 전송되었어요.', passcode_sent: '비밀번호가 재전송 되었습니다.', resend_after_seconds: '{{seconds}} 초 후에 재전송', resend_passcode: '비밀번호 재전송', continue_with: '계속하기', create_account_id_exists: '{{type}} {{value}} 계정이 이미 존재해요. 로그인하시겠어요?', sign_in_id_does_not_exists: '{type}} {{value}} 계정이 존재하지 않아요. 새로 만드시겠어요?', - forgot_password_id_does_not_exits: 'The account with {{type}} {{value}} does not exist.', // UNTRANSLATED + sign_in_id_does_not_exists_alert: 'The account with {{type}} {{value}} does not exist.', // UNTRANSLATED + create_account_id_exists_alert: 'The account with {{type}} {{value}} already exists', // UNTRANSLATED bind_account_title: '계정 연동', social_create_account: '계정이 없으신가요? 새로운 계정을 만들고 연동해보세요.', social_bind_account: '계정이 이미 있으신가요? 로그인하여 다른 계정과 연동해보세요.', diff --git a/packages/phrases-ui/src/locales/pt-pt.ts b/packages/phrases-ui/src/locales/pt-pt.ts index 7fc3ea200..87cab0aa1 100644 --- a/packages/phrases-ui/src/locales/pt-pt.ts +++ b/packages/phrases-ui/src/locales/pt-pt.ts @@ -32,6 +32,7 @@ const translation = { forgot_password: 'Esqueceu a password?', switch_to: 'Mudar para {{method}}', sign_in_via_passcode: 'Sign in via verification code', // UNTRANSLATED + sign_in_via_password: 'Sign in via password', // UNTRANSLATED }, description: { email: 'email', @@ -43,14 +44,15 @@ const translation = { terms_of_use: 'Termos de uso', create_account: 'Criar uma conta', or: 'ou', - enter_passcode: 'A senha foi enviada para o seu {{address}}', + enter_passcode: 'A senha foi enviada para o seu {{address}} {{target}}', passcode_sent: 'A senha foi reenviada', resend_after_seconds: 'Reenviar após {{seconds}} segundos', resend_passcode: 'Reenviar senha', continue_with: 'Continuar com', create_account_id_exists: 'A conta com {{type}} {{value}} já existe, gostaria de fazer login?', sign_in_id_does_not_exists: 'A conta com {{type}} {{value}} não existe, gostaria de criar uma?', - forgot_password_id_does_not_exits: 'The account with {{type}} {{value}} does not exist.', // UNTRANSLATED + sign_in_id_does_not_exists_alert: 'The account with {{type}} {{value}} does not exist.', // UNTRANSLATED + create_account_id_exists_alert: 'The account with {{type}} {{value}} already exists', // UNTRANSLATED bind_account_title: 'Agregar conta', social_create_account: 'Sem conta? Pode criar uma nova e agregar.', social_bind_account: 'Já tem uma conta? Faça login para agregar a sua identidade social.', diff --git a/packages/phrases-ui/src/locales/tr-tr.ts b/packages/phrases-ui/src/locales/tr-tr.ts index b0ea4efd8..69b3bef36 100644 --- a/packages/phrases-ui/src/locales/tr-tr.ts +++ b/packages/phrases-ui/src/locales/tr-tr.ts @@ -32,6 +32,7 @@ const translation = { forgot_password: 'Şifremi Unuttum?', switch_to: 'Switch to {{method}}', // UNTRANSLATED sign_in_via_passcode: 'Sign in via verification code', // UNTRANSLATED + sign_in_via_password: 'Sign in via password', // UNTRANSLATED }, description: { email: 'e-posta adresi', @@ -43,7 +44,7 @@ const translation = { terms_of_use: 'Kullanım Koşulları', create_account: 'Hesap Oluştur', or: 'veya', - enter_passcode: 'Kod {{address}}inize gönderildi.', + enter_passcode: 'Kod {{address}} {{target}} inize gönderildi.', passcode_sent: 'Kodunuz yeniden gönderildi.', resend_after_seconds: '{{seconds}} saniye sonra tekrar gönder', resend_passcode: 'Kodu Yeniden Gönder', @@ -51,7 +52,8 @@ const translation = { create_account_id_exists: '{{type}} {{value}} ile hesap mevcut, giriş yapmak ister misiniz?', sign_in_id_does_not_exists: '{{type}} {{value}} ile hesap mevcut değil, yeni bir hesap oluşturmak ister misiniz?', - forgot_password_id_does_not_exits: 'The account with {{type}} {{value}} does not exist.', // UNTRANSLATED + sign_in_id_does_not_exists_alert: 'The account with {{type}} {{value}} does not exist.', // UNTRANSLATED + create_account_id_exists_alert: 'The account with {{type}} {{value}} already exists', // UNTRANSLATED bind_account_title: 'Hesap bağla', social_create_account: 'Hesabınız yok mu? Yeni bir hesap ve bağlantı oluşturabilirsiniz.', social_bind_account: 'Hesabınız zaten var mı? Hesabınıza bağlanmak için giriş yapınız.', diff --git a/packages/phrases-ui/src/locales/zh-cn.ts b/packages/phrases-ui/src/locales/zh-cn.ts index 1e2bd6870..3b002b6e8 100644 --- a/packages/phrases-ui/src/locales/zh-cn.ts +++ b/packages/phrases-ui/src/locales/zh-cn.ts @@ -32,6 +32,7 @@ const translation = { forgot_password: '重置密码', switch_to: '切换到{{method}}', sign_in_via_passcode: 'Sign in via verification code', // UNTRANSLATED + sign_in_via_password: 'Sign in via password', // UNTRANSLATED }, description: { email: '邮箱', @@ -43,14 +44,15 @@ const translation = { terms_of_use: '使用条款', create_account: '创建帐号', or: '或', - enter_passcode: '验证码已经发送至你的{{ address }}', + enter_passcode: '验证码已经发送至你的{{ address }} {{target}}', passcode_sent: '验证码已经发送', resend_after_seconds: '在 {{ seconds }} 秒后重发', resend_passcode: '重发验证码', continue_with: '通过以下方式继续', create_account_id_exists: '{{ type }}为 {{ value }} 的帐号已存在，你要登录吗？', sign_in_id_does_not_exists: '{{ type }}为 {{ value }} 的帐号不存在，你要创建一个新帐号吗？', - forgot_password_id_does_not_exits: '{{ type }}为 {{ value }} 的帐号不存在。', + sign_in_id_does_not_exists_alert: '{{ type }}为 {{ value }} 的帐号不存在。', + create_account_id_exists_alert: '{{ type }}为 {{ value }} 的帐号已存在', bind_account_title: '绑定帐号', social_create_account: '没有帐号？你可以创建一个帐号并绑定。', social_bind_account: '已有帐号？登录以绑定社交身份。', diff --git a/packages/ui/src/apis/continue.test.ts b/packages/ui/src/apis/continue.test.ts new file mode 100644 index 000000000..02653081a --- /dev/null +++ b/packages/ui/src/apis/continue.test.ts @@ -0,0 +1,69 @@ +import ky from 'ky'; + +import { + continueWithPassword, + continueWithUsername, + continueWithEmail, + continueWithPhone, +} from './continue'; + +jest.mock('ky', () => ({ + extend: () => ky, + post: jest.fn(() => ({ + json: jest.fn(), + })), +})); + +describe('continue API', () => { + const mockKyPost = ky.post as jest.Mock; + + beforeEach(() => { + mockKyPost.mockReturnValueOnce({ + json: () => ({ + redirectTo: '/', + }), + }); + }); + + afterEach(() => { + mockKyPost.mockClear(); + }); + + it('continue with password', async () => { + await continueWithPassword('password'); + expect(ky.post).toBeCalledWith('/api/session/continue/password', { + json: { + password: 'password', + }, + }); + }); + + it('continue with username', async () => { + await continueWithUsername('username'); + expect(ky.post).toBeCalledWith('/api/session/continue/username', { + json: { + username: 'username', + }, + }); + }); + + it('continue with email', async () => { + await continueWithEmail('email'); + + expect(ky.post).toBeCalledWith('/api/session/continue/email', { + json: { + email: 'email', + }, + }); + }); + + it('continue with phone', async () => { + await continueWithPhone('phone'); + + expect(ky.post).toBeCalledWith('/api/session/continue/sms', { + json: { + phone: 'phone', + }, + }); + }); +}); diff --git a/packages/ui/src/apis/continue.ts b/packages/ui/src/apis/continue.ts new file mode 100644 index 000000000..8a4c385fc --- /dev/null +++ b/packages/ui/src/apis/continue.ts @@ -0,0 +1,32 @@ +import api from './api'; +import { bindSocialAccount } from './social'; + +type Response = { + redirectTo: string; +}; + +const continueApiPrefix = '/api/session/continue'; + +// Only bind with social after the sign-in bind password flow +export const continueWithPassword = async (password: string, socialToBind?: string) => { + const result = await api + .post(`${continueApiPrefix}/password`, { + json: { password }, + }) + .json(); + + if (result.redirectTo && socialToBind) { + await bindSocialAccount(socialToBind); + } + + return result; +}; + +export const continueWithUsername = async (username: string) => + api.post(`${continueApiPrefix}/username`, { json: { username } }).json(); + +export const continueWithEmail = async (email: string) => + api.post(`${continueApiPrefix}/email`, { json: { email } }).json(); + +export const continueWithPhone = async (phone: string) => + api.post(`${continueApiPrefix}/sms`, { json: { phone } }).json(); diff --git a/packages/ui/src/components/ForgotPasswordLink/index.tsx b/packages/ui/src/components/ForgotPasswordLink/index.tsx new file mode 100644 index 000000000..0b2a254c0 --- /dev/null +++ b/packages/ui/src/components/ForgotPasswordLink/index.tsx @@ -0,0 +1,19 @@ +import type { SignInIdentifier } from '@logto/schemas'; + +import TextLink from '@/components/TextLink'; +import { UserFlow } from '@/types'; + +type Props = { + method: SignInIdentifier.Email | SignInIdentifier.Sms; + className?: string; +}; + +const ForgotPasswordLink = ({ method, className }: Props) => ( + +); + +export default ForgotPasswordLink; diff --git a/packages/ui/src/containers/EmailForm/index.module.scss b/packages/ui/src/containers/EmailForm/index.module.scss index f73c1471a..b7d9e3406 100644 --- a/packages/ui/src/containers/EmailForm/index.module.scss +++ b/packages/ui/src/containers/EmailForm/index.module.scss @@ -14,7 +14,8 @@ } .switch { - display: block; + width: auto; + align-self: start; } .formErrors { diff --git a/packages/ui/src/containers/EmailPassword/index.module.scss b/packages/ui/src/containers/EmailPassword/index.module.scss index fe937e867..a2028eed0 100644 --- a/packages/ui/src/containers/EmailPassword/index.module.scss +++ b/packages/ui/src/containers/EmailPassword/index.module.scss @@ -8,10 +8,16 @@ } .inputField, + .link, .terms { margin-bottom: _.unit(4); } + .link { + width: auto; + align-self: start; + } + .formErrors { margin-top: _.unit(-2); margin-bottom: _.unit(4); diff --git a/packages/ui/src/containers/EmailPassword/index.test.tsx b/packages/ui/src/containers/EmailPassword/index.test.tsx index 758f12ae4..2eb143706 100644 --- a/packages/ui/src/containers/EmailPassword/index.test.tsx +++ b/packages/ui/src/containers/EmailPassword/index.test.tsx @@ -1,5 +1,6 @@ import { fireEvent, waitFor } from '@testing-library/react'; import { act } from 'react-dom/test-utils'; +import { MemoryRouter } from 'react-router-dom'; import renderWithPageContext from '@/__mocks__/RenderWithPageContext'; import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider'; @@ -28,11 +29,14 @@ describe('', () => { test('render with terms settings enabled', () => { const { queryByText } = renderWithPageContext( - - - + + + + + ); expect(queryByText('description.agree_with_terms')).not.toBeNull(); + expect(queryByText('action.forgot_password')).not.toBeNull(); }); test('required inputs with error message', () => { @@ -64,11 +68,13 @@ describe('', () => { test('should show terms confirm modal', async () => { const { queryByText, getByText, container } = renderWithPageContext( - - - - - + + + + + + + ); const submitButton = getByText('action.sign_in'); @@ -94,11 +100,13 @@ describe('', () => { test('should show terms detail modal', async () => { const { getByText, queryByText, container, queryByRole } = renderWithPageContext( - - - - - + + + + + + + ); const submitButton = getByText('action.sign_in'); @@ -135,9 +143,11 @@ describe('', () => { test('submit form', async () => { const { getByText, container } = renderWithPageContext( - - - + + + + + ); const submitButton = getByText('action.sign_in'); diff --git a/packages/ui/src/containers/EmailPassword/index.tsx b/packages/ui/src/containers/EmailPassword/index.tsx index 0373843d9..25619ca44 100644 --- a/packages/ui/src/containers/EmailPassword/index.tsx +++ b/packages/ui/src/containers/EmailPassword/index.tsx @@ -5,10 +5,12 @@ import { useTranslation } from 'react-i18next'; import Button from '@/components/Button'; import ErrorMessage from '@/components/ErrorMessage'; +import ForgotPasswordLink from '@/components/ForgotPasswordLink'; import Input, { PasswordInput } from '@/components/Input'; import TermsOfUse from '@/containers/TermsOfUse'; import useForm from '@/hooks/use-form'; import usePasswordSignIn from '@/hooks/use-password-sign-in'; +import { useForgotPasswordSettings } from '@/hooks/use-sie'; import useTerms from '@/hooks/use-terms'; import { emailValidation, requiredValidation } from '@/utils/field-validations'; @@ -34,6 +36,7 @@ const EmailPassword = ({ className, autoFocus }: Props) => { const { t } = useTranslation(); const { termsValidation } = useTerms(); const { errorMessage, clearErrorMessage, onSubmit } = usePasswordSignIn(SignInIdentifier.Email); + const { isForgotPasswordEnabled, email } = useForgotPasswordSettings(); const { fieldValue, setFieldValue, register, validateForm } = useForm(defaultState); @@ -86,6 +89,13 @@ const EmailPassword = ({ className, autoFocus }: Props) => { {...register('password', (value) => requiredValidation('password', value))} /> + {isForgotPasswordEnabled && ( + + )} + {errorMessage && {errorMessage}} diff --git a/packages/ui/src/containers/PasscodeValidation/PasswordSignInLink.tsx b/packages/ui/src/containers/PasscodeValidation/PasswordSignInLink.tsx new file mode 100644 index 000000000..2708349a0 --- /dev/null +++ b/packages/ui/src/containers/PasscodeValidation/PasswordSignInLink.tsx @@ -0,0 +1,24 @@ +import { SignInIdentifier } from '@logto/schemas'; + +import TextLink from '@/components/TextLink'; +import { UserFlow } from '@/types'; + +type Props = { + className?: string; + method: SignInIdentifier.Email | SignInIdentifier.Sms; + target: string; +}; + +const PasswordSignInLink = ({ className, method, target }: Props) => { + return ( + + ); +}; + +export default PasswordSignInLink; diff --git a/packages/ui/src/containers/PasscodeValidation/index.module.scss b/packages/ui/src/containers/PasscodeValidation/index.module.scss index b77c96ed0..03b215dc2 100644 --- a/packages/ui/src/containers/PasscodeValidation/index.module.scss +++ b/packages/ui/src/containers/PasscodeValidation/index.module.scss @@ -22,6 +22,12 @@ color: var(--color-brand-default); } } + + .link { + margin-top: _.unit(3); + width: auto; + align-self: start; + } } :global(body.mobile) { diff --git a/packages/ui/src/containers/PasscodeValidation/index.test.tsx b/packages/ui/src/containers/PasscodeValidation/index.test.tsx index 219212d4a..35978c4ac 100644 --- a/packages/ui/src/containers/PasscodeValidation/index.test.tsx +++ b/packages/ui/src/containers/PasscodeValidation/index.test.tsx @@ -2,6 +2,12 @@ import { SignInIdentifier } from '@logto/schemas'; import { act, fireEvent, waitFor } from '@testing-library/react'; import renderWithPageContext from '@/__mocks__/RenderWithPageContext'; +import { + verifyForgotPasswordEmailPasscode, + verifyForgotPasswordSmsPasscode, +} from '@/apis/forgot-password'; +import { verifyRegisterEmailPasscode, verifyRegisterSmsPasscode } from '@/apis/register'; +import { verifySignInEmailPasscode, verifySignInSmsPasscode } from '@/apis/sign-in'; import { UserFlow } from '@/types'; import PasscodeValidation from '.'; @@ -9,7 +15,6 @@ import PasscodeValidation from '.'; jest.useFakeTimers(); const sendPasscodeApi = jest.fn(); -const verifyPasscodeApi = jest.fn(); const mockedNavigate = jest.fn(); @@ -20,11 +25,26 @@ jest.mock('react-router-dom', () => ({ jest.mock('@/apis/utils', () => ({ getSendPasscodeApi: () => sendPasscodeApi, - getVerifyPasscodeApi: () => verifyPasscodeApi, +})); + +jest.mock('@/apis/sign-in', () => ({ + verifySignInEmailPasscode: jest.fn(), + verifySignInSmsPasscode: jest.fn(), +})); + +jest.mock('@/apis/register', () => ({ + verifyRegisterEmailPasscode: jest.fn(), + verifyRegisterSmsPasscode: jest.fn(), +})); + +jest.mock('@/apis/forgot-password', () => ({ + verifyForgotPasswordEmailPasscode: jest.fn(), + verifyForgotPasswordSmsPasscode: jest.fn(), })); describe('', () => { const email = 'foo@logto.io'; + const phone = '18573333333'; const originalLocation = window.location; beforeAll(() => { @@ -75,68 +95,170 @@ describe('', () => { expect(sendPasscodeApi).toBeCalledWith(email); }); - it('fire validate passcode event', async () => { - const { container } = renderWithPageContext( - - ); - const inputs = container.querySelectorAll('input'); + describe('sign-in', () => { + it('fire email sign-in validate passcode event', async () => { + (verifySignInEmailPasscode as jest.Mock).mockImplementationOnce(() => ({ + redirectTo: 'foo.com', + })); + + const { container } = renderWithPageContext( + + ); + const inputs = container.querySelectorAll('input'); - await waitFor(() => { for (const input of inputs) { act(() => { fireEvent.input(input, { target: { value: '1' } }); }); } - expect(verifyPasscodeApi).toBeCalledWith(email, '111111', undefined); + await waitFor(() => { + expect(verifySignInEmailPasscode).toBeCalledWith(email, '111111', undefined); + }); + + await waitFor(() => { + expect(window.location.replace).toBeCalledWith('foo.com'); + }); }); - }); - it('should redirect with success redirectUri response', async () => { - verifyPasscodeApi.mockImplementationOnce(() => ({ redirectTo: 'foo.com' })); + it('fire sms sign-in validate passcode event', async () => { + (verifySignInSmsPasscode as jest.Mock).mockImplementationOnce(() => ({ + redirectTo: 'foo.com', + })); - const { container } = renderWithPageContext( - - ); + const { container } = renderWithPageContext( + + ); + const inputs = container.querySelectorAll('input'); - const inputs = container.querySelectorAll('input'); - - await waitFor(() => { for (const input of inputs) { act(() => { fireEvent.input(input, { target: { value: '1' } }); }); } - expect(verifyPasscodeApi).toBeCalledWith(email, '111111', undefined); - }); + await waitFor(() => { + expect(verifySignInSmsPasscode).toBeCalledWith(phone, '111111', undefined); + }); - await waitFor(() => { - expect(window.location.replace).toBeCalledWith('foo.com'); + await waitFor(() => { + expect(window.location.replace).toBeCalledWith('foo.com'); + }); }); }); - it('should redirect to reset password page if the flow is forgot-password', async () => { - verifyPasscodeApi.mockImplementationOnce(() => ({ success: true })); + describe('register', () => { + it('fire email register validate passcode event', async () => { + (verifyRegisterEmailPasscode as jest.Mock).mockImplementationOnce(() => ({ + redirectTo: 'foo.com', + })); + + const { container } = renderWithPageContext( + + ); + const inputs = container.querySelectorAll('input'); + + for (const input of inputs) { + act(() => { + fireEvent.input(input, { target: { value: '1' } }); + }); + } + + await waitFor(() => { + expect(verifyRegisterEmailPasscode).toBeCalledWith(email, '111111'); + }); + + await waitFor(() => { + expect(window.location.replace).toBeCalledWith('foo.com'); + }); + }); + + it('fire sms register validate passcode event', async () => { + (verifyRegisterSmsPasscode as jest.Mock).mockImplementationOnce(() => ({ + redirectTo: 'foo.com', + })); + + const { container } = renderWithPageContext( + + ); + const inputs = container.querySelectorAll('input'); + + for (const input of inputs) { + act(() => { + fireEvent.input(input, { target: { value: '1' } }); + }); + } + + await waitFor(() => { + expect(verifyRegisterSmsPasscode).toBeCalledWith(phone, '111111'); + }); + + await waitFor(() => { + expect(window.location.replace).toBeCalledWith('foo.com'); + }); + }); + }); + + describe('forgot password', () => { + it('fire email forgot-password validate passcode event', async () => { + (verifyForgotPasswordEmailPasscode as jest.Mock).mockImplementationOnce(() => ({ + success: true, + })); + + const { container } = renderWithPageContext( + + ); + + const inputs = container.querySelectorAll('input'); + + for (const input of inputs) { + act(() => { + fireEvent.input(input, { target: { value: '1' } }); + }); + } + + await waitFor(() => { + expect(verifyForgotPasswordEmailPasscode).toBeCalledWith(email, '111111'); + }); + + await waitFor(() => { + expect(window.location.replace).not.toBeCalled(); + expect(mockedNavigate).toBeCalledWith('/forgot-password/reset', { replace: true }); + }); + }); + }); + + it('fire Sms forgot-password validate passcode event', async () => { + (verifyForgotPasswordSmsPasscode as jest.Mock).mockImplementationOnce(() => ({ + success: true, + })); const { container } = renderWithPageContext( ); const inputs = container.querySelectorAll('input'); - await waitFor(() => { - for (const input of inputs) { - act(() => { - fireEvent.input(input, { target: { value: '1' } }); - }); - } + for (const input of inputs) { + act(() => { + fireEvent.input(input, { target: { value: '1' } }); + }); + } - expect(verifyPasscodeApi).toBeCalledWith(email, '111111', undefined); + await waitFor(() => { + expect(verifyForgotPasswordSmsPasscode).toBeCalledWith(phone, '111111'); }); await waitFor(() => { diff --git a/packages/ui/src/containers/PasscodeValidation/index.tsx b/packages/ui/src/containers/PasscodeValidation/index.tsx index 307f13647..3a61b3f15 100644 --- a/packages/ui/src/containers/PasscodeValidation/index.tsx +++ b/packages/ui/src/containers/PasscodeValidation/index.tsx @@ -1,114 +1,54 @@ import type { SignInIdentifier } from '@logto/schemas'; import classNames from 'classnames'; -import { useState, useEffect, useContext, useCallback, useMemo } from 'react'; +import { useState, useEffect, useCallback } from 'react'; import { useTranslation, Trans } from 'react-i18next'; -import { useNavigate } from 'react-router-dom'; -import { useTimer } from 'react-timer-hook'; -import { getSendPasscodeApi, getVerifyPasscodeApi } from '@/apis/utils'; import Passcode, { defaultLength } from '@/components/Passcode'; import TextLink from '@/components/TextLink'; -import type { ErrorHandlers } from '@/hooks/use-api'; -import useApi from '@/hooks/use-api'; -import { PageContext } from '@/hooks/use-page-context'; -import type { UserFlow } from '@/types'; -import { SearchParameters } from '@/types'; -import { getSearchParameters } from '@/utils'; +import { UserFlow } from '@/types'; +import PasswordSignInLink from './PasswordSignInLink'; import * as styles from './index.module.scss'; -import usePasscodeValidationErrorHandler from './use-passcode-validation-error-handler'; +import useResendPasscode from './use-resend-passcode'; +import { getPasscodeValidationHook } from './utils'; type Props = { type: UserFlow; method: SignInIdentifier.Email | SignInIdentifier.Sms; target: string; + hasPasswordButton?: boolean; className?: string; }; -export const timeRange = 59; - -const getTimeout = () => { - const now = new Date(); - now.setSeconds(now.getSeconds() + timeRange); - - return now; -}; - -const PasscodeValidation = ({ type, method, className, target }: Props) => { +const PasscodeValidation = ({ type, method, className, hasPasswordButton, target }: Props) => { const [code, setCode] = useState([]); - const [error, setError] = useState(); - const { setToast } = useContext(PageContext); const { t } = useTranslation(); - const navigate = useNavigate(); + const usePasscodeValidation = getPasscodeValidationHook(type, method); - const { seconds, isRunning, restart } = useTimer({ - autoStart: true, - expiryTimestamp: getTimeout(), - }); + const errorCallback = useCallback(() => { + setCode([]); + }, []); - // Get the flow specific error handler hook - const { errorHandler } = usePasscodeValidationErrorHandler(type, method, target); - - const verifyPasscodeErrorHandlers: ErrorHandlers = useMemo( - () => ({ - ...errorHandler, - 'passcode.expired': (error) => { - setError(error.message); - }, - 'passcode.code_mismatch': (error) => { - setError(error.message); - }, - callback: () => { - setCode([]); - }, - }), - [errorHandler] + const { errorMessage, clearErrorMessage, onSubmit } = usePasscodeValidation( + target, + errorCallback ); - const { result: verifyPasscodeResult, run: verifyPassCode } = useApi( - getVerifyPasscodeApi(type, method), - verifyPasscodeErrorHandlers - ); - - const { run: sendPassCode } = useApi(getSendPasscodeApi(type, method)); - - const resendPasscodeHandler = useCallback(async () => { - setError(undefined); - - const result = await sendPassCode(target); - - if (result) { - setToast(t('description.passcode_sent')); - restart(getTimeout(), true); - } - }, [restart, sendPassCode, setToast, t, target]); + const { seconds, isRunning, onResendPasscode } = useResendPasscode(type, method, target); useEffect(() => { if (code.length === defaultLength && code.every(Boolean)) { - const socialToBind = getSearchParameters(location.search, SearchParameters.bindWithSocial); - void verifyPassCode(target, code.join(''), socialToBind); + void onSubmit(code.join('')); } - }, [code, target, verifyPassCode]); - - useEffect(() => { - if (verifyPasscodeResult?.redirectTo) { - window.location.replace(verifyPasscodeResult.redirectTo); - - return; - } - - if (verifyPasscodeResult && type === 'forgot-password') { - navigate('/forgot-password/reset', { replace: true }); - } - }, [navigate, type, verifyPasscodeResult]); + }, [code, onSubmit, target]); return (
{isRunning ? ( @@ -118,7 +58,16 @@ const PasscodeValidation = ({ type, method, className, target }: Props) => { ) : ( - + { + clearErrorMessage(); + void onResendPasscode(); + }} + /> + )} + {type === UserFlow.signIn && hasPasswordButton && ( + )} ); diff --git a/packages/ui/src/containers/PasscodeValidation/use-forgot-password-email-passcode-validation.ts b/packages/ui/src/containers/PasscodeValidation/use-forgot-password-email-passcode-validation.ts new file mode 100644 index 000000000..c66fb6c08 --- /dev/null +++ b/packages/ui/src/containers/PasscodeValidation/use-forgot-password-email-passcode-validation.ts @@ -0,0 +1,54 @@ +import { SignInIdentifier } from '@logto/schemas'; +import { useMemo, useEffect, useCallback } from 'react'; +import { useNavigate } from 'react-router-dom'; + +import { verifyForgotPasswordEmailPasscode } from '@/apis/forgot-password'; +import type { ErrorHandlers } from '@/hooks/use-api'; +import useApi from '@/hooks/use-api'; +import { UserFlow } from '@/types'; + +import useIdentifierErrorAlert from './use-identifier-error-alert'; +import useSharedErrorHandler from './use-shared-error-handler'; + +const useForgotPasswordEmailPasscodeValidation = (email: string, errorCallback?: () => void) => { + const navigate = useNavigate(); + const { sharedErrorHandlers, errorMessage, clearErrorMessage } = useSharedErrorHandler(); + + const identifierNotExistErrorHandler = useIdentifierErrorAlert( + UserFlow.forgotPassword, + SignInIdentifier.Email, + email + ); + + const errorHandlers: ErrorHandlers = useMemo( + () => ({ + 'user.email_not_exists': identifierNotExistErrorHandler, + ...sharedErrorHandlers, + callback: errorCallback, + }), + [identifierNotExistErrorHandler, sharedErrorHandlers, errorCallback] + ); + + const { result, run: verifyPasscode } = useApi(verifyForgotPasswordEmailPasscode, errorHandlers); + + const onSubmit = useCallback( + async (code: string) => { + return verifyPasscode(email, code); + }, + [email, verifyPasscode] + ); + + useEffect(() => { + if (result) { + navigate(`/${UserFlow.forgotPassword}/reset`, { replace: true }); + } + }, [navigate, result]); + + return { + errorMessage, + clearErrorMessage, + onSubmit, + }; +}; + +export default useForgotPasswordEmailPasscodeValidation; diff --git a/packages/ui/src/containers/PasscodeValidation/use-forgot-password-sms-passcode-validation.ts b/packages/ui/src/containers/PasscodeValidation/use-forgot-password-sms-passcode-validation.ts new file mode 100644 index 000000000..685f67a97 --- /dev/null +++ b/packages/ui/src/containers/PasscodeValidation/use-forgot-password-sms-passcode-validation.ts @@ -0,0 +1,53 @@ +import { SignInIdentifier } from '@logto/schemas'; +import { useMemo, useEffect, useCallback } from 'react'; +import { useNavigate } from 'react-router-dom'; + +import { verifyForgotPasswordSmsPasscode } from '@/apis/forgot-password'; +import type { ErrorHandlers } from '@/hooks/use-api'; +import useApi from '@/hooks/use-api'; +import { UserFlow } from '@/types'; + +import useIdentifierErrorAlert from './use-identifier-error-alert'; +import useSharedErrorHandler from './use-shared-error-handler'; + +const useForgotPasswordSmsPasscodeValidation = (phone: string, errorCallback?: () => void) => { + const navigate = useNavigate(); + const { sharedErrorHandlers, errorMessage, clearErrorMessage } = useSharedErrorHandler(); + const identifierNotExistErrorHandler = useIdentifierErrorAlert( + UserFlow.forgotPassword, + SignInIdentifier.Sms, + phone + ); + + const errorHandlers: ErrorHandlers = useMemo( + () => ({ + 'user.phone_not_exists': identifierNotExistErrorHandler, + ...sharedErrorHandlers, + callback: errorCallback, + }), + [sharedErrorHandlers, errorCallback, identifierNotExistErrorHandler] + ); + + const { result, run: verifyPasscode } = useApi(verifyForgotPasswordSmsPasscode, errorHandlers); + + const onSubmit = useCallback( + async (code: string) => { + return verifyPasscode(phone, code); + }, + [phone, verifyPasscode] + ); + + useEffect(() => { + if (result) { + navigate(`/${UserFlow.forgotPassword}/reset`, { replace: true }); + } + }, [navigate, result]); + + return { + errorMessage, + clearErrorMessage, + onSubmit, + }; +}; + +export default useForgotPasswordSmsPasscodeValidation; diff --git a/packages/ui/src/containers/PasscodeValidation/use-forgot-password-with-email-error-handler.ts b/packages/ui/src/containers/PasscodeValidation/use-forgot-password-with-email-error-handler.ts deleted file mode 100644 index 1e5f3a19f..000000000 --- a/packages/ui/src/containers/PasscodeValidation/use-forgot-password-with-email-error-handler.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { useCallback, useMemo } from 'react'; -import { useTranslation } from 'react-i18next'; -import { useNavigate } from 'react-router-dom'; - -import type { ErrorHandlers } from '@/hooks/use-api'; -import { useConfirmModal } from '@/hooks/use-confirm-modal'; - -const useForgotPasswordWithEmailErrorHandler = (email: string) => { - const { t } = useTranslation(); - const { show } = useConfirmModal(); - const navigate = useNavigate(); - - const emailNotExistForgotPasswordHandler = useCallback(async () => { - await show({ - type: 'alert', - ModalContent: t('description.forgot_password_id_does_not_exits', { - type: t(`description.email`), - value: email, - }), - cancelText: 'action.got_it', - }); - navigate(-1); - }, [navigate, show, t, email]); - - const errorHandler = useMemo( - () => ({ - 'user.email_not_exists': emailNotExistForgotPasswordHandler, - }), - [emailNotExistForgotPasswordHandler] - ); - - return { - errorHandler, - }; -}; - -export default useForgotPasswordWithEmailErrorHandler; diff --git a/packages/ui/src/containers/PasscodeValidation/use-forgot-password-with-sms-error-handler.ts b/packages/ui/src/containers/PasscodeValidation/use-forgot-password-with-sms-error-handler.ts deleted file mode 100644 index cf4b28c79..000000000 --- a/packages/ui/src/containers/PasscodeValidation/use-forgot-password-with-sms-error-handler.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { useCallback, useMemo } from 'react'; -import { useTranslation } from 'react-i18next'; -import { useNavigate } from 'react-router-dom'; - -import type { ErrorHandlers } from '@/hooks/use-api'; -import { useConfirmModal } from '@/hooks/use-confirm-modal'; -import { formatPhoneNumberWithCountryCallingCode } from '@/utils/country-code'; - -const useForgotPasswordWithSmsErrorHandler = (phone: string) => { - const { t } = useTranslation(); - const { show } = useConfirmModal(); - const navigate = useNavigate(); - - const phoneNotExistForgotPasswordHandler = useCallback(async () => { - await show({ - type: 'alert', - ModalContent: t('description.forgot_password_id_does_not_exits', { - type: t(`description.phone_number`), - value: formatPhoneNumberWithCountryCallingCode(phone), - }), - cancelText: 'action.got_it', - }); - navigate(-1); - }, [navigate, show, t, phone]); - - const errorHandler = useMemo( - () => ({ - 'user.phone_not_exists': phoneNotExistForgotPasswordHandler, - }), - [phoneNotExistForgotPasswordHandler] - ); - - return { - errorHandler, - }; -}; - -export default useForgotPasswordWithSmsErrorHandler; diff --git a/packages/ui/src/containers/PasscodeValidation/use-identifier-error-alert.ts b/packages/ui/src/containers/PasscodeValidation/use-identifier-error-alert.ts new file mode 100644 index 000000000..9c3c4911f --- /dev/null +++ b/packages/ui/src/containers/PasscodeValidation/use-identifier-error-alert.ts @@ -0,0 +1,37 @@ +import { SignInIdentifier } from '@logto/schemas'; +import { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useNavigate } from 'react-router-dom'; + +import { useConfirmModal } from '@/hooks/use-confirm-modal'; +import { UserFlow } from '@/types'; + +const useIdentifierErrorAlert = ( + flow: UserFlow, + method: SignInIdentifier.Email | SignInIdentifier.Sms, + value: string +) => { + const { show } = useConfirmModal(); + const navigate = useNavigate(); + const { t } = useTranslation(); + + // Have to wrap up in a useCallback hook otherwise the handler updates on every cycle + return useCallback(async () => { + await show({ + type: 'alert', + ModalContent: t( + flow === UserFlow.register + ? 'description.create_account_id_exists_alert' + : 'description.sign_in_id_does_not_exists_alert', + { + type: t(`description.${method === SignInIdentifier.Email ? 'email' : 'phone_number'}`), + value, + } + ), + cancelText: 'action.got_it', + }); + navigate(-1); + }, [flow, method, navigate, show, t, value]); +}; + +export default useIdentifierErrorAlert; diff --git a/packages/ui/src/containers/PasscodeValidation/use-passcode-validation-error-handler.ts b/packages/ui/src/containers/PasscodeValidation/use-passcode-validation-error-handler.ts deleted file mode 100644 index 9bb5dda9e..000000000 --- a/packages/ui/src/containers/PasscodeValidation/use-passcode-validation-error-handler.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { UserFlow } from '@/types'; - -import useForgotPasswordWithEmailErrorHandler from './use-forgot-password-with-email-error-handler'; -import useForgotPasswordWithSmsErrorHandler from './use-forgot-password-with-sms-error-handler'; -import useRegisterWithSmsErrorHandler from './use-register-with-sms-error-handler'; -import useSignInWithEmailErrorHandler from './use-sign-in-with-email-error-handler'; -import useSignInWithSmsErrorHandler from './use-sign-in-with-sms-error-handler'; -import useRegisterWithEmailErrorHandler from './user-register-with-email-error-handler'; - -type Method = 'email' | 'sms'; - -const getPasscodeValidationErrorHandlersByFlowAndMethod = (flow: UserFlow, method: Method) => { - if (flow === UserFlow.signIn && method === 'email') { - return useSignInWithEmailErrorHandler; - } - - if (flow === UserFlow.signIn && method === 'sms') { - return useSignInWithSmsErrorHandler; - } - - if (flow === UserFlow.register && method === 'email') { - return useRegisterWithEmailErrorHandler; - } - - if (flow === UserFlow.register && method === 'sms') { - return useRegisterWithSmsErrorHandler; - } - - if (flow === UserFlow.forgotPassword && method === 'email') { - return useForgotPasswordWithEmailErrorHandler; - } - - return useForgotPasswordWithSmsErrorHandler; -}; - -const usePasscodeValidationErrorHandler = (type: UserFlow, method: Method, target: string) => { - const useFlowErrorHandler = getPasscodeValidationErrorHandlersByFlowAndMethod(type, method); - const { errorHandler } = useFlowErrorHandler(target); - - return { errorHandler }; -}; - -export default usePasscodeValidationErrorHandler; diff --git a/packages/ui/src/containers/PasscodeValidation/use-register-with-email-passcode-validation.ts b/packages/ui/src/containers/PasscodeValidation/use-register-with-email-passcode-validation.ts new file mode 100644 index 000000000..17e35ced0 --- /dev/null +++ b/packages/ui/src/containers/PasscodeValidation/use-register-with-email-passcode-validation.ts @@ -0,0 +1,95 @@ +import { SignInIdentifier, SignInMode } from '@logto/schemas'; +import { useMemo, useCallback, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useNavigate } from 'react-router-dom'; + +import { verifyRegisterEmailPasscode } from '@/apis/register'; +import { signInWithEmail } from '@/apis/sign-in'; +import type { ErrorHandlers } from '@/hooks/use-api'; +import useApi from '@/hooks/use-api'; +import { useConfirmModal } from '@/hooks/use-confirm-modal'; +import { useSieMethods } from '@/hooks/use-sie'; +import { UserFlow } from '@/types'; + +import useIdentifierErrorAlert from './use-identifier-error-alert'; +import useSharedErrorHandler from './use-shared-error-handler'; + +const useRegisterWithEmailPasscodeValidation = (email: string, errorCallback?: () => void) => { + const { t } = useTranslation(); + const { show } = useConfirmModal(); + const navigate = useNavigate(); + const { errorMessage, clearErrorMessage, sharedErrorHandlers } = useSharedErrorHandler(); + + const { signInMode } = useSieMethods(); + + const { run: signInWithEmailAsync } = useApi(signInWithEmail); + + const identifierExistErrorHandler = useIdentifierErrorAlert( + UserFlow.register, + SignInIdentifier.Email, + email + ); + + const emailExistSignInErrorHandler = useCallback(async () => { + const [confirm] = await show({ + confirmText: 'action.sign_in', + ModalContent: t('description.create_account_id_exists', { + type: t(`description.email`), + value: email, + }), + }); + + if (!confirm) { + navigate(-1); + + return; + } + + const result = await signInWithEmailAsync(); + + if (result?.redirectTo) { + window.location.replace(result.redirectTo); + } + }, [email, navigate, show, signInWithEmailAsync, t]); + + const errorHandlers = useMemo( + () => ({ + 'user.email_exists_register': + signInMode === SignInMode.Register + ? identifierExistErrorHandler + : emailExistSignInErrorHandler, + ...sharedErrorHandlers, + callback: errorCallback, + }), + [ + emailExistSignInErrorHandler, + errorCallback, + identifierExistErrorHandler, + sharedErrorHandlers, + signInMode, + ] + ); + + const { result, run: verifyPasscode } = useApi(verifyRegisterEmailPasscode, errorHandlers); + + const onSubmit = useCallback( + async (code: string) => { + return verifyPasscode(email, code); + }, + [email, verifyPasscode] + ); + + useEffect(() => { + if (result?.redirectTo) { + window.location.replace(result.redirectTo); + } + }, [result]); + + return { + errorMessage, + clearErrorMessage, + onSubmit, + }; +}; + +export default useRegisterWithEmailPasscodeValidation; diff --git a/packages/ui/src/containers/PasscodeValidation/use-register-with-sms-error-handler.ts b/packages/ui/src/containers/PasscodeValidation/use-register-with-sms-error-handler.ts deleted file mode 100644 index af70f2323..000000000 --- a/packages/ui/src/containers/PasscodeValidation/use-register-with-sms-error-handler.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { useCallback, useMemo } from 'react'; -import { useTranslation } from 'react-i18next'; -import { useNavigate } from 'react-router-dom'; - -import { signInWithSms } from '@/apis/sign-in'; -import type { ErrorHandlers } from '@/hooks/use-api'; -import useApi from '@/hooks/use-api'; -import { useConfirmModal } from '@/hooks/use-confirm-modal'; -import { formatPhoneNumberWithCountryCallingCode } from '@/utils/country-code'; - -const useRegisterWithSmsErrorHandler = (phone: string) => { - const { t } = useTranslation(); - const { show } = useConfirmModal(); - const navigate = useNavigate(); - - const { run: signInWithSmsAsync } = useApi(signInWithSms); - - const phoneExistRegisterHandler = useCallback(async () => { - const [confirm] = await show({ - confirmText: 'action.sign_in', - ModalContent: t('description.create_account_id_exists', { - type: t(`description.phone_number`), - value: formatPhoneNumberWithCountryCallingCode(phone), - }), - }); - - if (!confirm) { - navigate(-1); - - return; - } - - const result = await signInWithSmsAsync(); - - if (result?.redirectTo) { - window.location.replace(result.redirectTo); - } - }, [navigate, phone, show, signInWithSmsAsync, t]); - - const errorHandler = useMemo( - () => ({ - 'user.phone_exists_register': async () => { - await phoneExistRegisterHandler(); - }, - }), - [phoneExistRegisterHandler] - ); - - return { - errorHandler, - }; -}; - -export default useRegisterWithSmsErrorHandler; diff --git a/packages/ui/src/containers/PasscodeValidation/use-register-with-sms-passcode-validation.ts b/packages/ui/src/containers/PasscodeValidation/use-register-with-sms-passcode-validation.ts new file mode 100644 index 000000000..293793635 --- /dev/null +++ b/packages/ui/src/containers/PasscodeValidation/use-register-with-sms-passcode-validation.ts @@ -0,0 +1,95 @@ +import { SignInIdentifier, SignInMode } from '@logto/schemas'; +import { useMemo, useCallback, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useNavigate } from 'react-router-dom'; + +import { verifyRegisterSmsPasscode } from '@/apis/register'; +import { signInWithSms } from '@/apis/sign-in'; +import type { ErrorHandlers } from '@/hooks/use-api'; +import useApi from '@/hooks/use-api'; +import { useConfirmModal } from '@/hooks/use-confirm-modal'; +import { useSieMethods } from '@/hooks/use-sie'; +import { UserFlow } from '@/types'; +import { formatPhoneNumberWithCountryCallingCode } from '@/utils/country-code'; + +import useIdentifierErrorAlert from './use-identifier-error-alert'; +import useSharedErrorHandler from './use-shared-error-handler'; + +const useRegisterWithSmsPasscodeValidation = (phone: string, errorCallback?: () => void) => { + const { t } = useTranslation(); + const { show } = useConfirmModal(); + const navigate = useNavigate(); + const { errorMessage, clearErrorMessage, sharedErrorHandlers } = useSharedErrorHandler(); + const { signInMode } = useSieMethods(); + + const { run: signInWithSmsAsync } = useApi(signInWithSms); + + const identifierExistErrorHandler = useIdentifierErrorAlert( + UserFlow.register, + SignInIdentifier.Sms, + formatPhoneNumberWithCountryCallingCode(phone) + ); + + const phoneExistSignInErrorHandler = useCallback(async () => { + const [confirm] = await show({ + confirmText: 'action.sign_in', + ModalContent: t('description.create_account_id_exists', { + type: t(`description.phone_number`), + value: phone, + }), + }); + + if (!confirm) { + navigate(-1); + + return; + } + + const result = await signInWithSmsAsync(); + + if (result?.redirectTo) { + window.location.replace(result.redirectTo); + } + }, [phone, navigate, show, signInWithSmsAsync, t]); + + const errorHandlers = useMemo( + () => ({ + 'user.phone_exists_register': + signInMode === SignInMode.Register + ? identifierExistErrorHandler + : phoneExistSignInErrorHandler, + ...sharedErrorHandlers, + callback: errorCallback, + }), + [ + phoneExistSignInErrorHandler, + errorCallback, + identifierExistErrorHandler, + sharedErrorHandlers, + signInMode, + ] + ); + + const { result, run: verifyPasscode } = useApi(verifyRegisterSmsPasscode, errorHandlers); + + useEffect(() => { + if (result?.redirectTo) { + window.location.replace(result.redirectTo); + } + }, [result]); + + const onSubmit = useCallback( + async (code: string) => { + return verifyPasscode(phone, code); + }, + [phone, verifyPasscode] + ); + + return { + errorMessage, + clearErrorMessage, + onSubmit, + }; +}; + +export default useRegisterWithSmsPasscodeValidation; diff --git a/packages/ui/src/containers/PasscodeValidation/use-resend-passcode.ts b/packages/ui/src/containers/PasscodeValidation/use-resend-passcode.ts new file mode 100644 index 000000000..d39330915 --- /dev/null +++ b/packages/ui/src/containers/PasscodeValidation/use-resend-passcode.ts @@ -0,0 +1,50 @@ +import type { SignInIdentifier } from '@logto/schemas'; +import { t } from 'i18next'; +import { useCallback, useContext } from 'react'; +import { useTimer } from 'react-timer-hook'; + +import { getSendPasscodeApi } from '@/apis/utils'; +import useApi from '@/hooks/use-api'; +import { PageContext } from '@/hooks/use-page-context'; +import type { UserFlow } from '@/types'; + +export const timeRange = 59; + +const getTimeout = () => { + const now = new Date(); + now.setSeconds(now.getSeconds() + timeRange); + + return now; +}; + +const useResendPasscode = ( + type: UserFlow, + method: SignInIdentifier.Email | SignInIdentifier.Sms, + target: string +) => { + const { setToast } = useContext(PageContext); + + const { seconds, isRunning, restart } = useTimer({ + autoStart: true, + expiryTimestamp: getTimeout(), + }); + + const { run: sendPassCode } = useApi(getSendPasscodeApi(type, method)); + + const onResendPasscode = useCallback(async () => { + const result = await sendPassCode(target); + + if (result) { + setToast(t('description.passcode_sent')); + restart(getTimeout(), true); + } + }, [restart, sendPassCode, setToast, target]); + + return { + seconds, + isRunning, + onResendPasscode, + }; +}; + +export default useResendPasscode; diff --git a/packages/ui/src/containers/PasscodeValidation/use-shared-error-handler.ts b/packages/ui/src/containers/PasscodeValidation/use-shared-error-handler.ts new file mode 100644 index 000000000..5dbff3bfb --- /dev/null +++ b/packages/ui/src/containers/PasscodeValidation/use-shared-error-handler.ts @@ -0,0 +1,30 @@ +import { useState, useMemo } from 'react'; + +import type { ErrorHandlers } from '@/hooks/use-api'; + +const useSharedErrorHandler = () => { + const [errorMessage, setErrorMessage] = useState(); + + // Have to wrap up in a useMemo hook otherwise the handler updates on every cycle + const sharedErrorHandlers: ErrorHandlers = useMemo( + () => ({ + 'passcode.expired': (error) => { + setErrorMessage(error.message); + }, + 'passcode.code_mismatch': (error) => { + setErrorMessage(error.message); + }, + }), + [] + ); + + return { + errorMessage, + sharedErrorHandlers, + clearErrorMessage: () => { + setErrorMessage(''); + }, + }; +}; + +export default useSharedErrorHandler; diff --git a/packages/ui/src/containers/PasscodeValidation/use-sign-in-with-email-error-handler.ts b/packages/ui/src/containers/PasscodeValidation/use-sign-in-with-email-error-handler.ts deleted file mode 100644 index 058404280..000000000 --- a/packages/ui/src/containers/PasscodeValidation/use-sign-in-with-email-error-handler.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { useCallback, useMemo, useContext } from 'react'; -import { useTranslation } from 'react-i18next'; -import { useNavigate } from 'react-router-dom'; - -import { registerWithEmail } from '@/apis/register'; -import type { ErrorHandlers } from '@/hooks/use-api'; -import useApi from '@/hooks/use-api'; -import { useConfirmModal } from '@/hooks/use-confirm-modal'; -import { PageContext } from '@/hooks/use-page-context'; -import { SearchParameters } from '@/types'; -import { getSearchParameters } from '@/utils'; - -const useSignInWithEmailErrorHandler = (email: string) => { - const { t } = useTranslation(); - const { show } = useConfirmModal(); - const navigate = useNavigate(); - const { setToast } = useContext(PageContext); - - const { run: registerWithEmailAsync } = useApi(registerWithEmail); - - const socialToBind = getSearchParameters(location.search, SearchParameters.bindWithSocial); - - const emailNotExistSignInHandler = useCallback(async () => { - const [confirm] = await show({ - confirmText: 'action.create', - ModalContent: t('description.sign_in_id_does_not_exists', { - type: t(`description.email`), - value: email, - }), - }); - - if (!confirm) { - navigate(-1); - - return; - } - - const result = await registerWithEmailAsync(); - - if (result?.redirectTo) { - window.location.replace(result.redirectTo); - } - }, [navigate, registerWithEmailAsync, show, t, email]); - - const errorHandler = useMemo( - () => ({ - 'user.email_not_exists': async (error) => { - // Directly display the error if user is trying to bind with social - if (socialToBind) { - setToast(error.message); - } - - await emailNotExistSignInHandler(); - }, - }), - [emailNotExistSignInHandler, setToast, socialToBind] - ); - - return { - errorHandler, - }; -}; - -export default useSignInWithEmailErrorHandler; diff --git a/packages/ui/src/containers/PasscodeValidation/use-sign-in-with-email-passcode-validation.ts b/packages/ui/src/containers/PasscodeValidation/use-sign-in-with-email-passcode-validation.ts new file mode 100644 index 000000000..94de5d7c4 --- /dev/null +++ b/packages/ui/src/containers/PasscodeValidation/use-sign-in-with-email-passcode-validation.ts @@ -0,0 +1,100 @@ +import { SignInIdentifier, SignInMode } from '@logto/schemas'; +import { useMemo, useCallback, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useNavigate } from 'react-router-dom'; + +import { registerWithEmail } from '@/apis/register'; +import { verifySignInEmailPasscode } from '@/apis/sign-in'; +import type { ErrorHandlers } from '@/hooks/use-api'; +import useApi from '@/hooks/use-api'; +import { useConfirmModal } from '@/hooks/use-confirm-modal'; +import { useSieMethods } from '@/hooks/use-sie'; +import { UserFlow, SearchParameters } from '@/types'; +import { getSearchParameters } from '@/utils'; + +import useIdentifierErrorAlert from './use-identifier-error-alert'; +import useSharedErrorHandler from './use-shared-error-handler'; + +const useSignInWithEmailPasscodeValidation = (email: string, errorCallback?: () => void) => { + const { t } = useTranslation(); + const { show } = useConfirmModal(); + const navigate = useNavigate(); + const { errorMessage, clearErrorMessage, sharedErrorHandlers } = useSharedErrorHandler(); + + const { signInMode } = useSieMethods(); + + const { run: registerWithEmailAsync } = useApi(registerWithEmail); + + const socialToBind = getSearchParameters(location.search, SearchParameters.bindWithSocial); + + const identifierNotExistErrorHandler = useIdentifierErrorAlert( + UserFlow.signIn, + SignInIdentifier.Email, + email + ); + + const emailNotExistRegisterErrorHandler = useCallback(async () => { + const [confirm] = await show({ + confirmText: 'action.create', + ModalContent: t('description.sign_in_id_does_not_exists', { + type: t(`description.email`), + value: email, + }), + }); + + if (!confirm) { + navigate(-1); + + return; + } + + const result = await registerWithEmailAsync(); + + if (result?.redirectTo) { + window.location.replace(result.redirectTo); + } + }, [email, navigate, show, registerWithEmailAsync, t]); + + const errorHandlers = useMemo( + () => ({ + 'user.email_not_exists': + // Block user auto register if is bind social or sign-in only flow + signInMode === SignInMode.SignIn || socialToBind + ? identifierNotExistErrorHandler + : emailNotExistRegisterErrorHandler, + ...sharedErrorHandlers, + callback: errorCallback, + }), + [ + emailNotExistRegisterErrorHandler, + errorCallback, + identifierNotExistErrorHandler, + sharedErrorHandlers, + signInMode, + socialToBind, + ] + ); + + const { result, run: verifyPasscode } = useApi(verifySignInEmailPasscode, errorHandlers); + + useEffect(() => { + if (result?.redirectTo) { + window.location.replace(result.redirectTo); + } + }, [result]); + + const onSubmit = useCallback( + async (code: string) => { + return verifyPasscode(email, code, socialToBind); + }, + [email, socialToBind, verifyPasscode] + ); + + return { + errorMessage, + clearErrorMessage, + onSubmit, + }; +}; + +export default useSignInWithEmailPasscodeValidation; diff --git a/packages/ui/src/containers/PasscodeValidation/use-sign-in-with-sms-error-handler.ts b/packages/ui/src/containers/PasscodeValidation/use-sign-in-with-sms-error-handler.ts deleted file mode 100644 index 84c414554..000000000 --- a/packages/ui/src/containers/PasscodeValidation/use-sign-in-with-sms-error-handler.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { useCallback, useMemo, useContext } from 'react'; -import { useTranslation } from 'react-i18next'; -import { useNavigate } from 'react-router-dom'; - -import { registerWithSms } from '@/apis/register'; -import type { ErrorHandlers } from '@/hooks/use-api'; -import useApi from '@/hooks/use-api'; -import { useConfirmModal } from '@/hooks/use-confirm-modal'; -import { PageContext } from '@/hooks/use-page-context'; -import { SearchParameters } from '@/types'; -import { getSearchParameters } from '@/utils'; -import { formatPhoneNumberWithCountryCallingCode } from '@/utils/country-code'; - -const useSignInWithSmsErrorHandler = (phone: string) => { - const { t } = useTranslation(); - const { show } = useConfirmModal(); - const navigate = useNavigate(); - const { setToast } = useContext(PageContext); - - const { run: registerWithSmsAsync } = useApi(registerWithSms); - - const socialToBind = getSearchParameters(location.search, SearchParameters.bindWithSocial); - - const phoneNotExistSignInHandler = useCallback(async () => { - const [confirm] = await show({ - ModalContent: t('description.sign_in_id_does_not_exists', { - confirmText: 'action.create', - type: t(`description.phone_number`), - value: formatPhoneNumberWithCountryCallingCode(phone), - }), - }); - - if (!confirm) { - navigate(-1); - - return; - } - - const result = await registerWithSmsAsync(); - - if (result?.redirectTo) { - window.location.replace(result.redirectTo); - } - }, [navigate, registerWithSmsAsync, show, t, phone]); - - const errorHandler = useMemo( - () => ({ - 'user.phone_not_exists': async (error) => { - // Directly display the error if user is trying to bind with social - if (socialToBind) { - setToast(error.message); - } - - await phoneNotExistSignInHandler(); - }, - }), - [phoneNotExistSignInHandler, setToast, socialToBind] - ); - - return { - errorHandler, - }; -}; - -export default useSignInWithSmsErrorHandler; diff --git a/packages/ui/src/containers/PasscodeValidation/use-sign-in-with-sms-passcode-validation.ts b/packages/ui/src/containers/PasscodeValidation/use-sign-in-with-sms-passcode-validation.ts new file mode 100644 index 000000000..15d5f9af7 --- /dev/null +++ b/packages/ui/src/containers/PasscodeValidation/use-sign-in-with-sms-passcode-validation.ts @@ -0,0 +1,100 @@ +import { SignInIdentifier, SignInMode } from '@logto/schemas'; +import { useMemo, useCallback, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useNavigate } from 'react-router-dom'; + +import { registerWithSms } from '@/apis/register'; +import { verifySignInSmsPasscode } from '@/apis/sign-in'; +import type { ErrorHandlers } from '@/hooks/use-api'; +import useApi from '@/hooks/use-api'; +import { useConfirmModal } from '@/hooks/use-confirm-modal'; +import { useSieMethods } from '@/hooks/use-sie'; +import { UserFlow, SearchParameters } from '@/types'; +import { getSearchParameters } from '@/utils'; + +import useIdentifierErrorAlert from './use-identifier-error-alert'; +import useSharedErrorHandler from './use-shared-error-handler'; + +const useSignInWithSmsPasscodeValidation = (phone: string, errorCallback?: () => void) => { + const { t } = useTranslation(); + const { show } = useConfirmModal(); + const navigate = useNavigate(); + const { errorMessage, clearErrorMessage, sharedErrorHandlers } = useSharedErrorHandler(); + + const { signInMode } = useSieMethods(); + + const { run: registerWithSmsAsync } = useApi(registerWithSms); + + const socialToBind = getSearchParameters(location.search, SearchParameters.bindWithSocial); + + const identifierNotExistErrorHandler = useIdentifierErrorAlert( + UserFlow.signIn, + SignInIdentifier.Sms, + phone + ); + + const phoneNotExistRegisterErrorHandler = useCallback(async () => { + const [confirm] = await show({ + confirmText: 'action.create', + ModalContent: t('description.sign_in_id_does_not_exists', { + type: t(`description.phone_number`), + value: phone, + }), + }); + + if (!confirm) { + navigate(-1); + + return; + } + + const result = await registerWithSmsAsync(); + + if (result?.redirectTo) { + window.location.replace(result.redirectTo); + } + }, [phone, navigate, show, registerWithSmsAsync, t]); + + const errorHandlers = useMemo( + () => ({ + 'user.phone_not_exists': + // Block user auto register if is bind social or sign-in only flow + signInMode === SignInMode.SignIn || socialToBind + ? identifierNotExistErrorHandler + : phoneNotExistRegisterErrorHandler, + ...sharedErrorHandlers, + callback: errorCallback, + }), + [ + phoneNotExistRegisterErrorHandler, + errorCallback, + identifierNotExistErrorHandler, + sharedErrorHandlers, + signInMode, + socialToBind, + ] + ); + + const { result, run: verifyPasscode } = useApi(verifySignInSmsPasscode, errorHandlers); + + useEffect(() => { + if (result?.redirectTo) { + window.location.replace(result.redirectTo); + } + }, [result]); + + const onSubmit = useCallback( + async (code: string) => { + return verifyPasscode(phone, code, socialToBind); + }, + [phone, socialToBind, verifyPasscode] + ); + + return { + errorMessage, + clearErrorMessage, + onSubmit, + }; +}; + +export default useSignInWithSmsPasscodeValidation; diff --git a/packages/ui/src/containers/PasscodeValidation/user-register-with-email-error-handler.ts b/packages/ui/src/containers/PasscodeValidation/user-register-with-email-error-handler.ts deleted file mode 100644 index d10aa1fd3..000000000 --- a/packages/ui/src/containers/PasscodeValidation/user-register-with-email-error-handler.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { useCallback, useMemo } from 'react'; -import { useTranslation } from 'react-i18next'; -import { useNavigate } from 'react-router-dom'; - -import { signInWithEmail } from '@/apis/sign-in'; -import type { ErrorHandlers } from '@/hooks/use-api'; -import useApi from '@/hooks/use-api'; -import { useConfirmModal } from '@/hooks/use-confirm-modal'; - -const useRegisterWithEmailErrorHandler = (email: string) => { - const { t } = useTranslation(); - const { show } = useConfirmModal(); - const navigate = useNavigate(); - - const { run: signInWithEmailAsync } = useApi(signInWithEmail); - - const emailExistRegisterHandler = useCallback(async () => { - const [confirm] = await show({ - ModalContent: t('description.create_account_id_exists', { - confirmText: 'action.sign_in', - type: t(`description.email`), - value: email, - }), - }); - - if (!confirm) { - navigate(-1); - - return; - } - - const result = await signInWithEmailAsync(); - - if (result?.redirectTo) { - window.location.replace(result.redirectTo); - } - }, [navigate, show, signInWithEmailAsync, t, email]); - - const errorHandler = useMemo( - () => ({ - 'user.email_exists_register': async () => { - await emailExistRegisterHandler(); - }, - }), - [emailExistRegisterHandler] - ); - - return { - errorHandler, - }; -}; - -export default useRegisterWithEmailErrorHandler; diff --git a/packages/ui/src/containers/PasscodeValidation/utils.ts b/packages/ui/src/containers/PasscodeValidation/utils.ts new file mode 100644 index 000000000..8d243bd8b --- /dev/null +++ b/packages/ui/src/containers/PasscodeValidation/utils.ts @@ -0,0 +1,35 @@ +import { SignInIdentifier } from '@logto/schemas'; + +import { UserFlow } from '@/types'; + +import useForgotPasswordEmailPasscodeValidation from './use-forgot-password-email-passcode-validation'; +import useForgotPasswordSmsPasscodeValidation from './use-forgot-password-sms-passcode-validation'; +import useRegisterWithEmailPasscodeValidation from './use-register-with-email-passcode-validation'; +import useRegisterWithSmsPasscodeValidation from './use-register-with-sms-passcode-validation'; +import useSignInWithEmailPasscodeValidation from './use-sign-in-with-email-passcode-validation'; +import useSignInWithSmsPasscodeValidation from './use-sign-in-with-sms-passcode-validation'; + +export const getPasscodeValidationHook = ( + type: UserFlow, + method: SignInIdentifier.Email | SignInIdentifier.Sms +) => { + switch (type) { + case UserFlow.signIn: + return method === SignInIdentifier.Email + ? useSignInWithEmailPasscodeValidation + : useSignInWithSmsPasscodeValidation; + case UserFlow.register: + return method === SignInIdentifier.Email + ? useRegisterWithEmailPasscodeValidation + : useRegisterWithSmsPasscodeValidation; + case UserFlow.forgotPassword: + return method === SignInIdentifier.Email + ? useForgotPasswordEmailPasscodeValidation + : useForgotPasswordSmsPasscodeValidation; + default: + // TODO: continue flow hook + return method === SignInIdentifier.Email + ? useRegisterWithEmailPasscodeValidation + : useRegisterWithSmsPasscodeValidation; + } +}; diff --git a/packages/ui/src/containers/PasswordSignInForm/index.module.scss b/packages/ui/src/containers/PasswordSignInForm/index.module.scss index 0dc3288ee..43be90694 100644 --- a/packages/ui/src/containers/PasswordSignInForm/index.module.scss +++ b/packages/ui/src/containers/PasswordSignInForm/index.module.scss @@ -8,12 +8,15 @@ } .inputField, + .link, .switch { margin-bottom: _.unit(4); } + .link, .switch { - display: block; + align-self: start; + width: auto; } .formErrors { diff --git a/packages/ui/src/containers/PasswordSignInForm/index.tsx b/packages/ui/src/containers/PasswordSignInForm/index.tsx index ae66fce4f..b2dfd9f2f 100644 --- a/packages/ui/src/containers/PasswordSignInForm/index.tsx +++ b/packages/ui/src/containers/PasswordSignInForm/index.tsx @@ -1,13 +1,15 @@ -import type { SignInIdentifier } from '@logto/schemas'; +import { SignInIdentifier } from '@logto/schemas'; import classNames from 'classnames'; import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import Button from '@/components/Button'; import ErrorMessage from '@/components/ErrorMessage'; +import ForgotPasswordLink from '@/components/ForgotPasswordLink'; import { PasswordInput } from '@/components/Input'; import useForm from '@/hooks/use-form'; import usePasswordSignIn from '@/hooks/use-password-sign-in'; +import { useForgotPasswordSettings } from '@/hooks/use-sie'; import { requiredValidation } from '@/utils/field-validations'; import PasswordlessSignInLink from './PasswordlessSignInLink'; @@ -42,6 +44,8 @@ const PasswordSignInForm = ({ const { fieldValue, register, validateForm } = useForm(defaultState); + const { isForgotPasswordEnabled, sms, email } = useForgotPasswordSettings(); + const onSubmitHandler = useCallback( async (event?: React.FormEvent) => { event?.preventDefault(); @@ -69,6 +73,21 @@ const PasswordSignInForm = ({ /> {errorMessage && {errorMessage}} + {isForgotPasswordEnabled && ( + + )} + {hasPasswordlessButton && ( )} diff --git a/packages/ui/src/containers/PhoneForm/index.module.scss b/packages/ui/src/containers/PhoneForm/index.module.scss index f73c1471a..c58c38cd6 100644 --- a/packages/ui/src/containers/PhoneForm/index.module.scss +++ b/packages/ui/src/containers/PhoneForm/index.module.scss @@ -14,7 +14,8 @@ } .switch { - display: block; + align-self: start; + width: auto; } .formErrors { diff --git a/packages/ui/src/containers/PhonePassword/index.module.scss b/packages/ui/src/containers/PhonePassword/index.module.scss index fe937e867..302bd1775 100644 --- a/packages/ui/src/containers/PhonePassword/index.module.scss +++ b/packages/ui/src/containers/PhonePassword/index.module.scss @@ -8,10 +8,16 @@ } .inputField, + .link, .terms { margin-bottom: _.unit(4); } + .link { + align-self: start; + width: auto; + } + .formErrors { margin-top: _.unit(-2); margin-bottom: _.unit(4); diff --git a/packages/ui/src/containers/PhonePassword/index.test.tsx b/packages/ui/src/containers/PhonePassword/index.test.tsx index 767822325..4dc7ea7e3 100644 --- a/packages/ui/src/containers/PhonePassword/index.test.tsx +++ b/packages/ui/src/containers/PhonePassword/index.test.tsx @@ -1,5 +1,6 @@ import { fireEvent, waitFor } from '@testing-library/react'; import { act } from 'react-dom/test-utils'; +import { MemoryRouter } from 'react-router-dom'; import renderWithPageContext from '@/__mocks__/RenderWithPageContext'; import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider'; @@ -35,11 +36,14 @@ describe('', () => { test('render with terms settings enabled', () => { const { queryByText } = renderWithPageContext( - - - + + + + + ); expect(queryByText('description.agree_with_terms')).not.toBeNull(); + expect(queryByText('action.forgot_password')).not.toBeNull(); }); test('required inputs with error message', () => { @@ -71,11 +75,13 @@ describe('', () => { test('should show terms confirm modal', async () => { const { queryByText, getByText, container } = renderWithPageContext( - - - - - + + + + + + + ); const submitButton = getByText('action.sign_in'); @@ -101,11 +107,13 @@ describe('', () => { test('should show terms detail modal', async () => { const { getByText, queryByText, container, queryByRole } = renderWithPageContext( - - - - - + + + + + + + ); const submitButton = getByText('action.sign_in'); @@ -142,9 +150,11 @@ describe('', () => { test('submit form', async () => { const { getByText, container } = renderWithPageContext( - - - + + + + + ); const submitButton = getByText('action.sign_in'); diff --git a/packages/ui/src/containers/PhonePassword/index.tsx b/packages/ui/src/containers/PhonePassword/index.tsx index 310e3bc1a..e16b7e338 100644 --- a/packages/ui/src/containers/PhonePassword/index.tsx +++ b/packages/ui/src/containers/PhonePassword/index.tsx @@ -5,11 +5,13 @@ import { useTranslation } from 'react-i18next'; import Button from '@/components/Button'; import ErrorMessage from '@/components/ErrorMessage'; +import ForgotPasswordLink from '@/components/ForgotPasswordLink'; import { PhoneInput, PasswordInput } from '@/components/Input'; import TermsOfUse from '@/containers/TermsOfUse'; import useForm from '@/hooks/use-form'; import usePasswordSignIn from '@/hooks/use-password-sign-in'; import usePhoneNumber from '@/hooks/use-phone-number'; +import { useForgotPasswordSettings } from '@/hooks/use-sie'; import useTerms from '@/hooks/use-terms'; import { requiredValidation } from '@/utils/field-validations'; @@ -35,6 +37,7 @@ const PhonePassword = ({ className, autoFocus }: Props) => { const { t } = useTranslation(); const { termsValidation } = useTerms(); const { errorMessage, clearErrorMessage, onSubmit } = usePasswordSignIn(SignInIdentifier.Sms); + const { isForgotPasswordEnabled, sms } = useForgotPasswordSettings(); const { countryList, phoneNumber, setPhoneNumber, isValidPhoneNumber } = usePhoneNumber(); const { fieldValue, setFieldValue, register, validateForm } = useForm(defaultState); @@ -108,6 +111,13 @@ const PhonePassword = ({ className, autoFocus }: Props) => { {errorMessage && {errorMessage}} + {isForgotPasswordEnabled && ( + + )} +