Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| f18f72f256 |
@ -1,189 +0,0 @@
|
|||||||
{
|
|
||||||
"files": [
|
|
||||||
"README.md"
|
|
||||||
],
|
|
||||||
"imageSize": 100,
|
|
||||||
"commit": false,
|
|
||||||
"commitConvention": "angular",
|
|
||||||
"contributors": [
|
|
||||||
{
|
|
||||||
"login": "lordvlad",
|
|
||||||
"name": "Waldemar Reusch",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/1217769?v=4",
|
|
||||||
"profile": "https://github.com/lordvlad",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "willwill96",
|
|
||||||
"name": "William Will",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/10997562?v=4",
|
|
||||||
"profile": "https://willwill96.github.io/the-ui-dawg-static-site/en/introduction/",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "Ann2827",
|
|
||||||
"name": "Bystrova Ann",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/32645809?v=4",
|
|
||||||
"profile": "https://github.com/Ann2827",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "mkreuzmayr",
|
|
||||||
"name": "Michael Kreuzmayr",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/20108212?v=4",
|
|
||||||
"profile": "https://github.com/mkreuzmayr",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "Mstrodl",
|
|
||||||
"name": "Mary ",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/6877780?v=4",
|
|
||||||
"profile": "https://coolmathgames.tech",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "Tasyp",
|
|
||||||
"name": "German Öö",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/6623212?v=4",
|
|
||||||
"profile": "https://tasyp.xyz/",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "revolunet",
|
|
||||||
"name": "Julien Bouquillon",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/124937?v=4",
|
|
||||||
"profile": "https://revolunet.com",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "aidangilmore",
|
|
||||||
"name": "Aidan Gilmore",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/32880357?v=4",
|
|
||||||
"profile": "https://github.com/aidangilmore",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "0x-Void",
|
|
||||||
"name": "Void",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/32745739?v=4",
|
|
||||||
"profile": "https://github.com/0x-Void",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "juffe",
|
|
||||||
"name": "juffe",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/5393231?v=4",
|
|
||||||
"profile": "https://github.com/juffe",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "lazToum",
|
|
||||||
"name": "Lazaros Toumanidis",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/4764837?v=4",
|
|
||||||
"profile": "https://github.com/lazToum",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "marcmrf",
|
|
||||||
"name": "Marc",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/9928519?v=4",
|
|
||||||
"profile": "https://github.com/marcmrf",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "kasir-barati",
|
|
||||||
"name": "Kasir Barati",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/73785723?v=4",
|
|
||||||
"profile": "http://kasir-barati.github.io",
|
|
||||||
"contributions": [
|
|
||||||
"doc"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "asashay",
|
|
||||||
"name": "Alex Oliynyk",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/10714670?v=4",
|
|
||||||
"profile": "https://github.com/asashay",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "thosil",
|
|
||||||
"name": "Thomas Silvestre",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/1140574?v=4",
|
|
||||||
"profile": "https://www.gravitysoftware.be",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "satanshiro",
|
|
||||||
"name": "satanshiro",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/38865738?v=4",
|
|
||||||
"profile": "https://github.com/satanshiro",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "kpoelhekke",
|
|
||||||
"name": "Koen Poelhekke",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/1632377?v=4",
|
|
||||||
"profile": "https://poelhekke.dev",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "zavoloklom",
|
|
||||||
"name": "Sergey Kupletsky",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/4151869?v=4",
|
|
||||||
"profile": "https://github.com/zavoloklom",
|
|
||||||
"contributions": [
|
|
||||||
"test",
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"login": "rome-user",
|
|
||||||
"name": "rome-user",
|
|
||||||
"avatar_url": "https://avatars.githubusercontent.com/u/114131048?v=4",
|
|
||||||
"profile": "https://github.com/rome-user",
|
|
||||||
"contributions": [
|
|
||||||
"code"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"contributorsPerLine": 7,
|
|
||||||
"skipCi": true,
|
|
||||||
"repoType": "github",
|
|
||||||
"repoHost": "https://github.com",
|
|
||||||
"projectName": "keycloakify",
|
|
||||||
"projectOwner": "keycloakify",
|
|
||||||
"commitType": "docs"
|
|
||||||
}
|
|
||||||
4
.eslintignore
Normal file
4
.eslintignore
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
/node_modules/
|
||||||
|
/dist/
|
||||||
|
/.eslintrc.js
|
||||||
|
/CHANGELOG.md
|
||||||
16
.eslintrc.js
Normal file
16
.eslintrc.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
module.exports = {
|
||||||
|
"root": true,
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"plugins": [
|
||||||
|
"@typescript-eslint",
|
||||||
|
],
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:@typescript-eslint/recommended",
|
||||||
|
"prettier/@typescript-eslint",
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"no-extra-boolean-cast": "off",
|
||||||
|
"@typescript-eslint/explicit-module-boundary-types": "off",
|
||||||
|
},
|
||||||
|
};
|
||||||
3
.gitattributes
vendored
3
.gitattributes
vendored
@ -1,3 +0,0 @@
|
|||||||
src/lib/i18n/generated_kcMessages/* linguist-documentation
|
|
||||||
src/bin/keycloakify/index.ts -linguist-detectable
|
|
||||||
src/bin/install-builtin-keycloak-themes.ts -linguist-detectable
|
|
||||||
4
.github/FUNDING.yaml
vendored
4
.github/FUNDING.yaml
vendored
@ -1,4 +0,0 @@
|
|||||||
# These are supported funding model platforms
|
|
||||||
|
|
||||||
github: [garronej]
|
|
||||||
custom: ['https://www.ringerhq.com/experts/garronej']
|
|
||||||
25
.github/release.yaml
vendored
25
.github/release.yaml
vendored
@ -1,25 +0,0 @@
|
|||||||
changelog:
|
|
||||||
exclude:
|
|
||||||
labels:
|
|
||||||
- ignore-for-release
|
|
||||||
authors:
|
|
||||||
- octocat
|
|
||||||
categories:
|
|
||||||
- title: Breaking Changes 🛠
|
|
||||||
labels:
|
|
||||||
- breaking
|
|
||||||
- title: Exciting New Features 🎉
|
|
||||||
labels:
|
|
||||||
- feature
|
|
||||||
- title: Fixes 🔧
|
|
||||||
labels:
|
|
||||||
- fix
|
|
||||||
- title: Documentation 🔧
|
|
||||||
labels:
|
|
||||||
- docs
|
|
||||||
- title: CI 👷
|
|
||||||
labels:
|
|
||||||
- ci
|
|
||||||
- title: Other Changes
|
|
||||||
labels:
|
|
||||||
- '*'
|
|
||||||
141
.github/workflows/ci.yaml
vendored
141
.github/workflows/ci.yaml
vendored
@ -1,141 +0,0 @@
|
|||||||
name: ci
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches:
|
|
||||||
- main
|
|
||||||
- v*
|
|
||||||
pull_request:
|
|
||||||
branches:
|
|
||||||
- main
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
|
|
||||||
test_lint:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
if: ${{ !github.event.created && github.repository != 'garronej/ts-ci' }}
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v3
|
|
||||||
- uses: actions/setup-node@v3
|
|
||||||
- uses: bahmutov/npm-install@v1
|
|
||||||
- name: If this step fails run 'yarn format' then commit again.
|
|
||||||
run: yarn format:check
|
|
||||||
test:
|
|
||||||
runs-on: ${{ matrix.os }}
|
|
||||||
needs: test_lint
|
|
||||||
strategy:
|
|
||||||
matrix:
|
|
||||||
node: [ '18' ]
|
|
||||||
os: [ ubuntu-latest ]
|
|
||||||
name: Test with Node v${{ matrix.node }} on ${{ matrix.os }}
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v3
|
|
||||||
- uses: actions/setup-node@v3
|
|
||||||
with:
|
|
||||||
node-version: ${{ matrix.node }}
|
|
||||||
- uses: bahmutov/npm-install@v1
|
|
||||||
- run: yarn build
|
|
||||||
- run: yarn test
|
|
||||||
#- run: yarn test:keycloakify-starter
|
|
||||||
|
|
||||||
storybook:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
if: github.event_name == 'push'
|
|
||||||
needs: test
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v3
|
|
||||||
- uses: actions/setup-node@v3
|
|
||||||
with:
|
|
||||||
node-version: '18'
|
|
||||||
- uses: bahmutov/npm-install@v1
|
|
||||||
- run: yarn build-storybook -o ./build_storybook
|
|
||||||
- run: git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${{github.repository}}.git
|
|
||||||
env:
|
|
||||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
||||||
- run: npx -y -p gh-pages@3.1.0 gh-pages -d ./build_storybook -u "github-actions-bot <actions@github.com>"
|
|
||||||
|
|
||||||
check_if_version_upgraded:
|
|
||||||
name: Check if version upgrade
|
|
||||||
# When someone forks the repo and opens a PR we want to enables the tests to be run (the previous jobs)
|
|
||||||
# but obviously only us should be allowed to release.
|
|
||||||
# In the following check we make sure that we own the branch this CI workflow is running on before continuing.
|
|
||||||
# Without this check, trying to release would fail anyway because only us have the correct secret.NPM_TOKEN but
|
|
||||||
# it's cleaner to stop the execution instead of letting the CI crash.
|
|
||||||
if: |
|
|
||||||
github.event_name == 'push' ||
|
|
||||||
github.event.pull_request.head.repo.owner.login == github.event.pull_request.base.repo.owner.login
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
needs: test
|
|
||||||
outputs:
|
|
||||||
from_version: ${{ steps.step1.outputs.from_version }}
|
|
||||||
to_version: ${{ steps.step1.outputs.to_version }}
|
|
||||||
is_upgraded_version: ${{ steps.step1.outputs.is_upgraded_version }}
|
|
||||||
is_pre_release: ${{steps.step1.outputs.is_pre_release }}
|
|
||||||
steps:
|
|
||||||
- uses: garronej/ts-ci@v2.1.0
|
|
||||||
id: step1
|
|
||||||
with:
|
|
||||||
action_name: is_package_json_version_upgraded
|
|
||||||
|
|
||||||
create_github_release:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
# We create release only if the version in the package.json have been upgraded and this CI is running against the main branch.
|
|
||||||
# We allow branches with a PR open on main to publish pre-release (x.y.z-rc.u) but not actual releases.
|
|
||||||
if: |
|
|
||||||
needs.check_if_version_upgraded.outputs.is_upgraded_version == 'true' &&
|
|
||||||
(
|
|
||||||
github.event_name == 'push' ||
|
|
||||||
needs.check_if_version_upgraded.outputs.is_pre_release == 'true'
|
|
||||||
)
|
|
||||||
needs:
|
|
||||||
- check_if_version_upgraded
|
|
||||||
steps:
|
|
||||||
- uses: softprops/action-gh-release@v1
|
|
||||||
with:
|
|
||||||
name: Release v${{ needs.check_if_version_upgraded.outputs.to_version }}
|
|
||||||
tag_name: v${{ needs.check_if_version_upgraded.outputs.to_version }}
|
|
||||||
target_commitish: ${{ github.head_ref || github.ref }}
|
|
||||||
generate_release_notes: true
|
|
||||||
draft: false
|
|
||||||
prerelease: ${{ needs.check_if_version_upgraded.outputs.is_pre_release == 'true' }}
|
|
||||||
env:
|
|
||||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
||||||
|
|
||||||
publish_on_npm:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
needs:
|
|
||||||
- create_github_release
|
|
||||||
- check_if_version_upgraded
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v3
|
|
||||||
with:
|
|
||||||
ref: ${{ github.ref }}
|
|
||||||
- uses: actions/setup-node@v3
|
|
||||||
with:
|
|
||||||
registry-url: https://registry.npmjs.org/
|
|
||||||
- uses: bahmutov/npm-install@v1
|
|
||||||
- run: yarn build
|
|
||||||
- run: npx -y -p denoify@1.3.0 enable_short_npm_import_path
|
|
||||||
env:
|
|
||||||
DRY_RUN: "0"
|
|
||||||
- uses: garronej/ts-ci@v2.1.0
|
|
||||||
with:
|
|
||||||
action_name: remove_dark_mode_specific_images_from_readme
|
|
||||||
- name: Publishing on NPM
|
|
||||||
run: |
|
|
||||||
if [ "$(npm show . version)" = "$VERSION" ]; then
|
|
||||||
echo "This version is already published"
|
|
||||||
exit 0
|
|
||||||
fi
|
|
||||||
if [ "$NODE_AUTH_TOKEN" = "" ]; then
|
|
||||||
echo "Can't publish on NPM, You must first create a secret called NPM_TOKEN that contains your NPM auth token. https://help.github.com/en/actions/automating-your-workflow-with-github-actions/creating-and-using-encrypted-secrets"
|
|
||||||
false
|
|
||||||
fi
|
|
||||||
EXTRA_ARGS=""
|
|
||||||
if [ "$IS_PRE_RELEASE" = "true" ]; then
|
|
||||||
EXTRA_ARGS="--tag next"
|
|
||||||
fi
|
|
||||||
npm publish $EXTRA_ARGS
|
|
||||||
env:
|
|
||||||
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
|
|
||||||
VERSION: ${{ needs.check_if_version_upgraded.outputs.to_version }}
|
|
||||||
IS_PRE_RELEASE: ${{ needs.check_if_version_upgraded.outputs.is_pre_release }}
|
|
||||||
18
.gitignore
vendored
18
.gitignore
vendored
@ -41,21 +41,3 @@ jspm_packages
|
|||||||
.DS_Store
|
.DS_Store
|
||||||
|
|
||||||
/dist
|
/dist
|
||||||
/keycloakify_starter_test/
|
|
||||||
/sample_custom_react_project/
|
|
||||||
/sample_react_project/
|
|
||||||
/.yarn_home/
|
|
||||||
|
|
||||||
.idea
|
|
||||||
|
|
||||||
/src/login/i18n/baseMessages/
|
|
||||||
/src/account/i18n/baseMessages/
|
|
||||||
|
|
||||||
# VS Code devcontainers
|
|
||||||
.devcontainer
|
|
||||||
/.yarn
|
|
||||||
/.yarnrc.yml
|
|
||||||
|
|
||||||
/stories/assets/fonts/
|
|
||||||
/build_storybook/
|
|
||||||
/storybook-static/
|
|
||||||
|
|||||||
@ -1,15 +1,5 @@
|
|||||||
node_modules/
|
/node_modules/
|
||||||
/dist/
|
/dist/
|
||||||
|
/.eslintrc.js
|
||||||
|
/docs/
|
||||||
/CHANGELOG.md
|
/CHANGELOG.md
|
||||||
/.yarn_home/
|
|
||||||
/src/test/apps/
|
|
||||||
/src/tools/types/
|
|
||||||
/build_keycloak/
|
|
||||||
/.vscode/
|
|
||||||
/src/login/i18n/baseMessages/
|
|
||||||
/src/account/i18n/baseMessages/
|
|
||||||
/dist_test
|
|
||||||
/sample_react_project/
|
|
||||||
/sample_custom_react_project/
|
|
||||||
/keycloakify_starter_test/
|
|
||||||
/.storybook/static/keycloak-resources/
|
|
||||||
@ -1,11 +1,11 @@
|
|||||||
{
|
{
|
||||||
"printWidth": 150,
|
"printWidth": 80,
|
||||||
"tabWidth": 4,
|
"tabWidth": 4,
|
||||||
"useTabs": false,
|
"useTabs": false,
|
||||||
"semi": true,
|
"semi": true,
|
||||||
"singleQuote": false,
|
"singleQuote": false,
|
||||||
"quoteProps": "preserve",
|
"quoteProps": "preserve",
|
||||||
"trailingComma": "none",
|
"trailingComma": "all",
|
||||||
"bracketSpacing": true,
|
"bracketSpacing": true,
|
||||||
"arrowParens": "avoid"
|
"arrowParens": "avoid"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,76 +0,0 @@
|
|||||||
|
|
||||||
import React from "react";
|
|
||||||
import { DocsContainer as BaseContainer } from "@storybook/addon-docs";
|
|
||||||
import { useDarkMode } from "storybook-dark-mode";
|
|
||||||
import { darkTheme, lightTheme } from "./customTheme";
|
|
||||||
import "./static/fonts/WorkSans/font.css";
|
|
||||||
|
|
||||||
export function DocsContainer({ children, context }) {
|
|
||||||
const isStorybookUiDark = useDarkMode();
|
|
||||||
|
|
||||||
const theme = isStorybookUiDark ? darkTheme : lightTheme;
|
|
||||||
|
|
||||||
const backgroundColor = theme.appBg;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<style>{`
|
|
||||||
body {
|
|
||||||
padding: 0 !important;
|
|
||||||
background-color: ${backgroundColor};
|
|
||||||
}
|
|
||||||
|
|
||||||
.docs-story {
|
|
||||||
background-color: ${backgroundColor};
|
|
||||||
}
|
|
||||||
[id^=story--] .container {
|
|
||||||
border: 1px dashed #e8e8e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docblock-argstable-head th:nth-child(3), .docblock-argstable-body tr > td:nth-child(3) {
|
|
||||||
visibility: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docblock-argstable-head th:nth-child(3), .docblock-argstable-body tr > td:nth-child(2) p {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
`}</style>
|
|
||||||
<BaseContainer
|
|
||||||
context={{
|
|
||||||
...context,
|
|
||||||
"storyById": id => {
|
|
||||||
const storyContext = context.storyById(id);
|
|
||||||
return {
|
|
||||||
...storyContext,
|
|
||||||
"parameters": {
|
|
||||||
...storyContext?.parameters,
|
|
||||||
"docs": {
|
|
||||||
...storyContext?.parameters?.docs,
|
|
||||||
"theme": isStorybookUiDark ? darkTheme : lightTheme
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</BaseContainer>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function CanvasContainer({ children }) {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<style>{`
|
|
||||||
body {
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
{children}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import { create } from "@storybook/theming";
|
|
||||||
|
|
||||||
const brandImage = "logo.png";
|
|
||||||
const brandTitle = "Keycloakify";
|
|
||||||
const brandUrl = "https://github.com/keycloakify/keycloakify";
|
|
||||||
const fontBase = '"Work Sans", sans-serif';
|
|
||||||
const fontCode = "monospace";
|
|
||||||
|
|
||||||
export const darkTheme = create({
|
|
||||||
"base": "dark",
|
|
||||||
"appBg": "#1E1E1E",
|
|
||||||
"appContentBg": "#161616",
|
|
||||||
"barBg": "#161616",
|
|
||||||
"colorSecondary": "#8585F6",
|
|
||||||
"textColor": "#FFFFFF",
|
|
||||||
brandImage,
|
|
||||||
brandTitle,
|
|
||||||
brandUrl,
|
|
||||||
fontBase,
|
|
||||||
fontCode
|
|
||||||
});
|
|
||||||
|
|
||||||
export const lightTheme = create({
|
|
||||||
"base": "light",
|
|
||||||
"appBg": "#F6F6F6",
|
|
||||||
"appContentBg": "#FFFFFF",
|
|
||||||
"barBg": "#FFFFFF",
|
|
||||||
"colorSecondary": "#000091",
|
|
||||||
"textColor": "#212121",
|
|
||||||
brandImage,
|
|
||||||
brandTitle,
|
|
||||||
brandUrl,
|
|
||||||
fontBase,
|
|
||||||
fontCode
|
|
||||||
});
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
"stories": [
|
|
||||||
"../stories/**/*.stories.@(ts|tsx|mdx)"
|
|
||||||
],
|
|
||||||
"addons": [
|
|
||||||
"@storybook/addon-links",
|
|
||||||
"@storybook/addon-essentials",
|
|
||||||
"storybook-dark-mode",
|
|
||||||
"@storybook/addon-a11y"
|
|
||||||
],
|
|
||||||
"core": {
|
|
||||||
"builder": "webpack5"
|
|
||||||
},
|
|
||||||
"staticDirs": ["./static"]
|
|
||||||
};
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
<!-- start favicon -->
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon_package/apple-touch-icon.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon_package/favicon-32x32.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon_package/favicon-16x16.png">
|
|
||||||
<link rel="manifest" href="/favicon_package/site.webmanifest">
|
|
||||||
<link rel="mask-icon" href="/favicon_package/safari-pinned-tab.svg" color="#5bbad5">
|
|
||||||
<!-- end favicon -->
|
|
||||||
|
|
||||||
<!-- Meta tags generated by metatags.io -->
|
|
||||||
<!-- Primary Meta Tags -->
|
|
||||||
<title>Keycloakify Storybook</title>
|
|
||||||
<meta name="title" content="Keycloakify Storybook">
|
|
||||||
<meta name="description" content="Storybook of default components to use as a reference when building a custom Keycloak theme">
|
|
||||||
|
|
||||||
<!-- Facebook Meta Tags -->
|
|
||||||
<meta property="og:url" content="https://www.keycloakify.dev">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<meta property="og:title" content="Keycloakify Storybook">
|
|
||||||
<meta property="og:description" content="Storybook of default components to use as a reference when building a custom Keycloak theme">
|
|
||||||
<meta property="og:image" content="https://storybook.keycloakify.dev/preview.png">
|
|
||||||
|
|
||||||
<!-- Twitter Meta Tags -->
|
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
|
||||||
<meta name="twitter:title" content="Keycloakify Storybook">
|
|
||||||
<meta name="twitter:description" content="Storybook of default components to use as a reference when building a custom Keycloak theme">
|
|
||||||
<meta name="twitter:image" content="https://storybook.keycloakify.dev/preview.png">
|
|
||||||
|
|
||||||
<link rel="preload" href="/fonts/WorkSans/worksans-bold-webfont.woff2" as="font" crossorigin="anonymous">
|
|
||||||
<link rel="preload" href="/fonts/WorkSans/worksans-medium-webfont.woff2" as="font" crossorigin="anonymous">
|
|
||||||
<link rel="preload" href="/fonts/WorkSans/worksans-regular-webfont.woff2" as="font" crossorigin="anonymous">
|
|
||||||
<link rel="preload" href="/fonts/WorkSans/worksans-semibold-webfont.woff2" as="font" crossorigin="anonymous">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/fonts/WorkSans/font.css">
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
import { addons } from '@storybook/addons';
|
|
||||||
|
|
||||||
addons.setConfig({
|
|
||||||
"selectedPanel": 'storybook/a11y/panel',
|
|
||||||
"showPanel": false,
|
|
||||||
});
|
|
||||||
@ -1,137 +0,0 @@
|
|||||||
import { darkTheme, lightTheme } from "./customTheme";
|
|
||||||
import { DocsContainer, CanvasContainer } from "./Containers";
|
|
||||||
|
|
||||||
export const parameters = {
|
|
||||||
"actions": { "argTypesRegex": "^on[A-Z].*" },
|
|
||||||
"controls": {
|
|
||||||
"matchers": {
|
|
||||||
"color": /(background|color)$/i,
|
|
||||||
"date": /Date$/,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"backgrounds": { "disable": true },
|
|
||||||
"darkMode": {
|
|
||||||
"light": lightTheme,
|
|
||||||
"dark": darkTheme,
|
|
||||||
},
|
|
||||||
"docs": {
|
|
||||||
"container": DocsContainer
|
|
||||||
},
|
|
||||||
"controls": {
|
|
||||||
"disable": true,
|
|
||||||
},
|
|
||||||
"actions": {
|
|
||||||
"disable": true
|
|
||||||
},
|
|
||||||
"viewport": {
|
|
||||||
"viewports": {
|
|
||||||
"1440p": {
|
|
||||||
"name": "1440p",
|
|
||||||
"styles": {
|
|
||||||
"width": "2560px",
|
|
||||||
"height": "1440px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"fullHD": {
|
|
||||||
"name": "Full HD",
|
|
||||||
"styles": {
|
|
||||||
"width": "1920px",
|
|
||||||
"height": "1080px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"macBookProBig": {
|
|
||||||
"name": "MacBook Pro Big",
|
|
||||||
"styles": {
|
|
||||||
"width": "1024px",
|
|
||||||
"height": "640px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"macBookProMedium": {
|
|
||||||
"name": "MacBook Pro Medium",
|
|
||||||
"styles": {
|
|
||||||
"width": "1440px",
|
|
||||||
"height": "900px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"macBookProSmall": {
|
|
||||||
"name": "MacBook Pro Small",
|
|
||||||
"styles": {
|
|
||||||
"width": "1680px",
|
|
||||||
"height": "1050px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"pcAgent": {
|
|
||||||
"name": "PC Agent",
|
|
||||||
"styles": {
|
|
||||||
"width": "960px",
|
|
||||||
"height": "540px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"iphone12Pro": {
|
|
||||||
"name": "Iphone 12 pro",
|
|
||||||
"styles": {
|
|
||||||
"width": "390px",
|
|
||||||
"height": "844px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"iphone5se": {
|
|
||||||
"name": "Iphone 5/SE",
|
|
||||||
"styles": {
|
|
||||||
"width": "320px",
|
|
||||||
"height": "568px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"ipadPro": {
|
|
||||||
"name": "Ipad pro",
|
|
||||||
"styles": {
|
|
||||||
"width": "1240px",
|
|
||||||
"height": "1366px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"Galaxy s9+": {
|
|
||||||
"name": "Galaxy S9+",
|
|
||||||
"styles": {
|
|
||||||
"width": "320px",
|
|
||||||
"height": "658px",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"options": {
|
|
||||||
"storySort": (a, b) =>
|
|
||||||
getHardCodedWeight(b[1].kind) - getHardCodedWeight(a[1].kind),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const decorators = [
|
|
||||||
(Story) => (
|
|
||||||
<CanvasContainer>
|
|
||||||
<Story />
|
|
||||||
</CanvasContainer>
|
|
||||||
),
|
|
||||||
];
|
|
||||||
|
|
||||||
const { getHardCodedWeight } = (() => {
|
|
||||||
|
|
||||||
const orderedPagesPrefix = [
|
|
||||||
"Introduction",
|
|
||||||
"login/login.ftl",
|
|
||||||
"login/register-user-profile.ftl",
|
|
||||||
"login/register.ftl",
|
|
||||||
"login/terms.ftl",
|
|
||||||
"login/error.ftl",
|
|
||||||
];
|
|
||||||
|
|
||||||
function getHardCodedWeight(kind) {
|
|
||||||
|
|
||||||
for (let i = 0; i < orderedPagesPrefix.length; i++) {
|
|
||||||
if (kind.toLowerCase().startsWith(orderedPagesPrefix[i].toLowerCase())) {
|
|
||||||
return orderedPagesPrefix.length - i;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
return { getHardCodedWeight };
|
|
||||||
})();
|
|
||||||
@ -1 +0,0 @@
|
|||||||
storybook.keycloakify.dev
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
@ -1,9 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<browserconfig>
|
|
||||||
<msapplication>
|
|
||||||
<tile>
|
|
||||||
<square150x150logo src="/mstile-150x150.png"/>
|
|
||||||
<TileColor>#da532c</TileColor>
|
|
||||||
</tile>
|
|
||||||
</msapplication>
|
|
||||||
</browserconfig>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
@ -1,193 +0,0 @@
|
|||||||
<?xml version="1.0" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
|
||||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
|
||||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="447.000000pt" height="447.000000pt" viewBox="0 0 447.000000 447.000000"
|
|
||||||
preserveAspectRatio="xMidYMid meet">
|
|
||||||
<metadata>
|
|
||||||
Created by potrace 1.14, written by Peter Selinger 2001-2017
|
|
||||||
</metadata>
|
|
||||||
<g transform="translate(0.000000,447.000000) scale(0.100000,-0.100000)"
|
|
||||||
fill="#000000" stroke="none">
|
|
||||||
<path d="M2177 4413 c-3 -2 -17 -6 -33 -9 -85 -15 -204 -109 -286 -225 -95
|
|
||||||
-133 -229 -437 -263 -597 -4 -18 -10 -30 -13 -28 -4 2 -7 -11 -8 -30 0 -19 -3
|
|
||||||
-36 -6 -39 -3 -4 -23 1 -44 10 -51 22 -213 73 -289 92 -301 73 -516 74 -670 3
|
|
||||||
-124 -57 -186 -153 -188 -295 -1 -67 5 -128 18 -180 3 -13 15 -45 26 -70 43
|
|
||||||
-99 57 -135 53 -135 -3 0 4 -10 16 -22 11 -12 20 -26 20 -31 0 -5 9 -22 21
|
|
||||||
-38 11 -16 18 -29 14 -29 -3 0 4 -10 15 -22 11 -12 18 -28 15 -36 -2 -7 -1
|
|
||||||
-11 3 -8 4 2 19 -12 32 -32 13 -20 33 -47 44 -59 11 -13 17 -23 13 -23 -3 0
|
|
||||||
12 -19 33 -42 22 -24 38 -49 35 -55 -2 -7 -1 -12 4 -10 4 1 32 -25 62 -58 30
|
|
||||||
-33 88 -94 131 -135 l76 -75 -71 -70 c-112 -110 -174 -181 -262 -300 -106
|
|
||||||
-144 -142 -202 -203 -325 -9 -19 -21 -38 -27 -42 -5 -4 -7 -8 -3 -8 4 0 -4
|
|
||||||
-27 -18 -60 -25 -63 -58 -199 -50 -208 3 -2 1 -12 -4 -22 -5 -10 -6 -20 -3
|
|
||||||
-24 4 -4 8 -23 10 -44 9 -107 77 -201 183 -251 33 -16 56 -32 52 -36 -4 -5 -2
|
|
||||||
-5 4 -2 6 4 44 1 85 -6 41 -7 102 -12 136 -12 41 1 60 -2 55 -9 -3 -6 2 -5 11
|
|
||||||
3 11 8 44 14 86 15 38 0 67 4 64 9 -4 6 10 8 79 11 14 0 24 3 22 5 -4 4 33 14
|
|
||||||
145 37 13 3 33 10 43 15 11 6 26 8 34 5 10 -4 12 -2 8 6 -5 8 -2 9 9 5 10 -3
|
|
||||||
17 -2 17 3 0 6 8 10 18 10 9 0 36 9 58 19 32 15 45 16 54 8 9 -9 11 -9 8 2 -2
|
|
||||||
7 2 15 8 18 10 3 23 -34 38 -108 2 -8 6 -21 9 -29 15 -36 70 -206 70 -217 0
|
|
||||||
-7 4 -13 8 -13 11 0 30 -61 22 -74 -3 -6 -3 -8 2 -4 8 7 86 -135 88 -159 0 -7
|
|
||||||
4 -13 8 -13 13 0 39 -56 31 -66 -4 -5 -3 -6 2 -2 5 4 22 -12 39 -35 17 -23 49
|
|
||||||
-59 71 -80 23 -21 40 -42 39 -47 -2 -6 0 -9 5 -8 15 3 63 -22 68 -37 3 -8 10
|
|
||||||
-12 15 -10 5 3 22 -1 39 -10 17 -9 35 -13 40 -10 6 3 10 2 10 -2 0 -5 12 -8
|
|
||||||
28 -8 15 1 33 -4 41 -9 11 -8 13 -8 8 0 -4 7 7 13 33 17 21 3 53 12 71 21 17
|
|
||||||
9 36 13 42 9 5 -3 7 -1 3 5 -3 6 3 13 14 17 11 3 20 11 20 16 0 5 5 9 11 9 5
|
|
||||||
0 7 -6 3 -13 -4 -7 -3 -9 2 -4 5 5 9 12 9 17 0 4 14 21 30 37 69 67 162 196
|
|
||||||
179 251 4 12 12 20 17 16 5 -3 8 -2 7 3 -1 4 6 29 17 56 14 33 24 45 35 41 11
|
|
||||||
-4 12 -2 4 6 -14 14 -6 52 9 43 5 -3 7 -2 4 4 -3 5 8 45 24 88 17 44 33 86 35
|
|
||||||
94 7 34 56 206 59 209 1 1 15 -3 31 -9 16 -7 34 -13 39 -15 61 -18 144 -51
|
|
||||||
139 -56 -3 -4 3 -4 14 -1 11 2 23 0 26 -6 4 -5 14 -7 23 -4 9 4 14 2 10 -3 -3
|
|
||||||
-5 7 -9 21 -8 34 1 63 -6 58 -15 -2 -3 19 -7 47 -9 28 -2 55 -6 61 -10 13 -8
|
|
||||||
18 -9 79 -10 27 -1 46 -5 44 -9 -3 -5 20 -6 50 -5 44 3 54 1 48 -10 -6 -10 -5
|
|
||||||
-11 6 0 16 15 33 16 23 0 -5 -7 -3 -8 7 -3 7 5 29 10 49 12 74 5 116 11 135
|
|
||||||
18 11 4 37 13 57 21 28 10 38 11 41 1 4 -8 6 -7 6 3 1 8 21 28 46 44 43 26 92
|
|
||||||
86 109 131 28 73 27 217 -3 313 -5 18 -10 33 -9 35 2 23 -118 257 -184 356
|
|
||||||
-44 67 -124 177 -138 191 -3 3 -34 39 -70 80 -36 41 -97 107 -137 146 l-72 71
|
|
||||||
25 22 c14 12 30 19 36 15 6 -4 8 -3 4 4 -3 6 24 42 61 80 38 38 86 91 108 117
|
|
||||||
22 27 46 54 53 61 6 7 12 17 12 23 0 6 3 11 8 11 4 0 22 22 41 50 19 27 37 47
|
|
||||||
41 45 4 -3 7 3 6 13 0 9 5 16 12 14 8 -1 11 2 7 7 -5 9 36 83 55 101 5 5 101
|
|
||||||
200 121 245 7 18 26 84 36 125 2 8 4 27 5 42 0 16 5 25 11 21 6 -4 7 -1 2 7
|
|
||||||
-11 18 -11 62 0 80 5 8 4 11 -2 7 -6 -4 -12 10 -16 36 -6 51 -10 70 -18 77 -3
|
|
||||||
3 -15 21 -27 41 -42 70 -184 145 -292 155 -205 20 -451 -18 -709 -108 -30 -10
|
|
||||||
-60 -17 -68 -14 -8 3 -12 2 -9 -3 5 -7 -42 -31 -60 -31 -1 0 -5 15 -9 33 -18
|
|
||||||
86 -108 342 -156 444 -17 35 -29 66 -29 69 1 4 -2 10 -7 13 -5 3 -24 32 -42
|
|
||||||
64 -108 190 -245 296 -403 311 -20 2 -39 2 -41 -1z m53 -124 c0 -5 5 -7 10 -4
|
|
||||||
14 9 52 -4 45 -16 -3 -5 0 -6 8 -4 17 7 69 -33 61 -47 -5 -7 -2 -8 5 -4 13 8
|
|
||||||
43 -23 35 -36 -3 -4 1 -6 8 -3 7 2 24 -11 38 -31 14 -19 30 -41 35 -47 50 -56
|
|
||||||
148 -233 139 -249 -4 -6 -3 -9 2 -5 12 7 97 -192 90 -210 -3 -8 -2 -12 3 -9
|
|
||||||
11 7 45 -120 35 -135 -4 -8 -3 -9 4 -5 7 4 12 3 12 -3 0 -5 3 -16 6 -25 4 -11
|
|
||||||
-23 -30 -113 -75 -138 -71 -276 -145 -350 -189 -29 -17 -53 -29 -53 -26 0 3
|
|
||||||
-7 -1 -15 -10 -14 -14 -19 -13 -53 6 -20 11 -62 34 -92 51 -30 16 -59 33 -65
|
|
||||||
37 -5 4 -86 47 -180 95 -93 48 -173 91 -177 94 -11 10 3 52 15 44 6 -3 7 -1 3
|
|
||||||
6 -9 14 12 113 22 107 4 -2 8 7 8 20 2 24 42 134 53 144 3 3 7 12 9 20 2 8 17
|
|
||||||
44 33 80 24 50 32 61 40 50 8 -11 9 -10 4 7 -5 17 10 47 60 123 36 55 71 98
|
|
||||||
76 94 5 -3 9 -2 8 3 -4 23 2 35 17 29 8 -3 12 -2 9 3 -7 12 60 78 100 99 25
|
|
||||||
13 70 27 98 31 4 1 7 -4 7 -10z m-1411 -783 c9 -6 12 -5 8 1 -4 6 10 10 34 11
|
|
||||||
29 1 38 -1 33 -11 -5 -9 -4 -9 7 1 7 6 19 12 27 12 8 0 10 -5 6 -12 -6 -10 -5
|
|
||||||
-10 7 -1 9 7 26 10 40 8 13 -3 47 -8 74 -11 63 -7 155 -23 175 -31 15 -6 35
|
|
||||||
-10 71 -12 12 -1 17 -5 13 -13 -4 -7 -3 -8 4 -4 6 4 31 1 54 -5 24 -7 49 -13
|
|
||||||
55 -15 25 -5 73 -29 73 -37 0 -5 4 -6 9 -3 12 8 41 -4 41 -16 0 -5 -4 -6 -10
|
|
||||||
-3 -6 3 -7 -1 -4 -9 3 -9 1 -45 -5 -81 -6 -36 -14 -91 -17 -122 -4 -32 -11
|
|
||||||
-61 -18 -65 -8 -6 -7 -8 2 -8 7 0 11 -4 8 -8 -3 -4 -8 -42 -11 -83 -4 -40 -9
|
|
||||||
-81 -12 -89 -3 -8 -6 -44 -8 -80 -1 -36 -3 -65 -4 -65 -1 0 -3 -27 -4 -61 -3
|
|
||||||
-66 0 -62 -92 -139 -33 -27 -62 -53 -63 -58 -2 -4 -8 -5 -13 -1 -5 3 -9 1 -9
|
|
||||||
-3 0 -5 -41 -44 -91 -88 -50 -43 -98 -85 -106 -93 -13 -14 -23 -6 -91 64 -86
|
|
||||||
90 -172 188 -186 213 -5 9 -12 18 -16 21 -12 9 -106 154 -139 215 -18 33 -37
|
|
||||||
66 -43 72 -6 7 -8 20 -4 28 3 9 2 14 -3 11 -19 -12 -102 225 -105 296 0 27 -4
|
|
||||||
48 -7 48 -16 0 9 108 32 142 22 31 125 81 151 74 10 -2 18 0 18 5 0 5 14 7 30
|
|
||||||
5 17 -2 30 0 30 4 0 9 42 7 59 -4z m2823 1 c6 -9 8 -9 8 1 0 7 4 10 10 7 5 -3
|
|
||||||
29 -8 52 -11 113 -13 201 -66 197 -118 0 -5 4 -12 10 -15 9 -6 11 -27 11 -124
|
|
||||||
0 -16 -4 -26 -9 -23 -5 3 -7 -2 -4 -13 11 -41 -89 -307 -110 -294 -6 3 -7 1
|
|
||||||
-3 -6 13 -20 -142 -281 -166 -281 -6 0 -8 -3 -5 -7 11 -10 -51 -84 -197 -238
|
|
||||||
l-86 -89 -47 44 c-26 25 -52 50 -58 55 -7 6 -39 33 -71 61 -33 29 -86 73 -119
|
|
||||||
100 -86 69 -87 71 -90 112 -5 69 -16 207 -21 242 -4 33 -10 92 -18 170 -4 37
|
|
||||||
-14 114 -21 165 -2 17 -9 52 -14 80 -5 27 -9 50 -8 51 50 22 109 44 129 48 15
|
|
||||||
2 36 10 48 16 12 6 28 9 35 6 8 -3 15 -1 17 5 2 5 19 11 39 13 20 2 40 6 45 9
|
|
||||||
5 3 29 8 54 12 25 4 48 9 52 11 5 3 8 -1 8 -8 0 -9 2 -10 8 -2 9 16 43 21 61
|
|
||||||
10 10 -7 12 -6 6 4 -6 10 -3 12 12 8 12 -3 25 -3 31 1 20 12 206 11 214 -2z
|
|
||||||
m-1950 -189 c23 -13 46 -27 49 -31 3 -5 9 -8 13 -7 15 3 64 -25 59 -34 -3 -5
|
|
||||||
-1 -6 5 -2 14 9 63 -14 55 -27 -3 -6 -2 -7 4 -4 5 3 56 -21 113 -53 57 -33
|
|
||||||
107 -60 111 -60 4 0 11 -5 15 -12 5 -8 2 -9 -9 -5 -9 3 -16 2 -14 -2 1 -5 -48
|
|
||||||
-42 -110 -83 -61 -40 -144 -95 -183 -123 -40 -27 -80 -54 -89 -60 -9 -5 -18
|
|
||||||
-12 -21 -15 -17 -17 -80 -60 -80 -54 0 3 -9 -4 -20 -17 l-20 -24 6 105 c3 58
|
|
||||||
7 121 9 140 2 19 5 52 6 72 1 20 5 36 8 34 3 -2 7 19 7 47 2 79 15 149 31 176
|
|
||||||
8 13 10 20 4 17 -6 -4 -11 -2 -11 3 0 6 4 11 10 11 5 0 7 7 4 15 -8 20 -4 19
|
|
||||||
48 -7z m1114 -66 c3 -26 8 -56 10 -67 10 -50 19 -145 19 -192 0 -28 3 -49 7
|
|
||||||
-47 4 3 6 -16 5 -41 -1 -25 0 -45 3 -45 3 0 6 -32 7 -70 2 -39 -1 -70 -5 -70
|
|
||||||
-5 0 -18 9 -30 20 -12 11 -26 20 -31 20 -5 0 -17 10 -25 22 -9 12 -16 19 -16
|
|
||||||
15 0 -6 -92 56 -135 90 -25 20 -253 169 -278 182 -15 8 -26 15 -25 16 9 7 158
|
|
||||||
95 184 108 17 9 34 13 38 10 3 -4 6 -1 6 5 0 11 175 102 197 102 7 0 13 4 13
|
|
||||||
9 0 5 8 11 18 13 20 4 29 -14 38 -80z m-531 -268 c30 -20 55 -41 55 -45 0 -5
|
|
||||||
6 -8 13 -6 6 1 11 -4 9 -11 -1 -8 2 -11 7 -7 14 8 82 -38 76 -52 -2 -7 2 -10
|
|
||||||
11 -6 8 3 25 -3 37 -14 12 -11 35 -27 50 -37 16 -9 25 -22 21 -28 -4 -7 -3 -8
|
|
||||||
4 -4 10 6 242 -148 250 -166 2 -5 9 -8 16 -8 7 0 21 -9 31 -20 17 -19 14 -24
|
|
||||||
-10 -21 -5 1 -3 -4 5 -11 12 -10 15 -40 16 -138 0 -77 -4 -128 -10 -132 -7 -5
|
|
||||||
-7 -8 -1 -8 12 0 14 -259 2 -277 -5 -7 -4 -13 1 -13 12 0 7 -79 -5 -90 -7 -7
|
|
||||||
-244 -174 -287 -203 -10 -6 -24 -16 -30 -22 -12 -10 -34 -26 -211 -146 -96
|
|
||||||
-65 -108 -71 -131 -60 -14 6 -22 16 -19 21 3 5 0 7 -7 5 -8 -3 -23 4 -35 15
|
|
||||||
-12 11 -24 20 -27 20 -5 0 -246 166 -271 187 -5 4 -30 22 -55 38 -25 17 -49
|
|
||||||
33 -55 38 -5 4 -44 31 -85 61 l-75 54 0 337 c1 317 2 338 19 351 11 7 23 11
|
|
||||||
29 7 6 -3 7 -1 3 5 -4 7 3 17 18 24 14 6 26 15 26 20 0 4 7 8 15 8 8 0 15 5
|
|
||||||
15 11 0 6 7 8 16 5 8 -3 13 -2 9 3 -3 5 12 20 32 32 21 13 41 27 44 32 4 5 12
|
|
||||||
6 19 2 8 -5 11 -4 7 2 -9 15 38 44 60 37 12 -4 14 -3 6 3 -9 6 1 19 37 46 27
|
|
||||||
20 54 37 59 37 5 0 11 3 13 8 5 12 131 95 144 95 7 0 12 4 11 8 -2 8 51 47 66
|
|
||||||
48 4 1 32 -15 62 -35z m-822 -752 c2 -270 4 -262 -48 -215 -12 10 -41 34 -65
|
|
||||||
53 -43 33 -83 67 -157 136 l-34 31 57 49 c177 153 219 185 228 176 4 -4 7 -2
|
|
||||||
6 3 -4 17 0 29 6 23 3 -4 6 -119 7 -256z m1539 245 c7 -7 26 -20 41 -30 15
|
|
||||||
-10 25 -23 21 -29 -4 -7 -3 -8 4 -4 7 4 12 2 12 -3 0 -6 6 -10 13 -8 6 1 11
|
|
||||||
-4 9 -11 -1 -8 2 -11 7 -8 5 4 14 -2 20 -11 5 -10 13 -18 18 -18 4 0 7 -3 6
|
|
||||||
-7 -2 -5 1 -7 5 -5 5 1 37 -22 71 -52 l62 -54 -53 -49 c-29 -27 -66 -59 -81
|
|
||||||
-71 -16 -12 -34 -27 -41 -33 -43 -40 -129 -105 -133 -101 -2 3 0 14 6 25 7 13
|
|
||||||
7 23 -2 32 -9 10 -9 14 1 17 6 3 9 9 6 14 -5 9 -8 289 -4 314 1 6 2 14 1 19
|
|
||||||
-4 22 -8 86 -5 86 1 0 9 -6 16 -13z m-1862 -353 c48 -45 72 -65 109 -93 17
|
|
||||||
-13 31 -30 31 -37 0 -8 3 -13 8 -13 21 4 32 -3 32 -18 0 -9 3 -14 6 -10 4 3
|
|
||||||
13 -1 21 -9 8 -8 30 -26 49 -40 18 -15 31 -31 27 -37 -3 -5 -2 -7 4 -4 23 14
|
|
||||||
43 -19 48 -78 10 -127 16 -186 40 -410 4 -33 10 -79 14 -102 5 -27 4 -46 -3
|
|
||||||
-54 -8 -9 -8 -10 0 -6 7 4 14 -2 17 -13 3 -11 0 -20 -5 -20 -6 0 -5 -6 2 -15
|
|
||||||
7 -8 10 -26 8 -40 -3 -13 -1 -22 3 -19 5 3 9 1 9 -5 0 -8 -35 -25 -50 -23 -3
|
|
||||||
0 -14 -5 -25 -11 -11 -6 -22 -12 -25 -12 -3 -1 -36 -11 -75 -23 -61 -18 -120
|
|
||||||
-33 -190 -48 -11 -2 -40 -7 -65 -10 -25 -3 -49 -8 -53 -11 -5 -3 -70 -6 -145
|
|
||||||
-8 -122 -3 -168 0 -263 18 -72 14 -145 78 -155 136 -3 20 -8 44 -11 54 -2 9
|
|
||||||
-1 17 4 17 4 0 8 17 7 37 -1 50 6 74 20 66 8 -4 8 -3 0 6 -12 14 33 164 47
|
|
||||||
155 5 -3 6 2 3 10 -3 9 6 36 20 62 14 26 26 53 26 60 0 8 5 14 10 14 6 0 10 5
|
|
||||||
10 11 0 22 93 168 103 162 6 -3 7 -2 4 4 -10 17 64 118 77 105 4 -3 5 0 2 8
|
|
||||||
-4 9 12 35 39 65 25 28 73 80 106 117 34 38 65 65 70 62 5 -3 8 -2 7 3 -5 13
|
|
||||||
26 42 37 35 6 -3 26 -21 45 -38z m2364 -103 c-1 -3 7 -12 18 -19 10 -7 15 -18
|
|
||||||
12 -24 -4 -6 -2 -8 3 -5 6 4 21 -8 34 -25 13 -17 29 -36 34 -42 30 -33 63 -84
|
|
||||||
58 -90 -4 -3 -1 -6 5 -6 17 0 85 -108 76 -121 -4 -7 -3 -9 3 -6 13 8 106 -169
|
|
||||||
97 -185 -4 -6 -3 -8 3 -5 12 7 36 -50 28 -63 -3 -4 1 -10 9 -13 7 -3 17 -23
|
|
||||||
21 -44 5 -21 10 -45 12 -53 2 -8 4 -24 6 -35 1 -11 6 -23 10 -26 5 -3 8 -36 8
|
|
||||||
-73 0 -178 -108 -238 -417 -231 -78 2 -150 5 -161 8 -10 3 -34 8 -53 11 -19 3
|
|
||||||
-48 8 -65 11 -114 22 -337 94 -329 106 3 5 -2 6 -12 2 -12 -5 -15 -2 -11 13 6
|
|
||||||
20 16 78 22 129 2 17 6 46 9 65 3 19 8 60 11 90 3 30 8 69 11 87 2 17 7 62 10
|
|
||||||
100 3 37 10 73 15 80 7 7 6 14 -1 18 -6 3 -7 12 -3 18 4 6 6 26 5 45 -2 25 1
|
|
||||||
32 10 26 10 -6 10 -5 2 7 -16 21 -6 71 18 88 11 8 30 25 41 38 11 12 24 23 29
|
|
||||||
23 4 0 25 16 45 36 63 60 110 94 118 86 5 -4 5 -2 2 4 -4 7 9 24 29 39 20 15
|
|
||||||
49 40 66 57 l30 29 71 -72 c40 -39 71 -74 71 -78z m-1901 -294 c-3 -5 -2 -7 4
|
|
||||||
-4 12 8 83 -39 83 -55 0 -6 3 -8 6 -5 7 7 136 -80 142 -95 2 -4 10 -8 18 -8 8
|
|
||||||
0 14 -3 14 -8 0 -4 20 -18 45 -32 25 -14 45 -28 45 -32 0 -5 5 -8 10 -8 12 0
|
|
||||||
124 -72 128 -82 2 -5 11 -8 20 -8 10 0 -36 -32 -101 -70 -65 -39 -124 -67
|
|
||||||
-130 -64 -7 4 -8 3 -4 -2 5 -5 -41 -33 -110 -66 -80 -38 -120 -52 -125 -45 -3
|
|
||||||
7 -9 32 -12 57 -3 25 -8 58 -11 74 -3 15 -8 49 -11 75 -3 25 -7 62 -9 81 -2
|
|
||||||
19 -7 62 -10 94 -3 33 -8 64 -11 68 -3 4 0 8 6 8 6 0 8 5 4 11 -3 6 -8 43 -11
|
|
||||||
82 -5 65 -4 70 11 58 9 -7 13 -18 9 -24z m1261 -64 c-4 -94 -9 -162 -18 -228
|
|
||||||
-2 -16 -7 -55 -10 -85 -4 -30 -8 -62 -10 -70 -1 -8 -7 -37 -11 -65 -5 -27 -10
|
|
||||||
-53 -11 -57 -1 -5 -2 -13 -3 -20 -1 -9 -4 -9 -13 0 -7 7 -20 12 -30 12 -10 0
|
|
||||||
-18 5 -18 12 0 6 -3 9 -6 5 -4 -3 -54 19 -113 50 -58 31 -123 64 -143 75 -21
|
|
||||||
10 -38 23 -38 29 0 6 -4 8 -9 5 -5 -3 -19 2 -32 12 -13 10 -37 24 -52 32 -25
|
|
||||||
12 -26 15 -10 24 10 6 22 11 26 11 4 0 11 5 15 12 4 6 13 13 21 15 8 2 24 12
|
|
||||||
36 23 13 12 36 27 52 35 15 8 35 21 43 28 8 7 18 12 23 12 4 0 16 8 26 18 42
|
|
||||||
37 52 43 64 36 6 -4 9 -3 4 1 -9 11 43 46 56 38 6 -3 7 -2 4 4 -3 5 27 33 68
|
|
||||||
62 41 28 77 56 80 61 12 20 13 8 9 -87z m-524 -403 c8 -5 30 -17 48 -26 17 -9
|
|
||||||
32 -21 32 -26 0 -5 4 -7 9 -3 5 3 36 -11 68 -30 32 -19 63 -35 69 -35 5 0 21
|
|
||||||
-10 34 -22 14 -13 25 -21 25 -18 1 8 154 -64 155 -73 0 -5 -4 -5 -10 -2 -6 4
|
|
||||||
-7 -1 -3 -10 3 -10 0 -21 -8 -26 -11 -6 -11 -9 -1 -9 9 0 10 -5 4 -17 -5 -10
|
|
||||||
-15 -40 -21 -68 -7 -27 -18 -63 -26 -80 -7 -16 -24 -58 -36 -92 -13 -34 -28
|
|
||||||
-59 -33 -56 -5 3 -6 1 -3 -4 9 -14 -22 -75 -34 -68 -5 4 -6 -1 -3 -10 4 -9 -5
|
|
||||||
-33 -20 -55 -14 -22 -26 -42 -26 -46 0 -3 -19 -33 -42 -67 -185 -267 -312
|
|
||||||
-305 -471 -142 -56 56 -164 205 -150 205 4 0 3 4 -3 8 -14 8 -97 164 -109 202
|
|
||||||
-4 14 -16 43 -26 65 -25 55 -76 216 -81 251 -2 23 1 29 14 28 10 -1 16 1 14 5
|
|
||||||
-3 4 19 18 47 31 29 13 55 29 59 35 4 5 8 7 8 3 0 -4 23 6 50 22 28 16 50 26
|
|
||||||
50 22 0 -4 4 -2 8 3 4 6 25 19 47 30 22 11 47 25 55 31 38 28 169 92 176 86 4
|
|
||||||
-4 4 -2 1 5 -19 32 42 11 133 -47z"/>
|
|
||||||
<path d="M2556 3192 c-3 -5 1 -9 9 -9 8 0 12 4 9 9 -3 4 -7 8 -9 8 -2 0 -6 -4
|
|
||||||
-9 -8z"/>
|
|
||||||
<path d="M2455 2831 c-3 -5 -2 -12 3 -15 5 -3 9 1 9 9 0 17 -3 19 -12 6z"/>
|
|
||||||
<path d="M2500 2790 c-9 -6 -10 -10 -3 -10 6 0 15 5 18 10 8 12 4 12 -15 0z"/>
|
|
||||||
<path d="M2144 2592 c-70 -35 -108 -103 -100 -179 3 -38 32 -93 62 -118 9 -7
|
|
||||||
1 -43 -31 -140 -65 -196 -66 -176 5 -173 33 2 60 -1 60 -5 0 -5 4 -6 8 -3 13
|
|
||||||
8 227 10 239 3 18 -11 23 7 13 39 -6 16 -28 83 -49 149 l-39 120 29 27 c16 16
|
|
||||||
29 30 29 33 0 22 1 26 8 22 4 -3 8 20 8 51 3 88 -33 145 -108 176 -44 19 -96
|
|
||||||
18 -134 -2z"/>
|
|
||||||
<path d="M1113 2105 c0 -8 4 -12 9 -9 5 3 6 10 3 15 -9 13 -12 11 -12 -6z"/>
|
|
||||||
<path d="M859 1903 c-13 -16 -12 -17 4 -4 9 7 17 15 17 17 0 8 -8 3 -21 -13z"/>
|
|
||||||
<path d="M1436 1803 c-6 -14 -5 -15 5 -6 7 7 10 15 7 18 -3 3 -9 -2 -12 -12z"/>
|
|
||||||
<path d="M3760 1596 c0 -2 8 -10 18 -17 15 -13 16 -12 3 4 -13 16 -21 21 -21
|
|
||||||
13z"/>
|
|
||||||
<path d="M1616 1691 c-3 -5 2 -15 12 -22 15 -12 16 -12 5 2 -7 9 -10 19 -6 22
|
|
||||||
3 4 4 7 0 7 -3 0 -8 -4 -11 -9z"/>
|
|
||||||
<path d="M2710 1590 c0 -5 5 -10 11 -10 5 0 7 5 4 10 -3 6 -8 10 -11 10 -2 0
|
|
||||||
-4 -4 -4 -10z"/>
|
|
||||||
<path d="M1090 831 c0 -6 4 -13 10 -16 6 -3 7 1 4 9 -7 18 -14 21 -14 7z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 13 KiB |
@ -1,19 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "",
|
|
||||||
"short_name": "",
|
|
||||||
"icons": [
|
|
||||||
{
|
|
||||||
"src": "/android-chrome-192x192.png",
|
|
||||||
"sizes": "192x192",
|
|
||||||
"type": "image/png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "/android-chrome-384x384.png",
|
|
||||||
"sizes": "384x384",
|
|
||||||
"type": "image/png"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"theme_color": "#ffffff",
|
|
||||||
"background_color": "#ffffff",
|
|
||||||
"display": "standalone"
|
|
||||||
}
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
/* latin */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Work Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
/*400*/
|
|
||||||
font-display: swap;
|
|
||||||
src: url("./worksans-regular-webfont.woff2") format("woff2");
|
|
||||||
}
|
|
||||||
|
|
||||||
/* latin */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Work Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
font-display: swap;
|
|
||||||
src: url("./worksans-medium-webfont.woff2") format("woff2");
|
|
||||||
}
|
|
||||||
|
|
||||||
/* latin */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Work Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
font-display: swap;
|
|
||||||
src: url("./worksans-semibold-webfont.woff2") format("woff2");
|
|
||||||
}
|
|
||||||
|
|
||||||
/* latin */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Work Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: bold;
|
|
||||||
/*700*/
|
|
||||||
font-display: swap;
|
|
||||||
src: url("./worksans-bold-webfont.woff2") format("woff2");
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB |
@ -1,3 +0,0 @@
|
|||||||
Looking to contribute? Thank you! PR are more than welcome.
|
|
||||||
|
|
||||||
Please refers to [this documentation page](https://docs.keycloakify.dev/contributing) that will help you get started.
|
|
||||||
410
README.md
410
README.md
@ -1,384 +1,66 @@
|
|||||||
<p align="center">
|
<p align="center">
|
||||||
<img src="https://user-images.githubusercontent.com/6702424/109387840-eba11f80-7903-11eb-9050-db1dad883f78.png">
|
<img src="https://user-images.githubusercontent.com/6702424/80216211-00ef5280-863e-11ea-81de-59f3a3d4b8e4.png">
|
||||||
</p>
|
</p>
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<i>🔏 Create Keycloak themes using React 🔏</i>
|
<i>Provides a way to customise Keycloak login and register pages with React</i>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<a href="https://github.com/garronej/keycloakify/actions">
|
<img src="https://github.com/garronej/keycloak-react-theming/workflows/ci/badge.svg?branch=develop">
|
||||||
<img src="https://github.com/garronej/keycloakify/workflows/ci/badge.svg?branch=main">
|
<img src="https://img.shields.io/bundlephobia/minzip/keycloak-react-theming">
|
||||||
</a>
|
<img src="https://img.shields.io/npm/dw/keycloak-react-theming">
|
||||||
<a href="https://www.npmjs.com/package/keycloakify">
|
<img src="https://img.shields.io/npm/l/keycloak-react-theming">
|
||||||
<img src="https://img.shields.io/npm/dm/keycloakify">
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/garronej/keycloakify/blob/main/LICENSE">
|
|
||||||
<img src="https://img.shields.io/npm/l/keycloakify">
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/keycloakify/keycloakify/blob/729503fe31a155a823f46dd66ad4ff34ca274e0a/tsconfig.json#L14">
|
|
||||||
<img src="https://camo.githubusercontent.com/0f9fcc0ac1b8617ad4989364f60f78b2d6b32985ad6a508f215f14d8f897b8d3/68747470733a2f2f62616467656e2e6e65742f62616467652f547970655363726970742f7374726963742532302546302539462539322541412f626c7565">
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/thomasdarimont/awesome-keycloak">
|
|
||||||
<img src="https://awesome.re/mentioned-badge.svg"/>
|
|
||||||
</a>
|
|
||||||
<a href="https://discord.gg/kYFZG7fQmn">
|
|
||||||
<img src="https://img.shields.io/discord/1097708346976505977"/>
|
|
||||||
</a>
|
|
||||||
<p align="center">
|
|
||||||
<a href="https://www.keycloakify.dev">Home</a>
|
|
||||||
-
|
|
||||||
<a href="https://docs.keycloakify.dev">Documentation</a>
|
|
||||||
-
|
|
||||||
<a href="https://storybook.keycloakify.dev">Storybook</a>
|
|
||||||
-
|
|
||||||
<a href="https://github.com/codegouvfr/keycloakify-starter">Starter project</a>
|
|
||||||
</p>
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<i>This build tool generates a Keycloak theme <a href="https://www.keycloakify.dev">Learn more</a></i>
|
<a href="https://github.com/garronej/keycloak-react-theming">Home</a>
|
||||||
<img src="https://user-images.githubusercontent.com/6702424/110260457-a1c3d380-7fac-11eb-853a-80459b65626b.png">
|
-
|
||||||
|
<a href="https://github.com/garronej/keycloak-react-theming">Documentation</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
> Whether or not React is your preferred framework, Keycloakify
|
# Install / Import
|
||||||
> offers a solid option for building Keycloak themes.
|
|
||||||
> It's not just a convenient way to create a Keycloak theme
|
|
||||||
> when using React; it's a well-regarded solution that many
|
|
||||||
> developers appreciate.
|
|
||||||
|
|
||||||
> 📣 🛑 Account themes generated by Keycloakify are not currently compatible with Keycloak 22.
|
```bash
|
||||||
> We are working on a solution. [Follow progress](https://github.com/keycloakify/keycloakify/issues/389).
|
$ npm install --save keycloak-react-theming
|
||||||
> Login and email themes are not affected.
|
|
||||||
> UPDATE: [The PR](https://github.com/keycloak/keycloak/pull/22317) that should future proof Keycloakify account themes has been greenlighted
|
|
||||||
> by the Keycloak team. Resolution is only a matter of time.
|
|
||||||
|
|
||||||
Keycloakify is fully compatible with Keycloak, starting from version 11 and is anticipated to maintain compatibility with all future versions.
|
|
||||||
You can update your Keycloak, your Keycloakify generated theme won't break.
|
|
||||||
To understand the basis of my confidence in this, you can [visit this discussion thread where I've explained in detail](https://github.com/keycloakify/keycloakify/discussions/346#discussioncomment-5889791).
|
|
||||||
|
|
||||||
## Sponsor 👼
|
|
||||||
|
|
||||||
We are exclusively sponsored by [Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), a French company offering Keycloak as a service.
|
|
||||||
Their dedicated support helps us continue the development and maintenance of this project.
|
|
||||||
|
|
||||||
[Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github) provides the following services:
|
|
||||||
|
|
||||||
- Simplify and secure your Keycloak Identity and Access Management. Keycloak as a Service.
|
|
||||||
- Custom theme building for your brand using Keycloakify.
|
|
||||||
|
|
||||||
<div align="center">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div align="center">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p align="center">
|
|
||||||
<i>Checkout <a href="https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github">Cloud IAM</a> and use promo code <code>keycloakify5</code></i>
|
|
||||||
<br/>
|
|
||||||
<i>5% of your annual subscription will be donated to us, and you'll get 5% off too.</i>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
Thank you, [Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), for your support!
|
|
||||||
|
|
||||||
## Contributors ✨
|
|
||||||
|
|
||||||
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
|
||||||
|
|
||||||
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
|
||||||
<!-- prettier-ignore-start -->
|
|
||||||
<!-- markdownlint-disable -->
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/lordvlad"><img src="https://avatars.githubusercontent.com/u/1217769?v=4?s=100" width="100px;" alt="Waldemar Reusch"/><br /><sub><b>Waldemar Reusch</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=lordvlad" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://willwill96.github.io/the-ui-dawg-static-site/en/introduction/"><img src="https://avatars.githubusercontent.com/u/10997562?v=4?s=100" width="100px;" alt="William Will"/><br /><sub><b>William Will</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=willwill96" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/Ann2827"><img src="https://avatars.githubusercontent.com/u/32645809?v=4?s=100" width="100px;" alt="Bystrova Ann"/><br /><sub><b>Bystrova Ann</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=Ann2827" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/mkreuzmayr"><img src="https://avatars.githubusercontent.com/u/20108212?v=4?s=100" width="100px;" alt="Michael Kreuzmayr"/><br /><sub><b>Michael Kreuzmayr</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=mkreuzmayr" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://coolmathgames.tech"><img src="https://avatars.githubusercontent.com/u/6877780?v=4?s=100" width="100px;" alt="Mary "/><br /><sub><b>Mary </b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=Mstrodl" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://tasyp.xyz/"><img src="https://avatars.githubusercontent.com/u/6623212?v=4?s=100" width="100px;" alt="German Öö"/><br /><sub><b>German Öö</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=Tasyp" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://revolunet.com"><img src="https://avatars.githubusercontent.com/u/124937?v=4?s=100" width="100px;" alt="Julien Bouquillon"/><br /><sub><b>Julien Bouquillon</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=revolunet" title="Code">💻</a></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/aidangilmore"><img src="https://avatars.githubusercontent.com/u/32880357?v=4?s=100" width="100px;" alt="Aidan Gilmore"/><br /><sub><b>Aidan Gilmore</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=aidangilmore" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/0x-Void"><img src="https://avatars.githubusercontent.com/u/32745739?v=4?s=100" width="100px;" alt="Void"/><br /><sub><b>Void</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=0x-Void" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/juffe"><img src="https://avatars.githubusercontent.com/u/5393231?v=4?s=100" width="100px;" alt="juffe"/><br /><sub><b>juffe</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=juffe" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/lazToum"><img src="https://avatars.githubusercontent.com/u/4764837?v=4?s=100" width="100px;" alt="Lazaros Toumanidis"/><br /><sub><b>Lazaros Toumanidis</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=lazToum" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/marcmrf"><img src="https://avatars.githubusercontent.com/u/9928519?v=4?s=100" width="100px;" alt="Marc"/><br /><sub><b>Marc</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=marcmrf" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="http://kasir-barati.github.io"><img src="https://avatars.githubusercontent.com/u/73785723?v=4?s=100" width="100px;" alt="Kasir Barati"/><br /><sub><b>Kasir Barati</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=kasir-barati" title="Documentation">📖</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/asashay"><img src="https://avatars.githubusercontent.com/u/10714670?v=4?s=100" width="100px;" alt="Alex Oliynyk"/><br /><sub><b>Alex Oliynyk</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=asashay" title="Code">💻</a></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://www.gravitysoftware.be"><img src="https://avatars.githubusercontent.com/u/1140574?v=4?s=100" width="100px;" alt="Thomas Silvestre"/><br /><sub><b>Thomas Silvestre</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=thosil" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/satanshiro"><img src="https://avatars.githubusercontent.com/u/38865738?v=4?s=100" width="100px;" alt="satanshiro"/><br /><sub><b>satanshiro</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=satanshiro" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://poelhekke.dev"><img src="https://avatars.githubusercontent.com/u/1632377?v=4?s=100" width="100px;" alt="Koen Poelhekke"/><br /><sub><b>Koen Poelhekke</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=kpoelhekke" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/zavoloklom"><img src="https://avatars.githubusercontent.com/u/4151869?v=4?s=100" width="100px;" alt="Sergey Kupletsky"/><br /><sub><b>Sergey Kupletsky</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=zavoloklom" title="Tests">⚠️</a> <a href="https://github.com/keycloakify/keycloakify/commits?author=zavoloklom" title="Code">💻</a></td>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/rome-user"><img src="https://avatars.githubusercontent.com/u/114131048?v=4?s=100" width="100px;" alt="rome-user"/><br /><sub><b>rome-user</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=rome-user" title="Code">💻</a></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<!-- markdownlint-restore -->
|
|
||||||
<!-- prettier-ignore-end -->
|
|
||||||
|
|
||||||
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
||||||
|
|
||||||
# Changelog highlights
|
|
||||||
|
|
||||||
## 8.0
|
|
||||||
|
|
||||||
- Much smaller .jar size. 70.2 MB -> 7.8 MB.
|
|
||||||
Keycloakify now detects which of the static resources from the default theme are actually used by your theme and only include those in the .jar.
|
|
||||||
- Build time: The first build is slowed but the subsequent build are faster. [Update your CI so that the cache is persisted across CI build](https://github.com/keycloakify/keycloakify-starter/commit/bc378d5afb67e796f520afbc348185f3e319d9d0).
|
|
||||||
|
|
||||||
### Breaking changes
|
|
||||||
|
|
||||||
There are very few breaking changes in this major version.
|
|
||||||
|
|
||||||
- The [`--external-assets` build option has been removed](https://docs.keycloakify.dev/v/v7/build-options#external-assets-deprecated) it was a performance optimization that is no longer relevant now that
|
|
||||||
we have lazy loading.
|
|
||||||
|
|
||||||
- `kcContext.usernameEditDisabled` is now `kcContext.usernameHidden`, the type was lying, it has been updated to reflect what's actually on the `kcContext` at runtime.
|
|
||||||
If you want to see in detail what should be updated [see issue](https://github.com/keycloakify/keycloakify/pull/399), or you can search and replace `usernameEditDisabled` -> `usernameHidden` it'll do the trick.
|
|
||||||
|
|
||||||
- The `usePrepareTemplate` prototype has been changed, you can search and replace:
|
|
||||||
|
|
||||||
`src/keycloak-theme/login/Template.tsx`
|
|
||||||
|
|
||||||
```ts
|
|
||||||
url,
|
|
||||||
"stylesCommon": [
|
|
||||||
"node_modules/patternfly/dist/css/patternfly.min.css",
|
|
||||||
"node_modules/patternfly/dist/css/patternfly-additions.min.css",
|
|
||||||
"lib/zocial/zocial.css"
|
|
||||||
],
|
|
||||||
"styles": ["css/login.css"],
|
|
||||||
```
|
```
|
||||||
|
|
||||||
by
|
```typescript
|
||||||
|
import { myFunction, myObject } from "keycloak-react-theming";
|
||||||
```ts
|
|
||||||
"styles": [
|
|
||||||
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
|
|
||||||
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
|
|
||||||
`${url.resourcesCommonPath}/lib/zocial/zocial.css`,
|
|
||||||
`${url.resourcesPath}/css/login.css`
|
|
||||||
],
|
|
||||||
```
|
```
|
||||||
|
|
||||||
and
|
Specific imports:
|
||||||
|
|
||||||
`src/keycloak-theme/account/Template.css`
|
```typescript
|
||||||
|
import { myFunction } from "keycloak-react-theming/myFunction";
|
||||||
```ts
|
import { myObject } from "keycloak-react-theming/myObject";
|
||||||
url,
|
|
||||||
"stylesCommon": ["node_modules/patternfly/dist/css/patternfly.min.css", "node_modules/patternfly/dist/css/patternfly-additions.min.css"],
|
|
||||||
"styles": ["css/account.css"],
|
|
||||||
```
|
```
|
||||||
|
|
||||||
by
|
## Import from HTML, with CDN
|
||||||
|
|
||||||
```ts
|
Import it via a bundle that creates a global ( wider browser support ):
|
||||||
"styles": [
|
|
||||||
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
|
```html
|
||||||
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
|
<script src="//unpkg.com/keycloak-react-theming/bundle.min.js"></script>
|
||||||
`${url.resourcesPath}/css/account.css`
|
<script>
|
||||||
],
|
const { myFunction, myObject } = keycloak_react_theming;
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## 7.15
|
Or import it as an ES module:
|
||||||
|
|
||||||
- The i18n messages you defines in your theme are now also maid available to Keycloak.
|
```html
|
||||||
In practice this mean that you can now customize the `kcContext.message.summary` that
|
<script type="module">
|
||||||
display a general alert and the values returned by `kcContext.messagesPerField.get()` that
|
import {
|
||||||
are used to display specific error on some field of the form.
|
myFunction,
|
||||||
[See video](https://youtu.be/D6tZcemReTI)
|
myObject,
|
||||||
|
} from "//unpkg.com/keycloak-react-theming/zz_esm/index.js";
|
||||||
## 7.14
|
</script>
|
||||||
|
```
|
||||||
- Deprecate the `extraPages` build option. Keycloakify is now able to analyze your code to detect extra pages.
|
|
||||||
|
_You can specify the version you wish to import:_ [unpkg.com](https://unpkg.com)
|
||||||
## 7.13
|
|
||||||
|
## Contribute
|
||||||
- Deprecate `customUserAttribute`, Keycloakify now analyze your code to predict field name usage. [See doc](https://docs.keycloakify.dev/build-options#customuserattributes).
|
|
||||||
It's now mandatory to [adopt the new directory structure](https://docs.keycloakify.dev/migration-guides/v6-greater-than-v7).
|
```bash
|
||||||
|
npm install
|
||||||
## 7.12
|
npm run build
|
||||||
|
npm test
|
||||||
- You can now pack multiple themes variant in a single `.jar` bundle. In vanilla Keycloak themes you have the ability to extend a base theme.
|
```
|
||||||
There is now an idiomatic way of achieving the same result. [Learn more](https://docs.keycloakify.dev/build-options#keycloakify.extrathemenames).
|
|
||||||
|
|
||||||
## 7.9
|
|
||||||
|
|
||||||
- Separate script for copying the default theme static assets to the public directory.
|
|
||||||
Theses assets are only needed for testing your theme locally in Storybook or with a `mockPageId`.
|
|
||||||
You are now expected to have a `"prepare": "copy-keycloak-resources-to-public",` in your package.json scripts.
|
|
||||||
This script will create `public/keycloak-assets` when you run `yarn install` (If you are using another package manager
|
|
||||||
like `pnpm` makes sure that `"prepare"` is actually ran.)
|
|
||||||
[See the updated starter](https://github.com/keycloakify/keycloakify-starter/blob/94532fcf10bf8b19e0873be8575fd28a8958a806/package.json#L11). `public/keycloak-assets` shouldn't be tracked by GIT and is automatically ignored.
|
|
||||||
|
|
||||||
## 7.7
|
|
||||||
|
|
||||||
- Better storybook support, see [the starter project](https://github.com/keycloakify/keycloakify-starter).
|
|
||||||
|
|
||||||
## 7.0 🍾
|
|
||||||
|
|
||||||
- Account theme support 🚀
|
|
||||||
- It's much easier to customize pages at the CSS level, you can now see in the browser dev tool the customizable classes.
|
|
||||||
- New interactive CLI tool `npx eject-keycloak-page`, that enables to select the page you want to customize at the component level.
|
|
||||||
- There is [a Storybook](https://storybook.keycloakify.dev)
|
|
||||||
- [Remember me is fixed](https://github.com/keycloakify/keycloakify/pull/272)
|
|
||||||
|
|
||||||
## 6.13
|
|
||||||
|
|
||||||
- Build work behind corporate proxies, [see issue](https://github.com/keycloakify/keycloakify/issues/257).
|
|
||||||
|
|
||||||
## 6.12
|
|
||||||
|
|
||||||
Massive improvement in the developer experience:
|
|
||||||
|
|
||||||
- There is now only one starter repo: https://github.com/codegouvfr/keycloakify-starter
|
|
||||||
- A lot of comments have been added in the code of the starter to make it easier to get started.
|
|
||||||
- The doc has been updated: https://docs.keycloakify.dev
|
|
||||||
- A lot of improvements in the type system.
|
|
||||||
|
|
||||||
## 6.11.4
|
|
||||||
|
|
||||||
- You no longer need to have Maven installed to build the theme. Thanks to @lordvlad, [see PR](https://github.com/keycloakify/keycloakify/pull/239).
|
|
||||||
- Feature new build options: [`bundler`](https://docs.keycloakify.dev/build-options#keycloakify.bundler), [`groupId`](https://docs.keycloakify.dev/build-options#keycloakify.groupid), [`artifactId`](https://docs.keycloakify.dev/build-options#keycloakify.artifactid), [`version`](https://docs.keycloakify.dev/build-options#version).
|
|
||||||
Theses options can be user to customize the output name of the .jar. You can use environnement variables to overrides the values read in the package.json. Thanks to @lordvlad.
|
|
||||||
|
|
||||||
## 6.10.0
|
|
||||||
|
|
||||||
- Widows compat (thanks to @lordvlad, [see PR](https://github.com/keycloakify/keycloakify/pull/226)). WSL is no longer required 🎉
|
|
||||||
|
|
||||||
## 6.8.4
|
|
||||||
|
|
||||||
- `@emotion/react` is no longer a peer dependency of Keycloakify.
|
|
||||||
|
|
||||||
## 6.8.0
|
|
||||||
|
|
||||||
- It is now possible to pass a custom `<Template />` component as a prop to `<KcApp />` and every
|
|
||||||
individual page (`<Login />`, `<RegisterUserProfile />`, ...) it enables to customize only the header and footer for
|
|
||||||
example without having to switch to a full-component level customization. [See issue](https://github.com/keycloakify/keycloakify/issues/191).
|
|
||||||
|
|
||||||
## 6.7.0
|
|
||||||
|
|
||||||
- Add support for `webauthn-authenticate.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/keycloakify/keycloakify/pull/185).
|
|
||||||
|
|
||||||
## 6.6.0
|
|
||||||
|
|
||||||
- Add support for `login-password.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/keycloakify/keycloakify/pull/184).
|
|
||||||
|
|
||||||
## 6.5.0
|
|
||||||
|
|
||||||
- Add support for `login-username.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/keycloakify/keycloakify/pull/183).
|
|
||||||
|
|
||||||
## 6.4.0
|
|
||||||
|
|
||||||
- You can now optionally pass a `doFetchDefaultThemeResources: boolean` prop to every page component and the default `<KcApp />`
|
|
||||||
This enables you to prevent the default CSS and JS that comes with the builtin Keycloak theme to be downloaded.
|
|
||||||
You'll get [a black slate](https://user-images.githubusercontent.com/6702424/192619083-4baa5df4-4a21-4ec7-8e28-d200d1208299.png).
|
|
||||||
|
|
||||||
## 6.0.0
|
|
||||||
|
|
||||||
- Bundle size drastically reduced, locals and component dynamically loaded.
|
|
||||||
- First print much quicker, use of React.lazy() everywhere.
|
|
||||||
- Real i18n API.
|
|
||||||
- Actual documentation for build options.
|
|
||||||
|
|
||||||
Checkout [the migration guide](https://docs.keycloakify.dev/v5-to-v6)
|
|
||||||
|
|
||||||
## 5.8.0
|
|
||||||
|
|
||||||
- [React.lazy()](https://reactjs.org/docs/code-splitting.html#reactlazy) support 🎉. [#141](https://github.com/keycloakify/keycloakify/issues/141)
|
|
||||||
|
|
||||||
## 5.7.0
|
|
||||||
|
|
||||||
- Feat `logout-confirm.ftl`. [PR](https://github.com/keycloakify/keycloakify/pull/120)
|
|
||||||
|
|
||||||
## 5.6.4
|
|
||||||
|
|
||||||
Fix `login-verify-email.ftl` page. [Before](https://user-images.githubusercontent.com/6702424/177436014-0bad22c4-5bfb-45bb-8fc9-dad65143cd0c.png) - [After](https://user-images.githubusercontent.com/6702424/177435797-ec5d7db3-84cf-49cb-8efc-3427a81f744e.png)
|
|
||||||
|
|
||||||
## v5.6.0
|
|
||||||
|
|
||||||
Add support for `login-config-totp.ftl` page [#127](https://github.com/keycloakify/keycloakify/pull/127).
|
|
||||||
|
|
||||||
## v5.3.0
|
|
||||||
|
|
||||||
Rename `keycloak_theme_email` to `keycloak_email`.
|
|
||||||
If you already had a `keycloak_theme_email` you should rename it `keycloak_email`.
|
|
||||||
|
|
||||||
## v5.0.0
|
|
||||||
|
|
||||||
[Migration guide](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63)
|
|
||||||
New i18n system.
|
|
||||||
Import of terms and services have changed. [See example](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63).
|
|
||||||
|
|
||||||
## v4.10.0
|
|
||||||
|
|
||||||
Add `login-idp-link-email.ftl` page [See PR](https://github.com/keycloakify/keycloakify/pull/92).
|
|
||||||
|
|
||||||
## v4.8.0
|
|
||||||
|
|
||||||
[Email template customization.](#email-template-customization)
|
|
||||||
|
|
||||||
## v4.7.4
|
|
||||||
|
|
||||||
**M1 Mac** support (for testing locally with a dockerized Keycloak).
|
|
||||||
|
|
||||||
## v4.7.2
|
|
||||||
|
|
||||||
> WARNING: This is broken.
|
|
||||||
> Testing with local Keycloak container working with M1 Mac. Thanks to [@eduardosanzb](https://github.com/keycloakify/keycloakify/issues/43#issuecomment-975699658).
|
|
||||||
> Be aware: When running M1s you are testing with Keycloak v15 else the local container spun will be a Keycloak v16.1.0.
|
|
||||||
|
|
||||||
## v4.7.0
|
|
||||||
|
|
||||||
Register with user profile enabled: Out of the box `options` validator support.
|
|
||||||
[Example](https://user-images.githubusercontent.com/6702424/158911163-81e6bbe8-feb0-4dc8-abff-de199d7a678e.mov)
|
|
||||||
|
|
||||||
## v4.6.0
|
|
||||||
|
|
||||||
`tss-react` and `powerhooks` are no longer peer dependencies of `keycloakify`.
|
|
||||||
After updating Keycloakify you can remove `tss-react` and `powerhooks` from your dependencies if you don't use them explicitly.
|
|
||||||
|
|
||||||
## v4.5.3
|
|
||||||
|
|
||||||
There is a new recommended way to setup highly customized theme. See [here](https://github.com/garronej/keycloakify-demo-app/blob/look_and_feel/src/KcApp/KcApp.tsx).
|
|
||||||
Unlike with [the previous recommended method](https://github.com/garronej/keycloakify-demo-app/blob/a51660578bea15fb3e506b8a2b78e1056c6d68bb/src/KcApp/KcApp.tsx),
|
|
||||||
with this new method your theme wont break on minor Keycloakify update.
|
|
||||||
|
|
||||||
## v4.3.0
|
|
||||||
|
|
||||||
Feature [`login-update-password.ftl`](https://user-images.githubusercontent.com/6702424/147517600-6191cf72-93dd-437b-a35c-47180142063e.png).
|
|
||||||
Every time a page is added it's a breaking change for non CSS-only theme.
|
|
||||||
Change [this](https://github.com/garronej/keycloakify-demo-app/blob/df664c13c77ce3c53ac7df0622d94d04e76d3f9f/src/KcApp/KcApp.tsx#L17) and [this](https://github.com/garronej/keycloakify-demo-app/blob/df664c13c77ce3c53ac7df0622d94d04e76d3f9f/src/KcApp/KcApp.tsx#L37) to update.
|
|
||||||
|
|
||||||
## v4
|
|
||||||
|
|
||||||
- Out of the box [frontend form validation](#user-profile-and-frontend-form-validation) 🥳
|
|
||||||
- Improvements (and breaking changes in `import { useKcMessage } from "keycloakify"`.
|
|
||||||
|
|
||||||
## v3
|
|
||||||
|
|
||||||
No breaking changes except that `@emotion/react`, [`tss-react`](https://www.npmjs.com/package/tss-react) and [`powerhooks`](https://www.npmjs.com/package/powerhooks) are now `peerDependencies` instead of being just dependencies.
|
|
||||||
It's important to avoid problem when using `keycloakify` alongside [`mui`](https://mui.com) and
|
|
||||||
[when passing params from the app to the login page](https://github.com/keycloakify/keycloakify#implement-context-persistence-optional).
|
|
||||||
|
|
||||||
## v2.5
|
|
||||||
|
|
||||||
- Feature [Use advanced message](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/i18n/useKcMessage.tsx#L53-L66)
|
|
||||||
and [`messagesPerFields`](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/getKcContext/KcContextBase.ts#L70-L75) (implementation [here](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/bin/build-keycloak-theme/generateFtl/common.ftl#L130-L189))
|
|
||||||
- Test container now uses Keycloak version `15.0.2`.
|
|
||||||
|
|
||||||
## v2
|
|
||||||
|
|
||||||
- It's now possible to implement custom `.ftl` pages.
|
|
||||||
- Support for Keycloak plugins that introduce non standard ftl values.
|
|
||||||
(Like for example [this plugin](https://github.com/micedre/keycloak-mail-whitelisting) that define `authorizedMailDomains` in `register.ftl`).
|
|
||||||
|
|||||||
37
bundle.js
Normal file
37
bundle.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.keycloak_react_theming = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
|
||||||
|
"use strict";
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
exports.myObject = exports.myFunction = void 0;
|
||||||
|
var myFunction_1 = require("./myFunction");
|
||||||
|
Object.defineProperty(exports, "myFunction", { enumerable: true, get: function () { return myFunction_1.myFunction; } });
|
||||||
|
var myObject_1 = require("./myObject");
|
||||||
|
Object.defineProperty(exports, "myObject", { enumerable: true, get: function () { return myObject_1.myObject; } });
|
||||||
|
|
||||||
|
},{"./myFunction":2,"./myObject":3}],2:[function(require,module,exports){
|
||||||
|
"use strict";
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
exports.myFunction = void 0;
|
||||||
|
function myFunction() {
|
||||||
|
return Promise.resolve(["a", "b", "c"]);
|
||||||
|
}
|
||||||
|
exports.myFunction = myFunction;
|
||||||
|
|
||||||
|
},{}],3:[function(require,module,exports){
|
||||||
|
"use strict";
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
exports.myObject = void 0;
|
||||||
|
var toUpperCase_1 = require("./tools/toUpperCase");
|
||||||
|
exports.myObject = { "p": toUpperCase_1.toUpperCase("foo") };
|
||||||
|
|
||||||
|
},{"./tools/toUpperCase":4}],4:[function(require,module,exports){
|
||||||
|
"use strict";
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
exports.toUpperCase = void 0;
|
||||||
|
function toUpperCase(str) {
|
||||||
|
return str.toUpperCase();
|
||||||
|
}
|
||||||
|
exports.toUpperCase = toUpperCase;
|
||||||
|
|
||||||
|
},{}]},{},[1])(1)
|
||||||
|
});
|
||||||
|
//# sourceMappingURL=bundle.js.map
|
||||||
1
bundle.js.map
Normal file
1
bundle.js.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sources":["node_modules/browser-pack/_prelude.js","index.js","myFunction.js","myObject.js","tools/toUpperCase.js"],"names":[],"mappings":"AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACPA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACPA;AACA;AACA;AACA;AACA;AACA;;ACLA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"generated.js","sourceRoot":"","sourcesContent":["(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c=\"function\"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error(\"Cannot find module '\"+i+\"'\");throw a.code=\"MODULE_NOT_FOUND\",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u=\"function\"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.myObject = exports.myFunction = void 0;\nvar myFunction_1 = require(\"./myFunction\");\nObject.defineProperty(exports, \"myFunction\", { enumerable: true, get: function () { return myFunction_1.myFunction; } });\nvar myObject_1 = require(\"./myObject\");\nObject.defineProperty(exports, \"myObject\", { enumerable: true, get: function () { return myObject_1.myObject; } });\n//# sourceMappingURL=index.js.map","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.myFunction = void 0;\nfunction myFunction() {\n return Promise.resolve([\"a\", \"b\", \"c\"]);\n}\nexports.myFunction = myFunction;\n//# sourceMappingURL=myFunction.js.map","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.myObject = void 0;\nvar toUpperCase_1 = require(\"./tools/toUpperCase\");\nexports.myObject = { \"p\": toUpperCase_1.toUpperCase(\"foo\") };\n//# sourceMappingURL=myObject.js.map","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.toUpperCase = void 0;\nfunction toUpperCase(str) {\n return str.toUpperCase();\n}\nexports.toUpperCase = toUpperCase;\n//# sourceMappingURL=toUpperCase.js.map"]}
|
||||||
1
bundle.min.js
vendored
Normal file
1
bundle.min.js
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).keycloak_react_theming=e()}}((function(){return function e(t,n,o){function r(u,f){if(!n[u]){if(!t[u]){var c="function"==typeof require&&require;if(!f&&c)return c(u,!0);if(i)return i(u,!0);var d=new Error("Cannot find module '"+u+"'");throw d.code="MODULE_NOT_FOUND",d}var p=n[u]={exports:{}};t[u][0].call(p.exports,(function(e){return r(t[u][1][e]||e)}),p,p.exports,e,t,n,o)}return n[u].exports}for(var i="function"==typeof require&&require,u=0;u<o.length;u++)r(o[u]);return r}({1:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.myObject=n.myFunction=void 0;var o=e("./myFunction");Object.defineProperty(n,"myFunction",{enumerable:!0,get:function(){return o.myFunction}});var r=e("./myObject");Object.defineProperty(n,"myObject",{enumerable:!0,get:function(){return r.myObject}})},{"./myFunction":2,"./myObject":3}],2:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.myFunction=void 0,n.myFunction=function(){return Promise.resolve(["a","b","c"])}},{}],3:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.myObject=void 0;var o=e("./tools/toUpperCase");n.myObject={p:o.toUpperCase("foo")}},{"./tools/toUpperCase":4}],4:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.toUpperCase=void 0,n.toUpperCase=function(e){return e.toUpperCase()}},{}]},{},[1])(1)}));
|
||||||
2
index.d.ts
vendored
Normal file
2
index.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export { myFunction } from "./myFunction";
|
||||||
|
export { myObject } from "./myObject";
|
||||||
8
index.js
Normal file
8
index.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
"use strict";
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
exports.myObject = exports.myFunction = void 0;
|
||||||
|
var myFunction_1 = require("./myFunction");
|
||||||
|
Object.defineProperty(exports, "myFunction", { enumerable: true, get: function () { return myFunction_1.myFunction; } });
|
||||||
|
var myObject_1 = require("./myObject");
|
||||||
|
Object.defineProperty(exports, "myObject", { enumerable: true, get: function () { return myObject_1.myObject; } });
|
||||||
|
//# sourceMappingURL=index.js.map
|
||||||
1
index.js.map
Normal file
1
index.js.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":";;;AAAA,2CAA0C;AAAjC,wGAAA,UAAU,OAAA;AACnB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA"}
|
||||||
@ -1,73 +0,0 @@
|
|||||||
{
|
|
||||||
"allOf": [
|
|
||||||
{
|
|
||||||
"$ref": "https://json.schemastore.org/package.json"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"$ref": "keycloakifyPackageJsonSchema"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"$ref": "#/definitions/keycloakifyPackageJsonSchema",
|
|
||||||
"definitions": {
|
|
||||||
"keycloakifyPackageJsonSchema": {
|
|
||||||
"type": "object",
|
|
||||||
"properties": {
|
|
||||||
"name": {
|
|
||||||
"type": "string"
|
|
||||||
},
|
|
||||||
"version": {
|
|
||||||
"type": "string"
|
|
||||||
},
|
|
||||||
"homepage": {
|
|
||||||
"type": "string"
|
|
||||||
},
|
|
||||||
"keycloakify": {
|
|
||||||
"type": "object",
|
|
||||||
"properties": {
|
|
||||||
"extraPages": {
|
|
||||||
"type": "array",
|
|
||||||
"items": {
|
|
||||||
"type": "string"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"extraThemeProperties": {
|
|
||||||
"type": "array",
|
|
||||||
"items": {
|
|
||||||
"type": "string"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"areAppAndKeycloakServerSharingSameDomain": {
|
|
||||||
"type": "boolean"
|
|
||||||
},
|
|
||||||
"artifactId": {
|
|
||||||
"type": "string"
|
|
||||||
},
|
|
||||||
"groupId": {
|
|
||||||
"type": "string"
|
|
||||||
},
|
|
||||||
"bundler": {
|
|
||||||
"type": "string",
|
|
||||||
"enum": ["mvn", "keycloakify", "none"]
|
|
||||||
},
|
|
||||||
"keycloakVersionDefaultAssets": {
|
|
||||||
"type": "string"
|
|
||||||
},
|
|
||||||
"reactAppBuildDirPath": {
|
|
||||||
"type": "string"
|
|
||||||
},
|
|
||||||
"keycloakifyBuildDirPath": {
|
|
||||||
"type": "string"
|
|
||||||
},
|
|
||||||
"themeName": {
|
|
||||||
"type": "string"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"additionalProperties": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"required": ["name", "version"],
|
|
||||||
"additionalProperties": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"$schema": "http://json-schema.org/draft-07/schema#"
|
|
||||||
}
|
|
||||||
1
myFunction.d.ts
vendored
Normal file
1
myFunction.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
export declare function myFunction(): Promise<string[]>;
|
||||||
8
myFunction.js
Normal file
8
myFunction.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
"use strict";
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
exports.myFunction = void 0;
|
||||||
|
function myFunction() {
|
||||||
|
return Promise.resolve(["a", "b", "c"]);
|
||||||
|
}
|
||||||
|
exports.myFunction = myFunction;
|
||||||
|
//# sourceMappingURL=myFunction.js.map
|
||||||
1
myFunction.js.map
Normal file
1
myFunction.js.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"file":"myFunction.js","sourceRoot":"","sources":["src/myFunction.ts"],"names":[],"mappings":";;;AAAA,SAAgB,UAAU;IACtB,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AAC5C,CAAC;AAFD,gCAEC"}
|
||||||
3
myObject.d.ts
vendored
Normal file
3
myObject.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export declare const myObject: {
|
||||||
|
p: string;
|
||||||
|
};
|
||||||
6
myObject.js
Normal file
6
myObject.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
"use strict";
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
exports.myObject = void 0;
|
||||||
|
var toUpperCase_1 = require("./tools/toUpperCase");
|
||||||
|
exports.myObject = { "p": toUpperCase_1.toUpperCase("foo") };
|
||||||
|
//# sourceMappingURL=myObject.js.map
|
||||||
1
myObject.js.map
Normal file
1
myObject.js.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"file":"myObject.js","sourceRoot":"","sources":["src/myObject.ts"],"names":[],"mappings":";;;AAAA,mDAAkD;AAErC,QAAA,QAAQ,GAAG,EAAE,GAAG,EAAE,yBAAW,CAAC,KAAK,CAAC,EAAE,CAAC"}
|
||||||
13324
package-lock.json
generated
Normal file
13324
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
169
package.json
Normal file → Executable file
169
package.json
Normal file → Executable file
@ -1,41 +1,17 @@
|
|||||||
{
|
{
|
||||||
"name": "keycloakify",
|
"name": "keycloak-react-theming",
|
||||||
"version": "8.2.1",
|
"version": "0.0.1",
|
||||||
"description": "Create Keycloak themes using React",
|
"description": "Provides a way to customise Keycloak login and register pages with React",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git://github.com/keycloakify/keycloakify.git"
|
"url": "git://github.com/garronej/keycloak-react-theming.git"
|
||||||
},
|
|
||||||
"main": "dist/index.js",
|
|
||||||
"types": "dist/index.d.ts",
|
|
||||||
"scripts": {
|
|
||||||
"prepare": "yarn generate-i18n-messages",
|
|
||||||
"build": "rimraf dist/ && tsc -p src/bin && tsc -p src && tsc-alias -p src/tsconfig.json && yarn grant-exec-perms && yarn copy-files dist/ && cp -r src dist/",
|
|
||||||
"generate:json-schema": "ts-node scripts/generate-json-schema.ts",
|
|
||||||
"grant-exec-perms": "node dist/bin/tools/grant-exec-perms.js",
|
|
||||||
"copy-files": "copyfiles -u 1 src/**/*.ftl",
|
|
||||||
"test": "yarn test:types && vitest run",
|
|
||||||
"test:keycloakify-starter": "ts-node scripts/test-keycloakify-starter",
|
|
||||||
"test:types": "tsc -p test/tsconfig.json --noEmit",
|
|
||||||
"_format": "prettier '**/*.{ts,tsx,json,md}'",
|
|
||||||
"format": "yarn _format --write",
|
|
||||||
"format:check": "yarn _format --list-different",
|
|
||||||
"generate-i18n-messages": "ts-node --skipProject scripts/generate-i18n-messages.ts",
|
|
||||||
"link-in-app": "ts-node --skipProject scripts/link-in-app.ts",
|
|
||||||
"link-in-starter": "yarn link-in-app keycloakify-starter",
|
|
||||||
"watch-in-starter": "yarn build && yarn link-in-starter && (concurrently \"tsc -p src -w\" \"tsc-alias -p src/tsconfig.json\" \"tsc -p src/bin -w\")",
|
|
||||||
"copy-keycloak-resources-to-storybook-static": "PUBLIC_DIR_PATH=.storybook/static node dist/bin/copy-keycloak-resources-to-public.js",
|
|
||||||
"storybook": "yarn build && yarn copy-keycloak-resources-to-storybook-static && start-storybook -p 6006",
|
|
||||||
"build-storybook": "yarn build && yarn copy-keycloak-resources-to-storybook-static && build-storybook"
|
|
||||||
},
|
|
||||||
"bin": {
|
|
||||||
"copy-keycloak-resources-to-public": "dist/bin/copy-keycloak-resources-to-public.js",
|
|
||||||
"download-builtin-keycloak-theme": "dist/bin/download-builtin-keycloak-theme.js",
|
|
||||||
"eject-keycloak-page": "dist/bin/eject-keycloak-page.js",
|
|
||||||
"initialize-email-theme": "dist/bin/initialize-email-theme.js",
|
|
||||||
"keycloakify": "dist/bin/keycloakify/index.js"
|
|
||||||
},
|
},
|
||||||
|
"main": "index.js",
|
||||||
|
"types": "index.d.ts",
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
|
"*.{ts,tsx}": [
|
||||||
|
"eslint --fix"
|
||||||
|
],
|
||||||
"*.{ts,tsx,json,md}": [
|
"*.{ts,tsx,json,md}": [
|
||||||
"prettier --write"
|
"prettier --write"
|
||||||
]
|
]
|
||||||
@ -48,83 +24,58 @@
|
|||||||
"author": "u/garronej",
|
"author": "u/garronej",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"files": [
|
"files": [
|
||||||
"src/",
|
"src/index.ts",
|
||||||
"dist/",
|
"src/myFunction.ts",
|
||||||
"!dist/tsconfig.tsbuildinfo",
|
"src/myObject.ts",
|
||||||
"!dist/bin/tsconfig.tsbuildinfo"
|
"src/tools/getProjectRoot.ts",
|
||||||
|
"src/tools/toUpperCase.ts",
|
||||||
|
"bundle.js",
|
||||||
|
"bundle.js.map",
|
||||||
|
"bundle.min.js",
|
||||||
|
"index.d.ts",
|
||||||
|
"index.js",
|
||||||
|
"index.js.map",
|
||||||
|
"myFunction.d.ts",
|
||||||
|
"myFunction.js",
|
||||||
|
"myFunction.js.map",
|
||||||
|
"myObject.d.ts",
|
||||||
|
"myObject.js",
|
||||||
|
"myObject.js.map",
|
||||||
|
"tools/getProjectRoot.d.ts",
|
||||||
|
"tools/getProjectRoot.js",
|
||||||
|
"tools/getProjectRoot.js.map",
|
||||||
|
"tools/toUpperCase.d.ts",
|
||||||
|
"tools/toUpperCase.js",
|
||||||
|
"tools/toUpperCase.js.map",
|
||||||
|
"zz_esm/index.d.ts",
|
||||||
|
"zz_esm/index.js",
|
||||||
|
"zz_esm/index.js.map",
|
||||||
|
"zz_esm/myFunction.d.ts",
|
||||||
|
"zz_esm/myFunction.js",
|
||||||
|
"zz_esm/myFunction.js.map",
|
||||||
|
"zz_esm/myObject.d.ts",
|
||||||
|
"zz_esm/myObject.js",
|
||||||
|
"zz_esm/myObject.js.map",
|
||||||
|
"zz_esm/tools/toUpperCase.d.ts",
|
||||||
|
"zz_esm/tools/toUpperCase.js",
|
||||||
|
"zz_esm/tools/toUpperCase.js.map",
|
||||||
|
"zz_esm/tsconfig.esm.tsbuildinfo"
|
||||||
],
|
],
|
||||||
"keywords": [
|
"keywords": [],
|
||||||
"bluehats",
|
"homepage": "https://github.com/garronej/keycloak-react-theming",
|
||||||
"keycloak",
|
|
||||||
"react",
|
|
||||||
"theme",
|
|
||||||
"FreeMarker",
|
|
||||||
"ftl",
|
|
||||||
"login",
|
|
||||||
"register"
|
|
||||||
],
|
|
||||||
"homepage": "https://www.keycloakify.dev",
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.0.0",
|
"@types/node": "^10.0.0",
|
||||||
"@emotion/react": "^11.10.6",
|
"@typescript-eslint/eslint-plugin": "^4.15.1",
|
||||||
"@storybook/addon-a11y": "^6.5.16",
|
"@typescript-eslint/parser": "^4.15.1",
|
||||||
"@storybook/addon-actions": "^6.5.13",
|
"denoify": "^0.6.4",
|
||||||
"@storybook/addon-essentials": "^6.5.13",
|
"eslint": "^7.20.0",
|
||||||
"@storybook/addon-interactions": "^6.5.13",
|
"eslint-config-prettier": "^7.2.0",
|
||||||
"@storybook/addon-links": "^6.5.13",
|
"evt": "^1.8.11",
|
||||||
"@storybook/builder-webpack5": "^6.5.13",
|
"husky": "^4.3.0",
|
||||||
"@storybook/manager-webpack5": "^6.5.13",
|
"lint-staged": "^10.5.4",
|
||||||
"@storybook/react": "^6.5.13",
|
"prettier": "^2.2.1",
|
||||||
"@storybook/testing-library": "^0.0.13",
|
"simplifyify": "^8.0.3",
|
||||||
"@types/babel__generator": "^7.6.4",
|
"terser": "^5.3.8",
|
||||||
"@types/make-fetch-happen": "^10.0.1",
|
"typescript": "^4.1.5"
|
||||||
"@types/minimist": "^1.2.2",
|
|
||||||
"@types/node": "^18.15.3",
|
|
||||||
"@types/react": "^18.0.35",
|
|
||||||
"@types/react-dom": "^18.0.11",
|
|
||||||
"@types/yauzl": "^2.10.0",
|
|
||||||
"@types/yazl": "^2.4.2",
|
|
||||||
"concurrently": "^8.0.1",
|
|
||||||
"copyfiles": "^2.4.1",
|
|
||||||
"eslint-plugin-storybook": "^0.6.7",
|
|
||||||
"husky": "^4.3.8",
|
|
||||||
"lint-staged": "^11.0.0",
|
|
||||||
"powerhooks": "^0.26.7",
|
|
||||||
"prettier": "^2.3.0",
|
|
||||||
"properties-parser": "^0.3.1",
|
|
||||||
"react": "^18.2.0",
|
|
||||||
"react-dom": "^18.2.0",
|
|
||||||
"rimraf": "^3.0.2",
|
|
||||||
"scripting-tools": "^0.19.13",
|
|
||||||
"storybook-dark-mode": "^1.1.2",
|
|
||||||
"ts-node": "^10.9.1",
|
|
||||||
"tsc-alias": "^1.8.3",
|
|
||||||
"tss-react": "^4.8.2",
|
|
||||||
"typescript": "^4.9.1-beta",
|
|
||||||
"vitest": "^0.29.8",
|
|
||||||
"zod-to-json-schema": "^3.20.4"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/generator": "^7.22.9",
|
|
||||||
"@babel/parser": "^7.22.7",
|
|
||||||
"@babel/types": "^7.22.5",
|
|
||||||
"@octokit/rest": "^18.12.0",
|
|
||||||
"cheerio": "^1.0.0-rc.5",
|
|
||||||
"cli-select": "^1.1.2",
|
|
||||||
"evt": "^2.4.18",
|
|
||||||
"make-fetch-happen": "^11.0.3",
|
|
||||||
"minimal-polyfills": "^2.2.2",
|
|
||||||
"minimist": "^1.2.6",
|
|
||||||
"path-browserify": "^1.0.1",
|
|
||||||
"react-markdown": "^5.0.3",
|
|
||||||
"recast": "^0.23.3",
|
|
||||||
"rfc4648": "^1.5.2",
|
|
||||||
"tsafe": "^1.6.0",
|
|
||||||
"yauzl": "^2.10.0",
|
|
||||||
"yazl": "^2.5.1",
|
|
||||||
"zod": "^3.17.10"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,27 +0,0 @@
|
|||||||
{
|
|
||||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
|
||||||
"baseBranches": ["main", "landingpage"],
|
|
||||||
"extends": ["config:base"],
|
|
||||||
"dependencyDashboard": false,
|
|
||||||
"bumpVersion": "patch",
|
|
||||||
"rangeStrategy": "bump",
|
|
||||||
"ignorePaths": [".github/**"],
|
|
||||||
"branchPrefix": "renovate_",
|
|
||||||
"vulnerabilityAlerts": {
|
|
||||||
"enabled": false
|
|
||||||
},
|
|
||||||
"packageRules": [
|
|
||||||
{
|
|
||||||
"packagePatterns": ["*"],
|
|
||||||
"excludePackagePatterns": ["tsafe", "evt"],
|
|
||||||
"enabled": false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"packagePatterns": ["tsafe", "evt"],
|
|
||||||
"matchUpdateTypes": ["minor", "patch"],
|
|
||||||
"automerge": true,
|
|
||||||
"automergeType": "branch",
|
|
||||||
"groupName": "garronej_modules_update"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,125 +0,0 @@
|
|||||||
import "minimal-polyfills/Object.fromEntries";
|
|
||||||
import * as fs from "fs";
|
|
||||||
import { join as pathJoin, relative as pathRelative, dirname as pathDirname, sep as pathSep } from "path";
|
|
||||||
import { crawl } from "../src/bin/tools/crawl";
|
|
||||||
import { downloadBuiltinKeycloakTheme } from "../src/bin/download-builtin-keycloak-theme";
|
|
||||||
import { getProjectRoot } from "../src/bin/tools/getProjectRoot";
|
|
||||||
import { getLogger } from "../src/bin/tools/logger";
|
|
||||||
|
|
||||||
// NOTE: To run without argument when we want to generate src/i18n/generated_kcMessages files,
|
|
||||||
// update the version array for generating for newer version.
|
|
||||||
|
|
||||||
//@ts-ignore
|
|
||||||
const propertiesParser = require("properties-parser");
|
|
||||||
|
|
||||||
const isSilent = true;
|
|
||||||
|
|
||||||
const logger = getLogger({ isSilent });
|
|
||||||
|
|
||||||
async function main() {
|
|
||||||
const keycloakVersion = "21.0.1";
|
|
||||||
|
|
||||||
const tmpDirPath = pathJoin(getProjectRoot(), "tmp_xImOef9dOd44");
|
|
||||||
|
|
||||||
fs.rmSync(tmpDirPath, { "recursive": true, "force": true });
|
|
||||||
|
|
||||||
await downloadBuiltinKeycloakTheme({
|
|
||||||
"projectDirPath": getProjectRoot(),
|
|
||||||
keycloakVersion,
|
|
||||||
"destDirPath": tmpDirPath
|
|
||||||
});
|
|
||||||
|
|
||||||
type Dictionary = { [idiomId: string]: string };
|
|
||||||
|
|
||||||
const record: { [typeOfPage: string]: { [language: string]: Dictionary } } = {};
|
|
||||||
|
|
||||||
{
|
|
||||||
const baseThemeDirPath = pathJoin(tmpDirPath, "base");
|
|
||||||
const re = new RegExp(`^([^\\${pathSep}]+)\\${pathSep}messages\\${pathSep}messages_([^.]+).properties$`);
|
|
||||||
|
|
||||||
crawl({
|
|
||||||
"dirPath": baseThemeDirPath,
|
|
||||||
"returnedPathsType": "relative to dirPath"
|
|
||||||
}).forEach(filePath => {
|
|
||||||
const match = filePath.match(re);
|
|
||||||
|
|
||||||
if (match === null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const [, typeOfPage, language] = match;
|
|
||||||
|
|
||||||
(record[typeOfPage] ??= {})[language.replace(/_/g, "-")] = Object.fromEntries(
|
|
||||||
Object.entries(propertiesParser.parse(fs.readFileSync(pathJoin(baseThemeDirPath, filePath)).toString("utf8"))).map(
|
|
||||||
([key, value]: any) => [key, value.replace(/''/g, "'")]
|
|
||||||
)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.rmSync(tmpDirPath, { recursive: true, force: true });
|
|
||||||
|
|
||||||
Object.keys(record).forEach(themeType => {
|
|
||||||
const recordForPageType = record[themeType];
|
|
||||||
|
|
||||||
if (themeType !== "login" && themeType !== "account") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const baseMessagesDirPath = pathJoin(getProjectRoot(), "src", themeType, "i18n", "baseMessages");
|
|
||||||
|
|
||||||
const languages = Object.keys(recordForPageType);
|
|
||||||
|
|
||||||
const generatedFileHeader = [
|
|
||||||
`//This code was automatically generated by running ${pathRelative(getProjectRoot(), __filename)}`,
|
|
||||||
"//PLEASE DO NOT EDIT MANUALLY",
|
|
||||||
""
|
|
||||||
].join("\n");
|
|
||||||
|
|
||||||
languages.forEach(language => {
|
|
||||||
const filePath = pathJoin(baseMessagesDirPath, `${language}.ts`);
|
|
||||||
|
|
||||||
fs.mkdirSync(pathDirname(filePath), { "recursive": true });
|
|
||||||
|
|
||||||
fs.writeFileSync(
|
|
||||||
filePath,
|
|
||||||
Buffer.from(
|
|
||||||
[
|
|
||||||
generatedFileHeader,
|
|
||||||
"/* spell-checker: disable */",
|
|
||||||
`const messages= ${JSON.stringify(recordForPageType[language], null, 2)};`,
|
|
||||||
"",
|
|
||||||
"export default messages;",
|
|
||||||
"/* spell-checker: enable */"
|
|
||||||
].join("\n"),
|
|
||||||
"utf8"
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
logger.log(`${filePath} wrote`);
|
|
||||||
});
|
|
||||||
|
|
||||||
fs.writeFileSync(
|
|
||||||
pathJoin(baseMessagesDirPath, "index.ts"),
|
|
||||||
Buffer.from(
|
|
||||||
[
|
|
||||||
generatedFileHeader,
|
|
||||||
"export async function getMessages(currentLanguageTag: string) {",
|
|
||||||
" const { default: messages } = await (() => {",
|
|
||||||
" switch (currentLanguageTag) {",
|
|
||||||
...languages.map(language => ` case "${language}": return import("./${language}");`),
|
|
||||||
' default: return { "default": {} };',
|
|
||||||
" }",
|
|
||||||
" })();",
|
|
||||||
" return messages;",
|
|
||||||
"}"
|
|
||||||
].join("\n"),
|
|
||||||
"utf8"
|
|
||||||
)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (require.main === module) {
|
|
||||||
main();
|
|
||||||
}
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import fs from "fs";
|
|
||||||
import path from "path";
|
|
||||||
import zodToJsonSchema from "zod-to-json-schema";
|
|
||||||
import { zParsedPackageJson } from "../src/bin/keycloakify/parsedPackageJson";
|
|
||||||
|
|
||||||
const jsonSchemaName = "keycloakifyPackageJsonSchema";
|
|
||||||
const jsonSchema = zodToJsonSchema(zParsedPackageJson, jsonSchemaName);
|
|
||||||
|
|
||||||
const baseProperties = {
|
|
||||||
// merges package.json schema with keycloakify properties
|
|
||||||
"allOf": [{ "$ref": "https://json.schemastore.org/package.json" }, { "$ref": jsonSchemaName }]
|
|
||||||
};
|
|
||||||
|
|
||||||
fs.writeFileSync(path.join(process.cwd(), "keycloakify-json-schema.json"), JSON.stringify({ ...baseProperties, ...jsonSchema }, null, 2));
|
|
||||||
@ -1,143 +0,0 @@
|
|||||||
import { execSync } from "child_process";
|
|
||||||
import { join as pathJoin, relative as pathRelative } from "path";
|
|
||||||
import { getProjectRoot } from "../src/bin/tools/getProjectRoot";
|
|
||||||
import * as fs from "fs";
|
|
||||||
|
|
||||||
const singletonDependencies: string[] = ["react", "@types/react"];
|
|
||||||
|
|
||||||
const rootDirPath = getProjectRoot();
|
|
||||||
|
|
||||||
//NOTE: This is only required because of: https://github.com/garronej/ts-ci/blob/c0e207b9677523d4ec97fe672ddd72ccbb3c1cc4/README.md?plain=1#L54-L58
|
|
||||||
fs.writeFileSync(
|
|
||||||
pathJoin(rootDirPath, "dist", "package.json"),
|
|
||||||
Buffer.from(
|
|
||||||
JSON.stringify(
|
|
||||||
(() => {
|
|
||||||
const packageJsonParsed = JSON.parse(fs.readFileSync(pathJoin(rootDirPath, "package.json")).toString("utf8"));
|
|
||||||
|
|
||||||
return {
|
|
||||||
...packageJsonParsed,
|
|
||||||
"main": packageJsonParsed["main"]?.replace(/^dist\//, ""),
|
|
||||||
"types": packageJsonParsed["types"]?.replace(/^dist\//, ""),
|
|
||||||
"module": packageJsonParsed["module"]?.replace(/^dist\//, ""),
|
|
||||||
"exports": !("exports" in packageJsonParsed)
|
|
||||||
? undefined
|
|
||||||
: Object.fromEntries(
|
|
||||||
Object.entries(packageJsonParsed["exports"]).map(([key, value]) => [
|
|
||||||
key,
|
|
||||||
(value as string).replace(/^\.\/dist\//, "./")
|
|
||||||
])
|
|
||||||
)
|
|
||||||
};
|
|
||||||
})(),
|
|
||||||
null,
|
|
||||||
2
|
|
||||||
),
|
|
||||||
"utf8"
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
fs.cpSync(pathJoin(rootDirPath, "src"), pathJoin(rootDirPath, "dist", "src"), { "recursive": true });
|
|
||||||
|
|
||||||
const commonThirdPartyDeps = (() => {
|
|
||||||
// For example [ "@emotion" ] it's more convenient than
|
|
||||||
// having to list every sub emotion packages (@emotion/css @emotion/utils ...)
|
|
||||||
// in singletonDependencies
|
|
||||||
const namespaceSingletonDependencies: string[] = [];
|
|
||||||
|
|
||||||
return [
|
|
||||||
...namespaceSingletonDependencies
|
|
||||||
.map(namespaceModuleName =>
|
|
||||||
fs
|
|
||||||
.readdirSync(pathJoin(rootDirPath, "node_modules", namespaceModuleName))
|
|
||||||
.map(submoduleName => `${namespaceModuleName}/${submoduleName}`)
|
|
||||||
)
|
|
||||||
.reduce((prev, curr) => [...prev, ...curr], []),
|
|
||||||
...singletonDependencies
|
|
||||||
];
|
|
||||||
})();
|
|
||||||
|
|
||||||
const yarnGlobalDirPath = pathJoin(rootDirPath, ".yarn_home");
|
|
||||||
|
|
||||||
fs.rmSync(yarnGlobalDirPath, { "recursive": true, "force": true });
|
|
||||||
fs.mkdirSync(yarnGlobalDirPath);
|
|
||||||
|
|
||||||
const execYarnLink = (params: { targetModuleName?: string; cwd: string }) => {
|
|
||||||
const { targetModuleName, cwd } = params;
|
|
||||||
|
|
||||||
const cmd = ["yarn", "link", ...(targetModuleName !== undefined ? [targetModuleName] : ["--no-bin-links"])].join(" ");
|
|
||||||
|
|
||||||
console.log(`$ cd ${pathRelative(rootDirPath, cwd) || "."} && ${cmd}`);
|
|
||||||
|
|
||||||
execSync(cmd, {
|
|
||||||
cwd,
|
|
||||||
"env": {
|
|
||||||
...process.env,
|
|
||||||
"HOME": yarnGlobalDirPath
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const testAppPaths = (() => {
|
|
||||||
const [, , ...testAppNames] = process.argv;
|
|
||||||
|
|
||||||
return testAppNames
|
|
||||||
.map(testAppName => {
|
|
||||||
const testAppPath = pathJoin(rootDirPath, "..", testAppName);
|
|
||||||
|
|
||||||
if (fs.existsSync(testAppPath)) {
|
|
||||||
return testAppPath;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.warn(`Skipping ${testAppName} since it cant be found here: ${testAppPath}`);
|
|
||||||
|
|
||||||
return undefined;
|
|
||||||
})
|
|
||||||
.filter((path): path is string => path !== undefined);
|
|
||||||
})();
|
|
||||||
|
|
||||||
if (testAppPaths.length === 0) {
|
|
||||||
console.error("No test app to link into!");
|
|
||||||
process.exit(-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
testAppPaths.forEach(testAppPath => execSync("yarn install", { "cwd": testAppPath }));
|
|
||||||
|
|
||||||
console.log("=== Linking common dependencies ===");
|
|
||||||
|
|
||||||
const total = commonThirdPartyDeps.length;
|
|
||||||
let current = 0;
|
|
||||||
|
|
||||||
commonThirdPartyDeps.forEach(commonThirdPartyDep => {
|
|
||||||
current++;
|
|
||||||
|
|
||||||
console.log(`${current}/${total} ${commonThirdPartyDep}`);
|
|
||||||
|
|
||||||
const localInstallPath = pathJoin(
|
|
||||||
...[rootDirPath, "node_modules", ...(commonThirdPartyDep.startsWith("@") ? commonThirdPartyDep.split("/") : [commonThirdPartyDep])]
|
|
||||||
);
|
|
||||||
|
|
||||||
execYarnLink({ "cwd": localInstallPath });
|
|
||||||
});
|
|
||||||
|
|
||||||
commonThirdPartyDeps.forEach(commonThirdPartyDep =>
|
|
||||||
testAppPaths.forEach(testAppPath =>
|
|
||||||
execYarnLink({
|
|
||||||
"cwd": testAppPath,
|
|
||||||
"targetModuleName": commonThirdPartyDep
|
|
||||||
})
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
console.log("=== Linking in house dependencies ===");
|
|
||||||
|
|
||||||
execYarnLink({ "cwd": pathJoin(rootDirPath, "dist") });
|
|
||||||
|
|
||||||
testAppPaths.forEach(testAppPath =>
|
|
||||||
execYarnLink({
|
|
||||||
"cwd": testAppPath,
|
|
||||||
"targetModuleName": JSON.parse(fs.readFileSync(pathJoin(rootDirPath, "package.json")).toString("utf8"))["name"]
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
export {};
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
import { execSync } from "child_process";
|
|
||||||
import { existsSync, readFileSync, rmSync, writeFileSync } from "fs";
|
|
||||||
import path from "path";
|
|
||||||
|
|
||||||
const testDir = "keycloakify_starter_test";
|
|
||||||
|
|
||||||
if (existsSync(path.join(process.cwd(), testDir))) {
|
|
||||||
rmSync(path.join(process.cwd(), testDir), { recursive: true });
|
|
||||||
}
|
|
||||||
// Build and link package
|
|
||||||
execSync("yarn build");
|
|
||||||
const pkgJSON = JSON.parse(readFileSync(path.join(process.cwd(), "package.json")).toString("utf8"));
|
|
||||||
pkgJSON.main = "./index.js";
|
|
||||||
pkgJSON.types = "./index.d.ts";
|
|
||||||
pkgJSON.scripts.prepare = undefined;
|
|
||||||
writeFileSync(path.join(process.cwd(), "dist", "package.json"), JSON.stringify(pkgJSON));
|
|
||||||
// Wrapped in a try/catch because unlink errors if the package isn't linked
|
|
||||||
try {
|
|
||||||
execSync("yarn unlink");
|
|
||||||
} catch {}
|
|
||||||
execSync("yarn link", { "cwd": path.join(process.cwd(), "dist") });
|
|
||||||
|
|
||||||
// Clone latest keycloakify-starter and link to keycloakify output
|
|
||||||
execSync(`git clone https://github.com/keycloakify/keycloakify-starter.git ${testDir}`);
|
|
||||||
execSync("yarn install", { "cwd": path.join(process.cwd(), testDir) });
|
|
||||||
execSync("yarn link keycloakify", { "cwd": path.join(process.cwd(), testDir) });
|
|
||||||
|
|
||||||
//Ensure keycloak theme can be built
|
|
||||||
execSync("yarn build-keycloak-theme", { "cwd": path.join(process.cwd(), testDir) });
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import { lazy, Suspense } from "react";
|
|
||||||
import type { PageProps } from "keycloakify/account/pages/PageProps";
|
|
||||||
import type { I18n } from "keycloakify/account/i18n";
|
|
||||||
import type { KcContext } from "./kcContext";
|
|
||||||
import { assert, type Equals } from "tsafe/assert";
|
|
||||||
|
|
||||||
const Password = lazy(() => import("keycloakify/account/pages/Password"));
|
|
||||||
const Account = lazy(() => import("keycloakify/account/pages/Account"));
|
|
||||||
|
|
||||||
export default function Fallback(props: PageProps<KcContext, I18n>) {
|
|
||||||
const { kcContext, ...rest } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Suspense>
|
|
||||||
{(() => {
|
|
||||||
switch (kcContext.pageId) {
|
|
||||||
case "password.ftl":
|
|
||||||
return <Password kcContext={kcContext} {...rest} />;
|
|
||||||
case "account.ftl":
|
|
||||||
return <Account kcContext={kcContext} {...rest} />;
|
|
||||||
}
|
|
||||||
assert<Equals<typeof kcContext, never>>(false);
|
|
||||||
})()}
|
|
||||||
</Suspense>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,133 +0,0 @@
|
|||||||
import { clsx } from "keycloakify/tools/clsx";
|
|
||||||
import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
|
|
||||||
import { type TemplateProps } from "keycloakify/account/TemplateProps";
|
|
||||||
import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
|
|
||||||
import type { KcContext } from "./kcContext";
|
|
||||||
import type { I18n } from "./i18n";
|
|
||||||
import { assert } from "keycloakify/tools/assert";
|
|
||||||
|
|
||||||
export default function Template(props: TemplateProps<KcContext, I18n>) {
|
|
||||||
const { kcContext, i18n, doUseDefaultCss, active, classes, children } = props;
|
|
||||||
|
|
||||||
const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
|
|
||||||
|
|
||||||
const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
|
|
||||||
|
|
||||||
const { locale, url, features, realm, message, referrer } = kcContext;
|
|
||||||
|
|
||||||
const { isReady } = usePrepareTemplate({
|
|
||||||
"doFetchDefaultThemeResources": doUseDefaultCss,
|
|
||||||
"styles": [
|
|
||||||
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
|
|
||||||
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
|
|
||||||
`${url.resourcesPath}/css/account.css`
|
|
||||||
],
|
|
||||||
"htmlClassName": getClassName("kcHtmlClass"),
|
|
||||||
"bodyClassName": clsx("admin-console", "user", getClassName("kcBodyClass"))
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!isReady) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<header className="navbar navbar-default navbar-pf navbar-main header">
|
|
||||||
<nav className="navbar" role="navigation">
|
|
||||||
<div className="navbar-header">
|
|
||||||
<div className="container">
|
|
||||||
<h1 className="navbar-title">Keycloak</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="navbar-collapse navbar-collapse-1">
|
|
||||||
<div className="container">
|
|
||||||
<ul className="nav navbar-nav navbar-utility">
|
|
||||||
{realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
|
|
||||||
<li>
|
|
||||||
<div className="kc-dropdown" id="kc-locale-dropdown">
|
|
||||||
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
||||||
<a href="#" id="kc-current-locale-link">
|
|
||||||
{labelBySupportedLanguageTag[currentLanguageTag]}
|
|
||||||
</a>
|
|
||||||
<ul>
|
|
||||||
{locale.supported.map(({ languageTag }) => (
|
|
||||||
<li key={languageTag} className="kc-dropdown-item">
|
|
||||||
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
||||||
<a href="#" onClick={() => changeLocale(languageTag)}>
|
|
||||||
{labelBySupportedLanguageTag[languageTag]}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
{referrer?.url && (
|
|
||||||
<li>
|
|
||||||
<a href={referrer.url} id="referrer">
|
|
||||||
{msg("backTo", referrer.name)}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
<li>
|
|
||||||
<a href={url.getLogoutUrl()}>{msg("doSignOut")}</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div className="container">
|
|
||||||
<div className="bs-sidebar col-sm-3">
|
|
||||||
<ul>
|
|
||||||
<li className={clsx(active === "account" && "active")}>
|
|
||||||
<a href={url.accountUrl}>{msg("account")}</a>
|
|
||||||
</li>
|
|
||||||
{features.passwordUpdateSupported && (
|
|
||||||
<li className={clsx(active === "password" && "active")}>
|
|
||||||
<a href={url.passwordUrl}>{msg("password")}</a>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
<li className={clsx(active === "totp" && "active")}>
|
|
||||||
<a href={url.totpUrl}>{msg("authenticator")}</a>
|
|
||||||
</li>
|
|
||||||
{features.identityFederation && (
|
|
||||||
<li className={clsx(active === "social" && "active")}>
|
|
||||||
<a href={url.socialUrl}>{msg("federatedIdentity")}</a>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
<li className={clsx(active === "sessions" && "active")}>
|
|
||||||
<a href={url.sessionsUrl}>{msg("sessions")}</a>
|
|
||||||
</li>
|
|
||||||
<li className={clsx(active === "applications" && "active")}>
|
|
||||||
<a href={url.applicationsUrl}>{msg("applications")}</a>
|
|
||||||
</li>
|
|
||||||
{features.log && (
|
|
||||||
<li className={clsx(active === "log" && "active")}>
|
|
||||||
<a href={url.logUrl}>{msg("log")}</a>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
{realm.userManagedAccessAllowed && features.authorization && (
|
|
||||||
<li className={clsx(active === "authorization" && "active")}>
|
|
||||||
<a href={url.resourceUrl}>{msg("myResources")}</a>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-sm-9 content-area">
|
|
||||||
{message !== undefined && (
|
|
||||||
<div className={clsx("alert", `alert-${message.type}`)}>
|
|
||||||
{message.type === "success" && <span className="pficon pficon-ok"></span>}
|
|
||||||
{message.type === "error" && <span className="pficon pficon-error-circle-o"></span>}
|
|
||||||
<span className="kc-feedback-text">{message.summary}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import type { ReactNode } from "react";
|
|
||||||
import type { KcContext } from "./kcContext";
|
|
||||||
import type { I18n } from "./i18n";
|
|
||||||
|
|
||||||
export type TemplateProps<KcContext extends KcContext.Common, I18nExtended extends I18n> = {
|
|
||||||
kcContext: KcContext;
|
|
||||||
i18n: I18nExtended;
|
|
||||||
doUseDefaultCss: boolean;
|
|
||||||
active: string;
|
|
||||||
classes?: Partial<Record<ClassKey, string>>;
|
|
||||||
children: ReactNode;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type ClassKey = "kcHtmlClass" | "kcBodyClass" | "kcButtonClass" | "kcButtonPrimaryClass" | "kcButtonLargeClass" | "kcButtonDefaultClass";
|
|
||||||
@ -1,233 +0,0 @@
|
|||||||
import "minimal-polyfills/Object.fromEntries";
|
|
||||||
//NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
|
|
||||||
import { useEffect, useState, useRef } from "react";
|
|
||||||
import fallbackMessages from "./baseMessages/en";
|
|
||||||
import { getMessages } from "./baseMessages";
|
|
||||||
import { assert } from "tsafe/assert";
|
|
||||||
import type { KcContext } from "../kcContext/KcContext";
|
|
||||||
import { Markdown } from "keycloakify/tools/Markdown";
|
|
||||||
|
|
||||||
export const fallbackLanguageTag = "en";
|
|
||||||
|
|
||||||
export type KcContextLike = {
|
|
||||||
locale?: {
|
|
||||||
currentLanguageTag: string;
|
|
||||||
supported: { languageTag: string; url: string; label: string }[];
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
assert<KcContext extends KcContextLike ? true : false>();
|
|
||||||
|
|
||||||
export type MessageKey = keyof typeof fallbackMessages | keyof (typeof keycloakifyExtraMessages)[typeof fallbackLanguageTag];
|
|
||||||
|
|
||||||
export type GenericI18n<MessageKey extends string> = {
|
|
||||||
/**
|
|
||||||
* e.g: "en", "fr", "zh-CN"
|
|
||||||
*
|
|
||||||
* The current language
|
|
||||||
*/
|
|
||||||
currentLanguageTag: string;
|
|
||||||
/**
|
|
||||||
* To call when the user switch language.
|
|
||||||
* This will cause the page to be reloaded,
|
|
||||||
* on next load currentLanguageTag === newLanguageTag
|
|
||||||
*/
|
|
||||||
changeLocale: (newLanguageTag: string) => never;
|
|
||||||
/**
|
|
||||||
* e.g. "en" => "English", "fr" => "Français", ...
|
|
||||||
*
|
|
||||||
* Used to render a select that enable user to switch language.
|
|
||||||
* ex: https://user-images.githubusercontent.com/6702424/186044799-38801eec-4e89-483b-81dd-8e9233e8c0eb.png
|
|
||||||
* */
|
|
||||||
labelBySupportedLanguageTag: Record<string, string>;
|
|
||||||
/**
|
|
||||||
* Examples assuming currentLanguageTag === "en"
|
|
||||||
*
|
|
||||||
* msg("access-denied") === <span>Access denied</span>
|
|
||||||
* msg("impersonateTitleHtml", "Foo") === <span><strong>Foo</strong> Impersonate User</span>
|
|
||||||
*/
|
|
||||||
msg: (key: MessageKey, ...args: (string | undefined)[]) => JSX.Element;
|
|
||||||
/**
|
|
||||||
* It's the same thing as msg() but instead of returning a JSX.Element it returns a string.
|
|
||||||
* It can be more convenient to manipulate strings but if there are HTML tags it wont render.
|
|
||||||
* msgStr("impersonateTitleHtml", "Foo") === "<strong>Foo</strong> Impersonate User"
|
|
||||||
*/
|
|
||||||
msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
|
|
||||||
/**
|
|
||||||
* Examples assuming currentLanguageTag === "en"
|
|
||||||
* advancedMsg("${access-denied} foo bar") === <span>${msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
|
|
||||||
* advancedMsg("${access-denied}") === advancedMsg("access-denied") === msg("access-denied") === <span>Access denied</span>
|
|
||||||
* advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === <span>not-a-message-key</span>
|
|
||||||
*/
|
|
||||||
advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
|
|
||||||
/**
|
|
||||||
* Examples assuming currentLanguageTag === "en"
|
|
||||||
* advancedMsg("${access-denied} foo bar") === msg("access-denied") + " foo bar" === "Access denied foo bar"
|
|
||||||
* advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === "not-a-message-key"
|
|
||||||
*/
|
|
||||||
advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type I18n = GenericI18n<MessageKey>;
|
|
||||||
|
|
||||||
export function createUseI18n<ExtraMessageKey extends string = never>(extraMessages: {
|
|
||||||
[languageTag: string]: { [key in ExtraMessageKey]: string };
|
|
||||||
}) {
|
|
||||||
function useI18n(params: { kcContext: KcContextLike }): GenericI18n<MessageKey | ExtraMessageKey> | null {
|
|
||||||
const { kcContext } = params;
|
|
||||||
|
|
||||||
const [i18n, setI18n] = useState<GenericI18n<ExtraMessageKey | MessageKey> | undefined>(undefined);
|
|
||||||
|
|
||||||
const refHasStartedFetching = useRef(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (refHasStartedFetching.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
refHasStartedFetching.current = true;
|
|
||||||
|
|
||||||
(async () => {
|
|
||||||
const { currentLanguageTag = fallbackLanguageTag } = kcContext.locale ?? {};
|
|
||||||
|
|
||||||
setI18n({
|
|
||||||
...createI18nTranslationFunctions({
|
|
||||||
"fallbackMessages": {
|
|
||||||
...fallbackMessages,
|
|
||||||
...(keycloakifyExtraMessages[fallbackLanguageTag] ?? {}),
|
|
||||||
...(extraMessages[fallbackLanguageTag] ?? {})
|
|
||||||
} as any,
|
|
||||||
"messages": {
|
|
||||||
...(await getMessages(currentLanguageTag)),
|
|
||||||
...((keycloakifyExtraMessages as any)[currentLanguageTag] ?? {}),
|
|
||||||
...(extraMessages[currentLanguageTag] ?? {})
|
|
||||||
} as any
|
|
||||||
}),
|
|
||||||
currentLanguageTag,
|
|
||||||
"changeLocale": newLanguageTag => {
|
|
||||||
const { locale } = kcContext;
|
|
||||||
|
|
||||||
assert(locale !== undefined, "Internationalization not enabled");
|
|
||||||
|
|
||||||
const targetSupportedLocale = locale.supported.find(({ languageTag }) => languageTag === newLanguageTag);
|
|
||||||
|
|
||||||
assert(targetSupportedLocale !== undefined, `${newLanguageTag} need to be enabled in Keycloak admin`);
|
|
||||||
|
|
||||||
window.location.href = targetSupportedLocale.url;
|
|
||||||
|
|
||||||
assert(false, "never");
|
|
||||||
},
|
|
||||||
"labelBySupportedLanguageTag": Object.fromEntries(
|
|
||||||
(kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label])
|
|
||||||
)
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return i18n ?? null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return { useI18n };
|
|
||||||
}
|
|
||||||
|
|
||||||
function createI18nTranslationFunctions<MessageKey extends string>(params: {
|
|
||||||
fallbackMessages: Record<MessageKey, string>;
|
|
||||||
messages: Record<MessageKey, string>;
|
|
||||||
}): Pick<GenericI18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
|
|
||||||
const { fallbackMessages, messages } = params;
|
|
||||||
|
|
||||||
function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): string | JSX.Element | undefined {
|
|
||||||
const { key, args, doRenderMarkdown } = props;
|
|
||||||
|
|
||||||
const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key];
|
|
||||||
|
|
||||||
if (messageOrUndefined === undefined) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
const message = messageOrUndefined;
|
|
||||||
|
|
||||||
const messageWithArgsInjectedIfAny = (() => {
|
|
||||||
const startIndex = message
|
|
||||||
.match(/{[0-9]+}/g)
|
|
||||||
?.map(g => g.match(/{([0-9]+)}/)![1])
|
|
||||||
.map(indexStr => parseInt(indexStr))
|
|
||||||
.sort((a, b) => a - b)[0];
|
|
||||||
|
|
||||||
if (startIndex === undefined) {
|
|
||||||
// No {0} in message (no arguments expected)
|
|
||||||
return message;
|
|
||||||
}
|
|
||||||
|
|
||||||
let messageWithArgsInjected = message;
|
|
||||||
|
|
||||||
args.forEach((arg, i) => {
|
|
||||||
if (arg === undefined) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
messageWithArgsInjected = messageWithArgsInjected.replace(new RegExp(`\\{${i + startIndex}\\}`, "g"), arg);
|
|
||||||
});
|
|
||||||
|
|
||||||
return messageWithArgsInjected;
|
|
||||||
})();
|
|
||||||
|
|
||||||
return doRenderMarkdown ? (
|
|
||||||
<Markdown allowDangerousHtml renderers={{ "paragraph": "span" }}>
|
|
||||||
{messageWithArgsInjectedIfAny}
|
|
||||||
</Markdown>
|
|
||||||
) : (
|
|
||||||
messageWithArgsInjectedIfAny
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): JSX.Element | string {
|
|
||||||
const { key, args, doRenderMarkdown } = props;
|
|
||||||
|
|
||||||
const match = key.match(/^\$\{([^{]+)\}$/);
|
|
||||||
|
|
||||||
const keyUnwrappedFromCurlyBraces = match === null ? key : match[1];
|
|
||||||
|
|
||||||
const out = resolveMsg({
|
|
||||||
"key": keyUnwrappedFromCurlyBraces,
|
|
||||||
args,
|
|
||||||
doRenderMarkdown
|
|
||||||
});
|
|
||||||
|
|
||||||
return (out !== undefined ? out : doRenderMarkdown ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
"msgStr": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": false }) as string,
|
|
||||||
"msg": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": true }) as JSX.Element,
|
|
||||||
"advancedMsg": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": true }) as JSX.Element,
|
|
||||||
"advancedMsgStr": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": false }) as string
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const keycloakifyExtraMessages = {
|
|
||||||
"en": {
|
|
||||||
"shouldBeEqual": "{0} should be equal to {1}",
|
|
||||||
"shouldBeDifferent": "{0} should be different to {1}",
|
|
||||||
"shouldMatchPattern": "Pattern should match: `/{0}/`",
|
|
||||||
"mustBeAnInteger": "Must be an integer",
|
|
||||||
"notAValidOption": "Not a valid option",
|
|
||||||
"newPasswordSameAsOld": "New password must be different from the old one",
|
|
||||||
"passwordConfirmNotMatch": "Password confirmation does not match"
|
|
||||||
},
|
|
||||||
"fr": {
|
|
||||||
/* spell-checker: disable */
|
|
||||||
"shouldBeEqual": "{0} doit être égal à {1}",
|
|
||||||
"shouldBeDifferent": "{0} doit être différent de {1}",
|
|
||||||
"shouldMatchPattern": "Dois respecter le schéma: `/{0}/`",
|
|
||||||
"mustBeAnInteger": "Doit être un nombre entier",
|
|
||||||
"notAValidOption": "N'est pas une option valide",
|
|
||||||
|
|
||||||
"logoutConfirmTitle": "Déconnexion",
|
|
||||||
"logoutConfirmHeader": "Êtes-vous sûr(e) de vouloir vous déconnecter ?",
|
|
||||||
"doLogout": "Se déconnecter",
|
|
||||||
"newPasswordSameAsOld": "Le nouveau mot de passe doit être différent de l'ancien",
|
|
||||||
"passwordConfirmNotMatch": "La confirmation du mot de passe ne correspond pas"
|
|
||||||
/* spell-checker: enable */
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export type { I18n } from "./i18n";
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import Fallback from "keycloakify/account/Fallback";
|
|
||||||
|
|
||||||
export default Fallback;
|
|
||||||
|
|
||||||
export { getKcContext } from "keycloakify/account/kcContext/getKcContext";
|
|
||||||
export { createGetKcContext } from "keycloakify/account/kcContext/createGetKcContext";
|
|
||||||
export type { AccountThemePageId as PageId } from "keycloakify/bin/keycloakify/generateFtl";
|
|
||||||
export { createUseI18n } from "keycloakify/account/i18n/i18n";
|
|
||||||
|
|
||||||
export type { PageProps } from "keycloakify/account/pages/PageProps";
|
|
||||||
@ -1,125 +0,0 @@
|
|||||||
import type { AccountThemePageId, ThemeType } from "keycloakify/bin/keycloakify/generateFtl";
|
|
||||||
import { assert } from "tsafe/assert";
|
|
||||||
import type { Equals } from "tsafe";
|
|
||||||
|
|
||||||
export type KcContext = KcContext.Password | KcContext.Account;
|
|
||||||
|
|
||||||
export declare namespace KcContext {
|
|
||||||
export type Common = {
|
|
||||||
keycloakifyVersion: string;
|
|
||||||
themeType: "account";
|
|
||||||
themeName: string;
|
|
||||||
locale?: {
|
|
||||||
supported: {
|
|
||||||
url: string;
|
|
||||||
label: string;
|
|
||||||
languageTag: string;
|
|
||||||
}[];
|
|
||||||
currentLanguageTag: string;
|
|
||||||
};
|
|
||||||
url: {
|
|
||||||
accountUrl: string;
|
|
||||||
passwordUrl: string;
|
|
||||||
totpUrl: string;
|
|
||||||
socialUrl: string;
|
|
||||||
sessionsUrl: string;
|
|
||||||
applicationsUrl: string;
|
|
||||||
logUrl: string;
|
|
||||||
resourceUrl: string;
|
|
||||||
resourcesCommonPath: string;
|
|
||||||
resourcesPath: string;
|
|
||||||
/** @deprecated, not present in recent keycloak version apparently, use kcContext.referrer instead */
|
|
||||||
referrerURI?: string;
|
|
||||||
getLogoutUrl: () => string;
|
|
||||||
};
|
|
||||||
features: {
|
|
||||||
passwordUpdateSupported: boolean;
|
|
||||||
identityFederation: boolean;
|
|
||||||
log: boolean;
|
|
||||||
authorization: boolean;
|
|
||||||
};
|
|
||||||
realm: {
|
|
||||||
internationalizationEnabled: boolean;
|
|
||||||
userManagedAccessAllowed: boolean;
|
|
||||||
};
|
|
||||||
// Present only if redirected to account page with ?referrer=xxx&referrer_uri=http...
|
|
||||||
message?: {
|
|
||||||
type: "success" | "warning" | "error" | "info";
|
|
||||||
summary: string;
|
|
||||||
};
|
|
||||||
referrer?: {
|
|
||||||
url: string; // The url of the App
|
|
||||||
name: string; // Client id
|
|
||||||
};
|
|
||||||
messagesPerField: {
|
|
||||||
/**
|
|
||||||
* Return text if message for given field exists. Useful eg. to add css styles for fields with message.
|
|
||||||
*
|
|
||||||
* @param fieldName to check for
|
|
||||||
* @param text to return
|
|
||||||
* @return text if message exists for given field, else undefined
|
|
||||||
*/
|
|
||||||
printIfExists: <T extends string>(fieldName: string, text: T) => T | undefined;
|
|
||||||
/**
|
|
||||||
* Check if exists error message for given fields
|
|
||||||
*
|
|
||||||
* @param fields
|
|
||||||
* @return boolean
|
|
||||||
*/
|
|
||||||
existsError: (fieldName: string) => boolean;
|
|
||||||
/**
|
|
||||||
* Get message for given field.
|
|
||||||
*
|
|
||||||
* @param fieldName
|
|
||||||
* @return message text or empty string
|
|
||||||
*/
|
|
||||||
get: (fieldName: string) => string;
|
|
||||||
/**
|
|
||||||
* Check if message for given field exists
|
|
||||||
*
|
|
||||||
* @param field
|
|
||||||
* @return boolean
|
|
||||||
*/
|
|
||||||
exists: (fieldName: string) => boolean;
|
|
||||||
};
|
|
||||||
account: {
|
|
||||||
email?: string;
|
|
||||||
firstName: string;
|
|
||||||
lastName?: string;
|
|
||||||
username?: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export type Password = Common & {
|
|
||||||
pageId: "password.ftl";
|
|
||||||
password: {
|
|
||||||
passwordSet: boolean;
|
|
||||||
};
|
|
||||||
stateChecker: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type Account = Common & {
|
|
||||||
pageId: "account.ftl";
|
|
||||||
url: {
|
|
||||||
accountUrl: string;
|
|
||||||
};
|
|
||||||
realm: {
|
|
||||||
registrationEmailAsUsername: boolean;
|
|
||||||
editUsernameAllowed: boolean;
|
|
||||||
};
|
|
||||||
stateChecker: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
type Got = KcContext["pageId"];
|
|
||||||
type Expected = AccountThemePageId;
|
|
||||||
|
|
||||||
type OnlyInGot = Exclude<Got, Expected>;
|
|
||||||
type OnlyInExpected = Exclude<Expected, Got>;
|
|
||||||
|
|
||||||
assert<Equals<OnlyInGot, never>>();
|
|
||||||
assert<Equals<OnlyInExpected, never>>();
|
|
||||||
}
|
|
||||||
|
|
||||||
assert<KcContext["themeType"] extends ThemeType ? true : false>();
|
|
||||||
@ -1,102 +0,0 @@
|
|||||||
import type { DeepPartial } from "keycloakify/tools/DeepPartial";
|
|
||||||
import { deepAssign } from "keycloakify/tools/deepAssign";
|
|
||||||
import type { ExtendKcContext } from "./getKcContextFromWindow";
|
|
||||||
import { getKcContextFromWindow } from "./getKcContextFromWindow";
|
|
||||||
import { pathJoin } from "keycloakify/bin/tools/pathJoin";
|
|
||||||
import { pathBasename } from "keycloakify/tools/pathBasename";
|
|
||||||
import { resourcesCommonDirPathRelativeToPublicDir } from "keycloakify/bin/mockTestingResourcesPath";
|
|
||||||
import { symToStr } from "tsafe/symToStr";
|
|
||||||
import { kcContextMocks, kcContextCommonMock } from "keycloakify/account/kcContext/kcContextMocks";
|
|
||||||
|
|
||||||
export function createGetKcContext<KcContextExtension extends { pageId: string } = never>(params?: {
|
|
||||||
mockData?: readonly DeepPartial<ExtendKcContext<KcContextExtension>>[];
|
|
||||||
}) {
|
|
||||||
const { mockData } = params ?? {};
|
|
||||||
|
|
||||||
function getKcContext<PageId extends ExtendKcContext<KcContextExtension>["pageId"] | undefined = undefined>(params?: {
|
|
||||||
mockPageId?: PageId;
|
|
||||||
storyPartialKcContext?: DeepPartial<Extract<ExtendKcContext<KcContextExtension>, { pageId: PageId }>>;
|
|
||||||
}): {
|
|
||||||
kcContext: PageId extends undefined
|
|
||||||
? ExtendKcContext<KcContextExtension> | undefined
|
|
||||||
: Extract<ExtendKcContext<KcContextExtension>, { pageId: PageId }>;
|
|
||||||
} {
|
|
||||||
const { mockPageId, storyPartialKcContext } = params ?? {};
|
|
||||||
|
|
||||||
const realKcContext = getKcContextFromWindow<KcContextExtension>();
|
|
||||||
|
|
||||||
if (mockPageId !== undefined && realKcContext === undefined) {
|
|
||||||
//TODO maybe trow if no mock fo custom page
|
|
||||||
|
|
||||||
console.log(`%cKeycloakify: ${symToStr({ mockPageId })} set to ${mockPageId}.`, "background: red; color: yellow; font-size: medium");
|
|
||||||
|
|
||||||
const kcContextDefaultMock = kcContextMocks.find(({ pageId }) => pageId === mockPageId);
|
|
||||||
|
|
||||||
const partialKcContextCustomMock = (() => {
|
|
||||||
const out: DeepPartial<ExtendKcContext<KcContextExtension>> = {};
|
|
||||||
|
|
||||||
const mockDataPick = mockData?.find(({ pageId }) => pageId === mockPageId);
|
|
||||||
|
|
||||||
if (mockDataPick !== undefined) {
|
|
||||||
deepAssign({
|
|
||||||
"target": out,
|
|
||||||
"source": mockDataPick
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (storyPartialKcContext !== undefined) {
|
|
||||||
deepAssign({
|
|
||||||
"target": out,
|
|
||||||
"source": storyPartialKcContext
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return Object.keys(out).length === 0 ? undefined : out;
|
|
||||||
})();
|
|
||||||
|
|
||||||
if (kcContextDefaultMock === undefined && partialKcContextCustomMock === undefined) {
|
|
||||||
console.warn(
|
|
||||||
[
|
|
||||||
`WARNING: You declared the non build in page ${mockPageId} but you didn't `,
|
|
||||||
`provide mock data needed to debug the page outside of Keycloak as you are trying to do now.`,
|
|
||||||
`Please check the documentation of the getKcContext function`
|
|
||||||
].join("\n")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const kcContext: any = {};
|
|
||||||
|
|
||||||
deepAssign({
|
|
||||||
"target": kcContext,
|
|
||||||
"source": kcContextDefaultMock !== undefined ? kcContextDefaultMock : { "pageId": mockPageId, ...kcContextCommonMock }
|
|
||||||
});
|
|
||||||
|
|
||||||
if (partialKcContextCustomMock !== undefined) {
|
|
||||||
deepAssign({
|
|
||||||
"target": kcContext,
|
|
||||||
"source": partialKcContextCustomMock
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return { kcContext };
|
|
||||||
}
|
|
||||||
|
|
||||||
if (realKcContext === undefined) {
|
|
||||||
return { "kcContext": undefined as any };
|
|
||||||
}
|
|
||||||
|
|
||||||
if (realKcContext.themeType !== "account") {
|
|
||||||
return { "kcContext": undefined as any };
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
const { url } = realKcContext;
|
|
||||||
|
|
||||||
url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(resourcesCommonDirPathRelativeToPublicDir));
|
|
||||||
}
|
|
||||||
|
|
||||||
return { "kcContext": realKcContext as any };
|
|
||||||
}
|
|
||||||
|
|
||||||
return { getKcContext };
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import type { DeepPartial } from "keycloakify/tools/DeepPartial";
|
|
||||||
import type { ExtendKcContext } from "./getKcContextFromWindow";
|
|
||||||
import { createGetKcContext } from "./createGetKcContext";
|
|
||||||
|
|
||||||
/** NOTE: We now recommend using createGetKcContext instead of this function to make storybook integration easier
|
|
||||||
* See: https://github.com/keycloakify/keycloakify-starter/blob/main/src/keycloak-theme/account/kcContext.ts
|
|
||||||
*/
|
|
||||||
export function getKcContext<KcContextExtension extends { pageId: string } = never>(params?: {
|
|
||||||
mockPageId?: ExtendKcContext<KcContextExtension>["pageId"];
|
|
||||||
mockData?: readonly DeepPartial<ExtendKcContext<KcContextExtension>>[];
|
|
||||||
}): { kcContext: ExtendKcContext<KcContextExtension> | undefined } {
|
|
||||||
const { mockPageId, mockData } = params ?? {};
|
|
||||||
|
|
||||||
const { getKcContext } = createGetKcContext({
|
|
||||||
mockData
|
|
||||||
});
|
|
||||||
|
|
||||||
const { kcContext } = getKcContext({ mockPageId });
|
|
||||||
|
|
||||||
return { kcContext };
|
|
||||||
}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import type { AndByDiscriminatingKey } from "keycloakify/tools/AndByDiscriminatingKey";
|
|
||||||
import { ftlValuesGlobalName } from "keycloakify/bin/keycloakify/ftlValuesGlobalName";
|
|
||||||
import type { KcContext } from "./KcContext";
|
|
||||||
|
|
||||||
export type ExtendKcContext<KcContextExtension extends { pageId: string }> = [KcContextExtension] extends [never]
|
|
||||||
? KcContext
|
|
||||||
: AndByDiscriminatingKey<"pageId", KcContextExtension & KcContext.Common, KcContext>;
|
|
||||||
|
|
||||||
export function getKcContextFromWindow<KcContextExtension extends { pageId: string } = never>(): ExtendKcContext<KcContextExtension> | undefined {
|
|
||||||
return typeof window === "undefined" ? undefined : (window as any)[ftlValuesGlobalName];
|
|
||||||
}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export type { KcContext } from "./KcContext";
|
|
||||||
@ -1,174 +0,0 @@
|
|||||||
import "minimal-polyfills/Object.fromEntries";
|
|
||||||
import { resourcesCommonDirPathRelativeToPublicDir, resourcesDirPathRelativeToPublicDir } from "keycloakify/bin/mockTestingResourcesPath";
|
|
||||||
import { pathJoin } from "keycloakify/bin/tools/pathJoin";
|
|
||||||
import { id } from "tsafe/id";
|
|
||||||
import type { KcContext } from "./KcContext";
|
|
||||||
|
|
||||||
const PUBLIC_URL = (typeof process !== "object" ? undefined : process.env?.["PUBLIC_URL"]) || "/";
|
|
||||||
|
|
||||||
export const kcContextCommonMock: KcContext.Common = {
|
|
||||||
"keycloakifyVersion": "0.0.0",
|
|
||||||
"themeType": "account",
|
|
||||||
"themeName": "my-theme-name",
|
|
||||||
"url": {
|
|
||||||
"resourcesPath": pathJoin(PUBLIC_URL, resourcesDirPathRelativeToPublicDir),
|
|
||||||
"resourcesCommonPath": pathJoin(PUBLIC_URL, resourcesCommonDirPathRelativeToPublicDir),
|
|
||||||
"resourceUrl": "#",
|
|
||||||
"accountUrl": "#",
|
|
||||||
"applicationsUrl": "#",
|
|
||||||
"getLogoutUrl": () => "#",
|
|
||||||
"logUrl": "#",
|
|
||||||
"passwordUrl": "#",
|
|
||||||
"sessionsUrl": "#",
|
|
||||||
"socialUrl": "#",
|
|
||||||
"totpUrl": "#"
|
|
||||||
},
|
|
||||||
"realm": {
|
|
||||||
"internationalizationEnabled": true,
|
|
||||||
"userManagedAccessAllowed": true
|
|
||||||
},
|
|
||||||
"messagesPerField": {
|
|
||||||
"printIfExists": () => {
|
|
||||||
return undefined;
|
|
||||||
},
|
|
||||||
"existsError": () => false,
|
|
||||||
"get": key => `Fake error for ${key}`,
|
|
||||||
"exists": () => false
|
|
||||||
},
|
|
||||||
"locale": {
|
|
||||||
"supported": [
|
|
||||||
/* spell-checker: disable */
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=de",
|
|
||||||
"label": "Deutsch",
|
|
||||||
"languageTag": "de"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=no",
|
|
||||||
"label": "Norsk",
|
|
||||||
"languageTag": "no"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ru",
|
|
||||||
"label": "Русский",
|
|
||||||
"languageTag": "ru"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=sv",
|
|
||||||
"label": "Svenska",
|
|
||||||
"languageTag": "sv"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=pt-BR",
|
|
||||||
"label": "Português (Brasil)",
|
|
||||||
"languageTag": "pt-BR"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=lt",
|
|
||||||
"label": "Lietuvių",
|
|
||||||
"languageTag": "lt"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=en",
|
|
||||||
"label": "English",
|
|
||||||
"languageTag": "en"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=it",
|
|
||||||
"label": "Italiano",
|
|
||||||
"languageTag": "it"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=fr",
|
|
||||||
"label": "Français",
|
|
||||||
"languageTag": "fr"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=zh-CN",
|
|
||||||
"label": "中文简体",
|
|
||||||
"languageTag": "zh-CN"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=es",
|
|
||||||
"label": "Español",
|
|
||||||
"languageTag": "es"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=cs",
|
|
||||||
"label": "Čeština",
|
|
||||||
"languageTag": "cs"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ja",
|
|
||||||
"label": "日本語",
|
|
||||||
"languageTag": "ja"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=sk",
|
|
||||||
"label": "Slovenčina",
|
|
||||||
"languageTag": "sk"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=pl",
|
|
||||||
"label": "Polski",
|
|
||||||
"languageTag": "pl"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ca",
|
|
||||||
"label": "Català",
|
|
||||||
"languageTag": "ca"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=nl",
|
|
||||||
"label": "Nederlands",
|
|
||||||
"languageTag": "nl"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=tr",
|
|
||||||
"label": "Türkçe",
|
|
||||||
"languageTag": "tr"
|
|
||||||
}
|
|
||||||
/* spell-checker: enable */
|
|
||||||
],
|
|
||||||
"currentLanguageTag": "en"
|
|
||||||
},
|
|
||||||
"features": {
|
|
||||||
"authorization": true,
|
|
||||||
"identityFederation": true,
|
|
||||||
"log": true,
|
|
||||||
"passwordUpdateSupported": true
|
|
||||||
},
|
|
||||||
"referrer": undefined,
|
|
||||||
"account": {
|
|
||||||
"firstName": "john",
|
|
||||||
"lastName": "doe",
|
|
||||||
"email": "john.doe@code.gouv.fr",
|
|
||||||
"username": "doe_j"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export const kcContextMocks: KcContext[] = [
|
|
||||||
id<KcContext.Password>({
|
|
||||||
...kcContextCommonMock,
|
|
||||||
"pageId": "password.ftl",
|
|
||||||
"password": {
|
|
||||||
"passwordSet": true
|
|
||||||
},
|
|
||||||
"stateChecker": "state checker"
|
|
||||||
}),
|
|
||||||
id<KcContext.Account>({
|
|
||||||
...kcContextCommonMock,
|
|
||||||
"pageId": "account.ftl",
|
|
||||||
"url": {
|
|
||||||
...kcContextCommonMock.url,
|
|
||||||
"referrerURI": "#",
|
|
||||||
"accountUrl": "#"
|
|
||||||
},
|
|
||||||
"realm": {
|
|
||||||
...kcContextCommonMock.realm,
|
|
||||||
"registrationEmailAsUsername": true,
|
|
||||||
"editUsernameAllowed": true
|
|
||||||
},
|
|
||||||
"stateChecker": ""
|
|
||||||
})
|
|
||||||
];
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
import { createUseClassName } from "keycloakify/lib/useGetClassName";
|
|
||||||
import type { ClassKey } from "keycloakify/account/TemplateProps";
|
|
||||||
|
|
||||||
export const { useGetClassName } = createUseClassName<ClassKey>({
|
|
||||||
"defaultClasses": {
|
|
||||||
"kcHtmlClass": undefined,
|
|
||||||
"kcBodyClass": undefined,
|
|
||||||
"kcButtonClass": "btn",
|
|
||||||
"kcButtonPrimaryClass": "btn-primary",
|
|
||||||
"kcButtonLargeClass": "btn-lg",
|
|
||||||
"kcButtonDefaultClass": "btn-default"
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -1,133 +0,0 @@
|
|||||||
import { clsx } from "keycloakify/tools/clsx";
|
|
||||||
import type { PageProps } from "keycloakify/account/pages/PageProps";
|
|
||||||
import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
|
|
||||||
import type { KcContext } from "../kcContext";
|
|
||||||
import type { I18n } from "../i18n";
|
|
||||||
|
|
||||||
export default function Account(props: PageProps<Extract<KcContext, { pageId: "account.ftl" }>, I18n>) {
|
|
||||||
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
|
|
||||||
|
|
||||||
const { getClassName } = useGetClassName({
|
|
||||||
doUseDefaultCss,
|
|
||||||
"classes": {
|
|
||||||
...classes,
|
|
||||||
"kcBodyClass": clsx(classes?.kcBodyClass, "user")
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const { url, realm, messagesPerField, stateChecker, account, referrer } = kcContext;
|
|
||||||
|
|
||||||
const { msg } = i18n;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="account">
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-md-10">
|
|
||||||
<h2>{msg("editAccountHtmlTitle")}</h2>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-2 subtitle">
|
|
||||||
<span className="subtitle">
|
|
||||||
<span className="required">*</span> {msg("requiredFields")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form action={url.accountUrl} className="form-horizontal" method="post">
|
|
||||||
<input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
|
|
||||||
|
|
||||||
{!realm.registrationEmailAsUsername && (
|
|
||||||
<div className={clsx("form-group", messagesPerField.printIfExists("username", "has-error"))}>
|
|
||||||
<div className="col-sm-2 col-md-2">
|
|
||||||
<label htmlFor="username" className="control-label">
|
|
||||||
{msg("username")}
|
|
||||||
</label>
|
|
||||||
{realm.editUsernameAllowed && <span className="required">*</span>}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-sm-10 col-md-10">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
id="username"
|
|
||||||
name="username"
|
|
||||||
disabled={!realm.editUsernameAllowed}
|
|
||||||
defaultValue={account.username ?? ""}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className={clsx("form-group", messagesPerField.printIfExists("email", "has-error"))}>
|
|
||||||
<div className="col-sm-2 col-md-2">
|
|
||||||
<label htmlFor="email" className="control-label">
|
|
||||||
{msg("email")}
|
|
||||||
</label>{" "}
|
|
||||||
<span className="required">*</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-sm-10 col-md-10">
|
|
||||||
<input type="text" className="form-control" id="email" name="email" autoFocus defaultValue={account.email ?? ""} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={clsx("form-group", messagesPerField.printIfExists("firstName", "has-error"))}>
|
|
||||||
<div className="col-sm-2 col-md-2">
|
|
||||||
<label htmlFor="firstName" className="control-label">
|
|
||||||
{msg("firstName")}
|
|
||||||
</label>{" "}
|
|
||||||
<span className="required">*</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-sm-10 col-md-10">
|
|
||||||
<input type="text" className="form-control" id="firstName" name="firstName" defaultValue={account.firstName ?? ""} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={clsx("form-group", messagesPerField.printIfExists("lastName", "has-error"))}>
|
|
||||||
<div className="col-sm-2 col-md-2">
|
|
||||||
<label htmlFor="lastName" className="control-label">
|
|
||||||
{msg("lastName")}
|
|
||||||
</label>{" "}
|
|
||||||
<span className="required">*</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-sm-10 col-md-10">
|
|
||||||
<input type="text" className="form-control" id="lastName" name="lastName" defaultValue={account.lastName ?? ""} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-group">
|
|
||||||
<div id="kc-form-buttons" className="col-md-offset-2 col-md-10 submit">
|
|
||||||
<div>
|
|
||||||
{referrer !== undefined && <a href={referrer?.url}>{msg("backToApplication")}</a>}
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className={clsx(
|
|
||||||
getClassName("kcButtonClass"),
|
|
||||||
getClassName("kcButtonPrimaryClass"),
|
|
||||||
getClassName("kcButtonLargeClass")
|
|
||||||
)}
|
|
||||||
name="submitAction"
|
|
||||||
value="Save"
|
|
||||||
>
|
|
||||||
{msg("doSave")}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className={clsx(
|
|
||||||
getClassName("kcButtonClass"),
|
|
||||||
getClassName("kcButtonDefaultClass"),
|
|
||||||
getClassName("kcButtonLargeClass")
|
|
||||||
)}
|
|
||||||
name="submitAction"
|
|
||||||
value="Cancel"
|
|
||||||
>
|
|
||||||
{msg("doCancel")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</Template>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import type { LazyExoticComponent } from "react";
|
|
||||||
import type { I18n } from "keycloakify/account/i18n";
|
|
||||||
import type { TemplateProps, ClassKey } from "keycloakify/account/TemplateProps";
|
|
||||||
|
|
||||||
export type PageProps<KcContext, I18nExtended extends I18n> = {
|
|
||||||
Template: LazyExoticComponent<(props: TemplateProps<any, any>) => JSX.Element | null>;
|
|
||||||
kcContext: KcContext;
|
|
||||||
i18n: I18nExtended;
|
|
||||||
doUseDefaultCss: boolean;
|
|
||||||
classes?: Partial<Record<ClassKey, string>>;
|
|
||||||
};
|
|
||||||
@ -1,211 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { clsx } from "keycloakify/tools/clsx";
|
|
||||||
import type { PageProps } from "keycloakify/account/pages/PageProps";
|
|
||||||
import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
|
|
||||||
import type { KcContext } from "../kcContext";
|
|
||||||
import type { I18n } from "../i18n";
|
|
||||||
|
|
||||||
export default function Password(props: PageProps<Extract<KcContext, { pageId: "password.ftl" }>, I18n>) {
|
|
||||||
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
|
|
||||||
|
|
||||||
const { getClassName } = useGetClassName({
|
|
||||||
doUseDefaultCss,
|
|
||||||
"classes": {
|
|
||||||
...classes,
|
|
||||||
"kcBodyClass": clsx(classes?.kcBodyClass, "password")
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const { url, password, account, stateChecker } = kcContext;
|
|
||||||
|
|
||||||
const { msgStr, msg } = i18n;
|
|
||||||
|
|
||||||
const [currentPassword, setCurrentPassword] = useState("");
|
|
||||||
const [newPassword, setNewPassword] = useState("");
|
|
||||||
const [newPasswordConfirm, setNewPasswordConfirm] = useState("");
|
|
||||||
const [newPasswordError, setNewPasswordError] = useState("");
|
|
||||||
const [newPasswordConfirmError, setNewPasswordConfirmError] = useState("");
|
|
||||||
const [hasNewPasswordBlurred, setHasNewPasswordBlurred] = useState(false);
|
|
||||||
const [hasNewPasswordConfirmBlurred, setHasNewPasswordConfirmBlurred] = useState(false);
|
|
||||||
|
|
||||||
const checkNewPassword = (newPassword: string) => {
|
|
||||||
if (!password.passwordSet) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newPassword === currentPassword) {
|
|
||||||
setNewPasswordError(msgStr("newPasswordSameAsOld"));
|
|
||||||
} else {
|
|
||||||
setNewPasswordError("");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const checkNewPasswordConfirm = (newPasswordConfirm: string) => {
|
|
||||||
if (newPasswordConfirm === "") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newPassword !== newPasswordConfirm) {
|
|
||||||
setNewPasswordConfirmError(msgStr("passwordConfirmNotMatch"));
|
|
||||||
} else {
|
|
||||||
setNewPasswordConfirmError("");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Template
|
|
||||||
{...{
|
|
||||||
kcContext: {
|
|
||||||
...kcContext,
|
|
||||||
"message": (() => {
|
|
||||||
if (newPasswordError !== "") {
|
|
||||||
return {
|
|
||||||
"type": "error",
|
|
||||||
"summary": newPasswordError
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newPasswordConfirmError !== "") {
|
|
||||||
return {
|
|
||||||
"type": "error",
|
|
||||||
"summary": newPasswordConfirmError
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return kcContext.message;
|
|
||||||
})()
|
|
||||||
},
|
|
||||||
i18n,
|
|
||||||
doUseDefaultCss,
|
|
||||||
classes
|
|
||||||
}}
|
|
||||||
active="password"
|
|
||||||
>
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-md-10">
|
|
||||||
<h2>{msg("changePasswordHtmlTitle")}</h2>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-2 subtitle">
|
|
||||||
<span className="subtitle">{msg("allFieldsRequired")}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form action={url.passwordUrl} className="form-horizontal" method="post">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="username"
|
|
||||||
name="username"
|
|
||||||
value={account.username ?? ""}
|
|
||||||
autoComplete="username"
|
|
||||||
readOnly
|
|
||||||
style={{ "display": "none" }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{password.passwordSet && (
|
|
||||||
<div className="form-group">
|
|
||||||
<div className="col-sm-2 col-md-2">
|
|
||||||
<label htmlFor="password" className="control-label">
|
|
||||||
{msg("password")}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="col-sm-10 col-md-10">
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
className="form-control"
|
|
||||||
id="password"
|
|
||||||
name="password"
|
|
||||||
autoFocus
|
|
||||||
autoComplete="current-password"
|
|
||||||
value={currentPassword}
|
|
||||||
onChange={event => setCurrentPassword(event.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
|
|
||||||
|
|
||||||
<div className="form-group">
|
|
||||||
<div className="col-sm-2 col-md-2">
|
|
||||||
<label htmlFor="password-new" className="control-label">
|
|
||||||
{msg("passwordNew")}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="col-sm-10 col-md-10">
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
className="form-control"
|
|
||||||
id="password-new"
|
|
||||||
name="password-new"
|
|
||||||
autoComplete="new-password"
|
|
||||||
value={newPassword}
|
|
||||||
onChange={event => {
|
|
||||||
const newPassword = event.target.value;
|
|
||||||
|
|
||||||
setNewPassword(newPassword);
|
|
||||||
if (hasNewPasswordBlurred) {
|
|
||||||
checkNewPassword(newPassword);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onBlur={() => {
|
|
||||||
setHasNewPasswordBlurred(true);
|
|
||||||
checkNewPassword(newPassword);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-group">
|
|
||||||
<div className="col-sm-2 col-md-2">
|
|
||||||
<label htmlFor="password-confirm" className="control-label two-lines">
|
|
||||||
{msg("passwordConfirm")}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-sm-10 col-md-10">
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
className="form-control"
|
|
||||||
id="password-confirm"
|
|
||||||
name="password-confirm"
|
|
||||||
autoComplete="new-password"
|
|
||||||
value={newPasswordConfirm}
|
|
||||||
onChange={event => {
|
|
||||||
const newPasswordConfirm = event.target.value;
|
|
||||||
|
|
||||||
setNewPasswordConfirm(newPasswordConfirm);
|
|
||||||
if (hasNewPasswordConfirmBlurred) {
|
|
||||||
checkNewPasswordConfirm(newPasswordConfirm);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onBlur={() => {
|
|
||||||
setHasNewPasswordConfirmBlurred(true);
|
|
||||||
checkNewPasswordConfirm(newPasswordConfirm);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-group">
|
|
||||||
<div id="kc-form-buttons" className="col-md-offset-2 col-md-10 submit">
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
disabled={newPasswordError !== "" || newPasswordConfirmError !== ""}
|
|
||||||
type="submit"
|
|
||||||
className={clsx(
|
|
||||||
getClassName("kcButtonClass"),
|
|
||||||
getClassName("kcButtonPrimaryClass"),
|
|
||||||
getClassName("kcButtonLargeClass")
|
|
||||||
)}
|
|
||||||
name="submitAction"
|
|
||||||
value="Save"
|
|
||||||
>
|
|
||||||
{msg("doSave")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</Template>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
|
|
||||||
import { downloadKeycloakStaticResources } from "./keycloakify/generateTheme/downloadKeycloakStaticResources";
|
|
||||||
import { join as pathJoin, relative as pathRelative } from "path";
|
|
||||||
import { basenameOfKeycloakDirInPublicDir } from "./mockTestingResourcesPath";
|
|
||||||
import { readBuildOptions } from "./keycloakify/BuildOptions";
|
|
||||||
import { themeTypes } from "./keycloakify/generateFtl";
|
|
||||||
import * as fs from "fs";
|
|
||||||
|
|
||||||
(async () => {
|
|
||||||
const projectDirPath = process.cwd();
|
|
||||||
|
|
||||||
const buildOptions = readBuildOptions({
|
|
||||||
"processArgv": process.argv.slice(2),
|
|
||||||
"projectDirPath": process.cwd()
|
|
||||||
});
|
|
||||||
|
|
||||||
const keycloakDirInPublicDir = pathJoin(process.env["PUBLIC_DIR_PATH"] || pathJoin(projectDirPath, "public"), basenameOfKeycloakDirInPublicDir);
|
|
||||||
|
|
||||||
if (fs.existsSync(keycloakDirInPublicDir)) {
|
|
||||||
console.log(`${pathRelative(projectDirPath, keycloakDirInPublicDir)} already exists.`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const themeType of themeTypes) {
|
|
||||||
await downloadKeycloakStaticResources({
|
|
||||||
projectDirPath,
|
|
||||||
"keycloakVersion": buildOptions.keycloakVersionDefaultAssets,
|
|
||||||
"themeType": themeType,
|
|
||||||
"themeDirPath": keycloakDirInPublicDir,
|
|
||||||
"usedResources": undefined
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.writeFileSync(
|
|
||||||
pathJoin(keycloakDirInPublicDir, "README.txt"),
|
|
||||||
Buffer.from(
|
|
||||||
// prettier-ignore
|
|
||||||
[
|
|
||||||
"This is just a test folder that helps develop",
|
|
||||||
"the login and register page without having to run a Keycloak container"
|
|
||||||
].join(" ")
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
fs.writeFileSync(pathJoin(keycloakDirInPublicDir, ".gitignore"), Buffer.from("*", "utf8"));
|
|
||||||
|
|
||||||
console.log(`${pathRelative(projectDirPath, keycloakDirInPublicDir)} directory created.`);
|
|
||||||
})();
|
|
||||||
@ -1,97 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
import { join as pathJoin } from "path";
|
|
||||||
import { downloadAndUnzip } from "./tools/downloadAndUnzip";
|
|
||||||
import { promptKeycloakVersion } from "./promptKeycloakVersion";
|
|
||||||
import { getLogger } from "./tools/logger";
|
|
||||||
import { readBuildOptions } from "./keycloakify/BuildOptions";
|
|
||||||
import * as child_process from "child_process";
|
|
||||||
import * as fs from "fs";
|
|
||||||
|
|
||||||
export async function downloadBuiltinKeycloakTheme(params: { projectDirPath: string; keycloakVersion: string; destDirPath: string }) {
|
|
||||||
const { projectDirPath, keycloakVersion, destDirPath } = params;
|
|
||||||
|
|
||||||
await downloadAndUnzip({
|
|
||||||
"doUseCache": true,
|
|
||||||
projectDirPath,
|
|
||||||
destDirPath,
|
|
||||||
"url": `https://github.com/keycloak/keycloak/archive/refs/tags/${keycloakVersion}.zip`,
|
|
||||||
"specificDirsToExtract": ["", "-community"].map(ext => `keycloak-${keycloakVersion}/themes/src/main/resources${ext}/theme`),
|
|
||||||
"preCacheTransform": {
|
|
||||||
"actionCacheId": "npm install and build",
|
|
||||||
"action": async ({ destDirPath }) => {
|
|
||||||
install_common_node_modules: {
|
|
||||||
const commonResourcesDirPath = pathJoin(destDirPath, "keycloak", "common", "resources");
|
|
||||||
|
|
||||||
if (!fs.existsSync(commonResourcesDirPath)) {
|
|
||||||
break install_common_node_modules;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!fs.existsSync(pathJoin(commonResourcesDirPath, "package.json"))) {
|
|
||||||
break install_common_node_modules;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (fs.existsSync(pathJoin(commonResourcesDirPath, "node_modules"))) {
|
|
||||||
break install_common_node_modules;
|
|
||||||
}
|
|
||||||
|
|
||||||
child_process.execSync("npm install --omit=dev", {
|
|
||||||
"cwd": commonResourcesDirPath,
|
|
||||||
"stdio": "ignore"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
install_and_move_to_common_resources_generated_in_keycloak_v2: {
|
|
||||||
const accountV2DirSrcDirPath = pathJoin(destDirPath, "keycloak.v2", "account", "src");
|
|
||||||
|
|
||||||
if (!fs.existsSync(accountV2DirSrcDirPath)) {
|
|
||||||
break install_and_move_to_common_resources_generated_in_keycloak_v2;
|
|
||||||
}
|
|
||||||
|
|
||||||
child_process.execSync("npm install", { "cwd": accountV2DirSrcDirPath, "stdio": "ignore" });
|
|
||||||
|
|
||||||
const packageJsonFilePath = pathJoin(accountV2DirSrcDirPath, "package.json");
|
|
||||||
|
|
||||||
const packageJsonRaw = fs.readFileSync(packageJsonFilePath);
|
|
||||||
|
|
||||||
const parsedPackageJson = JSON.parse(packageJsonRaw.toString("utf8"));
|
|
||||||
|
|
||||||
parsedPackageJson.scripts.build = parsedPackageJson.scripts.build
|
|
||||||
.replace("npm run check-types", "true")
|
|
||||||
.replace("npm run babel", "true");
|
|
||||||
|
|
||||||
fs.writeFileSync(packageJsonFilePath, Buffer.from(JSON.stringify(parsedPackageJson, null, 2), "utf8"));
|
|
||||||
|
|
||||||
child_process.execSync("npm run build", { "cwd": accountV2DirSrcDirPath, "stdio": "ignore" });
|
|
||||||
|
|
||||||
fs.writeFileSync(packageJsonFilePath, packageJsonRaw);
|
|
||||||
|
|
||||||
fs.rmSync(pathJoin(accountV2DirSrcDirPath, "node_modules"), { "recursive": true });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function main() {
|
|
||||||
const buildOptions = readBuildOptions({
|
|
||||||
"projectDirPath": process.cwd(),
|
|
||||||
"processArgv": process.argv.slice(2)
|
|
||||||
});
|
|
||||||
|
|
||||||
const logger = getLogger({ "isSilent": buildOptions.isSilent });
|
|
||||||
const { keycloakVersion } = await promptKeycloakVersion();
|
|
||||||
|
|
||||||
const destDirPath = pathJoin(buildOptions.keycloakifyBuildDirPath, "src", "main", "resources", "theme");
|
|
||||||
|
|
||||||
logger.log(`Downloading builtins theme of Keycloak ${keycloakVersion} here ${destDirPath}`);
|
|
||||||
|
|
||||||
await downloadBuiltinKeycloakTheme({
|
|
||||||
"projectDirPath": process.cwd(),
|
|
||||||
keycloakVersion,
|
|
||||||
destDirPath
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (require.main === module) {
|
|
||||||
main();
|
|
||||||
}
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
|
|
||||||
import { getProjectRoot } from "./tools/getProjectRoot";
|
|
||||||
import cliSelect from "cli-select";
|
|
||||||
import {
|
|
||||||
loginThemePageIds,
|
|
||||||
accountThemePageIds,
|
|
||||||
type LoginThemePageId,
|
|
||||||
type AccountThemePageId,
|
|
||||||
themeTypes,
|
|
||||||
type ThemeType
|
|
||||||
} from "./keycloakify/generateFtl";
|
|
||||||
import { capitalize } from "tsafe/capitalize";
|
|
||||||
import { readFile, writeFile } from "fs/promises";
|
|
||||||
import { existsSync } from "fs";
|
|
||||||
import { join as pathJoin, relative as pathRelative } from "path";
|
|
||||||
import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
|
|
||||||
import { assert, Equals } from "tsafe/assert";
|
|
||||||
import { getThemeSrcDirPath } from "./getSrcDirPath";
|
|
||||||
|
|
||||||
(async () => {
|
|
||||||
console.log("Select a theme type");
|
|
||||||
|
|
||||||
const { value: themeType } = await cliSelect<ThemeType>({
|
|
||||||
"values": [...themeTypes]
|
|
||||||
}).catch(() => {
|
|
||||||
console.log("Aborting");
|
|
||||||
|
|
||||||
process.exit(-1);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log("Select a page you would like to eject");
|
|
||||||
|
|
||||||
const { value: pageId } = await cliSelect<LoginThemePageId | AccountThemePageId>({
|
|
||||||
"values": (() => {
|
|
||||||
switch (themeType) {
|
|
||||||
case "login":
|
|
||||||
return [...loginThemePageIds];
|
|
||||||
case "account":
|
|
||||||
return [...accountThemePageIds];
|
|
||||||
}
|
|
||||||
assert<Equals<typeof themeType, never>>(false);
|
|
||||||
})()
|
|
||||||
}).catch(() => {
|
|
||||||
console.log("Aborting");
|
|
||||||
|
|
||||||
process.exit(-1);
|
|
||||||
});
|
|
||||||
|
|
||||||
const pageBasename = capitalize(kebabCaseToCamelCase(pageId)).replace(/ftl$/, "tsx");
|
|
||||||
|
|
||||||
const { themeSrcDirPath } = getThemeSrcDirPath({ "projectDirPath": process.cwd() });
|
|
||||||
|
|
||||||
const targetFilePath = pathJoin(themeSrcDirPath, themeType, "pages", pageBasename);
|
|
||||||
|
|
||||||
if (existsSync(targetFilePath)) {
|
|
||||||
console.log(`${pageId} is already ejected, ${pathRelative(process.cwd(), targetFilePath)} already exists`);
|
|
||||||
|
|
||||||
process.exit(-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
await writeFile(targetFilePath, await readFile(pathJoin(getProjectRoot(), "src", themeType, "pages", pageBasename)));
|
|
||||||
|
|
||||||
console.log(`${pathRelative(process.cwd(), targetFilePath)} created`);
|
|
||||||
})();
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
import * as fs from "fs";
|
|
||||||
import { exclude } from "tsafe";
|
|
||||||
import { crawl } from "./tools/crawl";
|
|
||||||
import { join as pathJoin } from "path";
|
|
||||||
import { themeTypes } from "./keycloakify/generateFtl";
|
|
||||||
|
|
||||||
const themeSrcDirBasenames = ["keycloak-theme", "keycloak_theme"];
|
|
||||||
|
|
||||||
/** Can't catch error, if the directory isn't found, this function will just exit the process with an error message. */
|
|
||||||
export function getThemeSrcDirPath(params: { projectDirPath: string }) {
|
|
||||||
const { projectDirPath } = params;
|
|
||||||
|
|
||||||
const srcDirPath = pathJoin(projectDirPath, "src");
|
|
||||||
|
|
||||||
const themeSrcDirPath: string | undefined = crawl({ "dirPath": srcDirPath, "returnedPathsType": "relative to dirPath" })
|
|
||||||
.map(fileRelativePath => {
|
|
||||||
for (const themeSrcDirBasename of themeSrcDirBasenames) {
|
|
||||||
const split = fileRelativePath.split(themeSrcDirBasename);
|
|
||||||
if (split.length === 2) {
|
|
||||||
return pathJoin(srcDirPath, split[0] + themeSrcDirBasename);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return undefined;
|
|
||||||
})
|
|
||||||
.filter(exclude(undefined))[0];
|
|
||||||
|
|
||||||
if (themeSrcDirPath !== undefined) {
|
|
||||||
return { themeSrcDirPath };
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const themeType of [...themeTypes, "email"]) {
|
|
||||||
if (!fs.existsSync(pathJoin(srcDirPath, themeType))) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
return { "themeSrcDirPath": srcDirPath };
|
|
||||||
}
|
|
||||||
|
|
||||||
console.error(
|
|
||||||
[
|
|
||||||
"Can't locate your theme source directory. It should be either: ",
|
|
||||||
"src/ or src/keycloak-theme or src/keycloak_theme.",
|
|
||||||
"Example in the starter: https://github.com/keycloakify/keycloakify-starter/tree/main/src/keycloak-theme"
|
|
||||||
].join("\n")
|
|
||||||
);
|
|
||||||
|
|
||||||
process.exit(-1);
|
|
||||||
}
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
|
|
||||||
import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme";
|
|
||||||
import { join as pathJoin, relative as pathRelative } from "path";
|
|
||||||
import { transformCodebase } from "./tools/transformCodebase";
|
|
||||||
import { promptKeycloakVersion } from "./promptKeycloakVersion";
|
|
||||||
import { readBuildOptions } from "./keycloakify/BuildOptions";
|
|
||||||
import * as fs from "fs";
|
|
||||||
import { getLogger } from "./tools/logger";
|
|
||||||
import { getThemeSrcDirPath } from "./getSrcDirPath";
|
|
||||||
|
|
||||||
export async function main() {
|
|
||||||
const projectDirPath = process.cwd();
|
|
||||||
|
|
||||||
const { isSilent } = readBuildOptions({
|
|
||||||
projectDirPath,
|
|
||||||
"processArgv": process.argv.slice(2)
|
|
||||||
});
|
|
||||||
|
|
||||||
const logger = getLogger({ isSilent });
|
|
||||||
|
|
||||||
const { themeSrcDirPath } = getThemeSrcDirPath({
|
|
||||||
projectDirPath
|
|
||||||
});
|
|
||||||
|
|
||||||
const emailThemeSrcDirPath = pathJoin(themeSrcDirPath, "email");
|
|
||||||
|
|
||||||
if (fs.existsSync(emailThemeSrcDirPath)) {
|
|
||||||
logger.warn(`There is already a ${pathRelative(process.cwd(), emailThemeSrcDirPath)} directory in your project. Aborting.`);
|
|
||||||
|
|
||||||
process.exit(-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
const { keycloakVersion } = await promptKeycloakVersion();
|
|
||||||
|
|
||||||
const builtinKeycloakThemeTmpDirPath = pathJoin(emailThemeSrcDirPath, "..", "tmp_xIdP3_builtin_keycloak_theme");
|
|
||||||
|
|
||||||
await downloadBuiltinKeycloakTheme({
|
|
||||||
projectDirPath,
|
|
||||||
keycloakVersion,
|
|
||||||
"destDirPath": builtinKeycloakThemeTmpDirPath
|
|
||||||
});
|
|
||||||
|
|
||||||
transformCodebase({
|
|
||||||
"srcDirPath": pathJoin(builtinKeycloakThemeTmpDirPath, "base", "email"),
|
|
||||||
"destDirPath": emailThemeSrcDirPath
|
|
||||||
});
|
|
||||||
|
|
||||||
{
|
|
||||||
const themePropertyFilePath = pathJoin(emailThemeSrcDirPath, "theme.properties");
|
|
||||||
|
|
||||||
fs.writeFileSync(themePropertyFilePath, Buffer.from(`parent=base\n${fs.readFileSync(themePropertyFilePath).toString("utf8")}`, "utf8"));
|
|
||||||
}
|
|
||||||
|
|
||||||
logger.log(`${pathRelative(process.cwd(), emailThemeSrcDirPath)} ready to be customized, feel free to remove every file you do not customize`);
|
|
||||||
|
|
||||||
fs.rmSync(builtinKeycloakThemeTmpDirPath, { "recursive": true, "force": true });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (require.main === module) {
|
|
||||||
main();
|
|
||||||
}
|
|
||||||
@ -1,138 +0,0 @@
|
|||||||
import { assert } from "tsafe/assert";
|
|
||||||
import { id } from "tsafe/id";
|
|
||||||
import { parse as urlParse } from "url";
|
|
||||||
import { typeGuard } from "tsafe/typeGuard";
|
|
||||||
import { symToStr } from "tsafe/symToStr";
|
|
||||||
import { bundlers, getParsedPackageJson, type Bundler } from "./parsedPackageJson";
|
|
||||||
import { join as pathJoin, sep as pathSep } from "path";
|
|
||||||
import parseArgv from "minimist";
|
|
||||||
|
|
||||||
/** Consolidated build option gathered form CLI arguments and config in package.json */
|
|
||||||
export type BuildOptions = {
|
|
||||||
isSilent: boolean;
|
|
||||||
themeVersion: string;
|
|
||||||
themeName: string;
|
|
||||||
extraThemeNames: string[];
|
|
||||||
extraThemeProperties: string[] | undefined;
|
|
||||||
groupId: string;
|
|
||||||
artifactId: string;
|
|
||||||
bundler: Bundler;
|
|
||||||
keycloakVersionDefaultAssets: string;
|
|
||||||
/** Directory of your built react project. Defaults to {cwd}/build */
|
|
||||||
reactAppBuildDirPath: string;
|
|
||||||
/** Directory that keycloakify outputs to. Defaults to {cwd}/build_keycloak */
|
|
||||||
keycloakifyBuildDirPath: string;
|
|
||||||
/** If your app is hosted under a subpath, it's the case in CRA if you have "homepage": "https://example.com/my-app" in your package.json
|
|
||||||
* In this case the urlPathname will be "/my-app/" */
|
|
||||||
urlPathname: string | undefined;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function readBuildOptions(params: { projectDirPath: string; processArgv: string[] }): BuildOptions {
|
|
||||||
const { projectDirPath, processArgv } = params;
|
|
||||||
|
|
||||||
const { isSilentCliParamProvided } = (() => {
|
|
||||||
const argv = parseArgv(processArgv);
|
|
||||||
|
|
||||||
return {
|
|
||||||
"isSilentCliParamProvided": typeof argv["silent"] === "boolean" ? argv["silent"] : false
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
|
|
||||||
const parsedPackageJson = getParsedPackageJson({ projectDirPath });
|
|
||||||
|
|
||||||
const { name, keycloakify = {}, version, homepage } = parsedPackageJson;
|
|
||||||
|
|
||||||
const { extraThemeProperties, groupId, artifactId, bundler, keycloakVersionDefaultAssets, extraThemeNames = [] } = keycloakify ?? {};
|
|
||||||
|
|
||||||
const themeName =
|
|
||||||
keycloakify.themeName ??
|
|
||||||
name
|
|
||||||
.replace(/^@(.*)/, "$1")
|
|
||||||
.split("/")
|
|
||||||
.join("-");
|
|
||||||
|
|
||||||
return {
|
|
||||||
themeName,
|
|
||||||
extraThemeNames,
|
|
||||||
"bundler": (() => {
|
|
||||||
const { KEYCLOAKIFY_BUNDLER } = process.env;
|
|
||||||
|
|
||||||
assert(
|
|
||||||
typeGuard<Bundler | undefined>(KEYCLOAKIFY_BUNDLER, [undefined, ...id<readonly string[]>(bundlers)].includes(KEYCLOAKIFY_BUNDLER)),
|
|
||||||
`${symToStr({ KEYCLOAKIFY_BUNDLER })} should be one of ${bundlers.join(", ")}`
|
|
||||||
);
|
|
||||||
|
|
||||||
return KEYCLOAKIFY_BUNDLER ?? bundler ?? "keycloakify";
|
|
||||||
})(),
|
|
||||||
"artifactId": process.env.KEYCLOAKIFY_ARTIFACT_ID ?? artifactId ?? `${themeName}-keycloak-theme`,
|
|
||||||
"groupId": (() => {
|
|
||||||
const fallbackGroupId = `${themeName}.keycloak`;
|
|
||||||
|
|
||||||
return (
|
|
||||||
process.env.KEYCLOAKIFY_GROUP_ID ??
|
|
||||||
groupId ??
|
|
||||||
(!homepage
|
|
||||||
? fallbackGroupId
|
|
||||||
: urlParse(homepage)
|
|
||||||
.host?.replace(/:[0-9]+$/, "")
|
|
||||||
?.split(".")
|
|
||||||
.reverse()
|
|
||||||
.join(".") ?? fallbackGroupId) + ".keycloak"
|
|
||||||
);
|
|
||||||
})(),
|
|
||||||
"themeVersion": process.env.KEYCLOAKIFY_THEME_VERSION ?? process.env.KEYCLOAKIFY_VERSION ?? version ?? "0.0.0",
|
|
||||||
extraThemeProperties,
|
|
||||||
"isSilent": isSilentCliParamProvided,
|
|
||||||
"keycloakVersionDefaultAssets": keycloakVersionDefaultAssets ?? "11.0.3",
|
|
||||||
"reactAppBuildDirPath": (() => {
|
|
||||||
let { reactAppBuildDirPath = undefined } = parsedPackageJson.keycloakify ?? {};
|
|
||||||
|
|
||||||
if (reactAppBuildDirPath === undefined) {
|
|
||||||
return pathJoin(projectDirPath, "build");
|
|
||||||
}
|
|
||||||
|
|
||||||
if (pathSep === "\\") {
|
|
||||||
reactAppBuildDirPath = reactAppBuildDirPath.replace(/\//g, pathSep);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (reactAppBuildDirPath.startsWith(`.${pathSep}`)) {
|
|
||||||
return pathJoin(projectDirPath, reactAppBuildDirPath);
|
|
||||||
}
|
|
||||||
|
|
||||||
return reactAppBuildDirPath;
|
|
||||||
})(),
|
|
||||||
"keycloakifyBuildDirPath": (() => {
|
|
||||||
let { keycloakifyBuildDirPath = undefined } = parsedPackageJson.keycloakify ?? {};
|
|
||||||
|
|
||||||
if (keycloakifyBuildDirPath === undefined) {
|
|
||||||
return pathJoin(projectDirPath, "build_keycloak");
|
|
||||||
}
|
|
||||||
|
|
||||||
if (pathSep === "\\") {
|
|
||||||
keycloakifyBuildDirPath = keycloakifyBuildDirPath.replace(/\//g, pathSep);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (keycloakifyBuildDirPath.startsWith(`.${pathSep}`)) {
|
|
||||||
return pathJoin(projectDirPath, keycloakifyBuildDirPath);
|
|
||||||
}
|
|
||||||
|
|
||||||
return keycloakifyBuildDirPath;
|
|
||||||
})(),
|
|
||||||
"urlPathname": (() => {
|
|
||||||
const { homepage } = parsedPackageJson;
|
|
||||||
|
|
||||||
let url: URL | undefined = undefined;
|
|
||||||
|
|
||||||
if (homepage !== undefined) {
|
|
||||||
url = new URL(homepage);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (url === undefined) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
const out = url.pathname.replace(/([^/])$/, "$1/");
|
|
||||||
return out === "/" ? undefined : out;
|
|
||||||
})()
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export const ftlValuesGlobalName = "kcContext";
|
|
||||||
@ -1,682 +0,0 @@
|
|||||||
<script>const _=
|
|
||||||
<#assign pageId="PAGE_ID_xIgLsPgGId9D8e">
|
|
||||||
(()=>{
|
|
||||||
|
|
||||||
const out = ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
|
|
||||||
|
|
||||||
out["msg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
|
|
||||||
out["advancedMsg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
|
|
||||||
|
|
||||||
out["messagesPerField"]= {
|
|
||||||
<#assign fieldNames = [ FIELD_NAMES_eKsIY4ZsZ4xeM ]>
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#if profile?? && profile.attributes?? && profile.attributes?is_enumerable>
|
|
||||||
<#list profile.attributes as attribute>
|
|
||||||
<#if fieldNames?seq_contains(attribute.name)>
|
|
||||||
<#continue>
|
|
||||||
</#if>
|
|
||||||
<#assign fieldNames += [attribute.name]>
|
|
||||||
</#list>
|
|
||||||
</#if>
|
|
||||||
<#recover>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
"printIfExists": function (fieldName, text) {
|
|
||||||
|
|
||||||
<#if !messagesPerField?? || !(messagesPerField?is_hash)>
|
|
||||||
throw new Error("You're not supposed to use messagesPerField.printIfExists in this page");
|
|
||||||
<#else>
|
|
||||||
<#list fieldNames as fieldName>
|
|
||||||
if(fieldName === "${fieldName}" ){
|
|
||||||
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/pull/359 Compat with Keycloak prior v12 -->
|
|
||||||
<#if !messagesPerField.existsError??>
|
|
||||||
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/pull/218 -->
|
|
||||||
<#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
|
|
||||||
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('username')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
<#if !doExistMessageForUsernameOrPassword>
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('password')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = true>
|
|
||||||
</#attempt>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
return <#if doExistMessageForUsernameOrPassword>text<#else>undefined</#if>;
|
|
||||||
|
|
||||||
<#else>
|
|
||||||
|
|
||||||
<#assign doExistMessageForField = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistMessageForField = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
return <#if doExistMessageForField>text<#else>undefined</#if>;
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#else>
|
|
||||||
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/pull/218 -->
|
|
||||||
<#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
|
|
||||||
|
|
||||||
<#assign doExistErrorOnUsernameOrPassword = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistErrorOnUsernameOrPassword = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
<#if doExistErrorOnUsernameOrPassword>
|
|
||||||
return text;
|
|
||||||
<#else>
|
|
||||||
|
|
||||||
<#assign doExistMessageForField = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistMessageForField = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
return <#if doExistMessageForField>text<#else>undefined</#if>;
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#else>
|
|
||||||
|
|
||||||
<#assign doExistMessageForField = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistMessageForField = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
return <#if doExistMessageForField>text<#else>undefined</#if>;
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
}
|
|
||||||
</#list>
|
|
||||||
|
|
||||||
throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
},
|
|
||||||
"existsError": function (fieldName) {
|
|
||||||
|
|
||||||
<#if !messagesPerField?? || !(messagesPerField?is_hash)>
|
|
||||||
throw new Error("You're not supposed to use messagesPerField.printIfExists in this page");
|
|
||||||
<#else>
|
|
||||||
<#list fieldNames as fieldName>
|
|
||||||
if(fieldName === "${fieldName}" ){
|
|
||||||
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/pull/359 Compat with Keycloak prior v12 -->
|
|
||||||
<#if !messagesPerField.existsError??>
|
|
||||||
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/pull/218 -->
|
|
||||||
<#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
|
|
||||||
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('username')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
<#if !doExistMessageForUsernameOrPassword>
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('password')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = true>
|
|
||||||
</#attempt>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
return <#if doExistMessageForUsernameOrPassword>true<#else>false</#if>;
|
|
||||||
|
|
||||||
<#else>
|
|
||||||
|
|
||||||
<#assign doExistMessageForField = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistMessageForField = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
return <#if doExistMessageForField>true<#else>false</#if>;
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#else>
|
|
||||||
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/pull/218 -->
|
|
||||||
<#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
|
|
||||||
|
|
||||||
<#assign doExistErrorOnUsernameOrPassword = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistErrorOnUsernameOrPassword = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
return <#if doExistErrorOnUsernameOrPassword>true<#else>false</#if>;
|
|
||||||
|
|
||||||
<#else>
|
|
||||||
|
|
||||||
<#assign doExistErrorMessageForField = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistErrorMessageForField = messagesPerField.existsError('${fieldName}')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistErrorMessageForField = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
return <#if doExistErrorMessageForField>true<#else>false</#if>;
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
}
|
|
||||||
</#list>
|
|
||||||
|
|
||||||
throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
},
|
|
||||||
"get": function (fieldName) {
|
|
||||||
|
|
||||||
|
|
||||||
<#if !messagesPerField?? || !(messagesPerField?is_hash)>
|
|
||||||
throw new Error("You're not supposed to use messagesPerField.get in this page");
|
|
||||||
<#else>
|
|
||||||
<#list fieldNames as fieldName>
|
|
||||||
if(fieldName === "${fieldName}" ){
|
|
||||||
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/pull/359 Compat with Keycloak prior v12 -->
|
|
||||||
<#if !messagesPerField.existsError??>
|
|
||||||
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/pull/218 -->
|
|
||||||
<#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
|
|
||||||
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('username')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
<#if !doExistMessageForUsernameOrPassword>
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('password')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = true>
|
|
||||||
</#attempt>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#if !doExistMessageForUsernameOrPassword>
|
|
||||||
return "";
|
|
||||||
<#else>
|
|
||||||
<#attempt>
|
|
||||||
return "${kcSanitize(msg('invalidUserMessage'))?no_esc}";
|
|
||||||
<#recover>
|
|
||||||
return "Invalid username or password.";
|
|
||||||
</#attempt>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#else>
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
return "${messagesPerField.get('${fieldName}')?no_esc}";
|
|
||||||
<#recover>
|
|
||||||
return "invalid field";
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#else>
|
|
||||||
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/pull/218 -->
|
|
||||||
<#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
|
|
||||||
|
|
||||||
<#assign doExistErrorOnUsernameOrPassword = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistErrorOnUsernameOrPassword = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
<#if doExistErrorOnUsernameOrPassword>
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
return "${kcSanitize(msg('invalidUserMessage'))?no_esc}";
|
|
||||||
<#recover>
|
|
||||||
return "Invalid username or password.";
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
<#else>
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
return "${messagesPerField.get('${fieldName}')?no_esc}";
|
|
||||||
<#recover>
|
|
||||||
return "";
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#else>
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
return "${messagesPerField.get('${fieldName}')?no_esc}";
|
|
||||||
<#recover>
|
|
||||||
return "invalid field";
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
}
|
|
||||||
</#list>
|
|
||||||
|
|
||||||
throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
},
|
|
||||||
"exists": function (fieldName) {
|
|
||||||
|
|
||||||
<#if !messagesPerField?? || !(messagesPerField?is_hash)>
|
|
||||||
throw new Error("You're not supposed to use messagesPerField.exists in this page");
|
|
||||||
<#else>
|
|
||||||
<#list fieldNames as fieldName>
|
|
||||||
if(fieldName === "${fieldName}" ){
|
|
||||||
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/pull/359 Compat with Keycloak prior v12 -->
|
|
||||||
<#if !messagesPerField.existsError??>
|
|
||||||
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/pull/218 -->
|
|
||||||
<#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
|
|
||||||
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('username')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
<#if !doExistMessageForUsernameOrPassword>
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('password')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistMessageForUsernameOrPassword = true>
|
|
||||||
</#attempt>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
return <#if doExistMessageForUsernameOrPassword>true<#else>false</#if>;
|
|
||||||
|
|
||||||
<#else>
|
|
||||||
|
|
||||||
<#assign doExistMessageForField = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistMessageForField = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
return <#if doExistMessageForField>true<#else>false</#if>;
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#else>
|
|
||||||
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/pull/218 -->
|
|
||||||
<#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
|
|
||||||
|
|
||||||
<#assign doExistErrorOnUsernameOrPassword = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistErrorOnUsernameOrPassword = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
return <#if doExistErrorOnUsernameOrPassword>true<#else>false</#if>;
|
|
||||||
|
|
||||||
<#else>
|
|
||||||
|
|
||||||
<#assign doExistErrorMessageForField = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#assign doExistErrorMessageForField = messagesPerField.exists('${fieldName}')>
|
|
||||||
<#recover>
|
|
||||||
<#assign doExistErrorMessageForField = true>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
return <#if doExistErrorMessageForField>true<#else>false</#if>;
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
}
|
|
||||||
</#list>
|
|
||||||
|
|
||||||
throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
<#if account??>
|
|
||||||
out["url"]["getLogoutUrl"] = function () {
|
|
||||||
<#attempt>
|
|
||||||
return "${url.getLogoutUrl()}";
|
|
||||||
<#recover>
|
|
||||||
</#attempt>
|
|
||||||
};
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
out["keycloakifyVersion"] = "KEYCLOAKIFY_VERSION_xEdKd3xEdr";
|
|
||||||
out["themeVersion"] = "KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx";
|
|
||||||
out["themeType"] = "KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr";
|
|
||||||
out["themeName"] = "KEYCLOAKIFY_THEME_NAME_cXxKd3xEer";
|
|
||||||
out["pageId"] = "${pageId}";
|
|
||||||
|
|
||||||
return out;
|
|
||||||
|
|
||||||
})()
|
|
||||||
<#function ftl_object_to_js_code_declaring_an_object object path>
|
|
||||||
|
|
||||||
<#local isHash = "">
|
|
||||||
<#attempt>
|
|
||||||
<#local isHash = object?is_hash || object?is_hash_ex>
|
|
||||||
<#recover>
|
|
||||||
<#return "ABORT: Can't evaluate if " + path?join(".") + " is hash">
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
<#if isHash>
|
|
||||||
|
|
||||||
<#if path?size gt 10>
|
|
||||||
<#return "ABORT: Too many recursive calls">
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#local keys = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#local keys = object?keys>
|
|
||||||
<#recover>
|
|
||||||
<#return "ABORT: We can't list keys on this object">
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
|
|
||||||
<#local out_seq = []>
|
|
||||||
|
|
||||||
<#list keys as key>
|
|
||||||
|
|
||||||
<#if ["class","declaredConstructors","superclass","declaringClass" ]?seq_contains(key) >
|
|
||||||
<#continue>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#if
|
|
||||||
(
|
|
||||||
["loginUpdatePasswordUrl", "loginUpdateProfileUrl", "loginUsernameReminderUrl", "loginUpdateTotpUrl"]?seq_contains(key) &&
|
|
||||||
are_same_path(path, ["url"])
|
|
||||||
) || (
|
|
||||||
key == "updateProfileCtx" &&
|
|
||||||
are_same_path(path, [])
|
|
||||||
) || (
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/pull/65#issuecomment-991896344 (reports with saml-post-form.ftl) -->
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/issues/91#issue-1212319466 (reports with error.ftl and Kc18) -->
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/issues/109#issuecomment-1134610163 -->
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/issues/357 -->
|
|
||||||
key == "loginAction" &&
|
|
||||||
are_same_path(path, ["url"]) &&
|
|
||||||
["saml-post-form.ftl", "error.ftl", "info.ftl", "login-oauth-grant.ftl", "logout-confirm.ftl"]?seq_contains(pageId) &&
|
|
||||||
!(auth?has_content && auth.showTryAnotherWayLink())
|
|
||||||
) || (
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/issues/362 -->
|
|
||||||
["secretData", "value"]?seq_contains(key) &&
|
|
||||||
are_same_path(path, [ "totp", "otpCredentials", "*" ])
|
|
||||||
) || (
|
|
||||||
["contextData", "idpConfig", "idp", "authenticationSession"]?seq_contains(key) &&
|
|
||||||
are_same_path(path, ["brokerContext"]) &&
|
|
||||||
["login-idp-link-confirm.ftl", "login-idp-link-email.ftl" ]?seq_contains(pageId)
|
|
||||||
) || (
|
|
||||||
key == "identityProviderBrokerCtx" &&
|
|
||||||
are_same_path(path, []) &&
|
|
||||||
["login-idp-link-confirm.ftl", "login-idp-link-email.ftl" ]?seq_contains(pageId)
|
|
||||||
) || (
|
|
||||||
["masterAdminClient", "delegateForUpdate", "defaultRole"]?seq_contains(key) &&
|
|
||||||
are_same_path(path, ["realm"])
|
|
||||||
) || (
|
|
||||||
"error.ftl" == pageId &&
|
|
||||||
are_same_path(path, ["realm"]) &&
|
|
||||||
!["name", "displayName", "displayNameHtml", "internationalizationEnabled", "registrationEmailAsUsername" ]?seq_contains(key)
|
|
||||||
)
|
|
||||||
>
|
|
||||||
<#local out_seq += ["/*If you need '" + key + "' on " + pageId + ", please submit an issue to the Keycloakify repo*/"]>
|
|
||||||
<#continue>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#if pageId == "register.ftl" && key == "attemptedUsername" && are_same_path(path, ["auth"])>
|
|
||||||
<#attempt>
|
|
||||||
<#-- https://github.com/keycloak/keycloak/blob/3a2bf0c04bcde185e497aaa32d0bb7ab7520cf4a/themes/src/main/resources/theme/base/login/template.ftl#L63 -->
|
|
||||||
<#-- https://github.com/keycloakify/keycloakify/discussions/406 -->
|
|
||||||
<#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
|
|
||||||
<#continue>
|
|
||||||
</#if>
|
|
||||||
<#recover>
|
|
||||||
</#attempt>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#if !object[key]??>
|
|
||||||
<#continue>
|
|
||||||
</#if>
|
|
||||||
<#recover>
|
|
||||||
<#local out_seq += ["/*Couldn't test if '" + key + "' is available on this object*/"]>
|
|
||||||
<#continue>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
<#local propertyValue = "">
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#local propertyValue = object[key]>
|
|
||||||
<#recover>
|
|
||||||
<#local out_seq += ["/*Couldn't dereference '" + key + "' on this object*/"]>
|
|
||||||
<#continue>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
<#local rec_out = ftl_object_to_js_code_declaring_an_object(propertyValue, path + [ key ])>
|
|
||||||
|
|
||||||
<#if rec_out?starts_with("ABORT:")>
|
|
||||||
|
|
||||||
<#local errorMessage = rec_out?remove_beginning("ABORT:")>
|
|
||||||
|
|
||||||
<#if errorMessage != " It's a method" >
|
|
||||||
<#local out_seq += ["/*" + key + ": " + errorMessage + "*/"]>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#continue>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#local out_seq += ['"' + key + '": ' + rec_out + ","]>
|
|
||||||
|
|
||||||
</#list>
|
|
||||||
|
|
||||||
<#return (["{"] + out_seq?map(str -> ""?right_pad(4 * (path?size + 1)) + str) + [ ""?right_pad(4 * path?size) + "}"])?join("\n")>
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#local isMethod = "">
|
|
||||||
<#attempt>
|
|
||||||
<#local isMethod = object?is_method>
|
|
||||||
<#recover>
|
|
||||||
<#return "ABORT: Can't test if it'sa method.">
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
<#if isMethod>
|
|
||||||
|
|
||||||
<#if are_same_path(path, ["auth", "showUsername"])>
|
|
||||||
<#attempt>
|
|
||||||
<#return auth.showUsername()?c>
|
|
||||||
<#recover>
|
|
||||||
<#return "ABORT: Couldn't evaluate auth.showUsername()">
|
|
||||||
</#attempt>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#if are_same_path(path, ["auth", "showResetCredentials"])>
|
|
||||||
<#attempt>
|
|
||||||
<#return auth.showResetCredentials()?c>
|
|
||||||
<#recover>
|
|
||||||
<#return "ABORT: Couldn't evaluate auth.showResetCredentials()">
|
|
||||||
</#attempt>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#if are_same_path(path, ["auth", "showTryAnotherWayLink"])>
|
|
||||||
<#attempt>
|
|
||||||
<#return auth.showTryAnotherWayLink()?c>
|
|
||||||
<#recover>
|
|
||||||
<#return "ABORT: Couldn't evaluate auth.showTryAnotherWayLink()">
|
|
||||||
</#attempt>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#return "ABORT: It's a method">
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#local isBoolean = "">
|
|
||||||
<#attempt>
|
|
||||||
<#local isBoolean = object?is_boolean>
|
|
||||||
<#recover>
|
|
||||||
<#return "ABORT: Can't test if it's a boolean">
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
<#if isBoolean>
|
|
||||||
<#return object?c>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#local isEnumerable = "">
|
|
||||||
<#attempt>
|
|
||||||
<#local isEnumerable = object?is_enumerable>
|
|
||||||
<#recover>
|
|
||||||
<#return "ABORT: Can't test if it's an enumerable">
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
|
|
||||||
<#if isEnumerable>
|
|
||||||
|
|
||||||
<#local out_seq = []>
|
|
||||||
|
|
||||||
<#local i = 0>
|
|
||||||
|
|
||||||
<#list object as array_item>
|
|
||||||
|
|
||||||
<#if !array_item??>
|
|
||||||
<#local out_seq += ["null,"]>
|
|
||||||
<#continue>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#local rec_out = ftl_object_to_js_code_declaring_an_object(array_item, path + [ i ])>
|
|
||||||
|
|
||||||
<#local i = i + 1>
|
|
||||||
|
|
||||||
<#if rec_out?starts_with("ABORT:")>
|
|
||||||
|
|
||||||
<#local errorMessage = rec_out?remove_beginning("ABORT:")>
|
|
||||||
|
|
||||||
<#if errorMessage != " It's a method" >
|
|
||||||
<#local out_seq += ["/*" + i?string + ": " + errorMessage + "*/"]>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#continue>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#local out_seq += [rec_out + ","]>
|
|
||||||
|
|
||||||
</#list>
|
|
||||||
|
|
||||||
<#return (["["] + out_seq?map(str -> ""?right_pad(4 * (path?size + 1)) + str) + [ ""?right_pad(4 * path?size) + "]"])?join("\n")>
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#local isDate = "">
|
|
||||||
<#attempt>
|
|
||||||
<#local isDate = object?is_date_like>
|
|
||||||
<#recover>
|
|
||||||
<#return "ABORT: Can't test if it's a date">
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
<#if isDate>
|
|
||||||
<#return '"' + object?datetime?iso_utc + '"'>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#attempt>
|
|
||||||
<#return '"' + object?js_string + '"'>;
|
|
||||||
<#recover>
|
|
||||||
</#attempt>
|
|
||||||
|
|
||||||
<#return "ABORT: Couldn't convert into string non hash, non method, non boolean, non enumerable object">
|
|
||||||
|
|
||||||
</#function>
|
|
||||||
<#function are_same_path path searchedPath>
|
|
||||||
|
|
||||||
<#if path?size != searchedPath?size>
|
|
||||||
<#return false>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#local i=0>
|
|
||||||
|
|
||||||
<#list path as property>
|
|
||||||
|
|
||||||
<#local searchedProperty=searchedPath[i]>
|
|
||||||
|
|
||||||
<#if searchedProperty?is_string && searchedProperty == "*">
|
|
||||||
<#continue>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#if searchedProperty?is_string && !property?is_string>
|
|
||||||
<#return false>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#if searchedProperty?is_number && !property?is_number>
|
|
||||||
<#return false>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#if searchedProperty?string != property?string>
|
|
||||||
<#return false>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#local i+= 1>
|
|
||||||
|
|
||||||
</#list>
|
|
||||||
|
|
||||||
<#return true>
|
|
||||||
|
|
||||||
</#function>
|
|
||||||
</script>
|
|
||||||
@ -1,147 +0,0 @@
|
|||||||
import cheerio from "cheerio";
|
|
||||||
import { replaceImportsFromStaticInJsCode } from "../replacers/replaceImportsFromStaticInJsCode";
|
|
||||||
import { generateCssCodeToDefineGlobals } from "../replacers/replaceImportsInCssCode";
|
|
||||||
import { replaceImportsInInlineCssCode } from "../replacers/replaceImportsInInlineCssCode";
|
|
||||||
import * as fs from "fs";
|
|
||||||
import { join as pathJoin } from "path";
|
|
||||||
import { objectKeys } from "tsafe/objectKeys";
|
|
||||||
import { ftlValuesGlobalName } from "../ftlValuesGlobalName";
|
|
||||||
import type { BuildOptions } from "../BuildOptions";
|
|
||||||
import { assert } from "tsafe/assert";
|
|
||||||
|
|
||||||
export const themeTypes = ["login", "account"] as const;
|
|
||||||
|
|
||||||
export type ThemeType = (typeof themeTypes)[number];
|
|
||||||
|
|
||||||
export type BuildOptionsLike = {
|
|
||||||
themeName: string;
|
|
||||||
themeVersion: string;
|
|
||||||
urlPathname: string | undefined;
|
|
||||||
};
|
|
||||||
|
|
||||||
assert<BuildOptions extends BuildOptionsLike ? true : false>();
|
|
||||||
|
|
||||||
export function generateFtlFilesCodeFactory(params: {
|
|
||||||
indexHtmlCode: string;
|
|
||||||
//NOTE: Expected to be an empty object if external assets mode is enabled.
|
|
||||||
cssGlobalsToDefine: Record<string, string>;
|
|
||||||
buildOptions: BuildOptionsLike;
|
|
||||||
keycloakifyVersion: string;
|
|
||||||
themeType: ThemeType;
|
|
||||||
fieldNames: string[];
|
|
||||||
}) {
|
|
||||||
const { cssGlobalsToDefine, indexHtmlCode, buildOptions, keycloakifyVersion, themeType, fieldNames } = params;
|
|
||||||
|
|
||||||
const $ = cheerio.load(indexHtmlCode);
|
|
||||||
|
|
||||||
fix_imports_statements: {
|
|
||||||
$("script:not([src])").each((...[, element]) => {
|
|
||||||
const jsCode = $(element).html();
|
|
||||||
|
|
||||||
assert(jsCode !== null);
|
|
||||||
|
|
||||||
const { fixedJsCode } = replaceImportsFromStaticInJsCode({ jsCode });
|
|
||||||
|
|
||||||
$(element).text(fixedJsCode);
|
|
||||||
});
|
|
||||||
|
|
||||||
$("style").each((...[, element]) => {
|
|
||||||
const cssCode = $(element).html();
|
|
||||||
|
|
||||||
assert(cssCode !== null);
|
|
||||||
|
|
||||||
const { fixedCssCode } = replaceImportsInInlineCssCode({
|
|
||||||
cssCode,
|
|
||||||
buildOptions
|
|
||||||
});
|
|
||||||
|
|
||||||
$(element).text(fixedCssCode);
|
|
||||||
});
|
|
||||||
|
|
||||||
(
|
|
||||||
[
|
|
||||||
["link", "href"],
|
|
||||||
["script", "src"]
|
|
||||||
] as const
|
|
||||||
).forEach(([selector, attrName]) =>
|
|
||||||
$(selector).each((...[, element]) => {
|
|
||||||
const href = $(element).attr(attrName);
|
|
||||||
|
|
||||||
if (href === undefined) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
$(element).attr(
|
|
||||||
attrName,
|
|
||||||
href.replace(new RegExp(`^${(buildOptions.urlPathname ?? "/").replace(/\//g, "\\/")}`), "${url.resourcesPath}/build/")
|
|
||||||
);
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
if (Object.keys(cssGlobalsToDefine).length !== 0) {
|
|
||||||
$("head").prepend(
|
|
||||||
[
|
|
||||||
"",
|
|
||||||
"<style>",
|
|
||||||
generateCssCodeToDefineGlobals({
|
|
||||||
cssGlobalsToDefine,
|
|
||||||
buildOptions
|
|
||||||
}).cssCodeToPrependInHead,
|
|
||||||
"</style>",
|
|
||||||
""
|
|
||||||
].join("\n")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//FTL is no valid html, we can't insert with cheerio, we put placeholder for injecting later.
|
|
||||||
const replaceValueBySearchValue = {
|
|
||||||
'{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }': fs
|
|
||||||
.readFileSync(pathJoin(__dirname, "ftl_object_to_js_code_declaring_an_object.ftl"))
|
|
||||||
.toString("utf8")
|
|
||||||
.match(/^<script>const _=((?:.|\n)+)<\/script>[\n]?$/)![1]
|
|
||||||
.replace("FIELD_NAMES_eKsIY4ZsZ4xeM", fieldNames.map(name => `"${name}"`).join(", "))
|
|
||||||
.replace("KEYCLOAKIFY_VERSION_xEdKd3xEdr", keycloakifyVersion)
|
|
||||||
.replace("KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx", buildOptions.themeVersion)
|
|
||||||
.replace("KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr", themeType)
|
|
||||||
.replace("KEYCLOAKIFY_THEME_NAME_cXxKd3xEer", buildOptions.themeName),
|
|
||||||
"<!-- xIdLqMeOedErIdLsPdNdI9dSlxI -->": [
|
|
||||||
"<#if scripts??>",
|
|
||||||
" <#list scripts as script>",
|
|
||||||
' <script src="${script}" type="text/javascript"></script>',
|
|
||||||
" </#list>",
|
|
||||||
"</#if>"
|
|
||||||
].join("\n")
|
|
||||||
};
|
|
||||||
|
|
||||||
$("head").prepend(
|
|
||||||
[
|
|
||||||
"<script>",
|
|
||||||
` window.${ftlValuesGlobalName}= ${objectKeys(replaceValueBySearchValue)[0]};`,
|
|
||||||
"</script>",
|
|
||||||
"",
|
|
||||||
objectKeys(replaceValueBySearchValue)[1]
|
|
||||||
].join("\n")
|
|
||||||
);
|
|
||||||
|
|
||||||
const partiallyFixedIndexHtmlCode = $.html();
|
|
||||||
|
|
||||||
function generateFtlFilesCode(params: { pageId: string }): {
|
|
||||||
ftlCode: string;
|
|
||||||
} {
|
|
||||||
const { pageId } = params;
|
|
||||||
|
|
||||||
const $ = cheerio.load(partiallyFixedIndexHtmlCode);
|
|
||||||
|
|
||||||
let ftlCode = $.html();
|
|
||||||
|
|
||||||
Object.entries({
|
|
||||||
...replaceValueBySearchValue,
|
|
||||||
"PAGE_ID_xIgLsPgGId9D8e": pageId
|
|
||||||
}).map(([searchValue, replaceValue]) => (ftlCode = ftlCode.replace(searchValue, replaceValue)));
|
|
||||||
|
|
||||||
return { ftlCode };
|
|
||||||
}
|
|
||||||
|
|
||||||
return { generateFtlFilesCode };
|
|
||||||
}
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
export * from "./generateFtl";
|
|
||||||
export * from "./pageId";
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
export const loginThemePageIds = [
|
|
||||||
"login.ftl",
|
|
||||||
"login-username.ftl",
|
|
||||||
"login-password.ftl",
|
|
||||||
"webauthn-authenticate.ftl",
|
|
||||||
"register.ftl",
|
|
||||||
"register-user-profile.ftl",
|
|
||||||
"info.ftl",
|
|
||||||
"error.ftl",
|
|
||||||
"login-reset-password.ftl",
|
|
||||||
"login-verify-email.ftl",
|
|
||||||
"terms.ftl",
|
|
||||||
"login-otp.ftl",
|
|
||||||
"login-update-profile.ftl",
|
|
||||||
"login-update-password.ftl",
|
|
||||||
"login-idp-link-confirm.ftl",
|
|
||||||
"login-idp-link-email.ftl",
|
|
||||||
"login-page-expired.ftl",
|
|
||||||
"login-config-totp.ftl",
|
|
||||||
"logout-confirm.ftl",
|
|
||||||
"update-user-profile.ftl",
|
|
||||||
"idp-review-user-profile.ftl",
|
|
||||||
"update-email.ftl",
|
|
||||||
"select-authenticator.ftl",
|
|
||||||
"saml-post-form.ftl"
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
export const accountThemePageIds = ["password.ftl", "account.ftl"] as const;
|
|
||||||
|
|
||||||
export type LoginThemePageId = (typeof loginThemePageIds)[number];
|
|
||||||
export type AccountThemePageId = (typeof accountThemePageIds)[number];
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
import * as fs from "fs";
|
|
||||||
import { join as pathJoin, dirname as pathDirname } from "path";
|
|
||||||
import { assert } from "tsafe/assert";
|
|
||||||
import type { BuildOptions } from "./BuildOptions";
|
|
||||||
import type { ThemeType } from "./generateFtl";
|
|
||||||
|
|
||||||
export type BuildOptionsLike = {
|
|
||||||
themeName: string;
|
|
||||||
extraThemeNames: string[];
|
|
||||||
groupId: string;
|
|
||||||
artifactId: string;
|
|
||||||
themeVersion: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
assert<BuildOptions extends BuildOptionsLike ? true : false>();
|
|
||||||
|
|
||||||
export function generateJavaStackFiles(params: {
|
|
||||||
keycloakThemeBuildingDirPath: string;
|
|
||||||
implementedThemeTypes: Record<ThemeType | "email", boolean>;
|
|
||||||
buildOptions: BuildOptionsLike;
|
|
||||||
}): {
|
|
||||||
jarFilePath: string;
|
|
||||||
} {
|
|
||||||
const {
|
|
||||||
buildOptions: { groupId, themeName, extraThemeNames, themeVersion, artifactId },
|
|
||||||
keycloakThemeBuildingDirPath,
|
|
||||||
implementedThemeTypes
|
|
||||||
} = params;
|
|
||||||
|
|
||||||
{
|
|
||||||
const { pomFileCode } = (function generatePomFileCode(): {
|
|
||||||
pomFileCode: string;
|
|
||||||
} {
|
|
||||||
const pomFileCode = [
|
|
||||||
`<?xml version="1.0"?>`,
|
|
||||||
`<project xmlns="http://maven.apache.org/POM/4.0.0"`,
|
|
||||||
` xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"`,
|
|
||||||
` xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">`,
|
|
||||||
` <modelVersion>4.0.0</modelVersion>`,
|
|
||||||
` <groupId>${groupId}</groupId>`,
|
|
||||||
` <artifactId>${artifactId}</artifactId>`,
|
|
||||||
` <version>${themeVersion}</version>`,
|
|
||||||
` <name>${artifactId}</name>`,
|
|
||||||
` <description />`,
|
|
||||||
`</project>`
|
|
||||||
].join("\n");
|
|
||||||
|
|
||||||
return { pomFileCode };
|
|
||||||
})();
|
|
||||||
|
|
||||||
fs.writeFileSync(pathJoin(keycloakThemeBuildingDirPath, "pom.xml"), Buffer.from(pomFileCode, "utf8"));
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
const themeManifestFilePath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "META-INF", "keycloak-themes.json");
|
|
||||||
|
|
||||||
try {
|
|
||||||
fs.mkdirSync(pathDirname(themeManifestFilePath));
|
|
||||||
} catch {}
|
|
||||||
|
|
||||||
fs.writeFileSync(
|
|
||||||
themeManifestFilePath,
|
|
||||||
Buffer.from(
|
|
||||||
JSON.stringify(
|
|
||||||
{
|
|
||||||
"themes": [themeName, ...extraThemeNames].map(themeName => ({
|
|
||||||
"name": themeName,
|
|
||||||
"types": Object.entries(implementedThemeTypes)
|
|
||||||
.filter(([, isImplemented]) => isImplemented)
|
|
||||||
.map(([themeType]) => themeType)
|
|
||||||
}))
|
|
||||||
},
|
|
||||||
null,
|
|
||||||
2
|
|
||||||
),
|
|
||||||
"utf8"
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
"jarFilePath": pathJoin(keycloakThemeBuildingDirPath, "target", `${artifactId}-${themeVersion}.jar`)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
import * as fs from "fs";
|
|
||||||
import { join as pathJoin } from "path";
|
|
||||||
import { assert } from "tsafe/assert";
|
|
||||||
import type { BuildOptions } from "./BuildOptions";
|
|
||||||
|
|
||||||
export type BuildOptionsLike = {
|
|
||||||
themeName: string;
|
|
||||||
extraThemeNames: string[];
|
|
||||||
};
|
|
||||||
|
|
||||||
assert<BuildOptions extends BuildOptionsLike ? true : false>();
|
|
||||||
|
|
||||||
generateStartKeycloakTestingContainer.basename = "start_keycloak_testing_container.sh";
|
|
||||||
|
|
||||||
const containerName = "keycloak-testing-container";
|
|
||||||
|
|
||||||
/** Files for being able to run a hot reload keycloak container */
|
|
||||||
export function generateStartKeycloakTestingContainer(params: {
|
|
||||||
keycloakVersion: string;
|
|
||||||
keycloakThemeBuildingDirPath: string;
|
|
||||||
buildOptions: BuildOptionsLike;
|
|
||||||
}) {
|
|
||||||
const {
|
|
||||||
keycloakThemeBuildingDirPath,
|
|
||||||
keycloakVersion,
|
|
||||||
buildOptions: { themeName, extraThemeNames }
|
|
||||||
} = params;
|
|
||||||
|
|
||||||
fs.writeFileSync(
|
|
||||||
pathJoin(keycloakThemeBuildingDirPath, generateStartKeycloakTestingContainer.basename),
|
|
||||||
Buffer.from(
|
|
||||||
[
|
|
||||||
"#!/usr/bin/env bash",
|
|
||||||
"",
|
|
||||||
`docker rm ${containerName} || true`,
|
|
||||||
"",
|
|
||||||
`cd "${keycloakThemeBuildingDirPath.replace(/\\/g, "/")}"`,
|
|
||||||
"",
|
|
||||||
"docker run \\",
|
|
||||||
" -p 8080:8080 \\",
|
|
||||||
` --name ${containerName} \\`,
|
|
||||||
" -e KEYCLOAK_ADMIN=admin \\",
|
|
||||||
" -e KEYCLOAK_ADMIN_PASSWORD=admin \\",
|
|
||||||
...[themeName, ...extraThemeNames].map(
|
|
||||||
themeName =>
|
|
||||||
` -v "${pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName).replace(
|
|
||||||
/\\/g,
|
|
||||||
"/"
|
|
||||||
)}":"/opt/keycloak/themes/${themeName}":rw \\`
|
|
||||||
),
|
|
||||||
` -it quay.io/keycloak/keycloak:${keycloakVersion} \\`,
|
|
||||||
` start-dev --features=declarative-user-profile`,
|
|
||||||
""
|
|
||||||
].join("\n"),
|
|
||||||
"utf8"
|
|
||||||
),
|
|
||||||
{ "mode": 0o755 }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
import { transformCodebase } from "../../tools/transformCodebase";
|
|
||||||
import * as fs from "fs";
|
|
||||||
import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
|
|
||||||
import type { ThemeType } from "../generateFtl";
|
|
||||||
import { downloadBuiltinKeycloakTheme } from "../../download-builtin-keycloak-theme";
|
|
||||||
import {
|
|
||||||
resourcesCommonDirPathRelativeToPublicDir,
|
|
||||||
resourcesDirPathRelativeToPublicDir,
|
|
||||||
basenameOfKeycloakDirInPublicDir
|
|
||||||
} from "../../mockTestingResourcesPath";
|
|
||||||
import * as crypto from "crypto";
|
|
||||||
import { assert } from "tsafe/assert";
|
|
||||||
|
|
||||||
export async function downloadKeycloakStaticResources(
|
|
||||||
// prettier-ignore
|
|
||||||
params: {
|
|
||||||
projectDirPath: string;
|
|
||||||
themeType: ThemeType;
|
|
||||||
themeDirPath: string;
|
|
||||||
keycloakVersion: string;
|
|
||||||
usedResources: {
|
|
||||||
resourcesCommonFilePaths: string[];
|
|
||||||
} | undefined
|
|
||||||
}
|
|
||||||
) {
|
|
||||||
const { projectDirPath, themeType, themeDirPath, keycloakVersion } = params;
|
|
||||||
|
|
||||||
// NOTE: Hack for 427
|
|
||||||
const usedResources = (() => {
|
|
||||||
const { usedResources } = params;
|
|
||||||
|
|
||||||
if (usedResources === undefined) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
assert(usedResources !== undefined);
|
|
||||||
|
|
||||||
return {
|
|
||||||
"resourcesCommonDirPaths": usedResources.resourcesCommonFilePaths.map(filePath => {
|
|
||||||
{
|
|
||||||
const splitArg = "/dist/";
|
|
||||||
|
|
||||||
if (filePath.includes(splitArg)) {
|
|
||||||
return filePath.split(splitArg)[0] + splitArg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return pathDirname(filePath);
|
|
||||||
})
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
|
|
||||||
const tmpDirPath = pathJoin(
|
|
||||||
themeDirPath,
|
|
||||||
"..",
|
|
||||||
`tmp_suLeKsxId_${crypto.createHash("sha256").update(`${themeType}-${keycloakVersion}`).digest("hex").slice(0, 8)}`
|
|
||||||
);
|
|
||||||
|
|
||||||
await downloadBuiltinKeycloakTheme({
|
|
||||||
projectDirPath,
|
|
||||||
keycloakVersion,
|
|
||||||
"destDirPath": tmpDirPath
|
|
||||||
});
|
|
||||||
|
|
||||||
transformCodebase({
|
|
||||||
"srcDirPath": pathJoin(tmpDirPath, "keycloak", themeType, "resources"),
|
|
||||||
"destDirPath": pathJoin(themeDirPath, pathRelative(basenameOfKeycloakDirInPublicDir, resourcesDirPathRelativeToPublicDir))
|
|
||||||
});
|
|
||||||
|
|
||||||
transformCodebase({
|
|
||||||
"srcDirPath": pathJoin(tmpDirPath, "keycloak", "common", "resources"),
|
|
||||||
"destDirPath": pathJoin(themeDirPath, pathRelative(basenameOfKeycloakDirInPublicDir, resourcesCommonDirPathRelativeToPublicDir)),
|
|
||||||
"transformSourceCode":
|
|
||||||
usedResources === undefined
|
|
||||||
? undefined
|
|
||||||
: ({ fileRelativePath, sourceCode }) => {
|
|
||||||
if (usedResources.resourcesCommonDirPaths.find(dirPath => fileRelativePath.startsWith(dirPath)) === undefined) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
return { "modifiedSourceCode": sourceCode };
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
fs.rmSync(tmpDirPath, { "recursive": true, "force": true });
|
|
||||||
}
|
|
||||||
@ -1,179 +0,0 @@
|
|||||||
import type { ThemeType } from "../generateFtl";
|
|
||||||
import { crawl } from "../../tools/crawl";
|
|
||||||
import { join as pathJoin } from "path";
|
|
||||||
import { readFileSync } from "fs";
|
|
||||||
import { symToStr } from "tsafe/symToStr";
|
|
||||||
import { removeDuplicates } from "evt/tools/reducers/removeDuplicates";
|
|
||||||
import * as recast from "recast";
|
|
||||||
import * as babelParser from "@babel/parser";
|
|
||||||
import babelGenerate from "@babel/generator";
|
|
||||||
import * as babelTypes from "@babel/types";
|
|
||||||
|
|
||||||
export function generateMessageProperties(params: {
|
|
||||||
themeSrcDirPath: string;
|
|
||||||
themeType: ThemeType;
|
|
||||||
}): { languageTag: string; propertiesFileSource: string }[] {
|
|
||||||
const { themeSrcDirPath, themeType } = params;
|
|
||||||
|
|
||||||
let files = crawl({
|
|
||||||
"dirPath": pathJoin(themeSrcDirPath, themeType),
|
|
||||||
"returnedPathsType": "absolute"
|
|
||||||
});
|
|
||||||
|
|
||||||
files = files.filter(file => {
|
|
||||||
const regex = /\.(js|ts|tsx)$/;
|
|
||||||
return regex.test(file);
|
|
||||||
});
|
|
||||||
|
|
||||||
files = files.sort((a, b) => {
|
|
||||||
const regex = /\.i18n\.(ts|js|tsx)$/;
|
|
||||||
const aIsI18nFile = regex.test(a);
|
|
||||||
const bIsI18nFile = regex.test(b);
|
|
||||||
return aIsI18nFile === bIsI18nFile ? 0 : aIsI18nFile ? -1 : 1;
|
|
||||||
});
|
|
||||||
|
|
||||||
files = files.sort((a, b) => a.length - b.length);
|
|
||||||
|
|
||||||
files = files.filter(file => readFileSync(file).toString("utf8").includes("createUseI18n"));
|
|
||||||
|
|
||||||
if (files.length === 0) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
const extraMessages = files
|
|
||||||
.map(file => {
|
|
||||||
const root = recast.parse(readFileSync(file).toString("utf8"), {
|
|
||||||
"parser": {
|
|
||||||
"parse": (code: string) => babelParser.parse(code, { "sourceType": "module", "plugins": ["typescript"] }),
|
|
||||||
"generator": babelGenerate,
|
|
||||||
"types": babelTypes
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const codes: string[] = [];
|
|
||||||
|
|
||||||
recast.visit(root, {
|
|
||||||
"visitCallExpression": function (path) {
|
|
||||||
if (path.node.callee.type === "Identifier" && path.node.callee.name === "createUseI18n") {
|
|
||||||
codes.push(babelGenerate(path.node.arguments[0] as any).code);
|
|
||||||
}
|
|
||||||
this.traverse(path);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return codes;
|
|
||||||
})
|
|
||||||
.flat()
|
|
||||||
.map(code => {
|
|
||||||
let extraMessages: { [languageTag: string]: Record<string, string> } = {};
|
|
||||||
|
|
||||||
try {
|
|
||||||
eval(`${symToStr({ extraMessages })} = ${code}`);
|
|
||||||
} catch {
|
|
||||||
console.warn(
|
|
||||||
[
|
|
||||||
"WARNING: Make sure that the first argument of createUseI18n can be evaluated in a javascript",
|
|
||||||
"runtime where only the node globals are available.",
|
|
||||||
"This is important because we need to put your i18n messages in messages_*.properties files",
|
|
||||||
"or they won't be available server side.",
|
|
||||||
"\n",
|
|
||||||
"The following code could not be evaluated:",
|
|
||||||
"\n",
|
|
||||||
code
|
|
||||||
].join(" ")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return extraMessages;
|
|
||||||
});
|
|
||||||
|
|
||||||
const languageTags = extraMessages
|
|
||||||
.map(extraMessage => Object.keys(extraMessage))
|
|
||||||
.flat()
|
|
||||||
.reduce(...removeDuplicates<string>());
|
|
||||||
|
|
||||||
const keyValueMapByLanguageTag: Record<string, Record<string, string>> = {};
|
|
||||||
|
|
||||||
for (const languageTag of languageTags) {
|
|
||||||
const keyValueMap: Record<string, string> = {};
|
|
||||||
|
|
||||||
for (const extraMessage of extraMessages) {
|
|
||||||
const keyValueMap_i = extraMessage[languageTag];
|
|
||||||
|
|
||||||
if (keyValueMap_i === undefined) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const [key, value] of Object.entries(keyValueMap_i)) {
|
|
||||||
if (keyValueMap[key] !== undefined) {
|
|
||||||
console.warn(
|
|
||||||
[
|
|
||||||
"WARNING: The following key is defined multiple times:",
|
|
||||||
"\n",
|
|
||||||
key,
|
|
||||||
"\n",
|
|
||||||
"The following value will be ignored:",
|
|
||||||
"\n",
|
|
||||||
value,
|
|
||||||
"\n",
|
|
||||||
"The following value was already defined:",
|
|
||||||
"\n",
|
|
||||||
keyValueMap[key]
|
|
||||||
].join(" ")
|
|
||||||
);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
keyValueMap[key] = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
keyValueMapByLanguageTag[languageTag] = keyValueMap;
|
|
||||||
}
|
|
||||||
|
|
||||||
const out: { languageTag: string; propertiesFileSource: string }[] = [];
|
|
||||||
|
|
||||||
for (const [languageTag, keyValueMap] of Object.entries(keyValueMapByLanguageTag)) {
|
|
||||||
const propertiesFileSource = Object.entries(keyValueMap)
|
|
||||||
.map(([key, value]) => `${key}=${escapeString(value)}`)
|
|
||||||
.join("\n");
|
|
||||||
|
|
||||||
out.push({
|
|
||||||
languageTag,
|
|
||||||
"propertiesFileSource": ["# This file was generated by keycloakify", "", "parent=base", "", propertiesFileSource, ""].join("\n")
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return out;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Convert a JavaScript string to UTF-16 encoding
|
|
||||||
function toUTF16(codePoint: number): string {
|
|
||||||
if (codePoint <= 0xffff) {
|
|
||||||
// BMP character
|
|
||||||
return "\\u" + codePoint.toString(16).padStart(4, "0");
|
|
||||||
} else {
|
|
||||||
// Non-BMP character
|
|
||||||
codePoint -= 0x10000;
|
|
||||||
let highSurrogate = (codePoint >> 10) + 0xd800;
|
|
||||||
let lowSurrogate = (codePoint % 0x400) + 0xdc00;
|
|
||||||
return "\\u" + highSurrogate.toString(16).padStart(4, "0") + "\\u" + lowSurrogate.toString(16).padStart(4, "0");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Escapes special characters and converts unicode to UTF-16 encoding
|
|
||||||
function escapeString(str: string): string {
|
|
||||||
let escapedStr = "";
|
|
||||||
for (const char of [...str]) {
|
|
||||||
const codePoint = char.codePointAt(0);
|
|
||||||
if (!codePoint) continue;
|
|
||||||
if (char === "'") {
|
|
||||||
escapedStr += "''"; // double single quotes
|
|
||||||
} else if (codePoint > 0x7f) {
|
|
||||||
escapedStr += toUTF16(codePoint); // non-ascii characters
|
|
||||||
} else {
|
|
||||||
escapedStr += char;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return escapedStr;
|
|
||||||
}
|
|
||||||
@ -1,228 +0,0 @@
|
|||||||
import { transformCodebase } from "../../tools/transformCodebase";
|
|
||||||
import * as fs from "fs";
|
|
||||||
import { join as pathJoin } from "path";
|
|
||||||
import { replaceImportsFromStaticInJsCode } from "../replacers/replaceImportsFromStaticInJsCode";
|
|
||||||
import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
|
|
||||||
import { generateFtlFilesCodeFactory, loginThemePageIds, accountThemePageIds, themeTypes, type ThemeType } from "../generateFtl";
|
|
||||||
import { basenameOfKeycloakDirInPublicDir } from "../../mockTestingResourcesPath";
|
|
||||||
import { isInside } from "../../tools/isInside";
|
|
||||||
import type { BuildOptions } from "../BuildOptions";
|
|
||||||
import { assert } from "tsafe/assert";
|
|
||||||
import { downloadKeycloakStaticResources } from "./downloadKeycloakStaticResources";
|
|
||||||
import { readFieldNameUsage } from "./readFieldNameUsage";
|
|
||||||
import { readExtraPagesNames } from "./readExtraPageNames";
|
|
||||||
import { generateMessageProperties } from "./generateMessageProperties";
|
|
||||||
import { readStaticResourcesUsage } from "./readStaticResourcesUsage";
|
|
||||||
|
|
||||||
export type BuildOptionsLike = {
|
|
||||||
themeName: string;
|
|
||||||
extraThemeProperties: string[] | undefined;
|
|
||||||
themeVersion: string;
|
|
||||||
keycloakVersionDefaultAssets: string;
|
|
||||||
urlPathname: string | undefined;
|
|
||||||
};
|
|
||||||
|
|
||||||
assert<BuildOptions extends BuildOptionsLike ? true : false>();
|
|
||||||
|
|
||||||
export async function generateTheme(params: {
|
|
||||||
projectDirPath: string;
|
|
||||||
reactAppBuildDirPath: string;
|
|
||||||
keycloakThemeBuildingDirPath: string;
|
|
||||||
themeSrcDirPath: string;
|
|
||||||
keycloakifySrcDirPath: string;
|
|
||||||
buildOptions: BuildOptionsLike;
|
|
||||||
keycloakifyVersion: string;
|
|
||||||
}): Promise<void> {
|
|
||||||
const {
|
|
||||||
projectDirPath,
|
|
||||||
reactAppBuildDirPath,
|
|
||||||
keycloakThemeBuildingDirPath,
|
|
||||||
themeSrcDirPath,
|
|
||||||
keycloakifySrcDirPath,
|
|
||||||
buildOptions,
|
|
||||||
keycloakifyVersion
|
|
||||||
} = params;
|
|
||||||
|
|
||||||
const getThemeDirPath = (themeType: ThemeType | "email") =>
|
|
||||||
pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", buildOptions.themeName, themeType);
|
|
||||||
|
|
||||||
let allCssGlobalsToDefine: Record<string, string> = {};
|
|
||||||
|
|
||||||
let generateFtlFilesCode_glob: ReturnType<typeof generateFtlFilesCodeFactory>["generateFtlFilesCode"] | undefined = undefined;
|
|
||||||
|
|
||||||
for (const themeType of themeTypes) {
|
|
||||||
if (!fs.existsSync(pathJoin(themeSrcDirPath, themeType))) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const themeDirPath = getThemeDirPath(themeType);
|
|
||||||
|
|
||||||
copy_app_resources_to_theme_path: {
|
|
||||||
const isFirstPass = themeType.indexOf(themeType) === 0;
|
|
||||||
|
|
||||||
if (!isFirstPass) {
|
|
||||||
break copy_app_resources_to_theme_path;
|
|
||||||
}
|
|
||||||
|
|
||||||
transformCodebase({
|
|
||||||
"destDirPath": pathJoin(themeDirPath, "resources", "build"),
|
|
||||||
"srcDirPath": reactAppBuildDirPath,
|
|
||||||
"transformSourceCode": ({ filePath, sourceCode }) => {
|
|
||||||
//NOTE: Prevent cycles, excludes the folder we generated for debug in public/
|
|
||||||
if (
|
|
||||||
isInside({
|
|
||||||
"dirPath": pathJoin(reactAppBuildDirPath, basenameOfKeycloakDirInPublicDir),
|
|
||||||
filePath
|
|
||||||
})
|
|
||||||
) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (/\.css?$/i.test(filePath)) {
|
|
||||||
const { cssGlobalsToDefine, fixedCssCode } = replaceImportsInCssCode({
|
|
||||||
"cssCode": sourceCode.toString("utf8")
|
|
||||||
});
|
|
||||||
|
|
||||||
register_css_variables: {
|
|
||||||
if (!isFirstPass) {
|
|
||||||
break register_css_variables;
|
|
||||||
}
|
|
||||||
|
|
||||||
allCssGlobalsToDefine = {
|
|
||||||
...allCssGlobalsToDefine,
|
|
||||||
...cssGlobalsToDefine
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return { "modifiedSourceCode": Buffer.from(fixedCssCode, "utf8") };
|
|
||||||
}
|
|
||||||
|
|
||||||
if (/\.js?$/i.test(filePath)) {
|
|
||||||
const { fixedJsCode } = replaceImportsFromStaticInJsCode({
|
|
||||||
"jsCode": sourceCode.toString("utf8")
|
|
||||||
});
|
|
||||||
|
|
||||||
return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
|
|
||||||
}
|
|
||||||
|
|
||||||
return { "modifiedSourceCode": sourceCode };
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const generateFtlFilesCode =
|
|
||||||
generateFtlFilesCode_glob !== undefined
|
|
||||||
? generateFtlFilesCode_glob
|
|
||||||
: generateFtlFilesCodeFactory({
|
|
||||||
"indexHtmlCode": fs.readFileSync(pathJoin(reactAppBuildDirPath, "index.html")).toString("utf8"),
|
|
||||||
"cssGlobalsToDefine": allCssGlobalsToDefine,
|
|
||||||
buildOptions,
|
|
||||||
keycloakifyVersion,
|
|
||||||
themeType,
|
|
||||||
"fieldNames": readFieldNameUsage({
|
|
||||||
keycloakifySrcDirPath,
|
|
||||||
themeSrcDirPath,
|
|
||||||
themeType
|
|
||||||
})
|
|
||||||
}).generateFtlFilesCode;
|
|
||||||
|
|
||||||
[
|
|
||||||
...(() => {
|
|
||||||
switch (themeType) {
|
|
||||||
case "login":
|
|
||||||
return loginThemePageIds;
|
|
||||||
case "account":
|
|
||||||
return accountThemePageIds;
|
|
||||||
}
|
|
||||||
})(),
|
|
||||||
...readExtraPagesNames({
|
|
||||||
themeType,
|
|
||||||
themeSrcDirPath
|
|
||||||
})
|
|
||||||
].forEach(pageId => {
|
|
||||||
const { ftlCode } = generateFtlFilesCode({ pageId });
|
|
||||||
|
|
||||||
fs.mkdirSync(themeDirPath, { "recursive": true });
|
|
||||||
|
|
||||||
fs.writeFileSync(pathJoin(themeDirPath, pageId), Buffer.from(ftlCode, "utf8"));
|
|
||||||
});
|
|
||||||
|
|
||||||
generateMessageProperties({
|
|
||||||
themeSrcDirPath,
|
|
||||||
themeType
|
|
||||||
}).forEach(({ languageTag, propertiesFileSource }) => {
|
|
||||||
const messagesDirPath = pathJoin(themeDirPath, "messages");
|
|
||||||
|
|
||||||
fs.mkdirSync(pathJoin(themeDirPath, "messages"), { "recursive": true });
|
|
||||||
|
|
||||||
const propertiesFilePath = pathJoin(messagesDirPath, `messages_${languageTag}.properties`);
|
|
||||||
|
|
||||||
fs.writeFileSync(propertiesFilePath, Buffer.from(propertiesFileSource, "utf8"));
|
|
||||||
});
|
|
||||||
|
|
||||||
//TODO: Remove this block we left it for now only for backward compatibility
|
|
||||||
// we now have a separate script for this
|
|
||||||
copy_keycloak_resources_to_public: {
|
|
||||||
const keycloakDirInPublicDir = pathJoin(reactAppBuildDirPath, "..", "public", basenameOfKeycloakDirInPublicDir);
|
|
||||||
|
|
||||||
if (fs.existsSync(keycloakDirInPublicDir)) {
|
|
||||||
break copy_keycloak_resources_to_public;
|
|
||||||
}
|
|
||||||
|
|
||||||
await downloadKeycloakStaticResources({
|
|
||||||
projectDirPath,
|
|
||||||
"keycloakVersion": buildOptions.keycloakVersionDefaultAssets,
|
|
||||||
"themeDirPath": keycloakDirInPublicDir,
|
|
||||||
themeType,
|
|
||||||
"usedResources": undefined
|
|
||||||
});
|
|
||||||
|
|
||||||
if (themeType !== themeTypes[0]) {
|
|
||||||
break copy_keycloak_resources_to_public;
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.writeFileSync(
|
|
||||||
pathJoin(keycloakDirInPublicDir, "README.txt"),
|
|
||||||
Buffer.from(
|
|
||||||
// prettier-ignore
|
|
||||||
[
|
|
||||||
"This is just a test folder that helps develop",
|
|
||||||
"the login and register page without having to run a Keycloak container"
|
|
||||||
].join(" ")
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
fs.writeFileSync(pathJoin(keycloakDirInPublicDir, ".gitignore"), Buffer.from("*", "utf8"));
|
|
||||||
}
|
|
||||||
|
|
||||||
await downloadKeycloakStaticResources({
|
|
||||||
projectDirPath,
|
|
||||||
"keycloakVersion": buildOptions.keycloakVersionDefaultAssets,
|
|
||||||
themeDirPath,
|
|
||||||
themeType,
|
|
||||||
"usedResources": readStaticResourcesUsage({
|
|
||||||
keycloakifySrcDirPath,
|
|
||||||
themeSrcDirPath,
|
|
||||||
themeType
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
fs.writeFileSync(
|
|
||||||
pathJoin(themeDirPath, "theme.properties"),
|
|
||||||
Buffer.from([`parent=keycloak`, ...(buildOptions.extraThemeProperties ?? [])].join("\n\n"), "utf8")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
email: {
|
|
||||||
const emailThemeSrcDirPath = pathJoin(themeSrcDirPath, "email");
|
|
||||||
|
|
||||||
if (!fs.existsSync(emailThemeSrcDirPath)) {
|
|
||||||
break email;
|
|
||||||
}
|
|
||||||
|
|
||||||
transformCodebase({
|
|
||||||
"srcDirPath": emailThemeSrcDirPath,
|
|
||||||
"destDirPath": getThemeDirPath("email")
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export * from "./generateTheme";
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
import { crawl } from "../../tools/crawl";
|
|
||||||
import { type ThemeType, accountThemePageIds, loginThemePageIds } from "../generateFtl";
|
|
||||||
import { id } from "tsafe/id";
|
|
||||||
import { removeDuplicates } from "evt/tools/reducers/removeDuplicates";
|
|
||||||
import * as fs from "fs";
|
|
||||||
import { join as pathJoin } from "path";
|
|
||||||
|
|
||||||
export function readExtraPagesNames(params: { themeSrcDirPath: string; themeType: ThemeType }): string[] {
|
|
||||||
const { themeSrcDirPath, themeType } = params;
|
|
||||||
|
|
||||||
const filePaths = crawl({
|
|
||||||
"dirPath": pathJoin(themeSrcDirPath, themeType),
|
|
||||||
"returnedPathsType": "absolute"
|
|
||||||
}).filter(filePath => /\.(ts|tsx|js|jsx)$/.test(filePath));
|
|
||||||
|
|
||||||
const candidateFilePaths = filePaths.filter(filePath => /kcContext\.[^.]+$/.test(filePath));
|
|
||||||
|
|
||||||
if (candidateFilePaths.length === 0) {
|
|
||||||
candidateFilePaths.push(...filePaths);
|
|
||||||
}
|
|
||||||
|
|
||||||
const extraPages: string[] = [];
|
|
||||||
|
|
||||||
for (const candidateFilPath of candidateFilePaths) {
|
|
||||||
const rawSourceFile = fs.readFileSync(candidateFilPath).toString("utf8");
|
|
||||||
|
|
||||||
extraPages.push(...Array.from(rawSourceFile.matchAll(/["']?pageId["']?\s*:\s*["']([^.]+.ftl)["']/g), m => m[1]));
|
|
||||||
}
|
|
||||||
|
|
||||||
return extraPages.reduce(...removeDuplicates<string>()).filter(pageId => {
|
|
||||||
switch (themeType) {
|
|
||||||
case "account":
|
|
||||||
return !id<readonly string[]>(accountThemePageIds).includes(pageId);
|
|
||||||
case "login":
|
|
||||||
return !id<readonly string[]>(loginThemePageIds).includes(pageId);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import { crawl } from "../../tools/crawl";
|
|
||||||
import { removeDuplicates } from "evt/tools/reducers/removeDuplicates";
|
|
||||||
import { join as pathJoin } from "path";
|
|
||||||
import * as fs from "fs";
|
|
||||||
import type { ThemeType } from "../generateFtl";
|
|
||||||
|
|
||||||
/** Assumes the theme type exists */
|
|
||||||
export function readFieldNameUsage(params: { keycloakifySrcDirPath: string; themeSrcDirPath: string; themeType: ThemeType }): string[] {
|
|
||||||
const { keycloakifySrcDirPath, themeSrcDirPath, themeType } = params;
|
|
||||||
|
|
||||||
const fieldNames: string[] = [];
|
|
||||||
|
|
||||||
for (const srcDirPath of [pathJoin(keycloakifySrcDirPath, themeType), pathJoin(themeSrcDirPath, themeType)]) {
|
|
||||||
const filePaths = crawl({ "dirPath": srcDirPath, "returnedPathsType": "absolute" }).filter(filePath => /\.(ts|tsx|js|jsx)$/.test(filePath));
|
|
||||||
|
|
||||||
for (const filePath of filePaths) {
|
|
||||||
const rawSourceFile = fs.readFileSync(filePath).toString("utf8");
|
|
||||||
|
|
||||||
if (!rawSourceFile.includes("messagesPerField")) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldNames.push(
|
|
||||||
...Array.from(rawSourceFile.matchAll(/(?:(?:printIfExists)|(?:existsError)|(?:get)|(?:exists))\(\s*["']([^"']+)["']/g), m => m[1])
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const out = fieldNames.reduce(...removeDuplicates<string>());
|
|
||||||
|
|
||||||
return out;
|
|
||||||
}
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
import { crawl } from "../../tools/crawl";
|
|
||||||
import { join as pathJoin, sep as pathSep } from "path";
|
|
||||||
import * as fs from "fs";
|
|
||||||
import type { ThemeType } from "../generateFtl";
|
|
||||||
|
|
||||||
/** Assumes the theme type exists */
|
|
||||||
export function readStaticResourcesUsage(params: { keycloakifySrcDirPath: string; themeSrcDirPath: string; themeType: ThemeType }): {
|
|
||||||
resourcesCommonFilePaths: string[];
|
|
||||||
} {
|
|
||||||
const { keycloakifySrcDirPath, themeSrcDirPath, themeType } = params;
|
|
||||||
|
|
||||||
const resourcesCommonFilePaths = new Set<string>();
|
|
||||||
|
|
||||||
for (const srcDirPath of [pathJoin(keycloakifySrcDirPath, themeType), pathJoin(themeSrcDirPath, themeType)]) {
|
|
||||||
const filePaths = crawl({ "dirPath": srcDirPath, "returnedPathsType": "absolute" }).filter(filePath => /\.(ts|tsx|js|jsx)$/.test(filePath));
|
|
||||||
|
|
||||||
for (const filePath of filePaths) {
|
|
||||||
const rawSourceFile = fs.readFileSync(filePath).toString("utf8");
|
|
||||||
|
|
||||||
if (!rawSourceFile.includes("resourcesCommonPath") && !rawSourceFile.includes("resourcesPath")) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const wrap = readPaths({ rawSourceFile });
|
|
||||||
|
|
||||||
wrap.resourcesCommonFilePaths.forEach(filePath => resourcesCommonFilePaths.add(filePath));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
"resourcesCommonFilePaths": Array.from(resourcesCommonFilePaths)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Exported for testing purpose */
|
|
||||||
export function readPaths(params: { rawSourceFile: string }): {
|
|
||||||
resourcesCommonFilePaths: string[];
|
|
||||||
} {
|
|
||||||
const { rawSourceFile } = params;
|
|
||||||
|
|
||||||
const resourcesCommonFilePaths = new Set<string>();
|
|
||||||
|
|
||||||
{
|
|
||||||
const regexp = new RegExp(`resourcesCommonPath\\s*}([^\`]+)\``, "g");
|
|
||||||
|
|
||||||
const matches = [...rawSourceFile.matchAll(regexp)];
|
|
||||||
|
|
||||||
for (const match of matches) {
|
|
||||||
const filePath = match[1];
|
|
||||||
|
|
||||||
resourcesCommonFilePaths.add(filePath);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
const regexp = new RegExp(`resourcesCommonPath\\s*[+,]\\s*["']([^"'\`]+)["'\`]`, "g");
|
|
||||||
|
|
||||||
const matches = [...rawSourceFile.matchAll(regexp)];
|
|
||||||
|
|
||||||
for (const match of matches) {
|
|
||||||
const filePath = match[1];
|
|
||||||
|
|
||||||
resourcesCommonFilePaths.add(filePath);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const normalizePath = (filePath: string) => {
|
|
||||||
filePath = filePath.startsWith("/") ? filePath.slice(1) : filePath;
|
|
||||||
filePath = filePath.replace(/\//g, pathSep);
|
|
||||||
return filePath;
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
"resourcesCommonFilePaths": Array.from(resourcesCommonFilePaths).map(normalizePath)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
|
|
||||||
export * from "./keycloakify";
|
|
||||||
import { main } from "./keycloakify";
|
|
||||||
|
|
||||||
if (require.main === module) {
|
|
||||||
main();
|
|
||||||
}
|
|
||||||
@ -1,170 +0,0 @@
|
|||||||
import { generateTheme } from "./generateTheme";
|
|
||||||
import { generateJavaStackFiles } from "./generateJavaStackFiles";
|
|
||||||
import { join as pathJoin, relative as pathRelative, basename as pathBasename, sep as pathSep } from "path";
|
|
||||||
import * as child_process from "child_process";
|
|
||||||
import { generateStartKeycloakTestingContainer } from "./generateStartKeycloakTestingContainer";
|
|
||||||
import * as fs from "fs";
|
|
||||||
import { readBuildOptions } from "./BuildOptions";
|
|
||||||
import { getLogger } from "../tools/logger";
|
|
||||||
import jar from "../tools/jar";
|
|
||||||
import { assert } from "tsafe/assert";
|
|
||||||
import { Equals } from "tsafe";
|
|
||||||
import { getThemeSrcDirPath } from "../getSrcDirPath";
|
|
||||||
import { getProjectRoot } from "../tools/getProjectRoot";
|
|
||||||
import { objectKeys } from "tsafe/objectKeys";
|
|
||||||
|
|
||||||
export async function main() {
|
|
||||||
const projectDirPath = process.cwd();
|
|
||||||
|
|
||||||
const buildOptions = readBuildOptions({
|
|
||||||
projectDirPath,
|
|
||||||
"processArgv": process.argv.slice(2)
|
|
||||||
});
|
|
||||||
|
|
||||||
const logger = getLogger({ "isSilent": buildOptions.isSilent });
|
|
||||||
logger.log("🔏 Building the keycloak theme...⌚");
|
|
||||||
|
|
||||||
const keycloakifyDirPath = getProjectRoot();
|
|
||||||
|
|
||||||
const { themeSrcDirPath } = getThemeSrcDirPath({ projectDirPath });
|
|
||||||
|
|
||||||
for (const themeName of [buildOptions.themeName, ...buildOptions.extraThemeNames]) {
|
|
||||||
await generateTheme({
|
|
||||||
projectDirPath,
|
|
||||||
"keycloakThemeBuildingDirPath": buildOptions.keycloakifyBuildDirPath,
|
|
||||||
themeSrcDirPath,
|
|
||||||
"keycloakifySrcDirPath": pathJoin(keycloakifyDirPath, "src"),
|
|
||||||
"reactAppBuildDirPath": buildOptions.reactAppBuildDirPath,
|
|
||||||
"buildOptions": {
|
|
||||||
...buildOptions,
|
|
||||||
"themeName": themeName
|
|
||||||
},
|
|
||||||
"keycloakifyVersion": (() => {
|
|
||||||
const version = JSON.parse(fs.readFileSync(pathJoin(keycloakifyDirPath, "package.json")).toString("utf8"))["version"];
|
|
||||||
|
|
||||||
assert(typeof version === "string");
|
|
||||||
|
|
||||||
return version;
|
|
||||||
})()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const { jarFilePath } = generateJavaStackFiles({
|
|
||||||
"keycloakThemeBuildingDirPath": buildOptions.keycloakifyBuildDirPath,
|
|
||||||
"implementedThemeTypes": (() => {
|
|
||||||
const implementedThemeTypes = {
|
|
||||||
"login": false,
|
|
||||||
"account": false,
|
|
||||||
"email": false
|
|
||||||
};
|
|
||||||
|
|
||||||
for (const themeType of objectKeys(implementedThemeTypes)) {
|
|
||||||
if (!fs.existsSync(pathJoin(themeSrcDirPath, themeType))) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
implementedThemeTypes[themeType] = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return implementedThemeTypes;
|
|
||||||
})(),
|
|
||||||
buildOptions
|
|
||||||
});
|
|
||||||
|
|
||||||
switch (buildOptions.bundler) {
|
|
||||||
case "none":
|
|
||||||
logger.log("😱 Skipping bundling step, there will be no jar");
|
|
||||||
break;
|
|
||||||
case "keycloakify":
|
|
||||||
logger.log("🫶 Let keycloakify do its thang");
|
|
||||||
await jar({
|
|
||||||
"rootPath": buildOptions.keycloakifyBuildDirPath,
|
|
||||||
"version": buildOptions.themeVersion,
|
|
||||||
"groupId": buildOptions.groupId,
|
|
||||||
"artifactId": buildOptions.artifactId,
|
|
||||||
"targetPath": jarFilePath
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case "mvn":
|
|
||||||
logger.log("🫙 Run maven to deliver a jar");
|
|
||||||
child_process.execSync("mvn package", { "cwd": buildOptions.keycloakifyBuildDirPath });
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
assert<Equals<typeof buildOptions.bundler, never>>(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
// We want, however, to test in a container running the latest Keycloak version
|
|
||||||
const containerKeycloakVersion = "21.1.2";
|
|
||||||
|
|
||||||
generateStartKeycloakTestingContainer({
|
|
||||||
keycloakThemeBuildingDirPath: buildOptions.keycloakifyBuildDirPath,
|
|
||||||
"keycloakVersion": containerKeycloakVersion,
|
|
||||||
buildOptions
|
|
||||||
});
|
|
||||||
|
|
||||||
logger.log(
|
|
||||||
[
|
|
||||||
"",
|
|
||||||
`✅ Your keycloak theme has been generated and bundled into .${pathSep}${pathRelative(projectDirPath, jarFilePath)} 🚀`,
|
|
||||||
`It is to be placed in "/opt/keycloak/providers" in the container running a quay.io/keycloak/keycloak Docker image.`,
|
|
||||||
"",
|
|
||||||
//TODO: Restore when we find a good Helm chart for Keycloak.
|
|
||||||
//"Using Helm (https://github.com/codecentric/helm-charts), edit to reflect:",
|
|
||||||
"",
|
|
||||||
"value.yaml: ",
|
|
||||||
" extraInitContainers: |",
|
|
||||||
" - name: realm-ext-provider",
|
|
||||||
" image: curlimages/curl",
|
|
||||||
" imagePullPolicy: IfNotPresent",
|
|
||||||
" command:",
|
|
||||||
" - sh",
|
|
||||||
" args:",
|
|
||||||
" - -c",
|
|
||||||
` - curl -L -f -S -o /extensions/${pathBasename(jarFilePath)} https://AN.URL.FOR/${pathBasename(jarFilePath)}`,
|
|
||||||
" volumeMounts:",
|
|
||||||
" - name: extensions",
|
|
||||||
" mountPath: /extensions",
|
|
||||||
" ",
|
|
||||||
" extraVolumeMounts: |",
|
|
||||||
" - name: extensions",
|
|
||||||
" mountPath: /opt/keycloak/providers",
|
|
||||||
" extraEnv: |",
|
|
||||||
" - name: KEYCLOAK_USER",
|
|
||||||
" value: admin",
|
|
||||||
" - name: KEYCLOAK_PASSWORD",
|
|
||||||
" value: xxxxxxxxx",
|
|
||||||
" - name: JAVA_OPTS",
|
|
||||||
" value: -Dkeycloak.profile=preview",
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
`To test your theme locally you can spin up a Keycloak ${containerKeycloakVersion} container image with the theme pre loaded by running:`,
|
|
||||||
"",
|
|
||||||
`👉 $ .${pathSep}${pathRelative(
|
|
||||||
projectDirPath,
|
|
||||||
pathJoin(buildOptions.keycloakifyBuildDirPath, generateStartKeycloakTestingContainer.basename)
|
|
||||||
)} 👈`,
|
|
||||||
"",
|
|
||||||
`Test with different Keycloak versions by editing the .sh file. see available versions here: https://quay.io/repository/keycloak/keycloak?tab=tags`,
|
|
||||||
``,
|
|
||||||
`Once your container is up and running: `,
|
|
||||||
"- Log into the admin console 👉 http://localhost:8080/admin username: admin, password: admin 👈",
|
|
||||||
`- Create a realm: Master -> AddRealm -> Name: myrealm`,
|
|
||||||
`- Enable registration: Realm settings -> Login tab -> User registration: on`,
|
|
||||||
`- Enable the Account theme (optional): Realm settings -> Themes tab -> Account theme: ${buildOptions.themeName}`,
|
|
||||||
` Clients -> account -> Login theme: ${buildOptions.themeName}`,
|
|
||||||
`- Enable the email theme (optional): Realm settings -> Themes tab -> Email theme: ${buildOptions.themeName} (option will appear only if you have ran npx initialize-email-theme)`,
|
|
||||||
`- Create a client Clients -> Create -> Client ID: myclient`,
|
|
||||||
` Root URL: https://www.keycloak.org/app/`,
|
|
||||||
` Valid redirect URIs: https://www.keycloak.org/app* http://localhost* (localhost is optional)`,
|
|
||||||
` Valid post logout redirect URIs: https://www.keycloak.org/app* http://localhost*`,
|
|
||||||
` Web origins: *`,
|
|
||||||
` Login Theme: ${buildOptions.themeName}`,
|
|
||||||
` Save (button at the bottom of the page)`,
|
|
||||||
``,
|
|
||||||
`- Go to 👉 https://www.keycloak.org/app/ 👈 Click "Save" then "Sign in". You should see your login page`,
|
|
||||||
`- Got to 👉 http://localhost:8080/realms/myrealm/account 👈 to see your account theme`,
|
|
||||||
``,
|
|
||||||
`Video tutorial: https://youtu.be/WMyGZNHQkjU`,
|
|
||||||
``
|
|
||||||
].join("\n")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
import * as fs from "fs";
|
|
||||||
import { assert } from "tsafe";
|
|
||||||
import type { Equals } from "tsafe";
|
|
||||||
import { z } from "zod";
|
|
||||||
import { pathJoin } from "../tools/pathJoin";
|
|
||||||
|
|
||||||
export const bundlers = ["mvn", "keycloakify", "none"] as const;
|
|
||||||
export type Bundler = (typeof bundlers)[number];
|
|
||||||
export type ParsedPackageJson = {
|
|
||||||
name: string;
|
|
||||||
version?: string;
|
|
||||||
homepage?: string;
|
|
||||||
keycloakify?: {
|
|
||||||
extraThemeProperties?: string[];
|
|
||||||
areAppAndKeycloakServerSharingSameDomain?: boolean;
|
|
||||||
artifactId?: string;
|
|
||||||
groupId?: string;
|
|
||||||
bundler?: Bundler;
|
|
||||||
keycloakVersionDefaultAssets?: string;
|
|
||||||
reactAppBuildDirPath?: string;
|
|
||||||
keycloakifyBuildDirPath?: string;
|
|
||||||
themeName?: string;
|
|
||||||
extraThemeNames?: string[];
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export const zParsedPackageJson = z.object({
|
|
||||||
"name": z.string(),
|
|
||||||
"version": z.string().optional(),
|
|
||||||
"homepage": z.string().optional(),
|
|
||||||
"keycloakify": z
|
|
||||||
.object({
|
|
||||||
"extraThemeProperties": z.array(z.string()).optional(),
|
|
||||||
"areAppAndKeycloakServerSharingSameDomain": z.boolean().optional(),
|
|
||||||
"artifactId": z.string().optional(),
|
|
||||||
"groupId": z.string().optional(),
|
|
||||||
"bundler": z.enum(bundlers).optional(),
|
|
||||||
"keycloakVersionDefaultAssets": z.string().optional(),
|
|
||||||
"reactAppBuildDirPath": z.string().optional(),
|
|
||||||
"keycloakifyBuildDirPath": z.string().optional(),
|
|
||||||
"themeName": z.string().optional(),
|
|
||||||
"extraThemeNames": z.array(z.string()).optional()
|
|
||||||
})
|
|
||||||
.optional()
|
|
||||||
});
|
|
||||||
|
|
||||||
assert<Equals<ReturnType<(typeof zParsedPackageJson)["parse"]>, ParsedPackageJson>>();
|
|
||||||
|
|
||||||
let parsedPackageJson: undefined | ReturnType<(typeof zParsedPackageJson)["parse"]>;
|
|
||||||
export function getParsedPackageJson(params: { projectDirPath: string }) {
|
|
||||||
const { projectDirPath } = params;
|
|
||||||
if (parsedPackageJson) {
|
|
||||||
return parsedPackageJson;
|
|
||||||
}
|
|
||||||
parsedPackageJson = zParsedPackageJson.parse(JSON.parse(fs.readFileSync(pathJoin(projectDirPath, "package.json")).toString("utf8")));
|
|
||||||
return parsedPackageJson;
|
|
||||||
}
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
import { ftlValuesGlobalName } from "../ftlValuesGlobalName";
|
|
||||||
|
|
||||||
export function replaceImportsFromStaticInJsCode(params: { jsCode: string }): { fixedJsCode: string } {
|
|
||||||
/*
|
|
||||||
NOTE:
|
|
||||||
|
|
||||||
When we have urlOrigin defined it means that
|
|
||||||
we are building with --external-assets
|
|
||||||
so we have to make sur that the fixed js code will run
|
|
||||||
inside and outside keycloak.
|
|
||||||
|
|
||||||
When urlOrigin isn't defined we can assume the fixedJsCode
|
|
||||||
will always run in keycloak context.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const { jsCode } = params;
|
|
||||||
|
|
||||||
const getReplaceArgs = (language: "js" | "css"): Parameters<typeof String.prototype.replace> => [
|
|
||||||
new RegExp(`([a-zA-Z_]+)\\.([a-zA-Z]+)=(function\\(([a-z]+)\\){return|([a-z]+)=>)"static\\/${language}\\/"`, "g"),
|
|
||||||
(...[, n, u, matchedFunction, eForFunction]) => {
|
|
||||||
const isArrowFunction = matchedFunction.includes("=>");
|
|
||||||
const e = isArrowFunction ? matchedFunction.replace("=>", "").trim() : eForFunction;
|
|
||||||
|
|
||||||
return `
|
|
||||||
${n}[(function(){
|
|
||||||
var pd = Object.getOwnPropertyDescriptor(${n}, "p");
|
|
||||||
if( pd === undefined || pd.configurable ){
|
|
||||||
Object.defineProperty(${n}, "p", {
|
|
||||||
get: function() { return window.${ftlValuesGlobalName}.url.resourcesPath; },
|
|
||||||
set: function() {}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return "${u}";
|
|
||||||
})()] = ${isArrowFunction ? `${e} =>` : `function(${e}) { return `} "/build/static/${language}/"`
|
|
||||||
.replace(/\s+/g, " ")
|
|
||||||
.trim();
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const fixedJsCode = jsCode
|
|
||||||
.replace(...getReplaceArgs("js"))
|
|
||||||
.replace(...getReplaceArgs("css"))
|
|
||||||
.replace(/[a-zA-Z]+\.[a-zA-Z]+\+"static\//g, `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`)
|
|
||||||
//TODO: Write a test case for this
|
|
||||||
.replace(
|
|
||||||
/".chunk.css",([a-zA-Z])+=[a-zA-Z]+\.[a-zA-Z]+\+([a-zA-Z]+),/,
|
|
||||||
(...[, group1, group2]) => `".chunk.css",${group1} = window.${ftlValuesGlobalName}.url.resourcesPath + "/build/" + ${group2},`
|
|
||||||
);
|
|
||||||
|
|
||||||
return { fixedJsCode };
|
|
||||||
}
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
import * as crypto from "crypto";
|
|
||||||
import type { BuildOptions } from "../BuildOptions";
|
|
||||||
import { assert } from "tsafe/assert";
|
|
||||||
|
|
||||||
export type BuildOptionsLike = {
|
|
||||||
urlPathname: string | undefined;
|
|
||||||
};
|
|
||||||
|
|
||||||
assert<BuildOptions extends BuildOptionsLike ? true : false>();
|
|
||||||
|
|
||||||
export function replaceImportsInCssCode(params: { cssCode: string }): {
|
|
||||||
fixedCssCode: string;
|
|
||||||
cssGlobalsToDefine: Record<string, string>;
|
|
||||||
} {
|
|
||||||
const { cssCode } = params;
|
|
||||||
|
|
||||||
const cssGlobalsToDefine: Record<string, string> = {};
|
|
||||||
|
|
||||||
new Set(cssCode.match(/url\(["']?\/[^/][^)"']+["']?\)[^;}]*/g) ?? []).forEach(
|
|
||||||
match => (cssGlobalsToDefine["url" + crypto.createHash("sha256").update(match).digest("hex").substring(0, 15)] = match)
|
|
||||||
);
|
|
||||||
|
|
||||||
let fixedCssCode = cssCode;
|
|
||||||
|
|
||||||
Object.keys(cssGlobalsToDefine).forEach(
|
|
||||||
cssVariableName =>
|
|
||||||
//NOTE: split/join pattern ~ replace all
|
|
||||||
(fixedCssCode = fixedCssCode.split(cssGlobalsToDefine[cssVariableName]).join(`var(--${cssVariableName})`))
|
|
||||||
);
|
|
||||||
|
|
||||||
return { fixedCssCode, cssGlobalsToDefine };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function generateCssCodeToDefineGlobals(params: { cssGlobalsToDefine: Record<string, string>; buildOptions: BuildOptionsLike }): {
|
|
||||||
cssCodeToPrependInHead: string;
|
|
||||||
} {
|
|
||||||
const { cssGlobalsToDefine, buildOptions } = params;
|
|
||||||
|
|
||||||
return {
|
|
||||||
"cssCodeToPrependInHead": [
|
|
||||||
":root {",
|
|
||||||
...Object.keys(cssGlobalsToDefine)
|
|
||||||
.map(cssVariableName =>
|
|
||||||
[
|
|
||||||
`--${cssVariableName}:`,
|
|
||||||
cssGlobalsToDefine[cssVariableName].replace(
|
|
||||||
new RegExp(`url\\(${(buildOptions.urlPathname ?? "/").replace(/\//g, "\\/")}`, "g"),
|
|
||||||
"url(${url.resourcesPath}/build/"
|
|
||||||
)
|
|
||||||
].join(" ")
|
|
||||||
)
|
|
||||||
.map(line => ` ${line};`),
|
|
||||||
"}"
|
|
||||||
].join("\n")
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
import type { BuildOptions } from "../BuildOptions";
|
|
||||||
import { assert } from "tsafe/assert";
|
|
||||||
|
|
||||||
export type BuildOptionsLike = {
|
|
||||||
urlPathname: string | undefined;
|
|
||||||
};
|
|
||||||
|
|
||||||
assert<BuildOptions extends BuildOptionsLike ? true : false>();
|
|
||||||
|
|
||||||
export function replaceImportsInInlineCssCode(params: { cssCode: string; buildOptions: BuildOptionsLike }): {
|
|
||||||
fixedCssCode: string;
|
|
||||||
} {
|
|
||||||
const { cssCode, buildOptions } = params;
|
|
||||||
|
|
||||||
const fixedCssCode = cssCode.replace(
|
|
||||||
buildOptions.urlPathname === undefined
|
|
||||||
? /url\(["']?\/([^/][^)"']+)["']?\)/g
|
|
||||||
: new RegExp(`url\\(["']?${buildOptions.urlPathname}([^)"']+)["']?\\)`, "g"),
|
|
||||||
(...[, group]) => `url(\${url.resourcesPath}/build/${group})`
|
|
||||||
);
|
|
||||||
|
|
||||||
return { fixedCssCode };
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import { pathJoin } from "./tools/pathJoin";
|
|
||||||
|
|
||||||
export const basenameOfKeycloakDirInPublicDir = "keycloak-resources";
|
|
||||||
export const resourcesDirPathRelativeToPublicDir = pathJoin(basenameOfKeycloakDirInPublicDir, "resources");
|
|
||||||
export const resourcesCommonDirPathRelativeToPublicDir = pathJoin(resourcesDirPathRelativeToPublicDir, "resources_common");
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
import { getLatestsSemVersionedTagFactory } from "./tools/octokit-addons/getLatestsSemVersionedTag";
|
|
||||||
import { Octokit } from "@octokit/rest";
|
|
||||||
import cliSelect from "cli-select";
|
|
||||||
|
|
||||||
export async function promptKeycloakVersion() {
|
|
||||||
const { getLatestsSemVersionedTag } = (() => {
|
|
||||||
const { octokit } = (() => {
|
|
||||||
const githubToken = process.env.GITHUB_TOKEN;
|
|
||||||
|
|
||||||
const octokit = new Octokit(githubToken === undefined ? undefined : { "auth": githubToken });
|
|
||||||
|
|
||||||
return { octokit };
|
|
||||||
})();
|
|
||||||
|
|
||||||
const { getLatestsSemVersionedTag } = getLatestsSemVersionedTagFactory({ octokit });
|
|
||||||
|
|
||||||
return { getLatestsSemVersionedTag };
|
|
||||||
})();
|
|
||||||
|
|
||||||
console.log("Select Keycloak version?");
|
|
||||||
|
|
||||||
const tags = [
|
|
||||||
...(await getLatestsSemVersionedTag({
|
|
||||||
"count": 10,
|
|
||||||
"doIgnoreBeta": true,
|
|
||||||
"owner": "keycloak",
|
|
||||||
"repo": "keycloak"
|
|
||||||
}).then(arr => arr.map(({ tag }) => tag))),
|
|
||||||
"11.0.3"
|
|
||||||
];
|
|
||||||
|
|
||||||
if (process.env["GITHUB_ACTIONS"] === "true") {
|
|
||||||
return { "keycloakVersion": tags[0] };
|
|
||||||
}
|
|
||||||
|
|
||||||
const { value: keycloakVersion } = await cliSelect<string>({
|
|
||||||
"values": tags
|
|
||||||
}).catch(() => {
|
|
||||||
console.log("Aborting");
|
|
||||||
|
|
||||||
process.exit(-1);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log(keycloakVersion);
|
|
||||||
|
|
||||||
return { keycloakVersion };
|
|
||||||
}
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user