login screen fix

.gitignore

@@ -26,3 +26,12 @@ dist-ssr
 # vite-plugin-pwa dev output
 dev-dist
 .agents/
+
+# Testing / E2E / API tests
+.env.e2e*
+e2e/
+api-tests/
+playwright-report/
+test-results/
+coverage/
+

README.md

@@ -13,7 +13,7 @@ This is a Progressive Web App (Pwa) built for the Krishna Sales team.
 - Logout now calls `POST /usr/logout` to revoke the session and cookie on the server (retried if the call fails). Sign-out and sign-in in one tab are reflected in the others; a different user signing in elsewhere reloads the tab.
 - One shared session for all four workflow clients (`src/api/session.ts`) replaces the per-client token copies. Existing sign-ins are cleared once, so everyone logs in again after this update.
 - Password policy: live rules checklist, forced change on login when the password is expired, temporary or predates the policy, forgot / reset password, and change password.
-- "Password change due" banner when the password is about to expire (from `user.password_status` at login), with a **Change now** shortcut.
+- Password expiry warning & enforcement: Evaluates `user.password_status` (`warn`, `days_left`, `must_change`). Shows a top banner in `ConsoleLayout` with "Change Password" and "Later" skip options during the warning window; automatically launches the mandatory password change dialog when the password has expired.
 - Note: the refresh cookie is only set when the app and the API share one origin (`VITE_ZINO_API_URL` = `SAME_ORIGIN`, or the app's own host). On a different origin the server returns the token but no cookie, and the session ends when the access token expires.
 
 **Maintenance**

eslint.config.js

@@ -19,4 +19,9 @@ export default defineConfig([
       globals: globals.browser,
     },
   },
+  {
+    // Playwright fixtures take a `use` callback that the React hooks rule mistakes for a hook.
+    files: ['e2e/**/*.ts'],
+    rules: { 'react-hooks/rules-of-hooks': 'off' },
+  },
 ])

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "krishna-sales-pwa",
-  "version": "1.1.0",
+  "version": "1.0.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "krishna-sales-pwa",
-      "version": "1.1.0",
+      "version": "1.0.4",
       "dependencies": {
         "@react-google-maps/api": "^2.20.8",
         "jspdf": "^4.2.1",
@@ -20,12 +20,14 @@
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
+        "@playwright/test": "^1.65.0",
         "@tailwindcss/vite": "^4.0.0",
         "@types/node": "^24.13.2",
         "@types/react": "^19.2.17",
         "@types/react-dom": "^19.2.3",
         "@vite-pwa/assets-generator": "^1.0.2",
         "@vitejs/plugin-react": "^6.0.3",
+        "dotenv": "^18.0.9",
         "eslint": "^10.6.0",
         "eslint-plugin-react-hooks": "^7.1.1",
         "eslint-plugin-react-refresh": "^0.5.3",
@@ -2309,6 +2311,22 @@
         "url": "https://github.com/sponsors/Boshen"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.65.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.65.0.tgz",
+      "integrity": "sha512-iGURLGuKDLakSEl7Pgfv8h7f+XLT+V861Wfhz0zlEl5nyFuKUopdkFBPKqTllTUp06aOwPuH8iuUEb3yp3MpbQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.65.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/@quansync/fs": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@quansync/fs/-/fs-1.0.0.tgz",
@@ -4716,6 +4734,22 @@
         "@types/trusted-types": "^2.0.7"
       }
     },
+    "node_modules/dotenv": {
+      "version": "18.0.9",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-18.0.9.tgz",
+      "integrity": "sha512-3fVOW4cB02R066PUSwn8O4TJyz9NckQl7F81blIbaq9jKBm2tSmOKky7ZHIXzGvkVPXCSn6jkpziBPZdGFs8Tw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "bin": {
+        "dotenv": "dist/index.cjs"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -7107,6 +7141,35 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.65.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.65.0.tgz",
+      "integrity": "sha512-F3AMWcR44qMBt4kq+6Kb6mX7bjGXshktKFOPULd7reED6ZJWevjbNRqysP7q+AATE9kdPEZBibex1BYsvpVoeA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.65.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.65.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.65.0.tgz",
+      "integrity": "sha512-vNSKgH6YqtN7cdT/L334zo0a+YwkrpicyrHJlWWPIm/Q+Nn2SWInil01oT0mbu96U4GgoRtCYQD9CzJQgju+lA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",

package.json

@@ -8,7 +8,13 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "generate-pwa-assets": "pwa-assets-generator"
+    "generate-pwa-assets": "pwa-assets-generator",
+    "e2e": "playwright test -c e2e/playwright.config.ts",
+    "e2e:mocked": "playwright test -c e2e/playwright.config.ts --project=mocked",
+    "e2e:live": "playwright test -c e2e/playwright.config.ts --project=setup --project=live",
+    "e2e:report": "playwright show-report e2e/playwright-report",
+    "e2e:typecheck": "tsc -p e2e --noEmit",
+    "api:test": "node api-tests/run.mjs"
   },
   "dependencies": {
     "@react-google-maps/api": "^2.20.8",
@@ -23,12 +29,14 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.65.0",
     "@tailwindcss/vite": "^4.0.0",
     "@types/node": "^24.13.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vite-pwa/assets-generator": "^1.0.2",
     "@vitejs/plugin-react": "^6.0.3",
+    "dotenv": "^18.0.9",
     "eslint": "^10.6.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",

src/api/auth.ts

@@ -88,7 +88,7 @@ export async function resetPassword(resetToken: string, newPassword: string): Pr
  * On 200 success, the backend bumps password_changed_at and invalidates the session JWT.
  */
 export async function changePassword(
-  currentPassword: string,
+  currentPassword: string | undefined | null,
   newPassword: string,
   token?: string | null
 ): Promise<{ message: string }> {
@@ -97,6 +97,13 @@ export async function changePassword(
     throw new AuthApiError('You must be signed in to change your password', 401);
   }
 
+  const payload: Record<string, string> = {
+    new_password: newPassword,
+  };
+  if (currentPassword) {
+    payload.current_password = currentPassword;
+  }
+
   const res = await fetch(`${BASE_URL}/usr/me/password`, {
     method: 'POST',
     credentials: AUTH_CREDENTIALS,
@@ -104,10 +111,7 @@ export async function changePassword(
       'Content-Type': 'application/json',
       Authorization: `Bearer ${authToken}`,
     },
-    body: JSON.stringify({
-      current_password: currentPassword,
-      new_password: newPassword,
-    }),
+    body: JSON.stringify(payload),
   });
 
   const body = await res.json().catch(() => ({}));

src/api/clients.ts

@@ -36,6 +36,7 @@ export async function loginAll(email: string, password: string, orgId?: string)
   try {
     const me = await orderBookingClient.getMe();
     res.user = { ...res.user, ...me };
+    ALL.forEach((c) => c.setUser(res.user));
   } catch (e) {
     console.error('Failed to fetch user profile:', e);
   }
@@ -55,6 +56,7 @@ export async function completePasswordChangeAll(
   try {
     const me = await orderBookingClient.getMe();
     res.user = { ...res.user, ...me };
+    ALL.forEach((c) => c.setUser(res.user));
   } catch (e) {
     console.error('Failed to fetch user profile:', e);
   }

src/api/types.ts

@@ -10,6 +10,13 @@ export interface ApiError {
   data?: any;
 }
 
+export interface PasswordStatus {
+  must_change?: boolean;
+  expires_at?: string;
+  days_left?: number;
+  warn?: boolean;
+}
+
 export interface User {
   id: string;
   org_id: string;
@@ -18,6 +25,8 @@ export interface User {
   roles: string[];
   groups: string[];
   is_admin?: boolean;
+  provider?: string;
+  password_status?: PasswordStatus;
 }
 
 export interface LoginResponse {

src/auth/AuthProvider.tsx

@@ -1,6 +1,7 @@
 import { useState, type ReactNode, useEffect } from 'react';
 import { loginAll, logoutAll, currentToken, orderBookingClient, completePasswordChangeAll } from '../api/clients';
-import { AuthCtx, type AuthValue, type PasswordStatus } from './context';
+import { AuthCtx, type AuthValue } from './context';
+import type { PasswordStatus } from '../api/types';
 import { sessionClient } from '../api/session';
 
 export function AuthProvider({ children }: { children: ReactNode }) {
@@ -17,12 +18,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   });
 
   const [passwordStatus, setPasswordStatus] = useState<PasswordStatus | null>(() => {
-    try {
-      const raw = localStorage.getItem('krishna_sales_mobile_password_status');
-      return raw ? (JSON.parse(raw) as PasswordStatus) : null;
-    } catch {
-      return null;
-    }
+    return orderBookingClient.currentUser()?.password_status ?? null;
   });
 
   // Keep React in step with the session: refresh/idle expiry, a sign-out or a
@@ -48,10 +44,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   }, []);
 
   useEffect(() => {
-    if (authed && (!isAdmin || roles.length === 0)) {
+    if (authed && (!isAdmin || roles.length === 0 || !passwordStatus)) {
       orderBookingClient.getMe().then(me => {
         if (me.is_admin) setIsAdmin(true);
         if (me.roles) setRoles(me.roles);
+        if (me.password_status) setPasswordStatus(me.password_status);
       }).catch(console.error);
     }
   }, [authed]);
@@ -68,11 +65,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     localStorage.setItem('krishna_sales_mobile_is_admin', userIsAdmin ? 'true' : 'false');
     setRoles(userRoles);
     localStorage.setItem('krishna_sales_mobile_roles', JSON.stringify(userRoles));
-    // Only a due/expiring password is worth remembering; a fresh login replaces it.
-    const status: PasswordStatus | null = res.user?.password_status?.warn ? res.user.password_status : null;
-    setPasswordStatus(status);
-    if (status) localStorage.setItem('krishna_sales_mobile_password_status', JSON.stringify(status));
-    else localStorage.removeItem('krishna_sales_mobile_password_status');
+    if (res.user?.password_status) {
+      setPasswordStatus(res.user.password_status);
+    } else {
+      setPasswordStatus(null);
+    }
   };
 
   const value: AuthValue = {

src/auth/context.ts

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react';
+import type { PasswordStatus } from '../api/types';
 
 export interface PasswordChangeRequiredInfo {
   message: string;
@@ -6,19 +7,12 @@ export interface PasswordChangeRequiredInfo {
   rules?: string[];
 }
 
-/** `user.password_status` from /usr/login: set when a password change is coming due. */
-export interface PasswordStatus {
-  warn?: boolean;
-  days_left?: number;
-  change_required_from?: string;
-}
-
 export interface AuthValue {
   authed: boolean;
-  passwordStatus: PasswordStatus | null;
   isAdmin: boolean;
   roles: string[];
   userEmail: string | null;
+  passwordStatus: PasswordStatus | null;
   login: (email: string, password: string, orgId?: string) => Promise<void>;
   completePasswordChange: (email: string, currentPassword: string, newPassword: string, orgId?: string) => Promise<void>;
   logout: () => void;

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 (
+    <div className="relative min-h-screen overflow-hidden flex flex-col items-center justify-center gap-6 p-4 bg-app">
+      {/* Decorative curves */}
+      <svg
+        aria-hidden
+        className="pointer-events-none absolute top-0 left-0 w-[70%] max-w-[520px] h-auto"
+        viewBox="0 0 400 220"
+        fill="none"
+      >
+        <defs>
+          <linearGradient id="wave-top" x1="0" y1="0" x2="1" y2="1">
+            <stop offset="0" stopColor="#7fd49a" stopOpacity="0.85" />
+            <stop offset="1" stopColor="#d9f3e2" stopOpacity="0.2" />
+          </linearGradient>
+        </defs>
+        <path d="M0 0H400C340 40 300 120 190 150C110 172 50 150 0 210Z" fill="url(#wave-top)" />
+        <path d="M0 0H250C200 30 150 70 90 90C50 103 20 100 0 130Z" fill="#9adcae" fillOpacity="0.55" />
+      </svg>
+      <svg
+        aria-hidden
+        className="pointer-events-none absolute bottom-0 left-0 w-full h-auto"
+        viewBox="0 0 400 180"
+        preserveAspectRatio="none"
+        fill="none"
+      >
+        <defs>
+          <linearGradient id="wave-bottom" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0" stopColor="#d9f3e2" stopOpacity="0.4" />
+            <stop offset="1" stopColor="#6cc88b" stopOpacity="0.8" />
+          </linearGradient>
+        </defs>
+        <path d="M0 80C80 30 160 40 240 80C310 115 360 90 400 50V180H0Z" fill="url(#wave-bottom)" />
+        <path d="M0 130C90 100 170 110 250 135C320 157 370 140 400 115V180H0Z" fill="#4fb374" fillOpacity="0.55" />
+      </svg>
+
+      <div className="relative flex flex-col gap-2 items-center text-center">
+        <img src={logo} alt="Krishna Sales Logo" className="h-20 w-20 rounded-full object-contain shadow-md" />
+        <h1 className="m-0 text-3xl font-extrabold text-emerald-900 tracking-[-0.02em]">Krishna Sales</h1>
+      </div>
+      <Card className="relative w-full max-w-[420px] rounded-3xl shadow-xl shadow-emerald-900/10 border-white/60 bg-white/85 backdrop-blur p-6 sm:p-8">
+        <div className="mb-5">
+          <h2 className="m-0 text-2xl font-extrabold text-emerald-950">{title}</h2>
+          {subtitle && <p className="text-sm text-slate-600 mt-1 leading-relaxed">{subtitle}</p>}
+        </div>
+        {children}
+      </Card>
+    </div>
+  );
+}

src/components/auth/ChangePasswordModal.tsx

@@ -5,6 +5,7 @@ import { Button } from '../buttons/Button';
 import { PasswordRulesChecklist } from './PasswordRulesChecklist';
 import { changePassword } from '../../api/auth';
 import { usePasswordPolicy } from '../../hooks/usePasswordPolicy';
+import { cn } from '../../lib/cn';
 import {
   passwordMeetsPolicy,
   passwordTooLong,
@@ -17,6 +18,7 @@ interface ChangePasswordModalProps {
   userEmail?: string | null;
   userName?: string | null;
   onSuccessLogout: () => void;
+  required?: boolean;
 }
 
 export function ChangePasswordModal({
@@ -25,6 +27,7 @@ export function ChangePasswordModal({
   userEmail,
   userName,
   onSuccessLogout,
+  required = false,
 }: ChangePasswordModalProps) {
   const policy = usePasswordPolicy(open);
   const [currentPassword, setCurrentPassword] = useState('');
@@ -34,6 +37,12 @@ export function ChangePasswordModal({
   const [showNew, setShowNew] = useState(false);
   const [showConfirm, setShowConfirm] = useState(false);
 
+  const [fieldErrors, setFieldErrors] = useState<{
+    current?: boolean;
+    new?: boolean;
+    confirm?: boolean;
+  }>({});
+
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [done, setDone] = useState(false);
@@ -43,6 +52,7 @@ export function ChangePasswordModal({
     setCurrentPassword('');
     setNewPassword('');
     setConfirmPassword('');
+    setFieldErrors({});
     setError(null);
     onClose();
   };
@@ -50,35 +60,61 @@ export function ChangePasswordModal({
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setError(null);
+    setFieldErrors({});
 
-    if (!currentPassword || !newPassword || !confirmPassword) {
-      setError('All fields are required.');
+    const errors: { current?: boolean; new?: boolean; confirm?: boolean } = {};
+
+    if (!required && !currentPassword) {
+      errors.current = true;
+    }
+    if (!newPassword) {
+      errors.new = true;
+    }
+    if (!confirmPassword) {
+      errors.confirm = true;
+    }
+
+    if (Object.keys(errors).length > 0) {
+      setFieldErrors(errors);
+      if (!required && errors.current) {
+        setError('Current password is required.');
+      } else if (errors.new && errors.confirm) {
+        setError('Please enter and confirm your new password.');
+      } else if (errors.new) {
+        setError('New password is required.');
+      } else {
+        setError('Please confirm your new password.');
+      }
       return;
     }
 
     if (!passwordMeetsPolicy(policy, newPassword, { email: userEmail, name: userName })) {
+      setFieldErrors({ new: true });
       setError('New password does not meet all of the password requirements.');
       return;
     }
 
     if (passwordTooLong(newPassword)) {
+      setFieldErrors({ new: true });
       setError(`New password must be at most ${PASSWORD_MAX_CHARS} characters.`);
       return;
     }
 
     if (newPassword !== confirmPassword) {
+      setFieldErrors({ confirm: true });
       setError('New passwords do not match.');
       return;
     }
 
-    if (newPassword === currentPassword) {
+    if (!required && currentPassword && newPassword === currentPassword) {
+      setFieldErrors({ new: true });
       setError('New password must be different from your current password.');
       return;
     }
 
     setSubmitting(true);
     try {
-      await changePassword(currentPassword, newPassword);
+      await changePassword(required ? undefined : currentPassword, newPassword);
       setDone(true);
       setTimeout(() => {
         onSuccessLogout();
@@ -94,17 +130,23 @@ export function ChangePasswordModal({
     <Modal
       open={open}
       onClose={handleClose}
+      closable={!required}
       width="sm"
       title={
         <div className="flex items-center gap-2">
           <Lock className="text-emerald-600 size-5" />
-          <span>Change Password</span>
+          <span>{required ? 'Password Expired' : 'Change Password'}</span>
         </div>
       }
-      subtitle="Update your account password. You'll need to sign in again after."
+      subtitle={
+        required
+          ? 'Your password has expired. Please set a new password to continue.'
+          : "Update your account password. You'll need to sign in again after."
+      }
     >
-      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-        {/* Current Password */}
+      <form noValidate onSubmit={handleSubmit} className="flex flex-col gap-4">
+        {/* Current Password — only required for self-service change; hidden when must_change is active */}
+        {!required && (
           <div className="flex flex-col gap-1.5">
             <label className="text-xs font-semibold text-slate-700">
               Current password <span className="text-rose-500">*</span>
@@ -114,10 +156,18 @@ export function ChangePasswordModal({
                 type={showCurrent ? 'text' : 'password'}
                 autoComplete="current-password"
                 value={currentPassword}
-              onChange={(e) => setCurrentPassword(e.target.value)}
+                onChange={(e) => {
+                  setCurrentPassword(e.target.value);
+                  if (fieldErrors.current) setFieldErrors((prev) => ({ ...prev, current: false }));
+                  setError(null);
+                }}
                 disabled={submitting || done}
-              required
-              className="h-[42px] w-full px-3 pr-10 text-sm border border-slate-200 bg-slate-50/50 rounded-lg outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all text-slate-800"
+                className={cn(
+                  'h-[42px] w-full px-3 pr-10 text-sm rounded-lg outline-none transition-all',
+                  fieldErrors.current
+                    ? 'border-2 border-rose-500 bg-rose-50/20 text-rose-900 focus:ring-2 focus:ring-rose-400 focus:border-rose-500'
+                    : 'border border-slate-200 bg-slate-50/50 text-slate-800 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500'
+                )}
                 placeholder="Enter current password"
               />
               <button
@@ -131,6 +181,7 @@ export function ChangePasswordModal({
               </button>
             </div>
           </div>
+        )}
 
         {/* New Password */}
         <div className="flex flex-col gap-1.5">
@@ -142,10 +193,19 @@ export function ChangePasswordModal({
               type={showNew ? 'text' : 'password'}
               autoComplete="new-password"
               value={newPassword}
-              onChange={(e) => setNewPassword(e.target.value)}
+              onChange={(e) => {
+                setNewPassword(e.target.value);
+                if (fieldErrors.new) setFieldErrors((prev) => ({ ...prev, new: false }));
+                setError(null);
+              }}
               disabled={submitting || done}
-              required
-              className="h-[42px] w-full px-3 pr-10 text-sm border border-slate-200 bg-slate-50/50 rounded-lg outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all text-slate-800"
+              autoFocus={required}
+              className={cn(
+                'h-[42px] w-full px-3 pr-10 text-sm rounded-lg outline-none transition-all',
+                fieldErrors.new
+                  ? 'border-2 border-rose-500 bg-rose-50/20 text-rose-900 focus:ring-2 focus:ring-rose-400 focus:border-rose-500'
+                  : 'border border-slate-200 bg-slate-50/50 text-slate-800 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500'
+              )}
               placeholder="Enter new password"
             />
             <button
@@ -177,10 +237,18 @@ export function ChangePasswordModal({
               type={showConfirm ? 'text' : 'password'}
               autoComplete="new-password"
               value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
+              onChange={(e) => {
+                setConfirmPassword(e.target.value);
+                if (fieldErrors.confirm) setFieldErrors((prev) => ({ ...prev, confirm: false }));
+                setError(null);
+              }}
               disabled={submitting || done}
-              required
-              className="h-[42px] w-full px-3 pr-10 text-sm border border-slate-200 bg-slate-50/50 rounded-lg outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all text-slate-800"
+              className={cn(
+                'h-[42px] w-full px-3 pr-10 text-sm rounded-lg outline-none transition-all',
+                fieldErrors.confirm
+                  ? 'border-2 border-rose-500 bg-rose-50/20 text-rose-900 focus:ring-2 focus:ring-rose-400 focus:border-rose-500'
+                  : 'border border-slate-200 bg-slate-50/50 text-slate-800 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500'
+              )}
               placeholder="Re-enter new password"
             />
             <button
@@ -210,6 +278,16 @@ export function ChangePasswordModal({
         )}
 
         <div className="flex items-center justify-end gap-2.5 mt-2">
+          {required ? (
+            <Button
+              type="button"
+              variant="outline"
+              disabled={submitting || done}
+              onClick={onSuccessLogout}
+            >
+              Sign out
+            </Button>
+          ) : (
             <Button
               type="button"
               variant="outline"
@@ -218,6 +296,7 @@ export function ChangePasswordModal({
             >
               Cancel
             </Button>
+          )}
           <Button
             type="submit"
             disabled={submitting || done}

src/components/auth/PasswordExpiryWarningBanner.tsx

@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import { AlertTriangle, KeyRound, Lock } from 'lucide-react';
+import type { PasswordStatus } from '../../api/types';
+
+interface PasswordExpiryWarningBannerProps {
+  passwordStatus?: PasswordStatus | null;
+  onChangePassword: () => void;
+}
+
+export function PasswordExpiryWarningBanner({
+  passwordStatus,
+  onChangePassword,
+}: PasswordExpiryWarningBannerProps) {
+  const expiresAt = passwordStatus?.expires_at || 'session';
+  const dismissKey = `krishna_sales_mobile_dismissed_pw_warn_${expiresAt}`;
+
+  const [dismissed, setDismissed] = useState<boolean>(() => {
+    try {
+      return sessionStorage.getItem(dismissKey) === 'true';
+    } catch {
+      return false;
+    }
+  });
+
+  const isExpired = Boolean(
+    passwordStatus?.must_change ||
+      (passwordStatus?.days_left !== undefined && passwordStatus.days_left <= 0)
+  );
+
+  // Evaluate warning state: backend flags warn: true, or days_left is within warning window (<= 3)
+  const isWarnActive = Boolean(
+    isExpired ||
+      passwordStatus?.warn ||
+      (passwordStatus?.days_left !== undefined && passwordStatus.days_left <= 3)
+  );
+
+  // If not warning/expired, or if dismissed while NOT expired, hide banner.
+  // When expired, dismissal is disabled so the user must take action.
+  if (!isWarnActive || (dismissed && !isExpired)) return null;
+
+  const daysLeft = passwordStatus?.days_left;
+  let headline = 'Your password will expire soon.';
+  if (isExpired) {
+    headline = 'Your password has expired.';
+  } else if (daysLeft !== undefined) {
+    if (daysLeft === 1) {
+      headline = 'Your password will expire tomorrow.';
+    } else {
+      headline = `Your password will expire in ${daysLeft} days.`;
+    }
+  }
+
+  const handleDismiss = () => {
+    setDismissed(true);
+    try {
+      sessionStorage.setItem(dismissKey, 'true');
+    } catch {
+      /* storage unavailable */
+    }
+  };
+
+  if (isExpired) {
+    return (
+      <div
+        role="alert"
+        className="print:hidden shrink-0 px-3.5 py-2.5 sm:px-4 sm:py-2.5 bg-rose-50 border-b border-rose-200 text-xs text-rose-900 font-sans shadow-xs transition-all"
+      >
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2.5 sm:gap-4">
+          <div className="flex items-start sm:items-center gap-2.5 min-w-0 flex-1">
+            <Lock size={18} className="text-rose-600 shrink-0 mt-0.5 sm:mt-0" />
+            <div className="flex flex-col sm:flex-row sm:items-center gap-x-2 gap-y-0.5 min-w-0">
+              <strong className="font-semibold text-rose-950 text-xs sm:text-sm">{headline}</strong>
+              <span className="text-rose-800 text-2xs sm:text-xs">
+                You must update your password to continue using your account.
+              </span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2 shrink-0 self-end sm:self-center ml-7 sm:ml-0">
+            <button
+              type="button"
+              onClick={onChangePassword}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-rose-600 hover:bg-rose-700 active:bg-rose-800 text-white font-semibold rounded-md shadow-xs transition-colors cursor-pointer text-xs"
+            >
+              <KeyRound size={13} />
+              <span>Change Password Now</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      role="alert"
+      className="print:hidden shrink-0 px-3.5 py-2.5 sm:px-4 sm:py-2.5 bg-amber-50 border-b border-amber-200 text-xs text-amber-900 font-sans shadow-xs transition-all"
+    >
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2.5 sm:gap-4">
+        <div className="flex items-start sm:items-center gap-2.5 min-w-0 flex-1">
+          <AlertTriangle size={18} className="text-amber-600 shrink-0 mt-0.5 sm:mt-0" />
+          <div className="flex flex-col sm:flex-row sm:items-center gap-x-2 gap-y-0.5 min-w-0">
+            <strong className="font-semibold text-amber-950 text-xs sm:text-sm">{headline}</strong>
+            <span className="text-amber-800 text-2xs sm:text-xs">
+              Please update your password to maintain access to your account.
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0 self-end sm:self-center ml-7 sm:ml-0">
+          <button
+            type="button"
+            onClick={handleDismiss}
+            className="px-2.5 py-1.5 text-xs font-semibold text-amber-800 hover:text-amber-950 hover:bg-amber-100/80 active:bg-amber-200/80 rounded-md transition-colors cursor-pointer"
+          >
+            Later
+          </button>
+
+          <button
+            type="button"
+            onClick={onChangePassword}
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-amber-600 hover:bg-amber-700 active:bg-amber-800 text-white font-semibold rounded-md shadow-xs transition-colors cursor-pointer text-xs"
+          >
+            <KeyRound size={13} />
+            <span>Change Password</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+

src/components/reusable/Modal.tsx

@@ -22,12 +22,24 @@ export interface ModalProps {
   maxHeight?: string;
   actions?: ReactNode;
   children?: ReactNode;
+  /** Whether the modal can be dismissed via Esc, backdrop, or close button. @default true */
+  closable?: boolean;
 }
 
 /** Portal modal host — backdrop, Esc / click-out close, scroll-locked body. */
-export function Modal({ open, onClose, title, subtitle, width = 'md', maxHeight = 'max-h-[80dvh]', actions, children }: ModalProps) {
+export function Modal({
+  open,
+  onClose,
+  title,
+  subtitle,
+  width = 'md',
+  maxHeight = 'max-h-[80dvh]',
+  actions,
+  children,
+  closable = true,
+}: ModalProps) {
   useEffect(() => {
-    if (!open) return;
+    if (!open || !closable) return;
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') onClose();
     };
@@ -38,7 +50,7 @@ export function Modal({ open, onClose, title, subtitle, width = 'md', maxHeight
       document.removeEventListener('keydown', onKey);
       document.body.style.overflow = prev;
     };
-  }, [open, onClose]);
+  }, [open, onClose, closable]);
 
   if (!open) return null;
 
@@ -46,7 +58,7 @@ export function Modal({ open, onClose, title, subtitle, width = 'md', maxHeight
     <div
       className="fixed inset-0 z-[10000] flex items-end sm:items-center justify-center overflow-y-auto bg-black/40 sm:p-8"
       onMouseDown={(e) => {
-        if (e.target === e.currentTarget) onClose();
+        if (closable && e.target === e.currentTarget) onClose();
       }}
     >
       <div
@@ -69,13 +81,15 @@ export function Modal({ open, onClose, title, subtitle, width = 'md', maxHeight
           </div>
           <div className="flex items-center gap-2">
             {actions && <div className="flex items-center gap-2 mr-2">{actions}</div>}
+            {closable && (
               <button
                 onClick={onClose}
                 aria-label="Close"
-              className="shrink-0 -mr-1 p-1.5 rounded-md text-slate-800 hover:text-black hover:bg-slate-200 transition-colors"
+                className="shrink-0 -mr-1 p-1.5 rounded-md text-slate-800 hover:text-black hover:bg-slate-200 transition-colors cursor-pointer"
               >
                 <X size={22} strokeWidth={3} />
               </button>
+            )}
           </div>
         </header>
         <div className="shrink min-h-0 overflow-y-auto scrollbar-slim">

src/screens/ConsoleLayout.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { NavLink, Navigate, Outlet, useNavigate } from 'react-router-dom';
-import { LogOut, Menu, X, Database, Users, KeyRound, AlertTriangle } from 'lucide-react';
+import { LogOut, Menu, X, Database, Users, KeyRound } from 'lucide-react';
 import { cn } from '../lib/cn';
 import { useAuth } from '../auth/context';
 import { onAuthErrorAll, orderBookingClient } from '../api/clients';
@@ -8,6 +8,7 @@ import { SCREENS } from './tabs';
 import { routeConfig } from '../routesConfig';
 import { APP_VERSION } from '../api/config';
 import { ChangePasswordModal } from '../components/auth/ChangePasswordModal';
+import { PasswordExpiryWarningBanner } from '../components/auth/PasswordExpiryWarningBanner';
 import { NoticeStrips } from '../components/common/NoticeBanner';
 import logoUrl from '../assets/logo.png';
 import './screen.css';
@@ -25,13 +26,25 @@ const canAccessScreen = (key: string, isAdmin: boolean, roles: string[]) => {
 /** Auth-guarded shell: slim navy top bar + fixed bottom tab nav + routed <Outlet>. */
 export function ConsoleLayout() {
   const { authed, logout, isAdmin, roles: userRoles, userEmail, passwordStatus } = useAuth();
-  const [passwordDueDismissed, setPasswordDueDismissed] = useState(false);
   const navigate = useNavigate();
   const user = orderBookingClient.currentUser();
+  const effectivePasswordStatus = passwordStatus ?? user?.password_status;
+
+  const isExpired = Boolean(
+    effectivePasswordStatus?.must_change ||
+      (effectivePasswordStatus?.days_left !== undefined && effectivePasswordStatus.days_left <= 0)
+  );
 
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
 
+  // If password has expired, automatically move the user directly to change password
+  useEffect(() => {
+    if (isExpired) {
+      setIsChangePasswordOpen(true);
+    }
+  }, [isExpired]);
+
   // A 401 from any workflow client bounces back to login.
   useEffect(() => {
     onAuthErrorAll(() => {
@@ -62,38 +75,10 @@ export function ConsoleLayout() {
       </header>
 
       <NoticeStrips />
-
-      {passwordStatus?.warn && !passwordDueDismissed && (
-        <div
-          role="alert"
-          className="print:hidden shrink-0 flex items-center gap-2 px-4 py-2 bg-amber-50 border-b border-amber-200 text-xs text-amber-900"
-        >
-          <AlertTriangle size={16} className="shrink-0 text-amber-700" />
-          <span className="flex-1">
-            <strong>Password change due.</strong>{' '}
-            {typeof passwordStatus.days_left === 'number'
-              ? passwordStatus.days_left <= 0
-                ? 'Your password expires today.'
-                : `Your password expires in ${passwordStatus.days_left} day${passwordStatus.days_left === 1 ? '' : 's'}.`
-              : 'Please update it soon.'}
-          </span>
-          <button
-            type="button"
-            onClick={() => setIsChangePasswordOpen(true)}
-            className="font-semibold text-amber-900 underline cursor-pointer"
-          >
-            Change now
-          </button>
-          <button
-            type="button"
-            aria-label="Dismiss"
-            onClick={() => setPasswordDueDismissed(true)}
-            className="text-amber-700 hover:text-amber-900 cursor-pointer"
-          >
-            <X size={14} />
-          </button>
-        </div>
-      )}
+      <PasswordExpiryWarningBanner
+        passwordStatus={effectivePasswordStatus}
+        onChangePassword={() => setIsChangePasswordOpen(true)}
+      />
 
       <main className="flex-1 overflow-y-auto px-4 pt-4 pb-24">
         <div className="w-full max-w-[1200px] mx-auto flex flex-col gap-5">
@@ -261,7 +246,12 @@ export function ConsoleLayout() {
 
       <ChangePasswordModal
         open={isChangePasswordOpen}
-        onClose={() => setIsChangePasswordOpen(false)}
+        onClose={() => {
+          if (!isExpired) {
+            setIsChangePasswordOpen(false);
+          }
+        }}
+        required={isExpired}
         userEmail={userEmail || user?.email}
         userName={user?.name}
         onSuccessLogout={() => {

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<HTMLInputElement>(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 (
-    <div className="min-h-screen flex items-center justify-center p-4 bg-emerald-50">
-      <Card className="w-full max-w-[420px] shadow-lg border-emerald-100 bg-white p-6 sm:p-7">
-        <div className="flex flex-col gap-2 items-center mb-6 text-center">
-          <img src={logo} alt="Krishna Sales Logo" className="h-14 w-auto object-contain" />
-          <h1 className="text-xl font-extrabold text-emerald-950 tracking-tight">
-            {done
+  const title = done
     ? 'Password Reset Complete'
     : step === 'email'
     ? 'Forgot Password'
     : step === 'code'
     ? 'Enter Verification Code'
-              : 'Create New Password'}
-          </h1>
-          <p className="text-xs text-slate-500 max-w-[340px] leading-relaxed">
-            {done
+    : '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.'}
-          </p>
-        </div>
+    : 'Choose a strong new password that meets the security policy.';
 
+  return (
+    <AuthShell title={title} subtitle={subtitle}>
         {error && (
           <div className="mb-4 p-3 rounded-lg bg-rose-50 border border-rose-200 text-rose-700 text-xs flex items-start gap-2">
             <AlertCircle size={16} className="shrink-0 mt-0.5" />
@@ -175,35 +173,33 @@ export function ForgotPasswordPage() {
               <CheckCircle2 size={36} className="text-emerald-600" />
               <span className="font-semibold">{message}</span>
             </div>
-            <Button type="button" full onClick={goToLogin} className="bg-emerald-600 hover:bg-emerald-700 text-white">
+            <Button type="button" full onClick={goToLogin} className="mt-1 !rounded-full !h-12 !text-base bg-gradient-to-r from-[#3aa75a] to-[#0f5a30] hover:brightness-110 text-white border-transparent shadow-lg shadow-emerald-900/20">
               Go to Login
             </Button>
           </div>
         ) : step === 'email' ? (
           /* Step 1: Email Form */
           <form onSubmit={handleEmailSubmit} className="flex flex-col gap-4">
-            <label className="flex flex-col gap-1.5 font-sans">
-              <span className="text-sm font-semibold text-emerald-800 flex items-center gap-1.5">
-                <Mail size={15} />
-                Email address <span className="text-emerald-500">*</span>
-              </span>
+            <div className="relative flex items-center">
+              <Mail size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
               <input
+                aria-label="Email address"
                 type="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
                 autoFocus
                 disabled={submitting}
-                className="h-[42px] px-3 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400 text-sm"
-                placeholder="you@example.com"
+                className="h-12 w-full pl-11 pr-4 rounded-full border border-slate-200 bg-slate-100/80 outline-none focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400 transition-all text-slate-900 placeholder:text-slate-500 text-sm"
+                placeholder="Email"
               />
-            </label>
+            </div>
 
             <Button
               type="submit"
               full
               disabled={submitting}
-              className="mt-2 bg-emerald-600 hover:bg-emerald-700 text-white border-transparent"
+              className="mt-1 !rounded-full !h-12 !text-base bg-gradient-to-r from-[#3aa75a] to-[#0f5a30] hover:brightness-110 text-white border-transparent shadow-lg shadow-emerald-900/20"
             >
               {submitting ? 'Sending code…' : 'Send Reset Code'}
             </Button>
@@ -219,12 +215,11 @@ export function ForgotPasswordPage() {
         ) : step === 'code' ? (
           /* Step 2: OTP Verification Form */
           <form onSubmit={handleCodeSubmit} className="flex flex-col gap-4">
-            <label className="flex flex-col gap-1.5 font-sans">
-              <span className="text-sm font-semibold text-emerald-800 flex items-center gap-1.5">
-                <KeyRound size={15} />
-                Reset Code <span className="text-emerald-500">*</span>
-              </span>
+            <div className="relative flex items-center">
+              <KeyRound size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
               <input
+                ref={codeInputRef}
+                aria-label="Reset code"
                 type="text"
                 inputMode="numeric"
                 autoComplete="one-time-code"
@@ -234,16 +229,16 @@ export function ForgotPasswordPage() {
                 required
                 autoFocus
                 disabled={submitting}
-                className="h-[46px] px-3 text-center text-xl font-bold tracking-[0.3em] border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400"
+                className="h-12 w-full px-11 text-center text-xl font-bold tracking-[0.3em] rounded-full border border-slate-200 bg-slate-100/80 outline-none focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400 transition-all text-slate-900 placeholder:text-slate-400"
                 placeholder="123456"
               />
-            </label>
+            </div>
 
             <Button
               type="submit"
               full
               disabled={submitting || code.length !== CODE_LENGTH}
-              className="mt-2 bg-emerald-600 hover:bg-emerald-700 text-white border-transparent"
+              className="mt-1 !rounded-full !h-12 !text-base bg-gradient-to-r from-[#3aa75a] to-[#0f5a30] hover:brightness-110 text-white border-transparent shadow-lg shadow-emerald-900/20"
             >
               {submitting ? 'Verifying…' : 'Verify Code'}
             </Button>
@@ -274,11 +269,10 @@ export function ForgotPasswordPage() {
           /* Step 3: New Password Form */
           <form onSubmit={handlePasswordSubmit} className="flex flex-col gap-4">
             <div className="flex flex-col gap-1.5 font-sans">
-              <span className="text-sm font-semibold text-emerald-800">
-                New password <span className="text-emerald-500">*</span>
-              </span>
               <div className="relative flex items-center">
+                <Lock size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
                 <input
+                  aria-label="New password"
                   type={showPassword ? 'text' : 'password'}
                   autoComplete="new-password"
                   value={password}
@@ -286,45 +280,44 @@ export function ForgotPasswordPage() {
                   required
                   autoFocus
                   disabled={submitting}
-                  className="h-[42px] w-full px-3 pr-10 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400 text-sm"
-                  placeholder="Enter new password"
+                  className="h-12 w-full pl-11 pr-11 rounded-full border border-slate-200 bg-slate-100/80 outline-none focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400 transition-all text-slate-900 placeholder:text-slate-500 text-sm"
+                  placeholder="New password"
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword((s) => !s)}
                   disabled={submitting}
                   tabIndex={-1}
-                  className="absolute right-3 text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"
+                  className="absolute right-4 text-slate-600 hover:text-slate-800 transition-colors cursor-pointer"
                 >
-                  {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                  {showPassword ? <Eye size={18} /> : <EyeOff size={18} />}
                 </button>
               </div>
               <PasswordRulesChecklist policy={policy} password={password} email={email} className="mt-1" />
             </div>
 
             <div className="flex flex-col gap-1.5 font-sans">
-              <span className="text-sm font-semibold text-emerald-800">
-                Confirm new password <span className="text-emerald-500">*</span>
-              </span>
               <div className="relative flex items-center">
+                <Lock size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
                 <input
+                  aria-label="Confirm new password"
                   type={showConfirm ? 'text' : 'password'}
                   autoComplete="new-password"
                   value={confirm}
                   onChange={(e) => setConfirm(e.target.value)}
                   required
                   disabled={submitting}
-                  className="h-[42px] w-full px-3 pr-10 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400 text-sm"
-                  placeholder="Re-enter new password"
+                  className="h-12 w-full pl-11 pr-11 rounded-full border border-slate-200 bg-slate-100/80 outline-none focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400 transition-all text-slate-900 placeholder:text-slate-500 text-sm"
+                  placeholder="Confirm new password"
                 />
                 <button
                   type="button"
                   onClick={() => setShowConfirm((s) => !s)}
                   disabled={submitting}
                   tabIndex={-1}
-                  className="absolute right-3 text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"
+                  className="absolute right-4 text-slate-600 hover:text-slate-800 transition-colors cursor-pointer"
                 >
-                  {showConfirm ? <EyeOff size={16} /> : <Eye size={16} />}
+                  {showConfirm ? <Eye size={18} /> : <EyeOff size={18} />}
                 </button>
               </div>
             </div>
@@ -333,7 +326,7 @@ export function ForgotPasswordPage() {
               type="submit"
               full
               disabled={submitting}
-              className="mt-2 bg-emerald-600 hover:bg-emerald-700 text-white border-transparent"
+              className="mt-1 !rounded-full !h-12 !text-base bg-gradient-to-r from-[#3aa75a] to-[#0f5a30] hover:brightness-110 text-white border-transparent shadow-lg shadow-emerald-900/20"
             >
               {submitting ? 'Updating password…' : 'Set New Password'}
             </Button>
@@ -351,7 +344,6 @@ export function ForgotPasswordPage() {
             </button>
           </form>
         )}
-      </Card>
-    </div>
+    </AuthShell>
   );
 }

src/screens/LoginPage.tsx

@@ -1,17 +1,17 @@
 import { useState, type FormEvent } from 'react';
 import { Navigate, useNavigate, Link } from 'react-router-dom';
-import { Eye, EyeOff, Lock, AlertCircle, ArrowLeft } from 'lucide-react';
+import { Eye, EyeOff, Lock, Mail, AlertCircle, ArrowLeft, ArrowRight } from 'lucide-react';
 import { useAuth, type PasswordChangeRequiredInfo } from '../auth/context';
 import { Button } from '../components/buttons';
-import { Card } from '../components/reusable';
+import { AuthShell } from '../components/auth/AuthShell';
 import { PasswordRulesChecklist } from '../components/auth/PasswordRulesChecklist';
 import { usePasswordPolicy } from '../hooks/usePasswordPolicy';
+import { cn } from '../lib/cn';
 import {
   passwordMeetsPolicy,
   passwordTooLong,
   PASSWORD_MAX_CHARS,
 } from '../utils/passwordPolicy';
-import logo from '../assets/logo.png';
 
 /** Login gate. Redirects to /daily once authenticated. */
 export function LoginPage() {
@@ -30,20 +30,45 @@ export function LoginPage() {
   const [showNewPassword, setShowNewPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
+  const [fieldErrors, setFieldErrors] = useState<{
+    email?: boolean;
+    password?: boolean;
+    newPassword?: boolean;
+    confirmPassword?: boolean;
+  }>({});
+
   const policy = usePasswordPolicy(!!changeRequired);
 
   if (authed) return <Navigate to="/daily" replace />;
 
   async function submit(e: FormEvent) {
     e.preventDefault();
-    setBusy(true);
     setError(null);
+    setFieldErrors({});
+
+    const errs: typeof fieldErrors = {};
+    if (!email) errs.email = true;
+    if (!password) errs.password = true;
+
+    if (Object.keys(errs).length > 0) {
+      setFieldErrors(errs);
+      setError(
+        errs.email && errs.password
+          ? 'Please enter both your email and password.'
+          : errs.email
+          ? 'Email address is required.'
+          : 'Password is required.'
+      );
+      return;
+    }
+
+    setBusy(true);
     try {
       await login(email, password);
       navigate('/daily', { replace: true });
     } catch (err: any) {
       // Backend signals that password policy or expiry requires a new password first
-      if (err?.code === 'password_change_required' || err?.data?.code === 'password_change_required' || err?.status === 403 && err?.reason === 'policy') {
+      if (err?.code === 'password_change_required' || err?.data?.code === 'password_change_required' || (err?.status === 403 && err?.reason === 'policy')) {
         setChangeRequired({
           message: err?.message || err?.data?.error || 'A new password policy is in effect. Please choose a new password to continue.',
           reason: err?.reason || err?.data?.reason,
@@ -61,28 +86,44 @@ export function LoginPage() {
   async function handleChangePasswordSubmit(e: FormEvent) {
     e.preventDefault();
     setError(null);
+    setFieldErrors({});
 
-    if (!newPassword || !confirmPassword) {
-      setError('Please fill in both password fields.');
+    const errs: typeof fieldErrors = {};
+    if (!newPassword) errs.newPassword = true;
+    if (!confirmPassword) errs.confirmPassword = true;
+
+    if (Object.keys(errs).length > 0) {
+      setFieldErrors(errs);
+      setError(
+        errs.newPassword && errs.confirmPassword
+          ? 'Please enter and confirm your new password.'
+          : errs.newPassword
+          ? 'New password is required.'
+          : 'Please confirm your new password.'
+      );
       return;
     }
 
     if (!passwordMeetsPolicy(policy, newPassword, { email })) {
+      setFieldErrors({ newPassword: true });
       setError('New password does not meet all of the password requirements.');
       return;
     }
 
     if (passwordTooLong(newPassword)) {
+      setFieldErrors({ newPassword: true });
       setError(`New password must be at most ${PASSWORD_MAX_CHARS} characters.`);
       return;
     }
 
     if (newPassword !== confirmPassword) {
+      setFieldErrors({ confirmPassword: true });
       setError('New passwords do not match.');
       return;
     }
 
     if (newPassword === password) {
+      setFieldErrors({ newPassword: true });
       setError('New password must be different from your current password.');
       return;
     }
@@ -102,24 +143,15 @@ export function LoginPage() {
     setChangeRequired(null);
     setNewPassword('');
     setConfirmPassword('');
+    setFieldErrors({});
     setError(null);
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center p-4 bg-emerald-50">
-      <Card className="w-full max-w-[420px] shadow-lg border-emerald-100 bg-white p-6 sm:p-7">
-        <div className="flex flex-col gap-2 items-center mb-6 text-center">
-          <img src={logo} alt="Krishna Sales Logo" className="h-16 w-auto object-contain" />
-          <h1 className="m-0 text-2xl font-extrabold text-emerald-900 tracking-[-0.02em]">
-            {changeRequired ? 'Set a New Password' : 'Krishna Sales'}
-          </h1>
-          {changeRequired && (
-            <p className="text-xs text-slate-600 mt-1 max-w-[340px] leading-relaxed">
-              {changeRequired.message}
-            </p>
-          )}
-        </div>
-
+    <AuthShell
+      title={changeRequired ? 'Set a New Password' : 'Welcome Back'}
+      subtitle={changeRequired ? changeRequired.message : 'Sign in to continue to Krishna Sales'}
+    >
         {error && (
           <div className="mb-4 text-xs text-rose-700 bg-rose-50 border border-rose-200 p-3 rounded-lg flex items-start gap-2">
             <AlertCircle size={16} className="shrink-0 mt-0.5" />
@@ -129,7 +161,7 @@ export function LoginPage() {
 
         {changeRequired ? (
           /* Forced Password Change Form */
-          <form onSubmit={handleChangePasswordSubmit} className="flex flex-col gap-4">
+          <form noValidate onSubmit={handleChangePasswordSubmit} className="flex flex-col gap-4">
             <div className="p-3 bg-amber-50/80 border border-amber-200 rounded-lg flex items-start gap-2.5 text-xs text-amber-900">
               <Lock size={16} className="text-amber-700 shrink-0 mt-0.5" />
               <span>
@@ -139,29 +171,36 @@ export function LoginPage() {
 
             {/* New Password */}
             <div className="flex flex-col gap-1.5 font-sans">
-              <label className="text-xs font-semibold text-slate-700">
-                New password <span className="text-emerald-500">*</span>
-              </label>
               <div className="relative flex items-center">
+                <Lock size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
                 <input
                   type={showNewPassword ? 'text' : 'password'}
                   autoComplete="new-password"
                   value={newPassword}
-                  onChange={(e) => setNewPassword(e.target.value)}
-                  required
+                  onChange={(e) => {
+                    setNewPassword(e.target.value);
+                    if (fieldErrors.newPassword) setFieldErrors((prev) => ({ ...prev, newPassword: false }));
+                    setError(null);
+                  }}
                   autoFocus
                   disabled={busy}
-                  className="h-[42px] w-full px-3 pr-10 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400 text-sm"
-                  placeholder="Enter new password"
+                  className={cn(
+                    'h-12 w-full pl-11 pr-11 rounded-full outline-none transition-all text-sm',
+                    fieldErrors.newPassword
+                      ? 'border-2 border-rose-500 bg-rose-50/20 text-rose-900 focus:ring-2 focus:ring-rose-400'
+                      : 'border border-slate-200 bg-slate-100/80 text-slate-900 placeholder:text-slate-500 focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400'
+                  )}
+                  aria-label="New password"
+                  placeholder="New password"
                 />
                 <button
                   type="button"
                   onClick={() => setShowNewPassword((s) => !s)}
                   disabled={busy}
                   tabIndex={-1}
-                  className="absolute right-3 text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"
+                  className="absolute right-4 text-slate-600 hover:text-slate-800 transition-colors cursor-pointer"
                 >
-                  {showNewPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                  {showNewPassword ? <Eye size={18} /> : <EyeOff size={18} />}
                 </button>
               </div>
               <PasswordRulesChecklist
@@ -174,18 +213,25 @@ export function LoginPage() {
 
             {/* Confirm New Password */}
             <div className="flex flex-col gap-1.5 font-sans">
-              <label className="text-xs font-semibold text-slate-700">
-                Confirm new password <span className="text-emerald-500">*</span>
-              </label>
               <div className="relative flex items-center">
+                <Lock size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
                 <input
                   type={showConfirmPassword ? 'text' : 'password'}
                   autoComplete="new-password"
                   value={confirmPassword}
-                  onChange={(e) => setConfirmPassword(e.target.value)}
-                  required
+                  onChange={(e) => {
+                    setConfirmPassword(e.target.value);
+                    if (fieldErrors.confirmPassword) setFieldErrors((prev) => ({ ...prev, confirmPassword: false }));
+                    setError(null);
+                  }}
                   disabled={busy}
-                  className="h-[42px] w-full px-3 pr-10 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400 text-sm"
+                  className={cn(
+                    'h-12 w-full pl-11 pr-11 rounded-full outline-none transition-all text-sm',
+                    fieldErrors.confirmPassword
+                      ? 'border-2 border-rose-500 bg-rose-50/20 text-rose-900 focus:ring-2 focus:ring-rose-400'
+                      : 'border border-slate-200 bg-slate-100/80 text-slate-900 placeholder:text-slate-500 focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400'
+                  )}
+                  aria-label="Confirm new password"
                   placeholder="Confirm new password"
                 />
                 <button
@@ -193,9 +239,9 @@ export function LoginPage() {
                   onClick={() => setShowConfirmPassword((s) => !s)}
                   disabled={busy}
                   tabIndex={-1}
-                  className="absolute right-3 text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"
+                  className="absolute right-4 text-slate-600 hover:text-slate-800 transition-colors cursor-pointer"
                 >
-                  {showConfirmPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                  {showConfirmPassword ? <Eye size={18} /> : <EyeOff size={18} />}
                 </button>
               </div>
             </div>
@@ -204,9 +250,9 @@ export function LoginPage() {
               type="submit"
               full
               disabled={busy}
-              className="mt-2 bg-emerald-600 hover:bg-emerald-700 text-white border-transparent"
+              className="mt-1 !rounded-full !h-12 !text-base bg-gradient-to-r from-[#3aa75a] to-[#0f5a30] hover:brightness-110 text-white border-transparent shadow-lg shadow-emerald-900/20"
             >
-              {busy ? 'Updating & Signing in…' : 'Update Password & Sign In'}
+              {busy ? 'Updating & Signing in…' : (<>Update Password & Sign In <ArrowRight size={18} className="ml-2" /></>)}
             </Button>
 
             <button
@@ -221,68 +267,80 @@ export function LoginPage() {
           </form>
         ) : (
           /* Standard Login Form */
-          <form onSubmit={submit} className="flex flex-col gap-4">
-            <label className="flex flex-col gap-1.5 font-sans">
-              <span className="text-sm font-semibold text-emerald-800">
-                Email <span className="text-emerald-500">*</span>
-              </span>
+          <form noValidate onSubmit={submit} className="flex flex-col gap-4">
+            <div className="relative flex items-center">
+              <Mail size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
               <input
                 type="email"
+                aria-label="Email"
                 value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
+                onChange={(e) => {
+                  setEmail(e.target.value);
+                  if (fieldErrors.email) setFieldErrors((prev) => ({ ...prev, email: false }));
+                  setError(null);
+                }}
                 autoFocus
                 disabled={busy}
-                className="h-[42px] px-3 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400 text-sm"
-                placeholder="Enter your email"
+                className={cn(
+                  'h-12 w-full pl-11 pr-4 rounded-full outline-none transition-all text-sm',
+                  fieldErrors.email
+                    ? 'border-2 border-rose-500 bg-rose-50/20 text-rose-900 focus:ring-2 focus:ring-rose-400'
+                    : 'border border-slate-200 bg-slate-100/80 text-slate-900 placeholder:text-slate-500 focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400'
+                )}
+                placeholder="Email"
               />
-            </label>
-
-            <div className="flex flex-col gap-1.5 font-sans">
-              <div className="flex items-center justify-between">
-                <span className="text-sm font-semibold text-emerald-800">
-                  Password <span className="text-emerald-500">*</span>
-                </span>
-                <Link
-                  to="/forgot-password"
-                  className="text-xs font-semibold text-emerald-700 hover:text-emerald-900 transition-colors"
-                >
-                  Forgot password?
-                </Link>
             </div>
+
+            <div className="flex flex-col gap-3">
               <div className="relative flex items-center">
+                <Lock size={18} className="absolute left-4 text-slate-500 pointer-events-none" />
                 <input
                   type={showPassword ? 'text' : 'password'}
+                  aria-label="Password"
                   value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  required
+                  onChange={(e) => {
+                    setPassword(e.target.value);
+                    if (fieldErrors.password) setFieldErrors((prev) => ({ ...prev, password: false }));
+                    setError(null);
+                  }}
                   disabled={busy}
-                  className="h-[42px] w-full px-3 pr-10 border border-emerald-200 bg-emerald-50/50 rounded-md outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 transition-all text-emerald-900 placeholder:text-slate-400 text-sm"
-                  placeholder="Enter your password"
+                  className={cn(
+                    'h-12 w-full pl-11 pr-11 rounded-full outline-none transition-all text-sm',
+                    fieldErrors.password
+                      ? 'border-2 border-rose-500 bg-rose-50/20 text-rose-900 focus:ring-2 focus:ring-rose-400'
+                      : 'border border-slate-200 bg-slate-100/80 text-slate-900 placeholder:text-slate-500 focus:ring-2 focus:ring-emerald-300 focus:border-emerald-400'
+                  )}
+                  placeholder="Password"
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword((s) => !s)}
                   disabled={busy}
                   tabIndex={-1}
-                  className="absolute right-3 text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"
+                  aria-label={showPassword ? 'Hide password' : 'Show password'}
+                  className="absolute right-4 text-slate-600 hover:text-slate-800 transition-colors cursor-pointer"
                 >
-                  {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                  {showPassword ? <Eye size={18} /> : <EyeOff size={18} />}
                 </button>
               </div>
+              <Link
+                to="/forgot-password"
+                className="self-end text-sm font-medium text-emerald-900 hover:text-emerald-700 transition-colors"
+              >
+                Forgot password?
+              </Link>
             </div>
 
             <Button
               type="submit"
               full
               disabled={busy}
-              className="mt-2 bg-emerald-600 hover:bg-emerald-700 text-white border-transparent"
+              className="mt-1 !rounded-full !h-12 !text-base bg-gradient-to-r from-[#3aa75a] to-[#0f5a30] hover:brightness-110 text-white border-transparent shadow-lg shadow-emerald-900/20"
             >
-              {busy ? 'Signing in…' : 'Sign in'}
+              {busy ? 'Signing in…' : (<>Sign In <ArrowRight size={18} className="ml-2" /></>)}
             </Button>
           </form>
         )}
-      </Card>
-    </div>
+    </AuthShell>
   );
 }