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 : ''}
|
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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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>
|
||||||
))
|
))
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
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