npm - keycloak-theme-editor - Versions diffs - 0.1.0 - Mend

keycloak-theme-editor 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (343) hide show

package/public/keycloak-upstream/base/login/template.ftl ADDED Viewed

@@ -0,0 +1,204 @@
+<#import "footer.ftl" as loginFooter>
+<#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" />
+    <#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>
+    <#if properties.scripts?has_content>
+        <#list properties.scripts?split(' ') as script>
+            <script src="${url.resourcesPath}/${script}" type="text/javascript"></script>
+        </#list>
+    </#if>
+    <script type="importmap">
+        {
+            "imports": {
+                "rfc4648": "${url.resourcesCommonPath}/vendor/rfc4648/rfc4648.js"
+            }
+        }
+    </script>
+    <script src="${url.resourcesPath}/js/menu-button-links.js" type="module"></script>
+    <#if scripts??>
+        <#list scripts as script>
+            <script src="${script}" type="text/javascript"></script>
+        </#list>
+    </#if>
+    <script type="module">
+        import { startSessionPolling } from "${url.resourcesPath}/js/authChecker.js";
+        startSessionPolling(
+            "${url.ssoLoginInOtherTabsUrl?no_esc}"
+        );
+    </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">
+            import { checkAuthSession } from "${url.resourcesPath}/js/authChecker.js";
+            checkAuthSession(
+                "${authenticationSession.authSessionIdHash}"
+            );
+        </script>
+    </#if>
+</head>
+<body class="${properties.kcBodyClass!}" data-page-id="login-${pageId}">
+<div class="${properties.kcLoginClass!}">
+    <div id="kc-header" class="${properties.kcHeaderClass!}">
+        <div id="kc-header-wrapper"
+             class="${properties.kcHeaderWrapperClass!}">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
+    </div>
+    <div class="${properties.kcFormCardClass!}">
+        <header class="${properties.kcFormHeaderClass!}">
+            <#if realm.internationalizationEnabled  && locale.supported?size gt 1>
+                <div class="${properties.kcLocaleMainClass!}" id="kc-locale">
+                    <div id="kc-locale-wrapper" class="${properties.kcLocaleWrapperClass!}">
+                        <div id="kc-locale-dropdown" class="menu-button-links ${properties.kcLocaleDropDownClass!}">
+                            <button tabindex="1" id="kc-current-locale-link" aria-label="${msg("languages")}" aria-haspopup="true" aria-expanded="false" aria-controls="language-switch1">${locale.current}</button>
+                            <ul role="menu" tabindex="-1" aria-labelledby="kc-current-locale-link" aria-activedescendant="" id="language-switch1" class="${properties.kcLocaleListClass!}">
+                                <#assign i = 1>
+                                <#list locale.supported as l>
+                                    <li class="${properties.kcLocaleListItemClass!}" role="none">
+                                        <a role="menuitem" id="language-${i}" class="${properties.kcLocaleItemClass!}" href="${l.url}">${l.label}</a>
+                                    </li>
+                                    <#assign i++>
+                                </#list>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </#if>
+        <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
+            <#if displayRequiredFields>
+                <div class="${properties.kcContentWrapperClass!}">
+                    <div class="${properties.kcLabelWrapperClass!} subtitle">
+                        <span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
+                    </div>
+                    <div class="col-md-10">
+                        <h1 id="kc-page-title"><#nested "header"></h1>
+                    </div>
+                </div>
+            <#else>
+                <h1 id="kc-page-title"><#nested "header"></h1>
+            </#if>
+        <#else>
+            <#if displayRequiredFields>
+                <div class="${properties.kcContentWrapperClass!}">
+                    <div class="${properties.kcLabelWrapperClass!} subtitle">
+                        <span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
+                    </div>
+                    <div class="col-md-10">
+                        <#nested "show-username">
+                        <div id="kc-username" class="${properties.kcFormGroupClass!}">
+                            <label id="kc-attempted-username">${auth.attemptedUsername}</label>
+                            <a id="reset-login" href="${url.loginRestartFlowUrl}" aria-label="${msg("restartLoginTooltip")}">
+                                <div class="kc-login-tooltip">
+                                    <i class="${properties.kcResetFlowIcon!}"></i>
+                                    <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            <#else>
+                <#nested "show-username">
+                <div id="kc-username" class="${properties.kcFormGroupClass!}">
+                    <label id="kc-attempted-username">${auth.attemptedUsername}</label>
+                    <a id="reset-login" href="${url.loginRestartFlowUrl}" aria-label="${msg("restartLoginTooltip")}">
+                        <div class="kc-login-tooltip">
+                            <i class="${properties.kcResetFlowIcon!}"></i>
+                            <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
+                        </div>
+                    </a>
+                </div>
+            </#if>
+        </#if>
+      </header>
+      <div id="kc-content">
+        <div id="kc-content-wrapper">
+          <#-- 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="alert-${message.type} ${properties.kcAlertClass!} pf-m-<#if message.type = 'error'>danger<#else>${message.type}</#if>">
+                  <div class="pf-c-alert__icon">
+                      <#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!}">${kcSanitize(message.summary)?no_esc}</span>
+              </div>
+          </#if>
+          <#nested "form">
+          <#if auth?has_content && auth.showTryAnotherWayLink()>
+              <form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post">
+                  <div class="${properties.kcFormGroupClass!}">
+                      <input type="hidden" name="tryAnotherWay" value="on"/>
+                      <a href="#" id="try-another-way"
+                         onclick="document.forms['kc-select-try-another-way-form'].requestSubmit();return false;">${msg("doTryAnotherWay")}</a>
+                  </div>
+              </form>
+          </#if>
+          <#nested "socialProviders">
+          <#if displayInfo>
+              <div id="kc-info" class="${properties.kcSignUpClass!}">
+                  <div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}">
+                      <#nested "info">
+                  </div>
+              </div>
+          </#if>
+        </div>
+      </div>
+      <@loginFooter.content/>
+    </div>
+  </div>
+</body>
+</html>
+</#macro>

package/public/keycloak-upstream/base/login/terms.ftl ADDED Viewed

@@ -0,0 +1,15 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayMessage=false; section>
+    <#if section = "header">
+        ${msg("termsTitle")}
+    <#elseif section = "form">
+    <div id="kc-terms-text">
+        ${kcSanitize(msg("termsText"))?no_esc}
+    </div>
+    <form class="form-actions" action="${url.loginAction}" method="POST">
+        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="accept" id="kc-accept" type="submit" value="${msg("doAccept")}"/>
+        <input class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="cancel" id="kc-decline" type="submit" value="${msg("doDecline")}"/>
+    </form>
+    <div class="clearfix"></div>
+    </#if>
+</@layout.registrationLayout>

package/public/keycloak-upstream/base/login/theme.properties ADDED Viewed

	@@ -0,0 +1 @@
1	+ # generated fallback for themes without theme.properties

package/public/keycloak-upstream/base/login/update-email.ftl ADDED Viewed

@@ -0,0 +1,30 @@
+<#import "template.ftl" as layout>
+<#import "password-commons.ftl" as passwordCommons>
+<#import "user-profile-commons.ftl" as userProfileCommons>
+<@layout.registrationLayout displayMessage=messagesPerField.exists('global') displayRequiredFields=true; 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/>
+                <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">${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/public/keycloak-upstream/base/login/user-profile-commons.ftl ADDED Viewed

@@ -0,0 +1,210 @@
+<#macro userProfileFormFields>
+	<#assign currentGroup="">
+	<#list profile.attributes as attribute>
+		<#if attribute.name=='locale' && realm.internationalizationEnabled && locale.currentLanguageTag?has_content>
+			<input type="hidden" id="${attribute.name}" name="${attribute.name}" value="${locale.currentLanguageTag}"/>
+		<#else>
+			<#assign group = (attribute.group)!"">
+			<#if group != currentGroup>
+				<#assign currentGroup=group>
+				<#if currentGroup != "">
+					<div class="${properties.kcFormGroupClass!}"
+					<#list group.html5DataAnnotations as key, value>
+						data-${key}="${value}"
+					</#list>
+					>
+						<#assign groupDisplayHeader=group.displayHeader!"">
+						<#if groupDisplayHeader != "">
+							<#assign groupHeaderText=advancedMsg(groupDisplayHeader)!group>
+						<#else>
+							<#assign groupHeaderText=group.name!"">
+						</#if>
+						<div class="${properties.kcContentWrapperClass!}">
+							<label id="header-${attribute.group.name}" class="${kcFormGroupHeader!}">${groupHeaderText}</label>
+						</div>
+						<#assign groupDisplayDescription=group.displayDescription!"">
+						<#if groupDisplayDescription != "">
+							<#assign groupDescriptionText=advancedMsg(groupDisplayDescription)!"">
+							<div class="${properties.kcLabelWrapperClass!}">
+								<label id="description-${group.name}" class="${properties.kcLabelClass!}">${groupDescriptionText}</label>
+							</div>
+						</#if>
+					</div>
+				</#if>
+			</#if>
+			<#nested "beforeField" attribute>
+			<div class="${properties.kcFormGroupClass!}">
+				<div class="${properties.kcLabelWrapperClass!}">
+					<label for="${attribute.name}" class="${properties.kcLabelClass!}">${advancedMsg(attribute.displayName!'')}</label>
+					<#if attribute.required>*</#if>
+				</div>
+				<div class="${properties.kcInputWrapperClass!}">
+					<#if attribute.annotations.inputHelperTextBefore??>
+						<div class="${properties.kcInputHelperTextBeforeClass!}" id="form-help-text-before-${attribute.name}" aria-live="polite">${kcSanitize(advancedMsg(attribute.annotations.inputHelperTextBefore))?no_esc}</div>
+					</#if>
+					<@inputFieldByType attribute=attribute/>
+					<#if messagesPerField.existsError('${attribute.name}')>
+						<span id="input-error-${attribute.name}" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+							${kcSanitize(messagesPerField.get('${attribute.name}'))?no_esc}
+						</span>
+					</#if>
+					<#if attribute.annotations.inputHelperTextAfter??>
+						<div class="${properties.kcInputHelperTextAfterClass!}" id="form-help-text-after-${attribute.name}" aria-live="polite">${kcSanitize(advancedMsg(attribute.annotations.inputHelperTextAfter))?no_esc}</div>
+					</#if>
+				</div>
+			</div>
+			<#nested "afterField" attribute>
+		</#if>
+	</#list>
+	<#list profile.html5DataAnnotations?keys as key>
+		<script type="module" src="${url.resourcesPath}/js/${key}.js"></script>
+	</#list>
+</#macro>
+<#macro inputFieldByType attribute>
+	<#switch attribute.annotations.inputType!''>
+	<#case 'textarea'>
+		<@textareaTag attribute=attribute/>
+		<#break>
+	<#case 'select'>
+	<#case 'multiselect'>
+		<@selectTag attribute=attribute/>
+		<#break>
+	<#case 'select-radiobuttons'>
+	<#case 'multiselect-checkboxes'>
+		<@inputTagSelects attribute=attribute/>
+		<#break>
+	<#default>
+		<#if attribute.multivalued && attribute.values?has_content>
+			<#list attribute.values as value>
+				<@inputTag attribute=attribute value=value!''/>
+			</#list>
+		<#else>
+			<@inputTag attribute=attribute value=attribute.value!''/>
+		</#if>
+	</#switch>
+</#macro>
+<#macro inputTag attribute value>
+	<input type="<@inputTagType attribute=attribute/>" id="${attribute.name}" name="${attribute.name}" value="${(value!'')}" class="${properties.kcInputClass!}"
+		aria-invalid="<#if messagesPerField.existsError('${attribute.name}')>true</#if>"
+		<#if attribute.readOnly>disabled</#if>
+		<#if attribute.autocomplete??>autocomplete="${attribute.autocomplete}"</#if>
+		<#if attribute.annotations.inputTypePlaceholder??>placeholder="${advancedMsg(attribute.annotations.inputTypePlaceholder)}"</#if>
+		<#if attribute.annotations.inputTypePattern??>pattern="${attribute.annotations.inputTypePattern}"</#if>
+		<#if attribute.annotations.inputTypeSize??>size="${attribute.annotations.inputTypeSize}"</#if>
+		<#if attribute.annotations.inputTypeMaxlength??>maxlength="${attribute.annotations.inputTypeMaxlength}"</#if>
+		<#if attribute.annotations.inputTypeMinlength??>minlength="${attribute.annotations.inputTypeMinlength}"</#if>
+		<#if attribute.annotations.inputTypeMax??>max="${attribute.annotations.inputTypeMax}"</#if>
+		<#if attribute.annotations.inputTypeMin??>min="${attribute.annotations.inputTypeMin}"</#if>
+		<#if attribute.annotations.inputTypeStep??>step="${attribute.annotations.inputTypeStep}"</#if>
+		<#list attribute.html5DataAnnotations as key, value>
+    		data-${key}="${value}"
+		</#list>
+	/>
+</#macro>
+<#macro inputTagType attribute>
+	<#compress>
+	<#if attribute.annotations.inputType??>
+		<#if attribute.annotations.inputType?starts_with("html5-")>
+			${attribute.annotations.inputType[6..]}
+		<#else>
+			${attribute.annotations.inputType}
+		</#if>
+	<#else>
+	text
+	</#if>
+	</#compress>
+</#macro>
+<#macro textareaTag attribute>
+	<textarea id="${attribute.name}" name="${attribute.name}" class="${properties.kcInputClass!}"
+		aria-invalid="<#if messagesPerField.existsError('${attribute.name}')>true</#if>"
+		<#if attribute.readOnly>disabled</#if>
+		<#if attribute.annotations.inputTypeCols??>cols="${attribute.annotations.inputTypeCols}"</#if>
+		<#if attribute.annotations.inputTypeRows??>rows="${attribute.annotations.inputTypeRows}"</#if>
+		<#if attribute.annotations.inputTypeMaxlength??>maxlength="${attribute.annotations.inputTypeMaxlength}"</#if>
+	>${(attribute.value!'')}</textarea>
+</#macro>
+<#macro selectTag attribute>
+	<select id="${attribute.name}" name="${attribute.name}" class="${properties.kcInputClass!}"
+		aria-invalid="<#if messagesPerField.existsError('${attribute.name}')>true</#if>"
+		<#if attribute.readOnly>disabled</#if>
+		<#if attribute.annotations.inputType=='multiselect'>multiple</#if>
+		<#if attribute.annotations.inputTypeSize??>size="${attribute.annotations.inputTypeSize}"</#if>
+	>
+	<#if attribute.annotations.inputType=='select'>
+		<option value=""></option>
+	</#if>
+	<#if attribute.annotations.inputOptionsFromValidation?? && attribute.validators[attribute.annotations.inputOptionsFromValidation]?? && attribute.validators[attribute.annotations.inputOptionsFromValidation].options??>
+		<#assign options=attribute.validators[attribute.annotations.inputOptionsFromValidation].options>
+	<#elseif attribute.validators.options?? && attribute.validators.options.options??>
+		<#assign options=attribute.validators.options.options>
+	<#else>
+		<#assign options=[]>
+	</#if>
+	<#list options as option>
+		<option value="${option}" <#if attribute.values?seq_contains(option)>selected</#if>><@selectOptionLabelText attribute=attribute option=option/></option>
+	</#list>
+	</select>
+</#macro>
+<#macro inputTagSelects attribute>
+	<#if attribute.annotations.inputType=='select-radiobuttons'>
+		<#assign inputType='radio'>
+		<#assign classDiv=properties.kcInputClassRadio!>
+		<#assign classInput=properties.kcInputClassRadioInput!>
+		<#assign classLabel=properties.kcInputClassRadioLabel!>
+	<#else>
+		<#assign inputType='checkbox'>
+		<#assign classDiv=properties.kcInputClassCheckbox!>
+		<#assign classInput=properties.kcInputClassCheckboxInput!>
+		<#assign classLabel=properties.kcInputClassCheckboxLabel!>
+	</#if>
+	<#if attribute.annotations.inputOptionsFromValidation?? && attribute.validators[attribute.annotations.inputOptionsFromValidation]?? && attribute.validators[attribute.annotations.inputOptionsFromValidation].options??>
+		<#assign options=attribute.validators[attribute.annotations.inputOptionsFromValidation].options>
+	<#elseif attribute.validators.options?? && attribute.validators.options.options??>
+		<#assign options=attribute.validators.options.options>
+	<#else>
+		<#assign options=[]>
+	</#if>
+	<#list options as option>
+		<div class="${classDiv}">
+			<input type="${inputType}" id="${attribute.name}-${option}" name="${attribute.name}" value="${option}" class="${classInput}"
+				aria-invalid="<#if messagesPerField.existsError('${attribute.name}')>true</#if>"
+				<#if attribute.readOnly>disabled</#if>
+				<#if attribute.values?seq_contains(option)>checked</#if>
+			/>
+			<label for="${attribute.name}-${option}" class="${classLabel}<#if attribute.readOnly> ${properties.kcInputClassRadioCheckboxLabelDisabled!}</#if>"><@selectOptionLabelText attribute=attribute option=option/></label>
+		</div>
+	</#list>
+</#macro>
+<#macro selectOptionLabelText attribute option>
+	<#compress>
+	<#if attribute.annotations.inputOptionLabels??>
+		${advancedMsg(attribute.annotations.inputOptionLabels[option]!option)}
+	<#else>
+		<#if attribute.annotations.inputOptionLabelsI18nPrefix??>
+			${msg(attribute.annotations.inputOptionLabelsI18nPrefix + '.' + option)}
+		<#else>
+			${option}
+		</#if>
+	</#if>
+	</#compress>
+</#macro>

package/public/keycloak-upstream/base/login/webauthn-authenticate.ftl ADDED Viewed

@@ -0,0 +1,104 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayInfo=(realm.registrationAllowed && !registrationDisabled??); section>
+    <#if section = "title">
+     title
+    <#elseif section = "header">
+        ${msg("webauthn-login-title")}
+    <#elseif section = "form">
+        <div id="kc-form-webauthn" class="${properties.kcFormClass!}">
+            <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>
+            <div class="${properties.kcFormGroupClass!} no-bottom-margin">
+                <#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 shouldDisplayAuthenticators?? && shouldDisplayAuthenticators>
+                        <#if authenticators.authenticators?size gt 1>
+                            <p class="${properties.kcSelectAuthListItemTitle!}">${msg("webauthn-available-authenticators")}</p>
+                        </#if>
+                        <div class="${properties.kcFormClass!}">
+                            <#list authenticators.authenticators as authenticator>
+                                <div id="kc-webauthn-authenticator-item-${authenticator?index}" class="${properties.kcSelectAuthListItemClass!}">
+                                    <div class="${properties.kcSelectAuthListItemIconClass!}">
+                                        <i class="${(properties['${authenticator.transports.iconClass}'])!'${properties.kcWebAuthnDefaultIcon!}'} ${properties.kcSelectAuthListItemIconPropertyClass!}"></i>
+                                    </div>
+                                    <div class="${properties.kcSelectAuthListItemBodyClass!}">
+                                        <div id="kc-webauthn-authenticator-label-${authenticator?index}"
+                                             class="${properties.kcSelectAuthListItemHeadingClass!}">
+                                            ${authenticator.label}
+                                        </div>
+                                        <#if authenticator.transports?? && authenticator.transports.displayNameProperties?has_content>
+                                            <div id="kc-webauthn-authenticator-transport-${authenticator?index}"
+                                                 class="${properties.kcSelectAuthListItemDescriptionClass!}">
+                                                <#list authenticator.transports.displayNameProperties as nameProperty>
+                                                    <span>${msg(nameProperty)}</span>
+                                                    <#if nameProperty?has_next>
+                                                        <span>, </span>
+                                                    </#if>
+                                                </#list>
+                                            </div>
+                                        </#if>
+                                        <div class="${properties.kcSelectAuthListItemDescriptionClass!}">
+                                            <span id="kc-webauthn-authenticator-createdlabel-${authenticator?index}">
+                                                ${msg('webauthn-createdAt-label')}
+                                            </span>
+                                            <span id="kc-webauthn-authenticator-created-${authenticator?index}">
+                                                ${authenticator.createdAt}
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="${properties.kcSelectAuthListItemFillClass!}"></div>
+                                </div>
+                            </#list>
+                        </div>
+                    </#if>
+                </#if>
+                <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
+                    <input id="authenticateWebAuthnButton" type="button" autofocus="autofocus"
+                           value="${msg("webauthn-doAuthenticate")}"
+                           class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"/>
+                </div>
+            </div>
+        </div>
+    <script type="module">
+        <#outputformat "JavaScript">
+        import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+        const authButton = document.getElementById('authenticateWebAuthnButton');
+        authButton.addEventListener("click", function() {
+            const input = {
+                isUserIdentified : ${isUserIdentified},
+                challenge : ${challenge?c},
+                userVerification : ${userVerification?c},
+                rpId : ${rpId?c},
+                createTimeout : ${createTimeout?c},
+                errmsg : ${msg("webauthn-unsupported-browser-text")?c}
+            };
+            authenticateByWebAuthn(input);
+        }, { once: true });
+        </#outputformat>
+    </script>
+    <#elseif section = "info">
+        <#if realm.registrationAllowed && !registrationDisabled??>
+            <div id="kc-registration">
+                <span>${msg("noAccount")} <a tabindex="6" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
+            </div>
+        </#if>
+    </#if>
+</@layout.registrationLayout>

package/public/keycloak-upstream/base/login/webauthn-error.ftl ADDED Viewed

@@ -0,0 +1,36 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayMessage=true; section>
+    <#if section = "header">
+        ${kcSanitize(msg("webauthn-error-title"))?no_esc}
+    <#elseif section = "form">
+        <script type="text/javascript">
+            refreshPage = () => {
+                document.getElementById('isSetRetry').value = 'retry';
+                document.getElementById('executionValue').value = '${execution}';
+                document.getElementById('kc-error-credential-form').requestSubmit();
+            }
+        </script>
+        <form id="kc-error-credential-form" class="${properties.kcFormClass!}" action="${url.loginAction}"
+              method="post">
+            <input type="hidden" id="executionValue" name="authenticationExecution"/>
+            <input type="hidden" id="isSetRetry" name="isSetRetry"/>
+        </form>
+        <input tabindex="4" onclick="refreshPage()" type="button"
+               class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
+               name="try-again" id="kc-try-again" value="${kcSanitize(msg("doTryAgain"))?no_esc}"
+        />
+        <#if isAppInitiatedAction??>
+            <form action="${url.loginAction}" class="${properties.kcFormClass!}" id="kc-webauthn-settings-form" method="post">
+                <button type="submit"
+                        class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
+                        id="cancelWebAuthnAIA" name="cancel-aia" value="true">${msg("doCancel")}
+                </button>
+            </form>
+        </#if>
+    </#if>
+</@layout.registrationLayout>