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

fix: forget password typos, submit with enter

Browse Source
This commit is contained in:
Sajad Mirjalili
2025-09-29 12:03:02 +03:30
parent fcf56dffc7
commit d8f58ad13d
4 changed files with 38 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

15
src/features/authentication/components/ForgetPassword/ForgetPasswordContainer.tsx
View File

@@ -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}

39
src/features/authentication/components/ForgetPassword/ForgettedPasswordInfo.tsx → src/features/authentication/components/ForgetPassword/ForgetPasswordInfo.tsx
View File

@@ -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>

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

@@ -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>