feat(ui): add forget password flow (#1952)

feat(ui): add reset password verification flow

add reset password verification flow

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 = () => {
               <Route path="/register/:method" element={<Register />} />
 
               {/* forgot password */}
-              {/**
-               * WIP
-               * <Route path="/forgot-password/:method" element={<ForgotPassword />} />
-               */}
+              <Route path="/forgot-password/:method" element={<ForgotPassword />} />
 
               {/* social sign-in pages */}
 

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

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('<EmailPasswordless/>', () => {
     expect(queryByText('action.continue')).not.toBeNull();
   });
 
-  test('render with terms settings enabled', () => {
+  test('render with terms settings', () => {
     const { queryByText } = renderWithPageContext(
       <MemoryRouter>
         <SettingsProvider>
-          <EmailPasswordless type="sign-in" />
+          <EmailPasswordless type="sign-in">
+            <TermsOfUse />
+          </EmailPasswordless>
         </SettingsProvider>
       </MemoryRouter>
     );
@@ -60,6 +63,31 @@ describe('<EmailPasswordless/>', () => {
     }
   });
 
+  test('should block in extra validation failed', async () => {
+    const { container, getByText } = renderWithPageContext(
+      <MemoryRouter>
+        <SettingsProvider>
+          <EmailPasswordless type="sign-in" onSubmitValidation={async () => false} />
+        </SettingsProvider>
+      </MemoryRouter>
+    );
+    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(
       <MemoryRouter>
@@ -73,8 +101,6 @@ describe('<EmailPasswordless/>', () => {
     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('<EmailPasswordless/>', () => {
     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(() => {

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<boolean>;
+  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) => {
           }}
         />
 
-        <TermsOfUse className={styles.terms} />
+        {children && <div className={styles.childWrapper}>{children}</div>}
 
         <Button onClick={async () => onSubmitHandler()}>{t('action.continue')}</Button>
 

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('<PhonePasswordless/>', () => {
     expect(queryByText('action.continue')).not.toBeNull();
   });
 
-  test('render with terms settings enabled', () => {
+  test('render with terms settings', () => {
     const { queryByText } = renderWithPageContext(
       <MemoryRouter>
         <SettingsProvider>
-          <PhonePasswordless type="sign-in" />
+          <PhonePasswordless type="sign-in">
+            <TermsOfUse />
+          </PhonePasswordless>
         </SettingsProvider>
       </MemoryRouter>
     );
@@ -67,6 +70,30 @@ describe('<PhonePasswordless/>', () => {
     }
   });
 
+  test('should block if extra validation failed', async () => {
+    const { container, getByText } = renderWithPageContext(
+      <MemoryRouter>
+        <SettingsProvider>
+          <PhonePasswordless type="sign-in" onSubmitValidation={async () => false} />
+        </SettingsProvider>
+      </MemoryRouter>
+    );
+    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(
       <MemoryRouter>
@@ -80,9 +107,6 @@ describe('<PhonePasswordless/>', () => {
     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('<PhonePasswordless/>', () => {
     if (phoneInput) {
       fireEvent.change(phoneInput, { target: { value: phoneNumber } });
     }
-    const termsButton = getByText('description.agree_with_terms');
-    fireEvent.click(termsButton);
 
     const submitButton = getByText('action.continue');
 

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<boolean>;
+  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 }));
           }}
         />
-        <TermsOfUse className={styles.terms} />
+        {children && <div className={styles.childWrapper}>{children}</div>}
 
         <Button onClick={async () => onSubmitHandler()}>{t('action.continue')}</Button>
 

packages/ui/src/containers/Passwordless/index.module.scss

@@ -11,7 +11,7 @@
     margin-bottom: _.unit(12);
   }
 
-  .terms {
+  .childWrapper {
     margin-bottom: _.unit(4);
   }
 }

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(
       <MemoryRouter initialEntries={['/forgot-password/email']}>
         <Routes>
           <Route path="/forgot-password/:method" element={<ForgotPassword />} />
@@ -18,7 +23,7 @@ describe('ForgotPassword', () => {
   });
 
   it('render sms forgot password properly', () => {
-    const { queryByText } = render(
+    const { queryByText } = renderWithPageContext(
       <MemoryRouter initialEntries={['/forgot-password/sms']}>
         <Routes>
           <Route path="/forgot-password/:method" element={<ForgotPassword />} />

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 <div>Phone Number form</div>;
+      return <PhonePasswordless autoFocus type="reset-password" />;
     }
 
     if (method === 'email') {
-      return <div>Email Form</div>;
+      return <EmailPasswordless autoFocus type="reset-password" />;
     }
   }, [method]);
 

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<Parameters>();
+  const { method, type = '' } = useParams<Parameters>();
   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);
 

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<Parameters>();
 
+  const { termsValidation } = useTerms();
+
   const registerForm = useMemo(() => {
     if (method === 'sms') {
-      return <PhonePasswordless autoFocus type="register" />;
+      return (
+        <PhonePasswordless autoFocus type="register" onSubmitValidation={termsValidation}>
+          <TermsOfUse />
+        </PhonePasswordless>
+      );
     }
 
     if (method === 'email') {
-      return <EmailPasswordless autoFocus type="register" />;
+      return (
+        <EmailPasswordless autoFocus type="register" onSubmitValidation={termsValidation}>
+          <TermsOfUse />
+        </EmailPasswordless>
+      );
     }
 
     return <CreateAccount autoFocus />;
-  }, [method]);
+  }, [method, termsValidation]);
 
   if (!['email', 'sms', 'username'].includes(method)) {
     return <ErrorPage />;

packages/ui/src/pages/SecondarySignIn/index.module.scss

@@ -9,7 +9,6 @@
   margin-top: _.unit(2);
 }
 
-
 .title {
   @include _.title;
 }

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<Props>();
 
+  const { termsValidation } = useTerms();
+
   const signInForm = useMemo(() => {
     if (method === 'sms') {
-      return <PhonePasswordless autoFocus type="sign-in" />;
+      return (
+        <PhonePasswordless autoFocus type="sign-in" onSubmitValidation={termsValidation}>
+          <TermsOfUse />
+        </PhonePasswordless>
+      );
     }
 
     if (method === 'email') {
-      return <EmailPasswordless autoFocus type="sign-in" />;
+      return (
+        <EmailPasswordless autoFocus type="sign-in" onSubmitValidation={termsValidation}>
+          <TermsOfUse />
+        </EmailPasswordless>
+      );
     }
 
     return <UsernameSignIn autoFocus />;
-  }, [method]);
+  }, [method, termsValidation]);
 
   if (!['email', 'sms', 'username'].includes(method)) {
     return <ErrorPage />;

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'),
+]);

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<SignInMethod, 'social'>;