Skip to content

Add more input types to LoginUpdateProfile#992

Open
Huber1 wants to merge 10 commits intokeycloakify:mainfrom
Huber1:main
Open

Add more input types to LoginUpdateProfile#992
Huber1 wants to merge 10 commits intokeycloakify:mainfrom
Huber1:main

Conversation

@Huber1
Copy link
Copy Markdown

@Huber1 Huber1 commented Feb 4, 2026

Hello guys,
I added some more input types to LoginUpdateProfile.
The values for kcContext are taken from the browser console on a real keycloak instance

Looks like this:
image

I also added a group.
in my custom theme, this renders correctly:
image

For reasons i do not understand, the GroupLabel component in UserProfileFormFields is not rendered (without error) in this repo, only on my custom theme, even though i didn't change the structure (all the ifs and stuff still exist like before).
That's the reason I included it here.
If that's a problem, i can remove the sections

Summary by CodeRabbit

  • New Features
    • Added three interactive profile-update demos: a "More Fields" scenario (multi-valued attribute, pet-selection dropdown, constrained numeric input 0–99, and date input), a prefilled variant of that scenario with example values, and a demo showcasing grouped profile attributes with a "user metadata" section for nested/grouped fields.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Feb 4, 2026

📝 Walkthrough

Walkthrough

Added three Storybook stories in stories/login/pages/LoginUpdateProfile.stories.tsx: WithMoreFields, WithMoreFieldsPrefilled, and WithGroups, each supplying different kcContext.profile.attributesByName shapes (extra fields, prefilled values, and a grouped/misspelled attribute).

Changes

Cohort / File(s) Summary
Login Update Profile Stories
stories/login/pages/LoginUpdateProfile.stories.tsx
Added three exported Story constants: WithMoreFields (adds profile fields: multiAttribute (multi-valued), favouritePet (select: Cat/Dog/Bird), age (html5-number), birthdate (html5-date)); WithMoreFieldsPrefilled (same fields with prefilled multiAttribute, age, birthdate); WithGroups (adds a divison key containing a nested group object with displayHeader "User metadata" and group name user-metadata).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐇 I hopped through stories, adding fields with care,
Multivalues, selects, numbers, dates all there.
Prefilled seeds and a grouped key with a quirky name,
I twitched my nose and cheered—new profiles in the game! 🥕

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Add more input types to LoginUpdateProfile' directly and accurately describes the main change: adding new story examples with additional input field types to the LoginUpdateProfile stories file.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@stories/login/pages/LoginUpdateProfile.stories.tsx`:
- Around line 126-142: The attribute entry uses the key cardId but its name
property is "divison" (typo) which must match keys derived from attribute.name;
fix by making the object consistent: either rename the name property to "cardId"
(if this attribute represents a card ID) or rename the key from cardId to
"division" and correct the typo to "division" (if it represents a division);
update any related displayName or references to match the chosen canonical name
(look for the cardId key and the name property "divison" in
LoginUpdateProfile.stories.tsx).

Comment thread stories/login/pages/LoginUpdateProfile.stories.tsx Outdated
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@stories/login/pages/LoginUpdateProfile.stories.tsx`:
- Around line 56-68: The select options for the favouritePet field don't match
the stored selected value(s): update the favouritePet configuration so the
options' values align with the stored value/value array (either change the
options array to ["dog","cat","bird"] or change value and values to
"Dog"/["Dog"]) so the preselect works; apply the same fix to the second
occurrence around the other favouritePet block referenced (match the options
array to the value/values or vice versa).

Comment on lines +56 to +68
favouritePet: {
validators: {
options: {
options: ["Cat", "Dog", "Bird"]
}
},
displayName: "Favourite Pet",
annotations: {
inputType: "select"
},
value: "dog",
values: ["dog"],
name: "favouritePet"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Align select option values with selected value(s).
favouritePet uses value(s) "dog" while options are ["Cat","Dog","Bird"]. If the component matches strictly, the preselect won’t show. Consider matching case or using option values that align with the stored value.

Proposed fix (match displayed options)
-                            value: "dog",
-                            values: ["dog"],
+                            value: "Dog",
+                            values: ["Dog"],
-                            value: "dog",
+                            value: "Dog",

Also applies to: 112-123

🤖 Prompt for AI Agents
In `@stories/login/pages/LoginUpdateProfile.stories.tsx` around lines 56 - 68, The
select options for the favouritePet field don't match the stored selected
value(s): update the favouritePet configuration so the options' values align
with the stored value/value array (either change the options array to
["dog","cat","bird"] or change value and values to "Dog"/["Dog"]) so the
preselect works; apply the same fix to the second occurrence around the other
favouritePet block referenced (match the options array to the value/values or
vice versa).

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@stories/login/pages/LoginUpdateProfile.stories.tsx`:
- Around line 161-177: The attribute object keyed as "division" has a typo in
its internal name property ("divison"); update the attribute's name property in
the object (the one currently set to "divison") to "division" so the key and
attribute.name match the project's pattern (look for the attribute object with
key division and field name/name property to correct).

Comment thread stories/login/pages/LoginUpdateProfile.stories.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants