amir/Account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: forget password bugs

Browse Source
This commit is contained in:
Sajad Mirjalili
2025-11-29 11:31:19 +03:30
parent 33c72569c7
commit e62f9faef8
3 changed files with 70 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/features/authentication/components/ForgetPassword/ChangePassword.tsx
View File

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

104
src/features/authentication/components/ForgetPassword/ForgetPasswordInfo.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Stack, TextField, Typography } from '@mui/material'; import { Box, Button, Stack, TextField, Typography } from '@mui/material';
import { useRef, useState, type Dispatch } from 'react'; import { useRef, useState, type Dispatch, type FormEvent } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { isNumeric } from '@/utils/regexes/isNumeric'; import { isNumeric } from '@/utils/regexes/isNumeric';
import type { AuthType } from '../../types/authTypes'; import type { AuthType } from '../../types/authTypes';
@@ -48,9 +48,7 @@ export function ForgetPasswordInfo({
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
let newValue = event.target.value; let newValue = event.target.value;
newValue = replacePersianWithRealNumbers(newValue); newValue = replacePersianWithRealNumbers(newValue);
if (newValue.startsWith('09')) {
newValue = newValue.substring(1);
}
setForgetPasswordInfo(newValue); setForgetPasswordInfo(newValue);
// If the new value contains only digits (or is empty), it's a phone number // 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)) { 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 = { const sendCodeRequest: SendForgetPassCodeRequest = {
email: infoType === 'email' ? forgetPasswordInfo : undefined, email: infoType === 'email' ? forgetPasswordInfo : undefined,
phoneNumber: phoneNumber: infoType === 'phone' ? countryCode + newValue : undefined,
infoType === 'phone' ? countryCode + forgetPasswordInfo : undefined,
}; };
const res = await sendForgetPassCodeCall(sendCodeRequest); const res = await sendForgetPassCodeCall(sendCodeRequest);
if (!res) return; if (!res) return;
@@ -102,6 +113,7 @@ export function ForgetPasswordInfo({
message: res.message, message: res.message,
severity: 'error', severity: 'error',
}); });
return;
} }
onVerifyOtp(forgetPasswordInfo); onVerifyOtp(forgetPasswordInfo);
@@ -115,49 +127,49 @@ export function ForgetPasswordInfo({
return ( return (
<AuthenticationCard> <AuthenticationCard>
<Stack component="form" onSubmit={handleSubmit} spacing={1}> <Box component="form" onSubmit={handleSubmit}>
<Typography variant="h5"> <Stack spacing={1}>
{t('forgetPassword.forgetPassword')} <Typography variant="h5">
</Typography> {t('forgetPassword.forgetPassword')}
<Typography variant="body2" color="text.secondary"> </Typography>
{t( <Typography variant="body2" color="text.secondary">
'forgetPassword.pleaseEnterYourMobileNumberEmailToRecoverYourPassword', {t(
)} 'forgetPassword.pleaseEnterYourMobileNumberEmailToRecoverYourPassword',
</Typography> )}
</Stack> </Typography>
</Stack>
<TextField <TextField
ref={textFieldRef} ref={textFieldRef}
inputRef={inputRef} inputRef={inputRef}
label={t('loginForm.emailOrPhoneLabel')} label={t('loginForm.emailOrPhoneLabel')}
value={forgetPasswordInfo} value={forgetPasswordInfo}
onChange={handleInputChange} onChange={handleInputChange}
onBlur={handleBlur} onBlur={handleBlur}
error={inputError} error={inputError}
helperText={inputError ? error : ''} helperText={inputError ? error : ''}
autoFocus autoFocus
slotProps={{ slotProps={{
htmlInput: { dir: 'auto', sx: { lineHeight: 1.5 } }, htmlInput: { dir: 'auto', sx: { lineHeight: 1.5 } },
input: { input: {
endAdornment: ( endAdornment: (
<CountryCodeSelector <CountryCodeSelector
value={countryCode} value={countryCode}
onChange={setCountryCode} onChange={setCountryCode}
show={showAdornment} show={showAdornment}
menuAnchor={textFieldRef.current} menuAnchor={textFieldRef.current}
onCloseFocusRef={inputRef} onCloseFocusRef={inputRef}
/> />
), ),
}, },
}} }}
sx={{ my: 4, mb: 8 }} sx={{ my: 4, mb: 8 }}
/> />
<Stack spacing={2}>
<Button loading={sendForgetPassCodeLoading} type="submit"> <Button loading={sendForgetPassCodeLoading} type="submit">
{t('forgetPassword.confirm')} {t('forgetPassword.confirm')}
</Button> </Button>
</Stack> </Box>
</AuthenticationCard> </AuthenticationCard>
); );
} }

9
src/features/authentication/components/ForgetPassword/ForgetPasswordOtp.tsx
View File

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