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

improve: overall ux in auth page

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-07-14 20:59:01 +03:30
parent b344e7d291
commit 69540a67f2
10 changed files with 165 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/auth/components/AuthFormWrapper.tsx
+3 -3
View File
@@ -1,16 +1,16 @@
import LoadingOverlay from '@/components/overlays/LoadingOverlay';
// import LoadingOverlay from '@/components/overlays/LoadingOverlay';
import React from 'react'
type Props = {
isPending: boolean
} & Omit<React.FormHTMLAttributes<HTMLFormElement>, "id">;
function AuthFormWrapper({ children, isPending, ...restProps }: Props) {
function AuthFormWrapper({ children, ...restProps }: Props) {
return (
<form {...restProps} className='p-6 lg:py-[75px] w-full flex items-center justify-center py-4 lg:items-center lg:px-10 px-4 drop-shadow-black h-full'>
<div className='relative h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] bg-container rounded-container overflow-clip lg:flex-row justify-between'>
{children}
<LoadingOverlay visible={isPending} bgOpacity={0} />
{/* <LoadingOverlay visible={isPending} bgOpacity={0} /> */}
</div>
</form>
)
src/features/auth/components/StepEnterNumber.tsx
+5 -3
View File
@@ -7,9 +7,10 @@ import React, { useEffect, useState } from 'react'
type Props = {
onChange: React.ChangeEventHandler<HTMLInputElement>;
value: string;
pending?: boolean | undefined
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
function StepEnterNumber({ onChange, disabled = false, value }: Props) {
function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
const [error, setError] = useState('');
const hasError = (e = error) => {
@@ -35,7 +36,8 @@ function StepEnterNumber({ onChange, disabled = false, value }: Props) {
alt='login banner'
width={100}
height={100}
unoptimized={true}
unoptimized
priority
/>
<div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
<div className='w-full'>
@@ -56,7 +58,7 @@ function StepEnterNumber({ onChange, disabled = false, value }: Props) {
onChange={onChange}
type='number' />
</div>
<Button disabled={disabled || hasError() || value.length <= 0} type='submit'>بعدی</Button>
<Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>بعدی</Button>
</div>
</>
)
src/features/auth/components/StepEnterOtp.tsx
+17 -9
View File
@@ -1,6 +1,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 clsx from 'clsx';
import Image from 'next/image';
import React, { useEffect, useState } from 'react'
@@ -11,9 +12,10 @@ type Props = {
phoneNumber: string;
timerRunning: boolean;
secondsLeft: number;
pending?: boolean | undefined
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
function StepEnterOtp({ onChange, onClick, disabled = false, value, phoneNumber, timerRunning, secondsLeft }: Props) {
function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, phoneNumber, timerRunning, secondsLeft }: Props) {
const [error, setError] = useState('');
const hasError = (e = error) => {
@@ -37,7 +39,8 @@ function StepEnterOtp({ onChange, onClick, disabled = false, value, phoneNumber,
alt='login banner'
width={100}
height={100}
unoptimized={true}
unoptimized
priority
/>
<div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
<div className='pt-4' dir='rtl'>
@@ -60,22 +63,27 @@ function StepEnterOtp({ onChange, onClick, disabled = false, value, phoneNumber,
onChange={onChange} />
</div>
<div className='inline-flex justify-center items-center w-full pt-6 text-xs'>
<div className='text-center w-full pt-6 text-xs'>
<div dir='rtl'>
{timerRunning ?
<div>{secondsLeft} ثانیه دیگر تا دریافت کد</div> :
<div>
کد را دریافت نکردید؟
<span className='text-primary px-1'>
<button type='button' id={AUTH_PAGE_ELEMENTS.RESEND_OTP} className='cursor-pointer' onClick={onClick}>
دوباره امتحان کنید
</button>
</span>
<button
type='button'
disabled={pending}
id={AUTH_PAGE_ELEMENTS.RESEND_OTP}
className={clsx(
'px-1 transition-colors duration-200',
!pending ? 'text-primary cursor-pointer' : 'text-neutral-200 cursor-auto'
)} onClick={onClick}>
دوباره امتحان کنید
</button>
</div>
}
</div>
</div>
<Button disabled={disabled || hasError() || value.length <= 0} type='submit'>بعدی</Button>
<Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>بعدی</Button>
</div>
</>
)
src/features/auth/components/StepEnterPassword.tsx
+5 -3
View File
@@ -11,9 +11,10 @@ type Props = {
value: string;
passwordVisible: boolean;
rememberMe: boolean;
pending?: boolean | undefined
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
function StepEnterPassword({ onChange, onClick, disabled = false, value, passwordVisible, rememberMe }: Props) {
function StepEnterPassword({ onChange, onClick, pending, disabled = false, value, passwordVisible, rememberMe }: Props) {
const [error, setError] = useState('');
const hasError = (e = error) => {
@@ -39,7 +40,8 @@ function StepEnterPassword({ onChange, onClick, disabled = false, value, passwor
alt='login banner'
width={100}
height={100}
unoptimized={true}
unoptimized
priority
/>
<div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
<div className='w-full'>
@@ -72,7 +74,7 @@ function StepEnterPassword({ onChange, onClick, disabled = false, value, passwor
<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 disabled={disabled || hasError() || value.length <= 0} type='submit'>ورود به منو</Button>
<Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>ورود به منو</Button>
</div>
</>
)
src/features/auth/components/StepNewPassword.tsx
+14 -17
View File
@@ -13,9 +13,10 @@ type Props = {
isReset?: boolean;
passwordVisible: boolean;
repeatPasswordVisible: boolean;
pending?: boolean | undefined
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
function StepNewPassword({ isReset: reset = false, disabled = false, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
function StepNewPassword({ isReset: reset = false, pending, disabled = false, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
const [error, setError] = useState('');
const [error2, setError2] = useState('');
@@ -25,28 +26,23 @@ function StepNewPassword({ isReset: reset = false, disabled = false, onChange, o
useEffect(() => {
let error = '';
let error2 = '';
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 کاراکتر باشد';
if (repeatValue.length > 0) {
if (!/^.{6,}$/.test(repeatValue)) {
error2 = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
} else if (repeatValue !== value) {
error = 'تکرار کلمه عبور مطابقت ندارد';
error2 = 'تکرار کلمه عبور مطابقت ندارد';
}
}
setError2(error);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [repeatValue])
setError(error);
setError2(error2);
}, [value, repeatValue])
return (
<>
@@ -56,7 +52,8 @@ function StepNewPassword({ isReset: reset = false, disabled = false, onChange, o
alt='login banner'
width={100}
height={100}
unoptimized={true}
unoptimized
priority
/>
<div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
<div className='w-full'>
@@ -97,7 +94,7 @@ function StepNewPassword({ isReset: reset = false, disabled = false, onChange, o
</button>
</InputField>
</div>
<Button disabled={disabled || hasError() || hasError(error2) || value.length <= 0} type='submit'>ورود</Button>
<Button disabled={disabled || hasError() || hasError(error2) || value.length <= 0} pending={pending} type='submit'>ورود</Button>
</div>
</>
)