From ba787b434ba4dd43064c56115eabfdba9912f98a Mon Sep 17 00:00:00 2001 From: simeng-li Date: Mon, 19 Sep 2022 16:57:43 +0800 Subject: [PATCH] feat(ui): add forget password flow (#1952) feat(ui): add reset password verification flow add reset password verification flow --- packages/ui/src/App.tsx | 6 +-- packages/ui/src/apis/utils.ts | 30 ++++++++++++++- .../Passwordless/EmailPasswordless.test.tsx | 37 +++++++++++++++---- .../Passwordless/EmailPasswordless.tsx | 16 ++++---- .../Passwordless/PhonePasswordless.test.tsx | 36 ++++++++++++++---- .../Passwordless/PhonePasswordless.tsx | 18 ++++----- .../containers/Passwordless/index.module.scss | 2 +- .../src/pages/ForgotPassword/index.test.tsx | 11 ++++-- .../ui/src/pages/ForgotPassword/index.tsx | 5 ++- packages/ui/src/pages/Passcode/index.tsx | 7 ++-- packages/ui/src/pages/Register/index.tsx | 18 +++++++-- .../pages/SecondarySignIn/index.module.scss | 1 - .../ui/src/pages/SecondarySignIn/index.tsx | 18 +++++++-- packages/ui/src/types/guard.ts | 6 +++ packages/ui/src/types/index.ts | 2 +- 15 files changed, 158 insertions(+), 55 deletions(-) diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx index 0ddb84e00..b8b7c80d4 100644 --- a/packages/ui/src/App.tsx +++ b/packages/ui/src/App.tsx @@ -9,6 +9,7 @@ import initI18n from './i18n/init'; import Callback from './pages/Callback'; import Consent from './pages/Consent'; import ErrorPage from './pages/ErrorPage'; +import ForgotPassword from './pages/ForgotPassword'; import Passcode from './pages/Passcode'; import Register from './pages/Register'; import SecondarySignIn from './pages/SecondarySignIn'; @@ -67,10 +68,7 @@ const App = () => { } /> {/* forgot password */} - {/** - * WIP - * } /> - */} + } /> {/* social sign-in pages */} diff --git a/packages/ui/src/apis/utils.ts b/packages/ui/src/apis/utils.ts index 42d0ffe59..70dc8df57 100644 --- a/packages/ui/src/apis/utils.ts +++ b/packages/ui/src/apis/utils.ts @@ -15,7 +15,20 @@ import { export type PasscodeChannel = 'sms' | 'email'; -export const getSendPasscodeApi = (type: UserFlow, method: PasscodeChannel) => { +export const getSendPasscodeApi = ( + type: UserFlow, + method: PasscodeChannel +): ((_address: string) => Promise<{ success: boolean }>) => { + if (type === 'reset-password' && method === 'email') { + // TODO: update using reset-password verification api + return async () => ({ success: true }); + } + + if (type === 'reset-password' && method === 'sms') { + // TODO: update using reset-password verification api + return async () => ({ success: true }); + } + if (type === 'sign-in' && method === 'email') { return sendSignInEmailPasscode; } @@ -31,7 +44,20 @@ export const getSendPasscodeApi = (type: UserFlow, method: PasscodeChannel) => { return sendRegisterSmsPasscode; }; -export const getVerifyPasscodeApi = (type: UserFlow, method: PasscodeChannel) => { +export const getVerifyPasscodeApi = ( + type: UserFlow, + method: PasscodeChannel +): ((_address: string, code: string, socialToBind?: string) => Promise<{ redirectTo: string }>) => { + if (type === 'reset-password' && method === 'email') { + // TODO: update using reset-password verification api + return async () => ({ redirectTo: '' }); + } + + if (type === 'reset-password' && method === 'sms') { + // TODO: update using reset-password verification api + return async () => ({ redirectTo: '' }); + } + if (type === 'sign-in' && method === 'email') { return verifySignInEmailPasscode; } diff --git a/packages/ui/src/containers/Passwordless/EmailPasswordless.test.tsx b/packages/ui/src/containers/Passwordless/EmailPasswordless.test.tsx index 83950e32a..6ddb58dec 100644 --- a/packages/ui/src/containers/Passwordless/EmailPasswordless.test.tsx +++ b/packages/ui/src/containers/Passwordless/EmailPasswordless.test.tsx @@ -5,6 +5,7 @@ import renderWithPageContext from '@/__mocks__/RenderWithPageContext'; import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider'; import { sendRegisterEmailPasscode } from '@/apis/register'; import { sendSignInEmailPasscode } from '@/apis/sign-in'; +import TermsOfUse from '@/containers/TermsOfUse'; import EmailPasswordless from './EmailPasswordless'; @@ -26,11 +27,13 @@ describe('', () => { expect(queryByText('action.continue')).not.toBeNull(); }); - test('render with terms settings enabled', () => { + test('render with terms settings', () => { const { queryByText } = renderWithPageContext( - + + + ); @@ -60,6 +63,31 @@ describe('', () => { } }); + test('should block in extra validation failed', async () => { + const { container, getByText } = renderWithPageContext( + + + false} /> + + + ); + const emailInput = container.querySelector('input[name="email"]'); + + if (emailInput) { + fireEvent.change(emailInput, { target: { value: 'foo@logto.io' } }); + } + + const submitButton = getByText('action.continue'); + + act(() => { + fireEvent.click(submitButton); + }); + + await waitFor(() => { + expect(sendSignInEmailPasscode).not.toBeCalled(); + }); + }); + test('should call sign-in method properly', async () => { const { container, getByText } = renderWithPageContext( @@ -73,8 +101,6 @@ describe('', () => { if (emailInput) { fireEvent.change(emailInput, { target: { value: 'foo@logto.io' } }); } - const termsButton = getByText('description.agree_with_terms'); - fireEvent.click(termsButton); const submitButton = getByText('action.continue'); @@ -100,9 +126,6 @@ describe('', () => { if (emailInput) { fireEvent.change(emailInput, { target: { value: 'foo@logto.io' } }); } - const termsButton = getByText('description.agree_with_terms'); - fireEvent.click(termsButton); - const submitButton = getByText('action.continue'); act(() => { diff --git a/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx b/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx index 7285eb0b5..93e44869b 100644 --- a/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx +++ b/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx @@ -6,11 +6,9 @@ import { useNavigate } from 'react-router-dom'; import { getSendPasscodeApi } from '@/apis/utils'; import Button from '@/components/Button'; 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 { emailValidation } from '@/utils/field-validations'; @@ -23,6 +21,8 @@ type Props = { className?: string; // eslint-disable-next-line react/boolean-prop-naming autoFocus?: boolean; + onSubmitValidation?: () => Promise; + children?: React.ReactNode; }; type FieldState = { @@ -31,15 +31,15 @@ type FieldState = { const defaultState: FieldState = { email: '' }; -const EmailPasswordless = ({ type, autoFocus, className }: Props) => { +const EmailPasswordless = ({ type, autoFocus, onSubmitValidation, children, className }: Props) => { const { setToast } = useContext(PageContext); - const [showPasswordlessConfirmModal, setShowPasswordlessConfirmModal] = useState(false); const { t } = useTranslation(); const navigate = useNavigate(); - const { termsValidation } = useTerms(); const { fieldValue, setFieldValue, setFieldErrors, register, validateForm } = useForm(defaultState); + const [showPasswordlessConfirmModal, setShowPasswordlessConfirmModal] = useState(false); + const errorHandlers: ErrorHandlers = useMemo( () => ({ 'user.email_not_exists': (error) => { @@ -75,13 +75,13 @@ const EmailPasswordless = ({ type, autoFocus, className }: Props) => { return; } - if (!(await termsValidation())) { + if (onSubmitValidation && !(await onSubmitValidation())) { return; } void asyncSendPasscode(fieldValue.email); }, - [validateForm, termsValidation, asyncSendPasscode, fieldValue.email] + [validateForm, onSubmitValidation, asyncSendPasscode, fieldValue.email] ); const onModalCloseHandler = useCallback(() => { @@ -117,7 +117,7 @@ const EmailPasswordless = ({ type, autoFocus, className }: Props) => { }} /> - + {children &&
{children}
} diff --git a/packages/ui/src/containers/Passwordless/PhonePasswordless.test.tsx b/packages/ui/src/containers/Passwordless/PhonePasswordless.test.tsx index 9aab7f504..fd44ecc6b 100644 --- a/packages/ui/src/containers/Passwordless/PhonePasswordless.test.tsx +++ b/packages/ui/src/containers/Passwordless/PhonePasswordless.test.tsx @@ -5,6 +5,7 @@ import renderWithPageContext from '@/__mocks__/RenderWithPageContext'; import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider'; import { sendRegisterSmsPasscode } from '@/apis/register'; import { sendSignInSmsPasscode } from '@/apis/sign-in'; +import TermsOfUse from '@/containers/TermsOfUse'; import { getDefaultCountryCallingCode } from '@/utils/country-code'; import PhonePasswordless from './PhonePasswordless'; @@ -33,11 +34,13 @@ describe('', () => { expect(queryByText('action.continue')).not.toBeNull(); }); - test('render with terms settings enabled', () => { + test('render with terms settings', () => { const { queryByText } = renderWithPageContext( - + + + ); @@ -67,6 +70,30 @@ describe('', () => { } }); + test('should block if extra validation failed', async () => { + const { container, getByText } = renderWithPageContext( + + + false} /> + + + ); + const phoneInput = container.querySelector('input[name="phone"]'); + + if (phoneInput) { + fireEvent.change(phoneInput, { target: { value: phoneNumber } }); + } + const submitButton = getByText('action.continue'); + + act(() => { + fireEvent.click(submitButton); + }); + + await waitFor(() => { + expect(sendSignInSmsPasscode).not.toBeCalled(); + }); + }); + test('should call sign-in method properly', async () => { const { container, getByText } = renderWithPageContext( @@ -80,9 +107,6 @@ describe('', () => { if (phoneInput) { fireEvent.change(phoneInput, { target: { value: phoneNumber } }); } - const termsButton = getByText('description.agree_with_terms'); - fireEvent.click(termsButton); - const submitButton = getByText('action.continue'); act(() => { @@ -107,8 +131,6 @@ describe('', () => { if (phoneInput) { fireEvent.change(phoneInput, { target: { value: phoneNumber } }); } - const termsButton = getByText('description.agree_with_terms'); - fireEvent.click(termsButton); const submitButton = getByText('action.continue'); diff --git a/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx b/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx index faf91bccc..c4ba93835 100644 --- a/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx +++ b/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx @@ -6,12 +6,10 @@ import { useNavigate } from 'react-router-dom'; import { getSendPasscodeApi } from '@/apis/utils'; import Button from '@/components/Button'; 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'; @@ -20,9 +18,11 @@ import * as styles from './index.module.scss'; type Props = { type: UserFlow; + className?: string; // eslint-disable-next-line react/boolean-prop-naming autoFocus?: boolean; - className?: string; + onSubmitValidation?: () => Promise; + children?: React.ReactNode; }; type FieldState = { @@ -31,16 +31,16 @@ type FieldState = { const defaultState: FieldState = { phone: '' }; -const PhonePasswordless = ({ type, autoFocus, className }: Props) => { +const PhonePasswordless = ({ type, autoFocus, onSubmitValidation, children, className }: Props) => { const { setToast } = useContext(PageContext); - const [showPasswordlessConfirmModal, setShowPasswordlessConfirmModal] = useState(false); const { t } = useTranslation(); const { countryList, phoneNumber, setPhoneNumber, isValidPhoneNumber } = usePhoneNumber(); const navigate = useNavigate(); - const { termsValidation } = useTerms(); const { fieldValue, setFieldValue, setFieldErrors, validateForm, register } = useForm(defaultState); + const [showPasswordlessConfirmModal, setShowPasswordlessConfirmModal] = useState(false); + const errorHandlers: ErrorHandlers = useMemo( () => ({ 'user.phone_not_exists': (error) => { @@ -85,13 +85,13 @@ const PhonePasswordless = ({ type, autoFocus, className }: Props) => { return; } - if (!(await termsValidation())) { + if (onSubmitValidation && !(await onSubmitValidation())) { return; } void asyncSendPasscode(fieldValue.phone); }, - [validateForm, termsValidation, asyncSendPasscode, fieldValue.phone] + [validateForm, onSubmitValidation, asyncSendPasscode, fieldValue.phone] ); const onModalCloseHandler = useCallback(() => { @@ -131,7 +131,7 @@ const PhonePasswordless = ({ type, autoFocus, className }: Props) => { setPhoneNumber((previous) => ({ ...previous, ...data })); }} /> - + {children &&
{children}
} diff --git a/packages/ui/src/containers/Passwordless/index.module.scss b/packages/ui/src/containers/Passwordless/index.module.scss index f0d0ba5f4..e4a879c59 100644 --- a/packages/ui/src/containers/Passwordless/index.module.scss +++ b/packages/ui/src/containers/Passwordless/index.module.scss @@ -11,7 +11,7 @@ margin-bottom: _.unit(12); } - .terms { + .childWrapper { margin-bottom: _.unit(4); } } diff --git a/packages/ui/src/pages/ForgotPassword/index.test.tsx b/packages/ui/src/pages/ForgotPassword/index.test.tsx index f4e2fd2d5..25a220c67 100644 --- a/packages/ui/src/pages/ForgotPassword/index.test.tsx +++ b/packages/ui/src/pages/ForgotPassword/index.test.tsx @@ -1,11 +1,16 @@ -import { render } from '@testing-library/react'; import { Routes, Route, MemoryRouter } from 'react-router-dom'; +import renderWithPageContext from '@/__mocks__/RenderWithPageContext'; + import ForgotPassword from '.'; +jest.mock('i18next', () => ({ + language: 'en', +})); + describe('ForgotPassword', () => { it('render email forgot password properly', () => { - const { queryByText } = render( + const { queryByText } = renderWithPageContext( } /> @@ -18,7 +23,7 @@ describe('ForgotPassword', () => { }); it('render sms forgot password properly', () => { - const { queryByText } = render( + const { queryByText } = renderWithPageContext( } /> diff --git a/packages/ui/src/pages/ForgotPassword/index.tsx b/packages/ui/src/pages/ForgotPassword/index.tsx index 8c259a569..b723838a4 100644 --- a/packages/ui/src/pages/ForgotPassword/index.tsx +++ b/packages/ui/src/pages/ForgotPassword/index.tsx @@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'; import { useParams } from 'react-router-dom'; import NavBar from '@/components/NavBar'; +import { EmailPasswordless, PhonePasswordless } from '@/containers/Passwordless'; import ErrorPage from '@/pages/ErrorPage'; import * as styles from './index.module.scss'; @@ -18,11 +19,11 @@ const ForgotPassword = () => { const forgotPasswordForm = useMemo(() => { if (method === 'sms') { - return
Phone Number form
; + return ; } if (method === 'email') { - return
Email Form
; + return ; } }, [method]); diff --git a/packages/ui/src/pages/Passcode/index.tsx b/packages/ui/src/pages/Passcode/index.tsx index a72383e88..7a604dfd3 100644 --- a/packages/ui/src/pages/Passcode/index.tsx +++ b/packages/ui/src/pages/Passcode/index.tsx @@ -6,7 +6,7 @@ import NavBar from '@/components/NavBar'; import PasscodeValidation from '@/containers/PasscodeValidation'; import ErrorPage from '@/pages/ErrorPage'; import { UserFlow } from '@/types'; -import { passcodeStateGuard, passcodeMethodGuard } from '@/types/guard'; +import { passcodeStateGuard, passcodeMethodGuard, userFlowGuard } from '@/types/guard'; import * as styles from './index.module.scss'; @@ -17,10 +17,9 @@ type Parameters = { const Passcode = () => { const { t } = useTranslation(); - const { method, type } = useParams(); + const { method, type = '' } = useParams(); const { state } = useLocation(); - const invalidType = type !== 'sign-in' && type !== 'register'; - + const invalidType = !is(type, userFlowGuard); const invalidMethod = !is(method, passcodeMethodGuard); const invalidState = !is(state, passcodeStateGuard); diff --git a/packages/ui/src/pages/Register/index.tsx b/packages/ui/src/pages/Register/index.tsx index 9b0be7e83..d7c9f5f77 100644 --- a/packages/ui/src/pages/Register/index.tsx +++ b/packages/ui/src/pages/Register/index.tsx @@ -5,6 +5,8 @@ import { useParams } from 'react-router-dom'; import NavBar from '@/components/NavBar'; import CreateAccount from '@/containers/CreateAccount'; import { PhonePasswordless, EmailPasswordless } from '@/containers/Passwordless'; +import TermsOfUse from '@/containers/TermsOfUse'; +import useTerms from '@/hooks/use-terms'; import ErrorPage from '@/pages/ErrorPage'; import * as styles from './index.module.scss'; @@ -17,17 +19,27 @@ const Register = () => { const { t } = useTranslation(); const { method = 'username' } = useParams(); + const { termsValidation } = useTerms(); + const registerForm = useMemo(() => { if (method === 'sms') { - return ; + return ( + + + + ); } if (method === 'email') { - return ; + return ( + + + + ); } return ; - }, [method]); + }, [method, termsValidation]); if (!['email', 'sms', 'username'].includes(method)) { return ; diff --git a/packages/ui/src/pages/SecondarySignIn/index.module.scss b/packages/ui/src/pages/SecondarySignIn/index.module.scss index 1730b3dd9..6ab992417 100644 --- a/packages/ui/src/pages/SecondarySignIn/index.module.scss +++ b/packages/ui/src/pages/SecondarySignIn/index.module.scss @@ -9,7 +9,6 @@ margin-top: _.unit(2); } - .title { @include _.title; } diff --git a/packages/ui/src/pages/SecondarySignIn/index.tsx b/packages/ui/src/pages/SecondarySignIn/index.tsx index 4655b56b6..54e7f2e9a 100644 --- a/packages/ui/src/pages/SecondarySignIn/index.tsx +++ b/packages/ui/src/pages/SecondarySignIn/index.tsx @@ -4,7 +4,9 @@ import { useParams } from 'react-router-dom'; import NavBar from '@/components/NavBar'; import { PhonePasswordless, EmailPasswordless } from '@/containers/Passwordless'; +import TermsOfUse from '@/containers/TermsOfUse'; import UsernameSignIn from '@/containers/UsernameSignIn'; +import useTerms from '@/hooks/use-terms'; import ErrorPage from '@/pages/ErrorPage'; import * as styles from './index.module.scss'; @@ -17,17 +19,27 @@ const SecondarySignIn = () => { const { t } = useTranslation(); const { method = 'username' } = useParams(); + const { termsValidation } = useTerms(); + const signInForm = useMemo(() => { if (method === 'sms') { - return ; + return ( + + + + ); } if (method === 'email') { - return ; + return ( + + + + ); } return ; - }, [method]); + }, [method, termsValidation]); if (!['email', 'sms', 'username'].includes(method)) { return ; diff --git a/packages/ui/src/types/guard.ts b/packages/ui/src/types/guard.ts index b5135993c..7d059a55e 100644 --- a/packages/ui/src/types/guard.ts +++ b/packages/ui/src/types/guard.ts @@ -10,3 +10,9 @@ export const passcodeStateGuard = s.object({ }); export const passcodeMethodGuard = s.union([s.literal('email'), s.literal('sms')]); + +export const userFlowGuard = s.union([ + s.literal('sign-in'), + s.literal('register'), + s.literal('reset-password'), +]); diff --git a/packages/ui/src/types/index.ts b/packages/ui/src/types/index.ts index ab5134187..1984f8f88 100644 --- a/packages/ui/src/types/index.ts +++ b/packages/ui/src/types/index.ts @@ -1,7 +1,7 @@ import type { LanguageKey } from '@logto/core-kit'; import { SignInExperience, ConnectorMetadata, AppearanceMode } from '@logto/schemas'; -export type UserFlow = 'sign-in' | 'register'; +export type UserFlow = 'sign-in' | 'register' | 'reset-password'; export type SignInMethod = 'username' | 'email' | 'sms' | 'social'; export type LocalSignInMethod = Exclude;