Issue on Register Form when using userProfile #45

paulwer · 2023-06-13T14:24:43Z

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

The text was updated successfully, but these errors were encountered:

ThallesP · 2023-08-29T18:16:59Z

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 #29 (comment) provided it works normally

paulwer · 2023-08-30T10:13:27Z

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 · 2023-08-30T10:53:06Z

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 · 2023-08-31T09:50:59Z

any suggestions/ideas @lukin ?

SimonScholz · 2023-09-05T13:11:51Z

+1

We are having the same issue with the registration form.

SimonScholz · 2023-09-06T12:36:55Z

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 · 2023-09-13T09:52:21Z

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 · 2023-09-14T08:42:14Z

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 · 2023-09-14T09:10:31Z

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

Thanks for your initiative :)

paulwer · 2023-09-19T08:29:32Z

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

paulwer · 2023-09-26T06:43:53Z

@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 · 2023-10-01T06:47:00Z

@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 · 2024-01-29T13:52:45Z

@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 · 2024-01-29T14:07:01Z

still waiting on #67 to be merged.
@lukin

ThallesP · 2024-01-29T14:11:28Z

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 · 2024-03-10T08:17:17Z

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

This comment was marked as outdated.

Sign in to view

paulwer changed the title ~~Issue on Register Form~~ Issue on Register Form when using userProfile Sep 13, 2023

This was referenced Sep 29, 2023

Display Error for actions #60

Open

feat: userProfile, terms and conditions #58

Closed

paulwer mentioned this issue Jun 19, 2024

upgrade to v25.0.0 + aggregation of all my PRs #96

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue on Register Form when using userProfile #45

Issue on Register Form when using userProfile #45

paulwer commented Jun 13, 2023 •

edited

Loading

ThallesP commented Aug 29, 2023

paulwer commented Aug 30, 2023 •

edited

Loading

ThallesP commented Aug 30, 2023

paulwer commented Aug 31, 2023

SimonScholz commented Sep 5, 2023

SimonScholz commented Sep 6, 2023 •

edited

Loading

This comment was marked as outdated.

This comment was marked as outdated.

paulwer commented Sep 13, 2023 •

edited

Loading

SimonScholz commented Sep 14, 2023 •

edited

Loading

paulwer commented Sep 14, 2023

paulwer commented Sep 19, 2023

paulwer commented Sep 26, 2023

paulwer commented Oct 1, 2023

ThallesP commented Jan 29, 2024

paulwer commented Jan 29, 2024 •

edited

Loading

ThallesP commented Jan 29, 2024 •

edited

Loading

tiran133 commented Mar 10, 2024

Issue on Register Form when using userProfile #45

Issue on Register Form when using userProfile #45

Comments

paulwer commented Jun 13, 2023 • edited Loading

ThallesP commented Aug 29, 2023

paulwer commented Aug 30, 2023 • edited Loading

ThallesP commented Aug 30, 2023

paulwer commented Aug 31, 2023

SimonScholz commented Sep 5, 2023

SimonScholz commented Sep 6, 2023 • edited Loading

This comment was marked as outdated.

This comment was marked as outdated.

paulwer commented Sep 13, 2023 • edited Loading

SimonScholz commented Sep 14, 2023 • edited Loading

paulwer commented Sep 14, 2023

paulwer commented Sep 19, 2023

paulwer commented Sep 26, 2023

paulwer commented Oct 1, 2023

ThallesP commented Jan 29, 2024

paulwer commented Jan 29, 2024 • edited Loading

ThallesP commented Jan 29, 2024 • edited Loading

tiran133 commented Mar 10, 2024

paulwer commented Jun 13, 2023 •

edited

Loading

paulwer commented Aug 30, 2023 •

edited

Loading

SimonScholz commented Sep 6, 2023 •

edited

Loading

paulwer commented Sep 13, 2023 •

edited

Loading

SimonScholz commented Sep 14, 2023 •

edited

Loading

paulwer commented Jan 29, 2024 •

edited

Loading

ThallesP commented Jan 29, 2024 •

edited

Loading