Add HTML5 attributes to prevent password manager interference with OTP

* Closes #41831

Signed-off-by: dmfilipenko <wind.fd@gmail.com>
Signed-off-by: Alexander Schwartz <aschwart@redhat.com>
Co-authored-by: Alexander Schwartz <aschwart@redhat.com>

docs/documentation/upgrading/topics/changes/changes-26_4_0.adoc

@@ -99,6 +99,12 @@ When tracing is enabled, now also calls to other nodes of a {project_name} clust
 
 To disable this kind of tracing, set the option `tracing-infinispan-enabled` to `false`.
 
+=== Login theme optimized for OTP and recovery code entry
+
+The input fields  in the login theme for OTP and recovery codes and have been optimized:
+
+* The input mode is now `numeric`, which will ease the input on mobile devices.
+* The auto-complete is set to `one-time-code` to avoid interference with password managers.
 
 // ------------------------ Deprecated features ------------------------ //
 == Deprecated features

themes/src/main/resources/theme/base/login/login-config-totp.ftl

@@ -56,8 +56,9 @@
                     <label for="totp" class="control-label">${msg("authenticatorCode")}</label> <span class="required">*</span>
                 </div>
                 <div class="${properties.kcInputWrapperClass!}">
-                    <input type="text" id="totp" name="totp" autocomplete="off" class="${properties.kcInputClass!}"
+                    <input type="text" id="totp" name="totp" autocomplete="one-time-code" class="${properties.kcInputClass!}"
                            aria-invalid="<#if messagesPerField.existsError('totp')>true</#if>"
+                           inputmode="numeric"
                            dir="ltr"
                     />
 

themes/src/main/resources/theme/base/login/login-recovery-authn-code-input.ftl

@@ -14,9 +14,10 @@
                     <input tabindex="1" id="recoveryCodeInput"
                            name="recoveryCodeInput"
                            aria-invalid="<#if messagesPerField.existsError('recoveryCodeInput')>true</#if>"
-                           autocomplete="off"
+                           autocomplete="one-time-code"
                            type="text"
                            class="${properties.kcInputClass!}"
+                           inputmode="numeric"
                            autofocus
                            dir="ltr"/>
 

themes/src/main/resources/theme/keycloak.v2/login/field.ftl

@@ -45,6 +45,7 @@
   <@group name=name label=label error=error required=required>
     <span class="${properties.kcInputClass} <#if error?has_content>${properties.kcError}</#if>">
         <input id="${name}" name="${name}" value="${value}" type="text" autocomplete="${autocomplete}" <#if autofocus>autofocus</#if>
+                <#if autocomplete == "one-time-code">inputmode="numeric"</#if>
                 aria-invalid="<#if error?has_content>true</#if>"/>
         <@errorIcon error=error/>
     </span>

themes/src/main/resources/theme/keycloak.v2/login/login-config-totp.ftl

@@ -60,8 +60,9 @@
                     </label>
                 </div>
                 <div class="${properties.kcInputClass!} <#if messagesPerField.existsError('totp')>pf-m-error</#if>">
-                    <input type="text" required id="totp" name="totp" autocomplete="off"
+                    <input type="text" required id="totp" name="totp" autocomplete="one-time-code"
                            aria-invalid="<#if messagesPerField.existsError('totp')>true</#if>"
+                           inputmode="numeric"
                     />
 
                     <@field.errorIcon error=kcSanitize(messagesPerField.get('totp'))?no_esc/>