Keycloak: Improve automatic form submission for email-code,otp,sms

thomasdarimont · Jan 15, 2024 · 5804c0e · 5804c0e
1 parent e2de98a
commit 5804c0e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/keycloak/themes/internal/login/email-code-form.ftl b/keycloak/themes/internal/login/email-code-form.ftl
@@ -5,14 +5,22 @@
     <#elseif section = "header">
         ${msg('emailCodeFormTitle')}
     <#elseif section = "form">
+        <script>
+            function tryCompleteForm() {
+                let code = document.querySelector("#emailCode").value;
+                if (code.length === 4+1+4) {
+                    document.querySelector("#kc-email-code-login-form").submit();
+                }
+            }
+        </script>
         <p>${msg('emailCodeFormCta')}</p>
-        <form class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+        <form id="kc-email-code-login-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
             <div class="${properties.kcFormGroupClass!}">
                 <div>
                     <div class="${properties.kcInputWrapperClass!}">
                         <label for="emailCode">${msg('accessCode')}:</label>
-                        <input id="emailCode" name="emailCode" type="text" inputmode="numeric" pattern="[\w\d-]*" autofocus
-                               class="${properties.kcInputClass!}"
+                        <input id="emailCode" name="emailCode" type="text" inputmode="numeric" pattern="\d{4}-\d{4}" autofocus
+                               class="${properties.kcInputClass!}" oninput="tryCompleteForm()"
                                required autocomplete="one-time-code"/>
                     </div>
                 </div>

diff --git a/keycloak/themes/internal/login/login-otp.ftl b/keycloak/themes/internal/login/login-otp.ftl
@@ -44,7 +44,7 @@
 
                 <div class="${properties.kcInputWrapperClass!}">
                     <input id="otp" name="otp" autocomplete="off" type="text" class="${properties.kcInputClass!}"
-                           inputmode="numeric" pattern="\d{6,8}" onkeyup="trySubmitForm()"
+                           inputmode="numeric" pattern="\d{6,8}" oninput="trySubmitForm()"
                            autofocus aria-invalid="<#if messagesPerField.existsError('totp')>true</#if>"/>
 
                     <#if messagesPerField.existsError('totp')>

diff --git a/keycloak/themes/internal/login/login-sms.ftl b/keycloak/themes/internal/login/login-sms.ftl
@@ -5,7 +5,7 @@
     <#elseif section = "form">
 
         <script>
-            function trySubmitForm() {
+            function tryCompleteForm() {
                 let code = document.querySelector("#code").value;
                 if (code.length === 6) {
                     document.querySelector("#kc-sms-code-login-form").submit();
@@ -20,8 +20,8 @@
                 </div>
                 <div class="${properties.kcInputWrapperClass!}">
                     <input type="text" id="code" name="code" class="${properties.kcInputClass!}" autofocus
-                           inputmode="numeric" pattern="\d{6,8}" autocomplete="one-time-code"
-                           onkeyup="trySubmitForm()"
+                           inputmode="numeric" pattern="\d{6,8}" autocomplete="one-time-code" required
+                           oninput="tryCompleteForm()"
                            aria-invalid="<#if messagesPerField.existsError('code')>true</#if>"/>
 
                     <#if messagesPerField.existsError('code')>
@@ -35,7 +35,8 @@
 
             <div class="checkbox">
                 <label for="registerTrustedDevice" class="${properties.kcLabelClass!}">
-                    <input type="checkbox" id="registerTrustedDevice" name="register-trusted-device" class="${properties.kcCheckboxInputClass!}"
+                    <input type="checkbox" id="registerTrustedDevice" name="register-trusted-device"
+                           class="${properties.kcCheckboxInputClass!}"
                            value=""/>
                     ${msg("trustThisDevice")}
                 </label>