password expiry policy

README.md

@@ -14,6 +14,7 @@ This is a Progressive Web App (Pwa) built for the Krishna Sales team.
 - **Platform maintenance notices** (`src/api/notices.ts`): polls `GET /usr/notices` every 30s. `announced` shows a dismissible strip, `draining` keeps the strip and refuses writes (`PLATFORM_MAINTENANCE` 503), `closed` shows a full-screen block that lifts on its own.
 - Other 503s show an "unavailable" strip without blocking writes.
 - Logout now clears per-user data but keeps session-protocol keys instead of `localStorage.clear()`.
+- **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.
 
 ## Sitemap
 

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({
+    body: JSON.stringify(payload),
-      current_password: currentPassword,
-      new_password: newPassword,
-    }),
   });
 
   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);
   }

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;
@@ -19,6 +26,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 } from './context';
+import type { PasswordStatus } from '../api/types';
 import { sessionClient } from '../api/session';
 
 export function AuthProvider({ children }: { children: ReactNode }) {
@@ -14,6 +15,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const [roles, setRoles] = useState<string[]>(() => {
     return orderBookingClient.currentUser()?.roles ?? [];
   });
+  const [passwordStatus, setPasswordStatus] = useState<PasswordStatus | null>(() => {
+    return orderBookingClient.currentUser()?.password_status ?? null;
+  });
 
   // Keep React in step with the session: refresh/idle expiry, a sign-out or a
   // different user signing in from another tab.
@@ -25,6 +29,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         setUserEmail(null);
         setIsAdmin(false);
         setRoles([]);
+        setPasswordStatus(null);
       } else if (type === 'user-switched') {
         // This tab's state belongs to the previous user.
         window.location.reload();
@@ -38,10 +43,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   // If we are authenticated but don't have isAdmin from cache, we might want to fetch it
   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]);
@@ -58,6 +64,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     localStorage.setItem('krishna_sales_is_admin', userIsAdmin ? 'true' : 'false');
     setRoles(userRoles);
     localStorage.setItem('krishna_sales_roles', JSON.stringify(userRoles));
+    if (res.user?.password_status) {
+      setPasswordStatus(res.user.password_status);
+    } else {
+      setPasswordStatus(null);
+    }
   };
 
   const value: AuthValue = {
@@ -65,6 +76,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     isAdmin,
     roles,
     userEmail,
+    passwordStatus,
     login: async (email, password, orgId) => {
       const res = await loginAll(email, password, orgId);
       applyUserSession(res);
@@ -79,6 +91,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       setUserEmail(null);
       setIsAdmin(false);
       setRoles([]);
+      setPasswordStatus(null);
       // Drop this user's cached data (incl. form drafts) but keep the session
       // protocol keys (sm_*): the pending-logout marker must survive until the server hears it.
       try {

src/auth/context.ts

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react';
+import type { PasswordStatus } from '../api/types';
 
 export interface PasswordChangeRequiredInfo {
   message: string;
@@ -11,6 +12,7 @@ export interface AuthValue {
   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/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) {
+    const errors: { current?: boolean; new?: boolean; confirm?: boolean } = {};
-      setError('All fields are required.');
+
+    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">
+      <form noValidate onSubmit={handleSubmit} className="flex flex-col gap-4">
-        {/* Current Password */}
+        {/* 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={cn(
-              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"
+                  '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
+              autoFocus={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.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={cn(
-              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"
+                '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,127 @@
+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_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 flex flex-wrap sm:flex-nowrap items-center justify-between gap-2.5 sm:gap-4 px-4 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 items-center gap-2.5 min-w-0 flex-1">
+          <Lock size={16} className="text-rose-600 shrink-0" />
+          <div className="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 min-w-0">
+            <strong className="font-semibold text-rose-950">{headline}</strong>
+            <span className="text-rose-800">
+              You must update your password to continue using your account.
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0 ml-auto sm:ml-0">
+          <button
+            type="button"
+            onClick={onChangePassword}
+            className="inline-flex items-center gap-1.5 px-3 py-1 bg-rose-600 hover:bg-rose-700 active:bg-rose-800 text-white font-medium rounded-md shadow-xs transition-colors cursor-pointer text-xs"
+          >
+            <KeyRound size={13} />
+            <span>Change Password Now</span>
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      role="alert"
+      className="print:hidden shrink-0 flex flex-wrap sm:flex-nowrap items-center justify-between gap-2.5 sm:gap-4 px-4 py-2 bg-amber-50 border-b border-amber-200 text-xs text-amber-900 font-sans shadow-xs transition-all"
+    >
+      <div className="flex items-center gap-2.5 min-w-0 flex-1">
+        <AlertTriangle size={16} className="text-amber-600 shrink-0" />
+        <div className="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 min-w-0">
+          <strong className="font-semibold text-amber-950">{headline}</strong>
+          <span className="text-amber-800">
+            Please update your password to maintain access to your account.
+          </span>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 shrink-0 ml-auto sm:ml-0">
+        <button
+          type="button"
+          onClick={handleDismiss}
+          className="px-2.5 py-1 text-xs font-medium text-amber-800 hover:text-amber-950 hover:bg-amber-100/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 bg-amber-600 hover:bg-amber-700 active:bg-amber-800 text-white font-medium rounded-md shadow-xs transition-colors cursor-pointer text-xs"
+        >
+          <KeyRound size={13} />
+          <span>Change Password</span>
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/reusable/Modal.tsx

@@ -15,6 +15,8 @@ export interface ModalProps {
   width?: ModalWidth;
   actions?: ReactNode;
   children?: ReactNode;
+  /** Whether the modal can be dismissed via Esc, backdrop, or close button. @default true */
+  closable?: boolean;
 }
 
 const WIDTH_CLASSES: Record<ModalWidth, string> = {
@@ -25,9 +27,18 @@ const WIDTH_CLASSES: Record<ModalWidth, string> = {
 };
 
 /** Portal modal host — backdrop, Esc / click-out close, scroll-locked body. */
-export function Modal({ open, onClose, title, subtitle, width = 'md', actions, children }: ModalProps) {
+export function Modal({
+  open,
+  onClose,
+  title,
+  subtitle,
+  width = 'md',
+  actions,
+  children,
+  closable = true,
+}: ModalProps) {
   useEffect(() => {
-    if (!open) return;
+    if (!open || !closable) return;
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') onClose();
     };
@@ -38,7 +49,7 @@ export function Modal({ open, onClose, title, subtitle, width = 'md', actions, c
       document.removeEventListener('keydown', onKey);
       document.body.style.overflow = prev;
     };
-  }, [open, onClose]);
+  }, [open, onClose, closable]);
 
   if (!open) return null;
 
@@ -46,7 +57,7 @@ export function Modal({ open, onClose, title, subtitle, width = 'md', actions, c
     <div
       className="fixed inset-0 z-[10000] flex items-center justify-center p-4 sm:p-6 overflow-hidden bg-black/50 backdrop-blur-sm transition-opacity"
       onMouseDown={(e) => {
-        if (e.target === e.currentTarget) onClose();
+        if (closable && e.target === e.currentTarget) onClose();
       }}
     >
       <style>{`
@@ -74,13 +85,15 @@ export function Modal({ open, onClose, title, subtitle, width = 'md', actions, c
           </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 -mt-1 p-1.5 rounded-md text-faint hover:text-strong hover:bg-black/5"
+                className="shrink-0 -mr-1 -mt-1 p-1.5 rounded-md text-faint hover:text-strong hover:bg-black/5 cursor-pointer"
               >
                 <X size={18} />
               </button>
+            )}
           </div>
         </header>
         <div className="flex-1 min-h-0 overflow-y-auto p-5 scrollbar-slim">{children}</div>

src/screens/ConsoleLayout.tsx

@@ -7,6 +7,7 @@ import { onAuthErrorAll, orderBookingClient } from '../api/clients';
 import { APP_VERSION } from '../api/config';
 import { NoticeStrips } from '../components/common/NoticeBanner';
 import { ChangePasswordModal } from '../components/auth/ChangePasswordModal';
+import { PasswordExpiryWarningBanner } from '../components/auth/PasswordExpiryWarningBanner';
 
 import { REPORT_MAP } from './ReportPage';
 
@@ -26,13 +27,26 @@ const PATH_LABELS: Record<string, string> = {
 
 /** Auth-guarded shell: navy top bar + tab nav + routed <Outlet>. */
 export function ConsoleLayout() {
-  const { authed, logout, isAdmin, roles: userRoles, userEmail } = useAuth();
+  const { authed, logout, isAdmin, roles: userRoles, userEmail, passwordStatus } = useAuth();
   const navigate = useNavigate();
   const location = useLocation();
   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 [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
 
+  // If password has expired, automatically move the user directly to change password
+  useEffect(() => {
+    if (isExpired) {
+      setIsChangePasswordOpen(true);
+    }
+  }, [isExpired]);
+
   const isReportsActive = location.pathname.startsWith('/reports');
 
   // A 401 from any workflow client bounces back to login.
@@ -187,6 +201,10 @@ export function ConsoleLayout() {
       </header>
 
       <NoticeStrips />
+      <PasswordExpiryWarningBanner
+        passwordStatus={effectivePasswordStatus}
+        onChangePassword={() => setIsChangePasswordOpen(true)}
+      />
 
       <main className="flex-1 overflow-y-auto p-6">
         <div className="max-w-[1240px] w-full mx-auto flex flex-col gap-5">
@@ -196,7 +214,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/LoginPage.tsx

@@ -7,6 +7,7 @@ import { Card } from '../components/reusable';
 import { getDefaultRoute } from '../auth/ProtectedRoute';
 import { PasswordRulesChecklist } from '../components/auth/PasswordRulesChecklist';
 import { usePasswordPolicy } from '../hooks/usePasswordPolicy';
+import { cn } from '../lib/cn';
 import {
   passwordMeetsPolicy,
   passwordTooLong,
@@ -31,14 +32,39 @@ 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={getDefaultRoute(roles, isAdmin)} 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('/', { replace: true });
@@ -69,28 +95,38 @@ export function LoginPage() {
   async function handleChangePasswordSubmit(e: FormEvent) {
     e.preventDefault();
     setError(null);
+    setFieldErrors({});
 
-    if (!newPassword || !confirmPassword) {
+    const errs: typeof fieldErrors = {};
+    if (!newPassword) errs.newPassword = true;
+    if (!confirmPassword) errs.confirmPassword = true;
+
+    if (Object.keys(errs).length > 0) {
+      setFieldErrors(errs);
       setError('Please fill in both password fields.');
       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;
     }
@@ -110,6 +146,7 @@ export function LoginPage() {
     setChangeRequired(null);
     setNewPassword('');
     setConfirmPassword('');
+    setFieldErrors({});
     setError(null);
   }
 
@@ -137,7 +174,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>
@@ -155,11 +192,19 @@ export function LoginPage() {
                   type={showNewPassword ? 'text' : 'password'}
                   autoComplete="new-password"
                   value={newPassword}
-                  onChange={(e) => setNewPassword(e.target.value)}
+                  onChange={(e) => {
-                  required
+                    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"
+                  className={cn(
+                    'h-[42px] w-full px-3 pr-10 rounded-md 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 focus:border-rose-500'
+                      : 'border border-emerald-200 bg-emerald-50/50 text-emerald-900 placeholder:text-slate-400 focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400'
+                  )}
                   placeholder="Enter new password"
                 />
                 <button
@@ -190,10 +235,18 @@ export function LoginPage() {
                   type={showConfirmPassword ? 'text' : 'password'}
                   autoComplete="new-password"
                   value={confirmPassword}
-                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  onChange={(e) => {
-                  required
+                    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-[42px] w-full px-3 pr-10 rounded-md 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 focus:border-rose-500'
+                      : 'border border-emerald-200 bg-emerald-50/50 text-emerald-900 placeholder:text-slate-400 focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400'
+                  )}
                   placeholder="Confirm new password"
                 />
                 <button
@@ -229,7 +282,7 @@ export function LoginPage() {
           </form>
         ) : (
           /* Standard Login Form */
-          <form onSubmit={submit} className="flex flex-col gap-4">
+          <form noValidate 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>
@@ -237,11 +290,19 @@ export function LoginPage() {
               <input
                 type="email"
                 value={email}
-                onChange={(e) => setEmail(e.target.value)}
+                onChange={(e) => {
-                required
+                  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"
+                className={cn(
+                  'h-[42px] px-3 rounded-md 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 focus:border-rose-500'
+                    : 'border border-emerald-200 bg-emerald-50/50 text-emerald-900 placeholder:text-slate-400 focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400'
+                )}
                 placeholder="Enter your email"
               />
             </label>
@@ -262,10 +323,18 @@ export function LoginPage() {
                 <input
                   type={showPassword ? 'text' : 'password'}
                   value={password}
-                  onChange={(e) => setPassword(e.target.value)}
+                  onChange={(e) => {
-                  required
+                    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"
+                  className={cn(
+                    'h-[42px] w-full px-3 pr-10 rounded-md 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 focus:border-rose-500'
+                      : 'border border-emerald-200 bg-emerald-50/50 text-emerald-900 placeholder:text-slate-400 focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400'
+                  )}
                   placeholder="Enter your password"
                 />
                 <button