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

chore: sync auth page create password step styles

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-07-02 21:33:35 +03:30
parent dc7625ae89
commit f7a9fb5e2a
3 changed files with 59 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/auth/components/StepNewPassword.tsx
+49 -36
View File
@@ -2,6 +2,7 @@ import Button from '@/components/button/PrimaryButton';
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'
type Props = {
@@ -17,44 +18,56 @@ type Props = {
function StepNewPassword({ reset = false, onSubmit, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
return (
<form autoComplete='off' onSubmit={onSubmit} className='p-6 h-full flex flex-col justify-between'>
<div className='block'>
<img src='/assets/images/login-banner.png' />
<div className='pt-4' dir='rtl'>
<h6 className='text-lg font-bold'>
{ reset ? "تغییر کلمه عبور" : "انتخاب کلمه عبور" }
</h6>
<p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
<form autoComplete='off' onSubmit={onSubmit} 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='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'>
<Image
className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
src={'/assets/images/login-banner.png'}
alt='login banner'
width={100}
height={100}
unoptimized={true}
/>
<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'>
<div className='pt-4' dir='rtl'>
<h6 className='text-lg font-bold'>
{reset ? "تغییر کلمه عبور" : "انتخاب کلمه عبور"}
</h6>
<p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
</div>
<InputField
autoComplete='new-password'
className='mt-10'
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
labelText='کلمه عبور'
value={value}
placeholder=''
onChange={onChange}
type={passwordVisible ? 'text' : 'password'}>
<button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={onClick}>
<EyeToggleIcon slash={passwordVisible} className="pointer-events-none" />
</button>
</InputField>
<InputField
autoComplete='new-password'
valid={value === repeatValue}
className='mt-6'
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
labelText='تکرار کلمه عبور'
value={repeatValue}
placeholder=''
onChange={onChange}
type={repeatPasswordVisible ? 'text' : 'password'}>
<button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_REPEAT_PASSWORD} type='button' onClick={onClick}>
<EyeToggleIcon slash={repeatPasswordVisible} className="pointer-events-none" />
</button>
</InputField>
</div>
<Button type='submit'>ورود</Button>
</div>
<InputField
autoComplete='new-password'
className='mt-10'
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
labelText='کلمه عبور'
value={value}
placeholder=''
onChange={onChange}
type={passwordVisible ? 'text' : 'password'}>
<button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={onClick}>
<EyeToggleIcon slash={passwordVisible} className="pointer-events-none" />
</button>
</InputField>
<InputField
autoComplete='new-password'
valid={value === repeatValue}
className='mt-6'
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
labelText='تکرار کلمه عبور'
value={repeatValue}
placeholder=''
onChange={onChange}
type={repeatPasswordVisible ? 'text' : 'password'}>
<button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_REPEAT_PASSWORD} type='button' onClick={onClick}>
<EyeToggleIcon slash={repeatPasswordVisible} className="pointer-events-none" />
</button>
</InputField>
</div>
<Button type='submit'>ورود</Button>
</form>
)
}