danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 3 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/app/auth/page.tsx
+10 -7
View File
@@ -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_PASSWORD]: <StepEnterPassword 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_NEW_PASSWORD]: <StepNewPassword 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_NUMBER]: <StepEnterNumber disabled={isPending} onChange={onChange} value={number} />,
[AUTH_STEP.ENTER_PASSWORD]: <StepEnterPassword disabled={isPending} onChange={onChange} onClick={onClick} value={password} passwordVisible={showPassword} rememberMe={rememberMe} />,
[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 disabled={isPending} 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
+2 -1
View File
@@ -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
+6 -4
View File
@@ -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}>
{children}
</button>
<div>
<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}>
{children}
</button>
</div>
)
}
src/components/input/InputField.tsx
+10 -6
View File
@@ -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}
className='py-2.5 pt-3.5 text-base w-full outline-0 !leading-6'
name={htmlFor}
{...inputProps} />
{children}
<Tooltip content={inputProps['aria-errormessage']} hidden={!inputProps['aria-errormessage']}>
<input
onChange={onChange}
className='py-2.5 pt-3.5 text-base w-full outline-0 !leading-6'
name={htmlFor}
{...inputProps} />
{children}
</Tooltip>
</div>
)
}
src/components/utils/Tooltip.tsx
+49
View File
@@ -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 -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>
</>
)