Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-31 22:51:25 -05:00
Code Issues Activity

Merge pull request #2322 from logto-io/simeng-log-4517-container-forgot-password-link

Browse source 
feat(ui): add forgot password link
This commit is contained in:
simeng-li 2022-11-08 17:59:33 +08:00 • committed by GitHub
commit 536d3a53db
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
49 changed files with 1226 additions and 547 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/core/src/routes/well-known.ts
View file

@ -37,6 +37,15 @@ export default function wellKnownRoutes<T extends AnonymousRouter>(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<T extends AnonymousRouter>(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<T extends AnonymousRouter>(router: T, pr
'demo_app.notification',
autoDetect ? undefined : { lng: fallbackLanguage }
),
forgotPassword,
};
return next();
@ -89,14 +100,7 @@ export default function wellKnownRoutes<T extends AnonymousRouter>(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();

6
packages/phrases-ui/src/locales/en.ts
View file

@ -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 <span>{{seconds}}</span> 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.',

6
packages/phrases-ui/src/locales/fr.ts
View file

@ -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 <span>{{seconds}}</span> 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:

6
packages/phrases-ui/src/locales/ko.ts
View file

@ -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: '<span>{{seconds}}</span> 초 후에 재전송',
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: '계정이 이미 있으신가요? 로그인하여 다른 계정과 연동해보세요.',

6
packages/phrases-ui/src/locales/pt-pt.ts
View file

@ -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 <span>{{seconds}}</span> 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.',

6
packages/phrases-ui/src/locales/tr-tr.ts
View file

@ -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: '<span>{{seconds}}</span> 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.',

6
packages/phrases-ui/src/locales/zh-cn.ts
View file

@ -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: '在 <span>{{ seconds }}</span> 秒后重发',
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: '已有帐号？登录以绑定社交身份。',

69
packages/ui/src/apis/continue.test.ts Normal file
View file

@ -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',
},
});
});
});

32
packages/ui/src/apis/continue.ts Normal file
View file

@ -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<Response>();
if (result.redirectTo && socialToBind) {
await bindSocialAccount(socialToBind);
}
return result;
};
export const continueWithUsername = async (username: string) =>
api.post(`${continueApiPrefix}/username`, { json: { username } }).json<Response>();
export const continueWithEmail = async (email: string) =>
api.post(`${continueApiPrefix}/email`, { json: { email } }).json<Response>();
export const continueWithPhone = async (phone: string) =>
api.post(`${continueApiPrefix}/sms`, { json: { phone } }).json<Response>();

19
packages/ui/src/components/ForgotPasswordLink/index.tsx Normal file
View file

@ -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) => (
<TextLink
className={className}
to={`/${UserFlow.forgotPassword}/${method}`}
text="action.forgot_password"
/>
);
export default ForgotPasswordLink;

3
packages/ui/src/containers/EmailForm/index.module.scss
View file

@ -14,7 +14,8 @@
}
.switch {
display: block;
width: auto;
align-self: start;
}
.formErrors {

6
packages/ui/src/containers/EmailPassword/index.module.scss
View file

@ -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);

42
packages/ui/src/containers/EmailPassword/index.test.tsx
View file

@ -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('<EmailPassword>', () => {
test('render with terms settings enabled', () => {
const { queryByText } = renderWithPageContext(
<SettingsProvider>
<EmailPassword />
</SettingsProvider>
<MemoryRouter>
<SettingsProvider>
<EmailPassword />
</SettingsProvider>
</MemoryRouter>
);
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('<EmailPassword>', () => {
test('should show terms confirm modal', async () => {
const { queryByText, getByText, container } = renderWithPageContext(
<SettingsProvider>
<ConfirmModalProvider>
<EmailPassword />
</ConfirmModalProvider>
</SettingsProvider>
<MemoryRouter>
<SettingsProvider>
<ConfirmModalProvider>
<EmailPassword />
</ConfirmModalProvider>
</SettingsProvider>
</MemoryRouter>
);
const submitButton = getByText('action.sign_in');
@ -94,11 +100,13 @@ describe('<EmailPassword>', () => {
test('should show terms detail modal', async () => {
const { getByText, queryByText, container, queryByRole } = renderWithPageContext(
<SettingsProvider>
<ConfirmModalProvider>
<EmailPassword />
</ConfirmModalProvider>
</SettingsProvider>
<MemoryRouter>
<SettingsProvider>
<ConfirmModalProvider>
<EmailPassword />
</ConfirmModalProvider>
</SettingsProvider>
</MemoryRouter>
);
const submitButton = getByText('action.sign_in');
@ -135,9 +143,11 @@ describe('<EmailPassword>', () => {
test('submit form', async () => {
const { getByText, container } = renderWithPageContext(
<SettingsProvider>
<EmailPassword />
</SettingsProvider>
<MemoryRouter>
<SettingsProvider>
<EmailPassword />
</SettingsProvider>
</MemoryRouter>
);
const submitButton = getByText('action.sign_in');

10
packages/ui/src/containers/EmailPassword/index.tsx
View file

@ -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 && (
<ForgotPasswordLink
className={styles.link}
method={email ? SignInIdentifier.Email : SignInIdentifier.Sms}
/>
)}
{errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
<TermsOfUse className={styles.terms} />

24
packages/ui/src/containers/PasscodeValidation/PasswordSignInLink.tsx Normal file
View file

@ -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 (
<TextLink
replace
className={className}
text="action.sign_in_via_password"
to={`/${UserFlow.signIn}/${method}/password`}
state={method === SignInIdentifier.Email ? { email: target } : { phone: target }}
/>
);
};
export default PasswordSignInLink;

6
packages/ui/src/containers/PasscodeValidation/index.module.scss
View file

@ -22,6 +22,12 @@
color: var(--color-brand-default);
}
}
.link {
margin-top: _.unit(3);
width: auto;
align-self: start;
}
}
:global(body.mobile) {

188
packages/ui/src/containers/PasscodeValidation/index.test.tsx
View file

@ -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('<PasscodeValidation />', () => {
const email = 'foo@logto.io';
const phone = '18573333333';
const originalLocation = window.location;
beforeAll(() => {
@ -75,68 +95,170 @@ describe('<PasscodeValidation />', () => {
expect(sendPasscodeApi).toBeCalledWith(email);
});
it('fire validate passcode event', async () => {
const { container } = renderWithPageContext(
<PasscodeValidation type={UserFlow.signIn} method={SignInIdentifier.Email} target={email} />
);
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(
<PasscodeValidation type={UserFlow.signIn} method={SignInIdentifier.Email} target={email} />
);
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(
<PasscodeValidation type={UserFlow.signIn} method={SignInIdentifier.Email} target={email} />
);
const { container } = renderWithPageContext(
<PasscodeValidation type={UserFlow.signIn} method={SignInIdentifier.Sms} target={phone} />
);
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(
<PasscodeValidation
type={UserFlow.register}
method={SignInIdentifier.Email}
target={email}
/>
);
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(
<PasscodeValidation type={UserFlow.register} method={SignInIdentifier.Sms} target={phone} />
);
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(
<PasscodeValidation
type={UserFlow.forgotPassword}
method={SignInIdentifier.Email}
target={email}
/>
);
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(
<PasscodeValidation
type={UserFlow.forgotPassword}
method={SignInIdentifier.Email}
target={email}
method={SignInIdentifier.Sms}
target={phone}
/>
);
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(() => {

109
packages/ui/src/containers/PasscodeValidation/index.tsx
View file

@ -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<string[]>([]);
const [error, setError] = useState<string>();
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 (
<form className={classNames(styles.form, className)}>
<Passcode
name="passcode"
className={classNames(styles.inputField, error && styles.withError)}
className={classNames(styles.inputField, errorMessage && styles.withError)}
value={code}
error={error}
error={errorMessage}
onChange={setCode}
/>
{isRunning ? (
@ -118,7 +58,16 @@ const PasscodeValidation = ({ type, method, className, target }: Props) => {
</Trans>
</div>
) : (
<TextLink text="description.resend_passcode" onClick={resendPasscodeHandler} />
<TextLink
text="description.resend_passcode"
onClick={() => {
clearErrorMessage();
void onResendPasscode();
}}
/>
)}
{type === UserFlow.signIn && hasPasswordButton && (
<PasswordSignInLink method={method} target={target} className={styles.link} />
)}
</form>
);

54
packages/ui/src/containers/PasscodeValidation/use-forgot-password-email-passcode-validation.ts Normal file
View file

@ -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;

53
packages/ui/src/containers/PasscodeValidation/use-forgot-password-sms-passcode-validation.ts Normal file
View file

@ -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;

37
packages/ui/src/containers/PasscodeValidation/use-forgot-password-with-email-error-handler.ts
View file

@ -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<ErrorHandlers>(
() => ({
'user.email_not_exists': emailNotExistForgotPasswordHandler,
}),
[emailNotExistForgotPasswordHandler]
);
return {
errorHandler,
};
};
export default useForgotPasswordWithEmailErrorHandler;

38
packages/ui/src/containers/PasscodeValidation/use-forgot-password-with-sms-error-handler.ts
View file

@ -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<ErrorHandlers>(
() => ({
'user.phone_not_exists': phoneNotExistForgotPasswordHandler,
}),
[phoneNotExistForgotPasswordHandler]
);
return {
errorHandler,
};
};
export default useForgotPasswordWithSmsErrorHandler;

37
packages/ui/src/containers/PasscodeValidation/use-identifier-error-alert.ts Normal file
View file

@ -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;

43
packages/ui/src/containers/PasscodeValidation/use-passcode-validation-error-handler.ts
View file

@ -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;

95
packages/ui/src/containers/PasscodeValidation/use-register-with-email-passcode-validation.ts Normal file
View file

@ -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<ErrorHandlers>(
() => ({
'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;

54
packages/ui/src/containers/PasscodeValidation/use-register-with-sms-error-handler.ts
View file

@ -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<ErrorHandlers>(
() => ({
'user.phone_exists_register': async () => {
await phoneExistRegisterHandler();
},
}),
[phoneExistRegisterHandler]
);
return {
errorHandler,
};
};
export default useRegisterWithSmsErrorHandler;

95
packages/ui/src/containers/PasscodeValidation/use-register-with-sms-passcode-validation.ts Normal file
View file

@ -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<ErrorHandlers>(
() => ({
'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;

50
packages/ui/src/containers/PasscodeValidation/use-resend-passcode.ts Normal file
View file

@ -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;

30
packages/ui/src/containers/PasscodeValidation/use-shared-error-handler.ts Normal file
View file

@ -0,0 +1,30 @@
import { useState, useMemo } from 'react';
import type { ErrorHandlers } from '@/hooks/use-api';
const useSharedErrorHandler = () => {
const [errorMessage, setErrorMessage] = useState<string>();
// 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;

64
packages/ui/src/containers/PasscodeValidation/use-sign-in-with-email-error-handler.ts
View file

@ -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<ErrorHandlers>(
() => ({
'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;

100
packages/ui/src/containers/PasscodeValidation/use-sign-in-with-email-passcode-validation.ts Normal file
View file

@ -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<ErrorHandlers>(
() => ({
'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;

65
packages/ui/src/containers/PasscodeValidation/use-sign-in-with-sms-error-handler.ts
View file

@ -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<ErrorHandlers>(
() => ({
'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;

100
packages/ui/src/containers/PasscodeValidation/use-sign-in-with-sms-passcode-validation.ts Normal file
View file

@ -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<ErrorHandlers>(
() => ({
'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;

53
packages/ui/src/containers/PasscodeValidation/user-register-with-email-error-handler.ts
View file

@ -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<ErrorHandlers>(
() => ({
'user.email_exists_register': async () => {
await emailExistRegisterHandler();
},
}),
[emailExistRegisterHandler]
);
return {
errorHandler,
};
};
export default useRegisterWithEmailErrorHandler;

35
packages/ui/src/containers/PasscodeValidation/utils.ts Normal file
View file

@ -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;
}
};

5
packages/ui/src/containers/PasswordSignInForm/index.module.scss
View file

@ -8,12 +8,15 @@
}
.inputField,
.link,
.switch {
margin-bottom: _.unit(4);
}
.link,
.switch {
display: block;
align-self: start;
width: auto;
}
.formErrors {

21
packages/ui/src/containers/PasswordSignInForm/index.tsx
View file

@ -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<HTMLFormElement>) => {
event?.preventDefault();
@ -69,6 +73,21 @@ const PasswordSignInForm = ({
/>
{errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
{isForgotPasswordEnabled && (
<ForgotPasswordLink
className={styles.link}
method={
method === SignInIdentifier.Email
? email
? SignInIdentifier.Email
: SignInIdentifier.Sms
: sms
? SignInIdentifier.Sms
: SignInIdentifier.Email
}
/>
)}
{hasPasswordlessButton && (
<PasswordlessSignInLink className={styles.switch} method={method} value={value} />
)}

3
packages/ui/src/containers/PhoneForm/index.module.scss
View file

@ -14,7 +14,8 @@
}
.switch {
display: block;
align-self: start;
width: auto;
}
.formErrors {

6
packages/ui/src/containers/PhonePassword/index.module.scss
View file

@ -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);

42
packages/ui/src/containers/PhonePassword/index.test.tsx
View file

@ -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('<PhonePassword>', () => {
test('render with terms settings enabled', () => {
const { queryByText } = renderWithPageContext(
<SettingsProvider>
<PhonePassword />
</SettingsProvider>
<MemoryRouter>
<SettingsProvider>
<PhonePassword />
</SettingsProvider>
</MemoryRouter>
);
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('<PhonePassword>', () => {
test('should show terms confirm modal', async () => {
const { queryByText, getByText, container } = renderWithPageContext(
<SettingsProvider>
<ConfirmModalProvider>
<PhonePassword />
</ConfirmModalProvider>
</SettingsProvider>
<MemoryRouter>
<SettingsProvider>
<ConfirmModalProvider>
<PhonePassword />
</ConfirmModalProvider>
</SettingsProvider>
</MemoryRouter>
);
const submitButton = getByText('action.sign_in');
@ -101,11 +107,13 @@ describe('<PhonePassword>', () => {
test('should show terms detail modal', async () => {
const { getByText, queryByText, container, queryByRole } = renderWithPageContext(
<SettingsProvider>
<ConfirmModalProvider>
<PhonePassword />
</ConfirmModalProvider>
</SettingsProvider>
<MemoryRouter>
<SettingsProvider>
<ConfirmModalProvider>
<PhonePassword />
</ConfirmModalProvider>
</SettingsProvider>
</MemoryRouter>
);
const submitButton = getByText('action.sign_in');
@ -142,9 +150,11 @@ describe('<PhonePassword>', () => {
test('submit form', async () => {
const { getByText, container } = renderWithPageContext(
<SettingsProvider>
<PhonePassword />
</SettingsProvider>
<MemoryRouter>
<SettingsProvider>
<PhonePassword />
</SettingsProvider>
</MemoryRouter>
);
const submitButton = getByText('action.sign_in');

10
packages/ui/src/containers/PhonePassword/index.tsx
View file

@ -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 className={styles.formErrors}>{errorMessage}</ErrorMessage>}
{isForgotPasswordEnabled && (
<ForgotPasswordLink
className={styles.link}
method={sms ? SignInIdentifier.Sms : SignInIdentifier.Email}
/>
)}
<TermsOfUse className={styles.terms} />
<Button title="action.sign_in" onClick={async () => onSubmitHandler()} />

6
packages/ui/src/containers/UsernameSignIn/index.module.scss
View file

@ -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);

53
packages/ui/src/containers/UsernameSignIn/index.test.tsx
View file

@ -1,8 +1,10 @@
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';
import { mockSignInExperienceSettings } from '@/__mocks__/logto';
import { signInWithUsername } from '@/apis/sign-in';
import ConfirmModalProvider from '@/containers/ConfirmModalProvider';
@ -26,13 +28,28 @@ describe('<UsernameSignIn>', () => {
expect(queryByText('action.sign_in')).not.toBeNull();
});
test('render with terms settings enabled', () => {
test('render with terms settings enabled and forgot password enabled', () => {
const { queryByText } = renderWithPageContext(
<SettingsProvider>
<UsernameSignIn />
<MemoryRouter>
<UsernameSignIn />
</MemoryRouter>
</SettingsProvider>
);
expect(queryByText('description.agree_with_terms')).not.toBeNull();
expect(queryByText('action.forgot_password')).not.toBeNull();
});
test('render with forgot password disabled', () => {
const { queryByText } = renderWithPageContext(
<SettingsProvider
settings={{ ...mockSignInExperienceSettings, forgotPassword: { sms: false, email: false } }}
>
<UsernameSignIn />
</SettingsProvider>
);
expect(queryByText('action.forgot_password')).toBeNull();
});
test('required inputs with error message', () => {
@ -63,11 +80,13 @@ describe('<UsernameSignIn>', () => {
test('should show terms confirm modal', async () => {
const { queryByText, getByText, container } = renderWithPageContext(
<SettingsProvider>
<ConfirmModalProvider>
<UsernameSignIn />
</ConfirmModalProvider>
</SettingsProvider>
<MemoryRouter>
<SettingsProvider>
<ConfirmModalProvider>
<UsernameSignIn />
</ConfirmModalProvider>
</SettingsProvider>
</MemoryRouter>
);
const submitButton = getByText('action.sign_in');
@ -93,11 +112,13 @@ describe('<UsernameSignIn>', () => {
test('should show terms detail modal', async () => {
const { getByText, queryByText, container, queryByRole } = renderWithPageContext(
<SettingsProvider>
<ConfirmModalProvider>
<UsernameSignIn />
</ConfirmModalProvider>
</SettingsProvider>
<MemoryRouter>
<SettingsProvider>
<ConfirmModalProvider>
<UsernameSignIn />
</ConfirmModalProvider>
</SettingsProvider>
</MemoryRouter>
);
const submitButton = getByText('action.sign_in');
@ -134,9 +155,11 @@ describe('<UsernameSignIn>', () => {
test('submit form', async () => {
const { getByText, container } = renderWithPageContext(
<SettingsProvider>
<UsernameSignIn />
</SettingsProvider>
<MemoryRouter>
<SettingsProvider>
<UsernameSignIn />
</SettingsProvider>
</MemoryRouter>
);
const submitButton = getByText('action.sign_in');

10
packages/ui/src/containers/UsernameSignIn/index.tsx
View file

@ -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 { requiredValidation } from '@/utils/field-validations';
@ -33,6 +35,7 @@ const defaultState: FieldState = {
const UsernameSignIn = ({ className, autoFocus }: Props) => {
const { t } = useTranslation();
const { termsValidation } = useTerms();
const { isForgotPasswordEnabled, email } = useForgotPasswordSettings();
const { errorMessage, clearErrorMessage, onSubmit } = usePasswordSignIn(
SignInIdentifier.Username
);
@ -87,6 +90,13 @@ const UsernameSignIn = ({ className, autoFocus }: Props) => {
/>
{errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
{isForgotPasswordEnabled && (
<ForgotPasswordLink
className={styles.link}
method={email ? SignInIdentifier.Email : SignInIdentifier.Sms}
/>
)}
<TermsOfUse className={styles.terms} />
<Button title="action.sign_in" onClick={async () => onSubmitHandler()} />

10
packages/ui/src/hooks/use-sie.ts
View file

@ -15,3 +15,13 @@ export const useSieMethods = () => {
forgotPassword: experienceSettings?.forgotPassword,
};
};
export const useForgotPasswordSettings = () => {
const { experienceSettings } = useContext(PageContext);
const { forgotPassword } = experienceSettings ?? {};
return {
isForgotPasswordEnabled: Boolean(forgotPassword?.email ?? forgotPassword?.sms),
...forgotPassword,
};
};

6
packages/ui/src/pages/ForgotPassword/index.tsx
View file

@ -5,7 +5,7 @@ import { is } from 'superstruct';
import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
import { EmailResetPassword } from '@/containers/EmailForm';
import { SmsResetPassword } from '@/containers/PhoneForm';
import { useSieMethods } from '@/hooks/use-sie';
import { useForgotPasswordSettings } from '@/hooks/use-sie';
import ErrorPage from '@/pages/ErrorPage';
import { passcodeMethodGuard } from '@/types/guard';
@ -15,14 +15,14 @@ type Props = {
const ForgotPassword = () => {
const { method = '' } = useParams<Props>();
const { forgotPassword } = useSieMethods();
const forgotPassword = useForgotPasswordSettings();
if (!is(method, passcodeMethodGuard)) {
return <ErrorPage />;
}
// Forgot password with target identifier method is not supported
if (!forgotPassword?.[method]) {
if (!forgotPassword[method]) {
return <ErrorPage />;
}

9
packages/ui/src/pages/Passcode/index.test.tsx
View file

@ -1,6 +1,7 @@
import { Routes, Route, MemoryRouter } from 'react-router-dom';
import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider';
import Passcode from '.';
@ -15,9 +16,11 @@ describe('Passcode Page', () => {
it('render properly', () => {
const { queryByText } = renderWithPageContext(
<MemoryRouter initialEntries={['/sign-in/email/passcode-validation']}>
<Routes>
<Route path="/:type/:method/passcode-validation" element={<Passcode />} />
</Routes>
<SettingsProvider>
<Routes>
<Route path="/:type/:method/passcode-validation" element={<Passcode />} />
</Routes>
</SettingsProvider>
</MemoryRouter>
);

24
packages/ui/src/pages/Passcode/index.tsx
View file

@ -1,11 +1,13 @@
import { SignInIdentifier } from '@logto/schemas';
import { t } from 'i18next';
import { useParams, useLocation } from 'react-router-dom';
import { is } from 'superstruct';
import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
import PasscodeValidation from '@/containers/PasscodeValidation';
import { useSieMethods } from '@/hooks/use-sie';
import ErrorPage from '@/pages/ErrorPage';
import type { UserFlow } from '@/types';
import { UserFlow } from '@/types';
import { passcodeStateGuard, passcodeMethodGuard, userFlowGuard } from '@/types/guard';
type Parameters = {
@ -15,6 +17,7 @@ type Parameters = {
const Passcode = () => {
const { method, type = '' } = useParams<Parameters>();
const { signInMethods } = useSieMethods();
const { state } = useLocation();
const invalidType = !is(type, userFlowGuard);
@ -25,6 +28,13 @@ const Passcode = () => {
return <ErrorPage />;
}
// SignIn Method not enabled
const methodSettings = signInMethods.find(({ identifier }) => identifier === method);
if (!methodSettings) {
return <ErrorPage />;
}
const target = !invalidState && state[method === SignInIdentifier.Email ? 'email' : 'phone'];
if (!target) {
@ -35,9 +45,17 @@ const Passcode = () => {
<SecondaryPageWrapper
title="action.enter_passcode"
description="description.enter_passcode"
descriptionProps={{ address: `description.${method === 'email' ? 'email' : 'phone_number'}` }}
descriptionProps={{
address: t(`description.${method === 'email' ? 'email' : 'phone_number'}`),
target,
}}
>
<PasscodeValidation type={type} method={method} target={target} />
<PasscodeValidation
type={type}
method={method}
target={target}
hasPasswordButton={type === UserFlow.signIn && methodSettings.password}
/>
</SecondaryPageWrapper>
);
};

1
packages/ui/src/types/index.ts
View file

@ -9,6 +9,7 @@ export enum UserFlow {
signIn = 'sign-in',
register = 'register',
forgotPassword = 'forgot-password',
continue = 'continue',
}
export enum SearchParameters {