fix: login info inputs paddings, persian number support, country code selector not found message, codes ltr, auto submit after otp paste or enter, removing word "دقیقه" from otp timer

This commit is contained in:
2025-09-21 21:47:45 +03:30
parent a42da2d4c4
commit 718bc3aaa0
8 changed files with 42 additions and 5 deletions

View File

@@ -99,7 +99,7 @@ export const CompleteSignUp = ({
helperText={inputError ? error : ''} helperText={inputError ? error : ''}
autoFocus autoFocus
slotProps={{ slotProps={{
htmlInput: { dir: 'auto', sx: { lineHeight: 1.5, paddingX: 0 } }, htmlInput: { dir: 'auto', sx: { lineHeight: 1.5 } },
input: { input: {
endAdornment: ( endAdornment: (
<CountryCodeSelector <CountryCodeSelector

View File

@@ -14,6 +14,7 @@ import { isPhoneNumber } from '@/utils/regexes/isValidPhoneNumber';
import { useToast } from '@rkheftan/harmony-ui'; import { useToast } from '@rkheftan/harmony-ui';
import { useApi } from '@/hooks/useApi'; import { useApi } from '@/hooks/useApi';
import type { GenerateTokenResponse } from '../../api/identityAPI'; import type { GenerateTokenResponse } from '../../api/identityAPI';
import { replacePersianWithRealNumbers } from '@/utils/replacePersianWithRealNumbers';
export interface LoginRegisterFormProps { export interface LoginRegisterFormProps {
loginRegisterValue: string; loginRegisterValue: string;
@@ -54,6 +55,7 @@ export function LoginRegisterForm({
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);
if (newValue.startsWith('09')) { if (newValue.startsWith('09')) {
newValue = newValue.substring(1); newValue = newValue.substring(1);
} }
@@ -152,7 +154,7 @@ export function LoginRegisterForm({
helperText={inputError ? error : ''} helperText={inputError ? error : ''}
autoFocus autoFocus
slotProps={{ slotProps={{
htmlInput: { dir: 'auto', sx: { lineHeight: 1.5, paddingX: 0 } }, htmlInput: { dir: 'auto', sx: { lineHeight: 1.5 } },
input: { input: {
endAdornment: ( endAdornment: (
<CountryCodeSelector <CountryCodeSelector

View File

@@ -56,6 +56,12 @@ export function OtpVerifyForm({
const { loading: loginSignUpLoading, execute: loginSignUpCall } = const { loading: loginSignUpLoading, execute: loginSignUpCall } =
useApi(loginOrSignUpWithOtp); useApi(loginOrSignUpWithOtp);
useEffect(() => {
if (otpCode.length === 4) {
handleVerifyOTP();
}
}, [otpCode]);
useEffect(() => { useEffect(() => {
let interval: NodeJS.Timeout; let interval: NodeJS.Timeout;
if (resendTimer > 0) { if (resendTimer > 0) {

View File

@@ -35,6 +35,12 @@ export function VerifyPhoneNumber({
const { loading: confirmSmsOtpLoading, execute: confirmSmsOtpCall } = const { loading: confirmSmsOtpLoading, execute: confirmSmsOtpCall } =
useApi(confirmSmsOtp); useApi(confirmSmsOtp);
useEffect(() => {
if (otpCode.length === 4) {
handleVerifyOTP();
}
}, [otpCode]);
useEffect(() => { useEffect(() => {
let interval: NodeJS.Timeout; let interval: NodeJS.Timeout;
if (resendTimer > 0) { if (resendTimer > 0) {

View File

@@ -16,6 +16,7 @@ import { useTranslation } from 'react-i18next';
import { countries, type Country } from '../../../data/countries'; import { countries, type Country } from '../../../data/countries';
import type { CountryCode } from '@/types/commonTypes'; import type { CountryCode } from '@/types/commonTypes';
import { Icon } from '@rkheftan/harmony-ui'; import { Icon } from '@rkheftan/harmony-ui';
import { LTRBox } from '@/components/common/LTRBox';
interface CountryCodeSelectorProps { interface CountryCodeSelectorProps {
show: boolean; show: boolean;
value: CountryCode; value: CountryCode;
@@ -187,7 +188,9 @@ export function CountryCodeSelector({
{filteredCountries.length === 0 ? ( {filteredCountries.length === 0 ? (
<MenuItem disabled> <MenuItem disabled>
<ListItem> <ListItem>
<ListItemText>{t('messages.noResualtFound')}</ListItemText> <ListItemText>
{t('messages.noResualtFound', { ns: 'common' })}
</ListItemText>
</ListItem> </ListItem>
</MenuItem> </MenuItem>
) : ( ) : (
@@ -209,7 +212,9 @@ export function CountryCodeSelector({
</ListItemIcon> </ListItemIcon>
<ListItemText primary={t(country.label, { ns: 'country' })} /> <ListItemText primary={t(country.label, { ns: 'country' })} />
<Typography color="text.secondary"> <Typography color="text.secondary">
{country.phone} <Typography>
<LTRBox>{country.phone}</LTRBox>
</Typography>
</Typography> </Typography>
</MenuItem> </MenuItem>
)) ))

View File

@@ -48,6 +48,12 @@ export function ForgetPasswordOtp({
execute: confirmForgetPassCodeCall, execute: confirmForgetPassCodeCall,
} = useApi(confirmForgetPassCode); } = useApi(confirmForgetPassCode);
useEffect(() => {
if (otpCode.length === 4) {
handleVerifyOTP();
}
}, [otpCode]);
useEffect(() => { useEffect(() => {
let interval: NodeJS.Timeout; let interval: NodeJS.Timeout;
if (resendTimer > 0) { if (resendTimer > 0) {

View File

@@ -12,6 +12,7 @@ import type { SendForgetPassCodeRequest } from '../../types/userTypes';
import { isPhoneNumber } from '@/utils/regexes/isValidPhoneNumber'; import { isPhoneNumber } from '@/utils/regexes/isValidPhoneNumber';
import { useToast } from '@rkheftan/harmony-ui'; import { useToast } from '@rkheftan/harmony-ui';
import { useApi } from '@/hooks/useApi'; import { useApi } from '@/hooks/useApi';
import { replacePersianWithRealNumbers } from '@/utils/replacePersianWithRealNumbers';
export interface ForgettedPasswordInfoProps { export interface ForgettedPasswordInfoProps {
forgettedPasswordInfo: string; forgettedPasswordInfo: string;
@@ -46,6 +47,7 @@ export function ForgettedPasswordInfo({
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);
if (newValue.startsWith('09')) { if (newValue.startsWith('09')) {
newValue = newValue.substring(1); newValue = newValue.substring(1);
} }
@@ -138,7 +140,7 @@ export function ForgettedPasswordInfo({
helperText={inputError ? error : ''} helperText={inputError ? error : ''}
autoFocus autoFocus
slotProps={{ slotProps={{
htmlInput: { dir: 'auto', sx: { lineHeight: 1.5, paddingX: 0 } }, htmlInput: { dir: 'auto', sx: { lineHeight: 1.5 } },
input: { input: {
endAdornment: ( endAdornment: (
<CountryCodeSelector <CountryCodeSelector

View File

@@ -0,0 +1,10 @@
export const replacePersianWithRealNumbers = (text: string): string => {
const persianDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
return text
.split('')
.map((char) => {
const index = persianDigits.indexOf(char);
return index === -1 ? char : index.toString();
})
.join('');
};