keycloak-theme-dev/keycloak.v2-dev/login/login-phone-or-password.ftl

<#import "template.ftl" as layout>
<#import "field.ftl" as field>
<#import "buttons.ftl" as buttons>
<#import "tabs.ftl" as tabs>
<#import "social-providers.ftl" as identityProviders>
<#import "passkeys.ftl" as passkeys>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
<!-- template: login.ftl -->
    <#if section = "header">
        ${msg("loginAccountTitle")}
    <#elseif section = "form">
        <script type="text/javascript">
        // Add styles
        loadCSS('${url.resourcesPath}/css/loginPhoneOrPassword.css');
        loadCSS('${url.resourcesPath}/css/lib/choices.css');
        loadCSS('${url.resourcesPath}/css/component/smsSenderForm.css');
        </script>

        <div id="kc-form">
          <div id="kc-form-wrapper">
            <#if realm.password>
                <form id="kc-form-login" class="${properties.kcFormClass!}" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post" novalidate="novalidate">
                    <input type="hidden" id="login-type" name="loginType" value="${auth.loginType!'username'}"/>
                    <@tabs.tabsBar panelId="login-panel" filled=true pill=true>
                        <@tabs.tabButton tabId="password" panelId="login-panel" label="loginByUsername" active=true />
                        <@tabs.tabButton tabId="phone" panelId="login-panel" label="loginByPhone" />
                    </@tabs.tabsBar>
                    <@tabs.tabPanel panelId="login-panel">
                        <@tabs.tabContent tabId="password" active=true>
                            <#if !usernameHidden??>
                                <#assign label>
                                    <#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
                                </#assign>
                                <@field.input name="username" label=label error=kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc
                                    autofocus=true autocomplete="${(enableWebAuthnConditionalUI?has_content)?then('username webauthn', 'username')}" value=auth.username!'' />
                                <@field.password name="password" label=msg("password") error="" forgotPassword=realm.resetPasswordAllowed autofocus=usernameHidden?? autocomplete="current-password" />
                            <#else>
                                <@field.password name="password" label=msg("password") forgotPassword=realm.resetPasswordAllowed autofocus=usernameHidden?? autocomplete="current-password" />
                            </#if>
                        </@tabs.tabContent>
                        
                        <@tabs.tabContent tabId="phone">
                            <@field.group name="phoneNumber" label=msg("phoneNumber") error="" required=false>
                                <div class="${properties.kcInputGroup!}">
                                    <div class="${properties.kcInputGroupItemClass!}">
                                        <div class="${properties.kcInputClass!} areaCodeInputContainer">
                                            <select tabindex="1" class="areaCodeInput" name="areaCode" data-value="${(auth.areaCode!'')}">
                                                
                                            </select>
                                        </div>
                                    </div>
                                    <div class="${properties.kcInputGroupItemClass!} ${properties.kcFill}">
                                        <div class="${properties.kcInputClass!}">
                                            <input tabindex="2" class="phoneNumberInput" name="phoneNumber" value="${(auth.phoneNumber!'')}" type="tel" />
                                        </div>
                                    </div>
                                </div>
                            </@field.group>
                            
                            <@field.group name="smsCode" label=msg("smsVerificationCode") error=kcSanitize(messagesPerField.getFirstError('sms-code'))?no_esc required=false>
                                <div class="${properties.kcInputGroup!}">
                                    <span class="${properties.kcInputGroupItemClass!} ${properties.kcFill}">
                                        <div class="${properties.kcInputClass!}">
                                            <input tabindex="2" type="text" maxlength="6" class="smsCodeInput" name="smsCode" value="${(auth.smsCode!'')}" nospin"/>
                                        </div>
                                    </span>
                                    <span class="${properties.kcInputGroupItemClass!}">
                                        <button class="${properties.kcButtonPrimaryClass!} btnSendSmsCode" type="button">
                                            ${msg("sendSmsBtn")}
                                        </button>
                                    </span>
                                </div>
                            </@field.group>
                        </@tabs.tabContent>
                    </@tabs.tabPanel>

                    <#if realm.rememberMe && !usernameHidden??>
                        <@field.checkbox name="rememberMe" label=msg("rememberMe") value=auth.rememberMe?? />
                    </#if>

                    <input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
                    <@buttons.loginButton />
                </form>
            </#if>
            </div>
        </div>
        <@passkeys.conditionalUIData />
        <script type="application/json" data-configs>
        {
            "realm": "${realm.name!''}",
            "realmUrl": "/realms/${realm.name!''}"
        }
        </script>
        <script type="application/json" data-messages>
        {
            "geetestCaptchaLangCode": "${msg("geetestCaptchaLangCode")}",
            "error": "${msg("sendSmsError")}",
            "captchaLoadError": "${msg("captchaLoadError")}",
            "captchaCodeApiError": "${msg("captchaCodeApiError")}",
            "countryNameLangCode": "${msg("phoneAreaCountryNameLangCode")}",
            "sending": "${msg("smsSending")}",
            "sendVerificationCode": "${msg("sendSmsBtn")}",
            "resendVerificationCode": "${msg("resendSmsBtn")}",
            "second": "${msg("second")}",
            "phoneNumberIsEmpty": "${msg("errorPhoneNumberIsEmpty")}",
            "sendSmsCodeError": "${msg("errorSendSmsCodeInternalError")}",
            "areaNotSupported": "${msg("errorPhoneAreaNotSupported")}",
            "captchaNotCompleted": "${msg("errorCaptchaRequired")}",
            "cannotGetConfig": "${msg("errorCannotGetConfig")}",
            "userNotExists": "${msg("errorPhoneUserNotFound")}",
            "sendVerificationError": "${msg("errorSendVerificationError")}"
        }
        </script>
        <script type="module" src="${url.resourcesPath}/js/loginPhoneOrPassword.js"></script>
    <#elseif section = "socialProviders" >
        <#if realm.password && social.providers?? && social.providers?has_content>
            <@identityProviders.show social=social/>
        </#if>
    <#elseif section = "info" >
        <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
            <div id="kc-registration-container">
                <div id="kc-registration">
                    <span>${msg("noAccount")} <a href="${url.registrationUrl}">${msg("doRegister")}</a></span>
                </div>
            </div>
        </#if>
    </#if>
</@layout.registrationLayout>