Update OTP and Images

login/login-otp.ftl

@@ -1,70 +1,21 @@
 <#import "template.ftl" as layout>
-    <@layout.registrationLayout; section>
+<@layout.registrationLayout; section>
     <#if section="header">
     ${msg("loginTitle",(realm.displayName!''))}
     <#elseif section="form">
-                <form id="kc-otp-login-form" class="${properties.kcFormClass!}" action="${url.loginAction}"
+        <h1 class="login-title display-3 mb-5">OTP Validation</h1>
+        <form id="kc-otp-login-form" class=""
+            action="https://keycloak.pklueter.de/auth/realms/pklueter.de/login-actions/authenticate?session_code=ItGKVx01UJGJKM_hV7zCoWMX1-H621yWEqkpYQOI07U&amp;execution=220a59a4-4025-43a2-a573-968e2462ab5f&amp;client_id=security-admin-console&amp;tab_id=YWMu2xq1pIU"
             method="post">
-                    <#if otpLogin.userOtpCredentials?size gt 1>
-                        <div class="${properties.kcFormGroupClass!}">
-                            <div class="${properties.kcInputWrapperClass!}">
-                                <#list otpLogin.userOtpCredentials as otpCredential>
-                                    <div class="${properties.kcSelectOTPListClass!}">
-                                    <input type="hidden" value="${otpCredential.id}">
-                                        <div class="${properties.kcSelectOTPListItemClass!}">
-                                            <span class="${properties.kcAuthenticatorOtpCircleClass!}"></span>
-                                            <h2 class="${properties.kcSelectOTPItemHeadingClass!}">
-                                                ${otpCredential.userLabel}
-                                            </h2>
-                                        </div>
-                                    </div>
-                                </#list>
-                            </div>
-                        </div>
-                    </#if>
 
-                    <div class="${properties.kcFormGroupClass!}">
+            <div class="form-group mb-5">
-                        <div class="${properties.kcLabelWrapperClass!}">
+                <label for="password">One-time code</label>
-                            <label for="otp" class="${properties.kcLabelClass!}">${msg("loginOtpOneTime")}</label>
+                <input type="text" name="otp" id="otp" autocomplete="off" autofocus="yes" class="form-control"
-                        </div>
+                    placeholder="Enter your one-time code">
-
-                        <div class="${properties.kcInputWrapperClass!}">
-                            <input id="otp" name="otp" autocomplete="off" type="text" class="${properties.kcInputClass!}"
-                            autofocus/>
-                        </div>
-                    </div>
-
-                    <div class="${properties.kcFormGroupClass!}">
-                        <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
-                            <div class="${properties.kcFormOptionsWrapperClass!}">
-                            </div>
-                        </div>
-
-                        <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
-                            <input
-                                class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
-                                name="login" id="kc-login" type="submit" value="${msg("doLogIn")}" />
-                        </div>
             </div>
+            <input name="login" id="kc-login" class="btn btn-block login-btn" type="submit" value="Validate">
         </form>
-            <script type="text/javascript" src="${url.resourcesPath}/node_modules/jquery/dist/jquery.min.js"></script>
+    <#elseif section="image">
-            <script type="text/javascript">
+        <img src="${url.resourcesPath}/images/otp_md.jpg" alt="login image" class="login-img">
-            $(document).ready(function() {
-                // Card Single Select
-                $('.card-pf-view-single-select').click(function() {
-                  if ($(this).hasClass('active'))
-                  { $(this).removeClass('active'); $(this).children().removeAttr('name'); }
-                  else
-                  { $('.card-pf-view-single-select').removeClass('active');
-                  $('.card-pf-view-single-select').children().removeAttr('name');
-                  $(this).addClass('active'); $(this).children().attr('name', 'selectedCredentialId'); }
-                });
-
-                var defaultCred = $('.card-pf-view-single-select')[0];
-                if (defaultCred) {
-                    defaultCred.click();
-                }
-              });
-            </script>
     </#if>
-        </@layout.registrationLayout>
+</@layout.registrationLayout>

login/login.ftl

@@ -17,6 +17,8 @@
             </div>
             <input name="login" id="kc-login" class="btn btn-block login-btn" type="submit" value="Log in">
         </form>
+    <#elseif section = "image" >
+         <img src="${url.resourcesPath}/images/login_md.jpg" alt="login image" class="login-img">
     <#elseif section = "info" >
         <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
             <div id="kc-registration">

login/template.ftl

@@ -28,7 +28,7 @@
                     </div>
                 </div>
                 <div class="col-md-6 px-0 d-none d-md-block">
-                    <img src="${url.resourcesPath}/images/background_md.jpg" alt="login image" class="login-img">
+                    <#nested "image">
                 </div>
             </div>
         </div>