keycloak-theme-editor 0.1.0

package/dist/keycloak-upstream/base/login/login-recovery-authn-code-config.ftl

@@ -0,0 +1,186 @@
+<#import "template.ftl" as layout>
+<#import "password-commons.ftl" as passwordCommons>
+<@layout.registrationLayout; section>
+
+<#if section = "header">
+    ${msg("recovery-code-config-header")}
+<#elseif section = "form">
+    <!-- warning -->
+    <div class="pf-c-alert pf-m-warning pf-m-inline ${properties.kcRecoveryCodesWarning!}" aria-label="Warning alert">
+        <div class="pf-c-alert__icon">
+            <i class="pficon-warning-triangle-o" aria-hidden="true"></i>
+        </div>
+        <h4 class="pf-c-alert__title">
+            <span class="pf-screen-reader">Warning alert:</span>
+            ${msg("recovery-code-config-warning-title")}
+        </h4>
+        <div class="pf-c-alert__description">
+            <p>${msg("recovery-code-config-warning-message")}</p>
+        </div>
+    </div>
+
+    <ol id="kc-recovery-codes-list" class="${properties.kcRecoveryCodesList!}">
+        <#list recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code>
+            <li><span>${code?counter}:</span> ${code[0..3]}-${code[4..7]}-${code[8..]}</li>
+        </#list>
+    </ol>
+
+    <!-- actions -->
+    <div class="${properties.kcRecoveryCodesActions!}">
+        <button id="printRecoveryCodes" class="pf-c-button pf-m-link" type="button">
+            <i class="pficon-print"></i> ${msg("recovery-codes-print")}
+        </button>
+        <button id="downloadRecoveryCodes" class="pf-c-button pf-m-link" type="button">
+            <i class="pficon-save"></i> ${msg("recovery-codes-download")}
+        </button>
+        <button id="copyRecoveryCodes" class="pf-c-button pf-m-link" type="button">
+            <i class="pficon-blueprint"></i> ${msg("recovery-codes-copy")}
+        </button>
+    </div>
+
+    <!-- confirmation checkbox -->
+    <div class="${properties.kcFormOptionsClass!}">
+        <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!} ${properties.kcButtonLargeClass!}"
+                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() {
+            var tmpTextarea = document.createElement("textarea");
+            var codes = document.querySelectorAll("#kc-recovery-codes-list li");
+            for (i = 0; i < codes.length; i++) {
+                tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\n";
+            }
+            document.body.appendChild(tmpTextarea);
+            tmpTextarea.select();
+            document.execCommand("copy");
+            document.body.removeChild(tmpTextarea);
+        }
+
+        var copyButton = document.getElementById("copyRecoveryCodes");
+        copyButton && copyButton.addEventListener("click", function () {
+            copyRecoveryCodes();
+        });
+
+        /* download recovery codes  */
+        function formatCurrentDateTime() {
+            var dt = new Date();
+            var options = {
+                month: 'long',
+                day: 'numeric',
+                year: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                timeZoneName: 'short'
+            };
+
+            return dt.toLocaleString('en-US', options);
+        }
+
+        function parseRecoveryCodeList() {
+            var recoveryCodes = document.querySelectorAll("#kc-recovery-codes-list li");
+            var recoveryCodeList = "";
+
+            for (var i = 0; i < recoveryCodes.length; i++) {
+                var recoveryCodeLiElement = recoveryCodes[i].innerText;
+                recoveryCodeList += recoveryCodeLiElement + "\r\n";
+            }
+
+            return recoveryCodeList;
+        }
+
+        function buildDownloadContent() {
+            var recoveryCodeList = parseRecoveryCodeList();
+            var dt = new Date();
+            var 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) {
+            var 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());
+        }
+
+        var downloadButton = document.getElementById("downloadRecoveryCodes");
+        downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
+
+        /* print recovery codes */
+        function buildPrintContent() {
+            var recoveryCodeListHTML = document.getElementById('kc-recovery-codes-list').innerHTML;
+            var styles =
+                `@page { size: auto;  margin-top: 0; }
+                body { width: 480px; }
+                div { list-style-type: none; 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() {
+            var w = window.open();
+            w.document.write(buildPrintContent());
+            w.print();
+            w.close();
+        }
+
+        var printButton = document.getElementById("printRecoveryCodes");
+        printButton && printButton.addEventListener("click", printRecoveryCodes);
+    </script>
+</#if>
+</@layout.registrationLayout>

package/dist/keycloak-upstream/base/login/login-recovery-authn-code-input.ftl

@@ -0,0 +1,46 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('recoveryCodeInput'); section>
+
+    <#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">
+            <div class="${properties.kcFormGroupClass!}">
+                <div class="${properties.kcLabelWrapperClass!}">
+                    <label for="recoveryCodeInput" class="${properties.kcLabelClass!}">${msg("auth-recovery-code-prompt", recoveryAuthnCodesInputBean.codeNumber?c)}</label>
+                </div>
+
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input tabindex="1" id="recoveryCodeInput"
+                           name="recoveryCodeInput"
+                           aria-invalid="<#if messagesPerField.existsError('recoveryCodeInput')>true</#if>"
+                           autocomplete="one-time-code"
+                           type="text"
+                           class="${properties.kcInputClass!}"
+                           inputmode="numeric"
+                           autofocus
+                           dir="ltr"/>
+
+                    <#if messagesPerField.existsError('recoveryCodeInput')>
+                        <span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                            ${kcSanitize(messagesPerField.get('recoveryCodeInput'))?no_esc}
+                        </span>
+                    </#if>
+                </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>
+        </form>
+    </#if>
+</@layout.registrationLayout>

package/dist/keycloak-upstream/base/login/login-reset-otp.ftl

@@ -0,0 +1,33 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('totp'); section>
+    <#if section="header">
+        ${msg("doLogIn")}
+    <#elseif section="form">
+        <form id="kc-otp-reset-form" class="${properties.kcFormClass!}" action="${url.loginAction}"
+              method="post">
+            <div class="${properties.kcFormGroupClass!}">
+                <div class="${properties.kcInputWrapperClass!}">
+                    <p id="kc-otp-reset-form-description">${msg("otp-reset-description")}</p>
+
+                    <#list configuredOtpCredentials.userOtpCredentials as otpCredential>
+                        <input id="kc-otp-credential-${otpCredential?index}" class="${properties.kcLoginOTPListInputClass!}" type="radio" name="selectedCredentialId" value="${otpCredential.id}" <#if otpCredential.id == configuredOtpCredentials.selectedCredentialId>checked="checked"</#if>>
+                        <label for="kc-otp-credential-${otpCredential?index}" class="${properties.kcLoginOTPListClass!}" tabindex="${otpCredential?index}">
+                                    <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>
+                        </label>
+                    </#list>
+
+                    <div class="${properties.kcFormGroupClass!}">
+                        <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
+                            <input id="kc-otp-reset-form-submit" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </#if>
+</@layout.registrationLayout>

package/dist/keycloak-upstream/base/login/login-reset-password.ftl

@@ -0,0 +1,39 @@
+<#import "template.ftl" as layout>
+<@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">
+            <div class="${properties.kcFormGroupClass!}">
+                <div class="${properties.kcLabelWrapperClass!}">
+                    <label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
+                </div>
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input type="text" id="username" name="username" class="${properties.kcInputClass!}" autofocus value="${(auth.attemptedUsername!'')}" aria-invalid="<#if messagesPerField.existsError('username')>true</#if>" dir="ltr"/>
+                    <#if messagesPerField.existsError('username')>
+                        <span id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                    ${kcSanitize(messagesPerField.get('username'))?no_esc}
+                        </span>
+                    </#if>
+                </div>
+            </div>
+            <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
+                <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
+                    <div class="${properties.kcFormOptionsWrapperClass!}">
+                        <span><a href="${url.loginUrl}">${msg("backToLogin")}</a></span>
+                    </div>
+                </div>
+
+                <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
+                    <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}"/>
+                </div>
+            </div>
+        </form>
+    <#elseif section = "info" >
+        <#if realm.duplicateEmailsAllowed>
+            ${msg("emailInstructionUsername")}
+        <#else>
+            ${msg("emailInstruction")}
+        </#if>
+    </#if>
+</@layout.registrationLayout>

package/dist/keycloak-upstream/base/login/login-update-password.ftl

@@ -0,0 +1,77 @@
+<#import "template.ftl" as layout>
+<#import "password-commons.ftl" as passwordCommons>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('password','password-confirm'); section>
+    <#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">
+            <div class="${properties.kcFormGroupClass!}">
+                <div class="${properties.kcLabelWrapperClass!}">
+                    <label for="password-new" class="${properties.kcLabelClass!}">${msg("passwordNew")}</label>
+                </div>
+                <div class="${properties.kcInputWrapperClass!}">
+                    <div class="${properties.kcInputGroup!}" dir="ltr">
+                        <input type="password" id="password-new" name="password-new" class="${properties.kcInputClass!}"
+                               autofocus autocomplete="new-password"
+                               aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
+                        />
+                        <button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg('showPassword')}"
+                                aria-controls="password-new"  data-password-toggle
+                                data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
+                                data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
+                            <i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
+                        </button>
+                    </div>
+
+                    <#if messagesPerField.existsError('password')>
+                        <span id="input-error-password" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                            ${kcSanitize(messagesPerField.get('password'))?no_esc}
+                        </span>
+                    </#if>
+                </div>
+            </div>
+
+            <div class="${properties.kcFormGroupClass!}">
+                <div class="${properties.kcLabelWrapperClass!}">
+                    <label for="password-confirm" class="${properties.kcLabelClass!}">${msg("passwordConfirm")}</label>
+                </div>
+                <div class="${properties.kcInputWrapperClass!}">
+                    <div class="${properties.kcInputGroup!}" dir="ltr">
+                        <input type="password" id="password-confirm" name="password-confirm"
+                               class="${properties.kcInputClass!}"
+                               autocomplete="new-password"
+                               aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
+                        />
+                        <button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg('showPassword')}"
+                                aria-controls="password-confirm"  data-password-toggle
+                                data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
+                                data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
+                            <i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
+                        </button>
+                    </div>
+
+                    <#if messagesPerField.existsError('password-confirm')>
+                        <span id="input-error-password-confirm" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                            ${kcSanitize(messagesPerField.get('password-confirm'))?no_esc}
+                        </span>
+                    </#if>
+
+                </div>
+            </div>
+
+            <div class="${properties.kcFormGroupClass!}">
+                <@passwordCommons.logoutOtherSessions/>
+
+                <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
+                    <#if isAppInitiatedAction??>
+                        <input name="login" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
+                        <button class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" type="submit" name="cancel-aia" value="true">${msg("doCancel")}</button>
+                    <#else>
+                        <input name="login" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
+                    </#if>
+                </div>
+            </div>
+        </form>
+        <script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
+    </#if>
+</@layout.registrationLayout>

package/dist/keycloak-upstream/base/login/login-update-profile.ftl

@@ -0,0 +1,28 @@
+<#import "template.ftl" as layout>
+<#import "user-profile-commons.ftl" as userProfileCommons>
+<@layout.registrationLayout displayMessage=messagesPerField.exists('global') displayRequiredFields=true; section>
+    <#if section = "header">
+        ${msg("loginProfileTitle")}
+    <#elseif section = "form">
+        <form id="kc-update-profile-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+
+            <@userProfileCommons.userProfileFormFields/>
+
+            <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!}">
+                    <#if isAppInitiatedAction??>
+                        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
+                        <button class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" type="submit" name="cancel-aia" value="true" formnovalidate>${msg("doCancel")}</button>
+                    <#else>
+                        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
+                    </#if>
+                </div>
+            </div>
+        </form>
+    </#if>
+</@layout.registrationLayout>

package/dist/keycloak-upstream/base/login/login-username.ftl

@@ -0,0 +1,92 @@
+<#import "template.ftl" as layout>
+<#import "passkeys.ftl" as passkeys>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username') displayInfo=(realm.password && realm.registrationAllowed && !registrationDisabled??); section>
+    <#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" onsubmit="login.disabled = true; return true;" action="${url.loginAction}"
+                          method="post">
+                        <#if !usernameHidden??>
+                            <div class="${properties.kcFormGroupClass!}">
+                                <label for="username"
+                                       class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
+
+                                <input tabindex="1" id="username"
+                                       aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"
+                                       class="${properties.kcInputClass!}" name="username"
+                                       value="${(login.username!'')}"
+                                       type="text" autofocus
+                                       autocomplete="${(enableWebAuthnConditionalUI?has_content)?then('username webauthn', 'username')}"
+                                       dir="ltr"/>
+
+                                <#if messagesPerField.existsError('username')>
+                                    <span id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                        ${kcSanitize(messagesPerField.get('username'))?no_esc}
+                                    </span>
+                                </#if>
+                            </div>
+                        </#if>
+
+                        <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
+                            <div id="kc-form-options">
+                                <#if realm.rememberMe && !usernameHidden??>
+                                    <div class="checkbox">
+                                        <label>
+                                            <#if login.rememberMe??>
+                                                <input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox"
+                                                       checked> ${msg("rememberMe")}
+                                            <#else>
+                                                <input tabindex="3" id="rememberMe" name="rememberMe"
+                                                       type="checkbox"> ${msg("rememberMe")}
+                                            </#if>
+                                        </label>
+                                    </div>
+                                </#if>
+                            </div>
+                        </div>
+
+                        <div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
+                            <input tabindex="4"
+                                   class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
+                                   name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
+                        </div>
+                    </form>
+                </#if>
+            </div>
+        </div>
+        <@passkeys.conditionalUIData />
+
+    <#elseif section = "info" >
+        <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
+            <div id="kc-registration">
+                <span>${msg("noAccount")} <a tabindex="6" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
+            </div>
+        </#if>
+    <#elseif section = "socialProviders" >
+        <#if realm.password && social?? && social.providers?has_content>
+            <div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
+                <hr/>
+                <h4>${msg("identity-provider-login-label")}</h4>
+
+                <ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
+                    <#list social.providers as p>
+                        <a data-once-link data-disabled-class="${properties.kcFormSocialAccountListButtonDisabledClass!}" id="social-${p.alias}"
+                                class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
+                                type="button" href="${p.loginUrl}">
+                            <#if p.iconClasses?has_content>
+                                <i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>
+                                <span class="${properties.kcFormSocialAccountNameClass!} kc-social-icon-text">${p.displayName!}</span>
+                            <#else>
+                                <span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
+                            </#if>
+                        </a>
+                    </#list>
+                </ul>
+            </div>
+        </#if>
+    </#if>
+
+</@layout.registrationLayout>

package/dist/keycloak-upstream/base/login/login-verify-email.ftl

@@ -0,0 +1,36 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayInfo=true; section>
+    <#if section = "header">
+        ${msg("emailVerifyTitle")}
+    <#elseif section = "form">
+        <p class="instruction">
+            <#if verifyEmail??>
+                ${msg("emailVerifyInstruction1",verifyEmail)}
+            <#else>
+                ${msg("emailVerifyInstruction4",user.email)}
+            </#if>
+        </p>
+        <#if isAppInitiatedAction??>
+            <form id="kc-verify-email-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+                <div class="${properties.kcFormGroupClass!}">
+                    <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
+                        <#if verifyEmail??>
+                            <input class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("emailVerifyResend")}" />
+                        <#else>
+                            <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("emailVerifySend")}" />
+                        </#if>
+                        <button class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" type="submit" name="cancel-aia" value="true" formnovalidate>${msg("doCancel")}</button>
+                    </div>
+                </div>
+            </form>
+        </#if>
+    <#elseif section = "info">
+        <#if !isAppInitiatedAction??>
+            <p class="instruction">
+                ${msg("emailVerifyInstruction2")}
+                <br/>
+                <a href="${url.loginAction}">${msg("doClickHere")}</a> ${msg("emailVerifyInstruction3")}
+            </p>
+        </#if>
+    </#if>
+</@layout.registrationLayout>

package/dist/keycloak-upstream/base/login/login-x509-info.ftl

@@ -0,0 +1,55 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout; section>
+    <#if section = "header">
+        ${msg("doLogIn")}
+    <#elseif section = "form">
+
+        <form id="kc-x509-login-info" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+            <div class="${properties.kcFormGroupClass!}">
+
+                <div class="${properties.kcLabelWrapperClass!}">
+                    <label for="certificate_subjectDN" class="${properties.kcLabelClass!}">${msg("clientCertificate")}</label>
+                </div>
+                <#if x509.formData.subjectDN??>
+                    <div class="${properties.kcLabelWrapperClass!}">
+                         <label id="certificate_subjectDN" class="${properties.kcLabelClass!}">${(x509.formData.subjectDN!"")}</label>
+                    </div>
+                <#else>
+                    <div class="${properties.kcLabelWrapperClass!}">
+                        <label id="certificate_subjectDN" class="${properties.kcLabelClass!}">${msg("noCertificate")}</label>
+                    </div>
+                </#if>
+           </div>
+
+            <div class="${properties.kcFormGroupClass!}">
+
+                    <#if x509.formData.isUserEnabled??>
+                          <div class="${properties.kcLabelWrapperClass!}">
+                             <label for="username" class="${properties.kcLabelClass!}">${msg("doX509Login")}</label>
+                          </div>
+                          <div class="${properties.kcLabelWrapperClass!}">
+                             <label id="username" class="${properties.kcLabelClass!}">${(x509.formData.username!'')}</label>
+                         </div>
+                    </#if>
+
+            </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!}">
+                    <div class="${properties.kcFormButtonsWrapperClass!}">
+                        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doContinue")}"/>
+                        <#if x509.formData.isUserEnabled??>
+                            <input class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="cancel" id="kc-cancel" type="submit" value="${msg("doIgnore")}"/>
+                        </#if>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </#if>
+
+</@layout.registrationLayout>