danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add input validation error

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-07-03 17:34:47 +03:30
parent 9c07c0cdca
commit 5ccbb9c467
10 changed files with 184 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/auth/components/AuthFormWrapper.tsx
+1 -1
View File
@@ -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
+24 -5
View File
@@ -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
+18 -4
View File
@@ -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
+23 -4
View File
@@ -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
+41 -6
View File
@@ -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>
</>
)