From d8f58ad13d6a43190245fa02ee1ae1eaeea8e6fb Mon Sep 17 00:00:00 2001
From: Sajad Mirjalili <sajadmrjll@gmail.com>
Date: Mon, 29 Sep 2025 12:03:02 +0330
Subject: [PATCH] fix: forget password typos, submit with enter

---
 .../ForgetPassword/ChangePassword.tsx         | 12 +++---
 .../ForgetPasswordContainer.tsx               | 15 ++++---
 ...asswordInfo.tsx => ForgetPasswordInfo.tsx} | 39 +++++++++----------
 .../ForgetPassword/ForgetPasswordOtp.tsx      | 18 ++++-----
 4 files changed, 38 insertions(+), 46 deletions(-)
 rename src/features/authentication/components/ForgetPassword/{ForgettedPasswordInfo.tsx => ForgetPasswordInfo.tsx} (82%)

diff --git a/src/features/authentication/components/ForgetPassword/ChangePassword.tsx b/src/features/authentication/components/ForgetPassword/ChangePassword.tsx
index 1a10ecc..65df75a 100644
--- a/src/features/authentication/components/ForgetPassword/ChangePassword.tsx
+++ b/src/features/authentication/components/ForgetPassword/ChangePassword.tsx
@@ -24,7 +24,7 @@ import { useApi } from '@/hooks/useApi';
 export interface ChangePasswordProps {
   onEditInfo: () => void;
   onPasswordChanged: () => void;
-  forgettedPasswordInfo: string;
+  forgetPasswordInfo: string;
   infoType: AuthType;
   countryCode: CountryCode;
 }
@@ -32,7 +32,7 @@ export interface ChangePasswordProps {
 export const ChangePassword = ({
   onEditInfo,
   onPasswordChanged,
-  forgettedPasswordInfo,
+  forgetPasswordInfo,
   infoType,
   countryCode,
 }: ChangePasswordProps) => {
@@ -78,11 +78,9 @@ export const ChangePassword = ({
       confirmInputRef.current?.focus();
     } else {
       const apiRequest: ResetPasswordRequest = {
-        email: infoType === 'email' ? forgettedPasswordInfo : undefined,
+        email: infoType === 'email' ? forgetPasswordInfo : undefined,
         phoneNumber:
-          infoType === 'phone'
-            ? countryCode + forgettedPasswordInfo
-            : undefined,
+          infoType === 'phone' ? countryCode + forgetPasswordInfo : undefined,
         newPassword: passValue,
         confirmNewPassword: confirmPassValue,
       };
@@ -138,7 +136,7 @@ export const ChangePassword = ({
           endIcon={<Icon Component={Edit2} />}
           onClick={onEditInfo}
         >
-          {forgettedPasswordInfo}
+          {forgetPasswordInfo}
         </Button>
       </Box>
 
diff --git a/src/features/authentication/components/ForgetPassword/ForgetPasswordContainer.tsx b/src/features/authentication/components/ForgetPassword/ForgetPasswordContainer.tsx
index f605884..ebb8c95 100644
--- a/src/features/authentication/components/ForgetPassword/ForgetPasswordContainer.tsx
+++ b/src/features/authentication/components/ForgetPassword/ForgetPasswordContainer.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import type { AuthType } from '../../types/authTypes';
-import { ForgettedPasswordInfo } from './ForgettedPasswordInfo';
+import { ForgetPasswordInfo } from './ForgetPasswordInfo';
 import { ForgetPasswordOtp } from './ForgetPasswordOtp';
 import { ChangePassword } from './ChangePassword';
 import type { CountryCode } from '@/types/commonTypes';
@@ -11,8 +11,7 @@ export const ForgetPasswordContainer = () => {
   const [forgetPassCurrentStep, setForgetPassCurrentStep] = useState<
     'enterInfo' | 'verifyOtp' | 'setPassword'
   >('enterInfo');
-  const [forgettedPasswordInfo, setForgettedPasswordInfo] =
-    useState<string>('');
+  const [forgetPasswordInfo, setForgetPasswordInfo] = useState<string>('');
   const [infoCountryCode, setInfoCountryCode] = useState<CountryCode>('+98');
   const [infoType, setInfoType] = useState<AuthType>('email');
 
@@ -35,11 +34,11 @@ export const ForgetPasswordContainer = () => {
   return (
     <>
       {forgetPassCurrentStep === 'enterInfo' && (
-        <ForgettedPasswordInfo
+        <ForgetPasswordInfo
           infoType={infoType}
           setInfoType={setInfoType}
-          forgettedPasswordInfo={forgettedPasswordInfo}
-          setForgettedPasswordInfo={setForgettedPasswordInfo}
+          forgetPasswordInfo={forgetPasswordInfo}
+          setForgetPasswordInfo={setForgetPasswordInfo}
           onVerifyOtp={handleVerifyOtp}
           countryCode={infoCountryCode}
           setCountryCode={setInfoCountryCode}
@@ -51,7 +50,7 @@ export const ForgetPasswordContainer = () => {
           countryCode={infoCountryCode}
           infoType={infoType}
           onEditInfo={handleEditInfo}
-          forgettedPasswordInfo={forgettedPasswordInfo}
+          forgetPasswordInfo={forgetPasswordInfo}
           onOTPVerified={handleOtpVerified}
         />
       )}
@@ -59,7 +58,7 @@ export const ForgetPasswordContainer = () => {
       {forgetPassCurrentStep === 'setPassword' && (
         <ChangePassword
           onEditInfo={handleEditInfo}
-          forgettedPasswordInfo={forgettedPasswordInfo}
+          forgetPasswordInfo={forgetPasswordInfo}
           onPasswordChanged={handlePasswordChanged}
           infoType={infoType}
           countryCode={infoCountryCode}
diff --git a/src/features/authentication/components/ForgetPassword/ForgettedPasswordInfo.tsx b/src/features/authentication/components/ForgetPassword/ForgetPasswordInfo.tsx
similarity index 82%
rename from src/features/authentication/components/ForgetPassword/ForgettedPasswordInfo.tsx
rename to src/features/authentication/components/ForgetPassword/ForgetPasswordInfo.tsx
index 8ed49ff..033078e 100644
--- a/src/features/authentication/components/ForgetPassword/ForgettedPasswordInfo.tsx
+++ b/src/features/authentication/components/ForgetPassword/ForgetPasswordInfo.tsx
@@ -14,9 +14,9 @@ import { useToast } from '@rkheftan/harmony-ui';
 import { useApi } from '@/hooks/useApi';
 import { replacePersianWithRealNumbers } from '@/utils/replacePersianWithRealNumbers';
 
-export interface ForgettedPasswordInfoProps {
-  forgettedPasswordInfo: string;
-  setForgettedPasswordInfo: Dispatch<string>;
+export interface ForgetPasswordInfoProps {
+  forgetPasswordInfo: string;
+  setForgetPasswordInfo: Dispatch<string>;
   infoType: AuthType;
   setInfoType: Dispatch<AuthType>;
   onVerifyOtp: (value: string) => void;
@@ -24,15 +24,15 @@ export interface ForgettedPasswordInfoProps {
   setCountryCode: Dispatch<CountryCode>;
 }
 
-export function ForgettedPasswordInfo({
-  forgettedPasswordInfo,
-  setForgettedPasswordInfo,
+export function ForgetPasswordInfo({
+  forgetPasswordInfo,
+  setForgetPasswordInfo,
   infoType,
   setInfoType,
   onVerifyOtp,
   countryCode,
   setCountryCode,
-}: ForgettedPasswordInfoProps) {
+}: ForgetPasswordInfoProps) {
   const { t } = useTranslation('authentication');
   const textFieldRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -51,7 +51,7 @@ export function ForgettedPasswordInfo({
     if (newValue.startsWith('09')) {
       newValue = newValue.substring(1);
     }
-    setForgettedPasswordInfo(newValue);
+    setForgetPasswordInfo(newValue);
 
     // If the new value contains only digits (or is empty), it's a phone number
     if (isNumeric(newValue)) {
@@ -63,7 +63,7 @@ export function ForgettedPasswordInfo({
 
   const handleBlur = () => {
     setTouched(true);
-    validateInput(forgettedPasswordInfo, infoType);
+    validateInput(forgetPasswordInfo, infoType);
   };
 
   const validateInput = (
@@ -87,13 +87,11 @@ export function ForgettedPasswordInfo({
   };
 
   const handleSubmit = async () => {
-    if (validateInput(forgettedPasswordInfo, infoType, false)) {
+    if (validateInput(forgetPasswordInfo, infoType, false)) {
       const sendCodeRequest: SendForgetPassCodeRequest = {
-        email: infoType === 'email' ? forgettedPasswordInfo : undefined,
+        email: infoType === 'email' ? forgetPasswordInfo : undefined,
         phoneNumber:
-          infoType === 'phone'
-            ? countryCode + forgettedPasswordInfo
-            : undefined,
+          infoType === 'phone' ? countryCode + forgetPasswordInfo : undefined,
       };
       const res = await sendForgetPassCodeCall(sendCodeRequest);
 
@@ -106,19 +104,18 @@ export function ForgettedPasswordInfo({
         });
       }
 
-      onVerifyOtp(forgettedPasswordInfo);
+      onVerifyOtp(forgetPasswordInfo);
     } else {
       inputRef.current?.focus();
-      validateInput(forgettedPasswordInfo, infoType);
+      validateInput(forgetPasswordInfo, infoType);
     }
   };
 
-  const showAdornment =
-    infoType === 'phone' && forgettedPasswordInfo.length > 0;
+  const showAdornment = infoType === 'phone' && forgetPasswordInfo.length > 0;
 
   return (
     <AuthenticationCard>
-      <Stack spacing={1}>
+      <Stack component="form" onSubmit={handleSubmit} spacing={1}>
         <Typography variant="h5">
           {t('forgetPassword.forgetPassword')}
         </Typography>
@@ -133,7 +130,7 @@ export function ForgettedPasswordInfo({
         ref={textFieldRef}
         inputRef={inputRef}
         label={t('loginForm.emailOrPhoneLabel')}
-        value={forgettedPasswordInfo}
+        value={forgetPasswordInfo}
         onChange={handleInputChange}
         onBlur={handleBlur}
         error={inputError}
@@ -157,7 +154,7 @@ export function ForgettedPasswordInfo({
       />
 
       <Stack spacing={2}>
-        <Button loading={sendForgetPassCodeLoading} onClick={handleSubmit}>
+        <Button loading={sendForgetPassCodeLoading} type="submit">
           {t('forgetPassword.confirm')}
         </Button>
       </Stack>
diff --git a/src/features/authentication/components/ForgetPassword/ForgetPasswordOtp.tsx b/src/features/authentication/components/ForgetPassword/ForgetPasswordOtp.tsx
index d914114..705e718 100644
--- a/src/features/authentication/components/ForgetPassword/ForgetPasswordOtp.tsx
+++ b/src/features/authentication/components/ForgetPassword/ForgetPasswordOtp.tsx
@@ -18,7 +18,7 @@ import { Icon, useToast } from '@rkheftan/harmony-ui';
 import { useApi } from '@/hooks/useApi';
 
 interface ForgetPasswordOtpProps {
-  forgettedPasswordInfo: string;
+  forgetPasswordInfo: string;
   infoType: AuthType;
   countryCode: CountryCode;
   onEditInfo: () => void;
@@ -26,7 +26,7 @@ interface ForgetPasswordOtpProps {
 }
 
 export function ForgetPasswordOtp({
-  forgettedPasswordInfo,
+  forgetPasswordInfo,
   infoType,
   countryCode,
   onEditInfo,
@@ -69,9 +69,9 @@ export function ForgetPasswordOtp({
 
   const handleResendOTPCode = async () => {
     const sendCodeRequest: SendForgetPassCodeRequest = {
-      email: infoType === 'email' ? forgettedPasswordInfo : undefined,
+      email: infoType === 'email' ? forgetPasswordInfo : undefined,
       phoneNumber:
-        infoType === 'phone' ? countryCode + forgettedPasswordInfo : undefined,
+        infoType === 'phone' ? countryCode + forgetPasswordInfo : undefined,
     };
     await sendForgetPassCodeCall(sendCodeRequest);
 
@@ -93,11 +93,9 @@ export function ForgetPasswordOtp({
 
       // Change setTimeout to api call
       const apiRequest: ConfirmForgetPassCodeRequest = {
-        email: infoType === 'email' ? forgettedPasswordInfo : undefined,
+        email: infoType === 'email' ? forgetPasswordInfo : undefined,
         phoneNumber:
-          infoType === 'phone'
-            ? countryCode + forgettedPasswordInfo
-            : undefined,
+          infoType === 'phone' ? countryCode + forgetPasswordInfo : undefined,
         code: otpCode,
       };
 
@@ -153,8 +151,8 @@ export function ForgetPasswordOtp({
               onClick={onEditInfo}
             >
               {infoType === 'phone'
-                ? countryCode + forgettedPasswordInfo
-                : forgettedPasswordInfo}
+                ? countryCode + forgetPasswordInfo
+                : forgetPasswordInfo}
             </Button>
           </Box>