title: How to add a slider for admin login in keycloak login template?
body: <p>I am working on keycloak login And I have to add slider in login page to allow user to login as an administrator or normal user. I have read the <a href="https://www.keycloak.org/docs/latest/server_development/#_themes" rel="nofollow noreferrer">https://www.keycloak.org/docs/latest/server_development/#_themes</a>. I have to edit the login theme. But I would like to know how can I add correctly the slider and configuration of admin login. I attach the template of login theme below. If someone knows how this can be done then please share your thoughts:</p>
  <p><strong>login.ftl</strong></p>
  <pre><code>&lt;#import &quot;template.ftl&quot; as layout&gt;
  &lt;@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password &amp;&amp; realm.registrationAllowed &amp;&amp; !registrationDisabled??; section&gt;
      &lt;#if section = &quot;header&quot;&gt;
          ${msg(&quot;loginAccountTitle&quot;)}
      &lt;#elseif section = &quot;form&quot;&gt;
      &lt;div id=&quot;kc-form&quot;&gt;
        &lt;div id=&quot;kc-form-wrapper&quot;&gt;
          &lt;#if realm.password&gt;
              &lt;form id=&quot;kc-form-login&quot; onsubmit=&quot;login.disabled = true; return true;&quot; action=&quot;${url.loginAction}&quot; method=&quot;post&quot;&gt;
                  &lt;#if !usernameHidden??&gt;
                      &lt;div class=&quot;${properties.kcFormGroupClass!}&quot;&gt;
                          &lt;label for=&quot;username&quot; class=&quot;${properties.kcLabelClass!}&quot;&gt;&lt;#if !realm.loginWithEmailAllowed&gt;${msg(&quot;username&quot;)}&lt;#elseif !realm.registrationEmailAsUsername&gt;${msg(&quot;usernameOrEmail&quot;)}&lt;#else&gt;${msg(&quot;email&quot;)}&lt;/#if&gt;&lt;/label&gt;
  
                          &lt;input tabindex=&quot;1&quot; id=&quot;username&quot; class=&quot;${properties.kcInputClass!}&quot; name=&quot;username&quot; value=&quot;${(login.username!'')}&quot;  type=&quot;text&quot; autofocus autocomplete=&quot;off&quot;
                                 aria-invalid=&quot;&lt;#if messagesPerField.existsError('username','password')&gt;true&lt;/#if&gt;&quot;
                          /&gt;
  
                          &lt;#if messagesPerField.existsError('username','password')&gt;
                              &lt;span id=&quot;input-error&quot; class=&quot;${properties.kcInputErrorMessageClass!}&quot; aria-live=&quot;polite&quot;&gt;
                                      ${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
                              &lt;/span&gt;
                          &lt;/#if&gt;
  
                      &lt;/div&gt;
                  &lt;/#if&gt;
  
                  &lt;div class=&quot;${properties.kcFormGroupClass!}&quot;&gt;
                      &lt;label for=&quot;password&quot; class=&quot;${properties.kcLabelClass!}&quot;&gt;${msg(&quot;password&quot;)}&lt;/label&gt;
  
                      &lt;input tabindex=&quot;2&quot; id=&quot;password&quot; class=&quot;${properties.kcInputClass!}&quot; name=&quot;password&quot; type=&quot;password&quot; autocomplete=&quot;off&quot;
                             aria-invalid=&quot;&lt;#if messagesPerField.existsError('username','password')&gt;true&lt;/#if&gt;&quot;
                      /&gt;
  
                      &lt;#if usernameHidden?? &amp;&amp; messagesPerField.existsError('username','password')&gt;
                          &lt;span id=&quot;input-error&quot; class=&quot;${properties.kcInputErrorMessageClass!}&quot; aria-live=&quot;polite&quot;&gt;
                                  ${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
                          &lt;/span&gt;
                      &lt;/#if&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class=&quot;${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}&quot;&gt;
                      &lt;div id=&quot;kc-form-options&quot;&gt;
                          &lt;#if realm.rememberMe &amp;&amp; !usernameHidden??&gt;
                              &lt;div class=&quot;checkbox&quot;&gt;
                                  &lt;label&gt;
                                      &lt;#if login.rememberMe??&gt;
                                          &lt;input tabindex=&quot;3&quot; id=&quot;rememberMe&quot; name=&quot;rememberMe&quot; type=&quot;checkbox&quot; checked&gt; ${msg(&quot;rememberMe&quot;)}
                                      &lt;#else&gt;
                                          &lt;input tabindex=&quot;3&quot; id=&quot;rememberMe&quot; name=&quot;rememberMe&quot; type=&quot;checkbox&quot;&gt; ${msg(&quot;rememberMe&quot;)}
                                      &lt;/#if&gt;
                                  &lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/#if&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;${properties.kcFormOptionsWrapperClass!}&quot;&gt;
                              &lt;#if realm.resetPasswordAllowed&gt;
                                  &lt;span&gt;&lt;a tabindex=&quot;5&quot; href=&quot;${url.loginResetCredentialsUrl}&quot;&gt;${msg(&quot;doForgotPassword&quot;)}&lt;/a&gt;&lt;/span&gt;
                              &lt;/#if&gt;
                          &lt;/div&gt;
  
                    &lt;/div&gt;
  
                    &lt;div id=&quot;kc-form-buttons&quot; class=&quot;${properties.kcFormGroupClass!}&quot;&gt;
                        &lt;input type=&quot;hidden&quot; id=&quot;id-hidden-input&quot; name=&quot;credentialId&quot; &lt;#if auth.selectedCredential?has_content&gt;value=&quot;${auth.selectedCredential}&quot;&lt;/#if&gt;/&gt;
                        &lt;input tabindex=&quot;4&quot; class=&quot;${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}&quot; name=&quot;login&quot; id=&quot;kc-login&quot; type=&quot;submit&quot; value=&quot;${msg(&quot;doLogIn&quot;)}&quot;/&gt;
                    &lt;/div&gt;
              &lt;/form&gt;
          &lt;/#if&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;#elseif section = &quot;info&quot; &gt;
          &lt;#if realm.password &amp;&amp; realm.registrationAllowed &amp;&amp; !registrationDisabled??&gt;
              &lt;div id=&quot;kc-registration-container&quot;&gt;
                  &lt;div id=&quot;kc-registration&quot;&gt;
                      &lt;span&gt;${msg(&quot;noAccount&quot;)} &lt;a tabindex=&quot;6&quot;
                                                   href=&quot;${url.registrationUrl}&quot;&gt;${msg(&quot;doRegister&quot;)}&lt;/a&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/#if&gt;
      &lt;#elseif section = &quot;socialProviders&quot; &gt;
          &lt;#if realm.password &amp;&amp; social.providers??&gt;
              &lt;div id=&quot;kc-social-providers&quot; class=&quot;${properties.kcFormSocialAccountSectionClass!}&quot;&gt;
                  &lt;hr/&gt;
                  &lt;h4&gt;${msg(&quot;identity-provider-login-label&quot;)}&lt;/h4&gt;
  
                  &lt;ul class=&quot;${properties.kcFormSocialAccountListClass!} &lt;#if social.providers?size gt 3&gt;${properties.kcFormSocialAccountListGridClass!}&lt;/#if&gt;&quot;&gt;
                      &lt;#list social.providers as p&gt;
                          &lt;a id=&quot;social-${p.alias}&quot; class=&quot;${properties.kcFormSocialAccountListButtonClass!} &lt;#if social.providers?size gt 3&gt;${properties.kcFormSocialAccountGridItem!}&lt;/#if&gt;&quot;
                                  type=&quot;button&quot; href=&quot;${p.loginUrl}&quot;&gt;
                              &lt;#if p.iconClasses?has_content&gt;
                                  &lt;i class=&quot;${properties.kcCommonLogoIdP!} ${p.iconClasses!}&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
                                  &lt;span class=&quot;${properties.kcFormSocialAccountNameClass!} kc-social-icon-text&quot;&gt;${p.displayName!}&lt;/span&gt;
                              &lt;#else&gt;
                                  &lt;span class=&quot;${properties.kcFormSocialAccountNameClass!}&quot;&gt;${p.displayName!}&lt;/span&gt;
                              &lt;/#if&gt;
                          &lt;/a&gt;
                      &lt;/#list&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/#if&gt;
      &lt;/#if&gt;
  
  &lt;/@layout.registrationLayout&gt;
  </code></pre>