From dc0b46fbd9513de64e4055c634e4834626e5047c Mon Sep 17 00:00:00 2001 From: suryac Date: Thu, 12 Nov 2026 10:54:09 +0530 Subject: [PATCH] login screen fix --- src/components/auth/AuthShell.tsx | 63 +++++++++++++++ src/screens/ForgotPasswordPage.tsx | 118 ++++++++++++++--------------- src/screens/LoginPage.tsx | 117 ++++++++++++---------------- 3 files changed, 168 insertions(+), 130 deletions(-) create mode 100644 src/components/auth/AuthShell.tsx diff --git a/src/components/auth/AuthShell.tsx b/src/components/auth/AuthShell.tsx new file mode 100644 index 0000000..bafbed6 --- /dev/null +++ b/src/components/auth/AuthShell.tsx @@ -0,0 +1,63 @@ +import type { ReactNode } from 'react'; +import { Card } from '../reusable'; +import logo from '../../assets/logo.png'; + +/** Shared auth-page chrome: curved green background, brand header and a card. */ +export function AuthShell({ + title, + subtitle, + children, +}: { + title: string; + subtitle?: string; + children: ReactNode; +}) { + return ( +
+ {/* Decorative curves */} + + + + + + + + + + + + + + + + + + + + + +
+ Krishna Sales Logo +

Krishna Sales

+
+ +
+

{title}

+ {subtitle &&

{subtitle}

} +
+ {children} + +
+ ); +} diff --git a/src/screens/ForgotPasswordPage.tsx b/src/screens/ForgotPasswordPage.tsx index f076ea6..0a08c8a 100644 --- a/src/screens/ForgotPasswordPage.tsx +++ b/src/screens/ForgotPasswordPage.tsx @@ -1,7 +1,7 @@ -import { useState, useEffect, type FormEvent } from 'react'; +import { useState, useEffect, useRef, type FormEvent } from 'react'; import { useNavigate, Link } from 'react-router-dom'; -import { Eye, EyeOff, ArrowLeft, Mail, KeyRound, CheckCircle2, AlertCircle } from 'lucide-react'; -import { Card } from '../components/reusable'; +import { Eye, EyeOff, ArrowLeft, Mail, Lock, KeyRound, CheckCircle2, AlertCircle } from 'lucide-react'; +import { AuthShell } from '../components/auth/AuthShell'; import { Button } from '../components/buttons'; import { PasswordRulesChecklist } from '../components/auth/PasswordRulesChecklist'; import { forgotPassword, verifyResetCode, resetPassword } from '../api/auth'; @@ -11,7 +11,6 @@ import { passwordTooLong, PASSWORD_MAX_CHARS, } from '../utils/passwordPolicy'; -import logo from '../assets/logo.png'; const CODE_LENGTH = 6; const RESEND_COOLDOWN = 60; // seconds @@ -34,6 +33,13 @@ export function ForgotPasswordPage() { const [message, setMessage] = useState(''); const policy = usePasswordPolicy(step === 'password'); + const codeInputRef = useRef(null); + + // The email and code inputs share a tree position, so React reuses the DOM node + // and autoFocus doesn't fire on step change — focus the code input explicitly. + useEffect(() => { + if (step === 'code') codeInputRef.current?.focus(); + }, [step]); // Cooldown countdown useEffect(() => { @@ -137,31 +143,23 @@ export function ForgotPasswordPage() { } }; - return ( -
- -
- Krishna Sales Logo -

- {done - ? 'Password Reset Complete' - : step === 'email' - ? 'Forgot Password' - : step === 'code' - ? 'Enter Verification Code' - : 'Create New Password'} -

-

- {done - ? 'Your password has been changed. Redirecting to login…' - : step === 'email' - ? "Enter your email address and we'll send you a 6-digit verification code." - : step === 'code' - ? `We emailed a ${CODE_LENGTH}-digit code to ${email}. It is valid for 10 minutes.` - : 'Choose a strong new password that meets the security policy.'} -

-
+ const title = done + ? 'Password Reset Complete' + : step === 'email' + ? 'Forgot Password' + : step === 'code' + ? 'Enter Verification Code' + : 'Create New Password'; + const subtitle = done + ? 'Your password has been changed. Redirecting to login…' + : step === 'email' + ? "Enter your email address and we'll send you a 6-digit verification code." + : step === 'code' + ? `We emailed a ${CODE_LENGTH}-digit code to ${email}. It is valid for 10 minutes.` + : 'Choose a strong new password that meets the security policy.'; + return ( + {error && (
@@ -175,35 +173,33 @@ export function ForgotPasswordPage() { {message}
-
) : step === 'email' ? ( /* Step 1: Email Form */
-