refactor: enhance phone number validation and input handling in Field and LogInPage components

This commit is contained in:
hamed
2025-11-17 15:09:25 +03:30
parent 5a58c13a4e
commit 2777db3b8c
4 changed files with 51 additions and 8 deletions
+36 -7
View File
@@ -1,6 +1,21 @@
import { TextField } from "@mui/material"; import { TextField } from "@mui/material";
import { styleTextSelectRight } from "@/mui"; import { styleTextSelectRight } from "@/mui";
// تابع تبدیل اعداد فارسی به انگلیسی
const convertPersianToEnglish = (str) => {
const persianNumbers = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
let result = str;
for (let i = 0; i < 10; i++) {
const regex = new RegExp(persianNumbers[i], 'g');
result = result.replace(regex, i.toString());
const arabicRegex = new RegExp(arabicNumbers[i], 'g');
result = result.replace(arabicRegex, i.toString());
}
return result;
};
function Field({ function Field({
title, title,
error, error,
@@ -11,6 +26,20 @@ function Field({
value, value,
updateState, updateState,
}) { }) {
const handleChange = (e) => {
let inputValue = e.target.value;
// اگر type تلفن است، فقط اعداد انگلیسی را قبول کن
if (type === "tel") {
// ابتدا اعداد فارسی و عربی را به انگلیسی تبدیل کن
inputValue = convertPersianToEnglish(inputValue);
// فقط اعداد انگلیسی را نگه دار
inputValue = inputValue.replace(/[^0-9]/g, '');
}
updateState(inputValue);
};
return ( return (
<TextField <TextField
label={title} label={title}
@@ -18,21 +47,21 @@ function Field({
dir={dir || "rtl"} dir={dir || "rtl"}
type={type || "text"} type={type || "text"}
value={value} value={value}
onChange={(e) => updateState(e.target.value)} onChange={handleChange}
className="!w-full !mx-auto !bg-[#FFF]" className="!w-full !mx-auto !bg-[#FFF]"
InputProps={inputProps} InputProps={inputProps}
placeholder={placeholder || ""} placeholder={placeholder || ""}
sx={{ sx={{
".MuiOutlinedInput-notchedOutline.muirtl-1d3z3hw-MuiOutlinedInput-notchedOutline": ".MuiOutlinedInput-notchedOutline.muirtl-1d3z3hw-MuiOutlinedInput-notchedOutline":
{ {
border: error && "1px solid red !important", border: error && "1px solid red !important",
}, },
...styleTextSelectRight, ...styleTextSelectRight,
// Hide Icon Number // Hide Icon Number
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
{ {
display: "none", display: "none",
}, },
"& input[type=number]": { "& input[type=number]": {
MozAppearance: "textfield", MozAppearance: "textfield",
}, },
+7
View File
@@ -4,6 +4,7 @@ import { request } from "@/services/response";
import { InputAdornment, Button } from "@mui/material"; import { InputAdornment, Button } from "@mui/material";
import Link from "next/link"; import Link from "next/link";
import { useState } from "react"; import { useState } from "react";
import { toast } from "react-toastify";
function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep }) { function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep }) {
const [error, setError] = useState({ valid: true, text: "" }); const [error, setError] = useState({ valid: true, text: "" });
@@ -11,6 +12,12 @@ function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep })
const handleChange = (val) => { const handleChange = (val) => {
const checkedNum = validatePhoneNumber(val); const checkedNum = validatePhoneNumber(val);
// اگر کاراکتر غیر عددی بود، notification نشون بده
if (!checkedNum.valid && checkedNum.text === "فقط از اعداد انگلیسی استفاده کنید.") {
toast.error("فقط از اعداد انگلیسی استفاده کنید.");
}
setError(checkedNum); setError(checkedNum);
setNum(val); setNum(val);
}; };
+6
View File
@@ -127,6 +127,12 @@ export function validatePhoneNumber(input) {
return { valid: false, text: "شماره موبایل نمی‌تواند خالی باشد." }; return { valid: false, text: "شماره موبایل نمی‌تواند خالی باشد." };
} }
// چک کردن اینکه فقط اعداد انگلیسی باشد
const hasNonEnglishDigits = /[^0-9]/.test(input);
if (hasNonEnglishDigits) {
return { valid: false, text: "فقط از اعداد انگلیسی استفاده کنید." };
}
if (input.length !== 11) { if (input.length !== 11) {
return { valid: false, text: "شماره موبایل باید دقیقا 11 رقم باشد." }; return { valid: false, text: "شماره موبایل باید دقیقا 11 رقم باشد." };
} }
+2 -1
View File
@@ -11,13 +11,14 @@ export const request = {
}, },
removeTokenHead removeTokenHead
), ),
getToken: (grant_type, client_id, client_secret, uuid, code) => { getToken: (grant_type, client_id, client_secret, uuid, code, scope = "nobat724") => {
const formData = new URLSearchParams(); const formData = new URLSearchParams();
formData.append("grant_type", grant_type); formData.append("grant_type", grant_type);
formData.append("client_id", client_id); formData.append("client_id", client_id);
formData.append("client_secret", client_secret); formData.append("client_secret", client_secret);
formData.append("uuid", uuid); formData.append("uuid", uuid);
formData.append("code", code); formData.append("code", code);
formData.append("scope", scope);
return api.post("oauth/token", formData, { return api.post("oauth/token", formData, {
headers: { headers: {