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

chore: sync auth page password step styles

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-07-02 21:39:09 +03:30
parent f7a9fb5e2a
commit 8a4b68b7a9
2 changed files with 44 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/auth/page.tsx
+3 -2
View File
@@ -66,7 +66,6 @@ function AuthIndex({ }: Props) {
setNumber(() => e.target.value) setNumber(() => e.target.value)
} }
else if (e.target.name == AUTH_PAGE_ELEMENT.INPUT_PASSWORD) { else if (e.target.name == AUTH_PAGE_ELEMENT.INPUT_PASSWORD) {
console.log(e.target.value, 's');
setPassword(() => e.target.value) setPassword(() => e.target.value)
} }
else if (e.target.name == AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT) { else if (e.target.name == AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT) {
@@ -114,7 +113,7 @@ function AuthIndex({ }: Props) {
e.preventDefault(); e.preventDefault();
if (step == AUTH_STEP.ENTER_NUMBER) { if (step == AUTH_STEP.ENTER_NUMBER) {
if (false) { if (true) {
setStep(AUTH_STEP.ENTER_PASSWORD) setStep(AUTH_STEP.ENTER_PASSWORD)
} else { } else {
setStep(AUTH_STEP.ENTER_OTP); setStep(AUTH_STEP.ENTER_OTP);
@@ -123,7 +122,9 @@ function AuthIndex({ }: Props) {
else if (step == AUTH_STEP.ENTER_PASSWORD) { else if (step == AUTH_STEP.ENTER_PASSWORD) {
try { try {
// await loginMutation.mutateAsync({ phone: number, password }) // await loginMutation.mutateAsync({ phone: number, password })
useAuthStore.getState().isAuthenticated = true;
console.log("Logged in") console.log("Logged in")
redirect("/")
} }
catch (e) { catch (e) {
console.log("Wrong credentials: ", e) console.log("Wrong credentials: ", e)
src/features/auth/components/StepEnterPassword.tsx
+41 -28
View File
@@ -2,6 +2,7 @@ import Button from '@/components/button/PrimaryButton';
import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon'; import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon';
import InputField from '@/components/input/InputField'; import InputField from '@/components/input/InputField';
import { AUTH_PAGE_ELEMENT } from '@/enums'; import { AUTH_PAGE_ELEMENT } from '@/enums';
import Image from 'next/image';
import React from 'react' import React from 'react'
type Props = { type Props = {
@@ -15,37 +16,49 @@ type Props = {
function StepEnterPassword({ onSubmit, onChange, onClick, value, passwordVisible, rememberMe }: Props) { function StepEnterPassword({ onSubmit, onChange, onClick, value, passwordVisible, rememberMe }: Props) {
return ( return (
<form onSubmit={onSubmit} className='p-6 h-full flex flex-col justify-between'> <form 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='block'> <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'>
<img src='/assets/images/login-banner.png' /> <Image
<div className='pt-4' dir='rtl'> className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
<h6 className='text-lg font-bold'>ورود به سیستم</h6> src={'/assets/images/login-banner.png'}
<p className='mt-3 text-[13px]'>کلمه عبور خود را وارد نمایید.</p> alt='login banner'
</div> width={100}
<InputField height={100}
autoFocus unoptimized={true}
autoComplete='current-password' />
className='mt-10' <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'>
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD} <div className='w-full'>
labelText='کلمه عبور' <div className='pt-4' dir='rtl'>
value={value} <h6 className='text-lg font-bold'>ورود به سیستم</h6>
placeholder='' <p className='mt-3 text-[13px]'>کلمه عبور خود را وارد نمایید.</p>
onChange={onChange} </div>
type={passwordVisible ? 'text' : 'password'}> <InputField
<button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={onClick}> autoFocus
<EyeToggleIcon slash={passwordVisible} className="pointer-events-none" /> autoComplete='current-password'
</button> className='mt-10'
</InputField> htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
<div className='inline-flex justify-between items-center w-full pt-3'> labelText='کلمه عبور'
<button id={AUTH_PAGE_ELEMENT.RESET_PASSWORD} type='button' onClick={onClick} className='text-sm2 cursor-pointer'>بازیابی کلمه عبور</button> 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>
<div className='inline-flex justify-between items-center w-full pt-3'>
<button id={AUTH_PAGE_ELEMENT.RESET_PASSWORD} type='button' onClick={onClick} className='text-sm2 cursor-pointer'>بازیابی کلمه عبور</button>
<div className='inline-flex justify-between items-center'> <div className='inline-flex justify-between items-center'>
{/* TODO: customize checkbox */} {/* TODO: customize checkbox */}
<label htmlFor={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='text-sm2 px-2 py-0.5'>مرا به خاطر بسپار</label> <label htmlFor={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='text-sm2 px-2 py-0.5'>مرا به خاطر بسپار</label>
<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> <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>
</div> </div>
</div> </div>
<Button type='submit'>ورود به منو</Button>
</form> </form>
) )
} }