keycloak-theme-editor 0.1.0

package/public/keycloak-upstream/v2/login/code.ftl

@@ -0,0 +1,96 @@
+<#import "template.ftl" as layout>
+<#import "field.ftl" as field>
+<@layout.registrationLayout; section>
+    <#if section = "header">
+        <#if code.success>
+            ${msg("codeSuccessTitle")}
+        <#else>
+            ${msg("codeErrorTitle", code.error)}
+        </#if>
+    <#elseif section = "form">
+        <div id="kc-code">
+            <#if code.success>
+                <p>${msg("copyCodeInstruction")}</p>
+                <@field.clipboard name="code" label="" ariaLabel=msg("codeSuccess") value=code.code />
+                <script type="module">
+                    (() => {
+                        const copyButton = document.getElementById('kc-code-copy-button');
+                        const toggleButton = document.getElementById('kc-code-toggle');
+                        const input = document.getElementById('kc-code');
+                        const expandableContent = document.getElementById('kc-code-content');
+                        const clipboardContainer = document.getElementById('kc-code-clipboard');
+
+                        // Validate elements
+                        if (!copyButton || !toggleButton || !input || !expandableContent || !clipboardContainer) {
+                            console.error("Missing required DOM elements for code interactions.");
+                            return;
+                        }
+
+                        // Validate Clipboard API
+                        if (!navigator.clipboard) {
+                            console.error("Clipboard API not supported in this browser.");
+                            copyButton.style.display = 'none';
+                            return;
+                        }
+                        
+                        // Handle copy functionality
+                        copyButton.addEventListener('click', async() => {
+                            const originalIcon = copyButton.innerHTML;
+
+                            // Get value from expandable content
+                            let value = expandableContent.querySelector('code')?.textContent;
+
+                            try {
+                                await navigator.clipboard.writeText(value);
+                                updateCopyButton(true, copyButton, originalIcon);
+                            } catch (err) {
+                                console.error('Copy failed: ', err);
+                                updateCopyButton(false, copyButton, originalIcon);
+                            }
+                        });
+                        
+                        // Handle toggle functionality
+                        toggleButton.addEventListener('click', () => {
+                            const newExpanded = !(toggleButton.getAttribute('aria-expanded') === 'true');
+                            
+                            toggleButton.setAttribute('aria-expanded', newExpanded.toString());
+                            expandableContent.hidden = !newExpanded;
+                            
+                            // Update icon
+                            const icon = toggleButton.querySelector('#kc-code-toggle-icon');
+                            if (icon) {
+                                icon.className = newExpanded ? toggleButton.dataset.iconExpandedClass : toggleButton.dataset.iconCollapsedClass;
+                            }
+                            
+                            // Update clipboard container class
+                            if (newExpanded) {
+                                clipboardContainer.classList.add(toggleButton.dataset.classExpanded);
+                            } else {
+                                clipboardContainer.classList.remove(toggleButton.dataset.classExpanded);
+                            }
+                        });
+                    })();
+                    
+                    // Update copy button to show success or failure state
+                    function updateCopyButton(success, button, originalIcon) {
+                        button.setAttribute('aria-label', success ? button.dataset.successLabel : button.dataset.failureLabel);
+                        const icon = button.querySelector('#kc-code-copy-icon');
+                        if (icon) {
+                            icon.className = success ? button.dataset.iconSuccess : button.dataset.iconFailure;
+                        }
+                        button.disabled = true;
+                        
+                        // Reset button after 2 seconds
+                        setTimeout(() => {
+                            button.innerHTML = originalIcon;
+                            button.setAttribute('aria-label', '${msg("code-copy-label")}');
+                            button.disabled = false;
+                        }, 2000);
+                    }
+                </script>
+            <#else>
+                <p id="error">${code.error}</p>
+            </#if>
+        </div>
+    </#if>
+</@layout.registrationLayout>

package/public/keycloak-upstream/v2/login/delete-account-confirm.ftl

@@ -0,0 +1,40 @@
+<#import "template.ftl" as layout>
+<#import "buttons.ftl" as buttons>
+
+<@layout.registrationLayout; section>
+<!-- template: delete-account-confirm.ftl -->
+
+    <#if section = "header">
+      ${msg("deleteAccountConfirm")}
+
+   <#elseif section = "form">
+
+    <form action="${url.loginAction}" class="${properties.kcFormClass!}" id="kc-deleteaccount-form" method="post">
+
+      <div class="${properties.kcAlertClass!} pf-m-warning">
+        <div class="${properties.kcAlertIconClass!}">
+          <i class="${properties.kcFeedbackWarningIcon!}" aria-hidden="true"></i>
+        </div>
+        <span class="${properties.kcAlertTitleClass!}">
+          ${msg("irreversibleAction")}
+        </span>
+      </div>
+
+      <p>${msg("deletingImplies")}</p>
+      <ul class="pf-v5-c-list" role="list">
+        <li>${msg("loggingOutImmediately")}</li>
+        <li>${msg("errasingData")}</li>
+      </ul>
+
+      <p class="delete-account-text">${msg("finalDeletionConfirmation")}</p>
+
+      <@buttons.actionGroup>
+        <@buttons.button id="kc-submit" label="doConfirmDelete" class=["kcButtonPrimaryClass"]/>
+        <#if triggered_from_aia>
+          <@buttons.button id="kc-cancel" name="cancel-aia" label="doCancel" class=["kcButtonSecondaryClass"]/>
+        </#if>
+      </@buttons.actionGroup>
+    </form>
+   </#if>
+
+</@layout.registrationLayout>

package/public/keycloak-upstream/v2/login/delete-credential.ftl

@@ -0,0 +1,21 @@
+<#import "template.ftl" as layout>
+<#import "buttons.ftl" as buttons>
+
+<@layout.registrationLayout displayMessage=false; section>
+<!-- template: delete-credential.ftl -->
+
+    <#if section = "header">
+        ${msg("deleteCredentialTitle", credentialLabel)}
+    <#elseif section = "form">
+        <div id="kc-delete-text" class="${properties.kcContentWrapperClass!}">
+            ${msg("deleteCredentialMessage", credentialLabel)}
+        </div>
+
+        <form class="${properties.kcFormClass!}" action="${url.loginAction}" method="POST">
+            <@buttons.actionGroup>
+                <@buttons.button name="accept" id="kc-accept" label="doConfirmDelete" class=["kcButtonPrimaryClass"]/>
+                <@buttons.button name="cancel-aia" id="kc-decline" label="doDecline" class=["kcButtonSecondaryClass"]/>
+            </@buttons.actionGroup>
+        </form>
+    </#if>
+</@layout.registrationLayout>

package/public/keycloak-upstream/v2/login/field.ftl

@@ -0,0 +1,162 @@
+<#macro group name label error="" required=false>
+
+<div class="${properties.kcFormGroupClass}">
+    <div class="${properties.kcFormGroupLabelClass}">
+        <label for="${name}" class="${properties.kcFormLabelClass}">
+        <span class="${properties.kcFormLabelTextClass}">
+            ${label}
+        </span>
+            <#if required>
+                <span class="${properties.kcInputRequiredClass}" aria-hidden="true">&#42;</span>
+            </#if>
+        </label>
+    </div>
+
+    <#nested>
+
+    <div id="input-error-container-${name}">
+        <#if error?has_content>
+            <div class="${properties.kcFormHelperTextClass}" aria-live="polite">
+                <div class="${properties.kcInputHelperTextClass}">
+                    <div class="${properties.kcInputHelperTextItemClass} ${properties.kcError}" id="input-error-${name}">
+                        <span class="${properties.kcInputErrorMessageClass}">
+                            ${error}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </#if>
+    </div>
+</div>
+
+</#macro>
+
+<#macro errorIcon error="">
+  <#if error?has_content>
+    <span class="${properties.kcFormControlUtilClass}">
+        <span class="${properties.kcInputErrorIconStatusClass}">
+          <i class="${properties.kcInputErrorIconClass}" aria-hidden="true"></i>
+        </span>
+    </span>
+  </#if>
+</#macro>
+
+<#macro input name label value="" required=false autocomplete="off" fieldName=name error=messagesPerField.get(fieldName) autofocus=false>
+  <@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>
+  </@group>
+</#macro>
+
+<#macro password name label value="" required=false forgotPassword=false fieldName=name error=messagesPerField.get(fieldName) autocomplete="off" autofocus=false>
+  <@group name=name label=label error=error required=required>
+    <div class="${properties.kcInputGroup}">
+      <div class="${properties.kcInputGroupItemClass} ${properties.kcFill}">
+        <span class="${properties.kcInputClass} <#if error?has_content>${properties.kcError}</#if>">
+          <input id="${name}" name="${name}" value="${value}" type="password" autocomplete="${autocomplete}" <#if autofocus>autofocus</#if>
+                  aria-invalid="<#if error?has_content>true</#if>"/>
+          <@errorIcon error=error/>
+        </span>
+      </div>
+      <div class="${properties.kcInputGroupItemClass}">
+        <button class="${properties.kcFormPasswordVisibilityButtonClass}" type="button" aria-label="${msg('showPassword')}"
+                aria-controls="${name}" data-password-toggle
+                data-icon-show="${properties.kcFormPasswordVisibilityIconShow}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide}"
+                data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}" id="${name}-show-password">
+            <i class="${properties.kcFormPasswordVisibilityIconShow}" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+    <div class="${properties.kcFormHelperTextClass}" aria-live="polite">
+        <div class="${properties.kcInputHelperTextClass}">
+            <#-- Additional helper items -->
+            <#nested>
+            <#if forgotPassword>
+                <div class="${properties.kcInputHelperTextItemClass}">
+                  <span class="${properties.kcInputHelperTextItemTextClass}">
+                      <a href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a>
+                  </span>
+                </div>
+            </#if>
+        </div>
+    </div>
+
+  </@group>
+</#macro>
+
+<#macro clipboard name label ariaLabel=label value="" readonly=true>
+  <@group name=name label=label>
+    <div class="${properties.kcCodeClipboardCopyClass}" id="kc-${name}-clipboard">
+      <div class="${properties.kcCodeClipboardCopyGroupClass}">
+        <div class="${properties.kcInputGroup}">
+          <div class="${properties.kcInputGroupItemClass}">
+            <button 
+              class="${properties.kcFormPasswordVisibilityButtonClass}" 
+              type="button" 
+              aria-label="${msg("code-clipboard-label")}"
+              aria-expanded="false"
+              aria-controls="kc-${name}-content"
+              data-icon-expanded-class="${properties.kcAngleDownIconClass}"
+              data-icon-collapsed-class="${properties.kcAngleRightIconClass}"
+              data-expanded-class="${properties.kcExpandedClass}"
+              id="kc-${name}-toggle"
+            >
+              <i id="kc-${name}-toggle-icon" class="${properties.kcAngleRightIconClass}" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="${properties.kcInputGroupItemClass} ${properties.kcFill}">
+            <span class="${properties.kcInputClass} <#if readonly>${properties.kcFormReadOnlyClass}</#if>">
+              <input
+                id="${name}"
+                name="${name}"
+                value="${value}"
+                type="text"
+                <#if readonly>readonly</#if>
+                aria-label="${ariaLabel}"
+              />
+            </span>
+          </div>
+          <div class="${properties.kcInputGroupItemClass}">
+            <button
+              class="${properties.kcFormPasswordVisibilityButtonClass}"
+              type="button"
+              aria-label="${msg("code-copy-label")}"
+              data-icon-success="${properties.kcCheckIconClass}"
+              data-icon-failure="${properties.kcInputErrorIconClass}"
+              data-success-label="${msg("code-copy-success")}"
+              data-failure-label="${msg("code-copy-failure")}"
+              id="kc-${name}-copy-button"
+            >
+              <i id="kc-${name}-copy-icon" class="${properties.kcCopyIconClass}" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="${properties.kcCodeClipboardCopyContentClass}" id="kc-${name}-content" hidden>
+        <pre><code aria-label="${ariaLabel}">${value}</code></pre>
+      </div>
+    </div>
+  </@group>
+</#macro>
+
+<#macro checkbox name label value=false required=false>
+  <div class="${properties.kcCheckboxClass}">
+    <label for="${name}" class="${properties.kcCheckboxClass}">
+      <input
+        class="${properties.kcCheckboxInputClass}"
+        type="checkbox"
+        id="${name}"
+        name="${name}"
+        <#if value>checked</#if>
+      />
+      <span class="${properties.kcCheckboxLabelClass}">${label}</span>
+      <#if required>
+        <span class="${properties.kcCheckboxLabelRequiredClass}" aria-hidden="true">&#42;</span>
+      </#if>
+    </label>
+  </div>
+</#macro>

package/public/keycloak-upstream/v2/login/footer.ftl

@@ -0,0 +1,3 @@
+<#macro content>
+<#-- The footer at the bottom of the "login-box". You can override this file in your custom theme to declare a custom login footer element -->
+</#macro>

package/public/keycloak-upstream/v2/login/link-idp-action.ftl

@@ -0,0 +1,21 @@
+<#import "template.ftl" as layout>
+<#import "buttons.ftl" as buttons>
+
+<@layout.registrationLayout displayMessage=false; section>
+<!-- template: link-idp-action.ftl -->
+
+    <#if section = "header">
+        ${msg("linkIdpActionTitle", idpDisplayName)}
+    <#elseif section = "form">
+        <div id="kc-link-text" class="${properties.kcContentWrapperClass!}">
+            ${msg("linkIdpActionMessage", idpDisplayName)}
+        </div>
+
+        <form class="${properties.kcFormClass!}" action="${url.loginAction}" method="POST">
+            <@buttons.actionGroup>
+                <@buttons.button name="continue" id="kc-continue" label="doContinue" class=["kcButtonPrimaryClass"]/>
+                <@buttons.button name="cancel-aia" id="kc-cancel" label="doCancel" class=["kcButtonSecondaryClass"]/>
+            </@buttons.actionGroup>
+        </form>
+    </#if>
+</@layout.registrationLayout>

package/public/keycloak-upstream/v2/login/login-config-totp.ftl

@@ -0,0 +1,124 @@
+<#import "template.ftl" as layout>
+<#import "field.ftl" as field>
+<#import "password-commons.ftl" as passwordCommons>
+<@layout.registrationLayout displayRequiredFields=false displayMessage=!messagesPerField.existsError('totp','userLabel'); section>
+<!-- template: login-config-totp.ftl -->
+
+    <#if section = "header">
+        ${msg("loginTotpTitle")}
+    <#elseif section = "form">
+        <ol id="kc-totp-settings" class="pf-v5-c-list pf-v5-u-mb-md">
+            <li>
+                <p>${msg("loginTotpStep1")}</p>
+
+                <ul id="kc-totp-supported-apps">
+                    <#list totp.supportedApplications as app>
+                        <li>${msg(app)}</li>
+                    </#list>
+                </ul>
+            </li>
+
+            <#if mode?? && mode = "manual">
+                <li>
+                    <p>${msg("loginTotpManualStep2")}</p>
+                    <p><span id="kc-totp-secret-key">${totp.totpSecretEncoded}</span></p>
+                    <p><a href="${totp.qrUrl}" id="mode-barcode">${msg("loginTotpScanBarcode")}</a></p>
+                </li>
+                <li>
+                    <p>${msg("loginTotpManualStep3")}</p>
+                    <p>
+                    <ul>
+                        <li id="kc-totp-type">${msg("loginTotpType")}: ${msg("loginTotp." + totp.policy.type)}</li>
+                        <li id="kc-totp-algorithm">${msg("loginTotpAlgorithm")}: ${totp.policy.getAlgorithmKey()}</li>
+                        <li id="kc-totp-digits">${msg("loginTotpDigits")}: ${totp.policy.digits}</li>
+                        <#if totp.policy.type = "totp">
+                            <li id="kc-totp-period">${msg("loginTotpInterval")}: ${totp.policy.period}</li>
+                        <#elseif totp.policy.type = "hotp">
+                            <li id="kc-totp-counter">${msg("loginTotpCounter")}: ${totp.policy.initialCounter}</li>
+                        </#if>
+                    </ul>
+                    </p>
+                </li>
+            <#else>
+                <li>
+                    <p>${msg("loginTotpStep2")}</p>
+                    <img id="kc-totp-secret-qr-code" src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"><br/>
+                    <p><a href="${totp.manualUrl}" id="mode-manual">${msg("loginTotpUnableToScan")}</a></p>
+                </li>
+            </#if>
+            <li>
+                <p>${msg("loginTotpStep3")}</p>
+                <p>${msg("loginTotpStep3DeviceName")}</p>
+            </li>
+        </ol>
+
+        <form action="${url.loginAction}" class="${properties.kcFormClass!}" id="kc-totp-settings-form" method="post" novalidate="novalidate">
+            <div class="${properties.kcFormGroupClass!}">
+                <div class="${properties.kcLabelClass!}">
+                    <label class="pf-v5-c-form__label" for="form-vertical-name">
+                        <span class="pf-v5-c-form__label-text">${msg("authenticatorCode")}</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span>
+                    </label>
+                </div>
+                <div class="${properties.kcInputClass!} <#if messagesPerField.existsError('totp')>pf-m-error</#if>">
+                    <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=messagesPerField.get('totp')/>
+                </div>
+                <#if messagesPerField.existsError('totp')>
+                    <span id="input-error-otp-code" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                        ${messagesPerField.get('totp')}
+                    </span>
+                </#if>
+                <input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}" />
+                <#if mode??><input type="hidden" id="mode" name="mode" value="${mode}"/></#if>
+            </div>
+            <div class="${properties.kcFormGroupClass!}">
+                <div class="${properties.kcLabelClass!}">
+                    <label class="pf-v5-c-form__label" for="form-vertical-name">
+                        <span class="pf-v5-c-form__label-text">${msg("loginTotpDeviceName")}</span><#if totp.otpCredentials?size gte 1>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></#if>
+                    </label>
+                </div>
+
+                <div class="${properties.kcInputClass!} <#if messagesPerField.existsError('userLabel')>pf-m-error</#if>">
+                    <input type="text" id="userLabel" name="userLabel" autocomplete="off"
+                           aria-invalid="<#if messagesPerField.existsError('userLabel')>true</#if>"
+                    />
+
+                    <@field.errorIcon error=messagesPerField.get('userLabel')/>
+                </div>
+                <#if messagesPerField.existsError('userLabel')>
+                    <span id="input-error-otp-label" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                        ${messagesPerField.get('userLabel')}
+                    </span>
+                </#if>
+            </div>
+
+            <div class="${properties.kcFormGroupClass!}">
+                <@passwordCommons.logoutOtherSessions/>
+            </div>
+
+            <div class="pf-v5-c-form__group pf-m-action">
+                <div class="pf-v5-c-form__actions">
+                    <#if isAppInitiatedAction??>
+                        <input type="submit"
+                            class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}"
+                            id="saveTOTPBtn" value="${msg("doSubmit")}"
+                        />
+                        <button type="submit"
+                                class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!} ${properties.kcButtonLargeClass!}"
+                                id="cancelTOTPBtn" name="cancel-aia" value="true">${msg("doCancel")}
+                        </button>
+                    <#else>
+                        <input type="submit"
+                            class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
+                            id="saveTOTPBtn" value="${msg("doSubmit")}"
+                        />
+                    </#if>
+                </div>
+            </div>
+        </form>
+    </#if>
+</@layout.registrationLayout>

package/public/keycloak-upstream/v2/login/login-oauth-grant.ftl

@@ -0,0 +1,59 @@
+<#import "template.ftl" as layout>
+<#import "buttons.ftl" as buttons>
+<@layout.registrationLayout bodyClass="oauth"; section>
+    <#if section = "header">
+        <#if client.attributes.logoUri??>
+            <img src="${client.attributes.logoUri}"/>
+        </#if>
+        <p>
+        <#if client.name?has_content>
+            ${msg("oauthGrantTitle",advancedMsg(client.name))}
+        <#else>
+            ${msg("oauthGrantTitle",client.clientId)}
+        </#if>
+        </p>
+    <#elseif section = "form">
+        <div id="kc-oauth" class="content-area">
+            <h3>${msg("oauthGrantRequest")}</h3>
+            <ul class="${properties.kcListClass!}">
+                <#if oauth.clientScopesRequested??>
+                    <#list oauth.clientScopesRequested as clientScope>
+                        <li>
+                            <span><#if !clientScope.dynamicScopeParameter??>
+                                        ${advancedMsg(clientScope.consentScreenText)}
+                                    <#else>
+                                        ${advancedMsg(clientScope.consentScreenText)}: <b>${clientScope.dynamicScopeParameter}</b>
+                                </#if>
+                            </span>
+                        </li>
+                    </#list>
+                </#if>
+            </ul>
+            <#if client.attributes.policyUri?? || client.attributes.tosUri??>
+                <h3>
+                    <#if client.name?has_content>
+                        ${msg("oauthGrantInformation",advancedMsg(client.name))}
+                    <#else>
+                        ${msg("oauthGrantInformation",client.clientId)}
+                    </#if>
+                    <#if client.attributes.tosUri??>
+                        ${msg("oauthGrantReview")}
+                        <a href="${client.attributes.tosUri}" target="_blank">${msg("oauthGrantTos")}</a>
+                    </#if>
+                    <#if client.attributes.policyUri??>
+                        ${msg("oauthGrantReview")}
+                        <a href="${client.attributes.policyUri}" target="_blank">${msg("oauthGrantPolicy")}</a>
+                    </#if>
+                </h3>
+            </#if>
+
+            <form class="${properties.kcFormClass} ${properties.kcMarginTopClass!}" action="${url.oauthAction}" method="POST">
+                <input type="hidden" name="code" value="${oauth.code}">
+                <@buttons.actionGroup>
+                    <@buttons.button id="kc-login" name="accept" label="doYes"/>
+                    <@buttons.button id="kc-cancel" name="cancel" label="doNo" class=["kcButtonSecondaryClass"]/>
+                </@buttons.actionGroup>
+            </form>
+        </div>
+    </#if>
+</@layout.registrationLayout>

package/public/keycloak-upstream/v2/login/login-otp.ftl

@@ -0,0 +1,47 @@
+<#import "template.ftl" as layout>
+<#import "field.ftl" as field>
+<#import "buttons.ftl" as buttons>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('totp'); section>
+<!-- template: login-otp.ftl -->
+
+    <#if section="header">
+        ${msg("doLogIn")}
+    <#elseif section="form">
+        <form id="kc-otp-login-form" class="${properties.kcFormClass!}" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
+            <input id="selectedCredentialId" type="hidden" name="selectedCredentialId" value="${otpLogin.selectedCredentialId!''}">
+            <#if otpLogin.userOtpCredentials?size gt 1>
+                <div class="${properties.kcFormGroupClass!}">
+                    <div class="${properties.kcInputWrapperClass!}">
+                        <#list otpLogin.userOtpCredentials as otpCredential>
+                            <div id="kc-otp-credential-${otpCredential?index}" class="${properties.kcLoginOTPListClass!}"
+                                    onclick="toggleOTP(${otpCredential?index}, '${otpCredential.id}')">
+                                <span class="${properties.kcLoginOTPListItemHeaderClass!}">
+                                    <span class="${properties.kcLoginOTPListItemIconBodyClass!}">
+                                      <i class="${properties.kcLoginOTPListItemIconClass!}" aria-hidden="true"></i>
+                                    </span>
+                                    <span class="${properties.kcLoginOTPListItemTitleClass!}">${otpCredential.userLabel}</span>
+                                </span>
+                            </div>
+                        </#list>
+                    </div>
+                </div>
+            </#if>
+
+            <@field.input name="otp" label=msg("loginOtpOneTime") autocomplete="one-time-code" fieldName="totp" autofocus=true />
+
+            <@buttons.loginButton />
+        </form>
+        <script>
+            <#outputformat "JavaScript">
+            function toggleOTP(index, value) {
+                // select the clicked OTP credential
+                document.getElementById("selectedCredentialId").value = value;
+                // remove selected class from all OTP credentials
+                Array.from(document.getElementsByClassName(${properties.kcLoginOTPListSelectedClass!?c})).map(i => i.classList.remove(${properties.kcLoginOTPListSelectedClass!?c}));
+                // add selected class to the clicked OTP credential
+                document.getElementById("kc-otp-credential-" + index).classList.add(${properties.kcLoginOTPListSelectedClass!?c});
+            }
+            </#outputformat>
+        </script>
+    </#if>
+</@layout.registrationLayout>

package/public/keycloak-upstream/v2/login/login-password.ftl

@@ -0,0 +1,21 @@
+<#import "template.ftl" as layout>
+<#import "field.ftl" as field>
+<#import "buttons.ftl" as buttons>
+<#import "passkeys.ftl" as passkeys>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('password'); section>
+<!-- template: login-password.ftl -->
+    <#if section = "header">
+        ${msg("doLogIn")}
+    <#elseif section = "form">
+        <div id="kc-form">
+            <div id="kc-form-wrapper">
+                <form id="kc-form-login" class="${properties.kcFormClass!}" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
+                    <@field.password name="password" label=msg("password") forgotPassword=realm.resetPasswordAllowed autofocus=true autocomplete="current-password" />
+                    <@buttons.loginButton />
+                </form>
+            </div>
+        </div>
+        <@passkeys.conditionalUIData />
+    </#if>
+
+</@layout.registrationLayout>