From e6f1e909d8d7e3f6788b528141bdc516318312de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Barto=C5=A1?= <mabartos@redhat.com>
Date: Sun, 12 Feb 2023 01:09:16 +0100
Subject: [PATCH] Recovery codes input error not displayed in the standardized
 way (#16922)

---
 .../login/login-recovery-authn-code-input.ftl    | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/themes/src/main/resources/theme/base/login/login-recovery-authn-code-input.ftl b/themes/src/main/resources/theme/base/login/login-recovery-authn-code-input.ftl
index f6cad6764a..8d67d434c8 100644
--- a/themes/src/main/resources/theme/base/login/login-recovery-authn-code-input.ftl
+++ b/themes/src/main/resources/theme/base/login/login-recovery-authn-code-input.ftl
@@ -1,5 +1,5 @@
 <#import "template.ftl" as layout>
-<@layout.registrationLayout; section>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('recoveryCodeInput'); section>
 
     <#if section = "header">
         ${msg("auth-recovery-code-header")}
@@ -11,7 +11,19 @@
                 </div>
 
                 <div class="${properties.kcInputWrapperClass!}">
-                    <input id="recoveryCodeInput" name="recoveryCodeInput" autocomplete="off" type="text" class="${properties.kcInputClass!}" autofocus/>
+                    <input tabindex="1" id="recoveryCodeInput"
+                           name="recoveryCodeInput"
+                           aria-invalid="<#if messagesPerField.existsError('recoveryCodeInput')>true</#if>"
+                           autocomplete="off"
+                           type="text"
+                           class="${properties.kcInputClass!}"
+                           autofocus/>
+
+                    <#if messagesPerField.existsError('recoveryCodeInput')>
+                        <span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                            ${kcSanitize(messagesPerField.get('recoveryCodeInput'))?no_esc}
+                        </span>
+                    </#if>
                 </div>
             </div>