feat(keycloak): property-manager login theme + how-to-apply guide - #188
Conversation
Keycloakify 11 source for the `property-manager` login theme (login-only) used by the prorentallb realm — already live on fm-keycloak (KC26). Source only; node_modules/ dist/dist_keycloak are gitignored build outputs. Build+deploy+apply steps in keycloak-theme/APPLYING-THE-THEME.md. [skip-gn] Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
📝 WalkthroughWalkthroughChangesThe PR adds a complete Property Manager Keycloak theme
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant Browser
participant main_tsx
participant KcPage
participant KcLoginPage
participant Template
Browser->>main_tsx: mount React application
main_tsx->>KcPage: provide window.kcContext
KcPage->>KcLoginPage: lazy-load login page
KcLoginPage->>Template: render localized login template
Template-->>Browser: display themed Keycloak page
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
keycloak-theme/package.json (1)
12-12: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winRun TypeScript in build mode so
vite.config.tsis checked.The root
tsconfig.jsonincludes onlysrc, whilevite.config.tsbelongs to the referencedtsconfig.node.json. Plaintscdoes not build referenced projects, and Vite transpiles without type-checking, so configuration errors can pass the production build. Usetsc -bor explicitly type-check both configs beforevite build. (typescriptlang.org)Proposed fix
- "build": "tsc && vite build", + "build": "tsc -b && vite build",🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@keycloak-theme/package.json` at line 12, Update the build script in package.json to run TypeScript in build mode with tsc -b before vite build, ensuring both the root and referenced tsconfig.node.json projects, including vite.config.ts, are type-checked.Source: MCP tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@keycloak-theme/.gitignore`:
- Around line 53-57: Add /public/keycloakify-dev-resources/ to
keycloak-theme/.gitignore alongside the existing generated-output paths,
matching the path already excluded by .prettierignore.
In `@keycloak-theme/eslint.config.js`:
- Around line 42-46: Update the ESLint configuration around the stories override
to either register eslint-plugin-import and add it to
keycloak-theme/package.json, or remove the import/no-anonymous-default-export
override if the plugin is not required; ensure the final configuration does not
reference an unloaded or undeclared plugin.
In `@keycloak-theme/src/login/theme.css`:
- Around line 266-269: Remove `.kc-feedback-text` from the earlier warm-white
rule, leaving that declaration scoped to `.pf-c-alert__title`; retain the later
`.kc-feedback-text` error color rule unchanged.
---
Nitpick comments:
In `@keycloak-theme/package.json`:
- Line 12: Update the build script in package.json to run TypeScript in build
mode with tsc -b before vite build, ensuring both the root and referenced
tsconfig.node.json projects, including vite.config.ts, are type-checked.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: e7055fd0-b55e-4b80-b9e1-a4088cbe33bc
⛔ Files ignored due to path filters (3)
keycloak-theme/package-lock.jsonis excluded by!**/package-lock.jsonkeycloak-theme/public/favicon-32x32.pngis excluded by!**/*.pngkeycloak-theme/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (24)
keycloak-theme/.gitignorekeycloak-theme/.prettierignorekeycloak-theme/.prettierrc.jsonkeycloak-theme/.storybook/main.tskeycloak-theme/.storybook/preview-head.htmlkeycloak-theme/.storybook/preview.tskeycloak-theme/APPLYING-THE-THEME.mdkeycloak-theme/LICENSEkeycloak-theme/README.mdkeycloak-theme/eslint.config.jskeycloak-theme/index.htmlkeycloak-theme/package.jsonkeycloak-theme/src/kc.gen.tsxkeycloak-theme/src/login/KcContext.tskeycloak-theme/src/login/KcPage.tsxkeycloak-theme/src/login/KcPageStory.tsxkeycloak-theme/src/login/Template.tsxkeycloak-theme/src/login/i18n.tskeycloak-theme/src/login/theme.csskeycloak-theme/src/main.tsxkeycloak-theme/src/vite-env.d.tskeycloak-theme/tsconfig.jsonkeycloak-theme/tsconfig.node.jsonkeycloak-theme/vite.config.ts
| /dist | ||
|
|
||
| /dist_keycloak | ||
| /build | ||
| /storybook-static |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Ignore Keycloakify’s generated development resources in Git.
keycloak-theme/.prettierignore excludes /public/keycloakify-dev-resources/, but this Git ignore file does not. Add the same path to prevent generated resources from being committed.
/dist_keycloak
/build
/storybook-static
+/public/keycloakify-dev-resources📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /dist | |
| /dist_keycloak | |
| /build | |
| /storybook-static | |
| /dist | |
| /dist_keycloak | |
| /build | |
| /storybook-static | |
| /public/keycloakify-dev-resources |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@keycloak-theme/.gitignore` around lines 53 - 57, Add
/public/keycloakify-dev-resources/ to keycloak-theme/.gitignore alongside the
existing generated-output paths, matching the path already excluded by
.prettierignore.
| { | ||
| files: ["**/*.stories.*"], | ||
| rules: { | ||
| "import/no-anonymous-default-export": "off", | ||
| }, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== eslint.config.js ==\n'
cat -n keycloak-theme/eslint.config.js | sed -n '1,220p'
printf '\n== package.json ==\n'
cat -n keycloak-theme/package.json | sed -n '1,220p'
printf '\n== search for import/no-anonymous-default-export and eslint-plugin-import ==\n'
rg -n --hidden --glob '!**/node_modules/**' 'import/no-anonymous-default-export|eslint-plugin-import|plugins:\s*\{|import:' keycloak-themeRepository: chrisshaddad/bootcamp-starter
Length of output: 3901
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== repo-wide search ==\n'
rg -n --hidden --glob '!**/node_modules/**' 'eslint-plugin-import|import/no-anonymous-default-export' .
printf '\n== lockfiles mentioning eslint-plugin-import ==\n'
rg -n --hidden --glob '!**/node_modules/**' 'eslint-plugin-import' ./*lock* ./**/package-lock.json ./**/pnpm-lock.yaml ./**/yarn.lock 2>/dev/null || trueRepository: chrisshaddad/bootcamp-starter
Length of output: 2090
🌐 Web query:
ESLint flat config disabled rule from plugin without plugin loaded "Definition for rule was not found" off
💡 Result:
The error "Definition for rule was not found" occurs in ESLint flat config when you attempt to configure or disable a rule from a plugin without that plugin being correctly loaded in the configuration for the specific files being linted [1][2]. Unlike the older.eslintrc format, where rules could often be referenced globally, flat config requires the plugin to be explicitly defined in the plugins key of the configuration object that matches your files [3][4]. To resolve this issue, ensure the following steps are taken: 1. Import the Plugin: You must import the plugin as a JavaScript module in your eslint.config.js file [5]. 2. Define the Plugin in the Config Object: You must add the imported plugin to the plugins property of the configuration object that applies to your target files [3][4]. 3. Scope to Files: If the rule should only apply to certain files (e.g., TypeScript files), ensure your configuration object includes the files property so that the plugin is only loaded when those files are processed [1][4]. Example: import myPlugin from "eslint-plugin-my-plugin"; export default [ { files: ["/*.js"], plugins: { "my-plugin": myPlugin, }, rules: { "my-plugin/rule-name": "off", // Rule is now found because the plugin is loaded }, }, ]; If you are seeing this error when trying to disable a rule that you no longer use or that is no longer installed, you must remove the reference to that rule from your rules object entirely [6]. ESLint will throw this error if you attempt to configure a rule that does not exist or whose defining plugin is missing [1][2]. You can use the --inspect-config command (ESLint 9+) to troubleshoot which configuration objects are being applied to your files and verify that the plugin is correctly registered [2].
Citations:
- 1: Flat Config - key rules: key X Could not find plugin X eslint/eslint#17485
- 2: Change Request: Improve error message when a plugin's rules are enabled without the plugin eslint/eslint#19254
- 3: https://eslint.org/docs/latest/use/configure/plugins
- 4: https://eslint.org/docs/latest/use/configure/configuration-files
- 5: https://eslint.org/blog/2022/08/new-config-system-part-2/
- 6: Bug:
FlatESLint#getRulesMetaForResultsthrows on unknown rules eslint/eslint#17343
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== root package.json ==\n'
cat -n package.json | sed -n '1,220p'
printf '\n== keycloak-theme tree (shallow) ==\n'
find keycloak-theme -maxdepth 1 -type f | sort
printf '\n== package-lock snippets around eslint-plugin-import ==\n'
sed -n '10700,10870p' package-lock.json | cat -n | sed -n '1,220p'Repository: chrisshaddad/bootcamp-starter
Length of output: 9022
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== keycloak-theme/package-lock.json matches ==\n'
rg -n 'eslint-plugin-import|import/no-anonymous-default-export' keycloak-theme/package-lock.json || true
printf '\n== keycloak-theme/yarn.lock matches ==\n'
rg -n 'eslint-plugin-import|import/no-anonymous-default-export' keycloak-theme/yarn.lock || trueRepository: chrisshaddad/bootcamp-starter
Length of output: 255
Register eslint-plugin-import here, or remove the override. import/no-anonymous-default-export comes from eslint-plugin-import, but this config doesn’t load that plugin or declare it in keycloak-theme/package.json.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@keycloak-theme/eslint.config.js` around lines 42 - 46, Update the ESLint
configuration around the stories override to either register
eslint-plugin-import and add it to keycloak-theme/package.json, or remove the
import/no-anonymous-default-export override if the plugin is not required;
ensure the final configuration does not reference an unloaded or undeclared
plugin.
| .pf-c-alert__title, | ||
| .kc-feedback-text { | ||
| color: var(--pm-warm-white); | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Conflicting .kc-feedback-text color rules — later one silently wins.
.kc-feedback-text is targeted by two rulesets with equal specificity: warm-white at Line 266-269 and #f2a3a3 at Line 386-389. Source order makes the second declaration win unconditionally, so the first is dead code and any non-error usage of .kc-feedback-text renders red regardless of intent.
🎨 Proposed fix — drop the duplicate target from the earlier rule
.pf-c-alert__title,
-.kc-feedback-text {
+.pf-c-alert__title {
color: var(--pm-warm-white);
}Also applies to: 386-389
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@keycloak-theme/src/login/theme.css` around lines 266 - 269, Remove
`.kc-feedback-text` from the earlier warm-white rule, leaving that declaration
scoped to `.pf-c-alert__title`; retain the later `.kc-feedback-text` error color
rule unchanged.
2 participants
Keycloak login theme —
property-managerKeycloakify 11 source for the custom
property-managerlogin theme used by theprorentallbrealm (the branded "Property Manager" sign-in page). Already built and live on prod
(
fm-keycloak, Keycloak 26) — this PR version-controls the source and documents how to build +apply it in any Keycloak.
node_modules/,dist/, anddist_keycloak/(the built jars) are gitignoredbuild outputs, produced by the build step below.
accountThemeImplementation: "none"); theme nameproperty-manager(set invite.config.ts).📄 Full apply steps →
keycloak-theme/APPLYING-THE-THEME.mdShort version:
cd keycloak-theme && npm install && npm run build-keycloak-theme→ producesdist_keycloak/keycloak-theme-for-kc-all-other-versions.jar(use this one for KC 26).keycloak-providers/→/opt/keycloak/providers/via an additivedocker-compose.override.yml,then
docker compose up -d keycloak.prorentallb→ Realm settings → Themes →Login theme →
property-manager→ Save.Gotchas (all documented in the guide): KC26 needs the
all-other-versionsjar (not22-to-25);the realm has i18n off (login is EN-only); the KC container must be restarted after swapping
the jar; PatternFly
.pf-c-input-group/#kc-info-wrapperreskin traps are handled insrc/login/theme.css.Base =
hadisaiibi-mouhannad; independent of PR #186 (tenant portal).🤖 Generated with Claude Code
Summary by CodeRabbit