feat: add input validation error

src/features/auth/components/StepEnterNumber.tsx

@@ -2,14 +2,31 @@ import Button from '@/components/button/PrimaryButton';
 import InputField from '@/components/input/InputField';
 import { AUTH_PAGE_ELEMENT } from '@/enums';
 import Image from 'next/image';
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 type Props = {
-    onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
     value: string;
-}
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
+
+function StepEnterNumber({ onChange, disabled = false, value }: Props) {
+    const [error, setError] = useState('');
+
+    const hasError = (e = error) => {
+        return e.trim().length > 0
+    }
+
+    useEffect(() => {
+        let error = '';
+        if (value.length > 0) {
+            if (!/^09\d{7,9}$/.test(value)) {
+                error = 'فرمت اشتباه است';
+            }
+        }
+
+        setError(error);
+    }, [value])
 
-function StepEnterNumber({ onChange, value }: Props) {
     return (
         <>
             <Image
@@ -27,6 +44,8 @@ function StepEnterNumber({ onChange, value }: Props) {
                         <p className='mt-3 text-[13px]'>برای ورود شماره همراه خود را وارد نمایید.</p>
                     </div>
                     <InputField
+                        valid={!hasError()}
+                        aria-errormessage={error}
                         inputMode='tel'
                         autoComplete='tel'
                         className='mt-10 w-full'
@@ -37,7 +56,7 @@ function StepEnterNumber({ onChange, value }: Props) {
                         onChange={onChange}
                         type='number' />
                 </div>
-                <Button type='submit'>بعدی</Button>
+                <Button disabled={disabled || hasError() || value.length <= 0} type='submit'>بعدی</Button>
             </div>
         </>
     )