From e15f7744887d46474dceb1357f8b2e688e61becc Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Tue, 14 Feb 2023 15:50:17 +0800
Subject: [PATCH] refactor(ui): refactor forgot password flow

refactor forgot password flow
---
 packages/phrases-ui/src/locales/de.ts         |   6 +-
 packages/phrases-ui/src/locales/en.ts         |   6 +-
 packages/phrases-ui/src/locales/fr.ts         |   6 +-
 packages/phrases-ui/src/locales/ko.ts         |   6 +-
 packages/phrases-ui/src/locales/pt-br.ts      |   6 +-
 packages/phrases-ui/src/locales/pt-pt.ts      |   6 +-
 packages/phrases-ui/src/locales/tr-tr.ts      |   6 +-
 packages/phrases-ui/src/locales/zh-cn.ts      |   3 +-
 packages/ui/src/App.tsx                       |   2 +-
 .../CountryCodeSelector/index.tsx             |   2 +-
 .../InputFields/SmartInputField/index.tsx     |   4 +
 .../SmartInputField/use-smart-input-field.ts  |  22 ++-
 .../EmailForm/EmailResetPassword.test.tsx     |  56 -------
 .../EmailForm/EmailResetPassword.tsx          |  33 ----
 .../ui/src/containers/EmailForm/index.tsx     |   1 -
 .../ForgotPasswordLink/index.tsx              |  10 +-
 .../PhoneForm/PhoneResetPassword.test.tsx     |  64 --------
 .../PhoneForm/PhoneResetPassword.tsx          |  33 ----
 .../ui/src/containers/PhoneForm/index.tsx     |   1 -
 packages/ui/src/hooks/use-sie.ts              |  36 ++--
 .../ForgotPasswordForm/index.module.scss      |  19 +++
 .../ForgotPasswordForm/index.test.tsx         |  93 +++++++++++
 .../ForgotPasswordForm/index.tsx              | 119 ++++++++++++++
 .../src/pages/ForgotPassword/index.test.tsx   | 154 ++++++++++--------
 .../ui/src/pages/ForgotPassword/index.tsx     |  64 +++++---
 .../IdentifierRegisterForm/index.module.scss  |   1 +
 .../IdentifierSignInForm/index.module.scss    |   1 +
 .../PasswordSignInForm/index.module.scss      |   1 +
 .../pages/SignIn/PasswordSignInForm/index.tsx |  15 +-
 .../SignInPassword/PasswordForm/index.tsx     |   9 +-
 packages/ui/src/types/guard.ts                |  22 +--
 packages/ui/src/utils/country-code.ts         |   6 +-
 packages/ui/src/utils/form.ts                 |  25 ++-
 33 files changed, 463 insertions(+), 375 deletions(-)
 delete mode 100644 packages/ui/src/containers/EmailForm/EmailResetPassword.test.tsx
 delete mode 100644 packages/ui/src/containers/EmailForm/EmailResetPassword.tsx
 rename packages/ui/src/{components => containers}/ForgotPasswordLink/index.tsx (58%)
 delete mode 100644 packages/ui/src/containers/PhoneForm/PhoneResetPassword.test.tsx
 delete mode 100644 packages/ui/src/containers/PhoneForm/PhoneResetPassword.tsx
 create mode 100644 packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.module.scss
 create mode 100644 packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.test.tsx
 create mode 100644 packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx

diff --git a/packages/phrases-ui/src/locales/de.ts b/packages/phrases-ui/src/locales/de.ts
index b6c78afd5..8c5343beb 100644
--- a/packages/phrases-ui/src/locales/de.ts
+++ b/packages/phrases-ui/src/locales/de.ts
@@ -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',
diff --git a/packages/phrases-ui/src/locales/en.ts b/packages/phrases-ui/src/locales/en.ts
index f1df8e581..c6d8c0250 100644
--- a/packages/phrases-ui/src/locales/en.ts
+++ b/packages/phrases-ui/src/locales/en.ts
@@ -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',
diff --git a/packages/phrases-ui/src/locales/fr.ts b/packages/phrases-ui/src/locales/fr.ts
index 3bae0f723..e9e93ca70 100644
--- a/packages/phrases-ui/src/locales/fr.ts
+++ b/packages/phrases-ui/src/locales/fr.ts
@@ -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
diff --git a/packages/phrases-ui/src/locales/ko.ts b/packages/phrases-ui/src/locales/ko.ts
index 961c7e875..d539aa4a1 100644
--- a/packages/phrases-ui/src/locales/ko.ts
+++ b/packages/phrases-ui/src/locales/ko.ts
@@ -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: '비밀번호 변경됨',
diff --git a/packages/phrases-ui/src/locales/pt-br.ts b/packages/phrases-ui/src/locales/pt-br.ts
index b72ff68d7..1a5add0b0 100644
--- a/packages/phrases-ui/src/locales/pt-br.ts
+++ b/packages/phrases-ui/src/locales/pt-br.ts
@@ -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',
diff --git a/packages/phrases-ui/src/locales/pt-pt.ts b/packages/phrases-ui/src/locales/pt-pt.ts
index 65af47dee..58abdebfc 100644
--- a/packages/phrases-ui/src/locales/pt-pt.ts
+++ b/packages/phrases-ui/src/locales/pt-pt.ts
@@ -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
diff --git a/packages/phrases-ui/src/locales/tr-tr.ts b/packages/phrases-ui/src/locales/tr-tr.ts
index f69ea2f23..2cf5c7098 100644
--- a/packages/phrases-ui/src/locales/tr-tr.ts
+++ b/packages/phrases-ui/src/locales/tr-tr.ts
@@ -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
diff --git a/packages/phrases-ui/src/locales/zh-cn.ts b/packages/phrases-ui/src/locales/zh-cn.ts
index 1c1d7dd4f..7c338577b 100644
--- a/packages/phrases-ui/src/locales/zh-cn.ts
+++ b/packages/phrases-ui/src/locales/zh-cn.ts
@@ -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: '已重置密码！',
diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 5fd158467..7a60fe94e 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -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 */}
diff --git a/packages/ui/src/components/InputFields/SmartInputField/CountryCodeSelector/index.tsx b/packages/ui/src/components/InputFields/SmartInputField/CountryCodeSelector/index.tsx
index a52eab8b8..c4a6e9678 100644
--- a/packages/ui/src/components/InputFields/SmartInputField/CountryCodeSelector/index.tsx
+++ b/packages/ui/src/components/InputFields/SmartInputField/CountryCodeSelector/index.tsx
@@ -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}`}
diff --git a/packages/ui/src/components/InputFields/SmartInputField/index.tsx b/packages/ui/src/components/InputFields/SmartInputField/index.tsx
index c0fbdfe7d..f2c6a626c 100644
--- a/packages/ui/src/components/InputFields/SmartInputField/index.tsx
+++ b/packages/ui/src/components/InputFields/SmartInputField/index.tsx
@@ -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,
diff --git a/packages/ui/src/components/InputFields/SmartInputField/use-smart-input-field.ts b/packages/ui/src/components/InputFields/SmartInputField/use-smart-input-field.ts
index 32100dfbf..49c678acc 100644
--- a/packages/ui/src/components/InputFields/SmartInputField/use-smart-input-field.ts
+++ b/packages/ui/src/components/InputFields/SmartInputField/use-smart-input-field.ts
@@ -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(
diff --git a/packages/ui/src/containers/EmailForm/EmailResetPassword.test.tsx b/packages/ui/src/containers/EmailForm/EmailResetPassword.test.tsx
deleted file mode 100644
index 382426d0f..000000000
--- a/packages/ui/src/containers/EmailForm/EmailResetPassword.test.tsx
+++ /dev/null
@@ -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 } }
-      );
-    });
-  });
-});
diff --git a/packages/ui/src/containers/EmailForm/EmailResetPassword.tsx b/packages/ui/src/containers/EmailForm/EmailResetPassword.tsx
deleted file mode 100644
index 548609bc3..000000000
--- a/packages/ui/src/containers/EmailForm/EmailResetPassword.tsx
+++ /dev/null
@@ -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;
diff --git a/packages/ui/src/containers/EmailForm/index.tsx b/packages/ui/src/containers/EmailForm/index.tsx
index b5b49e5fc..bb457f98d 100644
--- a/packages/ui/src/containers/EmailForm/index.tsx
+++ b/packages/ui/src/containers/EmailForm/index.tsx
@@ -1,2 +1 @@
-export { default as EmailResetPassword } from './EmailResetPassword';
 export { default as EmailContinue } from './EmailContinue';
diff --git a/packages/ui/src/components/ForgotPasswordLink/index.tsx b/packages/ui/src/containers/ForgotPasswordLink/index.tsx
similarity index 58%
rename from packages/ui/src/components/ForgotPasswordLink/index.tsx
rename to packages/ui/src/containers/ForgotPasswordLink/index.tsx
index 3c394763e..f275a02f7 100644
--- a/packages/ui/src/components/ForgotPasswordLink/index.tsx
+++ b/packages/ui/src/containers/ForgotPasswordLink/index.tsx
@@ -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"
   />
 );
diff --git a/packages/ui/src/containers/PhoneForm/PhoneResetPassword.test.tsx b/packages/ui/src/containers/PhoneForm/PhoneResetPassword.test.tsx
deleted file mode 100644
index 943eb502b..000000000
--- a/packages/ui/src/containers/PhoneForm/PhoneResetPassword.test.tsx
+++ /dev/null
@@ -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 } }
-      );
-    });
-  });
-});
diff --git a/packages/ui/src/containers/PhoneForm/PhoneResetPassword.tsx b/packages/ui/src/containers/PhoneForm/PhoneResetPassword.tsx
deleted file mode 100644
index 621f0f9de..000000000
--- a/packages/ui/src/containers/PhoneForm/PhoneResetPassword.tsx
+++ /dev/null
@@ -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;
diff --git a/packages/ui/src/containers/PhoneForm/index.tsx b/packages/ui/src/containers/PhoneForm/index.tsx
index a6458a7a1..1fefc0c21 100644
--- a/packages/ui/src/containers/PhoneForm/index.tsx
+++ b/packages/ui/src/containers/PhoneForm/index.tsx
@@ -1,2 +1 @@
-export { default as PhoneResetPassword } from './PhoneResetPassword';
 export { default as PhoneContinue } from './PhoneContinue';
diff --git a/packages/ui/src/hooks/use-sie.ts b/packages/ui/src/hooks/use-sie.ts
index 953231b1c..4bddefd21 100644
--- a/packages/ui/src/hooks/use-sie.ts
+++ b/packages/ui/src/hooks/use-sie.ts
@@ -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,
   };
 };
diff --git a/packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.module.scss b/packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.module.scss
new file mode 100644
index 000000000..74d3215ec
--- /dev/null
+++ b/packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.module.scss
@@ -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);
+  }
+}
diff --git a/packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.test.tsx b/packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.test.tsx
new file mode 100644
index 000000000..ae9f2d177
--- /dev/null
+++ b/packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.test.tsx
@@ -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 }
+          );
+        });
+      });
+    }
+  );
+});
diff --git a/packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx b/packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx
new file mode 100644
index 000000000..5d5d8063b
--- /dev/null
+++ b/packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx
@@ -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;
diff --git a/packages/ui/src/pages/ForgotPassword/index.test.tsx b/packages/ui/src/pages/ForgotPassword/index.test.tsx
index 0c0df27fd..757bac338 100644
--- a/packages/ui/src/pages/ForgotPassword/index.test.tsx
+++ b/packages/ui/src/pages/ForgotPassword/index.test.tsx
@@ -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();
+      }
+    });
+  });
 });
diff --git a/packages/ui/src/pages/ForgotPassword/index.tsx b/packages/ui/src/pages/ForgotPassword/index.tsx
index aa11aa9e6..f85541096 100644
--- a/packages/ui/src/pages/ForgotPassword/index.tsx
+++ b/packages/ui/src/pages/ForgotPassword/index.tsx
@@ -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>
   );
diff --git a/packages/ui/src/pages/Register/IdentifierRegisterForm/index.module.scss b/packages/ui/src/pages/Register/IdentifierRegisterForm/index.module.scss
index 4a7fe1a9d..91051d3a3 100644
--- a/packages/ui/src/pages/Register/IdentifierRegisterForm/index.module.scss
+++ b/packages/ui/src/pages/Register/IdentifierRegisterForm/index.module.scss
@@ -14,6 +14,7 @@
   }
 
   .formErrors {
+    margin-left: _.unit(0.5);
     margin-top: _.unit(-3);
   }
 }
diff --git a/packages/ui/src/pages/SignIn/IdentifierSignInForm/index.module.scss b/packages/ui/src/pages/SignIn/IdentifierSignInForm/index.module.scss
index 4a7fe1a9d..91051d3a3 100644
--- a/packages/ui/src/pages/SignIn/IdentifierSignInForm/index.module.scss
+++ b/packages/ui/src/pages/SignIn/IdentifierSignInForm/index.module.scss
@@ -14,6 +14,7 @@
   }
 
   .formErrors {
+    margin-left: _.unit(0.5);
     margin-top: _.unit(-3);
   }
 }
diff --git a/packages/ui/src/pages/SignIn/PasswordSignInForm/index.module.scss b/packages/ui/src/pages/SignIn/PasswordSignInForm/index.module.scss
index e44729ab5..e66a1631b 100644
--- a/packages/ui/src/pages/SignIn/PasswordSignInForm/index.module.scss
+++ b/packages/ui/src/pages/SignIn/PasswordSignInForm/index.module.scss
@@ -21,6 +21,7 @@
   }
 
   .formErrors {
+    margin-left: _.unit(0.5);
     margin-top: _.unit(-3);
   }
 }
diff --git a/packages/ui/src/pages/SignIn/PasswordSignInForm/index.tsx b/packages/ui/src/pages/SignIn/PasswordSignInForm/index.tsx
index 56637fac2..b443d0ecd 100644
--- a/packages/ui/src/pages/SignIn/PasswordSignInForm/index.tsx
+++ b/packages/ui/src/pages/SignIn/PasswordSignInForm/index.tsx
@@ -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} />
diff --git a/packages/ui/src/pages/SignInPassword/PasswordForm/index.tsx b/packages/ui/src/pages/SignInPassword/PasswordForm/index.tsx
index 55829eab6..d03d71e06 100644
--- a/packages/ui/src/pages/SignInPassword/PasswordForm/index.tsx
+++ b/packages/ui/src/pages/SignInPassword/PasswordForm/index.tsx
@@ -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" />
diff --git a/packages/ui/src/types/guard.ts b/packages/ui/src/types/guard.ts
index dc4c2b459..b6084e161 100644
--- a/packages/ui/src/types/guard.ts
+++ b/packages/ui/src/types/guard.ts
@@ -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(),
diff --git a/packages/ui/src/utils/country-code.ts b/packages/ui/src/utils/country-code.ts
index 96ba513c6..3e49c9f0c 100644
--- a/packages/ui/src/utils/country-code.ts
+++ b/packages/ui/src/utils/country-code.ts
@@ -106,9 +106,5 @@ export const parsePhoneNumber = (value: string) => {
       countryCallingCode: phoneNumber.countryCallingCode,
       nationalNumber: phoneNumber.nationalNumber,
     };
-  } catch {
-    return {
-      nationalNumber: value,
-    };
-  }
+  } catch {}
 };
diff --git a/packages/ui/src/utils/form.ts b/packages/ui/src/utils/form.ts
index 920d073ab..73fef46b6 100644
--- a/packages/ui/src/utils/form.ts
+++ b/packages/ui/src/utils/form.ts
@@ -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,
+  };
+};