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

refactor(ui): extract passwordless code hook (#2311)

Browse source
This commit is contained in:
simeng-li 2022-11-03 19:30:31 +08:00 • committed by GitHub
parent 6242907271
commit b451f09cb9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 184 additions and 290 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/ui/src/apis/api.test.ts
View file

@ -1,3 +1,5 @@
import { SignInIdentifier } from '@logto/schemas';
import { UserFlow } from '@/types';
import {
@ -10,14 +12,22 @@ import { getVerifyPasscodeApi } from './utils';
describe('api', () => {
it('getVerifyPasscodeApi', () => {
expect(getVerifyPasscodeApi(UserFlow.register, 'sms')).toBe(verifyRegisterSmsPasscode);
expect(getVerifyPasscodeApi(UserFlow.register, 'email')).toBe(verifyRegisterEmailPasscode);
expect(getVerifyPasscodeApi(UserFlow.signIn, 'sms')).toBe(verifySignInSmsPasscode);
expect(getVerifyPasscodeApi(UserFlow.signIn, 'email')).toBe(verifySignInEmailPasscode);
expect(getVerifyPasscodeApi(UserFlow.forgotPassword, 'email')).toBe(
expect(getVerifyPasscodeApi(UserFlow.register, SignInIdentifier.Sms)).toBe(
verifyRegisterSmsPasscode
);
expect(getVerifyPasscodeApi(UserFlow.register, SignInIdentifier.Email)).toBe(
verifyRegisterEmailPasscode
);
expect(getVerifyPasscodeApi(UserFlow.signIn, SignInIdentifier.Sms)).toBe(
verifySignInSmsPasscode
);
expect(getVerifyPasscodeApi(UserFlow.signIn, SignInIdentifier.Email)).toBe(
verifySignInEmailPasscode
);
expect(getVerifyPasscodeApi(UserFlow.forgotPassword, SignInIdentifier.Email)).toBe(
verifyForgotPasswordEmailPasscode
);
expect(getVerifyPasscodeApi(UserFlow.forgotPassword, 'sms')).toBe(
expect(getVerifyPasscodeApi(UserFlow.forgotPassword, SignInIdentifier.Sms)).toBe(
verifyForgotPasswordSmsPasscode
);
});

24
packages/ui/src/apis/utils.ts
View file

@ -1,3 +1,5 @@
import { SignInIdentifier } from '@logto/schemas';
import { UserFlow } from '@/types';
import {
@ -19,29 +21,29 @@ import {
sendSignInSmsPasscode,
} from './sign-in';
export type PasscodeChannel = 'sms' | 'email';
export type PasscodeChannel = SignInIdentifier.Email | SignInIdentifier.Sms;
export const getSendPasscodeApi = (
type: UserFlow,
method: PasscodeChannel
): ((_address: string) => Promise<{ success: boolean }>) => {
if (type === UserFlow.forgotPassword && method === 'email') {
if (type === UserFlow.forgotPassword && method === SignInIdentifier.Email) {
return sendForgotPasswordEmailPasscode;
}
if (type === UserFlow.forgotPassword && method === 'sms') {
if (type === UserFlow.forgotPassword && method === SignInIdentifier.Sms) {
return sendForgotPasswordSmsPasscode;
}
if (type === UserFlow.signIn && method === 'email') {
if (type === UserFlow.signIn && method === SignInIdentifier.Email) {
return sendSignInEmailPasscode;
}
if (type === UserFlow.signIn && method === 'sms') {
if (type === UserFlow.signIn && method === SignInIdentifier.Sms) {
return sendSignInSmsPasscode;
}
if (type === UserFlow.register && method === 'email') {
if (type === UserFlow.register && method === SignInIdentifier.Email) {
return sendRegisterEmailPasscode;
}
@ -56,23 +58,23 @@ export const getVerifyPasscodeApi = (
code: string,
socialToBind?: string
) => Promise<{ redirectTo?: string; success?: boolean }>) => {
if (type === UserFlow.forgotPassword && method === 'email') {
if (type === UserFlow.forgotPassword && method === SignInIdentifier.Email) {
return verifyForgotPasswordEmailPasscode;
}
if (type === UserFlow.forgotPassword && method === 'sms') {
if (type === UserFlow.forgotPassword && method === SignInIdentifier.Sms) {
return verifyForgotPasswordSmsPasscode;
}
if (type === UserFlow.signIn && method === 'email') {
if (type === UserFlow.signIn && method === SignInIdentifier.Email) {
return verifySignInEmailPasscode;
}
if (type === UserFlow.signIn && method === 'sms') {
if (type === UserFlow.signIn && method === SignInIdentifier.Sms) {
return verifySignInSmsPasscode;
}
if (type === UserFlow.register && method === 'email') {
if (type === UserFlow.register && method === SignInIdentifier.Email) {
return verifyRegisterEmailPasscode;
}

2
packages/ui/src/containers/EmailForm/EmailForm.tsx
View file

@ -23,7 +23,7 @@ type Props = {
errorMessage?: string;
submitButtonText?: TFuncKey;
clearErrorMessage?: () => void;
onSubmit: (email: string) => Promise<void>;
onSubmit: (email: string) => Promise<void> | void;
};
type FieldState = {

11
packages/ui/src/containers/EmailForm/EmailRegister.tsx
View file

@ -1,5 +1,9 @@
import { SignInIdentifier } from '@logto/schemas';
import usePasswordlessSendCode from '@/hooks/use-passwordless-send-code';
import { UserFlow } from '@/types';
import EmailForm from './EmailForm';
import useEmailRegister from './use-email-register';
type Props = {
className?: string;
@ -8,7 +12,10 @@ type Props = {
};
const EmailRegister = (props: Props) => {
const { onSubmit, errorMessage, clearErrorMessage } = useEmailRegister();
const { onSubmit, errorMessage, clearErrorMessage } = usePasswordlessSendCode(
UserFlow.register,
SignInIdentifier.Email
);
return (
<EmailForm

48
packages/ui/src/containers/EmailForm/EmailSignIn.tsx
View file

@ -1,16 +1,28 @@
import EmailForm from './EmailForm';
import type { MethodProps } from './use-email-sign-in';
import useEmailSignIn from './use-email-sign-in';
import type { SignIn } from '@logto/schemas';
import { SignInIdentifier } from '@logto/schemas';
type Props = {
import useContinueSignInWithPassword from '@/hooks/use-continue-sign-in-with-password';
import usePasswordlessSendCode from '@/hooks/use-passwordless-send-code';
import type { ArrayElement } from '@/types';
import { UserFlow } from '@/types';
import EmailForm from './EmailForm';
type FormProps = {
className?: string;
// eslint-disable-next-line react/boolean-prop-naming
autoFocus?: boolean;
signInMethod: MethodProps;
};
const EmailSignIn = ({ signInMethod, ...props }: Props) => {
const { onSubmit, errorMessage, clearErrorMessage } = useEmailSignIn(signInMethod);
type Props = FormProps & {
signInMethod: ArrayElement<SignIn['methods']>;
};
const EmailSignInWithPasscode = (props: FormProps) => {
const { onSubmit, errorMessage, clearErrorMessage } = usePasswordlessSendCode(
UserFlow.signIn,
SignInIdentifier.Email
);
return (
<EmailForm
@ -23,4 +35,26 @@ const EmailSignIn = ({ signInMethod, ...props }: Props) => {
);
};
const EmailSignInWithPassword = (props: FormProps) => {
const onSubmit = useContinueSignInWithPassword(SignInIdentifier.Email);
return <EmailForm onSubmit={onSubmit} {...props} submitButtonText="action.sign_in" />;
};
const EmailSignIn = ({ signInMethod, ...props }: Props) => {
const { password, isPasswordPrimary, verificationCode } = signInMethod;
// Continue with password
if (password && (isPasswordPrimary || !verificationCode)) {
return <EmailSignInWithPassword {...props} />;
}
// Send passcode
if (verificationCode) {
return <EmailSignInWithPasscode {...props} />;
}
return null;
};
export default EmailSignIn;

89
packages/ui/src/containers/EmailForm/use-email-sign-in.ts
View file

@ -1,89 +0,0 @@
import type { SignIn } from '@logto/schemas';
import { SignInIdentifier } from '@logto/schemas';
import { useState, useMemo, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { sendSignInEmailPasscode } from '@/apis/sign-in';
import type { ErrorHandlers } from '@/hooks/use-api';
import useApi from '@/hooks/use-api';
import type { ArrayElement } from '@/types';
import { UserFlow } from '@/types';
export type MethodProps = ArrayElement<SignIn['methods']>;
const useEmailSignIn = ({ password, isPasswordPrimary, verificationCode }: MethodProps) => {
const [errorMessage, setErrorMessage] = useState<string>();
const navigate = useNavigate();
const errorHandlers: ErrorHandlers = useMemo(
() => ({
'guard.invalid_input': () => {
setErrorMessage('invalid_email');
},
}),
[]
);
const clearErrorMessage = useCallback(() => {
setErrorMessage('');
}, []);
const { run: asyncSendSignInEmailPasscode } = useApi(sendSignInEmailPasscode, errorHandlers);
const navigateToPasswordPage = useCallback(
(email: string) => {
navigate(
{
pathname: `/${UserFlow.signIn}/${SignInIdentifier.Email}/password`,
search: location.search,
},
{ state: { email } }
);
},
[navigate]
);
const sendPasscode = useCallback(
async (email: string) => {
const result = await asyncSendSignInEmailPasscode(email);
if (!result) {
return;
}
navigate(
{
pathname: `/${UserFlow.signIn}/${SignInIdentifier.Email}/passcode-validation`,
search: location.search,
},
{ state: { email } }
);
},
[asyncSendSignInEmailPasscode, navigate]
);
const onSubmit = useCallback(
async (email: string) => {
// Email Password SignIn Flow
if (password && (isPasswordPrimary || !verificationCode)) {
navigateToPasswordPage(email);
return;
}
// Email Passwordless SignIn Flow
if (verificationCode) {
await sendPasscode(email);
}
},
[isPasswordPrimary, navigateToPasswordPage, password, sendPasscode, verificationCode]
);
return {
errorMessage,
clearErrorMessage,
onSubmit,
};
};
export default useEmailSignIn;

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

@ -1,3 +1,4 @@
import { SignInIdentifier } from '@logto/schemas';
import { act, fireEvent, waitFor } from '@testing-library/react';
import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
@ -46,7 +47,7 @@ describe('<PasscodeValidation />', () => {
it('render counter', () => {
const { queryByText } = renderWithPageContext(
<PasscodeValidation type={UserFlow.signIn} method="email" target={email} />
<PasscodeValidation type={UserFlow.signIn} method={SignInIdentifier.Email} target={email} />
);
expect(queryByText('description.resend_after_seconds')).not.toBeNull();
@ -60,7 +61,7 @@ describe('<PasscodeValidation />', () => {
it('fire resend event', async () => {
const { getByText } = renderWithPageContext(
<PasscodeValidation type={UserFlow.signIn} method="email" target={email} />
<PasscodeValidation type={UserFlow.signIn} method={SignInIdentifier.Email} target={email} />
);
act(() => {
jest.advanceTimersByTime(1e3 * 60);
@ -76,7 +77,7 @@ describe('<PasscodeValidation />', () => {
it('fire validate passcode event', async () => {
const { container } = renderWithPageContext(
<PasscodeValidation type={UserFlow.signIn} method="email" target={email} />
<PasscodeValidation type={UserFlow.signIn} method={SignInIdentifier.Email} target={email} />
);
const inputs = container.querySelectorAll('input');
@ -95,7 +96,7 @@ describe('<PasscodeValidation />', () => {
verifyPasscodeApi.mockImplementationOnce(() => ({ redirectTo: 'foo.com' }));
const { container } = renderWithPageContext(
<PasscodeValidation type={UserFlow.signIn} method="email" target={email} />
<PasscodeValidation type={UserFlow.signIn} method={SignInIdentifier.Email} target={email} />
);
const inputs = container.querySelectorAll('input');
@ -119,7 +120,11 @@ describe('<PasscodeValidation />', () => {
verifyPasscodeApi.mockImplementationOnce(() => ({ success: true }));
const { container } = renderWithPageContext(
<PasscodeValidation type={UserFlow.forgotPassword} method="email" target={email} />
<PasscodeValidation
type={UserFlow.forgotPassword}
method={SignInIdentifier.Email}
target={email}
/>
);
const inputs = container.querySelectorAll('input');

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

@ -1,3 +1,4 @@
import type { SignInIdentifier } from '@logto/schemas';
import classNames from 'classnames';
import { useState, useEffect, useContext, useCallback, useMemo } from 'react';
import { useTranslation, Trans } from 'react-i18next';
@ -19,7 +20,7 @@ import usePasscodeValidationErrorHandler from './use-passcode-validation-error-h
type Props = {
type: UserFlow;
method: 'email' | 'sms';
method: SignInIdentifier.Email | SignInIdentifier.Sms;
target: string;
className?: string;
};

3
packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
View file

@ -1,3 +1,4 @@
import { SignInIdentifier } from '@logto/schemas';
import classNames from 'classnames';
import { useCallback, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@ -55,7 +56,7 @@ const EmailPasswordless = ({
[setFieldErrors]
);
const sendPasscode = getSendPasscodeApi(type, 'email');
const sendPasscode = getSendPasscodeApi(type, SignInIdentifier.Email);
const { result, run: asyncSendPasscode } = useApi(sendPasscode, errorHandlers);
const onSubmitHandler = useCallback(

3
packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
View file

@ -1,3 +1,4 @@
import { SignInIdentifier } from '@logto/schemas';
import classNames from 'classnames';
import { useCallback, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@ -56,7 +57,7 @@ const PhonePasswordless = ({
[setFieldErrors]
);
const sendPasscode = getSendPasscodeApi(type, 'sms');
const sendPasscode = getSendPasscodeApi(type, SignInIdentifier.Sms);
const { result, run: asyncSendPasscode } = useApi(sendPasscode, errorHandlers);
const phoneNumberValidation = useCallback(

2
packages/ui/src/containers/PhoneForm/PhoneForm.tsx
View file

@ -23,7 +23,7 @@ type Props = {
errorMessage?: string;
submitButtonText?: TFuncKey;
clearErrorMessage?: () => void;
onSubmit: (phone: string) => Promise<void>;
onSubmit: (phone: string) => Promise<void> | void;
};
type FieldState = {

11
packages/ui/src/containers/PhoneForm/SmsRegister.tsx
View file

@ -1,5 +1,9 @@
import { SignInIdentifier } from '@logto/schemas';
import usePasswordlessSendCode from '@/hooks/use-passwordless-send-code';
import { UserFlow } from '@/types';
import PhoneForm from './PhoneForm';
import useSmsRegister from './use-sms-register';
type Props = {
className?: string;
@ -8,7 +12,10 @@ type Props = {
};
const SmsRegister = (props: Props) => {
const { onSubmit, errorMessage, clearErrorMessage } = useSmsRegister();
const { onSubmit, errorMessage, clearErrorMessage } = usePasswordlessSendCode(
UserFlow.register,
SignInIdentifier.Sms
);
return (
<PhoneForm

48
packages/ui/src/containers/PhoneForm/SmsSignIn.tsx
View file

@ -1,16 +1,28 @@
import PhoneForm from './PhoneForm';
import type { MethodProps } from './use-sms-sign-in';
import useSmsSignIn from './use-sms-sign-in';
import type { SignIn } from '@logto/schemas';
import { SignInIdentifier } from '@logto/schemas';
type Props = {
import useContinueSignInWithPassword from '@/hooks/use-continue-sign-in-with-password';
import usePasswordlessSendCode from '@/hooks/use-passwordless-send-code';
import type { ArrayElement } from '@/types';
import { UserFlow } from '@/types';
import PhoneForm from './PhoneForm';
type FormProps = {
className?: string;
// eslint-disable-next-line react/boolean-prop-naming
autoFocus?: boolean;
signInMethod: MethodProps;
};
const SmsSignIn = ({ signInMethod, ...props }: Props) => {
const { onSubmit, errorMessage, clearErrorMessage } = useSmsSignIn(signInMethod);
type Props = FormProps & {
signInMethod: ArrayElement<SignIn['methods']>;
};
const SmsSignInWithPasscode = (props: FormProps) => {
const { onSubmit, errorMessage, clearErrorMessage } = usePasswordlessSendCode(
UserFlow.signIn,
SignInIdentifier.Sms
);
return (
<PhoneForm
@ -23,4 +35,26 @@ const SmsSignIn = ({ signInMethod, ...props }: Props) => {
);
};
const SmsSignInWithPassword = (props: FormProps) => {
const onSubmit = useContinueSignInWithPassword(SignInIdentifier.Sms);
return <PhoneForm onSubmit={onSubmit} {...props} submitButtonText="action.sign_in" />;
};
const SmsSignIn = ({ signInMethod, ...props }: Props) => {
const { password, isPasswordPrimary, verificationCode } = signInMethod;
// Continue with password
if (password && (isPasswordPrimary || !verificationCode)) {
return <SmsSignInWithPassword {...props} />;
}
// Send passcode
if (verificationCode) {
return <SmsSignInWithPasscode {...props} />;
}
return null;
};
export default SmsSignIn;

55
packages/ui/src/containers/PhoneForm/use-sms-register.ts
View file

@ -1,55 +0,0 @@
import { SignInIdentifier } from '@logto/schemas';
import { useState, useMemo, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { sendRegisterSmsPasscode } from '@/apis/register';
import type { ErrorHandlers } from '@/hooks/use-api';
import useApi from '@/hooks/use-api';
import { UserFlow } from '@/types';
const useSmsRegister = () => {
const [errorMessage, setErrorMessage] = useState<string>();
const navigate = useNavigate();
const errorHandlers: ErrorHandlers = useMemo(
() => ({
'guard.invalid_input': () => {
setErrorMessage('invalid_phone');
},
}),
[]
);
const clearErrorMessage = useCallback(() => {
setErrorMessage('');
}, []);
const { run: asyncSendRegisterSmsPasscode } = useApi(sendRegisterSmsPasscode, errorHandlers);
const onSubmit = useCallback(
async (phone: string) => {
const result = await asyncSendRegisterSmsPasscode(phone);
if (!result) {
return;
}
navigate(
{
pathname: `/${UserFlow.register}/${SignInIdentifier.Sms}/passcode-validation`,
search: location.search,
},
{ state: { phone } }
);
},
[asyncSendRegisterSmsPasscode, navigate]
);
return {
errorMessage,
clearErrorMessage,
onSubmit,
};
};
export default useSmsRegister;

89
packages/ui/src/containers/PhoneForm/use-sms-sign-in.ts
View file

@ -1,89 +0,0 @@
import type { SignIn } from '@logto/schemas';
import { SignInIdentifier } from '@logto/schemas';
import { useState, useMemo, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { sendSignInSmsPasscode } from '@/apis/sign-in';
import type { ErrorHandlers } from '@/hooks/use-api';
import useApi from '@/hooks/use-api';
import type { ArrayElement } from '@/types';
import { UserFlow } from '@/types';
export type MethodProps = ArrayElement<SignIn['methods']>;
const useEmailSignIn = ({ password, isPasswordPrimary, verificationCode }: MethodProps) => {
const [errorMessage, setErrorMessage] = useState<string>();
const navigate = useNavigate();
const errorHandlers: ErrorHandlers = useMemo(
() => ({
'guard.invalid_input': () => {
setErrorMessage('invalid_phone');
},
}),
[]
);
const clearErrorMessage = useCallback(() => {
setErrorMessage('');
}, []);
const { run: asyncSendSignInEmailPasscode } = useApi(sendSignInSmsPasscode, errorHandlers);
const navigateToPasswordPage = useCallback(
(phone: string) => {
navigate(
{
pathname: `/${UserFlow.signIn}/${SignInIdentifier.Sms}/password`,
search: location.search,
},
{ state: { phone } }
);
},
[navigate]
);
const sendPasscode = useCallback(
async (phone: string) => {
const result = await asyncSendSignInEmailPasscode(phone);
if (!result) {
return;
}
navigate(
{
pathname: `/${UserFlow.signIn}/${SignInIdentifier.Sms}/passcode-validation`,
search: location.search,
},
{ state: { phone } }
);
},
[asyncSendSignInEmailPasscode, navigate]
);
const onSubmit = useCallback(
async (phone: string) => {
// Sms Password SignIn Flow
if (password && (isPasswordPrimary || !verificationCode)) {
navigateToPasswordPage(phone);
return;
}
// Sms Passwordless SignIn Flow
if (verificationCode) {
await sendPasscode(phone);
}
},
[isPasswordPrimary, navigateToPasswordPage, password, sendPasscode, verificationCode]
);
return {
errorMessage,
clearErrorMessage,
onSubmit,
};
};
export default useEmailSignIn;

20
packages/ui/src/hooks/use-continue-sign-in-with-password.ts Normal file
View file

@ -0,0 +1,20 @@
import { SignInIdentifier } from '@logto/schemas';
import { useNavigate } from 'react-router-dom';
import { UserFlow } from '@/types';
const useContinueSignInWithPassword = (method: SignInIdentifier.Email | SignInIdentifier.Sms) => {
const navigate = useNavigate();
return (value: string) => {
navigate(
{
pathname: `/${UserFlow.signIn}/${method}/password`,
search: location.search,
},
{ state: method === SignInIdentifier.Email ? { email: value } : { phone: value } }
);
};
};
export default useContinueSignInWithPassword;

29
packages/ui/src/containers/EmailForm/use-email-register.ts → packages/ui/src/hooks/use-passwordless-send-code.ts
View file

@ -2,33 +2,38 @@ import { SignInIdentifier } from '@logto/schemas';
import { useState, useMemo, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { sendRegisterEmailPasscode } from '@/apis/register';
import { getSendPasscodeApi } from '@/apis/utils';
import type { ErrorHandlers } from '@/hooks/use-api';
import useApi from '@/hooks/use-api';
import { UserFlow } from '@/types';
import type { UserFlow } from '@/types';
const useEmailRegister = () => {
const usePasswordlessSendCode = (
flow: UserFlow,
method: SignInIdentifier.Email | SignInIdentifier.Sms
) => {
const [errorMessage, setErrorMessage] = useState<string>();
const navigate = useNavigate();
const errorHandlers: ErrorHandlers = useMemo(
() => ({
'guard.invalid_input': () => {
setErrorMessage('invalid_email');
setErrorMessage(method === SignInIdentifier.Email ? 'invalid_email' : 'invalid_phone');
},
}),
[]
[method]
);
const clearErrorMessage = useCallback(() => {
setErrorMessage('');
}, []);
const { run: asyncSendRegisterEmailPasscode } = useApi(sendRegisterEmailPasscode, errorHandlers);
const api = getSendPasscodeApi(flow, method);
const { run: asyncSendPasscode } = useApi(api, errorHandlers);
const onSubmit = useCallback(
async (email: string) => {
const result = await asyncSendRegisterEmailPasscode(email);
async (value: string) => {
const result = await asyncSendPasscode(value);
if (!result) {
return;
@ -36,13 +41,13 @@ const useEmailRegister = () => {
navigate(
{
pathname: `/${UserFlow.register}/${SignInIdentifier.Email}/passcode-validation`,
pathname: `/${flow}/${method}/passcode-validation`,
search: location.search,
},
{ state: { email } }
{ state: method === SignInIdentifier.Email ? { email: value } : { phone: value } }
);
},
[asyncSendRegisterEmailPasscode, navigate]
[asyncSendPasscode, flow, method, navigate]
);
return {
@ -52,4 +57,4 @@ const useEmailRegister = () => {
};
};
export default useEmailRegister;
export default usePasswordlessSendCode;