From f2788fc76526d3bd417ed05a8321636773a2a024 Mon Sep 17 00:00:00 2001
From: Rene Turcios <95189389+CloudCorpRecords@users.noreply.github.com>
Date: Tue, 13 Oct 2026 09:49:05 -0700
Subject: [PATCH] refactor(auth): use shared Field in Login, ForgotPassword and
 PasswordChangeRequired

Replace the hand-built label + control (+ error) markup on the three auth
pages with Field. Login keeps its existing label/control styling via
labelProps and the native required attribute (no visual asterisk, as before).
ForgotPassword's email error now comes from Field (aria-invalid,
aria-describedby, role=alert) instead of a hand-wired id. The read-only
email on PasswordChangeRequired uses Field for its label.

Refs IBM/mcp-context-forge#7007

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Signed-off-by: Rene Turcios <95189389+CloudCorpRecords@users.noreply.github.com>
---
 src/pages/ForgotPassword.tsx         | 48 ++++++++----------
 src/pages/Login.tsx                  | 74 +++++++++++++++-------------
 src/pages/PasswordChangeRequired.tsx | 16 +++---
 3 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/src/pages/ForgotPassword.tsx b/src/pages/ForgotPassword.tsx
index 3e05b457..5f885b6d 100644
--- a/src/pages/ForgotPassword.tsx
+++ b/src/pages/ForgotPassword.tsx
@@ -6,7 +6,7 @@ import { AuthCard } from "@/components/auth/AuthCard";
 import { Button } from "@/components/ui/button";
 import { InlineNotification } from "@/components/ui/inline-notification";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { Field } from "@/components/ui/field";
 import { useRouter } from "@/router";
 
 export function ForgotPassword() {
@@ -71,33 +71,27 @@ export function ForgotPassword() {
         </div>
       ) : (
         <form onSubmit={handleSubmit} className="mt-6 space-y-4" noValidate>
-          <div className="space-y-1">
-            <Label htmlFor="email">{intl.formatMessage({ id: "auth.forgotPassword.email" })}</Label>
-            <Input
-              id="email"
-              name="email"
-              type="email"
-              autoComplete="email"
-              inputMode="email"
-              required
-              value={email}
-              onChange={(event) => {
-                setEmail(event.target.value);
-                setEmailError(null);
-              }}
-              aria-invalid={!!emailError}
-              aria-describedby={emailError ? "forgot-password-email-error" : undefined}
-            />
-            {emailError && (
-              <p
-                id="forgot-password-email-error"
-                role="alert"
-                className="text-sm text-red-600 dark:text-red-400"
-              >
-                {emailError}
-              </p>
+          <Field
+            id="email"
+            label={intl.formatMessage({ id: "auth.forgotPassword.email" })}
+            error={emailError ?? undefined}
+          >
+            {(controlProps) => (
+              <Input
+                {...controlProps}
+                name="email"
+                type="email"
+                autoComplete="email"
+                inputMode="email"
+                required
+                value={email}
+                onChange={(event) => {
+                  setEmail(event.target.value);
+                  setEmailError(null);
+                }}
+              />
             )}
-          </div>
+          </Field>
           {error && <InlineNotification type="error" message={error} />}
           <Button type="submit" disabled={loading || !email.trim()} className="w-full">
             {loading
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 71a64bd3..73513c35 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -6,7 +6,7 @@ import { ApiError } from "../api/client";
 import { classifyLoginError } from "../api/loginErrors";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { Field } from "@/components/ui/field";
 
 export function Login() {
   const intl = useIntl();
@@ -73,40 +73,44 @@ export function Login() {
           {intl.formatMessage({ id: "auth.login.title" })}
         </h1>
         <form onSubmit={handleSubmit} className="space-y-4" noValidate>
-          <div>
-            <Label
-              htmlFor="email"
-              className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1"
-            >
-              {intl.formatMessage({ id: "auth.login.email" })}
-            </Label>
-            <Input
-              id="email"
-              type="email"
-              autoComplete="email"
-              required
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="w-full border border-neutral-300 dark:border-neutral-600 rounded px-3 py-2 text-sm bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-400"
-            />
-          </div>
-          <div>
-            <Label
-              htmlFor="password"
-              className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1"
-            >
-              {intl.formatMessage({ id: "auth.login.password" })}
-            </Label>
-            <Input
-              id="password"
-              type="password"
-              autoComplete="current-password"
-              required
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="w-full border border-neutral-300 dark:border-neutral-600 rounded px-3 py-2 text-sm bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-400"
-            />
-          </div>
+          <Field
+            id="email"
+            label={intl.formatMessage({ id: "auth.login.email" })}
+            labelProps={{
+              className: "block text-sm font-medium text-neutral-700 dark:text-neutral-300",
+            }}
+          >
+            {(controlProps) => (
+              <Input
+                {...controlProps}
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full border border-neutral-300 dark:border-neutral-600 rounded px-3 py-2 text-sm bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-400"
+              />
+            )}
+          </Field>
+          <Field
+            id="password"
+            label={intl.formatMessage({ id: "auth.login.password" })}
+            labelProps={{
+              className: "block text-sm font-medium text-neutral-700 dark:text-neutral-300",
+            }}
+          >
+            {(controlProps) => (
+              <Input
+                {...controlProps}
+                type="password"
+                autoComplete="current-password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full border border-neutral-300 dark:border-neutral-600 rounded px-3 py-2 text-sm bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-400"
+              />
+            )}
+          </Field>
           {error && (
             <p role="alert" className="text-sm text-red-600">
               {error}
diff --git a/src/pages/PasswordChangeRequired.tsx b/src/pages/PasswordChangeRequired.tsx
index c1d9582d..406592b1 100644
--- a/src/pages/PasswordChangeRequired.tsx
+++ b/src/pages/PasswordChangeRequired.tsx
@@ -8,7 +8,7 @@ import { PasswordInput } from "@/components/users/PasswordInput";
 import { Button } from "@/components/ui/button";
 import { InlineNotification } from "@/components/ui/inline-notification";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { Field } from "@/components/ui/field";
 import { VALIDATION } from "@/lib/constants";
 import {
   countPasswordCharacterClasses,
@@ -192,12 +192,14 @@ export function PasswordChangeRequired() {
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="mt-6 space-y-4" noValidate>
-              <div className="space-y-1">
-                <Label htmlFor="email">
-                  {intl.formatMessage({ id: "auth.passwordChangeRequired.email" })}
-                </Label>
-                <Input id="email" type="email" value={email} disabled readOnly />
-              </div>
+              <Field
+                id="email"
+                label={intl.formatMessage({ id: "auth.passwordChangeRequired.email" })}
+              >
+                {(controlProps) => (
+                  <Input {...controlProps} type="email" value={email} disabled readOnly />
+                )}
+              </Field>
               <PasswordInput
                 ref={oldPasswordInputRef}
                 id="old-password"