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,49 +127,49 @@ export function ForgetPasswordInfo({
 
   return (
     <AuthenticationCard>
-      <Stack component="form" onSubmit={handleSubmit} spacing={1}>
-        <Typography variant="h5">
-          {t('forgetPassword.forgetPassword')}
-        </Typography>
-        <Typography variant="body2" color="text.secondary">
-          {t(
-            'forgetPassword.pleaseEnterYourMobileNumberEmailToRecoverYourPassword',
-          )}
-        </Typography>
-      </Stack>
+      <Box component="form" onSubmit={handleSubmit}>
+        <Stack spacing={1}>
+          <Typography variant="h5">
+            {t('forgetPassword.forgetPassword')}
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            {t(
+              'forgetPassword.pleaseEnterYourMobileNumberEmailToRecoverYourPassword',
+            )}
+          </Typography>
+        </Stack>
 
-      <TextField
-        ref={textFieldRef}
-        inputRef={inputRef}
-        label={t('loginForm.emailOrPhoneLabel')}
-        value={forgetPasswordInfo}
-        onChange={handleInputChange}
-        onBlur={handleBlur}
-        error={inputError}
-        helperText={inputError ? error : ''}
-        autoFocus
-        slotProps={{
-          htmlInput: { dir: 'auto', sx: { lineHeight: 1.5 } },
-          input: {
-            endAdornment: (
-              <CountryCodeSelector
-                value={countryCode}
-                onChange={setCountryCode}
-                show={showAdornment}
-                menuAnchor={textFieldRef.current}
-                onCloseFocusRef={inputRef}
-              />
-            ),
-          },
-        }}
-        sx={{ my: 4, mb: 8 }}
-      />
+        <TextField
+          ref={textFieldRef}
+          inputRef={inputRef}
+          label={t('loginForm.emailOrPhoneLabel')}
+          value={forgetPasswordInfo}
+          onChange={handleInputChange}
+          onBlur={handleBlur}
+          error={inputError}
+          helperText={inputError ? error : ''}
+          autoFocus
+          slotProps={{
+            htmlInput: { dir: 'auto', sx: { lineHeight: 1.5 } },
+            input: {
+              endAdornment: (
+                <CountryCodeSelector
+                  value={countryCode}
+                  onChange={setCountryCode}
+                  show={showAdornment}
+                  menuAnchor={textFieldRef.current}
+                  onCloseFocusRef={inputRef}
+                />
+              ),
+            },
+          }}
+          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}
             >
-              {infoType === 'phone'
-                ? countryCode + forgetPasswordInfo
-                : forgetPasswordInfo}
+              <LTRTypography>
+                {infoType === 'phone'
+                  ? countryCode + forgetPasswordInfo
+                  : forgetPasswordInfo}
+              </LTRTypography>
             </Button>
           </Box>