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 { export interface ChangePasswordProps {
onEditInfo: () => void; onEditInfo: () => void;
onPasswordChanged: () => void; onPasswordChanged: () => void;
forgettedPasswordInfo: string; forgetPasswordInfo: string;
infoType: AuthType; infoType: AuthType;
countryCode: CountryCode; countryCode: CountryCode;
} }
@@ -32,7 +32,7 @@ export interface ChangePasswordProps {
export const ChangePassword = ({ export const ChangePassword = ({
onEditInfo, onEditInfo,
onPasswordChanged, onPasswordChanged,
forgettedPasswordInfo, forgetPasswordInfo,
infoType, infoType,
countryCode, countryCode,
}: ChangePasswordProps) => { }: ChangePasswordProps) => {
@@ -78,11 +78,9 @@ export const ChangePassword = ({
confirmInputRef.current?.focus(); confirmInputRef.current?.focus();
} else { } else {
const apiRequest: ResetPasswordRequest = { const apiRequest: ResetPasswordRequest = {
email: infoType === 'email' ? forgettedPasswordInfo : undefined, email: infoType === 'email' ? forgetPasswordInfo : undefined,
phoneNumber: phoneNumber:
infoType === 'phone' infoType === 'phone' ? countryCode + forgetPasswordInfo : undefined,
? countryCode + forgettedPasswordInfo
: undefined,
newPassword: passValue, newPassword: passValue,
confirmNewPassword: confirmPassValue, confirmNewPassword: confirmPassValue,
}; };
@@ -138,7 +136,7 @@ export const ChangePassword = ({
endIcon={<Icon Component={Edit2} />} endIcon={<Icon Component={Edit2} />}
onClick={onEditInfo} onClick={onEditInfo}
> >
{forgettedPasswordInfo} {forgetPasswordInfo}
</Button> </Button>
</Box> </Box>

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

@@ -1,6 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
import type { AuthType } from '../../types/authTypes'; import type { AuthType } from '../../types/authTypes';
import { ForgettedPasswordInfo } from './ForgettedPasswordInfo'; import { ForgetPasswordInfo } from './ForgetPasswordInfo';
import { ForgetPasswordOtp } from './ForgetPasswordOtp'; import { ForgetPasswordOtp } from './ForgetPasswordOtp';
import { ChangePassword } from './ChangePassword'; import { ChangePassword } from './ChangePassword';
import type { CountryCode } from '@/types/commonTypes'; import type { CountryCode } from '@/types/commonTypes';
@@ -11,8 +11,7 @@ export const ForgetPasswordContainer = () => {
const [forgetPassCurrentStep, setForgetPassCurrentStep] = useState< const [forgetPassCurrentStep, setForgetPassCurrentStep] = useState<
'enterInfo' | 'verifyOtp' | 'setPassword' 'enterInfo' | 'verifyOtp' | 'setPassword'
>('enterInfo'); >('enterInfo');
const [forgettedPasswordInfo, setForgettedPasswordInfo] = const [forgetPasswordInfo, setForgetPasswordInfo] = useState<string>('');
useState<string>('');
const [infoCountryCode, setInfoCountryCode] = useState<CountryCode>('+98'); const [infoCountryCode, setInfoCountryCode] = useState<CountryCode>('+98');
const [infoType, setInfoType] = useState<AuthType>('email'); const [infoType, setInfoType] = useState<AuthType>('email');
@@ -35,11 +34,11 @@ export const ForgetPasswordContainer = () => {
return ( return (
<> <>
{forgetPassCurrentStep === 'enterInfo' && ( {forgetPassCurrentStep === 'enterInfo' && (
<ForgettedPasswordInfo <ForgetPasswordInfo
infoType={infoType} infoType={infoType}
setInfoType={setInfoType} setInfoType={setInfoType}
forgettedPasswordInfo={forgettedPasswordInfo} forgetPasswordInfo={forgetPasswordInfo}
setForgettedPasswordInfo={setForgettedPasswordInfo} setForgetPasswordInfo={setForgetPasswordInfo}
onVerifyOtp={handleVerifyOtp} onVerifyOtp={handleVerifyOtp}
countryCode={infoCountryCode} countryCode={infoCountryCode}
setCountryCode={setInfoCountryCode} setCountryCode={setInfoCountryCode}
@@ -51,7 +50,7 @@ export const ForgetPasswordContainer = () => {
countryCode={infoCountryCode} countryCode={infoCountryCode}
infoType={infoType} infoType={infoType}
onEditInfo={handleEditInfo} onEditInfo={handleEditInfo}
forgettedPasswordInfo={forgettedPasswordInfo} forgetPasswordInfo={forgetPasswordInfo}
onOTPVerified={handleOtpVerified} onOTPVerified={handleOtpVerified}
/> />
)} )}
@@ -59,7 +58,7 @@ export const ForgetPasswordContainer = () => {
{forgetPassCurrentStep === 'setPassword' && ( {forgetPassCurrentStep === 'setPassword' && (
<ChangePassword <ChangePassword
onEditInfo={handleEditInfo} onEditInfo={handleEditInfo}
forgettedPasswordInfo={forgettedPasswordInfo} forgetPasswordInfo={forgetPasswordInfo}
onPasswordChanged={handlePasswordChanged} onPasswordChanged={handlePasswordChanged}
infoType={infoType} infoType={infoType}
countryCode={infoCountryCode} 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 { useApi } from '@/hooks/useApi';
import { replacePersianWithRealNumbers } from '@/utils/replacePersianWithRealNumbers'; import { replacePersianWithRealNumbers } from '@/utils/replacePersianWithRealNumbers';
export interface ForgettedPasswordInfoProps { export interface ForgetPasswordInfoProps {
forgettedPasswordInfo: string; forgetPasswordInfo: string;
setForgettedPasswordInfo: Dispatch<string>; setForgetPasswordInfo: Dispatch<string>;
infoType: AuthType; infoType: AuthType;
setInfoType: Dispatch<AuthType>; setInfoType: Dispatch<AuthType>;
onVerifyOtp: (value: string) => void; onVerifyOtp: (value: string) => void;
@@ -24,15 +24,15 @@ export interface ForgettedPasswordInfoProps {
setCountryCode: Dispatch<CountryCode>; setCountryCode: Dispatch<CountryCode>;
} }
export function ForgettedPasswordInfo({ export function ForgetPasswordInfo({
forgettedPasswordInfo, forgetPasswordInfo,
setForgettedPasswordInfo, setForgetPasswordInfo,
infoType, infoType,
setInfoType, setInfoType,
onVerifyOtp, onVerifyOtp,
countryCode, countryCode,
setCountryCode, setCountryCode,
}: ForgettedPasswordInfoProps) { }: ForgetPasswordInfoProps) {
const { t } = useTranslation('authentication'); const { t } = useTranslation('authentication');
const textFieldRef = useRef<HTMLDivElement>(null); const textFieldRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
@@ -51,7 +51,7 @@ export function ForgettedPasswordInfo({
if (newValue.startsWith('09')) { if (newValue.startsWith('09')) {
newValue = newValue.substring(1); newValue = newValue.substring(1);
} }
setForgettedPasswordInfo(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
if (isNumeric(newValue)) { if (isNumeric(newValue)) {
@@ -63,7 +63,7 @@ export function ForgettedPasswordInfo({
const handleBlur = () => { const handleBlur = () => {
setTouched(true); setTouched(true);
validateInput(forgettedPasswordInfo, infoType); validateInput(forgetPasswordInfo, infoType);
}; };
const validateInput = ( const validateInput = (
@@ -87,13 +87,11 @@ export function ForgettedPasswordInfo({
}; };
const handleSubmit = async () => { const handleSubmit = async () => {
if (validateInput(forgettedPasswordInfo, infoType, false)) { if (validateInput(forgetPasswordInfo, infoType, false)) {
const sendCodeRequest: SendForgetPassCodeRequest = { const sendCodeRequest: SendForgetPassCodeRequest = {
email: infoType === 'email' ? forgettedPasswordInfo : undefined, email: infoType === 'email' ? forgetPasswordInfo : undefined,
phoneNumber: phoneNumber:
infoType === 'phone' infoType === 'phone' ? countryCode + forgetPasswordInfo : undefined,
? countryCode + forgettedPasswordInfo
: undefined,
}; };
const res = await sendForgetPassCodeCall(sendCodeRequest); const res = await sendForgetPassCodeCall(sendCodeRequest);
@@ -106,19 +104,18 @@ export function ForgettedPasswordInfo({
}); });
} }
onVerifyOtp(forgettedPasswordInfo); onVerifyOtp(forgetPasswordInfo);
} else { } else {
inputRef.current?.focus(); inputRef.current?.focus();
validateInput(forgettedPasswordInfo, infoType); validateInput(forgetPasswordInfo, infoType);
} }
}; };
const showAdornment = const showAdornment = infoType === 'phone' && forgetPasswordInfo.length > 0;
infoType === 'phone' && forgettedPasswordInfo.length > 0;
return ( return (
<AuthenticationCard> <AuthenticationCard>
<Stack spacing={1}> <Stack component="form" onSubmit={handleSubmit} spacing={1}>
<Typography variant="h5"> <Typography variant="h5">
{t('forgetPassword.forgetPassword')} {t('forgetPassword.forgetPassword')}
</Typography> </Typography>
@@ -133,7 +130,7 @@ export function ForgettedPasswordInfo({
ref={textFieldRef} ref={textFieldRef}
inputRef={inputRef} inputRef={inputRef}
label={t('loginForm.emailOrPhoneLabel')} label={t('loginForm.emailOrPhoneLabel')}
value={forgettedPasswordInfo} value={forgetPasswordInfo}
onChange={handleInputChange} onChange={handleInputChange}
onBlur={handleBlur} onBlur={handleBlur}
error={inputError} error={inputError}
@@ -157,7 +154,7 @@ export function ForgettedPasswordInfo({
/> />
<Stack spacing={2}> <Stack spacing={2}>
<Button loading={sendForgetPassCodeLoading} onClick={handleSubmit}> <Button loading={sendForgetPassCodeLoading} type="submit">
{t('forgetPassword.confirm')} {t('forgetPassword.confirm')}
</Button> </Button>
</Stack> </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'; import { useApi } from '@/hooks/useApi';
interface ForgetPasswordOtpProps { interface ForgetPasswordOtpProps {
forgettedPasswordInfo: string; forgetPasswordInfo: string;
infoType: AuthType; infoType: AuthType;
countryCode: CountryCode; countryCode: CountryCode;
onEditInfo: () => void; onEditInfo: () => void;
@@ -26,7 +26,7 @@ interface ForgetPasswordOtpProps {
} }
export function ForgetPasswordOtp({ export function ForgetPasswordOtp({
forgettedPasswordInfo, forgetPasswordInfo,
infoType, infoType,
countryCode, countryCode,
onEditInfo, onEditInfo,
@@ -69,9 +69,9 @@ export function ForgetPasswordOtp({
const handleResendOTPCode = async () => { const handleResendOTPCode = async () => {
const sendCodeRequest: SendForgetPassCodeRequest = { const sendCodeRequest: SendForgetPassCodeRequest = {
email: infoType === 'email' ? forgettedPasswordInfo : undefined, email: infoType === 'email' ? forgetPasswordInfo : undefined,
phoneNumber: phoneNumber:
infoType === 'phone' ? countryCode + forgettedPasswordInfo : undefined, infoType === 'phone' ? countryCode + forgetPasswordInfo : undefined,
}; };
await sendForgetPassCodeCall(sendCodeRequest); await sendForgetPassCodeCall(sendCodeRequest);
@@ -93,11 +93,9 @@ export function ForgetPasswordOtp({
// Change setTimeout to api call // Change setTimeout to api call
const apiRequest: ConfirmForgetPassCodeRequest = { const apiRequest: ConfirmForgetPassCodeRequest = {
email: infoType === 'email' ? forgettedPasswordInfo : undefined, email: infoType === 'email' ? forgetPasswordInfo : undefined,
phoneNumber: phoneNumber:
infoType === 'phone' infoType === 'phone' ? countryCode + forgetPasswordInfo : undefined,
? countryCode + forgettedPasswordInfo
: undefined,
code: otpCode, code: otpCode,
}; };
@@ -153,8 +151,8 @@ export function ForgetPasswordOtp({
onClick={onEditInfo} onClick={onEditInfo}
> >
{infoType === 'phone' {infoType === 'phone'
? countryCode + forgettedPasswordInfo ? countryCode + forgetPasswordInfo
: forgettedPasswordInfo} : forgetPasswordInfo}
</Button> </Button>
</Box> </Box>