mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-21 06:54:25 +00:00
685be24dfe
# Which Problems Are Solved This PR introduces several HTML attributes to the username/ID input field to **prevent unwanted automatic capitalization and correction** on mobile devices (iOS and Android). Specifically, this addresses the common issue where a mobile keyboard defaults to an uppercase letter for the first character, even when the input (like a username or email) should be lowercase. # How the Problems Are Solved The following attributes have been added to the `<input>` field: | Attribute | Value | Purpose | | :--- | :--- | :--- | | `autoCapitalize` | `none` | **Crucial fix:** Prevents the virtual keyboard from capitalizing the first letter. | | `autoCorrect` | `off` | Prevents the operating system from auto-correcting input (e.g., changing "teh" to "the"). | | `spellCheck` | `false` | Disables the red squiggly lines for spell-checking. | # Additional Changes None. Previously: ~Introduces a default `Content-Type` request header in the `.env` file to increase compatibility for developing `zitadel-login` and call a non-local Zitadel API. The `Host` header is also added as a commented-out reference so developers will be reminded to set this one too. This is needed for supporting calls to a Zitadel deployed behind an AWS ALB, for example.~ https://github.com/zitadel/zitadel-charts/pull/460 # Additional Context This attribute was already present: | Attribute | Value | Purpose | | :--- | :--- | :--- | | `autoComplete` | `username` | Provides a semantic hint to password managers to correctly suggest and fill stored usernames. | ## Rationale and References (MDN Web Docs) | Attribute | Why we use it | Reference Link | | :--- | :--- | :--- | | **`autoCapitalize="none"`** | Overrides default OS sentence capitalization behavior. | [MDN: autocapitalize](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autocapitalize) | | **`autoCorrect="off"`** | Essential for case-sensitive or specific identifiers where correction must be disabled (primarily iOS). | [MDN: autocorrect](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autocorrect) | | **`spellCheck="false"`** | Usernames are not dictionary words, so spell-checking is distracting/irrelevant. | [MDN: spellcheck](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/spellcheck) | | **`autoComplete="username"`** | Modern standard for indicating a login field, supporting password managers. | [MDN: autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete) | ## Browser Safety Concern This change is **safe**. These attributes act as "hints" to the browser and OS. If a particular older browser does not support one of the attributes, it will simply ignore it and revert to its default behavior, introducing **no errors** or breaking changes. The combination used is considered best practice for secure and predictable input fields. - Discussion #11124 --------- Co-authored-by: Copilot <[email protected]> Co-authored-by: Ramon <[email protected]>