fix: forget password bugs

src/features/authentication/components/ForgetPassword/ChangePassword.tsx

@@ -20,6 +20,7 @@ import type { CountryCode } from '@/types/commonTypes';
 import { resetPassword } from '../../api/authorizationAPI';
 import { Icon, useToast } from '@rkheftan/harmony-ui';
 import { useApi } from '@/hooks/useApi';
+import { LTRTypography } from '@/components/common/LTRTypography';
 
 export interface ChangePasswordProps {
   onEditInfo: () => void;
@@ -136,7 +137,11 @@ export const ChangePassword = ({
           endIcon={<Icon Component={Edit2} />}
           onClick={onEditInfo}
         >
-          {forgetPasswordInfo}
+          <LTRTypography>
+            {infoType === 'email'
+              ? forgetPasswordInfo
+              : countryCode + forgetPasswordInfo}
+          </LTRTypography>
         </Button>
       </Box>
 

src/features/authentication/components/ForgetPassword/ForgetPasswordInfo.tsx

@@ -1,5 +1,5 @@
-import { Button, Stack, TextField, Typography } from '@mui/material';
-import { useRef, useState, type Dispatch } from 'react';
+import { Box, Button, Stack, TextField, Typography } from '@mui/material';
+import { useRef, useState, type Dispatch, type FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isNumeric } from '@/utils/regexes/isNumeric';
 import type { AuthType } from '../../types/authTypes';
@@ -48,9 +48,7 @@ export function ForgetPasswordInfo({
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     let newValue = event.target.value;
     newValue = replacePersianWithRealNumbers(newValue);
-    if (newValue.startsWith('09')) {
-      newValue = newValue.substring(1);
-    }
+
     setForgetPasswordInfo(newValue);
 
     // If the new value contains only digits (or is empty), it's a phone number
@@ -86,13 +84,26 @@ export function ForgetPasswordInfo({
     }
   };
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
     if (validateInput(forgetPasswordInfo, infoType, false)) {
+      let newValue = forgetPasswordInfo;
+
+      if (
+        infoType === 'phone' &&
+        countryCode === '+98' &&
+        newValue.startsWith('09')
+      ) {
+        newValue = forgetPasswordInfo.substring(1);
+        setForgetPasswordInfo(newValue);
+      }
+
       const sendCodeRequest: SendForgetPassCodeRequest = {
         email: infoType === 'email' ? forgetPasswordInfo : undefined,
-        phoneNumber:
-          infoType === 'phone' ? countryCode + forgetPasswordInfo : undefined,
+        phoneNumber: infoType === 'phone' ? countryCode + newValue : undefined,
       };
+
       const res = await sendForgetPassCodeCall(sendCodeRequest);
 
       if (!res) return;
@@ -102,6 +113,7 @@ export function ForgetPasswordInfo({
           message: res.message,
           severity: 'error',
         });
+        return;
       }
 
       onVerifyOtp(forgetPasswordInfo);
@@ -115,7 +127,8 @@ export function ForgetPasswordInfo({
 
   return (
     <AuthenticationCard>
-      <Stack component="form" onSubmit={handleSubmit} spacing={1}>
+      <Box component="form" onSubmit={handleSubmit}>
+        <Stack spacing={1}>
           <Typography variant="h5">
             {t('forgetPassword.forgetPassword')}
           </Typography>
@@ -153,11 +166,10 @@ export function ForgetPasswordInfo({
           sx={{ my: 4, mb: 8 }}
         />
 
-      <Stack spacing={2}>
         <Button loading={sendForgetPassCodeLoading} type="submit">
           {t('forgetPassword.confirm')}
         </Button>
-      </Stack>
+      </Box>
     </AuthenticationCard>
   );
 }

src/features/authentication/components/ForgetPassword/ForgetPasswordOtp.tsx

@@ -16,6 +16,7 @@ import {
 } from '../../api/authorizationAPI';
 import { Icon, useToast } from '@rkheftan/harmony-ui';
 import { useApi } from '@/hooks/useApi';
+import { LTRTypography } from '@/components/common/LTRTypography';
 
 interface ForgetPasswordOtpProps {
   forgetPasswordInfo: string;
@@ -150,9 +151,11 @@ export function ForgetPasswordOtp({
               endIcon={<Icon Component={Edit2} />}
               onClick={onEditInfo}
             >
+              <LTRTypography>
                 {infoType === 'phone'
                   ? countryCode + forgetPasswordInfo
                   : forgetPasswordInfo}
+              </LTRTypography>
             </Button>
           </Box>