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:
@@ -99,7 +99,7 @@ export const CompleteSignUp = ({
|
||||
helperText={inputError ? error : ''}
|
||||
autoFocus
|
||||
slotProps={{
|
||||
htmlInput: { dir: 'auto', sx: { lineHeight: 1.5, paddingX: 0 } },
|
||||
htmlInput: { dir: 'auto', sx: { lineHeight: 1.5 } },
|
||||
input: {
|
||||
endAdornment: (
|
||||
<CountryCodeSelector
|
||||
|
||||
@@ -14,6 +14,7 @@ import { isPhoneNumber } from '@/utils/regexes/isValidPhoneNumber';
|
||||
import { useToast } from '@rkheftan/harmony-ui';
|
||||
import { useApi } from '@/hooks/useApi';
|
||||
import type { GenerateTokenResponse } from '../../api/identityAPI';
|
||||
import { replacePersianWithRealNumbers } from '@/utils/replacePersianWithRealNumbers';
|
||||
|
||||
export interface LoginRegisterFormProps {
|
||||
loginRegisterValue: string;
|
||||
@@ -54,6 +55,7 @@ export function LoginRegisterForm({
|
||||
|
||||
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
let newValue = event.target.value;
|
||||
newValue = replacePersianWithRealNumbers(newValue);
|
||||
if (newValue.startsWith('09')) {
|
||||
newValue = newValue.substring(1);
|
||||
}
|
||||
@@ -152,7 +154,7 @@ export function LoginRegisterForm({
|
||||
helperText={inputError ? error : ''}
|
||||
autoFocus
|
||||
slotProps={{
|
||||
htmlInput: { dir: 'auto', sx: { lineHeight: 1.5, paddingX: 0 } },
|
||||
htmlInput: { dir: 'auto', sx: { lineHeight: 1.5 } },
|
||||
input: {
|
||||
endAdornment: (
|
||||
<CountryCodeSelector
|
||||
|
||||
@@ -56,6 +56,12 @@ export function OtpVerifyForm({
|
||||
const { loading: loginSignUpLoading, execute: loginSignUpCall } =
|
||||
useApi(loginOrSignUpWithOtp);
|
||||
|
||||
useEffect(() => {
|
||||
if (otpCode.length === 4) {
|
||||
handleVerifyOTP();
|
||||
}
|
||||
}, [otpCode]);
|
||||
|
||||
useEffect(() => {
|
||||
let interval: NodeJS.Timeout;
|
||||
if (resendTimer > 0) {
|
||||
|
||||
@@ -35,6 +35,12 @@ export function VerifyPhoneNumber({
|
||||
const { loading: confirmSmsOtpLoading, execute: confirmSmsOtpCall } =
|
||||
useApi(confirmSmsOtp);
|
||||
|
||||
useEffect(() => {
|
||||
if (otpCode.length === 4) {
|
||||
handleVerifyOTP();
|
||||
}
|
||||
}, [otpCode]);
|
||||
|
||||
useEffect(() => {
|
||||
let interval: NodeJS.Timeout;
|
||||
if (resendTimer > 0) {
|
||||
|
||||
@@ -16,6 +16,7 @@ import { useTranslation } from 'react-i18next';
|
||||
import { countries, type Country } from '../../../data/countries';
|
||||
import type { CountryCode } from '@/types/commonTypes';
|
||||
import { Icon } from '@rkheftan/harmony-ui';
|
||||
import { LTRBox } from '@/components/common/LTRBox';
|
||||
interface CountryCodeSelectorProps {
|
||||
show: boolean;
|
||||
value: CountryCode;
|
||||
@@ -187,7 +188,9 @@ export function CountryCodeSelector({
|
||||
{filteredCountries.length === 0 ? (
|
||||
<MenuItem disabled>
|
||||
<ListItem>
|
||||
<ListItemText>{t('messages.noResualtFound')}</ListItemText>
|
||||
<ListItemText>
|
||||
{t('messages.noResualtFound', { ns: 'common' })}
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
</MenuItem>
|
||||
) : (
|
||||
@@ -209,7 +212,9 @@ export function CountryCodeSelector({
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t(country.label, { ns: 'country' })} />
|
||||
<Typography color="text.secondary">
|
||||
{country.phone}
|
||||
<Typography>
|
||||
<LTRBox>{country.phone}</LTRBox>
|
||||
</Typography>
|
||||
</Typography>
|
||||
</MenuItem>
|
||||
))
|
||||
|
||||
@@ -48,6 +48,12 @@ export function ForgetPasswordOtp({
|
||||
execute: confirmForgetPassCodeCall,
|
||||
} = useApi(confirmForgetPassCode);
|
||||
|
||||
useEffect(() => {
|
||||
if (otpCode.length === 4) {
|
||||
handleVerifyOTP();
|
||||
}
|
||||
}, [otpCode]);
|
||||
|
||||
useEffect(() => {
|
||||
let interval: NodeJS.Timeout;
|
||||
if (resendTimer > 0) {
|
||||
|
||||
@@ -12,6 +12,7 @@ import type { SendForgetPassCodeRequest } from '../../types/userTypes';
|
||||
import { isPhoneNumber } from '@/utils/regexes/isValidPhoneNumber';
|
||||
import { useToast } from '@rkheftan/harmony-ui';
|
||||
import { useApi } from '@/hooks/useApi';
|
||||
import { replacePersianWithRealNumbers } from '@/utils/replacePersianWithRealNumbers';
|
||||
|
||||
export interface ForgettedPasswordInfoProps {
|
||||
forgettedPasswordInfo: string;
|
||||
@@ -46,6 +47,7 @@ export function ForgettedPasswordInfo({
|
||||
|
||||
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
let newValue = event.target.value;
|
||||
newValue = replacePersianWithRealNumbers(newValue);
|
||||
if (newValue.startsWith('09')) {
|
||||
newValue = newValue.substring(1);
|
||||
}
|
||||
@@ -138,7 +140,7 @@ export function ForgettedPasswordInfo({
|
||||
helperText={inputError ? error : ''}
|
||||
autoFocus
|
||||
slotProps={{
|
||||
htmlInput: { dir: 'auto', sx: { lineHeight: 1.5, paddingX: 0 } },
|
||||
htmlInput: { dir: 'auto', sx: { lineHeight: 1.5 } },
|
||||
input: {
|
||||
endAdornment: (
|
||||
<CountryCodeSelector
|
||||
|
||||
10
src/utils/replacePersianWithRealNumbers.ts
Normal file
10
src/utils/replacePersianWithRealNumbers.ts
Normal 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('');
|
||||
};
|
||||
Reference in New Issue
Block a user