Merge pull request #34 from rkheftan/bugfix/review-login-fixes

fix: login info inputs paddings, persian number support, country code…

src/features/authentication/components/AuthenticationSteps/CompleteSignUp.tsx

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

src/features/authentication/components/AuthenticationSteps/LoginRegiserForm.tsx

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

src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx

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

src/features/authentication/components/AuthenticationSteps/VerifyPhoneNumber.tsx

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

src/features/authentication/components/CountryCodeSelector.tsx

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

src/features/authentication/components/ForgetPassword/ForgetPasswordOtp.tsx

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

src/features/authentication/components/ForgetPassword/ForgettedPasswordInfo.tsx

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

src/utils/replacePersianWithRealNumbers.ts

@@ -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('');
+};