Skip to content

Commit 5ad7b3d

Browse files
adithyaakrishnaadithyaakrishna
committed
feat: more updated
1 parent 39f3e1c commit 5ad7b3d

File tree

123 files changed

+619
-451
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

123 files changed

+619
-451
lines changed

‎apps/sim/app/(auth)/login/login-form.tsx‎

Lines changed: 102 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -417,29 +417,41 @@ export default function LoginPage({
417417
<div className='flex items-center justify-between'>
418418
<Label htmlFor='email'>Email</Label>
419419
</div>
420-
<Input
421-
id='email'
422-
name='email'
423-
placeholder='Enter your email'
424-
required
425-
autoCapitalize='none'
426-
autoComplete='email'
427-
autoCorrect='off'
428-
value={email}
429-
onChange={handleEmailChange}
430-
className={cn(
431-
showEmailValidationError &&
432-
emailErrors.length > 0 &&
433-
'border-red-500 focus:border-red-500'
434-
)}
435-
/>
436-
{showEmailValidationError && emailErrors.length > 0 && (
437-
<div className='mt-1 space-y-1 text-red-400 text-xs'>
438-
{emailErrors.map((error, index) => (
439-
<p key={index}>{error}</p>
440-
))}
420+
<div className='relative'>
421+
<Input
422+
id='email'
423+
name='email'
424+
placeholder='Enter your email'
425+
required
426+
autoCapitalize='none'
427+
autoComplete='email'
428+
autoCorrect='off'
429+
value={email}
430+
onChange={handleEmailChange}
431+
className={cn(
432+
showEmailValidationError &&
433+
emailErrors.length > 0 &&
434+
'border-red-500 focus:border-red-500'
435+
)}
436+
/>
437+
<div
438+
className={cn(
439+
'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
440+
showEmailValidationError && emailErrors.length > 0
441+
? 'grid-rows-[1fr]'
442+
: 'grid-rows-[0fr]'
443+
)}
444+
aria-live='polite'
445+
>
446+
<div className='overflow-hidden'>
447+
<div className='mt-1 space-y-1 text-red-400 text-xs'>
448+
{emailErrors.map((error, index) => (
449+
<p key={index}>{error}</p>
450+
))}
451+
</div>
452+
</div>
441453
</div>
442-
)}
454+
</div>
443455
</div>
444456
<div className='space-y-2'>
445457
<div className='flex items-center justify-between'>
@@ -453,40 +465,52 @@ export default function LoginPage({
453465
</button>
454466
</div>
455467
<div className='relative'>
456-
<Input
457-
id='password'
458-
name='password'
459-
required
460-
type={showPassword ? 'text' : 'password'}
461-
autoCapitalize='none'
462-
autoComplete='current-password'
463-
autoCorrect='off'
464-
placeholder='Enter your password'
465-
value={password}
466-
onChange={handlePasswordChange}
468+
<div className='relative'>
469+
<Input
470+
id='password'
471+
name='password'
472+
required
473+
type={showPassword ? 'text' : 'password'}
474+
autoCapitalize='none'
475+
autoComplete='current-password'
476+
autoCorrect='off'
477+
placeholder='Enter your password'
478+
value={password}
479+
onChange={handlePasswordChange}
480+
className={cn(
481+
'pr-10',
482+
showValidationError &&
483+
passwordErrors.length > 0 &&
484+
'border-red-500 focus:border-red-500'
485+
)}
486+
/>
487+
<button
488+
type='button'
489+
onClick={() => setShowPassword(!showPassword)}
490+
className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
491+
aria-label={showPassword ? 'Hide password' : 'Show password'}
492+
>
493+
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
494+
</button>
495+
</div>
496+
<div
467497
className={cn(
468-
'pr-10',
469-
showValidationError &&
470-
passwordErrors.length > 0 &&
471-
'border-red-500 focus:border-red-500'
498+
'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
499+
showValidationError && passwordErrors.length > 0
500+
? 'grid-rows-[1fr]'
501+
: 'grid-rows-[0fr]'
472502
)}
473-
/>
474-
<button
475-
type='button'
476-
onClick={() => setShowPassword(!showPassword)}
477-
className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
478-
aria-label={showPassword ? 'Hide password' : 'Show password'}
503+
aria-live='polite'
479504
>
480-
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
481-
</button>
482-
</div>
483-
{showValidationError && passwordErrors.length > 0 && (
484-
<div className='mt-1 space-y-1 text-red-400 text-xs'>
485-
{passwordErrors.map((error, index) => (
486-
<p key={index}>{error}</p>
487-
))}
505+
<div className='overflow-hidden'>
506+
<div className='mt-1 space-y-1 text-red-400 text-xs'>
507+
{passwordErrors.map((error, index) => (
508+
<p key={index}>{error}</p>
509+
))}
510+
</div>
511+
</div>
488512
</div>
489-
)}
513+
</div>
490514
</div>
491515
</div>
492516

@@ -495,6 +519,7 @@ export default function LoginPage({
495519
disabled={isLoading}
496520
loading={isLoading}
497521
loadingText='Signing in'
522+
className='!mt-6'
498523
>
499524
Sign in
500525
</BrandedButton>
@@ -588,17 +613,33 @@ export default function LoginPage({
588613
resetStatus.type === 'error' && 'border-red-500 focus:border-red-500'
589614
)}
590615
/>
591-
{resetStatus.type === 'error' && (
592-
<div className='mt-1 text-red-400 text-xs'>
593-
<p>{resetStatus.message}</p>
616+
<div
617+
className={cn(
618+
'grid transition-[grid-template-rows] duration-200 ease-out',
619+
resetStatus.type === 'error' ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
620+
)}
621+
aria-live='polite'
622+
>
623+
<div className='overflow-hidden'>
624+
<div className='mt-1 text-red-400 text-xs'>
625+
<p>{resetStatus.message}</p>
626+
</div>
594627
</div>
595-
)}
628+
</div>
596629
</div>
597-
{resetStatus.type === 'success' && (
598-
<div className='mt-1 text-[#4CAF50] text-xs'>
599-
<p>{resetStatus.message}</p>
630+
<div
631+
className={cn(
632+
'grid transition-[grid-template-rows] duration-200 ease-out',
633+
resetStatus.type === 'success' ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
634+
)}
635+
aria-live='polite'
636+
>
637+
<div className='overflow-hidden'>
638+
<div className='mt-1 text-[#4CAF50] text-xs'>
639+
<p>{resetStatus.message}</p>
640+
</div>
600641
</div>
601-
)}
642+
</div>
602643
<BrandedButton
603644
type='button'
604645
onClick={handleForgotPassword}
@@ -614,4 +655,4 @@ export default function LoginPage({
614655
</Modal>
615656
</>
616657
)
617-
}
658+
}

0 commit comments

Comments
 (0)