Compare commits

..

1 Commits

Author SHA1 Message Date
dde4719b79 Enabling shorter import paths [automatic] 2021-02-23 15:00:48 +00:00
19 changed files with 57 additions and 411 deletions

View File

@ -1,21 +1,3 @@
### **0.0.19** (2021-02-27)
- update
- update
### **0.0.18** (2021-02-23)
- Bump version number
- Moving on with implementation of the lib
- Update readme
- Readme eddit
- Fixing video link
### **0.0.16** (2021-02-23)
- Bump version
- Give test container credentials
### **0.0.14** (2021-02-23)
- Bump version number

View File

@ -18,7 +18,7 @@ The problem:
![keycloak_before](https://user-images.githubusercontent.com/6702424/108838381-dbbbcf80-75d3-11eb-8ae8-db41563ef9db.gif)
When we redirected to Keycloak the user suffers from a harsh context switch.
On je login/register pages the language is set back to default and the theme is different that the one on the app.
The language is set back to default and the theme is different.
Keycloak does offer a way to customize theses pages but it requires a lot of raw HTML/CSS hacking
to reproduce the look and feel of a specific app. Not mentioning the maintenance cost of such an endeavour.
@ -28,7 +28,9 @@ still letting Keycloak handle the heavy lifting of actually authenticating the u
Here is `yarn add keycloak-react-theming` for you 🍸
TODO: Insert video after.
![image](https://user-images.githubusercontent.com/6702424/108833938-c9d72e00-75cd-11eb-8263-4334ca79275c.png)
![image](https://user-images.githubusercontent.com/6702424/108834054-f68b4580-75cd-11eb-9661-b1a43836c4b0.png)
![image](https://user-images.githubusercontent.com/6702424/108834220-32bea600-75ce-11eb-9e11-7661188beb7c.png)
# How to use
@ -42,18 +44,18 @@ Typically you will get:
`package.json`:
```json
"devDependencies": {
"keycloak-react-theming": "^0.0.10"
"keycloak-react-theming": "^0.0.10",
[...]
},
"scripts": {
"build": "react-scripts build && build-keycloak-theme"
"build": "react-scripts build && build-keycloak-theme",
[...]
},
```
Then build your app with `yarn run build` or `npm run build`, you will be provided with instructions
about how to load the theme into Keycloak.
[![kickstart_video](https://user-images.githubusercontent.com/6702424/108877866-f146ee80-75ff-11eb-8120-003b3c5f6dd8.png)](https://youtu.be/xTz0Rj7i2v8)
## Developing your login and register pages in your React app
TODO

View File

@ -25,10 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
Object.defineProperty(exports, "__esModule", { value: true });
exports.generateFtlFilesCodeFactory = void 0;
var cheerio_1 = __importDefault(require("cheerio"));
var replaceImportFromStatic_1 = require("../replaceImportFromStatic");
var fs_1 = __importDefault(require("fs"));
var path_1 = require("path");
var objectKeys_1 = require("evt/tools/typeSafety/objectKeys");
var replaceImportFromStatic_1 = require("./replaceImportFromStatic");
function generateFtlFilesCodeFactory(params) {
var ftlValuesGlobalName = params.ftlValuesGlobalName, cssGlobalsToDefine = params.cssGlobalsToDefine, indexHtmlCode = params.indexHtmlCode;
var $ = cheerio_1.default.load(indexHtmlCode);
@ -62,19 +59,6 @@ function generateFtlFilesCodeFactory(params) {
$(element).attr(attrName, "${url.resourcesPath}" + href);
});
});
//FTL is no valid html, we can't insert with cheerio, we put placeholder for injecting later.
var ftlPlaceholders = {
'{ "x": "xIdLqMeOed9sdLdIdOxdK0d" }': fs_1.default.readFileSync(path_1.join(__dirname, "ftl2js.ftl"))
.toString("utf8")
.match(/^<script>const _=((?:.|\n)+)<\/script>[\n]?$/)[1],
'<!-- xIdLqMeOedErIdLsPdNdI9dSlxI -->': [
'<#if scripts??>',
' <#list scripts as script>',
' <script src="${script}" type="text/javascript"></script>',
' </#list>',
'</#if>',
].join("\n")
};
$("head").prepend(__spread((Object.keys(cssGlobalsToDefine).length === 0 ? [] : [
'',
'<style>',
@ -85,11 +69,14 @@ function generateFtlFilesCodeFactory(params) {
'<script>',
' Object.assign(',
" window." + ftlValuesGlobalName + ",",
" " + objectKeys_1.objectKeys(ftlPlaceholders)[0],
' {',
' "url": {',
' "loginAction": "${url.loginAction}",',
' "resourcesPath": "${url.resourcesPath}"',
' }',
' }',
' );',
'</script>',
'',
objectKeys_1.objectKeys(ftlPlaceholders)[1],
''
]).join("\n"));
var partiallyFixedIndexHtmlCode = $.html();
@ -103,12 +90,9 @@ function generateFtlFilesCodeFactory(params) {
'</script>',
''
].join("\n"));
var ftlCode = $.html();
objectKeys_1.objectKeys(ftlPlaceholders)
.forEach(function (id) { return ftlCode = ftlCode.replace(id, ftlPlaceholders[id]); });
return { ftlCode: ftlCode };
return { "ftlCode": $.html() };
}
return { generateFtlFilesCode: generateFtlFilesCode };
}
exports.generateFtlFilesCodeFactory = generateFtlFilesCodeFactory;
//# sourceMappingURL=index.js.map
//# sourceMappingURL=generateFtl.js.map

View File

@ -0,0 +1 @@
{"version":3,"file":"generateFtl.js","sourceRoot":"","sources":["../../src/bin/build-keycloak-theme/generateFtl.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,oDAA8B;AAC9B,qEAGmC;AAEnC,SAAgB,2BAA2B,CACvC,MAIC;IAGO,IAAA,mBAAmB,GAAwC,MAAM,oBAA9C,EAAE,kBAAkB,GAAoB,MAAM,mBAA1B,EAAE,aAAa,GAAK,MAAM,cAAX,CAAY;IAE1E,IAAM,CAAC,GAAG,iBAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAEtC,CAAC,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAAC;QAAC,YAAc;aAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;YAAd,uBAAc;;QAAd,IAAA,KAAA,aAAc,EAAR,OAAO,QAAA,CAAC;QAE/B,IAAA,WAAW,GAAK,yDAA+B,CAAC;YACpD,mBAAmB,qBAAA;YACnB,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAG;SAC/B,CAAC,YAHiB,CAGhB;QAEH,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAEjC,CAAC,CAAC,CAAC;IAGF;QACG,CAAC,MAAM,EAAE,MAAM,CAAC;QAChB,CAAC,QAAQ,EAAE,KAAK,CAAC;KACV,CAAC,OAAO,CAAC,UAAC,EAAoB;YAApB,KAAA,aAAoB,EAAnB,QAAQ,QAAA,EAAE,QAAQ,QAAA;QACpC,OAAA,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC;YAAC,YAAc;iBAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;gBAAd,uBAAc;;YAAd,IAAA,KAAA,aAAc,EAAR,OAAO,QAAA,CAAC;YAE5B,IAAM,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAEvC,IAAI,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,CAAC,GAAG,EAAC,EAAE;gBACxB,OAAO;aACV;YAED,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,sBAAsB,GAAG,IAAI,CAAC,CAAC;QAE7D,CAAC,CAAC;IAVF,CAUE,CACL,CAAC;IAEF,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CACb,SACO,CAAC,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACpD,EAAE;QACF,SAAS;QACT,wDAA8B,CAC1B,EAAE,kBAAkB,oBAAA,EAAE,CACzB,CAAC,sBAAsB;QACxB,UAAU;QACV,EAAE;KACL,CAAC;QAEF,UAAU;QACV,oBAAoB;QACpB,oBAAkB,mBAAmB,MAAG;QACxC,WAAW;QACX,sBAAsB;QACtB,sDAAsD;QACtD,yDAAyD;QACzD,eAAe;QACf,WAAW;QACX,QAAQ;QACR,WAAW;QACX,EAAE;OACJ,IAAI,CAAC,IAAI,CAAC,CACf,CAAC;IAGF,IAAM,2BAA2B,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;IAE7C,SAAS,oBAAoB,CACzB,MAEC;QAGO,IAAA,YAAY,GAAK,MAAM,aAAX,CAAY;QAEhC,IAAM,CAAC,GAAG,iBAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;QAEpD,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CACb;YACI,EAAE;YACF,UAAU;YACV,eAAa,mBAAmB,iCAAyB,YAAY,UAAM;YAC3E,WAAW;YACX,EAAE;SACL,CAAC,IAAI,CAAC,IAAI,CAAC,CAEf,CAAC;QAEF,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;IAEnC,CAAC;IAED,OAAO,EAAE,oBAAoB,sBAAA,EAAE,CAAC;AAGpC,CAAC;AAnGD,kEAmGC"}

View File

@ -1,113 +0,0 @@
<script>const _=
{
"url": {
"loginAction": "${url.loginAction}",
"resourcesPath": "${url.resourcesPath}",
"resourcesCommonPath": "${url.resourcesCommonPath}",
"loginRestartFlowUrl": "${url.loginRestartFlowUrl}"
},
"realm": {
"displayName": "${realm.displayName!''}" || undefined,
"displayNameHtml": "${realm.displayNameHtml!''}" || undefined,
"internationalizationEnabled": ${realm.internationalizationEnabled?c}
},
"locale": (function (){
<#if realm.internationalizationEnabled>
return {
"supported": (function(){
<#if realm.internationalizationEnabled>
var out= [];
<#list locale.supported as lng>
out.push({
"url": "${lng.url}",
"label": "${lng.label}",
"languageTag": "${lng.languageTag}"
});
</#list>
return out;
</#if>
return undefined;
})(),
"current": "${locale.current}"
};
</#if>
return undefined;
})(),
"auth": (function (){
<#if auth?has_content>
var out= {
"showUsername": ${auth.showUsername()?c},
"showResetCredentials": ${auth.showResetCredentials()?c},
"showTryAnotherWayLink": ${auth.showTryAnotherWayLink()?c}
};
<#if auth.showUsername() && !auth.showResetCredentials()>
Object.assign(
out,
{
"attemptedUsername": "${auth.attemptedUsername}"
}
);
</#if>
return out;
</#if>
return undefined;
})(),
"scripts": (function(){
var out = [];
<#if scripts??>
<#list scripts as script>
out.push("${script}");
</#list>
</#if>
return out;
})(),
"message": (function (){
<#if message?has_content>
return { 
"type": "${message.type}",
"summary": "${kcSanitize(message.summary)?no_esc}"
};
</#if>
return undefined;
})(),
"isAppInitiatedAction": (function (){
<#if isAppInitiatedAction??>
return true;
</#if>
return false;
})()
}
</script>

View File

@ -1 +0,0 @@
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/bin/build-keycloak-theme/generateFtl/index.ts"],"names":[],"mappings":"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"}

View File

@ -75,7 +75,7 @@ if (require.main === module) {
'',
"$ ./" + path_1.relative(reactProjectDirPath, path_1.join(exports.keycloakThemeBuildingDirPath, generateDebugFiles_1.containerLaunchScriptBasename)),
'',
'To enable the theme within keycloak log into the admin console ( username: admin, password: admin), create a realm (called "myrealm" for example),',
'To enable the theme within keycloak log into the admin console, create a realm (called "myrealm" for example),',
"go to your realm settings, click on the theme tab then select " + parsedPackageJson.name + ".",
"More details: https://www.keycloak.org/getting-started/getting-started-docker",
'',

View File

@ -1 +1 @@
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/bin/build-keycloak-theme/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA,mFAAkF;AAClF,mEAAkE;AAElE,6BAA4F;AAC5F,2DAA+C;AAC/C,2DAAyF;AAGzF,IAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;AAE1C,IAAM,iBAAiB,GAAsB,OAAO,CAAC,WAAQ,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC,CAAC;AAEvF,QAAA,4BAA4B,GAAG,WAAQ,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,CAAC;AAG5F,OAAO,CAAC,GAAG,CAAC,oCAAoC,CAAC,CAAC;AAElD,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE;IAEzB,+DAA8B,CAAC;QAC3B,4BAA4B,sCAAA;QAC5B,sBAAsB,EAAE,WAAQ,CAAC,mBAAmB,EAAE,OAAO,CAAC;QAC9D,WAAW,EAAE,iBAAiB,CAAC,IAAI;KACtC,CAAC,CAAC;IAEK,IAAA,WAAW,GAAK,+CAAsB,CAAC;QAC3C,iBAAiB,mBAAA;QACjB,4BAA4B,sCAAA;KAC/B,CAAC,YAHiB,CAGhB;IAEH,aAAa,CAAC,QAAQ,CAClB,aAAa,EACb,EAAE,KAAK,EAAE,oCAA4B,EAAE,CAC1C,CAAC;IAEF,uCAAkB,CAAC;QACf,4BAA4B,sCAAA;QAC5B,iBAAiB,EAAE,iBAAiB,CAAC,IAAI;KAC5C,CAAC,CAAC;IAEH,OAAO,CAAC,GAAG,CAAC;QACR,EAAE;QACF,sEAA+D,eAAY,CAAC,mBAAmB,EAAE,WAAW,CAAC,kBAAK;QAClH,mJAAiJ;QACjJ,EAAE;QACF,2EAA2E;QAC3E,EAAE;QACF,cAAc;QACd,4BAA4B;QAC5B,oCAAoC;QACpC,kCAAkC;QAClC,yCAAyC;QACzC,oBAAoB;QACpB,kBAAkB;QAClB,iBAAiB;QACjB,kBAAkB;QAClB,gDAA8C,eAAY,CAAC,WAAW,CAAC,4BAAuB,eAAY,CAAC,WAAW,CAAG;QACzH,yBAAyB;QACzB,gCAAgC;QAChC,sCAAsC;QACtC,UAAU;QACV,8BAA8B;QAC9B,gCAAgC;QAChC,qEAAqE;QACrE,EAAE;QACF,EAAE;QACF,8HAA8H;QAC9H,EAAE;QACF,SAAO,eAAY,CAAC,mBAAmB,EAAE,WAAQ,CAAC,oCAA4B,EAAE,kDAA6B,CAAC,CAAG;QACjH,EAAE;QACF,oJAAoJ;QACpJ,mEAAiE,iBAAiB,CAAC,IAAI,MAAG;QAC1F,+EAA+E;QAC/E,EAAE;QACF,+FAA+F;QAC/F,EAAE;KACL,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;CAEjB"}
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/bin/build-keycloak-theme/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA,mFAAkF;AAClF,mEAAkE;AAElE,6BAA4F;AAC5F,2DAA+C;AAC/C,2DAAyF;AAGzF,IAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;AAE1C,IAAM,iBAAiB,GAAsB,OAAO,CAAC,WAAQ,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC,CAAC;AAEvF,QAAA,4BAA4B,GAAG,WAAQ,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,CAAC;AAG5F,OAAO,CAAC,GAAG,CAAC,oCAAoC,CAAC,CAAC;AAElD,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE;IAEzB,+DAA8B,CAAC;QAC3B,4BAA4B,sCAAA;QAC5B,sBAAsB,EAAE,WAAQ,CAAC,mBAAmB,EAAE,OAAO,CAAC;QAC9D,WAAW,EAAE,iBAAiB,CAAC,IAAI;KACtC,CAAC,CAAC;IAEK,IAAA,WAAW,GAAK,+CAAsB,CAAC;QAC3C,iBAAiB,mBAAA;QACjB,4BAA4B,sCAAA;KAC/B,CAAC,YAHiB,CAGhB;IAEH,aAAa,CAAC,QAAQ,CAClB,aAAa,EACb,EAAE,KAAK,EAAE,oCAA4B,EAAE,CAC1C,CAAC;IAEF,uCAAkB,CAAC;QACf,4BAA4B,sCAAA;QAC5B,iBAAiB,EAAE,iBAAiB,CAAC,IAAI;KAC5C,CAAC,CAAC;IAEH,OAAO,CAAC,GAAG,CAAC;QACR,EAAE;QACF,sEAA+D,eAAY,CAAC,mBAAmB,EAAE,WAAW,CAAC,kBAAK;QAClH,mJAAiJ;QACjJ,EAAE;QACF,2EAA2E;QAC3E,EAAE;QACF,cAAc;QACd,4BAA4B;QAC5B,oCAAoC;QACpC,kCAAkC;QAClC,yCAAyC;QACzC,oBAAoB;QACpB,kBAAkB;QAClB,iBAAiB;QACjB,kBAAkB;QAClB,gDAA8C,eAAY,CAAC,WAAW,CAAC,4BAAuB,eAAY,CAAC,WAAW,CAAG;QACzH,yBAAyB;QACzB,gCAAgC;QAChC,sCAAsC;QACtC,UAAU;QACV,8BAA8B;QAC9B,gCAAgC;QAChC,qEAAqE;QACrE,EAAE;QACF,EAAE;QACF,8HAA8H;QAC9H,EAAE;QACF,SAAO,eAAY,CAAC,mBAAmB,EAAE,WAAQ,CAAC,oCAA4B,EAAE,kDAA6B,CAAC,CAAG;QACjH,EAAE;QACF,gHAAgH;QAChH,mEAAiE,iBAAiB,CAAC,IAAI,MAAG;QAC1F,+EAA+E;QAC/E,EAAE;QACF,+FAA+F;QAC/F,EAAE;KACL,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;CAEjB"}

View File

@ -1,38 +1,9 @@
import type { generateFtlFilesCodeFactory } from "../bin/build-keycloak-theme/generateFtl";
export declare type LanguageLabel = "Deutsch" | "Norsk" | "Русский" | "Svenska" | "Português (Brasil)" | "Lietuvių" | "English" | "Italiano" | "Français" | "中文简体" | "Español" | "Čeština" | "日本語" | "Slovenčina" | "Polish" | "Català" | "Nederlands" | "tr";
export declare type LanguageTag = "de" | "no" | "ru" | "sv" | "pt-BR" | "lt" | "en" | "it" | "fr" | "zh-CN" | "es" | "cs" | "ja" | "sk" | "pl" | "ca" | "nl" | "tr";
export declare type KeycloakFtlValues = {
pageBasename: Parameters<ReturnType<typeof generateFtlFilesCodeFactory>["generateFtlFilesCode"]>[0]["pageBasename"];
url: {
loginAction: string;
resourcesPath: string;
resourcesCommonPath: string;
loginRestartFlowUrl: string;
};
realm: {
displayName?: string;
displayNameHtml?: string;
internationalizationEnabled: boolean;
};
locale?: {
supported: {
url: string;
label: LanguageLabel;
languageTag: LanguageTag;
};
current: LanguageLabel;
};
auth?: {
showUsername: boolean;
showResetCredentials: boolean;
showTryAnotherWayLink: boolean;
attemptedUsername?: boolean;
};
scripts: string[];
message?: {
type: "success" | "warning" | "error" | "info";
summary: string;
};
isAppInitiatedAction: boolean;
};
export declare const keycloakPagesContext: KeycloakFtlValues | undefined;

View File

@ -1 +1 @@
{"version":3,"file":"keycloakFtlValues.js","sourceRoot":"","sources":["../src/lib/keycloakFtlValues.ts"],"names":[],"mappings":";;;;AAGA,6GAAiG;AAEjG,8CAA6C;AA+C9B,QAAA,oBAAoB,aAC7B,GAAC,oDAAmB,IAAG,OAAE,CAAiC,MAAc,CAAC,oDAAmB,CAAC,CAAC,2BAAG;AACvG,CAAC"}
{"version":3,"file":"keycloakFtlValues.js","sourceRoot":"","sources":["../src/lib/keycloakFtlValues.ts"],"names":[],"mappings":";;;;AAGA,6GAAiG;AAEjG,8CAA6C;AAW9B,QAAA,oBAAoB,aAC7B,GAAC,oDAAmB,IAAG,OAAE,CAAiC,MAAc,CAAC,oDAAmB,CAAC,CAAC,2BAAG;AACvG,CAAC"}

4
package-lock.json generated
View File

@ -1,11 +1,11 @@
{
"name": "keycloak-react-theming",
"version": "0.0.19",
"version": "0.0.14",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"version": "0.0.19",
"version": "0.0.13",
"license": "MIT",
"dependencies": {
"cheerio": "^1.0.0-rc.5",

View File

@ -1,6 +1,6 @@
{
"name": "keycloak-react-theming",
"version": "0.0.19",
"version": "0.0.14",
"description": "Keycloak theme generator for Reacts app",
"repository": {
"type": "git",
@ -17,8 +17,7 @@
"files": [
"src/bin/build-keycloak-theme/generateDebugFiles/index.ts",
"src/bin/build-keycloak-theme/generateDebugFiles/standalone-ha.xml",
"src/bin/build-keycloak-theme/generateFtl/ftl2js.ftl",
"src/bin/build-keycloak-theme/generateFtl/index.ts",
"src/bin/build-keycloak-theme/generateFtl.ts",
"src/bin/build-keycloak-theme/generateJavaStackFiles.ts",
"src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts",
"src/bin/build-keycloak-theme/index.ts",
@ -32,10 +31,9 @@
"bin/build-keycloak-theme/generateDebugFiles/index.js",
"bin/build-keycloak-theme/generateDebugFiles/index.js.map",
"bin/build-keycloak-theme/generateDebugFiles/standalone-ha.xml",
"bin/build-keycloak-theme/generateFtl/ftl2js.ftl",
"bin/build-keycloak-theme/generateFtl/index.d.ts",
"bin/build-keycloak-theme/generateFtl/index.js",
"bin/build-keycloak-theme/generateFtl/index.js.map",
"bin/build-keycloak-theme/generateFtl.d.ts",
"bin/build-keycloak-theme/generateFtl.js",
"bin/build-keycloak-theme/generateFtl.js.map",
"bin/build-keycloak-theme/generateJavaStackFiles.d.ts",
"bin/build-keycloak-theme/generateJavaStackFiles.js",
"bin/build-keycloak-theme/generateJavaStackFiles.js.map",
@ -62,8 +60,7 @@
"tools/crawl.js.map",
"tools/transformCodebase.d.ts",
"tools/transformCodebase.js",
"tools/transformCodebase.js.map",
"res/test.txt"
"tools/transformCodebase.js.map"
],
"keywords": [
"keycloak",
@ -74,7 +71,7 @@
"devDependencies": {
"@types/node": "^10.0.0",
"copyfiles": "^2.4.1",
"denoify": "^0.6.5",
"denoify": "^0.6.4",
"scripting-tools": "^0.19.13",
"typescript": "^4.1.5"
},

View File

View File

@ -4,10 +4,7 @@ import cheerio from "cheerio";
import {
replaceImportFromStaticInJsCode,
generateCssCodeToDefineGlobals
} from "../replaceImportFromStatic";
import fs from "fs";
import { join as pathJoin } from "path";
import { objectKeys } from "evt/tools/typeSafety/objectKeys";
} from "./replaceImportFromStatic";
export function generateFtlFilesCodeFactory(
params: {
@ -50,22 +47,6 @@ export function generateFtlFilesCodeFactory(
})
);
//FTL is no valid html, we can't insert with cheerio, we put placeholder for injecting later.
const ftlPlaceholders = {
'{ "x": "xIdLqMeOed9sdLdIdOxdK0d" }':
fs.readFileSync(pathJoin(__dirname, "ftl2js.ftl"))
.toString("utf8")
.match(/^<script>const _=((?:.|\n)+)<\/script>[\n]?$/)![1],
'<!-- xIdLqMeOedErIdLsPdNdI9dSlxI -->':
[
'<#if scripts??>',
' <#list scripts as script>',
' <script src="${script}" type="text/javascript"></script>',
' </#list>',
'</#if>',
].join("\n")
};
$("head").prepend(
[
...(Object.keys(cssGlobalsToDefine).length === 0 ? [] : [
@ -77,14 +58,18 @@ export function generateFtlFilesCodeFactory(
'</style>',
''
]),
'<script>',
' Object.assign(',
` window.${ftlValuesGlobalName},`,
` ${objectKeys(ftlPlaceholders)[0]}`,
' {',
' "url": {',
' "loginAction": "${url.loginAction}",',
' "resourcesPath": "${url.resourcesPath}"',
' }',
' }',
' );',
'</script>',
'',
objectKeys(ftlPlaceholders)[1],
''
].join("\n"),
);
@ -109,15 +94,11 @@ export function generateFtlFilesCodeFactory(
` window.${ftlValuesGlobalName} = { "pageBasename": "${pageBasename}" };`,
'</script>',
''
].join("\n")
].join("\n"),
);
let ftlCode = $.html();
objectKeys(ftlPlaceholders)
.forEach(id => ftlCode = ftlCode.replace(id, ftlPlaceholders[id]));
return { ftlCode };
return { "ftlCode": $.html() };
}

View File

@ -1,113 +0,0 @@
<script>const _=
{
"url": {
"loginAction": "${url.loginAction}",
"resourcesPath": "${url.resourcesPath}",
"resourcesCommonPath": "${url.resourcesCommonPath}",
"loginRestartFlowUrl": "${url.loginRestartFlowUrl}"
},
"realm": {
"displayName": "${realm.displayName!''}" || undefined,
"displayNameHtml": "${realm.displayNameHtml!''}" || undefined,
"internationalizationEnabled": ${realm.internationalizationEnabled?c}
},
"locale": (function (){
<#if realm.internationalizationEnabled>
return {
"supported": (function(){
<#if realm.internationalizationEnabled>
var out= [];
<#list locale.supported as lng>
out.push({
"url": "${lng.url}",
"label": "${lng.label}",
"languageTag": "${lng.languageTag}"
});
</#list>
return out;
</#if>
return undefined;
})(),
"current": "${locale.current}"
};
</#if>
return undefined;
})(),
"auth": (function (){
<#if auth?has_content>
var out= {
"showUsername": ${auth.showUsername()?c},
"showResetCredentials": ${auth.showResetCredentials()?c},
"showTryAnotherWayLink": ${auth.showTryAnotherWayLink()?c}
};
<#if auth.showUsername() && !auth.showResetCredentials()>
Object.assign(
out,
{
"attemptedUsername": "${auth.attemptedUsername}"
}
);
</#if>
return out;
</#if>
return undefined;
})(),
"scripts": (function(){
var out = [];
<#if scripts??>
<#list scripts as script>
out.push("${script}");
</#list>
</#if>
return out;
})(),
"message": (function (){
<#if message?has_content>
return { 
"type": "${message.type}",
"summary": "${kcSanitize(message.summary)?no_esc}"
};
</#if>
return undefined;
})(),
"isAppInitiatedAction": (function (){
<#if isAppInitiatedAction??>
return true;
</#if>
return false;
})()
}
</script>

View File

@ -70,7 +70,7 @@ if (require.main === module) {
'',
`$ ./${pathRelative(reactProjectDirPath, pathJoin(keycloakThemeBuildingDirPath, containerLaunchScriptBasename))}`,
'',
'To enable the theme within keycloak log into the admin console ( username: admin, password: admin), create a realm (called "myrealm" for example),',
'To enable the theme within keycloak log into the admin console, create a realm (called "myrealm" for example),',
`go to your realm settings, click on the theme tab then select ${parsedPackageJson.name}.`,
`More details: https://www.keycloak.org/getting-started/getting-started-docker`,
'',

View File

@ -3,53 +3,17 @@
import { ftlValuesGlobalName } from "../bin/build-keycloak-theme/generateKeycloakThemeResources";
import type { generateFtlFilesCodeFactory } from "../bin/build-keycloak-theme/generateFtl";
import { id } from "evt/tools/typeSafety/id";
import { id } from "evt/tools/typeSafety/id";
export type LanguageLabel =
/* spell-checker: disable */
"Deutsch" | "Norsk" | "Русский" | "Svenska" | "Português (Brasil)" | "Lietuvių" |
"English" | "Italiano" | "Français" | "中文简体" | "Español" | "Čeština" | "日本語" |
"Slovenčina" | "Polish" | "Català" | "Nederlands" | "tr";
/* spell-checker: enable */
export type LanguageTag = "de" | "no" | "ru" | "sv" | "pt-BR" | "lt" | "en" | "it" | "fr" | "zh-CN" | "es" | "cs" | "ja" | "sk" | "pl" | "ca" | "nl" | "tr";
export type KeycloakFtlValues = {
pageBasename: Parameters<ReturnType<typeof generateFtlFilesCodeFactory>["generateFtlFilesCode"]>[0]["pageBasename"];
url: {
loginAction: string;
resourcesPath: string;
resourcesCommonPath: string;
loginRestartFlowUrl: string;
},
realm: {
displayName?: string;
displayNameHtml?: string;
internationalizationEnabled: boolean;
},
//NOTE: Undefined if !realm.internationalizationEnabled
locale?: {
supported: {
url: string;
label: LanguageLabel;
languageTag: LanguageTag;
},
current: LanguageLabel;
},
auth?: {
showUsername: boolean;
showResetCredentials: boolean;
showTryAnotherWayLink: boolean;
attemptedUsername?: boolean;
},
scripts: string[];
message?: {
type: "success" | "warning" | "error" | "info";
summary: string;
},
isAppInitiatedAction: boolean;
loginAction: string,
resourcesPath: string
}
};
export const { keycloakPagesContext } =
export const { keycloakPagesContext } =
{ [ftlValuesGlobalName]: id<KeycloakFtlValues | undefined>((window as any)[ftlValuesGlobalName]) };
;

View File

@ -241,13 +241,8 @@
"signature": "c3a2f14af88ebca3c9e0445aa8c14d1cf6fcebfdadf54a46e26c46959e368119",
"affectsGlobalScope": false
},
"../node_modules/evt/tools/typeSafety/objectKeys.d.ts": {
"version": "4da2684f4596bd222840b428282b011560505fd93efb2de24709418ec33ad614",
"signature": "4da2684f4596bd222840b428282b011560505fd93efb2de24709418ec33ad614",
"affectsGlobalScope": false
},
"../src/bin/build-keycloak-theme/generateFtl/index.ts": {
"version": "0f236ff99727073587d85a380fc1e46f3176124d458ad699560507de2180c794",
"../src/bin/build-keycloak-theme/generateFtl.ts": {
"version": "9b6401a245a32e2968648cf5e48595a0a4e1d12237bf8aadf2da6336304ad8c8",
"signature": "3a11af9abe294b90f19598d16e9d081f5452cdb668939e63abdd6a4d90955279",
"affectsGlobalScope": false
},
@ -267,7 +262,7 @@
"affectsGlobalScope": false
},
"../src/bin/build-keycloak-theme/index.ts": {
"version": "1f6404cd2a4d67ef191c6a28fad07efc06da8c8cb7eab19878d4ac5697a841a6",
"version": "324a1c0c8c3cfa50dbc213fa4f2650551a3e5537e53635b8d4225acad9c83dc3",
"signature": "cc0e708e12dd472472902f20c879f10b9352d52e6823ac341bc0941ef15b9618",
"affectsGlobalScope": false
},
@ -282,8 +277,8 @@
"affectsGlobalScope": false
},
"../src/lib/keycloakFtlValues.ts": {
"version": "1cad1ed4d26f828a7cdeef4ea5eb9bd6db3026ef9464eec29d1b6c0d00d78954",
"signature": "a4b2d36ae0aadc02ecd11b0e7da14a0b66f9498a2528e5d019023355787fed27",
"version": "8855aa745f2916ae3bc7161b4ef9784c21f595070e177e2a201a5d8ffc672a64",
"signature": "47f69685f9207ddeb9e876a0b9545efbd8a73a6b3b123c9b685165bde9d408df",
"affectsGlobalScope": false
},
"../src/lib/index.ts": {
@ -779,11 +774,8 @@
"../node_modules/@types/node/fs.d.ts",
"../node_modules/@types/node/path.d.ts"
],
"../src/bin/build-keycloak-theme/generateFtl/index.ts": [
"../node_modules/@types/node/fs.d.ts",
"../node_modules/@types/node/path.d.ts",
"../src/bin/build-keycloak-theme/generateFtl.ts": [
"../node_modules/cheerio/types/index.d.ts",
"../node_modules/evt/tools/typeSafety/objectKeys.d.ts",
"../src/bin/build-keycloak-theme/replaceImportFromStatic.ts"
],
"../src/bin/build-keycloak-theme/generateJavaStackFiles.ts": [
@ -794,7 +786,7 @@
"../src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts": [
"../node_modules/@types/node/fs.d.ts",
"../node_modules/@types/node/path.d.ts",
"../src/bin/build-keycloak-theme/generateFtl/index.ts",
"../src/bin/build-keycloak-theme/generateFtl.ts",
"../src/bin/build-keycloak-theme/replaceImportFromStatic.ts",
"../src/tools/transformCodebase.ts"
],
@ -819,7 +811,7 @@
],
"../src/lib/keycloakFtlValues.ts": [
"../node_modules/evt/tools/typeSafety/id.d.ts",
"../src/bin/build-keycloak-theme/generateFtl/index.ts",
"../src/bin/build-keycloak-theme/generateFtl.ts",
"../src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts"
],
"../src/test/build-keycloak-theme.ts": [
@ -1065,7 +1057,7 @@
"../src/lib/keycloakFtlValues.ts"
],
"../src/lib/keycloakFtlValues.ts": [
"../src/bin/build-keycloak-theme/generateFtl/index.ts"
"../src/bin/build-keycloak-theme/generateFtl.ts"
]
},
"semanticDiagnosticsPerFile": [
@ -1127,7 +1119,6 @@
"../node_modules/domutils/lib/tagtypes.d.ts",
"../node_modules/domutils/lib/traversal.d.ts",
"../node_modules/evt/tools/typeSafety/id.d.ts",
"../node_modules/evt/tools/typeSafety/objectKeys.d.ts",
"../node_modules/htmlparser2/lib/FeedHandler.d.ts",
"../node_modules/htmlparser2/lib/Parser.d.ts",
"../node_modules/htmlparser2/lib/Tokenizer.d.ts",
@ -1163,7 +1154,7 @@
"../node_modules/typescript/lib/lib.es5.d.ts",
"../node_modules/typescript/lib/lib.esnext.intl.d.ts",
"../src/bin/build-keycloak-theme/generateDebugFiles/index.ts",
"../src/bin/build-keycloak-theme/generateFtl/index.ts",
"../src/bin/build-keycloak-theme/generateFtl.ts",
"../src/bin/build-keycloak-theme/generateJavaStackFiles.ts",
"../src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts",
"../src/bin/build-keycloak-theme/index.ts",