keycloak-theme-editor 0.1.0

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

@@ -0,0 +1,120 @@
+<#import "template.ftl" as layout>
+<#import "passkeys.ftl" as passkeys>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') 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="2" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}"  type="text"
+                                   autofocus autocomplete="${(enableWebAuthnConditionalUI?has_content)?then('username webauthn', 'username')}"
+                                   aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
+                                   dir="ltr"
+                            />
+
+                            <#if messagesPerField.existsError('username','password')>
+                                <span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                        ${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
+                                </span>
+                            </#if>
+
+                        </div>
+                    </#if>
+
+                    <div class="${properties.kcFormGroupClass!}">
+                        <label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
+
+                        <div class="${properties.kcInputGroup!}" dir="ltr">
+                            <input tabindex="3" id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="current-password"
+                                   aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
+                            />
+                            <button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg("showPassword")}"
+                                    aria-controls="password" data-password-toggle tabindex="4"
+                                    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 usernameHidden?? && messagesPerField.existsError('username','password')>
+                            <span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                    ${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
+                            </span>
+                        </#if>
+
+                    </div>
+
+                    <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
+                        <div id="kc-form-options">
+                            <#if realm.rememberMe && !usernameHidden??>
+                                <div class="checkbox">
+                                    <label>
+                                        <#if login.rememberMe??>
+                                            <input tabindex="5" id="rememberMe" name="rememberMe" type="checkbox" checked> ${msg("rememberMe")}
+                                        <#else>
+                                            <input tabindex="5" id="rememberMe" name="rememberMe" type="checkbox"> ${msg("rememberMe")}
+                                        </#if>
+                                    </label>
+                                </div>
+                            </#if>
+                            </div>
+                            <div class="${properties.kcFormOptionsWrapperClass!}">
+                                <#if realm.resetPasswordAllowed>
+                                    <span><a tabindex="6" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
+                                </#if>
+                            </div>
+
+                      </div>
+
+                      <div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
+                          <input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
+                          <input tabindex="7" 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 />
+        <script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
+    <#elseif section = "info" >
+        <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
+            <div id="kc-registration-container">
+                <div id="kc-registration">
+                    <span>${msg("noAccount")} <a tabindex="8"
+                                                 href="${url.registrationUrl}">${msg("doRegister")}</a></span>
+                </div>
+            </div>
+        </#if>
+    <#elseif section = "socialProviders" >
+        <#if realm.password && social?? && social.providers?has_content>
+            <div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
+                <hr/>
+                <h2>${msg("identity-provider-login-label")}</h2>
+
+                <ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
+                    <#list social.providers as p>
+                        <li>
+                            <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>
+                        </li>
+                    </#list>
+                </ul>
+            </div>
+        </#if>
+    </#if>
+
+</@layout.registrationLayout>

package/public/keycloak-upstream/base/login/logout-confirm.ftl

@@ -0,0 +1,38 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout; section>
+    <#if section = "header">
+        ${msg("logoutConfirmTitle")}
+    <#elseif section = "form">
+        <div id="kc-logout-confirm" class="content-area">
+            <p class="instruction">${msg("logoutConfirmHeader")}</p>
+
+            <form class="form-actions" action="${url.logoutConfirmAction}" onsubmit="confirmLogout.disabled = true; return true;" method="POST">
+                <input type="hidden" name="session_code" value="${logoutConfirm.code}">
+                <div class="${properties.kcFormGroupClass!}">
+                    <div id="kc-form-options">
+                        <div class="${properties.kcFormOptionsWrapperClass!}">
+                        </div>
+                    </div>
+
+                    <div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
+                        <input tabindex="4"
+                               class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
+                               name="confirmLogout" id="kc-logout" type="submit" value="${msg("doLogout")}"/>
+                    </div>
+
+                </div>
+            </form>
+
+            <div id="kc-info-message">
+                <#if logoutConfirm.skipLink>
+                <#else>
+                    <#if (client.baseUrl)?has_content>
+                        <p><a href="${client.baseUrl}">${msg("backToApplication")}</a></p>
+                    </#if>
+                </#if>
+            </div>
+
+            <div class="clearfix"></div>
+        </div>
+    </#if>
+</@layout.registrationLayout>

package/public/keycloak-upstream/base/login/passkeys.ftl

@@ -0,0 +1,45 @@
+<#macro conditionalUIData>
+    <#if enableWebAuthnConditionalUI?has_content>
+        <form id="webauth" action="${url.loginAction}" method="post">
+            <input type="hidden" id="clientDataJSON" name="clientDataJSON"/>
+            <input type="hidden" id="authenticatorData" name="authenticatorData"/>
+            <input type="hidden" id="signature" name="signature"/>
+            <input type="hidden" id="credentialId" name="credentialId"/>
+            <input type="hidden" id="userHandle" name="userHandle"/>
+            <input type="hidden" id="error" name="error"/>
+        </form>
+        <#if authenticators??>
+            <form id="authn_select" class="${properties.kcFormClass!}">
+                <#list authenticators.authenticators as authenticator>
+                    <input type="hidden" name="authn_use_chk" value="${authenticator.credentialId}"/>
+                </#list>
+            </form>
+        </#if>
+        <script type="module">
+           <#outputformat "JavaScript">
+           import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+           import { initAuthenticate } from "${url.resourcesPath}/js/passkeysConditionalAuth.js";
+
+           const args = {
+               isUserIdentified : ${isUserIdentified},
+               challenge : ${challenge?c},
+               userVerification : ${userVerification?c},
+               rpId : ${rpId?c},
+               createTimeout : ${createTimeout?c}
+           };
+
+           document.addEventListener("DOMContentLoaded", (event) => initAuthenticate({errmsg : ${msg("passkey-unsupported-browser-text")?c}, ...args}));
+           const authButton = document.getElementById('authenticateWebAuthnButton');
+           if (authButton) {
+               authButton.addEventListener("click", (event) => {
+                   event.preventDefault();
+                   authenticateByWebAuthn({errmsg : ${msg("webauthn-unsupported-browser-text")?c}, ...args});
+               }, { once: true });
+           }
+           </#outputformat>
+        </script>
+        <a id="authenticateWebAuthnButton" href="#" class="${properties.kcButtonSecondaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcMarginTopClass!}">
+            ${msg("webauthn-doAuthenticate")}
+        </a>
+    </#if>
+</#macro>

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

@@ -0,0 +1,12 @@
+<#macro logoutOtherSessions>
+    <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
+        <div class="${properties.kcFormOptionsWrapperClass!}">
+            <div class="checkbox">
+                <label>
+                    <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on">
+                    ${msg("logoutOtherSessions")}
+                </label>
+            </div>
+        </div>
+    </div>
+</#macro>

package/public/keycloak-upstream/base/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">
+                                ${kcSanitize(messagesPerField.get('termsAccepted'))?no_esc}
+                            </span>
+                </div>
+            </#if>
+        </div>
+    </#if>
+</#macro>

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

@@ -0,0 +1,112 @@
+<#import "template.ftl" as layout>
+<#import "user-profile-commons.ftl" as userProfileCommons>
+<#import "register-commons.ftl" as registerCommons>
+<@layout.registrationLayout displayMessage=messagesPerField.exists('global') displayRequiredFields=true; section>
+    <#if section = "header">
+        <#if messageHeader??>
+            ${kcSanitize(msg("${messageHeader}"))?no_esc}
+        <#else>
+            ${msg("registerTitle")}
+        </#if>
+    <#elseif section = "form">
+        <form id="kc-register-form" class="${properties.kcFormClass!}" action="${url.registrationAction}" method="post">
+
+            <@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))>
+                        <div class="${properties.kcFormGroupClass!}">
+                            <div class="${properties.kcLabelWrapperClass!}">
+                                <label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label> *
+                            </div>
+                            <div class="${properties.kcInputWrapperClass!}">
+                                <div class="${properties.kcInputGroup!}" dir="ltr">
+                                    <input type="password" id="password" class="${properties.kcInputClass!}" name="password"
+                                           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"  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" class="${properties.kcInputClass!}"
+                                           name="password-confirm" 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>
+                    </#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>
+
+            <div class="${properties.kcFormGroupClass!}">
+                <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
+                    <div class="${properties.kcFormOptionsWrapperClass!}">
+                        <span><a href="${url.loginUrl}">${msg("backToLogin")}</a></span>
+                    </div>
+                </div>
+
+                <#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">
+                            ${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>
+        </form>
+        <script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
+    </#if>
+</@layout.registrationLayout>

package/public/keycloak-upstream/base/login/saml-post-form.ftl

@@ -0,0 +1,25 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout; section>
+    <#if section = "header">
+        ${msg("saml.post-form.title")}
+    <#elseif section = "form">
+        <script>window.onload = function() {document.forms[0].submit()};</script>
+        <p>${msg("saml.post-form.message")}</p>
+        <form name="saml-post-binding" method="post" action="${samlPost.url}">
+            <#if samlPost.SAMLRequest??>
+                <input type="hidden" name="SAMLRequest" value="${samlPost.SAMLRequest}"/>
+            </#if>
+            <#if samlPost.SAMLResponse??>
+                <input type="hidden" name="SAMLResponse" value="${samlPost.SAMLResponse}"/>
+            </#if>
+            <#if samlPost.relayState??>
+                <input type="hidden" name="RelayState" value="${samlPost.relayState}"/>
+            </#if>
+
+            <noscript>
+                <p>${msg("saml.post-form.js-disabled")}</p>
+                <input type="submit" value="${msg("doContinue")}"/>
+            </noscript>
+        </form>
+    </#if>
+</@layout.registrationLayout>

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

@@ -0,0 +1,36 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayInfo=false; section>
+    <#if section = "header" || section = "show-username">
+        <#if section = "header">
+            ${msg("loginChooseAuthenticator")}
+        </#if>
+    <#elseif section = "form">
+
+        <form id="kc-select-credential-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+            <div class="${properties.kcSelectAuthListClass!}">
+                <#list auth.authenticationSelections as authenticationSelection>
+                    <button class="${properties.kcSelectAuthListItemClass!}" type="submit" name="authenticationExecution" value="${authenticationSelection.authExecId}">
+
+                        <div class="${properties.kcSelectAuthListItemIconClass!}">
+                            <i class="${properties['${authenticationSelection.iconCssClass}']!authenticationSelection.iconCssClass} ${properties.kcSelectAuthListItemIconPropertyClass!}"></i>
+                        </div>
+                        <div class="${properties.kcSelectAuthListItemBodyClass!}">
+                            <div class="${properties.kcSelectAuthListItemHeadingClass!}">
+                                ${msg('${authenticationSelection.displayName}')}
+                            </div>
+                            <div class="${properties.kcSelectAuthListItemDescriptionClass!}">
+                                ${msg('${authenticationSelection.helpText}')}
+                            </div>
+                        </div>
+                        <div class="${properties.kcSelectAuthListItemFillClass!}"></div>
+                        <div class="${properties.kcSelectAuthListItemArrowClass!}">
+                            <i class="${properties.kcSelectAuthListItemArrowIconClass!}"></i>
+                        </div>
+                    </button>
+                </#list>
+            </div>
+        </form>
+
+    </#if>
+</@layout.registrationLayout>
+

package/public/keycloak-upstream/base/login/select-organization.ftl

@@ -0,0 +1,23 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout; section>
+    <#if section = "form">
+        <form action="${url.loginAction}" class="form-vertical" method="post">
+            <div id="kc-user-organizations" class="${properties.kcFormGroupClass!}">
+                <h2>${msg("organization.select")}</h2>
+
+                <ul class="${properties.kcFormSocialAccountListClass!} <#if user.organizations?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
+                    <#list user.organizations as organization>
+                        <li>
+                            <a id="organization-${organization.alias}" class="${properties.kcFormSocialAccountListButtonClass!} <#if user.organizations?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
+                               type="button" onclick="document.forms[0]['kc.org'].value = '${organization.alias}'; document.forms[0].requestSubmit()">
+                                <span class="${properties.kcFormSocialAccountNameClass!}">${organization.name!}</span>
+                            </a>
+                        </li>
+                    </#list>
+                </ul>
+            </div>
+            <input type="hidden" name="kc.org"/>
+        </form>
+    </#if>
+
+</@layout.registrationLayout>