keycloak-theme-editor 0.1.0

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

@@ -0,0 +1,95 @@
+<#macro show social>
+  <div class="${properties.kcLoginMainFooterBand!}">
+      <span class="${properties.kcLoginMainFooterBandItem!} ${properties.kcLoginMainFooterHelperText!}">
+          ${msg("identity-provider-login-label")}
+      </span>
+  </div>
+  <div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
+      <ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
+          <#list social.providers as p>
+              <li class="<#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}<#else>${properties.kcFormSocialAccountListItemClass!}</#if>">
+                  <a data-once-link data-disabled-class="${properties.kcFormSocialAccountListButtonDisabledClass!}" id="social-${p.alias}"
+                          class="${properties.kcFormSocialAccountListButtonClass!}" aria-label="${p.displayName}"
+                          type="button" href="${p.loginUrl}">
+                        <#if p.iconClasses?has_content>
+                            <span class="${p.iconClasses!}">${p.displayName!}</span>
+                        <#else>
+                        <#switch p.providerId>
+                            <#case "google">
+                                <svg viewBox="0 0 48 48" class="google" aria-hidden="true">
+                                    <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+                                    <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+                                    <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+                                    <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+                                    <path fill="none" d="M0 0h48v48H0z"></path>
+                                </svg>
+                                <#break>
+                            <#case "github">
+                                <svg aria-hidden="true" viewBox="0 0 496 512">
+                                    <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
+                                </svg>
+                                <#break>
+                            <#case "facebook">
+                                <svg aria-hidden="true" viewBox="0 0 448 512">
+                                    <path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"/>
+                                </svg>
+                                <#break>
+                            <#case "gitlab">
+                                <svg aria-hidden="true" viewBox="0 0 512 512">
+                                    <path d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"/>
+                                </svg>
+                                <#break>
+                            <#case "linkedin">
+                            <#case "linkedin-openid-connect">
+                                <svg aria-hidden="true" viewBox="0 0 448 512">
+                                    <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
+                                </svg>
+                                <#break>
+                            <#case "openshift-v4">
+                                <svg viewBox="116 0 100 100" aria-hidden="true">
+                                    <path d="M145.7,45.3l-16.1,5.8c0.2,2.6,0.6,5.1,1.3,7.6l15.3-5.6C145.7,50.6,145.5,47.9,145.7,45.3M216.7,27.5c-1.1-2.3-2.4-4.5-3.9-6.6l-16.1,5.8c1.9,1.9,3.4,4.1,4.7,6.4L216.7,27.5zM181.4,23c3.3,1.6,6.2,3.7,8.7,6.2l16.1-5.8c-4.4-6.2-10.5-11.5-17.9-14.9c-22.9-10.7-50.3-0.7-61,22.2c-3.5,7.4-4.8,15.3-4.1,23l16.1-5.8c0.3-3.5,1.1-7,2.7-10.3C148.7,22.5,166.4,16,181.4,23M131.9,58.4l-15.3,5.6c1.4,5.6,3.8,10.8,7.2,15.5l16-5.8C135.8,69.4,133,64.1,131.9,58.4M198.5,52.3c-0.3,3.5-1.1,7-2.7,10.3C188.8,77.5,171,84,156.1,77c-3.3-1.6-6.3-3.7-8.7-6.2l-16,5.8c4.4,6.2,10.5,11.5,17.9,14.9c22.9,10.7,50.3,0.7,61-22.2c3.5-7.4,4.7-15.3,4.1-22.9L198.5,52.3zM202.4,32.7l-15.3,5.6c2.8,5.1,4.2,10.9,3.7,16.8l16-5.8C206.5,43.5,204.9,37.9,202.4,32.7"></path>
+                                </svg>
+                                <#break>
+                            <#case "stackoverflow">
+                                <svg viewBox="0 0 384 512" aria-hidden="true">
+                                    <path d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"></path>
+                                </svg>
+                                <#break>
+                            <#case "twitter">
+                                <svg viewBox="0 0 1200 1227" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
+                                </svg>
+                                <#break>
+                            <#case "microsoft">
+                                <svg viewBox="0 0 448 512" aria-hidden="true">
+                                    <path d="M0 32h214.6v214.6H0V32zm233.4 0H448v214.6H233.4V32zM0 265.4h214.6V480H0V265.4zm233.4 0H448V480H233.4V265.4z"></path>
+                                </svg>
+                                <#break>
+                            <#case "bitbucket">
+                                <svg viewBox="0 0 512 512" aria-hidden="true">
+                                    <path d="M22.2 32A16 16 0 0 0 6 47.8a26.35 26.35 0 0 0 .2 2.8l67.9 412.1a21.77 21.77 0 0 0 21.3 18.2h325.7a16 16 0 0 0 16-13.4L505 50.7a16 16 0 0 0-13.2-18.3 24.58 24.58 0 0 0-2.8-.2L22.2 32zm285.9 297.8h-104l-28.1-147h157.3l-25.2 147z"></path>
+                                </svg>
+                                <#break>
+                            <#case "instagram">
+                                <svg viewBox="0 0 448 512" aria-hidden="true">
+                                    <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
+                                </svg>
+                                <#break>
+                            <#case "paypal">
+                                <svg viewBox="0 0 384 512" aria-hidden="true">
+                                    <path d="M111.4 295.9c-3.5 19.2-17.4 108.7-21.5 134-.3 1.8-1 2.5-3 2.5H12.3c-7.6 0-13.1-6.6-12.1-13.9L58.8 46.6c1.5-9.6 10.1-16.9 20-16.9 152.3 0 165.1-3.7 204 11.4 60.1 23.3 65.6 79.5 44 140.3-21.5 62.6-72.5 89.5-140.1 90.3-43.4.7-69.5-7-75.3 24.2zM357.1 152c-1.8-1.3-2.5-1.8-3 1.3-2 11.4-5.1 22.5-8.8 33.6-39.9 113.8-150.5 103.9-204.5 103.9-6.1 0-10.1 3.3-10.9 9.4-22.6 140.4-27.1 169.7-27.1 169.7-1 7.1 3.5 12.9 10.6 12.9h63.5c8.6 0 15.7-6.3 17.4-14.9.7-5.4-1.1 6.1 14.4-91.3 4.6-22 14.3-19.7 29.3-19.7 71 0 126.4-28.8 142.9-112.3 6.5-34.8 4.6-71.4-23.8-92.6z"></path>
+                                </svg>
+                                <#break>
+                            <#default>
+                                <svg viewBox="0 0 512 512" aria-hidden="true">
+                                    <path d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"/>
+                                </svg>
+                        </#switch>
+                            <span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
+                        </#if>
+                  </a>
+              </li>
+          </#list>
+      </ul>
+  </div>
+</#macro>

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

@@ -0,0 +1,266 @@
+<#import "field.ftl" as field>
+<#import "footer.ftl" as loginFooter>
+<#macro username>
+  <#assign label>
+    <#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
+  </#assign>
+  <@field.group name="username" label=label>
+    <div class="${properties.kcInputGroup}">
+      <div class="${properties.kcInputGroupItemClass} ${properties.kcFill}">
+        <span class="${properties.kcInputClass} ${properties.kcFormReadOnlyClass}">
+          <input id="kc-attempted-username" value="${auth.attemptedUsername}" readonly>
+        </span>
+      </div>
+      <div class="${properties.kcInputGroupItemClass}">
+        <button id="reset-login" class="${properties.kcFormPasswordVisibilityButtonClass} kc-login-tooltip" type="button" 
+              aria-label="${msg('restartLoginTooltip')}" onclick="location.href='${url.loginRestartFlowUrl}'">
+            <i class="fa-sync-alt fas" aria-hidden="true"></i>
+            <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
+        </button>
+      </div>
+    </div>
+  </@field.group>
+</#macro>
+
+<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
+<!DOCTYPE html>
+<html class="${properties.kcHtmlClass!}" lang="${lang}"<#if realm.internationalizationEnabled> dir="${(locale.rtl)?then('rtl','ltr')}"</#if>>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="color-scheme" content="light${darkMode?then(' dark', '')}">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <#if properties.meta?has_content>
+        <#list properties.meta?split(' ') as meta>
+            <meta name="${meta?split('==')[0]}" content="${meta?split('==')[1]}"/>
+        </#list>
+    </#if>
+    <title>${msg("loginTitle",(realm.displayName!''))}</title>
+    <link rel="icon" href="${url.resourcesPath}/img/favicon.ico" />
+    <#if properties.stylesCommon?has_content>
+        <#list properties.stylesCommon?split(' ') as style>
+            <link href="${url.resourcesCommonPath}/${style}" rel="stylesheet" />
+        </#list>
+    </#if>
+    <#if properties.styles?has_content>
+        <#list properties.styles?split(' ') as style>
+            <link href="${url.resourcesPath}/${style}" rel="stylesheet" />
+        </#list>
+    </#if>
+    <script type="importmap">
+        {
+            "imports": {
+                "rfc4648": "${url.resourcesCommonPath}/vendor/rfc4648/rfc4648.js"
+            }
+        }
+    </script>
+    <#if darkMode>
+      <script type="module" async blocking="render">
+          const DARK_MODE_CLASS = "${properties.kcDarkModeClass}";
+          const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+          updateDarkMode(mediaQuery.matches);
+          mediaQuery.addEventListener("change", (event) => updateDarkMode(event.matches));
+
+          function updateDarkMode(isEnabled) {
+            const { classList } = document.documentElement;
+
+            if (isEnabled) {
+              classList.add(DARK_MODE_CLASS);
+            } else {
+              classList.remove(DARK_MODE_CLASS);
+            }
+          }
+      </script>
+    </#if>
+    <#if properties.scripts?has_content>
+        <#list properties.scripts?split(' ') as script>
+            <script src="${url.resourcesPath}/${script}" type="text/javascript"></script>
+        </#list>
+    </#if>
+    <#if scripts??>
+        <#list scripts as script>
+            <script src="${script}" type="text/javascript"></script>
+        </#list>
+    </#if>
+    <script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
+    <script type="module">
+        <#outputformat "JavaScript">
+        import { startSessionPolling } from "${url.resourcesPath}/js/authChecker.js";
+
+        startSessionPolling(
+            ${url.ssoLoginInOtherTabsUrl?c}
+        );
+        </#outputformat>
+    </script>
+    <script type="module">
+        document.addEventListener("click", (event) => {
+            const link = event.target.closest("a[data-once-link]");
+
+            if (!link) {
+                return;
+            }
+
+            if (link.getAttribute("aria-disabled") === "true") {
+                event.preventDefault();
+                return;
+            }
+
+            const { disabledClass } = link.dataset;
+
+            if (disabledClass) {
+                link.classList.add(...disabledClass.trim().split(/\s+/));
+            }
+
+            link.setAttribute("role", "link");
+            link.setAttribute("aria-disabled", "true");
+        });
+    </script>
+    <#if authenticationSession??>
+        <script type="module">
+             <#outputformat "JavaScript">
+            import { checkAuthSession } from "${url.resourcesPath}/js/authChecker.js";
+
+            checkAuthSession(
+                ${authenticationSession.authSessionIdHash?c}
+            );
+            </#outputformat>
+        </script>
+    </#if>
+    <script>
+      // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
+      const isFirefox = true;
+    </script>
+</head>
+
+<body id="keycloak-bg" class="${properties.kcBodyClass!}" data-page-id="login-${pageId}">
+<div class="${properties.kcLogin!}">
+  <div class="${properties.kcLoginContainer!}">
+    <header id="kc-header" class="pf-v5-c-login__header">
+      <div id="kc-header-wrapper"
+              class="pf-v5-c-brand">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
+    </header>
+    <main class="${properties.kcLoginMain!}">
+      <div class="${properties.kcLoginMainHeader!}">
+        <h1 class="${properties.kcLoginMainTitle!}" id="kc-page-title"><#nested "header"></h1>
+        <#if realm.internationalizationEnabled  && locale.supported?size gt 1>
+        <div class="${properties.kcLoginMainHeaderUtilities!}">
+          <div class="${properties.kcInputClass!}">
+            <select
+              aria-label="${msg("languages")}"
+              id="login-select-toggle"
+              onchange="if (this.value) window.location.href=this.value"
+            >
+              <#list locale.supported?sort_by("label") as l>
+                <option
+                  value="${l.url}"
+                  ${(l.languageTag == locale.currentLanguageTag)?then('selected','')}
+                >
+                  ${l.label}
+                </option>
+              </#list>
+            </select>
+            <span class="${properties.kcFormControlUtilClass}">
+              <span class="${properties.kcFormControlToggleIcon!}">
+                <svg
+                  class="pf-v5-svg"
+                  viewBox="0 0 320 512"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                  >
+                  </path>
+                </svg>
+              </span>
+            </span>
+          </div>
+        </div>
+        </#if>
+      </div>
+      <div class="${properties.kcLoginMainBody!}">
+        <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
+            <#if displayRequiredFields>
+                <div class="${properties.kcContentWrapperClass!}">
+                    <div class="${properties.kcLabelWrapperClass!} subtitle">
+                        <span class="${properties.kcInputHelperTextItemTextClass!}">
+                          <span class="${properties.kcInputRequiredClass!}">*</span> ${msg("requiredFields")}
+                        </span>
+                    </div>
+                </div>
+            </#if>
+        <#else>
+            <#if displayRequiredFields>
+                <div class="${properties.kcContentWrapperClass!}">
+                    <div class="${properties.kcLabelWrapperClass!} subtitle">
+                        <span class="${properties.kcInputHelperTextItemTextClass!}">
+                          <span class="${properties.kcInputRequiredClass!}">*</span> ${msg("requiredFields")}
+                        </span>
+                    </div>
+                    <div class="${properties.kcFormClass} ${properties.kcContentWrapperClass}">
+                        <#nested "show-username">
+                        <@username />
+                    </div>
+                </div>
+            <#else>
+                <div class="${properties.kcFormClass} ${properties.kcContentWrapperClass}">
+                  <#nested "show-username">
+                  <@username />
+                </div>
+            </#if>
+        </#if>
+
+        <#-- App-initiated actions should not see warning messages about the need to complete the action -->
+        <#-- during login.                                                                               -->
+        <#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
+            <div class="${properties.kcAlertClass!} pf-m-${(message.type = 'error')?then('danger', message.type)}">
+                <div class="${properties.kcAlertIconClass!}">
+                    <#if message.type = 'success'><span class="${properties.kcFeedbackSuccessIcon!}"></span></#if>
+                    <#if message.type = 'warning'><span class="${properties.kcFeedbackWarningIcon!}"></span></#if>
+                    <#if message.type = 'error'><span class="${properties.kcFeedbackErrorIcon!}"></span></#if>
+                    <#if message.type = 'info'><span class="${properties.kcFeedbackInfoIcon!}"></span></#if>
+                </div>
+                <span class="${properties.kcAlertTitleClass!} kc-feedback-text">${message.summary}</span>
+            </div>
+        </#if>
+
+        <#nested "form">
+
+        <#if auth?has_content && auth.showTryAnotherWayLink()>
+          <form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post" novalidate="novalidate">
+              <input type="hidden" name="tryAnotherWay" value="on"/>
+              <a id="try-another-way" href="javascript:document.forms['kc-select-try-another-way-form'].requestSubmit()"
+                  class="${properties.kcButtonSecondaryClass} ${properties.kcButtonBlockClass} ${properties.kcMarginTopClass}">
+                    ${msg("doTryAnotherWay")}
+              </a>
+          </form>
+        </#if>
+
+          <div class="${properties.kcLoginMainFooter!}">
+              <#nested "socialProviders">
+
+              <#if displayInfo>
+                  <div id="kc-info" class="${properties.kcLoginMainFooterBand!} ${properties.kcFormClass}">
+                      <div id="kc-info-wrapper" class="${properties.kcLoginMainFooterBandItem!}">
+                          <#nested "info">
+                      </div>
+                  </div>
+              </#if>
+          </div>
+      </div>
+
+        <div class="${properties.kcLoginMainFooter!}">
+            <@loginFooter.content/>
+        </div>
+    </main>
+  </div>
+</div>
+</body>
+</html>
+</#macro>

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

@@ -0,0 +1,21 @@
+<#import "template.ftl" as layout>
+<#import "buttons.ftl" as buttons>
+
+<@layout.registrationLayout displayMessage=false; section>
+<!-- template: terms.ftl -->
+
+    <#if section = "header">
+        ${msg("termsTitle")}
+    <#elseif section = "form">
+    <div class="${properties.kcContentWrapperClass}">
+        ${kcSanitize(msg("termsText"))?no_esc}
+    </div>
+    <form class="${properties.kcFormClass!}" action="${url.loginAction}" method="POST">
+        <@buttons.actionGroup horizontal=true>
+            <@buttons.button name="accept" id="kc-accept" label="doAccept" class=["kcButtonPrimaryClass"]/>
+            <@buttons.button name="cancel" id="kc-decline" label="doDecline" class=["kcButtonSecondaryClass"]/>
+        </@buttons.actionGroup>
+    </form>
+    <div class="clearfix"></div>
+    </#if>
+</@layout.registrationLayout>

package/public/keycloak-upstream/v2/login/theme.properties

@@ -0,0 +1,130 @@
+parent=base
+import=common/keycloak
+
+styles=css/styles.css
+stylesCommon=vendor/patternfly-v5/patternfly.min.css vendor/patternfly-v5/patternfly-addons.css
+
+darkMode=true
+
+kcFormGroupClass=pf-v5-c-form__group
+kcFormGroupLabelClass=pf-v5-c-form__group-label pf-v5-u-pb-xs
+kcFormLabelClass=pf-v5-c-form__label
+kcFormLabelTextClass=pf-v5-c-form__label-text
+
+kcLabelClass=pf-v5-c-form__label
+kcInputClass=pf-v5-c-form-control
+kcInputGroup=pf-v5-c-input-group
+kcFormHelperTextClass=pf-v5-c-form__helper-text
+kcInputHelperTextClass=pf-v5-c-helper-text pf-v5-u-display-flex pf-v5-u-justify-content-space-between
+kcInputHelperTextItemClass=pf-v5-c-helper-text__item
+kcInputHelperTextItemTextClass=pf-v5-c-helper-text__item-text
+kcInputGroupItemClass=pf-v5-c-input-group__item
+kcFill=pf-m-fill
+kcError=pf-m-error
+kcLoginFooterBand=pf-v5-c-login__main-footer-band
+kcLoginFooterBandItem=pf-v5-c-login__main-footer-band-item
+
+kcCheckboxClass=pf-v5-c-check
+kcCheckboxInputClass=pf-v5-c-check__input
+kcCheckboxLabelClass=pf-v5-c-check__label
+kcCheckboxLabelRequiredClass=pf-v5-c-check__label-required
+
+kcInputRequiredClass=pf-v5-c-form__label-required
+kcInputErrorMessageClass=pf-v5-c-helper-text__item-text pf-m-error kc-feedback-text
+kcFormControlUtilClass=pf-v5-c-form-control__utilities
+kcInputErrorIconStatusClass=pf-v5-c-form-control__icon pf-m-status
+kcInputErrorIconClass=fas fa-exclamation-circle
+kcAlertClass=pf-v5-c-alert pf-m-inline pf-v5-u-mb-md
+kcAlertIconClass=pf-v5-c-alert__icon
+kcAlertTitleClass=pf-v5-c-alert__title
+kcAlertDescriptionClass=pf-v5-c-alert__description
+kcFormPasswordVisibilityButtonClass=pf-v5-c-button pf-m-control
+kcFormPasswordVisibilityIconShow=fa-eye fas
+kcFormPasswordVisibilityIconHide=fa-eye-slash fas
+kcFormControlToggleIcon=pf-v5-c-form-control__toggle-icon
+kcFormActionGroupClass=pf-v5-c-form__actions pf-v5-u-pt-xs
+kcFormReadOnlyClass=pf-m-readonly
+
+kcPanelClass=pf-v5-c-panel pf-m-raised
+kcPanelMainClass=pf-v5-c-panel__main
+kcPanelMainBodyClass=pf-v5-c-panel__main-body
+kcListClass=pf-v5-c-list
+
+kcButtonClass=pf-v5-c-button
+kcButtonPrimaryClass=pf-v5-c-button pf-m-primary
+kcButtonSecondaryClass=pf-v5-c-button pf-m-secondary
+kcButtonBlockClass=pf-m-block
+kcButtonLinkClass=pf-v5-c-button pf-m-link
+kcCommonLogoIdP=pf-v5-c-login__main-footer-links-item
+kcFormSocialAccountListClass=pf-v5-c-login__main-body pf-v5-u-pl-0 pf-v5-u-pr-0
+kcFormSocialAccountListItemClass=pf-v5-u-pb-sm
+kcFormSocialAccountNameClass=pf-v5-u-m-auto
+kcFormSocialAccountListButtonClass=pf-v5-c-button pf-m-secondary pf-m-block pf-v5-u-display-flex pf-v5-u-align-items-center pf-v5-u-justify-content-space-between
+kcFormSocialAccountListButtonDisabledClass=pf-m-aria-disabled
+kcFormSocialAccountListGridClass=pf-v5-l-grid pf-m-gutter pf-m-all-6-col-on-xl pf-m-all-6-col-on-sm
+kcFormSocialAccountGridItem=pf-v5-l-grid__item
+
+kcLoginClass=pf-v5-c-login__main
+kcFormClass=pf-v5-c-form pf-v5-u-w-100
+kcFormCardClass=card-pf
+
+kcResetFlowIcon=pf-icon fas fa-share-square
+
+kcSelectAuthListClass=pf-v5-c-data-list select-auth-container
+kcSelectAuthListItemWrapperClass=pf-v5-c-data-list__item pf-m-clickable
+kcSelectAuthListItemClass=pf-v5-c-data-list__item-row select-auth-box-parent
+kcSelectAuthListItemHeadingClass=pf-v5-u-font-family-heading select-auth-box-headline
+kcSelectAuthListItemBodyClass=pf-v5-c-data-list__cell pf-m-no-fill pf-v5-u-pt-md pf-v5-u-pb-md
+kcSelectAuthListItemIconClass=pf-v5-c-data-list__cell pf-m-icon pf-v5-u-display-flex pf-v5-u-pt-0 pf-v5-u-align-items-center 
+kcSelectAuthListItemFillClass=pf-v5-c-data-list__item-action
+kcSelectAuthListItemDescriptionClass=pf-v5-c-data-list__cell pf-m-no-fill select-auth-box-desc
+
+kcRecoveryCodesWarning=pf-v5-c-alert pf-m-warning pf-m-inline pf-v5-u-mb-md kc-recovery-codes-warning
+kcLogin=pf-v5-c-login
+kcLoginContainer=pf-v5-c-login__container
+kcLoginMain=pf-v5-c-login__main
+kcLoginMainHeader=pf-v5-c-login__main-header
+kcLoginMainFooter=pf-v5-c-login__main-footer
+kcLoginMainFooterBand=pf-v5-c-login__main-footer-band
+kcLoginMainFooterBandItem=pf-v5-c-login__main-footer-band-item
+kcLoginMainFooterHelperText=pf-v5-u-font-size-sm pf-v5-u-color-200
+kcLoginMainTitle=pf-v5-c-title pf-m-3xl
+kcLoginMainHeaderUtilities=pf-v5-c-login__main-header-utilities
+kcLoginMainBody=pf-v5-c-login__main-body
+
+kcContentWrapperClass=pf-v5-u-mb-md-on-md
+kcWebAuthnDefaultIcon=pf-v5-c-icon pf-m-lg
+kcMarginTopClass=pf-v5-u-mt-md-on-md
+
+kcLoginOTPListClass=pf-v5-c-tile
+kcLoginOTPListItemHeaderClass=pf-v5-c-tile__header pf-m-stacked
+kcLoginOTPListItemIconBodyClass=pf-v5-c-tile__icon
+kcLoginOTPListItemIconClass=fa fa-mobile
+kcLoginOTPListItemTitleClass=pf-v5-c-tile__title
+kcLoginOTPListSelectedClass=pf-m-selected
+
+kcCopyIconClass=fas fa-copy
+kcCheckIconClass=fas fa-check
+kcAngleRightIconClass=fas fa-angle-right
+kcAngleDownIconClass=fas fa-angle-down
+kcExpandedClass=pf-m-expanded
+
+kcCodeClipboardCopyClass=pf-v5-c-clipboard-copy
+kcCodeClipboardCopyGroupClass=pf-v5-c-clipboard-copy__group
+kcCodeClipboardCopyContentClass=pf-v5-c-clipboard-copy__expandable-content
+
+kcDarkModeClass=pf-v5-theme-dark
+
+kcHtmlClass=login-pf
+kcLogoIdP-facebook=
+kcLogoIdP-google=
+kcLogoIdP-github=
+kcLogoIdP-linkedin=
+kcLogoIdP-instagram=
+kcLogoIdP-microsoft=
+kcLogoIdP-bitbucket=
+kcLogoIdP-gitlab=
+kcLogoIdP-paypal=
+kcLogoIdP-stackoverflow=
+kcLogoIdP-twitter=
+kcLogoIdP-openshift-v4=

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

@@ -0,0 +1,29 @@
+<#import "template.ftl" as layout>
+<#import "password-commons.ftl" as passwordCommons>
+<#import "user-profile-commons.ftl" as userProfileCommons>
+<#import "buttons.ftl" as buttons>
+<@layout.registrationLayout displayMessage=messagesPerField.exists('global') displayRequiredFields=false; section>
+    <#if section = "header">
+        ${msg("updateEmailTitle")}
+    <#elseif section = "form">
+        <form id="kc-update-email-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>
+
+                <@passwordCommons.logoutOtherSessions/>
+
+                <@buttons.actionGroup horizontal=true>
+                    <@buttons.button id="kc-submit" label="doSubmit" class=["kcButtonPrimaryClass","kcButtonBlockClass"]/>
+                    <#if isAppInitiatedAction??>
+                        <@buttons.button id="kc-cancel" label="doCancel" class=["kcButtonSecondaryClass","kcButtonBlockClass"] name="cancel-aia" value="true"/>
+                    </#if>
+                </@buttons.actionGroup>
+            </div>
+        </form>
+    </#if>
+</@layout.registrationLayout>