Compare commits
21 Commits
Author | SHA1 | Date | |
---|---|---|---|
2f16a09ab8 | |||
183ae98c30 | |||
ba15e63879 | |||
654277feda | |||
81279a5cc5 | |||
59f0a843b0 | |||
c094f70171 | |||
0858fe6319 | |||
5012ec0ccc | |||
990a24fab2 | |||
036b6bf82a | |||
8272a02b52 | |||
e346b1d9d2 | |||
2309bd21c6 | |||
7d6476c1b5 | |||
e892a0e7e6 | |||
ca5b41e730 | |||
9b18234112 | |||
5274368f47 | |||
1415c24028 | |||
4a084f5859 |
24
CHANGELOG.md
24
CHANGELOG.md
@ -1,3 +1,27 @@
|
|||||||
|
### **0.3.19** (2021-04-01)
|
||||||
|
|
||||||
|
- Fix previous release
|
||||||
|
|
||||||
|
### **0.3.18** (2021-04-01)
|
||||||
|
|
||||||
|
- Fix error.ftt, Adopt best effort strategy to convert ftl values into JS
|
||||||
|
|
||||||
|
### **0.3.17** (2021-03-29)
|
||||||
|
|
||||||
|
- Use push instead of replace in keycloak-js adapter to enable going back
|
||||||
|
|
||||||
|
### **0.3.15** (2021-03-28)
|
||||||
|
|
||||||
|
- Remove all reference to --external-assets, broken feature
|
||||||
|
|
||||||
|
### **0.3.14** (2021-03-28)
|
||||||
|
|
||||||
|
- Fix standalone mode: imports from js
|
||||||
|
|
||||||
|
### **0.3.13** (2021-03-26)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### **0.3.12** (2021-03-26)
|
### **0.3.12** (2021-03-26)
|
||||||
|
|
||||||
- Fix mocksContext
|
- Fix mocksContext
|
||||||
|
51
README.md
51
README.md
@ -41,7 +41,6 @@ Here is `yarn add keycloakify` for you 🍸
|
|||||||
- [Motivations](#motivations)
|
- [Motivations](#motivations)
|
||||||
- [How to use](#how-to-use)
|
- [How to use](#how-to-use)
|
||||||
- [Setting up the build tool](#setting-up-the-build-tool)
|
- [Setting up the build tool](#setting-up-the-build-tool)
|
||||||
- [Specify from where the resources should be downloaded.](#specify-from-where-the-resources-should-be-downloaded)
|
|
||||||
- [Developing your login and register pages in your React app](#developing-your-login-and-register-pages-in-your-react-app)
|
- [Developing your login and register pages in your React app](#developing-your-login-and-register-pages-in-your-react-app)
|
||||||
- [Just changing the look](#just-changing-the-look)
|
- [Just changing the look](#just-changing-the-look)
|
||||||
- [Changing the look **and** feel](#changing-the-look-and-feel)
|
- [Changing the look **and** feel](#changing-the-look-and-feel)
|
||||||
@ -70,10 +69,8 @@ Here is `yarn add keycloakify` for you 🍸
|
|||||||
"keycloak": "yarn build && build-keycloak-theme",
|
"keycloak": "yarn build && build-keycloak-theme",
|
||||||
},
|
},
|
||||||
```
|
```
|
||||||
`"homepage"` must be specified only if the theme is build using
|
`"homepage"` must be specified only if the url path is not `/`
|
||||||
`--external-assets`(#specify-from-where-the-resources-should-be-downloaded) or if
|
(Onl `/YOUR-APP` matters `URL.OF` don't have to be the actual domain)
|
||||||
the url path is not `/` (only the url path will be considered so it doesn't matter if the
|
|
||||||
base url is wrong)
|
|
||||||
|
|
||||||
It is mandatory that you specify the url where your app will be available
|
It is mandatory that you specify the url where your app will be available
|
||||||
using the `homepage` field.
|
using the `homepage` field.
|
||||||
@ -85,46 +82,6 @@ dependency with `yarn install` and build the keycloak theme with
|
|||||||
Once the build is complete instructions about how to load
|
Once the build is complete instructions about how to load
|
||||||
the theme into Keycloak are printed in the console.
|
the theme into Keycloak are printed in the console.
|
||||||
|
|
||||||
### Specify from where the resources should be downloaded.
|
|
||||||
|
|
||||||
*TL;DR*: Building the theme with the `--external-assets` option enables the login
|
|
||||||
page to load faster for first time users but it also implies that:
|
|
||||||
- If the app is down, your Keycloak login and register pages are down as well.
|
|
||||||
- Each time the app is updated, the theme must be updated.
|
|
||||||
- CORS must be enabled for fonts.
|
|
||||||
- You must know at build time what will be the url of your app (`"homepage"` in `package.json`).
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Click to expand</summary>
|
|
||||||
|
|
||||||
When you run `npx build-keycloak-theme` without arguments, Keycloakify will build
|
|
||||||
a standalone version of the Keycloak theme. That is to say even if your app, the
|
|
||||||
one hosted at the url specified as `homepage`, is down the Keycloak theme will still work.
|
|
||||||
It also mean that you won't have to update your theme on your Keycloak server each time
|
|
||||||
your app is updated.
|
|
||||||
In this mode, the default, every asset are served by the keycloak server.
|
|
||||||
The drawback of this approach is that when users access the login page for the first time
|
|
||||||
they have to download the whole app again.
|
|
||||||
You probably have [long-term asset caching](https://create-react-app.dev/docs/production-build/#static-file-caching)
|
|
||||||
enabled in the server that host your app ([example](https://github.com/garronej/keycloakify-demo-app/blob/224c43383548635a463fa68e8909c147ac189f0e/nginx.conf#L14))
|
|
||||||
so it can be interesting to only serve the html from Keycloak server and everything
|
|
||||||
else, your JS bundles, your CSS ect from the server that host your app.
|
|
||||||
|
|
||||||
To enable this behavior you car run:
|
|
||||||
```bash
|
|
||||||
npx build-keycloak-theme --external-assets
|
|
||||||
```
|
|
||||||
(instead of `npx build-keycloak-theme`)
|
|
||||||
|
|
||||||
This is something you probably want to do in your CI pipeline. [Example](https://github.com/garronej/keycloakify-demo-app/blob/224c43383548635a463fa68e8909c147ac189f0e/.github/workflows/ci.yaml#L112)
|
|
||||||
|
|
||||||
Also note that there is [a same-origin policy exception for fonts](https://en.wikipedia.org/wiki/Same-origin_policy#cite_note-3) so you must enabled
|
|
||||||
CORS for fonts on the server hosting your app. Concretely this mean that your server should add a `Access-Control-Allow-Origin: *` response header to
|
|
||||||
GET request on *.woff2?. [Example with Nginx](https://github.com/garronej/keycloakify-demo-app/blob/224c43383548635a463fa68e8909c147ac189f0e/nginx.conf#L18-L20)
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
|
|
||||||
## Developing your login and register pages in your React app
|
## Developing your login and register pages in your React app
|
||||||
|
|
||||||
### Just changing the look
|
### Just changing the look
|
||||||
@ -240,8 +197,6 @@ NOTE: This build tool has only be tested on MacOS.
|
|||||||
You won't be able to [import things from your public directory in your JavaScript code](https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system). (This isn't recommended anyway).
|
You won't be able to [import things from your public directory in your JavaScript code](https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system). (This isn't recommended anyway).
|
||||||
|
|
||||||
## `@font-face` importing fonts from the `src/` dir
|
## `@font-face` importing fonts from the `src/` dir
|
||||||
|
|
||||||
**If you are building the theme with `--external-assets` this limitation doesn't apply.**
|
|
||||||
### Example of setup that **won't** work
|
### Example of setup that **won't** work
|
||||||
|
|
||||||
- We have a `fonts/` directory in `src/`
|
- We have a `fonts/` directory in `src/`
|
||||||
@ -322,5 +277,5 @@ flash of the blank html before the js bundle have been evaluated
|
|||||||
|
|
||||||
Part of the lib that runs with node, at build time.
|
Part of the lib that runs with node, at build time.
|
||||||
|
|
||||||
- `npx build-keycloak-theme [--external-assets]`: Builds the theme, the CWD is assumed to be the root of your react project.
|
- `npx build-keycloak-theme`: Builds the theme, the CWD is assumed to be the root of your react project.
|
||||||
- `npx download-sample-keycloak-themes`: Downloads the keycloak default themes (for development purposes)
|
- `npx download-sample-keycloak-themes`: Downloads the keycloak default themes (for development purposes)
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "keycloakify",
|
"name": "keycloakify",
|
||||||
"version": "0.3.12",
|
"version": "0.3.19",
|
||||||
"description": "Keycloak theme generator for Reacts app",
|
"description": "Keycloak theme generator for Reacts app",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@ -14,8 +14,7 @@
|
|||||||
"grant-exec-perms": "node dist/bin/tools/grant-exec-perms.js",
|
"grant-exec-perms": "node dist/bin/tools/grant-exec-perms.js",
|
||||||
"test": "node dist/test",
|
"test": "node dist/test",
|
||||||
"copy-files": "copyfiles -u 1 src/**/*.ftl src/**/*.xml src/**/*.js dist/",
|
"copy-files": "copyfiles -u 1 src/**/*.ftl src/**/*.xml src/**/*.js dist/",
|
||||||
"generate-messages": "node dist/bin/generate-i18n-messages.js",
|
"generate-messages": "node dist/bin/generate-i18n-messages.js"
|
||||||
"watch": "tsc -w"
|
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
"build-keycloak-theme": "dist/bin/build-keycloak-theme/index.js",
|
"build-keycloak-theme": "dist/bin/build-keycloak-theme/index.js",
|
||||||
|
@ -1,17 +1,27 @@
|
|||||||
<script>const _=
|
<script>const _=
|
||||||
{
|
{
|
||||||
"url": {
|
"url": (function (){
|
||||||
"loginAction": "${url.loginAction?no_esc}",
|
|
||||||
"resourcesPath": "${url.resourcesPath?no_esc}",
|
<#if url?has_content>
|
||||||
"resourcesCommonPath": "${url.resourcesCommonPath?no_esc}",
|
|
||||||
"loginRestartFlowUrl": "${url.loginRestartFlowUrl?no_esc}",
|
return {
|
||||||
"loginUrl": "${url.loginUrl?no_esc}"
|
"loginAction": "${(url.loginAction!'')?no_esc}",
|
||||||
},
|
"resourcesPath": "${(url.resourcesPath!'')?no_esc}",
|
||||||
|
"resourcesCommonPath": "${(url.resourcesCommonPath!'')?no_esc}",
|
||||||
|
"loginRestartFlowUrl": "${(url.loginRestartFlowUrl!'')?no_esc}",
|
||||||
|
"loginUrl": "${(url.loginUrl!'')?no_esc}"
|
||||||
|
};
|
||||||
|
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
return undefined;
|
||||||
|
|
||||||
|
})(),
|
||||||
"realm": {
|
"realm": {
|
||||||
"displayName": "${realm.displayName!''}" || undefined,
|
"displayName": "${realm.displayName!''}" || undefined,
|
||||||
"displayNameHtml": "${realm.displayNameHtml!''}" || undefined,
|
"displayNameHtml": "${realm.displayNameHtml!''}" || undefined,
|
||||||
"internationalizationEnabled": ${realm.internationalizationEnabled?c},
|
"internationalizationEnabled": ${(realm.internationalizationEnabled!false)?c},
|
||||||
"registrationEmailAsUsername": ${realm.registrationEmailAsUsername?c},
|
"registrationEmailAsUsername": ${(realm.registrationEmailAsUsername!false)?c},
|
||||||
},
|
},
|
||||||
"locale": (function (){
|
"locale": (function (){
|
||||||
|
|
||||||
@ -20,23 +30,17 @@
|
|||||||
return {
|
return {
|
||||||
"supported": (function(){
|
"supported": (function(){
|
||||||
|
|
||||||
<#if realm.internationalizationEnabled>
|
var out= [];
|
||||||
|
|
||||||
var out= [];
|
<#list locale.supported as lng>
|
||||||
|
out.push({
|
||||||
|
"url": "${lng.url?no_esc}",
|
||||||
|
"label": "${lng.label}",
|
||||||
|
"languageTag": "${lng.languageTag}"
|
||||||
|
});
|
||||||
|
</#list>
|
||||||
|
|
||||||
<#list locale.supported as lng>
|
return out;
|
||||||
out.push({
|
|
||||||
"url": "${lng.url?no_esc}",
|
|
||||||
"label": "${lng.label}",
|
|
||||||
"languageTag": "${lng.languageTag}"
|
|
||||||
});
|
|
||||||
</#list>
|
|
||||||
|
|
||||||
return out;
|
|
||||||
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
return undefined;
|
|
||||||
|
|
||||||
})(),
|
})(),
|
||||||
"current": "${locale.current}"
|
"current": "${locale.current}"
|
||||||
@ -46,10 +50,10 @@
|
|||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
|
|
||||||
|
|
||||||
})(),
|
})(),
|
||||||
"auth": (function (){
|
"auth": (function (){
|
||||||
|
|
||||||
|
|
||||||
<#if auth?has_content>
|
<#if auth?has_content>
|
||||||
|
|
||||||
var out= {
|
var out= {
|
||||||
@ -71,9 +75,9 @@
|
|||||||
|
|
||||||
</#if>
|
</#if>
|
||||||
|
|
||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
|
|
||||||
|
|
||||||
})(),
|
})(),
|
||||||
"scripts": (function(){
|
"scripts": (function(){
|
||||||
|
|
@ -19,7 +19,7 @@ function loadAdjacentFile(fileBasename: string) {
|
|||||||
.toString("utf8");
|
.toString("utf8");
|
||||||
};
|
};
|
||||||
|
|
||||||
function loadFtlFile(ftlFileBasename: PageId | "template.ftl") {
|
function loadFtlFile(ftlFileBasename: PageId | "common.ftl") {
|
||||||
try {
|
try {
|
||||||
|
|
||||||
return loadAdjacentFile(ftlFileBasename)
|
return loadAdjacentFile(ftlFileBasename)
|
||||||
@ -37,12 +37,7 @@ export function generateFtlFilesCodeFactory(
|
|||||||
cssGlobalsToDefine: Record<string, string>;
|
cssGlobalsToDefine: Record<string, string>;
|
||||||
indexHtmlCode: string;
|
indexHtmlCode: string;
|
||||||
urlPathname: string;
|
urlPathname: string;
|
||||||
} & ({
|
}
|
||||||
mode: "standalone";
|
|
||||||
} | {
|
|
||||||
mode: "external assets";
|
|
||||||
urlOrigin: string;
|
|
||||||
})
|
|
||||||
) {
|
) {
|
||||||
|
|
||||||
const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode, urlPathname } = params;
|
const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode, urlPathname } = params;
|
||||||
@ -53,19 +48,7 @@ export function generateFtlFilesCodeFactory(
|
|||||||
|
|
||||||
const { fixedJsCode } = replaceImportsFromStaticInJsCode({
|
const { fixedJsCode } = replaceImportsFromStaticInJsCode({
|
||||||
ftlValuesGlobalName,
|
ftlValuesGlobalName,
|
||||||
"jsCode": $(element).html()!,
|
"jsCode": $(element).html()!
|
||||||
...(() => {
|
|
||||||
switch (params.mode) {
|
|
||||||
case "standalone": return {
|
|
||||||
"mode": params.mode
|
|
||||||
};
|
|
||||||
case "external assets": return {
|
|
||||||
"mode": params.mode,
|
|
||||||
"urlOrigin": params.urlOrigin,
|
|
||||||
"urlPathname": params.urlPathname,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$(element).text(fixedJsCode);
|
$(element).text(fixedJsCode);
|
||||||
@ -76,18 +59,7 @@ export function generateFtlFilesCodeFactory(
|
|||||||
|
|
||||||
const { fixedCssCode } = replaceImportsInInlineCssCode({
|
const { fixedCssCode } = replaceImportsInInlineCssCode({
|
||||||
"cssCode": $(element).html()!,
|
"cssCode": $(element).html()!,
|
||||||
"urlPathname": params.urlPathname,
|
"urlPathname": params.urlPathname
|
||||||
...(() => {
|
|
||||||
switch (params.mode) {
|
|
||||||
case "standalone": return {
|
|
||||||
"mode": params.mode
|
|
||||||
};
|
|
||||||
case "external assets": return {
|
|
||||||
"mode": params.mode,
|
|
||||||
"urlOrigin": params.urlOrigin,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$(element).text(fixedCssCode);
|
$(element).text(fixedCssCode);
|
||||||
@ -106,31 +78,20 @@ export function generateFtlFilesCodeFactory(
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (params.mode) {
|
$(element).attr(
|
||||||
case "external assets":
|
attrName,
|
||||||
$(element).attr(
|
href.replace(
|
||||||
attrName,
|
new RegExp(`^${urlPathname.replace(/\//g, "\\/")}`),
|
||||||
href.replace(/^\//, `${params.urlOrigin}/`)
|
"${url.resourcesPath}/build/"
|
||||||
);
|
)
|
||||||
break;
|
);
|
||||||
case "standalone":
|
|
||||||
$(element).attr(
|
|
||||||
attrName,
|
|
||||||
href.replace(
|
|
||||||
new RegExp(`^${urlPathname.replace(/\//g, "\\/")}`),
|
|
||||||
"${url.resourcesPath}/build/"
|
|
||||||
)
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
//FTL is no valid html, we can't insert with cheerio, we put placeholder for injecting later.
|
//FTL is no valid html, we can't insert with cheerio, we put placeholder for injecting later.
|
||||||
const ftlCommonPlaceholders = {
|
const ftlCommonPlaceholders = {
|
||||||
'{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }': loadFtlFile("template.ftl"),
|
'{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }': loadFtlFile("common.ftl"),
|
||||||
'<!-- xIdLqMeOedErIdLsPdNdI9dSlxI -->':
|
'<!-- xIdLqMeOedErIdLsPdNdI9dSlxI -->':
|
||||||
[
|
[
|
||||||
'<#if scripts??>',
|
'<#if scripts??>',
|
||||||
|
@ -21,12 +21,7 @@ export function generateKeycloakThemeResources(
|
|||||||
reactAppBuildDirPath: string;
|
reactAppBuildDirPath: string;
|
||||||
keycloakThemeBuildingDirPath: string;
|
keycloakThemeBuildingDirPath: string;
|
||||||
urlPathname: string;
|
urlPathname: string;
|
||||||
} & ({
|
}
|
||||||
mode: "standalone";
|
|
||||||
} | {
|
|
||||||
mode: "external assets";
|
|
||||||
urlOrigin: string;
|
|
||||||
})
|
|
||||||
) {
|
) {
|
||||||
|
|
||||||
const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, urlPathname } = params;
|
const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, urlPathname } = params;
|
||||||
@ -50,34 +45,31 @@ export function generateKeycloakThemeResources(
|
|||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (params.mode === "standalone") {
|
|
||||||
|
|
||||||
if (/\.css?$/i.test(filePath)) {
|
if (/\.css?$/i.test(filePath)) {
|
||||||
|
|
||||||
const { cssGlobalsToDefine, fixedCssCode } = replaceImportsInCssCode(
|
const { cssGlobalsToDefine, fixedCssCode } = replaceImportsInCssCode(
|
||||||
{ "cssCode": sourceCode.toString("utf8") }
|
{ "cssCode": sourceCode.toString("utf8") }
|
||||||
);
|
);
|
||||||
|
|
||||||
allCssGlobalsToDefine = {
|
allCssGlobalsToDefine = {
|
||||||
...allCssGlobalsToDefine,
|
...allCssGlobalsToDefine,
|
||||||
...cssGlobalsToDefine
|
...cssGlobalsToDefine
|
||||||
};
|
};
|
||||||
|
|
||||||
return { "modifiedSourceCode": Buffer.from(fixedCssCode, "utf8") };
|
return { "modifiedSourceCode": Buffer.from(fixedCssCode, "utf8") };
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (/\.js?$/i.test(filePath)) {
|
|
||||||
|
|
||||||
const { fixedJsCode } = replaceImportsFromStaticInJsCode({
|
if (/\.js?$/i.test(filePath)) {
|
||||||
"jsCode": sourceCode.toString("utf8"),
|
|
||||||
ftlValuesGlobalName,
|
|
||||||
"mode": params.mode
|
|
||||||
});
|
|
||||||
|
|
||||||
return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
|
const { fixedJsCode } = replaceImportsFromStaticInJsCode({
|
||||||
|
"jsCode": sourceCode.toString("utf8"),
|
||||||
|
ftlValuesGlobalName
|
||||||
|
});
|
||||||
|
|
||||||
}
|
return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -92,18 +84,7 @@ export function generateKeycloakThemeResources(
|
|||||||
"indexHtmlCode": fs.readFileSync(
|
"indexHtmlCode": fs.readFileSync(
|
||||||
pathJoin(reactAppBuildDirPath, "index.html")
|
pathJoin(reactAppBuildDirPath, "index.html")
|
||||||
).toString("utf8"),
|
).toString("utf8"),
|
||||||
urlPathname,
|
urlPathname
|
||||||
...(() => {
|
|
||||||
switch (params.mode) {
|
|
||||||
case "external assets": return {
|
|
||||||
"mode": params.mode,
|
|
||||||
"urlOrigin": params.urlOrigin
|
|
||||||
};
|
|
||||||
case "standalone": return {
|
|
||||||
"mode": params.mode
|
|
||||||
};
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
});
|
});
|
||||||
|
|
||||||
pageIds.forEach(pageId => {
|
pageIds.forEach(pageId => {
|
||||||
|
@ -11,8 +11,6 @@ import { URL } from "url";
|
|||||||
|
|
||||||
const reactProjectDirPath = process.cwd();
|
const reactProjectDirPath = process.cwd();
|
||||||
|
|
||||||
const doUseExternalAssets = process.argv[2]?.toLowerCase() === "--external-assets";
|
|
||||||
|
|
||||||
const parsedPackageJson: ParsedPackageJson = require(pathJoin(reactProjectDirPath, "package.json"));
|
const parsedPackageJson: ParsedPackageJson = require(pathJoin(reactProjectDirPath, "package.json"));
|
||||||
|
|
||||||
export const keycloakThemeBuildingDirPath = pathJoin(reactProjectDirPath, "build_keycloak");
|
export const keycloakThemeBuildingDirPath = pathJoin(reactProjectDirPath, "build_keycloak");
|
||||||
@ -26,8 +24,7 @@ if (require.main === module) {
|
|||||||
keycloakThemeBuildingDirPath,
|
keycloakThemeBuildingDirPath,
|
||||||
"reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
|
"reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
|
||||||
"themeName": parsedPackageJson.name,
|
"themeName": parsedPackageJson.name,
|
||||||
...(() => {
|
"urlPathname": (() => {
|
||||||
|
|
||||||
|
|
||||||
const url = (() => {
|
const url = (() => {
|
||||||
|
|
||||||
@ -39,35 +36,12 @@ if (require.main === module) {
|
|||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
||||||
const urlPathname =
|
return url === undefined ?
|
||||||
url === undefined ?
|
"/" :
|
||||||
"/" :
|
url.pathname.replace(/([^/])$/, "$1/");
|
||||||
url.pathname.replace(/([^/])$/, "$1/");
|
|
||||||
|
|
||||||
return !doUseExternalAssets ?
|
|
||||||
{
|
|
||||||
"mode": "standalone",
|
|
||||||
urlPathname
|
|
||||||
} as const
|
|
||||||
:
|
|
||||||
{
|
|
||||||
"mode": "external assets",
|
|
||||||
urlPathname,
|
|
||||||
"urlOrigin": (() => {
|
|
||||||
|
|
||||||
if (url === undefined) {
|
|
||||||
console.error("ERROR: You must specify 'homepage' in your package.json");
|
|
||||||
process.exit(-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
return url.origin;
|
|
||||||
|
|
||||||
})()
|
|
||||||
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
})()
|
})()
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const { jarFilePath } = generateJavaStackFiles({
|
const { jarFilePath } = generateJavaStackFiles({
|
||||||
|
@ -5,27 +5,14 @@ export function replaceImportsFromStaticInJsCode(
|
|||||||
params: {
|
params: {
|
||||||
ftlValuesGlobalName: string;
|
ftlValuesGlobalName: string;
|
||||||
jsCode: string;
|
jsCode: string;
|
||||||
} & ({
|
}
|
||||||
mode: "standalone";
|
|
||||||
} | {
|
|
||||||
mode: "external assets";
|
|
||||||
urlOrigin: string;
|
|
||||||
urlPathname: string;
|
|
||||||
})
|
|
||||||
): { fixedJsCode: string; } {
|
): { fixedJsCode: string; } {
|
||||||
|
|
||||||
const { jsCode, ftlValuesGlobalName } = params;
|
const { jsCode, ftlValuesGlobalName } = params;
|
||||||
|
|
||||||
const fixedJsCode = jsCode.replace(
|
const fixedJsCode = jsCode.replace(
|
||||||
/[a-z]+\.[a-z]+\+"static\//g,
|
/[a-z]+\.[a-z]+\+"static\//g,
|
||||||
(() => {
|
`window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`
|
||||||
switch (params.mode) {
|
|
||||||
case "standalone":
|
|
||||||
return `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`;
|
|
||||||
case "external assets":
|
|
||||||
return `"${params.urlOrigin}${params.urlPathname}static/`;
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return { fixedJsCode };
|
return { fixedJsCode };
|
||||||
@ -36,12 +23,7 @@ export function replaceImportsInInlineCssCode(
|
|||||||
params: {
|
params: {
|
||||||
cssCode: string;
|
cssCode: string;
|
||||||
urlPathname: string;
|
urlPathname: string;
|
||||||
} & ({
|
}
|
||||||
mode: "standalone";
|
|
||||||
} | {
|
|
||||||
mode: "external assets";
|
|
||||||
urlOrigin: string;
|
|
||||||
})
|
|
||||||
): { fixedCssCode: string; } {
|
): { fixedCssCode: string; } {
|
||||||
|
|
||||||
const { cssCode, urlPathname } = params;
|
const { cssCode, urlPathname } = params;
|
||||||
@ -50,13 +32,7 @@ export function replaceImportsInInlineCssCode(
|
|||||||
urlPathname === "/" ?
|
urlPathname === "/" ?
|
||||||
/url\(\/([^/][^)]+)\)/g :
|
/url\(\/([^/][^)]+)\)/g :
|
||||||
new RegExp(`url\\(${urlPathname}([^)]+)\\)`, "g"),
|
new RegExp(`url\\(${urlPathname}([^)]+)\\)`, "g"),
|
||||||
(...[, group]) => `url(${(() => {
|
(...[, group]) => `url(${"${url.resourcesPath}/build/" + group})`
|
||||||
switch (params.mode) {
|
|
||||||
case "standalone": return "${url.resourcesPath}/build/" + group;
|
|
||||||
case "external assets": return params.urlOrigin + urlPathname + group
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
})`
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return { fixedCssCode };
|
return { fixedCssCode };
|
||||||
|
@ -25,7 +25,7 @@ export type TemplateProps = {
|
|||||||
showUsernameNode?: ReactNode;
|
showUsernameNode?: ReactNode;
|
||||||
formNode: ReactNode;
|
formNode: ReactNode;
|
||||||
infoNode?: ReactNode;
|
infoNode?: ReactNode;
|
||||||
} & { kcContext: KcContext.Template; } & KcTemplateProps;
|
} & { kcContext: KcContext; } & KcTemplateProps;
|
||||||
|
|
||||||
export const Template = memo((props: TemplateProps) => {
|
export const Template = memo((props: TemplateProps) => {
|
||||||
|
|
||||||
|
@ -10,12 +10,17 @@ import type { LanguageLabel } from "./i18n/KcLanguageTag";
|
|||||||
type ExtractAfterStartingWith<Prefix extends string, StrEnum> =
|
type ExtractAfterStartingWith<Prefix extends string, StrEnum> =
|
||||||
StrEnum extends `${Prefix}${infer U}` ? U : never;
|
StrEnum extends `${Prefix}${infer U}` ? U : never;
|
||||||
|
|
||||||
|
/** Take theses type definition with a grain of salt.
|
||||||
|
* Some values might be undefined on some pages.
|
||||||
|
* (ex: url.loginAction is undefined on error.ftl)
|
||||||
|
*/
|
||||||
export type KcContext =
|
export type KcContext =
|
||||||
KcContext.Login | KcContext.Register | KcContext.Info |
|
KcContext.Login | KcContext.Register | KcContext.Info |
|
||||||
KcContext.Error | KcContext.LoginResetPassword | KcContext.LoginVerifyEmail;
|
KcContext.Error | KcContext.LoginResetPassword | KcContext.LoginVerifyEmail;
|
||||||
|
|
||||||
export declare namespace KcContext {
|
export declare namespace KcContext {
|
||||||
|
|
||||||
export type Template = {
|
export type Common = {
|
||||||
url: {
|
url: {
|
||||||
loginAction: string;
|
loginAction: string;
|
||||||
resourcesPath: string;
|
resourcesPath: string;
|
||||||
@ -27,7 +32,7 @@ export declare namespace KcContext {
|
|||||||
displayName?: string;
|
displayName?: string;
|
||||||
displayNameHtml?: string;
|
displayNameHtml?: string;
|
||||||
internationalizationEnabled: boolean;
|
internationalizationEnabled: boolean;
|
||||||
registrationEmailAsUsername: boolean; //<---
|
registrationEmailAsUsername: boolean;
|
||||||
};
|
};
|
||||||
/** Undefined if !realm.internationalizationEnabled */
|
/** Undefined if !realm.internationalizationEnabled */
|
||||||
locale?: {
|
locale?: {
|
||||||
@ -55,7 +60,7 @@ export declare namespace KcContext {
|
|||||||
isAppInitiatedAction: boolean;
|
isAppInitiatedAction: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Login = Template & {
|
export type Login = Common & {
|
||||||
pageId: "login.ftl";
|
pageId: "login.ftl";
|
||||||
url: {
|
url: {
|
||||||
loginResetCredentialsUrl: string;
|
loginResetCredentialsUrl: string;
|
||||||
@ -88,7 +93,7 @@ export declare namespace KcContext {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Register = Template & {
|
export type Register = Common & {
|
||||||
pageId: "register.ftl";
|
pageId: "register.ftl";
|
||||||
url: {
|
url: {
|
||||||
registrationAction: string;
|
registrationAction: string;
|
||||||
@ -120,7 +125,7 @@ export declare namespace KcContext {
|
|||||||
recaptchaSiteKey?: string;
|
recaptchaSiteKey?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Info = Template & {
|
export type Info = Common & {
|
||||||
pageId: "info.ftl";
|
pageId: "info.ftl";
|
||||||
messageHeader?: string;
|
messageHeader?: string;
|
||||||
requiredActions?: ExtractAfterStartingWith<"requiredAction.", MessageKey>[];
|
requiredActions?: ExtractAfterStartingWith<"requiredAction.", MessageKey>[];
|
||||||
@ -132,21 +137,21 @@ export declare namespace KcContext {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Error = Template & {
|
export type Error = Common & {
|
||||||
pageId: "error.ftl";
|
pageId: "error.ftl";
|
||||||
client?: {
|
client?: {
|
||||||
baseUrl?: string;
|
baseUrl?: string;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export type LoginResetPassword = Template & {
|
export type LoginResetPassword = Common & {
|
||||||
pageId: "login-reset-password.ftl";
|
pageId: "login-reset-password.ftl";
|
||||||
realm: {
|
realm: {
|
||||||
loginWithEmailAllowed: boolean;
|
loginWithEmailAllowed: boolean;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export type LoginVerifyEmail = Template & {
|
export type LoginVerifyEmail = Common & {
|
||||||
pageId: "login-verify-email.ftl";
|
pageId: "login-verify-email.ftl";
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -6,10 +6,10 @@ import { getKcLanguageTagLabel } from "../i18n/KcLanguageTag";
|
|||||||
//NOTE: Aside because we want to be able to import them from node
|
//NOTE: Aside because we want to be able to import them from node
|
||||||
import { resourcesCommonPath, resourcesPath } from "./urlResourcesPath";
|
import { resourcesCommonPath, resourcesPath } from "./urlResourcesPath";
|
||||||
|
|
||||||
export const kcTemplateContext: KcContext.Template = {
|
const kcCommonContext: KcContext.Common = {
|
||||||
"url": {
|
"url": {
|
||||||
"loginAction": "#",
|
"loginAction": "#",
|
||||||
"resourcesPath": `/${resourcesPath}`,
|
"resourcesPath": `${process.env["PUBLIC_URL"]}/${resourcesPath}`,
|
||||||
"resourcesCommonPath": `${process.env["PUBLIC_URL"]}/${resourcesCommonPath}`,
|
"resourcesCommonPath": `${process.env["PUBLIC_URL"]}/${resourcesCommonPath}`,
|
||||||
"loginRestartFlowUrl": "/auth/realms/myrealm/login-actions/restart?client_id=account&tab_id=HoAx28ja4xg",
|
"loginRestartFlowUrl": "/auth/realms/myrealm/login-actions/restart?client_id=account&tab_id=HoAx28ja4xg",
|
||||||
"loginUrl": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg",
|
"loginUrl": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg",
|
||||||
@ -111,7 +111,7 @@ export const kcTemplateContext: KcContext.Template = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
Object.defineProperty(
|
Object.defineProperty(
|
||||||
kcTemplateContext.locale!,
|
kcCommonContext.locale!,
|
||||||
"current",
|
"current",
|
||||||
{
|
{
|
||||||
"get": () => getKcLanguageTagLabel(getEvtKcLanguage().state),
|
"get": () => getKcLanguageTagLabel(getEvtKcLanguage().state),
|
||||||
@ -120,22 +120,22 @@ Object.defineProperty(
|
|||||||
);
|
);
|
||||||
|
|
||||||
export const kcLoginContext: KcContext.Login = {
|
export const kcLoginContext: KcContext.Login = {
|
||||||
...kcTemplateContext,
|
...kcCommonContext,
|
||||||
"pageId": "login.ftl",
|
"pageId": "login.ftl",
|
||||||
"url": {
|
"url": {
|
||||||
...kcTemplateContext.url,
|
...kcCommonContext.url,
|
||||||
"loginResetCredentialsUrl": "/auth/realms/myrealm/login-actions/reset-credentials?client_id=account&tab_id=HoAx28ja4xg",
|
"loginResetCredentialsUrl": "/auth/realms/myrealm/login-actions/reset-credentials?client_id=account&tab_id=HoAx28ja4xg",
|
||||||
"registrationUrl": "/auth/realms/myrealm/login-actions/registration?client_id=account&tab_id=HoAx28ja4xg"
|
"registrationUrl": "/auth/realms/myrealm/login-actions/registration?client_id=account&tab_id=HoAx28ja4xg"
|
||||||
},
|
},
|
||||||
"realm": {
|
"realm": {
|
||||||
...kcTemplateContext.realm,
|
...kcCommonContext.realm,
|
||||||
"loginWithEmailAllowed": true,
|
"loginWithEmailAllowed": true,
|
||||||
"rememberMe": true,
|
"rememberMe": true,
|
||||||
"password": true,
|
"password": true,
|
||||||
"resetPasswordAllowed": true,
|
"resetPasswordAllowed": true,
|
||||||
"registrationAllowed": true
|
"registrationAllowed": true
|
||||||
},
|
},
|
||||||
"auth": kcTemplateContext.auth!,
|
"auth": kcCommonContext.auth!,
|
||||||
"social": {
|
"social": {
|
||||||
"displayInfo": true
|
"displayInfo": true
|
||||||
},
|
},
|
||||||
@ -147,7 +147,7 @@ export const kcLoginContext: KcContext.Login = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const kcRegisterContext: KcContext.Register = {
|
export const kcRegisterContext: KcContext.Register = {
|
||||||
...kcTemplateContext,
|
...kcCommonContext,
|
||||||
"url": {
|
"url": {
|
||||||
...kcLoginContext.url,
|
...kcLoginContext.url,
|
||||||
"registrationAction": "http://localhost:8080/auth/realms/myrealm/login-actions/registration?session_code=gwZdUeO7pbYpFTRxiIxRg_QtzMbtFTKrNu6XW_f8asM&execution=12146ce0-b139-4bbd-b25b-0eccfee6577e&client_id=account&tab_id=uS8lYfebLa0"
|
"registrationAction": "http://localhost:8080/auth/realms/myrealm/login-actions/registration?session_code=gwZdUeO7pbYpFTRxiIxRg_QtzMbtFTKrNu6XW_f8asM&execution=12146ce0-b139-4bbd-b25b-0eccfee6577e&client_id=account&tab_id=uS8lYfebLa0"
|
||||||
@ -166,7 +166,7 @@ export const kcRegisterContext: KcContext.Register = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const kcInfoContext: KcContext.Info ={
|
export const kcInfoContext: KcContext.Info ={
|
||||||
...kcTemplateContext,
|
...kcCommonContext,
|
||||||
"pageId": "info.ftl",
|
"pageId": "info.ftl",
|
||||||
"messageHeader": "<Message header>",
|
"messageHeader": "<Message header>",
|
||||||
"requiredActions": undefined,
|
"requiredActions": undefined,
|
||||||
@ -178,7 +178,7 @@ export const kcInfoContext: KcContext.Info ={
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const kcErrorContext: KcContext.Error = {
|
export const kcErrorContext: KcContext.Error = {
|
||||||
...kcTemplateContext,
|
...kcCommonContext,
|
||||||
"pageId": "error.ftl",
|
"pageId": "error.ftl",
|
||||||
"client": {
|
"client": {
|
||||||
"baseUrl": "#"
|
"baseUrl": "#"
|
||||||
@ -186,16 +186,16 @@ export const kcErrorContext: KcContext.Error = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const kcLoginResetPasswordContext: KcContext.LoginResetPassword = {
|
export const kcLoginResetPasswordContext: KcContext.LoginResetPassword = {
|
||||||
...kcTemplateContext,
|
...kcCommonContext,
|
||||||
"pageId": "login-reset-password.ftl",
|
"pageId": "login-reset-password.ftl",
|
||||||
"realm":{
|
"realm":{
|
||||||
...kcTemplateContext.realm,
|
...kcCommonContext.realm,
|
||||||
"loginWithEmailAllowed": false
|
"loginWithEmailAllowed": false
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const kcLoginVerifyEmailContext: KcContext.LoginVerifyEmail = {
|
export const kcLoginVerifyEmailContext: KcContext.LoginVerifyEmail = {
|
||||||
...kcTemplateContext,
|
...kcCommonContext,
|
||||||
"pageId": "login-verify-email.ftl"
|
"pageId": "login-verify-email.ftl"
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -66,13 +66,12 @@ export function createKeycloakAdapter(
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
"login": options => {
|
"login": options => {
|
||||||
window.location.replace(
|
window.location.href=
|
||||||
transformUrlBeforeRedirect(
|
transformUrlBeforeRedirect(
|
||||||
keycloakInstance.createLoginUrl(
|
keycloakInstance.createLoginUrl(
|
||||||
options
|
options
|
||||||
)
|
)
|
||||||
)
|
);
|
||||||
);
|
|
||||||
return neverResolvingPromise;
|
return neverResolvingPromise;
|
||||||
},
|
},
|
||||||
"logout": options => {
|
"logout": options => {
|
||||||
@ -86,13 +85,13 @@ export function createKeycloakAdapter(
|
|||||||
return neverResolvingPromise;
|
return neverResolvingPromise;
|
||||||
},
|
},
|
||||||
"register": options => {
|
"register": options => {
|
||||||
window.location.replace(
|
window.location.href =
|
||||||
transformUrlBeforeRedirect(
|
transformUrlBeforeRedirect(
|
||||||
keycloakInstance.createRegisterUrl(
|
keycloakInstance.createRegisterUrl(
|
||||||
options
|
options
|
||||||
)
|
)
|
||||||
)
|
);
|
||||||
);
|
|
||||||
return neverResolvingPromise;
|
return neverResolvingPromise;
|
||||||
},
|
},
|
||||||
"accountManagement": () => {
|
"accountManagement": () => {
|
||||||
|
@ -12,7 +12,6 @@ generateKeycloakThemeResources({
|
|||||||
"themeName": "keycloakify-demo-app",
|
"themeName": "keycloakify-demo-app",
|
||||||
"reactAppBuildDirPath": pathJoin(sampleReactProjectDirPath, "build"),
|
"reactAppBuildDirPath": pathJoin(sampleReactProjectDirPath, "build"),
|
||||||
"keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme"),
|
"keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme"),
|
||||||
"mode": "standalone",
|
|
||||||
"urlPathname": "/keycloakify-demo-app/"
|
"urlPathname": "/keycloakify-demo-app/"
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -19,8 +19,7 @@ const { fixedJsCode } = replaceImportsFromStaticInJsCode({
|
|||||||
3: "0664cdc0"
|
3: "0664cdc0"
|
||||||
}[e] + ".chunk.js"
|
}[e] + ".chunk.js"
|
||||||
}
|
}
|
||||||
`,
|
`
|
||||||
"mode": "standalone"
|
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log({ fixedJsCode });
|
console.log({ fixedJsCode });
|
||||||
|
Reference in New Issue
Block a user