feat: add input validation error

src/app/auth/page.tsx

@@ -20,6 +20,7 @@ import AuthFormWrapper from '@/features/auth/components/AuthFormWrapper';
 type Props = object
 
 function AuthIndex({ }: Props) {
+    const [isPending, setIsPending] = useState(false);
     const [number, setNumber] = useState("");
     const [password, setPassword] = useState("");
     const [passwordRepeat, setPasswordRepeat] = useState("");
@@ -85,7 +86,7 @@ function AuthIndex({ }: Props) {
         }
     }
 
-    const onClick = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    const onClick = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<HTMLInputElement, MouseEvent>) => {
         e.stopPropagation();
         const target = e.target as HTMLButtonElement;
 
@@ -112,6 +113,7 @@ function AuthIndex({ }: Props) {
 
     const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault();
+        setIsPending(true);
         if (step == AUTH_STEP.ENTER_NUMBER) {
 
             if (true) {
@@ -170,18 +172,19 @@ function AuthIndex({ }: Props) {
                 console.log("Could not signup: ", e)
             }
         }
+        setIsPending(false);
     }
 
     const stepMap = {
-        [AUTH_STEP.ENTER_NUMBER]: <StepEnterNumber onChange={onChange} value={number} />,
+        [AUTH_STEP.ENTER_NUMBER]: <StepEnterNumber disabled={isPending} onChange={onChange} value={number} />,
-        [AUTH_STEP.ENTER_PASSWORD]: <StepEnterPassword onChange={onChange} onClick={onClick} value={password} passwordVisible={showPassword} rememberMe={rememberMe} />,
+        [AUTH_STEP.ENTER_PASSWORD]: <StepEnterPassword disabled={isPending} onChange={onChange} onClick={onClick} value={password} passwordVisible={showPassword} rememberMe={rememberMe} />,
-        [AUTH_STEP.ENTER_OTP]: <StepEnterOtp onChange={onChange} onClick={onClick} phoneNumber={number} value={otp} timerRunning={timerRunning} secondsLeft={secondsLeft} />,
+        [AUTH_STEP.ENTER_OTP]: <StepEnterOtp disabled={isPending} onChange={onChange} onClick={onClick} phoneNumber={number} value={otp} timerRunning={timerRunning} secondsLeft={secondsLeft} />,
-        [AUTH_STEP.ENTER_NEW_PASSWORD]: <StepNewPassword onChange={onChange} onClick={onClick} value={password} repeatValue={passwordRepeat} passwordVisible={showPassword} repeatPasswordVisible={showPasswordRepeat} />,
+        [AUTH_STEP.ENTER_NEW_PASSWORD]: <StepNewPassword disabled={isPending} onChange={onChange} onClick={onClick} value={password} repeatValue={passwordRepeat} passwordVisible={showPassword} repeatPasswordVisible={showPasswordRepeat} />,
-        [AUTH_STEP.ENTER_RESET_PASSWORD]: <StepNewPassword reset onChange={onChange} onClick={onClick} value={password} repeatValue={passwordRepeat} passwordVisible={showPassword} repeatPasswordVisible={showPasswordRepeat} />,
+        [AUTH_STEP.ENTER_RESET_PASSWORD]: <StepNewPassword isReset disabled={isPending} onChange={onChange} onClick={onClick} value={password} repeatValue={passwordRepeat} passwordVisible={showPassword} repeatPasswordVisible={showPasswordRepeat} />,
     }
 
     return (
-        <AuthFormWrapper onSubmit={onSubmit}>
+        <AuthFormWrapper isPending={isPending} onSubmit={onSubmit}>
             {stepMap[step] || 'say what now?'}
         </AuthFormWrapper>
     )

src/app/globals.css

@@ -11,7 +11,8 @@
   --color-invalid: red;
   --color-valid: #439C46;
   --color-foreground: #333333;
-  --color-disabled: #FFFFFF61;
+  --color-disabled: #E7E7E7;
+  --color-disabled-text: #8C90A3;
   --radius-normal: 10px;
   --text-sm2: 13px;
   --radius-container: 24px;

src/components/button/PrimaryButton.tsx

@@ -2,11 +2,13 @@ import React from 'react'
 
 type Props = {} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-function Button({ children, className, ...rest }: Props) {
+function Button({ children, className, disabled, ...rest }: Props) {
   return (
-    <button className={`${className} cursor-pointer bg-primary w-full rounded-normal p-3 text-white font-normal text-sm`} {...rest}>
+    <div>
-      {children}
+      <button className={`${className} ${disabled ? 'bg-disabled text-disabled-text' : 'bg-primary text-white'} transition-all duration-200 cursor-pointer w-full rounded-normal p-3 font-normal text-sm`} {...rest}>
-    </button>
+        {children}
+      </button>
+    </div>
   )
 }
 

src/components/input/InputField.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import Tooltip from '../utils/Tooltip';
 
 type Props = {
     htmlFor: string;
@@ -17,12 +18,15 @@ function InputField({ onChange, htmlFor, labelText, children, valid = true, clas
                 htmlFor={htmlFor}>
                 {labelText}
             </label>
-            <input
+
-                onChange={onChange}
+            <Tooltip content={inputProps['aria-errormessage']} hidden={!inputProps['aria-errormessage']}>
-                className='py-2.5 pt-3.5 text-base w-full outline-0 !leading-6'
+                <input
-                name={htmlFor}
+                    onChange={onChange}
-                {...inputProps} />
+                    className='py-2.5 pt-3.5 text-base w-full outline-0 !leading-6'
-            {children}
+                    name={htmlFor}
+                    {...inputProps} />
+                {children}
+            </Tooltip>
         </div>
     )
 }

src/components/utils/Tooltip.tsx

@@ -0,0 +1,49 @@
+'use client';
+import React, { ReactNode } from 'react';
+
+type Props = {
+  content: ReactNode;
+  hidden?: boolean;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+} & Omit<React.HTMLAttributes<HTMLElement>, 'id'>;
+
+const positionClasses = {
+  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+  right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+};
+
+const arrowClasses = {
+  top: 'top-full left-1/2 -translate-x-1/2 border-t-disabled',
+  bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-disabled',
+  left: 'left-full top-1/2 -translate-y-1/2 border-l-disabled',
+  right: 'right-full top-1/2 -translate-y-1/2 border-r-disabled',
+};
+
+const Tooltip = ({
+  children,
+  content,
+  hidden = false,
+  position = 'top',
+  ...rest
+}: Props) => {
+
+  return (
+    <div className="relative flex items-center group w-full" {...rest}>
+      {children}
+      {!hidden && (
+        <div
+          className={`pointer-events-none bg-disabled text-disabled-text absolute z-10 px-3 py-2 text-xs text-muted-foreground bg-muted rounded whitespace-nowrap transition-opacity duration-150 opacity-0 group-hover:opacity-100 ${positionClasses[position]}`}
+        >
+          {content}
+          <div
+            className={`absolute w-0 h-0 border-8 border-transparent ${arrowClasses[position]}`}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tooltip;

src/features/auth/components/AuthFormWrapper.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 type Props = {
-
+  isPending: boolean
 } & Omit<React.FormHTMLAttributes<HTMLFormElement>, "id">;
 
 function AuthFormWrapper({ children, ...restProps }: Props) {

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>
         </>
     )

src/features/auth/components/StepEnterOtp.tsx

@@ -2,7 +2,7 @@ import Button from '@/components/button/PrimaryButton';
 import OTPInputField from '@/components/input/MultiInputField';
 import { AUTH_PAGE_ELEMENT, AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } 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>;
@@ -11,9 +11,23 @@ type Props = {
     phoneNumber: string;
     timerRunning: boolean;
     secondsLeft: number;
-}
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
 
-function StepEnterOtp({ onChange, onClick, value, phoneNumber, timerRunning, secondsLeft }: Props) {
+function StepEnterOtp({ onChange, onClick, disabled = false, value, phoneNumber, timerRunning, secondsLeft }: Props) {
+    const [error, setError] = useState('');
+
+    const hasError = (e = error) => {
+        return e.trim().length > 0
+    }
+
+    useEffect(() => {
+        let error = '';
+        if (!/^\d{6}$/.test(value)) {
+            error = 'عبارت کامل نیست';
+        }
+
+        setError(error);
+    }, [value])
 
     return (
         <>
@@ -61,7 +75,7 @@ function StepEnterOtp({ onChange, onClick, value, phoneNumber, timerRunning, sec
                         }
                     </div>
                 </div>
-                <Button type='submit'>بعدی</Button>
+                <Button disabled={disabled || hasError() || value.length <= 0} type='submit'>بعدی</Button>
             </div>
         </>
     )

src/features/auth/components/StepEnterPassword.tsx

@@ -3,7 +3,7 @@ import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon';
 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>;
@@ -11,9 +11,26 @@ type Props = {
     value: string;
     passwordVisible: boolean;
     rememberMe: boolean;
-}
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
+
+function StepEnterPassword({ onChange, onClick, disabled = false, value, passwordVisible, rememberMe }: Props) {
+    const [error, setError] = useState('');
+
+    const hasError = (e = error) => {
+        return e.trim().length > 0
+    }
+
+    useEffect(() => {
+        let error = '';
+        if (value.length > 0) {
+            if (!/^.{6,}$/.test(value)) {
+                error = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
+            }
+        }
+
+        setError(error);
+    }, [value])
 
-function StepEnterPassword({ onChange, onClick, value, passwordVisible, rememberMe }: Props) {
     return (
         <>
             <Image
@@ -31,6 +48,8 @@ function StepEnterPassword({ onChange, onClick, value, passwordVisible, remember
                         <p className='mt-3 text-[13px]'>کلمه عبور خود را وارد نمایید.</p>
                     </div>
                     <InputField
+                        valid={!hasError()}
+                        aria-errormessage={error}
                         autoFocus
                         autoComplete='current-password'
                         className='mt-10'
@@ -53,7 +72,7 @@ function StepEnterPassword({ onChange, onClick, value, passwordVisible, remember
                             <input name={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='h-4.5 w-4.5 checked:accent-primary' onChange={onChange} type='checkbox' checked={rememberMe} /></div>
                     </div>
                 </div>
-                <Button type='submit'>ورود به منو</Button>
+                <Button disabled={disabled || hasError() || value.length <= 0} type='submit'>ورود به منو</Button>
             </div>
         </>
     )

src/features/auth/components/StepNewPassword.tsx

@@ -3,19 +3,51 @@ import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon';
 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>;
     onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
     value: string;
     repeatValue: string;
-    reset?: boolean;
+    isReset?: boolean;
     passwordVisible: boolean;
     repeatPasswordVisible: boolean;
-}
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
+
+function StepNewPassword({ isReset: reset = false, disabled = false, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
+    const [error, setError] = useState('');
+    const [error2, setError2] = useState('');
+
+    const hasError = (e = error) => {
+        return e.trim().length > 0
+    }
+
+    useEffect(() => {
+        let error = '';
+        if (value.length > 0) {
+            if (!/^.{6,}$/.test(value)) {
+                error = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
+            }
+        }
+
+        setError(error);
+    }, [value])
+
+    useEffect(() => {
+        let error = '';
+        if (value.length > 0) {
+            if (!/^.{6,}$/.test(value)) {
+                error = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
+            } else if (repeatValue !== value) {
+                error = 'تکرار کلمه عبور  مطابقت ندارد';
+            }
+        }
+
+        setError2(error);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [repeatValue])
 
-function StepNewPassword({ reset = false, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
     return (
         <>
             <Image
@@ -35,6 +67,8 @@ function StepNewPassword({ reset = false, onChange, onClick, value, repeatValue,
                         <p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
                     </div>
                     <InputField
+                        valid={!hasError()}
+                        aria-errormessage={error}
                         autoComplete='new-password'
                         className='mt-10'
                         htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
@@ -48,8 +82,9 @@ function StepNewPassword({ reset = false, onChange, onClick, value, repeatValue,
                         </button>
                     </InputField>
                     <InputField
+                        valid={!hasError(error2)}
+                        aria-errormessage={error2}
                         autoComplete='new-password'
-                        valid={value === repeatValue}
                         className='mt-6'
                         htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
                         labelText='تکرار کلمه عبور'
@@ -62,7 +97,7 @@ function StepNewPassword({ reset = false, onChange, onClick, value, repeatValue,
                         </button>
                     </InputField>
                 </div>
-                <Button type='submit'>ورود</Button>
+                <Button disabled={disabled || hasError() || hasError(error2) || value.length <= 0} type='submit'>ورود</Button>
             </div>
         </>
     )