Issue on Register Form when using userProfile

[paulwer]

Keywind is missing register-user-profile.ftl, so it will fallback to base-theme.

Orginal Post: Within my deployment the register form is not displayed correctly:

The browser-console shows no class-names for the children. Can someone reproduce this? I was also not able to fix this by looking into the files. Every other site works just fine.

File:

<#import "template.ftl" as layout>
<#import "components/atoms/button.ftl" as button>
<#import "components/atoms/button-group.ftl" as buttonGroup>
<#import "components/atoms/form.ftl" as form>
<#import "components/atoms/input.ftl" as input>
<#import "components/atoms/link.ftl" as link>

<@layout.registrationLayout
  displayMessage=!messagesPerField.existsError("firstName", "lastName", "email", "username", "password", "password-confirm")
  ;
  section
>
  <#if section="header">
    ${msg("registerTitle")}
  <#elseif section="form">
    <@form.kw action=url.registrationAction method="post">
      <@input.kw
        autocomplete="given-name"
        autofocus=true
        invalid=messagesPerField.existsError("firstName")
        label=msg("firstName")
        message=kcSanitize(messagesPerField.get("firstName"))
        name="firstName"
        type="text"
        value=(register.formData.firstName)!''
      />
      <@input.kw
        autocomplete="family-name"
        invalid=messagesPerField.existsError("lastName")
        label=msg("lastName")
        message=kcSanitize(messagesPerField.get("lastName"))
        name="lastName"
        type="text"
        value=(register.formData.lastName)!''
      />
      <@input.kw
        autocomplete="email"
        invalid=messagesPerField.existsError("email")
        label=msg("email")
        message=kcSanitize(messagesPerField.get("email"))
        name="email"
        type="email"
        value=(register.formData.email)!''
      />
      <#if !realm.registrationEmailAsUsername>
        <@input.kw
          autocomplete="username"
          invalid=messagesPerField.existsError("username")
          label=msg("username")
          message=kcSanitize(messagesPerField.get("username"))
          name="username"
          type="text"
          value=(register.formData.username)!''
        />
      </#if>
      <#if passwordRequired??>
        <@input.kw
          autocomplete="new-password"
          invalid=messagesPerField.existsError("password", "password-confirm")
          label=msg("password")
          message=kcSanitize(messagesPerField.getFirstError("password", "password-confirm"))
          name="password"
          type="password"
        />
        <@input.kw
          autocomplete="new-password"
          invalid=messagesPerField.existsError("password-confirm")
          label=msg("passwordConfirm")
          message=kcSanitize(messagesPerField.get("password-confirm"))
          name="password-confirm"
          type="password"
        />
      </#if>
      <#if recaptchaRequired??>
        <div class="g-recaptcha" data-sitekey="${recaptchaSiteKey}" data-size="compact"></div>
      </#if>
      <@buttonGroup.kw>
        <@button.kw color="primary" type="submit">
          ${msg("doRegister")}
        </@button.kw>
      </@buttonGroup.kw>
    </@form.kw>
  <#elseif section="nav">
    <@link.kw color="secondary" href=url.loginUrl size="small">
      ${kcSanitize(msg("backToLogin"))?no_esc}
    </@link.kw>
  </#if>
</@layout.registrationLayout>

browser-html:

<div class="bg-white p-8 rounded-lg space-y-6">
      <div class="space-y-4">
          <div class="font-bold text-center text-2xl">
      <div class="kc-logo-text"><span></span></div>
  </div>
  <h1 class="text-center text-xl">
        Register
  </h1>

      </div>
      <div class="space-y-4">
                <form id="kc-register-form" class="" action="https://keycloak-instance-url/realms/master/login-actions/registration?session_code=gFZaf7Q4ZkBoTJkkc1a2FD2O7bfPQp73Ds4wzl_Uxw0&amp;execution=35a0cff7-75be-4c9e-9a12-8af40885b954&amp;client_id=security-admin-console&amp;tab_id=8UEk3-Dq90E" method="post">

        <div class="">
            <div class="">
                <label for="username" class="">Username</label>
                *
            </div>
            <div class="">
    <input type="text" id="username" name="username" value="" class="" aria-invalid="" autocomplete="username">
            </div>
        </div>
                        <div class="">
                            <div class="">
                                <label for="password" class="">Password</label> *
                            </div>
                            <div class="">
                                <input type="password" id="password" class="" name="password" autocomplete="new-password" aria-invalid="" aria-autocomplete="list">

                            </div>
                        </div>

                        <div class="">
                            <div class="">
                                <label for="password-confirm" class="">Confirm password</label> *
                            </div>
                            <div class="">
                                <input type="password" id="password-confirm" class="" name="password-confirm" aria-invalid="">

                            </div>
                        </div>

        <div class="">
            <div class="">
                <label for="email" class="">Email</label>
                *
            </div>
            <div class="">
    <input type="text" id="email" name="email" value="" class="" aria-invalid="" autocomplete="email">
            </div>
        </div>

        <div class="">
            <div class="">
                <label for="firstName" class="">First name</label>
                *
            </div>
            <div class="">
    <input type="text" id="firstName" name="firstName" value="" class="" aria-invalid="">
            </div>
        </div>

        <div class="">
            <div class="">
                <label for="lastName" class="">Last name</label>
                *
            </div>
            <div class="">
    <input type="text" id="lastName" name="lastName" value="" class="" aria-invalid="">
            </div>
        </div>

            <div class="">
                <div id="kc-form-options" class="">
                    <div class="">
                        <span><a href="/realms/master/login-actions/authenticate?client_id=security-admin-console&amp;tab_id=8UEk3-Dq90E">« Back to Login</a></span>
                    </div>
                </div>

                <div id="kc-form-buttons" class="">
                    <input class="   " type="submit" value="Register">
                </div>
            </div>
        </form>
      <p class="text-secondary-600 text-sm">
        * Required fields
      </p>

      </div>
  </div>

• no logs indicating something on keycloak server
• no differences found by looking at other templates

[ThallesP]

Hi @paulwer did you found a solution? i'm getting this problem when using the Dockerfile provided by Keycloak. for some reason in this docker-compose https://github.com/lukin/keywind/issues/29#issuecomment-1418805888 provided it works normally

[paulwer]

sadly no. any suggestions, how to fix this? Maybe its a coalation problem with the texts and docker? (but dont know, how to address this)

I also have it deployed with docker. Does it work, without the use of docker?

[ThallesP]

sadly no. any suggestions, how to fix this? Maybe its a coalation problem with the texts and docker? (but dont know, how to address this)

I also have it deployed with docker. Does it work, without the use of docker?

For some reason it seems to be the Dockerfile provided by Keycloak for production, I don't know what steps exactly tho

[paulwer]

any suggestions/ideas @lukin ?

[SimonScholz]

+1

We are having the same issue with the registration form.

[SimonScholz]

What I've also seen is that this only applies for the elements within the <form> elements. Outside the <form> the class attributes are not empty. But the class attributes are present, but only empty:

[paulwer]

A few Ideas, which may someone can check, but I am currently not in office:

• compare the hex characters, maybe there are invisible chars, which are making trouble here
• compare files generated by vite build in /dist output if there are class props present (checked: no changes)
• compare them with the files within a docker container

any responses about findings / no findings would be great ❤️

[paulwer]

Some additional findings from my side:

1. keywind sets the base-theme as parent, so i suggest, that freemarker can not access the form-section of the template and falls back to the base-theme in any way. I have this POV, because the form element has the id="kc-register-form", which is default at base-theme and when properties.kc is not defined in theme, this results in empty class-properties. => Does anyone have a idea, why the template is falling back to the base-theme in our case for this element?!
2. The register file is formatted with LF, but the most files are formatted with CRLF. I did not see any change in behavior, after changing everything to LF (also tried all CRLF) Hoping this is not a cache problem, that I dont see any changes. Maybe someone else can test it too. :)

[paulwer]

I found the reason! When usage of user-profile is enabled, the template register-user-profile.ftl is used instead of register.ftl.

This file does not exists, so it defaults back to the base-theme for the components.

An apropeate file for register-user-profile.ftl, which supports the file should be added. The new terms-feature should also be added btw!

@lukin

https://github.com/keycloak/keycloak/blob/main/themes/src/main/resources/theme/base/login/register-user-profile.ftl https://github.com/keycloak/keycloak/blob/main/themes/src/main/resources/theme/base/login/register-commons.ftl https://github.com/keycloak/keycloak/blob/main/themes/src/main/resources/theme/base/login/user-profile-commons.ftl

Without userProfile enabled the template looks correct:

[SimonScholz]

Thank you so much for the analysis @paulwer 👍🏻

I am now trying to adapt the ftl files you mentioned with the keywind components. Or is someone doing this right now in parallel? @paulwer @lukin ?

For me it would take pretty long to adjust the ftl files, since I am not really familiar with Freemarker.

[paulwer]

I would gladly sit back and review the PR, if thats ok 😇

Thanks for your initiative :)

[paulwer]

@SimonScholz If you need any help, put the PR public as draft and I can may assist <3

[paulwer]

@SimonScholz I've just pr a part of necessary updated (terms & conditions), which would likly be part of your pr, you can even take it from the pr and include it in your own, so mine can gets closed. Otherwise plese ignore this feature for now and we add it afterwards.

If you dont mind, I may also take a look at the PR needed for this.

[paulwer]

@SimonScholz I've started working on this topic, because we wanna use it in prod within the next 2 weeks. I hope this does not bother you <3

[ThallesP]

@SimonScholz I've started working on this topic, because we wanna use it in prod within the next 2 weeks. I hope this does not bother you <3

Hi @paulwer, any news on this topic?

[paulwer]

still waiting on #67 to be merged. @lukin

[ThallesP]

still waiting on #67 to be merged. @lukin

~Is it #67 or #58?~ nvm just saw your comment that you need #67 to be merged first

[tiran133]

Is there any update on this? Since Keycloak 24 is released which has the user profile enabled by default.