Change Theme for OTP Code Page (One-time code)

haseeb · June 6, 2023, 11:16am

Hello everyone,

Can anyone suggest how can i change the theme for One-time code page.
please see the screenshot below

Thanks

xgp · June 6, 2023, 4:46pm

Read the docs on creating custom themes:
https://www.keycloak.org/docs/latest/server_development/index.html#_themes

Start with a theme template:

Override the login-otp.ftl template and put it in your extension project:

github.com

keycloak/keycloak/blob/main/themes/src/main/resources/theme/base/login/login-otp.ftl

<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('totp'); section>
    <#if section="header">
        ${msg("doLogIn")}
    <#elseif section="form">
        <form id="kc-otp-login-form" class="${properties.kcFormClass!}" action="${url.loginAction}"
            method="post">
            <#if otpLogin.userOtpCredentials?size gt 1>
                <div class="${properties.kcFormGroupClass!}">
                    <div class="${properties.kcInputWrapperClass!}">
                        <#list otpLogin.userOtpCredentials as otpCredential>
                            <input id="kc-otp-credential-${otpCredential?index}" class="${properties.kcLoginOTPListInputClass!}" type="radio" name="selectedCredentialId" value="${otpCredential.id}" <#if otpCredential.id == otpLogin.selectedCredentialId>checked="checked"</#if>>
                            <label for="kc-otp-credential-${otpCredential?index}" class="${properties.kcLoginOTPListClass!}" tabindex="${otpCredential?index}">
                                <span class="${properties.kcLoginOTPListItemHeaderClass!}">
                                    <span class="${properties.kcLoginOTPListItemIconBodyClass!}">
                                      <i class="${properties.kcLoginOTPListItemIconClass!}" aria-hidden="true"></i>
                                    </span>
                                    <span class="${properties.kcLoginOTPListItemTitleClass!}">${otpCredential.userLabel}</span>
                                </span>
                            </label>

This file has been truncated. show original

Topic		Replies	Views
Changing the login theme Extending the server	3	518	August 24, 2020
Update_Password Action Theme Extending the server	0	560	June 13, 2022
Keycloak Custom Themes Modification Getting advice	3	108	May 22, 2024
Customizing error messages on KeyCloak's UI Getting advice	4	4753	February 3, 2023
Can I just override some styles of the default theme? Configuring the server authentication	2	847	May 22, 2023

Change Theme for OTP Code Page (One-time code)

Related Topics