keycloak-theme/login/login.ftl

<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
  <#if section = "header">
    ${msg("loginAccountTitle")}
  <#elseif section = "form">
    <#if realm.password>
      <form class="ps-container" 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"
              class="${properties.kcInputClass!}"
              name="username"
              value="${(login.username!'')}"
              type="text"
              autofocus
              autocomplete="off"
              aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
            />

            <#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>

          <input
            tabindex="2"
            id="password"
            class="${properties.kcInputClass!}"
            name="password"
            type="password"
            autocomplete="off"
            aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
          />

          <#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>

          <#if realm.resetPasswordAllowed>
            <div class="${properties.kcFormOptionsWrapperClass!}">
              <span><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
            </div>
          </#if>
        </div>

        <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
          <#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 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>/>
          <button
            tabindex="4"
            class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
            name="login"
            id="kc-login"
            type="submit"
          >${msg("doLogIn")}</button>
        </div>
      </form>
    </#if>

  <#elseif section = "info" >
    <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
      <div id="kc-registration-container">
        <div id="kc-registration">
          <span>${msg("noAccount")}
            <a tabindex="6" href="${url.registrationUrl}">${msg("doRegister")}</a>
          </span>
        </div>
      </div>
    </#if>
  <#elseif section = "socialProviders" >
    <#if realm.password && social.providers??>
      <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
              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>