diff options
| -rw-r--r-- | README.md | 35 | ||||
| -rwxr-xr-x | package.json | 2 | ||||
| -rw-r--r-- | src/keycloak-theme/account/KcApp.css | 2 | ||||
| -rw-r--r-- | src/keycloak-theme/account/KcApp.tsx | 2 | ||||
| -rw-r--r-- | src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx | 23 | ||||
| -rw-r--r-- | src/keycloak-theme/login/pages/Terms.stories copy.tsx | 13 | ||||
| -rw-r--r-- | yarn.lock | 8 |
7 files changed, 63 insertions, 22 deletions
@@ -22,27 +22,32 @@ If you are only looking to create a theme (and not a theme + an App) there are a ```bash yarn yarn build-keycloak-theme # Build the theme one time (some assets will be copied to - # public/keycloak_static, they are needed to dev your page outside of Keycloak) + # public/keycloak_static, they are needed to dev your page + # outside of Keycloak) + yarn start # See the Hello World app -# Uncomment line 15 of src/keycloak-theme/login/kcContext, reload https://localhost:3000 -# You can now develop your Login pages. (Don't forget to comment it back when you're done) + # Uncomment line 15 of src/keycloak-theme/login/kcContext, reload https://localhost:3000 + # You can now develop your Login pages. (Don't forget to comment it back when you're done) -# Think your theme is ready? Run -yarn build-keycloak-theme -# Read the instruction printed on the console to see how to test -# your theme on a real Keycloak instance. +yarn storybook # Start Storybook + # This is by far the best way to develop your theme + # This enable to quickly see your pages in isolation and in different states. + # You can create stories even for pages that you haven't explicitly overloaded. See src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx + # See Keycloakify's storybook for if you need a starting point for your stories: https://github.com/keycloakify/keycloakify/tree/main/stories -# For launching the Storybook -yarn storybook +yarn build-keycloak-theme # Actually build the theme + # Read the instruction printed on the console to see how to test + # your theme on a real Keycloak instance. -# For customizing other pages at the component level -npx eject-keycloak-page # Then select the page you want +npx eject-keycloak-page # Prompt that let you select the pages you want to customize + # This CLI tools is not guarenty to work, you can always copy pase pages + # from the Keycloakify repo. -# For initializing your email theme -npx initialize-email-theme +npx initialize-email-theme # For initializing your email theme + # Note that Keycloakify does not feature React integration for email yet. -# For downloading the default theme -npx download-builtin-keycloak-theme +npx download-builtin-keycloak-theme # For downloading the default theme (as a reference) + # Look for the files in build_keycloak/src/main/resources/theme/{base,keycloak} ``` # The CI workflow diff --git a/package.json b/package.json index 29ed222..76ee576 100755 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "evt": "^2.4.15", "jwt-decode": "^3.1.2", "keycloak-js": "^21.0.1", - "keycloakify": "^7.6.6", + "keycloakify": "^7.6.8", "powerhooks": "^0.26.7", "react": "18.1.0", "react-dom": "18.1.0", diff --git a/src/keycloak-theme/account/KcApp.css b/src/keycloak-theme/account/KcApp.css index 1f110d9..0185787 100644 --- a/src/keycloak-theme/account/KcApp.css +++ b/src/keycloak-theme/account/KcApp.css @@ -1,5 +1,5 @@ -.my-root-class { +.my-root-account-class { background: url(./assets/background.svg) no-repeat center center fixed; }
\ No newline at end of file diff --git a/src/keycloak-theme/account/KcApp.tsx b/src/keycloak-theme/account/KcApp.tsx index 6f7f5f5..11a62a0 100644 --- a/src/keycloak-theme/account/KcApp.tsx +++ b/src/keycloak-theme/account/KcApp.tsx @@ -13,7 +13,7 @@ const MyExtraPage2 = lazy(() => import("./pages/MyExtraPage2")); const Fallback = lazy(()=> import("keycloakify/account")); const classes: PageProps<any, any>["classes"] = { - "kcBodyClass": "my-root-class" + "kcBodyClass": "my-root-account-class" }; export default function KcApp(props: { kcContext: KcContext; }) { diff --git a/src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx b/src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx new file mode 100644 index 0000000..7e2f4f4 --- /dev/null +++ b/src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx @@ -0,0 +1,23 @@ +//This is to show that you can create stories for pages that you haven't overloaded. + +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { createPageStory } from "../createPageStory"; + +const { PageStory } = createPageStory({ + pageId: "login-reset-password.ftl" +}); + +export default { + title: "login/LoginResetPassword", + component: PageStory, +} as ComponentMeta<typeof PageStory>; + +export const Default: ComponentStory<typeof PageStory> = () => <PageStory />; + +export const WithEmailAsUsername: ComponentStory<typeof PageStory> = () => ( + <PageStory + kcContext={{ + realm: { loginWithEmailAllowed: true, registrationEmailAsUsername: true } + }} + /> +); diff --git a/src/keycloak-theme/login/pages/Terms.stories copy.tsx b/src/keycloak-theme/login/pages/Terms.stories copy.tsx new file mode 100644 index 0000000..0ccb94d --- /dev/null +++ b/src/keycloak-theme/login/pages/Terms.stories copy.tsx @@ -0,0 +1,13 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { createPageStory } from "../createPageStory"; + +const { PageStory } = createPageStory({ + pageId: "terms.ftl" +}); + +export default { + title: "login/Terms", + component: PageStory, +} as ComponentMeta<typeof PageStory>; + +export const Primary: ComponentStory<typeof PageStory> = () => <PageStory />; @@ -9697,10 +9697,10 @@ keycloak-js@^21.0.1: base64-js "^1.5.1" js-sha256 "^0.9.0" -keycloakify@^7.6.6: - version "7.6.7" - resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-7.6.7.tgz#33dcccc7da3fd9ed5b47127c30dabc22d2b7aef8" - integrity sha512-Fv5ypw/UhvQaZqteQVzVL+klQZsGMDbhcJPDymIeO8my8J+WmA6tivzE6FiYqSCIb+DyX1ZYuEmSl4PkxJWVlw== +keycloakify@^7.6.8: + version "7.6.8" + resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-7.6.8.tgz#be485b9766dbb54a92c8ce43e5f5181e0acf05ad" + integrity sha512-5F3pM4b1XBdV1FHIAdQ1RTuZG0i7QGAMXFBZQlTFLbW2AkyjBLWB9P62tUuzLM0MxSgsNH4x3/7jRzrzKhxGCA== dependencies: "@octokit/rest" "^18.12.0" "@types/yazl" "^2.4.2" |