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): refactor passwordless flow

Browse source 
refactor passwordless flow
This commit is contained in:
simeng-li 2022-10-13 19:05:21 +08:00
parent 5d50c02703
commit 5f8875c688
No known key found for this signature in database
GPG key ID: 14EA7BB1541E8075
16 changed files with 381 additions and 272 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/core/src/routes/session/middleware/passwordless-action.ts
View file

@ -73,7 +73,7 @@ export const emailSignInAction = <StateT, ContextT extends WithLogContext, Respo
assertThat(
await hasUserWithEmail(email),
new RequestError({ code: 'user.phone_not_exists', status: 404 })
new RequestError({ code: 'user.email_not_exists', status: 404 })
);
const { id } = await findUserByEmail(email);

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

@ -47,6 +47,7 @@ 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.',
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.',

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

@ -49,6 +49,7 @@ 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
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:

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

@ -47,6 +47,7 @@ const translation = {
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
bind_account_title: '계정 연동',
social_create_account: '계정이 없으신가요? 새로운 계정을 만들고 연동해보세요.',
social_bind_account: '계정이 이미 있으신가요? 로그인하여 다른 계정과 연동해보세요.',

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

@ -47,6 +47,7 @@ const translation = {
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
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.',

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

@ -48,6 +48,7 @@ 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
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.',

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

@ -47,6 +47,7 @@ const translation = {
continue_with: '通过以下方式继续',
create_account_id_exists: '{{ type }}为 {{ value }} 的帐号已存在，你要登录吗？',
sign_in_id_does_not_exists: '{{ type }}为 {{ value }} 的帐号不存在，你要创建一个新帐号吗？',
forgot_password_id_does_not_exits: '{{ type }}为 {{ value }} 的帐号不存在。',
bind_account_title: '绑定帐号',
social_create_account: '没有帐号？你可以创建一个帐号并绑定。',
social_bind_account: '已有帐号？登录以绑定社交身份。',

18
packages/ui/src/apis/forgot-password.ts
View file

@ -21,8 +21,8 @@ export const sendForgotPasswordSmsPasscode = async (phone: string) => {
return { success: true };
};
export const verifyForgotPasswordSmsPasscode = async (phone: string, code: string) =>
api
export const verifyForgotPasswordSmsPasscode = async (phone: string, code: string) => {
await api
.post('/api/session/passwordless/sms/verify', {
json: {
phone,
@ -30,7 +30,10 @@ export const verifyForgotPasswordSmsPasscode = async (phone: string, code: strin
flow: PasscodeType.ForgotPassword,
},
})
.json<Response>();
.json();
return { success: true };
};
export const sendForgotPasswordEmailPasscode = async (email: string) => {
await api
@ -45,8 +48,8 @@ export const sendForgotPasswordEmailPasscode = async (email: string) => {
return { success: true };
};
export const verifyForgotPasswordEmailPasscode = async (email: string, code: string) =>
api
export const verifyForgotPasswordEmailPasscode = async (email: string, code: string) => {
await api
.post('/api/session/passwordless/email/verify', {
json: {
email,
@ -54,7 +57,10 @@ export const verifyForgotPasswordEmailPasscode = async (email: string, code: str
flow: PasscodeType.ForgotPassword,
},
})
.json<Response>();
.json();
return { success: true };
};
export const resetPassword = async (password: string) => {
await api

46
packages/ui/src/apis/index.test.ts
View file

@ -11,6 +11,8 @@ import {
} from './forgot-password';
import {
register,
registerWithSms,
registerWithEmail,
sendRegisterEmailPasscode,
sendRegisterSmsPasscode,
verifyRegisterEmailPasscode,
@ -18,6 +20,8 @@ import {
} from './register';
import {
signInBasic,
signInWithSms,
signInWithEmail,
sendSignInSmsPasscode,
sendSignInEmailPasscode,
verifySignInEmailPasscode,
@ -66,6 +70,26 @@ describe('api', () => {
});
});
it('signInWithSms', async () => {
mockKyPost.mockReturnValueOnce({
json: () => ({
redirectTo: '/',
}),
});
await signInWithSms();
expect(ky.post).toBeCalledWith('/api/session/sign-in/passwordless/sms');
});
it('signInWithEmail', async () => {
mockKyPost.mockReturnValueOnce({
json: () => ({
redirectTo: '/',
}),
});
await signInWithEmail();
expect(ky.post).toBeCalledWith('/api/session/sign-in/passwordless/email');
});
it('signInBasic with bind social account', async () => {
mockKyPost.mockReturnValueOnce({
json: () => ({
@ -97,12 +121,14 @@ describe('api', () => {
});
it('verifySignInSmsPasscode', async () => {
mockKyPost.mockReturnValueOnce({}).mockReturnValueOnce({
mockKyPost.mockReturnValueOnce({
json: () => ({
redirectTo: '/',
}),
});
await verifySignInSmsPasscode(phone, code);
expect(ky.post).toBeCalledWith('/api/session/passwordless/sms/verify', {
json: {
phone,
@ -110,7 +136,6 @@ describe('api', () => {
flow: PasscodeType.SignIn,
},
});
expect(ky.post).toBeCalledWith('/api/session/sign-in/passwordless/sms');
});
it('sendSignInEmailPasscode', async () => {
@ -124,12 +149,14 @@ describe('api', () => {
});
it('verifySignInEmailPasscode', async () => {
mockKyPost.mockReturnValueOnce({}).mockReturnValueOnce({
mockKyPost.mockReturnValueOnce({
json: () => ({
redirectTo: '/',
}),
});
await verifySignInEmailPasscode(email, code);
expect(ky.post).toBeCalledWith('/api/session/passwordless/email/verify', {
json: {
email,
@ -137,7 +164,6 @@ describe('api', () => {
flow: PasscodeType.SignIn,
},
});
expect(ky.post).toBeCalledWith('/api/session/sign-in/passwordless/email');
});
it('consent', async () => {
@ -155,6 +181,16 @@ describe('api', () => {
});
});
it('registerWithSms', async () => {
await registerWithSms();
expect(ky.post).toBeCalledWith('/api/session/register/passwordless/sms');
});
it('registerWithEmail', async () => {
await registerWithEmail();
expect(ky.post).toBeCalledWith('/api/session/register/passwordless/email');
});
it('sendRegisterSmsPasscode', async () => {
await sendRegisterSmsPasscode(phone);
expect(ky.post).toBeCalledWith('/api/session/passwordless/sms/send', {
@ -174,7 +210,6 @@ describe('api', () => {
flow: PasscodeType.Register,
},
});
expect(ky.post).toBeCalledWith('/api/session/register/passwordless/sms');
});
it('sendRegisterEmailPasscode', async () => {
@ -196,7 +231,6 @@ describe('api', () => {
flow: PasscodeType.Register,
},
});
expect(ky.post).toBeCalledWith('/api/session/register/passwordless/email');
});
it('sendForgotPasswordSmsPasscode', async () => {

64
packages/ui/src/apis/register.ts
View file

@ -4,11 +4,11 @@ import api from './api';
const apiPrefix = '/api/session';
export const register = async (username: string, password: string) => {
type Response = {
redirectTo: string;
};
type Response = {
redirectTo: string;
};
export const register = async (username: string, password: string) => {
return api
.post(`${apiPrefix}/register/username-password`, {
json: {
@ -19,6 +19,12 @@ export const register = async (username: string, password: string) => {
.json<Response>();
};
export const registerWithSms = async () =>
api.post(`${apiPrefix}/register/passwordless/sms`).json<Response>();
export const registerWithEmail = async () =>
api.post(`${apiPrefix}/register/passwordless/email`).json<Response>();
export const sendRegisterSmsPasscode = async (phone: string) => {
await api
.post(`${apiPrefix}/passwordless/sms/send`, {
@ -32,21 +38,16 @@ export const sendRegisterSmsPasscode = async (phone: string) => {
return { success: true };
};
export const verifyRegisterSmsPasscode = async (phone: string, code: string) => {
type Response = {
redirectTo: string;
};
await api.post(`${apiPrefix}/passwordless/sms/verify`, {
json: {
phone,
code,
flow: PasscodeType.Register,
},
});
return api.post(`${apiPrefix}/register/passwordless/sms`).json<Response>();
};
export const verifyRegisterSmsPasscode = async (phone: string, code: string) =>
api
.post(`${apiPrefix}/passwordless/sms/verify`, {
json: {
phone,
code,
flow: PasscodeType.Register,
},
})
.json<Response>();
export const sendRegisterEmailPasscode = async (email: string) => {
await api
@ -61,18 +62,13 @@ export const sendRegisterEmailPasscode = async (email: string) => {
return { success: true };
};
export const verifyRegisterEmailPasscode = async (email: string, code: string) => {
type Response = {
redirectTo: string;
};
await api.post(`${apiPrefix}/passwordless/email/verify`, {
json: {
email,
code,
flow: PasscodeType.Register,
},
});
return api.post(`${apiPrefix}/register/passwordless/email`).json<Response>();
};
export const verifyRegisterEmailPasscode = async (email: string, code: string) =>
api
.post(`${apiPrefix}/passwordless/email/verify`, {
json: {
email,
code,
flow: PasscodeType.Register,
},
})
.json<Response>();

76
packages/ui/src/apis/sign-in.ts
View file

@ -3,13 +3,15 @@ import { PasscodeType } from '@logto/schemas';
import api from './api';
import { bindSocialAccount } from './social';
export const signInBasic = async (username: string, password: string, socialToBind?: string) => {
type Response = {
redirectTo: string;
};
const apiPrefix = '/api/session';
type Response = {
redirectTo: string;
};
export const signInBasic = async (username: string, password: string, socialToBind?: string) => {
const result = await api
.post('/api/session/sign-in/username-password', {
.post(`${apiPrefix}/sign-in/username-password`, {
json: {
username,
password,
@ -24,9 +26,29 @@ export const signInBasic = async (username: string, password: string, socialToBi
return result;
};
export const signInWithSms = async (socialToBind?: string) => {
const result = await api.post(`${apiPrefix}/sign-in/passwordless/sms`).json<Response>();
if (result.redirectTo && socialToBind) {
await bindSocialAccount(socialToBind);
}
return result;
};
export const signInWithEmail = async (socialToBind?: string) => {
const result = await api.post(`${apiPrefix}/sign-in/passwordless/email`).json<Response>();
if (result.redirectTo && socialToBind) {
await bindSocialAccount(socialToBind);
}
return result;
};
export const sendSignInSmsPasscode = async (phone: string) => {
await api
.post('/api/session/passwordless/sms/send', {
.post(`${apiPrefix}/passwordless/sms/send`, {
json: {
phone,
flow: PasscodeType.SignIn,
@ -42,19 +64,15 @@ export const verifySignInSmsPasscode = async (
code: string,
socialToBind?: string
) => {
type Response = {
redirectTo: string;
};
await api.post('/api/session/passwordless/sms/verify', {
json: {
phone,
code,
flow: PasscodeType.SignIn,
},
});
const result = await api.post('/api/session/sign-in/passwordless/sms').json<Response>();
const result = await api
.post(`${apiPrefix}/passwordless/sms/verify`, {
json: {
phone,
code,
flow: PasscodeType.SignIn,
},
})
.json<Response>();
if (result.redirectTo && socialToBind) {
await bindSocialAccount(socialToBind);
@ -65,7 +83,7 @@ export const verifySignInSmsPasscode = async (
export const sendSignInEmailPasscode = async (email: string) => {
await api
.post('/api/session/passwordless/email/send', {
.post(`${apiPrefix}/passwordless/email/send`, {
json: {
email,
flow: PasscodeType.SignIn,
@ -85,15 +103,15 @@ export const verifySignInEmailPasscode = async (
redirectTo: string;
};
await api.post('/api/session/passwordless/email/verify', {
json: {
email,
code,
flow: PasscodeType.SignIn,
},
});
const result = await api.post('/api/session/sign-in/passwordless/email').json<Response>();
const result = await api
.post(`${apiPrefix}/passwordless/email/verify`, {
json: {
email,
code,
flow: PasscodeType.SignIn,
},
})
.json<Response>();
if (result.redirectTo && socialToBind) {
await bindSocialAccount(socialToBind);

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

@ -7,8 +7,8 @@ import { useTimer } from 'react-timer-hook';
import { getSendPasscodeApi, getVerifyPasscodeApi } from '@/apis/utils';
import Passcode, { defaultLength } from '@/components/Passcode';
import TextLink from '@/components/TextLink';
import usePasswordlessErrorHandler from '@/containers/PasscodeValidation/use-passwordless-error-handler';
import useApi, { ErrorHandlers } from '@/hooks/use-api';
import { useConfirmModal } from '@/hooks/use-confirm-modal';
import { PageContext } from '@/hooks/use-page-context';
import { UserFlow, SearchParameters } from '@/types';
import { getSearchParameters } from '@/utils';
@ -36,7 +36,6 @@ const PasscodeValidation = ({ type, method, className, target }: Props) => {
const [error, setError] = useState<string>();
const { setToast } = useContext(PageContext);
const { t } = useTranslation();
const { show } = useConfirmModal();
const navigate = useNavigate();
const { seconds, isRunning, restart } = useTimer({
@ -44,27 +43,22 @@ const PasscodeValidation = ({ type, method, className, target }: Props) => {
expiryTimestamp: getTimeout(),
});
const { passwordlessErrorHandlers } = usePasswordlessErrorHandler(type, target);
const verifyPasscodeErrorHandlers: ErrorHandlers = useMemo(
() => ({
'passcode.expired': (error) => {
setError(error.message);
},
'user.phone_not_exists': async (error) => {
await show({ type: 'alert', ModalContent: error.message, cancelText: 'action.got_it' });
navigate(-1);
},
'user.email_not_exists': async (error) => {
await show({ type: 'alert', ModalContent: error.message, cancelText: 'action.got_it' });
navigate(-1);
},
'passcode.code_mismatch': (error) => {
setError(error.message);
},
...passwordlessErrorHandlers,
callback: () => {
setCode([]);
},
}),
[navigate, show]
[passwordlessErrorHandlers]
);
const { result: verifyPasscodeResult, run: verifyPassCode } = useApi(

190
packages/ui/src/containers/PasscodeValidation/use-passwordless-error-handler.ts Normal file
View file

@ -0,0 +1,190 @@
import { useCallback, useMemo, useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { registerWithEmail, registerWithSms } from '@/apis/register';
import { signInWithEmail, signInWithSms } from '@/apis/sign-in';
import useApi, { ErrorHandlers } from '@/hooks/use-api';
import { useConfirmModal } from '@/hooks/use-confirm-modal';
import { PageContext } from '@/hooks/use-page-context';
import { UserFlow, SearchParameters } from '@/types';
import { getSearchParameters } from '@/utils';
import { formatPhoneNumberWithCountryCallingCode } from '@/utils/country-code';
const usePasswordlessErrorHandler = (type: UserFlow, target: string) => {
const { t } = useTranslation();
const { show } = useConfirmModal();
const navigate = useNavigate();
const { setToast } = useContext(PageContext);
const { run: registerWithSmsAsync } = useApi(registerWithSms);
const { run: registerWithEmailAsync } = useApi(registerWithEmail);
const { run: signInWithSmsAsync } = useApi(signInWithSms);
const { run: signInWithEmailAsync } = useApi(signInWithEmail);
const socialToBind = getSearchParameters(location.search, SearchParameters.bindWithSocial);
const phoneNotExistSignInHandler = useCallback(async () => {
const [confirm] = await show({
ModalContent: t('description.sign_in_id_does_not_exists', {
type: t(`description.phone_number`),
value: formatPhoneNumberWithCountryCallingCode(target),
}),
});
if (!confirm) {
navigate(-1);
return;
}
const result = await registerWithSmsAsync();
if (result?.redirectTo) {
window.location.replace(result.redirectTo);
}
}, [navigate, registerWithSmsAsync, show, t, target]);
const emailNotExistSignInHandler = useCallback(async () => {
const [confirm] = await show({
ModalContent: t('description.sign_in_id_does_not_exists', {
type: t(`description.email`),
value: target,
}),
});
if (!confirm) {
navigate(-1);
return;
}
const result = await registerWithEmailAsync();
if (result?.redirectTo) {
window.location.replace(result.redirectTo);
}
}, [navigate, registerWithEmailAsync, show, t, target]);
const phoneExistRegisterHandler = useCallback(async () => {
const [confirm] = await show({
ModalContent: t('description.create_account_id_exists', {
type: t(`description.phone_number`),
value: formatPhoneNumberWithCountryCallingCode(target),
}),
});
if (!confirm) {
navigate(-1);
return;
}
const result = await signInWithSmsAsync();
if (result?.redirectTo) {
window.location.replace(result.redirectTo);
}
}, [navigate, show, signInWithSmsAsync, t, target]);
const emailExistRegisterHandler = useCallback(async () => {
const [confirm] = await show({
ModalContent: t('description.create_account_id_exists', {
type: t(`description.email`),
value: target,
}),
});
if (!confirm) {
navigate(-1);
return;
}
const result = await signInWithEmailAsync();
if (result?.redirectTo) {
window.location.replace(result.redirectTo);
}
}, [navigate, show, signInWithEmailAsync, t, target]);
const phoneNotExistForgotPasswordHandler = useCallback(async () => {
await show({
type: 'alert',
ModalContent: t('description.forgot_password_id_does_not_exits', {
type: t(`description.phone_number`),
value: formatPhoneNumberWithCountryCallingCode(target),
}),
cancelText: 'action.got_it',
});
navigate(-1);
}, [navigate, show, t, target]);
const emailNotExistForgotPasswordHandler = useCallback(async () => {
await show({
type: 'alert',
ModalContent: t('description.forgot_password_id_does_not_exits', {
type: t(`description.email`),
value: target,
}),
cancelText: 'action.got_it',
});
navigate(-1);
}, [navigate, show, t, target]);
const passwordlessErrorHandlers = useMemo<ErrorHandlers>(
() => ({
'user.phone_not_exists': async (error) => {
if (type === 'forgot-password') {
await phoneNotExistForgotPasswordHandler();
return;
}
// Directly display the error if user is trying to bind with social
if (socialToBind) {
setToast(error.message);
}
await phoneNotExistSignInHandler();
},
'user.email_not_exists': async (error) => {
if (type === 'forgot-password') {
await emailNotExistForgotPasswordHandler();
return;
}
// Directly display the error if user is trying to bind with social
if (socialToBind) {
setToast(error.message);
}
await emailNotExistSignInHandler();
},
'user.phone_exists_register': async () => {
await phoneExistRegisterHandler();
},
'user.email_exists_register': async () => {
await emailExistRegisterHandler();
},
}),
[
emailExistRegisterHandler,
emailNotExistForgotPasswordHandler,
emailNotExistSignInHandler,
phoneExistRegisterHandler,
phoneNotExistForgotPasswordHandler,
phoneNotExistSignInHandler,
setToast,
socialToBind,
type,
]
);
return {
passwordlessErrorHandlers,
};
};
export default usePasswordlessErrorHandler;

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

@ -1,5 +1,5 @@
import classNames from 'classnames';
import { useCallback, useEffect, useState, useMemo, useContext } from 'react';
import { useCallback, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
@ -9,13 +9,10 @@ import Input from '@/components/Input';
import TermsOfUse from '@/containers/TermsOfUse';
import useApi, { ErrorHandlers } from '@/hooks/use-api';
import useForm from '@/hooks/use-form';
import { PageContext } from '@/hooks/use-page-context';
import useTerms from '@/hooks/use-terms';
import { UserFlow, SearchParameters } from '@/types';
import { getSearchParameters } from '@/utils';
import { UserFlow } from '@/types';
import { emailValidation } from '@/utils/field-validations';
import PasswordlessConfirmModal from './PasswordlessConfirmModal';
import PasswordlessSwitch from './PasswordlessSwitch';
import * as styles from './index.module.scss';
@ -41,7 +38,6 @@ const EmailPasswordless = ({
hasSwitch = false,
className,
}: Props) => {
const { setToast } = useContext(PageContext);
const { t } = useTranslation();
const navigate = useNavigate();
@ -49,30 +45,13 @@ const EmailPasswordless = ({
const { fieldValue, setFieldValue, setFieldErrors, register, validateForm } =
useForm(defaultState);
const [showPasswordlessConfirmModal, setShowPasswordlessConfirmModal] = useState(false);
const errorHandlers: ErrorHandlers = useMemo(
() => ({
'user.email_not_exists': (error) => {
const socialToBind = getSearchParameters(location.search, SearchParameters.bindWithSocial);
// Directly display the error if user is trying to bind with social
if (socialToBind) {
setToast(error.message);
return;
}
setShowPasswordlessConfirmModal(true);
},
'user.email_exists_register': () => {
setShowPasswordlessConfirmModal(true);
},
'guard.invalid_input': () => {
setFieldErrors({ email: 'invalid_email' });
},
}),
[setFieldErrors, setToast]
[setFieldErrors]
);
const sendPasscode = getSendPasscodeApi(type, 'email');
@ -95,10 +74,6 @@ const EmailPasswordless = ({
[validateForm, hasTerms, termsValidation, asyncSendPasscode, fieldValue.email]
);
const onModalCloseHandler = useCallback(() => {
setShowPasswordlessConfirmModal(false);
}, []);
useEffect(() => {
if (result) {
navigate(
@ -112,39 +87,30 @@ const EmailPasswordless = ({
}, [fieldValue.email, navigate, result, type]);
return (
<>
<form className={classNames(styles.form, className)} onSubmit={onSubmitHandler}>
<div className={styles.formFields}>
<Input
type="email"
name="email"
autoComplete="email"
inputMode="email"
placeholder={t('input.email')}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={autoFocus}
className={styles.inputField}
{...register('email', emailValidation)}
onClear={() => {
setFieldValue((state) => ({ ...state, email: '' }));
}}
/>
{hasSwitch && <PasswordlessSwitch target="sms" className={styles.switch} />}
</div>
<form className={classNames(styles.form, className)} onSubmit={onSubmitHandler}>
<div className={styles.formFields}>
<Input
type="email"
name="email"
autoComplete="email"
inputMode="email"
placeholder={t('input.email')}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={autoFocus}
className={styles.inputField}
{...register('email', emailValidation)}
onClear={() => {
setFieldValue((state) => ({ ...state, email: '' }));
}}
/>
{hasSwitch && <PasswordlessSwitch target="sms" className={styles.switch} />}
</div>
{hasTerms && <TermsOfUse className={styles.terms} />}
<Button title="action.continue" onClick={async () => onSubmitHandler()} />
{hasTerms && <TermsOfUse className={styles.terms} />}
<Button title="action.continue" onClick={async () => onSubmitHandler()} />
<input hidden type="submit" />
</form>
<PasswordlessConfirmModal
isOpen={showPasswordlessConfirmModal}
type={type === 'sign-in' ? 'register' : 'sign-in'}
method="email"
value={fieldValue.email}
onClose={onModalCloseHandler}
/>
</>
<input hidden type="submit" />
</form>
);
};

67
packages/ui/src/containers/Passwordless/PasswordlessConfirmModal.tsx
View file

@ -1,67 +0,0 @@
import { useEffect, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { getSendPasscodeApi, PasscodeChannel } from '@/apis/utils';
import { WebModal, MobileModal } from '@/components/ConfirmModal';
import useApi from '@/hooks/use-api';
import usePlatform from '@/hooks/use-platform';
import { UserFlow } from '@/types';
import { formatPhoneNumberWithCountryCallingCode } from '@/utils/country-code';
type Props = {
className?: string;
isOpen?: boolean;
type: UserFlow;
method: PasscodeChannel;
value: string;
onClose: () => void;
};
const PasswordlessConfirmModal = ({ className, isOpen, type, method, value, onClose }: Props) => {
const { t } = useTranslation();
const sendPasscode = getSendPasscodeApi(type, method);
const navigate = useNavigate();
const { isMobile } = usePlatform();
const { result, run: asyncSendPasscode } = useApi(sendPasscode);
const ConfirmModal = isMobile ? MobileModal : WebModal;
const onConfirmHandler = useCallback(() => {
onClose();
void asyncSendPasscode(value);
}, [asyncSendPasscode, onClose, value]);
useEffect(() => {
if (result) {
navigate(
{
pathname: `/${type}/${method}/passcode-validation`,
},
{ state: { [method]: value } }
);
}
}, [method, result, type, value, navigate, onClose]);
return (
<ConfirmModal
className={className}
isOpen={isOpen}
confirmText={type === 'sign-in' ? 'action.sign_in' : 'action.create'}
onClose={onClose}
onConfirm={onConfirmHandler}
>
{t(
type === 'sign-in'
? 'description.create_account_id_exists'
: 'description.sign_in_id_does_not_exists',
{
type: t(`description.${method === 'email' ? 'email' : 'phone_number'}`),
value: method === 'sms' ? formatPhoneNumberWithCountryCallingCode(value) : value,
}
)}
</ConfirmModal>
);
};
export default PasswordlessConfirmModal;

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

@ -1,5 +1,5 @@
import classNames from 'classnames';
import { useCallback, useEffect, useState, useMemo, useContext } from 'react';
import { useCallback, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
@ -9,13 +9,10 @@ import { PhoneInput } from '@/components/Input';
import TermsOfUse from '@/containers/TermsOfUse';
import useApi, { ErrorHandlers } from '@/hooks/use-api';
import useForm from '@/hooks/use-form';
import { PageContext } from '@/hooks/use-page-context';
import usePhoneNumber from '@/hooks/use-phone-number';
import useTerms from '@/hooks/use-terms';
import { UserFlow, SearchParameters } from '@/types';
import { getSearchParameters } from '@/utils';
import { UserFlow } from '@/types';
import PasswordlessConfirmModal from './PasswordlessConfirmModal';
import PasswordlessSwitch from './PasswordlessSwitch';
import * as styles from './index.module.scss';
@ -41,7 +38,6 @@ const PhonePasswordless = ({
hasSwitch = false,
className,
}: Props) => {
const { setToast } = useContext(PageContext);
const { t } = useTranslation();
const { termsValidation } = useTerms();
@ -50,30 +46,13 @@ const PhonePasswordless = ({
const { fieldValue, setFieldValue, setFieldErrors, validateForm, register } =
useForm(defaultState);
const [showPasswordlessConfirmModal, setShowPasswordlessConfirmModal] = useState(false);
const errorHandlers: ErrorHandlers = useMemo(
() => ({
'user.phone_not_exists': (error) => {
const socialToBind = getSearchParameters(location.search, SearchParameters.bindWithSocial);
// Directly display the error if user is trying to bind with social
if (socialToBind) {
setToast(error.message);
return;
}
setShowPasswordlessConfirmModal(true);
},
'user.phone_exists_register': () => {
setShowPasswordlessConfirmModal(true);
},
'guard.invalid_input': () => {
setFieldErrors({ phone: 'invalid_phone' });
},
}),
[setFieldErrors, setToast]
[setFieldErrors]
);
const sendPasscode = getSendPasscodeApi(type, 'sms');
@ -105,10 +84,6 @@ const PhonePasswordless = ({
[validateForm, hasTerms, termsValidation, asyncSendPasscode, fieldValue.phone]
);
const onModalCloseHandler = useCallback(() => {
setShowPasswordlessConfirmModal(false);
}, []);
useEffect(() => {
// Sync phoneNumber
setFieldValue((previous) => ({
@ -127,40 +102,31 @@ const PhonePasswordless = ({
}, [fieldValue.phone, navigate, result, type]);
return (
<>
<form className={classNames(styles.form, className)} onSubmit={onSubmitHandler}>
<div className={styles.formFields}>
<PhoneInput
name="phone"
placeholder={t('input.phone_number')}
className={styles.inputField}
countryCallingCode={phoneNumber.countryCallingCode}
nationalNumber={phoneNumber.nationalNumber}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={autoFocus}
countryList={countryList}
{...register('phone', phoneNumberValidation)}
onChange={(data) => {
setPhoneNumber((previous) => ({ ...previous, ...data }));
}}
/>
{hasSwitch && <PasswordlessSwitch target="email" className={styles.switch} />}
</div>
<form className={classNames(styles.form, className)} onSubmit={onSubmitHandler}>
<div className={styles.formFields}>
<PhoneInput
name="phone"
placeholder={t('input.phone_number')}
className={styles.inputField}
countryCallingCode={phoneNumber.countryCallingCode}
nationalNumber={phoneNumber.nationalNumber}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={autoFocus}
countryList={countryList}
{...register('phone', phoneNumberValidation)}
onChange={(data) => {
setPhoneNumber((previous) => ({ ...previous, ...data }));
}}
/>
{hasSwitch && <PasswordlessSwitch target="email" className={styles.switch} />}
</div>
{hasTerms && <TermsOfUse className={styles.terms} />}
{hasTerms && <TermsOfUse className={styles.terms} />}
<Button title="action.continue" onClick={async () => onSubmitHandler()} />
<Button title="action.continue" onClick={async () => onSubmitHandler()} />
<input hidden type="submit" />
</form>
<PasswordlessConfirmModal
isOpen={showPasswordlessConfirmModal}
type={type === 'sign-in' ? 'register' : 'sign-in'}
method="sms"
value={fieldValue.phone}
onClose={onModalCloseHandler}
/>
</>
<input hidden type="submit" />
</form>
);
};