keycloak-theme-editor 0.1.0

package/public/keycloak-upstream/v2/login/login-recovery-authn-code-config.ftl

@@ -0,0 +1,180 @@
+<#import "template.ftl" as layout>
+<#import "password-commons.ftl" as passwordCommons>
+<@layout.registrationLayout; section>
+<!-- template: login-recovery-authn-code-config.ftl -->
+<#if section = "header">
+    ${msg("recovery-code-config-header")}
+<#elseif section = "form">
+    <!-- warning -->
+    <div class="${properties.kcRecoveryCodesWarning!}" aria-label="Warning alert">
+        <div class="${properties.kcAlertIconClass!}">
+            <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
+        </div>
+        <h4 class="${properties.kcAlertTitleClass!}">
+            <span class="pf-screen-reader">Warning alert:</span>
+            ${msg("recovery-code-config-warning-title")}
+        </h4>
+        <div class="${properties.kcAlertDescriptionClass!}">
+            <p>${msg("recovery-code-config-warning-message")}</p>
+        </div>
+    </div>
+
+    <div class="${properties.kcPanelClass!}">
+        <div class="${properties.kcPanelMainClass!}">
+            <div class="${properties.kcPanelMainBodyClass!}">
+            <ol id="kc-recovery-codes-list" class="${properties.kcListClass!}" role="list">
+                <#list recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code>
+                    <li>${code[0..3]}-${code[4..7]}-${code[8..]}</li>
+                </#list>
+            </ol>
+            </div>
+        </div>
+    </div>
+
+    <!-- actions -->
+    <div class="${properties.kcRecoveryCodesActions!}">
+        <button id="printRecoveryCodes" class="${properties.kcButtonLinkClass}" type="button" onclick="printRecoveryCodes()">
+            <i class="fas fa-print"></i> ${msg("recovery-codes-print")}
+        </button>
+        <button id="downloadRecoveryCodes" class="${properties.kcButtonLinkClass}" type="button" onclick="downloadRecoveryCodes()">
+            <i class="fas fa-download"></i> ${msg("recovery-codes-download")}
+        </button>
+        <button id="copyRecoveryCodes" class="${properties.kcButtonLinkClass}" type="button" onclick="copyRecoveryCodes()">
+            <i class="fas fa-copy"></i> ${msg("recovery-codes-copy")}
+        </button>
+    </div>
+
+    <!-- confirmation checkbox -->
+    <div class="${properties.kcFormOptionsClass!} pf-v5-u-mt-md">
+        <input class="${properties.kcCheckInputClass!}" type="checkbox" id="kcRecoveryCodesConfirmationCheck" name="kcRecoveryCodesConfirmationCheck"
+        onchange="document.getElementById('saveRecoveryAuthnCodesBtn').disabled = !this.checked;"
+        />
+        <label for="kcRecoveryCodesConfirmationCheck">${msg("recovery-codes-confirmation-message")}</label>
+    </div>
+
+    <form action="${url.loginAction}" class="${properties.kcFormGroupClass!}" id="kc-recovery-codes-settings-form" method="post">
+        <input type="hidden" name="generatedRecoveryAuthnCodes" value="${recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString}" />
+        <input type="hidden" name="generatedAt" value="${recoveryAuthnCodesConfigBean.generatedAt?c}" />
+        <input type="hidden" id="userLabel" name="userLabel" value="${msg("recovery-codes-label-default")}" />
+        <@passwordCommons.logoutOtherSessions/>
+
+        <#if isAppInitiatedAction??>
+            <input type="submit"
+            class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}"
+            id="saveRecoveryAuthnCodesBtn" value="${msg("recovery-codes-action-complete")}"
+            disabled
+            />
+            <button type="submit"
+                class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!} pf-m-link"
+                id="cancelRecoveryAuthnCodesBtn" name="cancel-aia" value="true">${msg("recovery-codes-action-cancel")}
+            </button>
+        <#else>
+            <input type="submit"
+            class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
+            id="saveRecoveryAuthnCodesBtn" value="${msg("recovery-codes-action-complete")}"
+            disabled
+            />
+        </#if>
+    </form>
+
+    <script>
+        /* copy recovery codes  */
+        function copyRecoveryCodes() {
+            const tmpTextarea = document.createElement("textarea");
+            tmpTextarea.innerHTML = parseRecoveryCodeList();
+            document.body.appendChild(tmpTextarea);
+            tmpTextarea.select();
+            document.execCommand("copy");
+            document.body.removeChild(tmpTextarea);
+        }
+
+        /* download recovery codes  */
+        function formatCurrentDateTime() {
+            const dt = new Date();
+            const options = {
+                month: 'long',
+                day: 'numeric',
+                year: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                timeZoneName: 'short'
+            };
+
+            return dt.toLocaleString('en-US', options);
+        }
+
+        function parseRecoveryCodeList() {
+            const recoveryCodes = document.getElementById("kc-recovery-codes-list").getElementsByTagName("li");
+            let recoveryCodeList = "";
+
+            for (let i = 0; i < recoveryCodes.length; i++) {
+                const recoveryCodeLiElement = recoveryCodes[i].innerText;
+                <#noparse>
+                recoveryCodeList += `${i+1}: ${recoveryCodeLiElement}\r\n`;
+                </#noparse>
+            }
+
+            return recoveryCodeList;
+        }
+
+        function buildDownloadContent() {
+            const recoveryCodeList = parseRecoveryCodeList();
+            const dt = new Date();
+            const options = {
+                month: 'long',
+                day: 'numeric',
+                year: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                timeZoneName: 'short'
+            };
+
+            return fileBodyContent =
+                "${msg("recovery-codes-download-file-header")}\n\n" +
+                recoveryCodeList + "\n" +
+                "${msg("recovery-codes-download-file-description")}\n\n" +
+                "${msg("recovery-codes-download-file-date")} " + formatCurrentDateTime();
+        }
+
+        function setUpDownloadLinkAndDownload(filename, text) {
+            const el = document.createElement('a');
+            el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+            el.setAttribute('download', filename);
+            el.style.display = 'none';
+            document.body.appendChild(el);
+            el.click();
+            document.body.removeChild(el);
+        }
+
+        function downloadRecoveryCodes() {
+            setUpDownloadLinkAndDownload('kc-download-recovery-codes.txt', buildDownloadContent());
+        }
+
+        /* print recovery codes */
+        function buildPrintContent() {
+            const recoveryCodeListHTML = document.getElementById('kc-recovery-codes-list').parentNode.innerHTML;
+            const styles =
+                `@page { size: auto;  margin-top: 0; }
+                body { width: 480px; }
+                div { font-family: monospace }
+                p:first-of-type { margin-top: 48px }`;
+
+            return printFileContent =
+                "<html><style>" + styles + "</style><body>" +
+                "<title>kc-download-recovery-codes</title>" +
+                "<p>${msg("recovery-codes-download-file-header")}</p>" +
+                "<div>" + recoveryCodeListHTML + "</div>" +
+                "<p>${msg("recovery-codes-download-file-description")}</p>" +
+                "<p>${msg("recovery-codes-download-file-date")} " + formatCurrentDateTime() + "</p>" +
+                "</body></html>";
+        }
+
+        function printRecoveryCodes() {
+            const w = window.open();
+            w.document.write(buildPrintContent());
+            w.print();
+            w.close();
+        }
+    </script>
+</#if>
+</@layout.registrationLayout>

package/public/keycloak-upstream/v2/login/login-recovery-authn-code-input.ftl

@@ -0,0 +1,15 @@
+<#import "template.ftl" as layout>
+<#import "field.ftl" as field>
+<#import "buttons.ftl" as buttons>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('recoveryCodeInput'); section>
+<!-- template: login-recovery-authn-code-input.ftl -->
+    <#if section = "header">
+        ${msg("auth-recovery-code-header")}
+    <#elseif section = "form">
+        <form id="kc-recovery-code-login-form" class="${properties.kcFormClass!}" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
+            <@field.input name="recoveryCodeInput" label=msg("auth-recovery-code-prompt", recoveryAuthnCodesInputBean.codeNumber?c) autofocus=true />
+
+            <@buttons.loginButton />
+        </form>
+    </#if>
+</@layout.registrationLayout>

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

@@ -0,0 +1,29 @@
+<#import "template.ftl" as layout>
+<#import "field.ftl" as field>
+<#import "buttons.ftl" as buttons>
+<@layout.registrationLayout displayInfo=true displayMessage=!messagesPerField.existsError('username'); section>
+    <#if section = "header">
+        ${msg("emailForgotTitle")}
+    <#elseif section = "form">
+        <form id="kc-reset-password-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+            <#assign label>
+                <#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
+            </#assign>
+            <@field.input name="username" label=label value=auth.attemptedUsername!'' autofocus=true />
+
+            <@buttons.actionGroup>
+              <@buttons.button id="kc-form-buttons" label="doSubmit" class=["kcButtonPrimaryClass", "kcButtonBlockClass"]/>
+              <@buttons.buttonLink href=url.loginUrl label="backToLogin" class=["kcButtonSecondaryClass", "kcButtonBlockClass"]/>
+            </@buttons.actionGroup>
+
+        </form>
+    <#elseif section = "info" >
+        <span class="${properties.kcLoginMainFooterHelperText!}">
+            <#if realm.duplicateEmailsAllowed>
+                ${msg("emailInstructionUsername")}
+            <#else>
+                ${msg("emailInstruction")}
+            </#if>
+        </span>
+    </#if>
+</@layout.registrationLayout>

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

@@ -0,0 +1,32 @@
+<#import "template.ftl" as layout>
+<#import "password-commons.ftl" as passwordCommons>
+<#import "field.ftl" as field>
+<#import "buttons.ftl" as buttons>
+<#import "password-validation.ftl" as validator>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('password','password-confirm'); section>
+<!-- template: login-update-password.ftl -->
+    <#if section = "header">
+        ${msg("updatePasswordTitle")}
+    <#elseif section = "form">
+        <form id="kc-passwd-update-form" class="${properties.kcFormClass!}" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post" novalidate="novalidate">
+            <@field.password name="password-new" label=msg("passwordNew") fieldName="password" autocomplete="new-password" autofocus=true />
+            <@field.password name="password-confirm" label=msg("passwordConfirm") autocomplete="new-password" />
+
+            <div class="${properties.kcFormGroupClass!}">
+                <@passwordCommons.logoutOtherSessions/>
+            </div>
+
+            <@buttons.actionGroup horizontal=true>
+                <#if isAppInitiatedAction??>
+                    <@buttons.button id="kc-submit" name="login" label="doSubmit" class=["kcButtonPrimaryClass"]/>
+                    <@buttons.button id="kc-cancel" label="doCancel" name="cancel-aia" class=["kcButtonSecondaryClass"]/>
+                <#else>
+                    <@buttons.button id="kc-submit" name="login" label="doSubmit" class=["kcButtonPrimaryClass", "kcButtonBlockClass"]/>
+                </#if>
+            </@buttons.actionGroup>
+        </form>
+
+        <@validator.templates/>
+        <@validator.script field="password-new"/>
+    </#if>
+</@layout.registrationLayout>

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

@@ -0,0 +1,51 @@
+<#import "template.ftl" as layout>
+<#import "field.ftl" as field>
+<#import "buttons.ftl" as buttons>
+<#import "social-providers.ftl" as identityProviders>
+<#import "passkeys.ftl" as passkeys>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username') displayInfo=(realm.password && realm.registrationAllowed && !registrationDisabled??); section>
+<!-- template: login-username.ftl -->
+
+    <#if section = "header">
+        ${msg("loginAccountTitle")}
+    <#elseif section = "form">
+        <div id="kc-form">
+            <div id="kc-form-wrapper">
+                <#if realm.password>
+                    <form id="kc-form-login" class="${properties.kcFormClass!}" onsubmit="login.disabled = true; return true;" action="${url.loginAction}"
+                          method="post">
+                        <#if !usernameHidden??>
+                            <div class="${properties.kcFormGroupClass!}">
+                                <#assign label>
+                                    <#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
+                                </#assign>
+                                <@field.input name="username" label=label value=login.username!'' autofocus=true autocomplete="${(enableWebAuthnConditionalUI?has_content)?then('username webauthn', 'username')}" />
+                            </div>
+                        </#if>
+
+                        <div class="${properties.kcFormGroupClass!}">
+                            <#if realm.rememberMe && !usernameHidden??>
+                                <@field.checkbox name="rememberMe" label=msg("rememberMe") value=login.rememberMe?? />
+                            </#if>
+                        </div>
+
+                        <@buttons.loginButton />
+                    </form>
+                </#if>
+            </div>
+        </div>
+        <@passkeys.conditionalUIData />
+
+    <#elseif section = "info" >
+        <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
+            <div id="kc-registration">
+                <span>${msg("noAccount")} <a href="${url.registrationUrl}">${msg("doRegister")}</a></span>
+            </div>
+        </#if>
+    <#elseif section = "socialProviders" >
+        <#if realm.password && social.providers?? && social.providers?has_content>
+            <@identityProviders.show social=social />
+        </#if>
+    </#if>
+
+</@layout.registrationLayout>

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

@@ -0,0 +1,56 @@
+<#import "template.ftl" as layout>
+<#import "field.ftl" as field>
+<#import "buttons.ftl" as buttons>
+<#import "social-providers.ftl" as identityProviders>
+<#import "passkeys.ftl" as passkeys>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
+<!-- template: login.ftl -->
+
+    <#if section = "header">
+        ${msg("loginAccountTitle")}
+    <#elseif section = "form">
+        <div id="kc-form">
+          <div id="kc-form-wrapper">
+            <#if realm.password>
+                <form id="kc-form-login" class="${properties.kcFormClass!}" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post" novalidate="novalidate">
+                    <#if !usernameHidden??>
+                        <#assign label>
+                            <#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
+                        </#assign>
+                        <@field.input name="username" label=label error=messagesPerField.getFirstError('username','password')
+                            autofocus=true autocomplete="${(enableWebAuthnConditionalUI?has_content)?then('username webauthn', 'username')}" value=login.username!'' />
+                        <@field.password name="password" label=msg("password") error="" forgotPassword=realm.resetPasswordAllowed autofocus=usernameHidden?? autocomplete="current-password">
+                            <#if realm.rememberMe && !usernameHidden??>
+                                <@field.checkbox name="rememberMe" label=msg("rememberMe") value=login.rememberMe?? />
+                            </#if>
+                        </@field.password>
+                    <#else>
+                        <@field.password name="password" label=msg("password") forgotPassword=realm.resetPasswordAllowed autofocus=usernameHidden?? autocomplete="current-password">
+                            <#if realm.rememberMe && !usernameHidden??>
+                                <@field.checkbox name="rememberMe" label=msg("rememberMe") value=login.rememberMe?? />
+                            </#if>
+                        </@field.password>
+                    </#if>
+
+                    <input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
+                    <@buttons.loginButton />
+                </form>
+            </#if>
+            </div>
+        </div>
+        <@passkeys.conditionalUIData />
+    <#elseif section = "socialProviders" >
+        <#if realm.password && social.providers?? && social.providers?has_content>
+            <@identityProviders.show social=social/>
+        </#if>
+    <#elseif section = "info" >
+        <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
+            <div id="kc-registration-container">
+                <div id="kc-registration">
+                    <span>${msg("noAccount")} <a href="${url.registrationUrl}">${msg("doRegister")}</a></span>
+                </div>
+            </div>
+        </#if>
+    </#if>
+
+</@layout.registrationLayout>

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

@@ -0,0 +1,8 @@
+<#import "field.ftl" as field>
+<#macro logoutOtherSessions>
+    <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
+        <div class="${properties.kcFormOptionsWrapperClass!}"> 
+            <@field.checkbox name="logout-sessions" label=msg("logoutOtherSessions") value=false />
+        </div>
+    </div>
+</#macro>

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

@@ -0,0 +1,53 @@
+<#macro templates>
+    <template id="errorTemplate">
+        <div class="${properties.kcFormHelperTextClass}" aria-live="polite">
+            <div class="${properties.kcInputHelperTextClass}">
+                <div class="${properties.kcInputHelperTextItemClass} ${properties.kcError}">
+                    <ul class="${properties.kcInputErrorMessageClass}">
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </template>
+    <template id="errorItemTemplate">
+        <li></li>
+    </template>
+</#macro>
+
+<#macro script field="">
+    <script type="module">
+        <#outputformat "JavaScript">
+        import { validatePassword } from "${url.resourcesPath}/js/password-policy.js";
+
+        const activePolicies = [
+            { name: "length", policy: { value: ${passwordPolicies.length!-1}, error: ${msg('invalidPasswordMinLengthMessage')?c} } },
+            { name: "maxLength", policy: { value: ${passwordPolicies.maxLength!-1}, error: ${msg('invalidPasswordMaxLengthMessage')?c} } },
+            { name: "lowerCase", policy: { value: ${passwordPolicies.lowerCase!-1}, error: ${msg('invalidPasswordMinLowerCaseCharsMessage')?c} } },
+            { name: "upperCase", policy: { value: ${passwordPolicies.upperCase!-1}, error: ${msg('invalidPasswordMinUpperCaseCharsMessage')?c} } },
+            { name: "digits", policy: { value: ${passwordPolicies.digits!-1}, error: ${msg('invalidPasswordMinDigitsMessage')?c} } },
+            { name: "specialChars", policy: { value: ${passwordPolicies.specialChars!-1}, error: ${msg('invalidPasswordMinSpecialCharsMessage')?c} } }
+        ].filter(p => p.policy.value !== -1);
+
+        document.getElementById("${field}").addEventListener("change", (event) => {
+
+            const errorContainer = document.getElementById("input-error-container-${field}");
+            const template = document.querySelector("#errorTemplate").content.cloneNode(true);
+            const errors = validatePassword(event.target.value, activePolicies);
+
+            if (errors.length === 0) {
+                errorContainer.replaceChildren();
+                return;
+            }
+
+            const errorList = template.querySelector("ul");
+            const htmlErrors = errors.forEach((e) => {
+                const row = document.querySelector("#errorItemTemplate").content.cloneNode(true);
+                const li = row.querySelector("li");
+                li.textContent = e;
+                errorList.appendChild(li);
+            });
+            errorContainer.replaceChildren(template);
+        });
+    </#outputformat>
+    </script>
+</#macro>

package/public/keycloak-upstream/v2/login/register-commons.ftl

@@ -0,0 +1,27 @@
+<#macro termsAcceptance>
+    <#if termsAcceptanceRequired??>
+        <div class="form-group">
+            <div class="${properties.kcInputWrapperClass!}">
+                ${msg("termsTitle")}
+                <div id="kc-registration-terms-text">
+                    ${kcSanitize(msg("termsText"))?no_esc}
+                </div>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="${properties.kcLabelWrapperClass!}">
+                <input type="checkbox" id="termsAccepted" name="termsAccepted" class="${properties.kcCheckboxInputClass!}"
+                       aria-invalid="<#if messagesPerField.existsError('termsAccepted')>true</#if>"
+                />
+                <label for="termsAccepted" class="${properties.kcLabelClass!}">${msg("acceptTerms")}</label>
+            </div>
+            <#if messagesPerField.existsError('termsAccepted')>
+                <div class="${properties.kcLabelWrapperClass!}">
+                            <span id="input-error-terms-accepted" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                ${messagesPerField.get('termsAccepted')}
+                            </span>
+                </div>
+            </#if>
+        </div>
+    </#if>
+</#macro>

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

@@ -0,0 +1,68 @@
+<#import "template.ftl" as layout>
+<#import "field.ftl" as field>
+<#import "user-profile-commons.ftl" as userProfileCommons>
+<#import "register-commons.ftl" as registerCommons>
+<#import "password-validation.ftl" as validator>
+<@layout.registrationLayout displayMessage=messagesPerField.exists('global') displayRequiredFields=true; section>
+<!-- template: register.ftl -->
+
+    <#if section = "header">
+        <#if messageHeader??>
+            ${msg(messageHeader)}
+        <#else>
+            ${msg("registerTitle")}
+        </#if>
+    <#elseif section = "form">
+        <form id="kc-register-form" class="${properties.kcFormClass!}" action="${url.registrationAction}" method="post" novalidate="novalidate">
+            <@userProfileCommons.userProfileFormFields; callback, attribute>
+                <#if callback = "afterField">
+                <#-- render password fields just under the username or email (if used as username) -->
+                    <#if passwordRequired?? && (attribute.name == 'username' || (attribute.name == 'email' && realm.registrationEmailAsUsername))>
+                        <@field.password name="password" required=true label=msg("password") autocomplete="new-password" />
+                        <@field.password name="password-confirm" required=true label=msg("passwordConfirm") autocomplete="new-password" />
+                    </#if>
+                </#if>
+            </@userProfileCommons.userProfileFormFields>
+
+            <@registerCommons.termsAcceptance/>
+
+            <#if recaptchaRequired?? && (recaptchaVisible!false)>
+                <div class="form-group">
+                    <div class="${properties.kcInputWrapperClass!}">
+                        <div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}" data-action="${recaptchaAction}"></div>
+                    </div>
+                </div>
+            </#if>
+
+            <#if recaptchaRequired?? && !(recaptchaVisible!false)>
+                <script>
+                    function onSubmitRecaptcha(token) {
+                        document.getElementById("kc-register-form").requestSubmit();
+                    }
+                </script>
+                <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
+                    <button class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!} g-recaptcha"
+                            data-sitekey="${recaptchaSiteKey}" data-callback="onSubmitRecaptcha" data-action="${recaptchaAction}" type="submit" id="kc-submit">
+                        ${msg("doRegister")}
+                    </button>
+                </div>
+            <#else>
+                <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
+                    <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doRegister")}"/>
+                </div>
+            </#if>
+
+            <div class="${properties.kcFormGroupClass!} pf-v5-c-login__main-footer-band">
+                <div id="kc-form-options" class="${properties.kcFormOptionsClass!} pf-v5-c-login__main-footer-band-item">
+                    <div class="${properties.kcFormOptionsWrapperClass!}">
+                        <span><a href="${url.loginUrl}">${msg("backToLogin")}</a></span>
+                    </div>
+                </div>
+            </div>
+
+        </form>
+
+        <@validator.templates/>
+        <@validator.script field="password"/>
+    </#if>
+</@layout.registrationLayout>

package/public/keycloak-upstream/v2/login/select-authenticator.ftl

@@ -0,0 +1,41 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayInfo=false; section>
+<!-- template: select-authenticator.ftl -->
+
+    <#if section = "header" || section = "show-username">
+        <#if section = "header">
+            ${msg("loginChooseAuthenticator")}
+        </#if>
+    <#elseif section = "form">
+
+    <ul class="${properties.kcSelectAuthListClass!}" role="list">
+        <#list auth.authenticationSelections as authenticationSelection>
+            <li class="${properties.kcSelectAuthListItemWrapperClass!}">
+                <form id="kc-select-credential-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+                    <input type="hidden" name="authenticationExecution" value="${authenticationSelection.authExecId}">
+                </form>
+                <div class="${properties.kcSelectAuthListItemClass!}" onclick="document.forms[${authenticationSelection?index}].requestSubmit()">
+                    <div class="pf-v5-c-data-list__item-content">
+                        <div class="${properties.kcSelectAuthListItemIconClass!}">
+                            <i class="${properties['${authenticationSelection.iconCssClass}']!authenticationSelection.iconCssClass} ${properties.kcSelectAuthListItemIconPropertyClass!}"></i>
+                        </div>
+                        <div class="${properties.kcSelectAuthListItemBodyClass!}">
+                            <h2 class="${properties.kcSelectAuthListItemHeadingClass!}">
+                                ${msg('${authenticationSelection.displayName}')}
+                            </h2>
+                        </div>
+                        <div class="${properties.kcSelectAuthListItemDescriptionClass!}">
+                            ${msg('${authenticationSelection.helpText}')}
+                        </div>
+                    </div>
+                    <div class="${properties.kcSelectAuthListItemFillClass!}">
+                        <i class="${properties.kcSelectAuthListItemArrowIconClass!}" aria-hidden="true"></i>
+                    </div>
+                </div>
+            </li>
+        </#list>
+    </ul>
+
+    </#if>
+</@layout.registrationLayout>
+