From d0497721f1673516797b435e276628c21b4ced50 Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Mon, 12 May 2025 15:58:44 +0330
Subject: [PATCH] change style & add space & validation number in register page

---
 app/component/element/Field.js   | 10 +++++---
 components/register/LogInPage.js | 42 ++++++++++++++++++++++++++------
 helper/index.js                  | 24 +++++++++++++++++-
 3 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/app/component/element/Field.js b/app/component/element/Field.js
index 522cc57..f5dcb88 100644
--- a/app/component/element/Field.js
+++ b/app/component/element/Field.js
@@ -1,16 +1,21 @@
 import { TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
-function Field({ title, type, dir, value, updateState }) {
+function Field({ title, error, inputProps, type, dir, value, updateState }) {
   return (
     <TextField
       label={title}
+      error={error}
       dir={dir || "rtl"}
       type={type || "text"}
       value={value}
       onChange={(e) => updateState(e.target.value)}
       className="!w-full !mx-auto !bg-[#FFF]"
+      InputProps={inputProps}
       sx={{
+        '.MuiOutlinedInput-notchedOutline.muirtl-1d3z3hw-MuiOutlinedInput-notchedOutline': {
+          border: error && '1px solid red !important'
+        },
         ...styleTextSelectRight,
         // Hide Icon Number
         "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
@@ -20,8 +25,7 @@ function Field({ title, type, dir, value, updateState }) {
         "& input[type=number]": {
           MozAppearance: "textfield",
         },
-        // "& .MuiFormLabel-root": { top: "-7px !important" },
-        "& .MuiInputBase-input": { padding: "12.5px 14px" },
+        "& .MuiInputBase-input": { padding: "12.5px 0" },
         "& .MuiInputBase-root": { borderRadius: "6px !important" },
         "& .MuiOutlinedInput-notchedOutline": {
           border: "1px solid #E9ECEF !important",
diff --git a/components/register/LogInPage.js b/components/register/LogInPage.js
index 938b70d..eadaf99 100644
--- a/components/register/LogInPage.js
+++ b/components/register/LogInPage.js
@@ -1,12 +1,16 @@
 import Field from "@/app/component/element/Field";
-import { Button } from "@mui/material";
+import { formatPhoneNumber, validatePhoneNumber } from "@/helper";
+import { Button, InputAdornment } from "@mui/material";
 import Link from "next/link";
 import { useState } from "react";
 
 function LogInPage({ setIsSendMsg, setStep }) {
-  const [num, setNum] = useState("09");
-  const updateNum = (value) => {
-    setNum(value === "0" || !value ? "09" : value);
+  const [num, setNum] = useState("");
+  const [error, setError] = useState(false);
+
+  const handleChange = (val) => {
+    const formatted = formatPhoneNumber(val);
+    setNum(formatted);
   };
 
   return (
@@ -20,19 +24,43 @@ function LogInPage({ setIsSendMsg, setStep }) {
       <p className="text-[#616161] text-[14px] mt-[40px] sm:mt-[43px] md:mt-[46px] lg:mt-[48px] font-normal">
         شماره همراه خود را وارد نمایید.
       </p>
-      <div className="mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] mb-[40px] sm:mb-[37px] md:mb-[36px] lg:mb-[32px]">
+      <div className="mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] mb-[19px] sm:mb-[16px] md:mb-[15px] lg:mb-[11px]">
         <Field
           dir="ltr"
           value={num}
-          type="number"
+          type="string"
+          error={error}
+          inputProps={{
+            startAdornment:
+              <InputAdornment
+                className="!ml-4"
+                position="start"
+                sx={{
+                  '.MuiTypography-root': {
+                    lineHeight: '0 !important',
+                  },
+                  '.muirtl-1qj5e5k-MuiTypography-root': {
+                    color: '#000000de !important'
+                  }
+                }}
+              >09</InputAdornment>,
+          }}
           title="شماره همراه"
-          updateState={updateNum}
+          updateState={handleChange}
         />
+        <p className={`text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all
+            ${error ? 'opacity-100' : 'opacity-0'}
+            `}>{error}</p>
       </div>
       <Button
         fullWidth
         variant="contained"
         onClick={() => {
+          const checkedNum = validatePhoneNumber(num);
+          if (!checkedNum.valid) {
+            setError(checkedNum.error);
+            return;
+          }
           setIsSendMsg && setIsSendMsg(true);
           setStep && setStep((prev) => prev + 1);
         }}
diff --git a/helper/index.js b/helper/index.js
index 3e1a65d..e1a8838 100644
--- a/helper/index.js
+++ b/helper/index.js
@@ -105,4 +105,26 @@ export const addLabelToList = (list) =>
       ...item,
       label: item.name
     }
-  })
\ No newline at end of file
+  })
+
+export const formatPhoneNumber = (input) => {
+  const digits = input.replace(/\D/g, '');
+  const trimmed = digits.substring(0, 9);
+  const match = trimmed.match(/^(\d{0,2})(\d{0,3})(\d{0,4})$/);
+  if (!match) return trimmed;
+  return [match[1], match[2], match[3]].filter(Boolean).join(' ');
+};
+
+export function validatePhoneNumber(input) {
+  const digits = input.replace(/\D/g, '');
+
+  if (!digits) {
+    return { valid: false, error: 'شماره موبایل نمی‌تواند خالی باشد.' };
+  }
+
+  if (digits.length !== 9) {
+    return { valid: false, error: 'شماره موبایل باید دقیقا 11 رقم باشد.' };
+  }
+
+  return { valid: true, error: null };
+}