From dc1c8620bcaafab81d0ef5a61a6406d00219fe73 Mon Sep 17 00:00:00 2001
From: Cameron Waldron <1000178+CamW@users.noreply.github.com>
Date: Fri, 31 Jul 2026 09:45:01 +0200
Subject: [PATCH] fix(login): provide hidden username on password set/change
 forms (#12490)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please inform yourself about the contribution guidelines on submitting a
PR here:
https://github.com/zitadel/zitadel/blob/main/CONTRIBUTING.md#submit-a-pull-request-pr.
Take note of how PR/commit titles should be written and replace the
template texts in the sections below. Don't remove any of the sections.
It is important that the commit history clearly shows what is changed
and why.
Important: By submitting a contribution you agree to the terms from our
Licensing Policy as described here:
https://github.com/zitadel/zitadel/blob/main/LICENSING.md#community-contributions.
-->

  # Which Problems Are Solved

The set-password, change-password and set-register-password forms render
only
password fields — there is no username field inside the `<form>`.
Password
  managers look for a username field adjacent to the
password field in order to associate and save the credential. Without
one, on
these screens they either skip offering to save, or save a password
entry with
no username attached — so the saved record can't later be matched to the
account.

The existing sign-in form (`password-form.tsx`) already carries a
username field
  for this reason; the password *creation/change* flows were missing the
  equivalent.

  # How the Problems Are Solved

Add a username field to each of the three forms so the newly set
password is
  saved against the correct account:

- `set-password-form.tsx` and `change-password-form.tsx` use the
`loginName`.
  - `set-register-password-form.tsx` uses the `email`.

The field is a real, focusable-excluded `type="text"` input rather than
`type="hidden"` — password managers ignore `type="hidden"` fields when
looking
  for a username, so a visually-hidden text input is required. It is:

  - `readOnly` (avoids a controlled-input warning and user edits),
- `tabIndex={-1}` and `aria-hidden="true"` (kept out of the tab order
and the
    accessibility tree),
  - `className="sr-only"` (visually hidden but present in the DOM),
  - `autoComplete="username"` (tells the password manager what it is).

The value comes from props already passed to each form, so no signatures
change.

  # Additional Changes

  None.

  # Additional Context

- The username values (`loginName` / `email`) are already available in
each
component, so this is a purely presentational change with no server-side
or
    API impact.

Co-authored-by: Max Peintner <max@caos.ch>
---
 apps/login/src/components/change-password-form.tsx     | 10 ++++++++++
 apps/login/src/components/set-password-form.tsx        | 10 ++++++++++
 .../src/components/set-register-password-form.tsx      | 10 ++++++++++
 3 files changed, 30 insertions(+)

diff --git a/apps/login/src/components/change-password-form.tsx b/apps/login/src/components/change-password-form.tsx
index e21fae43b..c352ebf7f 100644
--- a/apps/login/src/components/change-password-form.tsx
+++ b/apps/login/src/components/change-password-form.tsx
@@ -125,6 +125,16 @@ export function ChangePasswordForm({ passwordComplexitySettings, sessionId, logi
       {samlData && <AutoSubmitForm url={samlData.url} fields={samlData.fields} />}
       <form className="w-full">
         <div className="mb-4 grid grid-cols-1 gap-4 pt-4">
+          <input
+            type="text"
+            name="username"
+            autoComplete="username"
+            value={loginName}
+            readOnly
+            tabIndex={-1}
+            aria-hidden="true"
+            className="sr-only"
+          />
           <div className="">
             <TextInput
               type="password"
diff --git a/apps/login/src/components/set-password-form.tsx b/apps/login/src/components/set-password-form.tsx
index e363596fd..25d18de37 100644
--- a/apps/login/src/components/set-password-form.tsx
+++ b/apps/login/src/components/set-password-form.tsx
@@ -173,6 +173,16 @@ export function SetPasswordForm({
       {samlData && <AutoSubmitForm url={samlData.url} fields={samlData.fields} />}
       <form className="w-full">
         <div className="mb-4 grid grid-cols-1 gap-4 pt-4">
+          <input
+            type="text"
+            name="username"
+            autoComplete="username"
+            value={loginName}
+            readOnly
+            tabIndex={-1}
+            aria-hidden="true"
+            className="sr-only"
+          />
           {codeRequired && (
             <Alert type={AlertType.INFO}>
               <div className="flex flex-row">
diff --git a/apps/login/src/components/set-register-password-form.tsx b/apps/login/src/components/set-register-password-form.tsx
index ce23f4d9a..d85806e74 100644
--- a/apps/login/src/components/set-register-password-form.tsx
+++ b/apps/login/src/components/set-register-password-form.tsx
@@ -102,6 +102,16 @@ export function SetRegisterPasswordForm({
       {samlData && <AutoSubmitForm url={samlData.url} fields={samlData.fields} />}
       <form className="w-full">
         <div className="mb-4 grid grid-cols-1 gap-4 pt-4">
+          <input
+            type="text"
+            name="username"
+            autoComplete="username"
+            value={email ?? ""}
+            readOnly
+            tabIndex={-1}
+            aria-hidden="true"
+            className="sr-only"
+          />
           <div className="">
             <TextInput
               type="password"