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 forgot password flow

Browse source 
refactor forgot password flow
This commit is contained in:
simeng-li 2023-02-14 15:50:17 +08:00
parent 087935cfd3
commit e15f774488
No known key found for this signature in database
GPG key ID: 14EA7BB1541E8075
33 changed files with 463 additions and 375 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -70,10 +70,8 @@ const translation = {
social_link_email_or_phone: 'Du kannst eine weitere Email oder Telefonnummer verknüpfen',
social_bind_with_existing: 'Wir haben ein Konto gefunden, das du verknüpfen kannst.',
reset_password: 'Passwort zurücksetzen',
reset_password_description_email:
'Gib die Email Adresse deines Kontos ein und wir senden dir einen Bestätigungscode um dein Passwort zurückzusetzen.',
reset_password_description_phone:
'Gib die Telefonnummer deines Kontos ein und wir senden dir einen Bestätigungscode um dein Passwort zurückzusetzen.',
reset_password_description:
'Gib die {{types, list(type: disjunction;)}} deines Kontos ein und wir senden dir einen Bestätigungscode um dein Passwort zurückzusetzen.',
new_password: 'Neues Passwort',
set_password: 'Passwort setzen',
password_changed: 'Passwort geändert',

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

@ -68,10 +68,8 @@ const translation = {
social_link_email_or_phone: 'You can link another email or phone',
social_bind_with_existing: 'We find a related account, you can link it directly.',
reset_password: 'Reset password',
reset_password_description_email:
'Enter the email address associated with your account, and we’ll email you the verification code to reset your password.',
reset_password_description_phone:
'Enter the phone number associated with your account, and we’ll message you the verification code to reset your password.',
reset_password_description:
'Enter the {{types, list(type: disjunction;)}} associated with your account, and we’ll send you the verification code to reset your password.',
new_password: 'New password',
set_password: 'Set password',
password_changed: 'Password Changed',

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

@ -71,10 +71,8 @@ const translation = {
social_bind_with_existing:
'Nous trouvons un compte connexe, vous pouvez le relier directement.',
reset_password: 'Réinitialiser le mot de passe',
reset_password_description_email:
"Entrez l'adresse e-mail associée à votre compte et nous vous enverrons par e-mail le code de vérification pour réinitialiser votre mot de passe.",
reset_password_description_phone:
'Entrez le numéro de téléphone associé à votre compte et nous vous enverrons le code de vérification par SMS pour réinitialiser votre mot de passe.',
reset_password_description:
'Entrez le {{types, list(type: disjunction;)}} associé à votre compte et nous vous enverrons le code de vérification pour réinitialiser votre mot de passe.',
new_password: 'Nouveau mot de passe',
set_password: 'Set password', // UNTRANSLATED
password_changed: 'Password Changed', // UNTRANSLATED

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

@ -67,10 +67,8 @@ const translation = {
social_link_email_or_phone: '다른 이메일이나 휴대전화를 연동할 수 있어요',
social_bind_with_existing: '관련된 계정을 찾았어요. 해당 계정과 연동할 수 있어요.',
reset_password: '암호를 재설정',
reset_password_description_email:
'계정과 연결된 이메일 주소를 입력하면 비밀번호 재설정을 위한 인증 코드를 이메일로 보내드립니다.',
reset_password_description_phone:
'계정과 연결된 전화번호를 입력하면 비밀번호 재설정을 위한 인증 코드를 문자로 보내드립니다.',
reset_password_description:
'Enter the {{types, list(type: disjunction;)}} associated with your account, and we’ll send you the verification code to reset your password.', // UNTRANSLATED
new_password: '새 비밀번호',
set_password: '비밀번호 설정',
password_changed: '비밀번호 변경됨',

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

@ -70,10 +70,8 @@ const translation = {
social_bind_with_existing:
'Encontramos uma conta relacionada, você pode vinculá-la diretamente.',
reset_password: 'Redefinir senha',
reset_password_description_email:
'Digite o endereço de e-mail associado à sua conta e enviaremos por e-mail o código de verificação para redefinir sua senha.',
reset_password_description_phone:
'Digite o número de telefone associado à sua conta e enviaremos a você o código de verificação para redefinir sua senha.',
reset_password_description:
'Digite o {{types, list(type: disjunction;)}} à sua conta e enviaremos a você o código de verificação para redefinir sua senha.',
new_password: 'Nova senha',
set_password: 'Configurar senha',
password_changed: 'Senha alterada',

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

@ -68,10 +68,8 @@ const translation = {
social_link_email_or_phone: 'You can link another email or phone', // UNTRANSLATED,
social_bind_with_existing: 'Encontramos uma conta relacionada, pode agrega-la diretamente.',
reset_password: 'Redefinir Password',
reset_password_description_email:
'Digite o endereço de email associado à sua conta e enviaremos um email com o código de verificação para redefinir sua senha.',
reset_password_description_phone:
'Digite o número de telefone associado à sua conta e enviaremos uma mensagem de texto com o código de verificação para redefinir sua senha.',
reset_password_description:
'Enter the {{types, list(type: disjunction;)}} associated with your account, and we’ll send you the verification code to reset your password.', // UNTRANSLATED
new_password: 'Nova Senha',
set_password: 'Set password', // UNTRANSLATED
password_changed: 'Password Changed', // UNTRANSLATED

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

@ -69,10 +69,8 @@ const translation = {
social_link_email_or_phone: 'You can link another email or phone', // UNTRANSLATED,
social_bind_with_existing: 'İlgili bir hesap bulduk, hemen bağlayabilirsiniz.',
reset_password: 'Şifre yenile',
reset_password_description_email:
'Hesabınızla ilişkili e-posta adresini girin, şifrenizi sıfırlamak için size doğrulama kodunu e-posta ile gönderelim.',
reset_password_description_phone:
'Hesabınızla ilişkili telefon numarasını girin, şifrenizi sıfırlamak için size doğrulama kodunu kısa mesajla gönderelim.',
reset_password_description:
'Enter the {{types, list(type: disjunction;)}} associated with your account, and we’ll send you the verification code to reset your password.', // UNTRANSLATED
new_password: 'Yeni Şifre',
set_password: 'Set password', // UNTRANSLATED
password_changed: 'Password Changed', // UNTRANSLATED

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

@ -68,8 +68,7 @@ const translation = {
social_link_email_or_phone: 'You can link another email or phone', // UNTRANSLATED,
social_bind_with_existing: '找到了一个匹配的帐号，你可以直接绑定。',
reset_password: '重设密码',
reset_password_description_email: '输入邮件地址，领取验证码以重设密码。',
reset_password_description_phone: '输入手机号，领取验证码以重设密码。',
reset_password_description: '输入{{types, list(type: disjunction;)}}，领取验证码以重设密码。',
new_password: '新密码',
set_password: '设置密码',
password_changed: '已重置密码！',

2
packages/ui/src/App.tsx
View file

@ -92,8 +92,8 @@ const App = () => {
{/* Forgot password */}
<Route path="forgot-password">
<Route index element={<ForgotPassword />} />
<Route path="reset" element={<ResetPassword />} />
<Route path=":method" element={<ForgotPassword />} />
</Route>
{/* Continue set up missing profile */}

2
packages/ui/src/components/InputFields/SmartInputField/CountryCodeSelector/index.tsx
View file

@ -28,7 +28,7 @@ const CountryCodeSelector = (
<span>{`+${countryCode}`}</span>
<DownArrowIcon />
<select autoComplete="region" onChange={onChange}>
<select name="countryCode" autoComplete="country-code" onChange={onChange}>
{countryList.map(({ countryCallingCode, countryCode }) => (
<option key={countryCode} value={countryCallingCode}>
{`+${countryCallingCode}`}

4
packages/ui/src/components/InputFields/SmartInputField/index.tsx
View file

@ -24,12 +24,15 @@ type Props = Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'prefix' | 'value'>
enabledTypes?: EnabledIdentifierTypes;
currentType?: IdentifierInputType;
onTypeChange?: (type: IdentifierInputType) => void;
value?: string;
defaultValue?: string;
onChange?: (value: string) => void;
};
const SmartInputField = (
{
defaultValue,
onChange,
currentType = SignInIdentifier.Username,
enabledTypes = [currentType],
@ -43,6 +46,7 @@ const SmartInputField = (
const { countryCode, onCountryCodeChange, inputValue, onInputValueChange, onInputValueClear } =
useSmartInputField({
defaultValue,
onChange,
enabledTypes,
currentType,

22
packages/ui/src/components/InputFields/SmartInputField/use-smart-input-field.ts
View file

@ -4,6 +4,7 @@ import { useState, useCallback, useMemo } from 'react';
import type { ChangeEventHandler } from 'react';
import { getDefaultCountryCallingCode } from '@/utils/country-code';
import { parseIdentifierValue } from '@/utils/form';
export type IdentifierInputType =
| SignInIdentifier.Email
@ -15,15 +16,30 @@ export type EnabledIdentifierTypes = IdentifierInputType[];
const digitsRegex = /^\d*$/;
type Props = {
defaultValue?: string;
onChange?: (value: string) => void;
enabledTypes: EnabledIdentifierTypes;
currentType: IdentifierInputType;
onTypeChange?: (type: IdentifierInputType) => void;
};
const useSmartInputField = ({ onChange, currentType, enabledTypes, onTypeChange }: Props) => {
const [countryCode, setCountryCode] = useState<string>(getDefaultCountryCallingCode());
const [inputValue, setInputValue] = useState<string>('');
const useSmartInputField = ({
onChange,
currentType,
enabledTypes,
onTypeChange,
defaultValue,
}: Props) => {
const { countryCode: defaultCountryCode, inputValue: defaultInputValue } = parseIdentifierValue(
currentType,
defaultValue
);
const [countryCode, setCountryCode] = useState<string>(
defaultCountryCode ?? getDefaultCountryCallingCode()
);
const [inputValue, setInputValue] = useState<string>(defaultInputValue ?? '');
const enabledTypeSet = useMemo(() => new Set(enabledTypes), [enabledTypes]);
assert(

56
packages/ui/src/containers/EmailForm/EmailResetPassword.test.tsx
View file

@ -1,56 +0,0 @@
import { InteractionEvent, SignInIdentifier } from '@logto/schemas';
import { fireEvent, waitFor, act } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
import { putInteraction, sendVerificationCode } from '@/apis/interaction';
import { UserFlow } from '@/types';
import EmailResetPassword from './EmailResetPassword';
const mockedNavigate = jest.fn();
jest.mock('@/apis/interaction', () => ({
sendVerificationCode: jest.fn(() => ({ success: true })),
putInteraction: jest.fn(() => ({ success: true })),
}));
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useNavigate: () => mockedNavigate,
}));
describe('EmailRegister', () => {
const email = 'foo@logto.io';
test('register form submit', async () => {
const { container, getByText } = renderWithPageContext(
<MemoryRouter>
<EmailResetPassword />
</MemoryRouter>
);
const emailInput = container.querySelector('input[name="email"]');
if (emailInput) {
fireEvent.change(emailInput, { target: { value: email } });
}
const submitButton = getByText('action.continue');
act(() => {
fireEvent.click(submitButton);
});
await waitFor(() => {
expect(putInteraction).toBeCalledWith(InteractionEvent.ForgotPassword);
expect(sendVerificationCode).toBeCalledWith({ email });
expect(mockedNavigate).toBeCalledWith(
{
pathname: `/${UserFlow.forgotPassword}/${SignInIdentifier.Email}/verification-code`,
search: '',
},
{ state: { email } }
);
});
});
});

33
packages/ui/src/containers/EmailForm/EmailResetPassword.tsx
View file

@ -1,33 +0,0 @@
import { SignInIdentifier } from '@logto/schemas';
import useSendVerificationCode from '@/hooks/use-send-verification-code-legacy';
import { UserFlow } from '@/types';
import EmailForm from './EmailForm';
type Props = {
className?: string;
// eslint-disable-next-line react/boolean-prop-naming
autoFocus?: boolean;
hasSwitch?: boolean;
};
const EmailResetPassword = (props: Props) => {
const { onSubmit, errorMessage, clearErrorMessage } = useSendVerificationCode(
UserFlow.forgotPassword,
SignInIdentifier.Email
);
return (
<EmailForm
onSubmit={onSubmit}
{...props}
hasTerms={false}
submitButtonText="action.continue"
errorMessage={errorMessage}
clearErrorMessage={clearErrorMessage}
/>
);
};
export default EmailResetPassword;

1
packages/ui/src/containers/EmailForm/index.tsx
View file

@ -1,2 +1 @@
export { default as EmailResetPassword } from './EmailResetPassword';
export { default as EmailContinue } from './EmailContinue';

10
packages/ui/src/components/ForgotPasswordLink/index.tsx → packages/ui/src/containers/ForgotPasswordLink/index.tsx
View file

@ -4,14 +4,18 @@ import TextLink from '@/components/TextLink';
import { UserFlow } from '@/types';
type Props = {
method: SignInIdentifier.Email | SignInIdentifier.Phone;
identifier: SignInIdentifier;
value: string;
className?: string;
};
const ForgotPasswordLink = ({ method, className }: Props) => (
const ForgotPasswordLink = ({ className, ...identifierData }: Props) => (
<TextLink
className={className}
to={`/${UserFlow.forgotPassword}/${method}`}
to={{
pathname: `/${UserFlow.forgotPassword}`,
}}
state={identifierData}
text="action.forgot_password"
/>
);

64
packages/ui/src/containers/PhoneForm/PhoneResetPassword.test.tsx
View file

@ -1,64 +0,0 @@
import { SignInIdentifier, InteractionEvent } from '@logto/schemas';
import { fireEvent, waitFor, act } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
import { putInteraction, sendVerificationCode } from '@/apis/interaction';
import { UserFlow } from '@/types';
import { getDefaultCountryCallingCode } from '@/utils/country-code';
import PhoneResetPassword from './PhoneResetPassword';
const mockedNavigate = jest.fn();
// PhoneNum CountryCode detection
jest.mock('i18next', () => ({
language: 'en',
}));
jest.mock('@/apis/interaction', () => ({
sendVerificationCode: jest.fn(() => ({ success: true })),
putInteraction: jest.fn(() => ({ success: true })),
}));
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useNavigate: () => mockedNavigate,
}));
describe('PhoneRegister', () => {
const phone = '8573333333';
const defaultCountryCallingCode = getDefaultCountryCallingCode();
const fullPhoneNumber = `${defaultCountryCallingCode}${phone}`;
test('register form submit', async () => {
const { container, getByText } = renderWithPageContext(
<MemoryRouter>
<PhoneResetPassword />
</MemoryRouter>
);
const phoneInput = container.querySelector('input[name="phone"]');
if (phoneInput) {
fireEvent.change(phoneInput, { target: { value: phone } });
}
const submitButton = getByText('action.continue');
act(() => {
fireEvent.click(submitButton);
});
await waitFor(() => {
expect(putInteraction).toBeCalledWith(InteractionEvent.ForgotPassword);
expect(sendVerificationCode).toBeCalledWith({ phone: fullPhoneNumber });
expect(mockedNavigate).toBeCalledWith(
{
pathname: `/${UserFlow.forgotPassword}/${SignInIdentifier.Phone}/verification-code`,
search: '',
},
{ state: { phone: fullPhoneNumber } }
);
});
});
});

33
packages/ui/src/containers/PhoneForm/PhoneResetPassword.tsx
View file

@ -1,33 +0,0 @@
import { SignInIdentifier } from '@logto/schemas';
import useSendVerificationCode from '@/hooks/use-send-verification-code-legacy';
import { UserFlow } from '@/types';
import PhoneForm from './PhoneForm';
type Props = {
className?: string;
// eslint-disable-next-line react/boolean-prop-naming
autoFocus?: boolean;
hasSwitch?: boolean;
};
const PhoneResetPassword = (props: Props) => {
const { onSubmit, errorMessage, clearErrorMessage } = useSendVerificationCode(
UserFlow.forgotPassword,
SignInIdentifier.Phone
);
return (
<PhoneForm
hasTerms={false}
onSubmit={onSubmit}
{...props}
submitButtonText="action.continue"
errorMessage={errorMessage}
clearErrorMessage={clearErrorMessage}
/>
);
};
export default PhoneResetPassword;

1
packages/ui/src/containers/PhoneForm/index.tsx
View file

@ -1,2 +1 @@
export { default as PhoneResetPassword } from './PhoneResetPassword';
export { default as PhoneContinue } from './PhoneContinue';

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

@ -1,5 +1,7 @@
import { SignInIdentifier } from '@logto/schemas';
import { useContext, useCallback } from 'react';
import { useContext } from 'react';
import type { VerificationCodeIdentifier } from '@/types';
import { PageContext } from './use-page-context';
@ -25,30 +27,18 @@ export const useForgotPasswordSettings = () => {
const { experienceSettings } = useContext(PageContext);
const { forgotPassword } = experienceSettings ?? {};
const getEnabledRetrievePasswordIdentifier = useCallback(
(identifier: SignInIdentifier) => {
if (identifier === SignInIdentifier.Username || identifier === SignInIdentifier.Email) {
return forgotPassword?.email
? SignInIdentifier.Email
: forgotPassword?.phone
? SignInIdentifier.Phone
: undefined;
}
const enabledMethodSet = new Set<VerificationCodeIdentifier>();
return forgotPassword?.phone
? SignInIdentifier.Phone
: forgotPassword?.email
? SignInIdentifier.Email
: undefined;
},
[forgotPassword]
);
if (forgotPassword?.email) {
enabledMethodSet.add(SignInIdentifier.Email);
}
if (forgotPassword?.phone) {
enabledMethodSet.add(SignInIdentifier.Phone);
}
return {
getEnabledRetrievePasswordIdentifier,
isForgotPasswordEnabled: Boolean(
forgotPassword && (forgotPassword.email || forgotPassword.phone)
),
...forgotPassword,
isForgotPasswordEnabled: enabledMethodSet.size > 0,
enabledMethodSet,
};
};

19
packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.module.scss Normal file
View file

@ -0,0 +1,19 @@
@use '@/scss/underscore' as _;
.form {
@include _.flex-column;
> * {
width: 100%;
}
.inputField,
.formErrors {
margin-bottom: _.unit(4);
}
.formErrors {
margin-left: _.unit(0.5);
margin-top: _.unit(-3);
}
}

93
packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.test.tsx Normal file
View file

@ -0,0 +1,93 @@
import { InteractionEvent, SignInIdentifier } from '@logto/schemas';
import { assert } from '@silverhand/essentials';
import { act, fireEvent, waitFor } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
import { putInteraction, sendVerificationCode } from '@/apis/interaction';
import { VerificationCodeIdentifier } from '@/types';
import ForgotPasswordForm from '.';
const mockedNavigate = jest.fn();
jest.mock('i18next', () => ({
language: 'en',
t: (key: string) => key,
}));
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useNavigate: () => mockedNavigate,
}));
jest.mock('@/apis/interaction', () => ({
sendVerificationCode: jest.fn(() => ({ success: true })),
putInteraction: jest.fn(() => ({ success: true })),
}));
describe('ForgotPasswordForm', () => {
const email = 'foo@logto.io';
const countryCode = '86';
const phone = '13911111111';
const renderForm = (defaultType: VerificationCodeIdentifier, defaultValue?: string) =>
renderWithPageContext(
<MemoryRouter>
<ForgotPasswordForm
enabledTypes={[SignInIdentifier.Email, SignInIdentifier.Phone]}
defaultType={defaultType}
defaultValue={defaultValue}
/>
</MemoryRouter>
);
describe.each([
{ identifier: SignInIdentifier.Email, value: email },
{ identifier: SignInIdentifier.Phone, value: `${countryCode}${phone}` },
] satisfies Array<{ identifier: VerificationCodeIdentifier; value: string }>)(
'identifier: %s, value: %s',
({ identifier, value }) => {
test(`forgot password form render properly with default ${identifier} value ${value}`, async () => {
const { container, queryByText } = renderForm(identifier, value);
const identifierInput = container.querySelector(`input[name="identifier"]`);
assert(identifierInput, new Error('identifier input should not be null'));
expect(queryByText('action.continue')).not.toBeNull();
if (identifier === 'email') {
expect(identifierInput.getAttribute('value')).toBe(value);
}
if (identifier === 'phone') {
expect(identifierInput.getAttribute('value')).toBe(phone);
}
});
test(`send ${identifier} verification code properly`, async () => {
const { container, getByText } = renderForm(identifier, value);
const identifierInput = container.querySelector(`input[name="identifier"]`);
assert(identifierInput, new Error('identifier input should not be null'));
const submitButton = getByText('action.continue');
act(() => {
fireEvent.click(submitButton);
});
await waitFor(() => {
expect(putInteraction).toBeCalledWith(InteractionEvent.ForgotPassword);
expect(sendVerificationCode).toBeCalledWith({ email });
expect(mockedNavigate).toBeCalledWith(
{
pathname: 'verification-code',
search: '',
},
{ state: { identifier, value }, replace: undefined }
);
});
});
}
);
});

119
packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx Normal file
View file

@ -0,0 +1,119 @@
import { SignInIdentifier } from '@logto/schemas';
import classNames from 'classnames';
import { useState, useCallback } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import Button from '@/components/Button';
import ErrorMessage from '@/components/ErrorMessage';
import { SmartInputField } from '@/components/InputFields';
import useSendVerificationCode from '@/hooks/use-send-verification-code';
import type { VerificationCodeIdentifier } from '@/types';
import { UserFlow } from '@/types';
import { getGeneralIdentifierErrorMessage, validateIdentifierField } from '@/utils/form';
import * as styles from './index.module.scss';
type Props = {
className?: string;
// eslint-disable-next-line react/boolean-prop-naming
autoFocus?: boolean;
defaultValue?: string;
defaultType: VerificationCodeIdentifier;
enabledTypes: VerificationCodeIdentifier[];
};
type FormState = {
identifier: string;
};
const ForgotPasswordForm = ({
className,
autoFocus,
defaultType,
defaultValue = '',
enabledTypes,
}: Props) => {
const { t } = useTranslation();
const [inputType, setInputType] = useState<VerificationCodeIdentifier>(defaultType);
const { errorMessage, clearErrorMessage, onSubmit } = useSendVerificationCode(
UserFlow.forgotPassword
);
const {
setValue,
handleSubmit,
control,
formState: { errors, isSubmitted },
} = useForm<FormState>({
reValidateMode: 'onChange',
defaultValues: { identifier: defaultValue },
});
const onSubmitHandler = useCallback(
async (event?: React.FormEvent<HTMLFormElement>) => {
clearErrorMessage();
void handleSubmit(async ({ identifier }, event) => {
event?.preventDefault();
await onSubmit({ identifier: inputType, value: identifier });
})(event);
},
[clearErrorMessage, handleSubmit, inputType, onSubmit]
);
return (
<form className={classNames(styles.form, className)} onSubmit={onSubmitHandler}>
<Controller
control={control}
name="identifier"
rules={{
required: getGeneralIdentifierErrorMessage(enabledTypes, 'required'),
validate: (value) => {
const errorMessage = validateIdentifierField(inputType, value);
if (errorMessage) {
return typeof errorMessage === 'string'
? t(`error.${errorMessage}`)
: t(`error.${errorMessage.code}`, errorMessage.data);
}
return true;
},
}}
render={({ field }) => (
<SmartInputField
autoComplete="identifier"
autoFocus={autoFocus}
className={styles.inputField}
{...field}
defaultValue={defaultValue}
currentType={inputType}
isDanger={!!errors.identifier}
errorMessage={errors.identifier?.message}
enabledTypes={enabledTypes}
onTypeChange={(type) => {
// The enabledTypes is restricted to be VerificationCodeIdentifier, need this check to make TS happy
if (type !== SignInIdentifier.Username) {
setInputType(type);
}
}}
/* Overwrite default input onChange handler */
onChange={(value) => {
setValue('identifier', value, { shouldValidate: isSubmitted, shouldDirty: true });
}}
/>
)}
/>
{errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
<Button title="action.continue" htmlType="submit" />
<input hidden type="submit" />
</form>
);
};
export default ForgotPasswordForm;

154
packages/ui/src/pages/ForgotPassword/index.test.tsx
View file

@ -1,88 +1,108 @@
import { Routes, Route, MemoryRouter } from 'react-router-dom';
import { SignInIdentifier } from '@logto/schemas';
import { assert } from '@silverhand/essentials';
import { MemoryRouter, useLocation } from 'react-router-dom';
import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider';
import { mockSignInExperienceSettings } from '@/__mocks__/logto';
import type { SignInExperienceResponse } from '@/types';
import ForgotPassword from '.';
jest.mock('i18next', () => ({
language: 'en',
t: (key: string) => key,
}));
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useNavigate: jest.fn(),
useLocation: jest.fn(() => ({})),
}));
describe('ForgotPassword', () => {
it('render email forgot password properly with phone enabled as well', () => {
const { queryByText, container } = renderWithPageContext(
<MemoryRouter initialEntries={['/forgot-password/email']}>
<Routes>
<Route
path="/forgot-password/:method"
element={
<SettingsProvider>
<ForgotPassword />
</SettingsProvider>
}
/>
</Routes>
const renderPage = (settings?: SignInExperienceResponse['forgotPassword']) =>
renderWithPageContext(
<MemoryRouter>
<SettingsProvider
settings={{
...mockSignInExperienceSettings,
forgotPassword: {
...mockSignInExperienceSettings.forgotPassword,
...settings,
},
}}
>
<ForgotPassword />
</SettingsProvider>
</MemoryRouter>
);
expect(queryByText('description.reset_password')).not.toBeNull();
expect(queryByText('description.reset_password_description_email')).not.toBeNull();
expect(container.querySelector('input[name="email"]')).not.toBeNull();
expect(queryByText('action.switch_to')).not.toBeNull();
afterEach(() => {
jest.clearAllMocks();
});
it('render phone forgot password properly with email disabled', () => {
const { queryByText, container } = renderWithPageContext(
<MemoryRouter initialEntries={['/forgot-password/phone']}>
<Routes>
<Route
path="/forgot-password/:method"
element={
<SettingsProvider
settings={{
...mockSignInExperienceSettings,
forgotPassword: { email: false, phone: true },
}}
>
<ForgotPassword />
</SettingsProvider>
}
/>
</Routes>
</MemoryRouter>
);
expect(queryByText('description.reset_password')).not.toBeNull();
expect(queryByText('description.reset_password_description_phone')).not.toBeNull();
expect(container.querySelector('input[name="phone"]')).not.toBeNull();
expect(queryByText('action.switch_to')).toBeNull();
});
it('should return error page if forgot password is not enabled', () => {
const { queryByText } = renderWithPageContext(
<MemoryRouter initialEntries={['/forgot-password/phone']}>
<Routes>
<Route
path="/forgot-password/:method"
element={
<SettingsProvider
settings={{
...mockSignInExperienceSettings,
forgotPassword: { email: true, phone: false },
}}
>
<ForgotPassword />
</SettingsProvider>
}
/>
</Routes>
</MemoryRouter>
);
test('should render error page if forgot password is not enabled', () => {
const { queryByText } = renderPage({ email: false, phone: false });
expect(queryByText('description.reset_password')).toBeNull();
expect(queryByText('description.reset_password_description_phone')).toBeNull();
expect(queryByText('description.not_found')).not.toBeNull();
});
describe.each([
{ email: true, phone: false },
{ email: false, phone: true },
{ email: true, phone: true },
])('render the forgot password page with settings %p %p', (settings) => {
const email = 'foo@logto.io';
const countryCode = '86';
const phone = '13911111111';
const mockUseLocation = useLocation as jest.Mock;
const stateCases = [
{},
{ identifier: SignInIdentifier.Username, value: '' },
{ identifier: SignInIdentifier.Email, value: email },
{ identifier: SignInIdentifier.Phone, value: `${countryCode}${phone}` },
];
test.each(stateCases)('render the forgot password page with state %o', async (state) => {
mockUseLocation.mockImplementation(() => ({ state }));
const { queryByText, queryAllByText, container } = renderPage(settings);
const inputField = container.querySelector('input[name="identifier"]');
const countryCodeSelector = container.querySelector('select[name="countryCode"]');
assert(inputField, new Error('input field not found'));
expect(queryByText('description.reset_password')).not.toBeNull();
expect(queryByText('description.reset_password_description')).not.toBeNull();
expect(queryByText('action.switch_to')).toBeNull();
if (state.identifier === SignInIdentifier.Phone && settings.phone) {
expect(inputField.getAttribute('value')).toBe(phone);
expect(countryCodeSelector).not.toBeNull();
expect(queryAllByText(`+${countryCode}`)).toHaveLength(2);
} else if (state.identifier === SignInIdentifier.Phone) {
expect(inputField.getAttribute('value')).toBe('');
expect(countryCodeSelector).toBeNull();
}
if (state.identifier === SignInIdentifier.Email && settings.email) {
expect(inputField.getAttribute('value')).toBe(email);
expect(countryCodeSelector).toBeNull();
} else if (state.identifier === SignInIdentifier.Email) {
expect(inputField.getAttribute('value')).toBe('');
expect(countryCodeSelector).not.toBeNull();
}
if (state.identifier === SignInIdentifier.Username && settings.email) {
expect(inputField.getAttribute('value')).toBe('');
expect(countryCodeSelector).toBeNull();
} else if (state.identifier === SignInIdentifier.Username) {
expect(inputField.getAttribute('value')).toBe('');
expect(countryCodeSelector).not.toBeNull();
}
});
});
});

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

@ -1,46 +1,60 @@
import { SignInIdentifier } from '@logto/schemas';
import { useParams } from 'react-router-dom';
import { is } from 'superstruct';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom';
import { validate } from 'superstruct';
import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
import { EmailResetPassword } from '@/containers/EmailForm';
import { PhoneResetPassword } from '@/containers/PhoneForm';
import { useForgotPasswordSettings } from '@/hooks/use-sie';
import ErrorPage from '@/pages/ErrorPage';
import { verificationCodeMethodGuard } from '@/types/guard';
import { passwordIdentifierStateGuard } from '@/types/guard';
import { identifierInputDescriptionMap } from '@/utils/form';
type Props = {
method?: string;
};
import ErrorPage from '../ErrorPage';
import ForgotPasswordForm from './ForgotPasswordForm';
const ForgotPassword = () => {
const { method = '' } = useParams<Props>();
const forgotPassword = useForgotPasswordSettings();
const { isForgotPasswordEnabled, enabledMethodSet } = useForgotPasswordSettings();
const { state } = useLocation();
const { t } = useTranslation();
const enabledMethods = [...enabledMethodSet];
if (!is(method, verificationCodeMethodGuard)) {
const getDefaultIdentifierType = useCallback(
(identifier?: SignInIdentifier) => {
if (identifier === SignInIdentifier.Username || identifier === SignInIdentifier.Email) {
return enabledMethodSet.has(SignInIdentifier.Email)
? SignInIdentifier.Email
: SignInIdentifier.Phone;
}
return enabledMethodSet.has(SignInIdentifier.Phone)
? SignInIdentifier.Phone
: SignInIdentifier.Email;
},
[enabledMethodSet]
);
if (!isForgotPasswordEnabled) {
return <ErrorPage />;
}
// Forgot password with target identifier method is not supported
if (!forgotPassword[method]) {
return <ErrorPage />;
}
const [_, identifierState] = validate(state, passwordIdentifierStateGuard);
const PasswordlessForm =
method === SignInIdentifier.Email ? EmailResetPassword : PhoneResetPassword;
const defaultType = getDefaultIdentifierType(identifierState?.identifier);
const defaultValue = (identifierState?.identifier === defaultType && identifierState.value) || '';
return (
<SecondaryPageWrapper
title="description.reset_password"
description={`description.reset_password_description_${method}`}
description="description.reset_password_description"
descriptionProps={{
types: enabledMethods.map((method) => t(identifierInputDescriptionMap[method])),
}}
>
<PasswordlessForm
<ForgotPasswordForm
autoFocus
hasSwitch={
forgotPassword[
method === SignInIdentifier.Email ? SignInIdentifier.Phone : SignInIdentifier.Email
]
}
defaultType={defaultType}
defaultValue={defaultValue}
enabledTypes={enabledMethods}
/>
</SecondaryPageWrapper>
);

1
packages/ui/src/pages/Register/IdentifierRegisterForm/index.module.scss
View file

@ -14,6 +14,7 @@
}
.formErrors {
margin-left: _.unit(0.5);
margin-top: _.unit(-3);
}
}

1
packages/ui/src/pages/SignIn/IdentifierSignInForm/index.module.scss
View file

@ -14,6 +14,7 @@
}
.formErrors {
margin-left: _.unit(0.5);
margin-top: _.unit(-3);
}
}

1
packages/ui/src/pages/SignIn/PasswordSignInForm/index.module.scss
View file

@ -21,6 +21,7 @@
}
.formErrors {
margin-left: _.unit(0.5);
margin-top: _.unit(-3);
}
}

15
packages/ui/src/pages/SignIn/PasswordSignInForm/index.tsx
View file

@ -6,9 +6,9 @@ import { useTranslation } from 'react-i18next';
import Button from '@/components/Button';
import ErrorMessage from '@/components/ErrorMessage';
import ForgotPasswordLink from '@/components/ForgotPasswordLink';
import type { IdentifierInputType } from '@/components/InputFields';
import { SmartInputField, PasswordInputField } from '@/components/InputFields';
import ForgotPasswordLink from '@/containers/ForgotPasswordLink';
import TermsOfUse from '@/containers/TermsOfUse';
import usePasswordSignIn from '@/hooks/use-password-sign-in';
import { useForgotPasswordSettings } from '@/hooks/use-sie';
@ -34,15 +34,14 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
const { termsValidation } = useTerms();
const { errorMessage, clearErrorMessage, onSubmit } = usePasswordSignIn();
const { getEnabledRetrievePasswordIdentifier } = useForgotPasswordSettings();
const { isForgotPasswordEnabled } = useForgotPasswordSettings();
const [inputType, setInputType] = useState<IdentifierInputType>(
signInMethods[0] ?? SignInIdentifier.Username
);
const forgotPasswordIdentifier = getEnabledRetrievePasswordIdentifier(inputType);
const {
watch,
register,
setValue,
handleSubmit,
@ -114,8 +113,12 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
{errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
{forgotPasswordIdentifier && (
<ForgotPasswordLink className={styles.link} method={forgotPasswordIdentifier} />
{isForgotPasswordEnabled && (
<ForgotPasswordLink
className={styles.link}
identifier={inputType}
value={watch('identifier')}
/>
)}
<TermsOfUse className={styles.terms} />

9
packages/ui/src/pages/SignInPassword/PasswordForm/index.tsx
View file

@ -6,8 +6,8 @@ import { useTranslation } from 'react-i18next';
import Button from '@/components/Button';
import ErrorMessage from '@/components/ErrorMessage';
import ForgotPasswordLink from '@/components/ForgotPasswordLink';
import { PasswordInputField } from '@/components/InputFields';
import ForgotPasswordLink from '@/containers/ForgotPasswordLink';
import usePasswordSignIn from '@/hooks/use-password-sign-in';
import { useForgotPasswordSettings } from '@/hooks/use-sie';
@ -36,8 +36,7 @@ const PasswordForm = ({
}: Props) => {
const { t } = useTranslation();
const { errorMessage, clearErrorMessage, onSubmit } = usePasswordSignIn();
const { getEnabledRetrievePasswordIdentifier } = useForgotPasswordSettings();
const forgotPasswordIdentifier = getEnabledRetrievePasswordIdentifier(identifier);
const { isForgotPasswordEnabled } = useForgotPasswordSettings();
const {
register,
@ -78,8 +77,8 @@ const PasswordForm = ({
{errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
{forgotPasswordIdentifier && (
<ForgotPasswordLink className={styles.link} method={forgotPasswordIdentifier} />
{isForgotPasswordEnabled && (
<ForgotPasswordLink className={styles.link} identifier={identifier} value={value} />
)}
<Button title="action.continue" name="submit" htmlType="submit" />

22
packages/ui/src/types/guard.ts
View file

@ -3,18 +3,6 @@ import * as s from 'superstruct';
import { UserFlow } from '.';
/* Password SignIn Flow */
export const passwordIdentifierStateGuard = s.object({
identifier: s.enums([SignInIdentifier.Email, SignInIdentifier.Phone, SignInIdentifier.Username]),
value: s.string(),
});
export const SignInMethodGuard = s.union([
s.literal(SignInIdentifier.Email),
s.literal(SignInIdentifier.Phone),
s.literal(SignInIdentifier.Username),
]);
export const userFlowGuard = s.enums([
UserFlow.signIn,
UserFlow.register,
@ -22,6 +10,13 @@ export const userFlowGuard = s.enums([
UserFlow.continue,
]);
/* Password SignIn Flow */
export const passwordIdentifierStateGuard = s.object({
identifier: s.enums([SignInIdentifier.Email, SignInIdentifier.Phone, SignInIdentifier.Username]),
value: s.string(),
});
/* Continue Flow */
export const continueFlowStateGuard = s.optional(
s.type({
flow: userFlowGuard,
@ -29,11 +24,10 @@ export const continueFlowStateGuard = s.optional(
);
/* Verification Code Flow Guard */
export const verificationCodeMethodGuard = s.union([
const verificationCodeMethodGuard = s.union([
s.literal(SignInIdentifier.Email),
s.literal(SignInIdentifier.Phone),
]);
export const verificationCodeStateGuard = s.object({
identifier: verificationCodeMethodGuard,
value: s.string(),

6
packages/ui/src/utils/country-code.ts
View file

@ -106,9 +106,5 @@ export const parsePhoneNumber = (value: string) => {
countryCallingCode: phoneNumber.countryCallingCode,
nationalNumber: phoneNumber.nationalNumber,
};
} catch {
return {
nationalNumber: value,
};
}
} catch {}
};

25
packages/ui/src/utils/form.ts
View file

@ -4,6 +4,7 @@ import type { TFuncKey } from 'react-i18next';
import type { IdentifierInputType } from '@/components/InputFields';
import { parsePhoneNumber } from './country-code';
import { validateUsername, validateEmail, validatePhone } from './field-validations';
const { t } = i18next;
@ -37,13 +38,29 @@ export const getGeneralIdentifierErrorMessage = (
export const validateIdentifierField = (type: IdentifierInputType, value: string) => {
switch (type) {
case 'username':
case SignInIdentifier.Username:
return validateUsername(value);
case 'email':
case SignInIdentifier.Email:
return validateEmail(value);
case 'phone':
case SignInIdentifier.Phone:
return validatePhone(value);
default:
}
};
export const parseIdentifierValue = (type: IdentifierInputType, value?: string) => {
if (type === SignInIdentifier.Phone && value) {
const validPhoneNumber = parsePhoneNumber(value);
if (validPhoneNumber) {
return {
countryCode: validPhoneNumber.countryCallingCode,
inputValue: validPhoneNumber.nationalNumber,
};
}
}
return {
inputValue: value,
};
};