refactor: enhance phone number validation and input handling in Field and LogInPage components
This commit is contained in:
@@ -1,6 +1,21 @@
|
||||
import { TextField } from "@mui/material";
|
||||
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({
|
||||
title,
|
||||
error,
|
||||
@@ -11,6 +26,20 @@ function Field({
|
||||
value,
|
||||
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 (
|
||||
<TextField
|
||||
label={title}
|
||||
@@ -18,21 +47,21 @@ function Field({
|
||||
dir={dir || "rtl"}
|
||||
type={type || "text"}
|
||||
value={value}
|
||||
onChange={(e) => updateState(e.target.value)}
|
||||
onChange={handleChange}
|
||||
className="!w-full !mx-auto !bg-[#FFF]"
|
||||
InputProps={inputProps}
|
||||
placeholder={placeholder || ""}
|
||||
sx={{
|
||||
".MuiOutlinedInput-notchedOutline.muirtl-1d3z3hw-MuiOutlinedInput-notchedOutline":
|
||||
{
|
||||
border: error && "1px solid red !important",
|
||||
},
|
||||
{
|
||||
border: error && "1px solid red !important",
|
||||
},
|
||||
...styleTextSelectRight,
|
||||
// Hide Icon Number
|
||||
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
|
||||
{
|
||||
display: "none",
|
||||
},
|
||||
{
|
||||
display: "none",
|
||||
},
|
||||
"& input[type=number]": {
|
||||
MozAppearance: "textfield",
|
||||
},
|
||||
|
||||
@@ -4,6 +4,7 @@ import { request } from "@/services/response";
|
||||
import { InputAdornment, Button } from "@mui/material";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep }) {
|
||||
const [error, setError] = useState({ valid: true, text: "" });
|
||||
@@ -11,6 +12,12 @@ function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep })
|
||||
|
||||
const handleChange = (val) => {
|
||||
const checkedNum = validatePhoneNumber(val);
|
||||
|
||||
// اگر کاراکتر غیر عددی بود، notification نشون بده
|
||||
if (!checkedNum.valid && checkedNum.text === "فقط از اعداد انگلیسی استفاده کنید.") {
|
||||
toast.error("فقط از اعداد انگلیسی استفاده کنید.");
|
||||
}
|
||||
|
||||
setError(checkedNum);
|
||||
setNum(val);
|
||||
};
|
||||
|
||||
@@ -127,6 +127,12 @@ export function validatePhoneNumber(input) {
|
||||
return { valid: false, text: "شماره موبایل نمیتواند خالی باشد." };
|
||||
}
|
||||
|
||||
// چک کردن اینکه فقط اعداد انگلیسی باشد
|
||||
const hasNonEnglishDigits = /[^0-9]/.test(input);
|
||||
if (hasNonEnglishDigits) {
|
||||
return { valid: false, text: "فقط از اعداد انگلیسی استفاده کنید." };
|
||||
}
|
||||
|
||||
if (input.length !== 11) {
|
||||
return { valid: false, text: "شماره موبایل باید دقیقا 11 رقم باشد." };
|
||||
}
|
||||
|
||||
@@ -11,13 +11,14 @@ export const request = {
|
||||
},
|
||||
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();
|
||||
formData.append("grant_type", grant_type);
|
||||
formData.append("client_id", client_id);
|
||||
formData.append("client_secret", client_secret);
|
||||
formData.append("uuid", uuid);
|
||||
formData.append("code", code);
|
||||
formData.append("scope", scope);
|
||||
|
||||
return api.post("oauth/token", formData, {
|
||||
headers: {
|
||||
|
||||
Reference in New Issue
Block a user