chore: phone number validation added

src/features/authentication/components/LoginRegiserForm.tsx

@@ -6,6 +6,7 @@ import { Google } from 'iconsax-reactjs';
 import { isNumeric } from '@/utils/regexes/isNumeric';
 import type { AuthMode, AuthType } from '../types/auth-types';
 import { isEmail } from '@/utils/regexes/isEmail';
+import parsePhoneNumberFromString from 'libphonenumber-js';
 
 export interface LoginRegisterFormProps {
   authType: AuthType;
@@ -49,13 +50,19 @@ export function LoginRegisterForm({
       setError(t('loginForm.thisFieldIsRequired'));
     } else if (authType === 'email' && !isEmail(value)) {
       setError(t('loginForm.emailIsInvalid'));
-    } else if (authType === 'phone' && false /* TODO */) {
-      setError(t('loginForm.emailIsInvalid'));
+    } else if (authType === 'phone' && !isPhoneValid(countryCode, value)) {
+      setError(t('loginForm.phoneNumberIsInvalid'));
     } else {
       setError(undefined);
     }
   };
 
+  const isPhoneValid = (code: string, phone: string) => {
+    const phoneNumber = parsePhoneNumberFromString(code + phone);
+
+    return phoneNumber && phoneNumber.isValid();
+  };
+
   const isInputValid = (value: string, authType: AuthType): boolean => {
     if (!value) {
       return false;
@@ -65,7 +72,7 @@ export function LoginRegisterForm({
       return false;
     }
 
-    if (authType === 'phone' && false /* TODO */) {
+    if (authType === 'phone' && !isPhoneValid(countryCode, value)) {
       return false;
     }
 
@@ -104,16 +111,7 @@ export function LoginRegisterForm({
         slotProps={{
           htmlInput: { dir: 'auto', sx: { lineHeight: 1.5, paddingX: 0 } },
           input: {
-            startAdornment: dir === 'ltr' && (
-              <CountryCodeSelector
-                value={countryCode}
-                onChange={setCountryCode}
-                show={showAdornment}
-                menuAnchor={textFieldRef.current}
-                onCloseFocusRef={inputRef}
-              />
-            ),
-            endAdornment: dir === 'rtl' && (
+            endAdornment: (
               <CountryCodeSelector
                 value={countryCode}
                 onChange={setCountryCode}