agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update eject-keycloak-page formatting

Browse Source
This commit is contained in:
Joseph Garrone 2024-05-19 10:23:38 +02:00
parent adddce7764
commit 45b5c21ab5
1 changed files with 50 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/bin/eject-keycloak-page.ts
View File

@ -18,6 +18,7 @@ import { assert, Equals } from "tsafe/assert";
import { getThemeSrcDirPath } from "./shared/getThemeSrcDirPath"; import { getThemeSrcDirPath } from "./shared/getThemeSrcDirPath";
import type { CliCommandOptions } from "./main"; import type { CliCommandOptions } from "./main";
import { readBuildOptions } from "./shared/buildOptions"; import { readBuildOptions } from "./shared/buildOptions";
import chalk from "chalk";
export async function command(params: { cliCommandOptions: CliCommandOptions }) { export async function command(params: { cliCommandOptions: CliCommandOptions }) {
const { cliCommandOptions } = params; const { cliCommandOptions } = params;
@ -26,17 +27,17 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
cliCommandOptions cliCommandOptions
}); });
console.log("Theme type:"); console.log(chalk.cyan("Theme type:"));
const { value: themeType } = await cliSelect<ThemeType>({ const { value: themeType } = await cliSelect<ThemeType>({
"values": [...themeTypes] "values": [...themeTypes]
}).catch(() => { }).catch(() => {
console.log("Aborting");
process.exit(-1); process.exit(-1);
}); });
console.log("Select the page you want to customize:"); console.log(`→ ${themeType}`);
console.log(chalk.cyan("Select the page you want to customize:"));
const { value: pageId } = await cliSelect<LoginThemePageId | AccountThemePageId>({ const { value: pageId } = await cliSelect<LoginThemePageId | AccountThemePageId>({
"values": (() => { "values": (() => {
@ -49,11 +50,11 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
assert<Equals<typeof themeType, never>>(false); assert<Equals<typeof themeType, never>>(false);
})() })()
}).catch(() => { }).catch(() => {
console.log("Aborting");
process.exit(-1); process.exit(-1);
}); });
console.log(`→ ${pageId}`);
const componentPageBasename = capitalize(kebabCaseToCamelCase(pageId)).replace(/ftl$/, "tsx"); const componentPageBasename = capitalize(kebabCaseToCamelCase(pageId)).replace(/ftl$/, "tsx");
const { themeSrcDirPath } = getThemeSrcDirPath({ "reactAppRootDirPath": buildOptions.reactAppRootDirPath }); const { themeSrcDirPath } = getThemeSrcDirPath({ "reactAppRootDirPath": buildOptions.reactAppRootDirPath });
@ -85,42 +86,54 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
console.log( console.log(
[ [
``, ``,
`\`${pathJoin(".", pathRelative(process.cwd(), targetFilePath))}\` copy pasted from the Keycloakify source code into your project.`, `${chalk.green("✓")} ${chalk.bold(
pathJoin(".", pathRelative(process.cwd(), targetFilePath))
)} copy pasted from the Keycloakify source code into your project`,
``, ``,
`You now need to update your page router:`, `You now need to update your page router:`,
``, ``,
`\`${pathJoin(".", pathRelative(process.cwd(), themeSrcDirPath), themeType, "KcApp.tsx")}\`:`, `${chalk.bold(pathJoin(".", pathRelative(process.cwd(), themeSrcDirPath), themeType, "KcApp.tsx"))}:`,
"```", chalk.grey("```"),
`// ...`, `// ...`,
``, ``,
`+const ${componentPageBasename.replace(/.tsx$/, "")} = lazy(() => import("./pages/${componentPageBasename}"));`, chalk.green(`+const ${componentPageBasename.replace(/.tsx$/, "")} = lazy(() => import("./pages/${componentPageBasename}"));`),
``, ...[
` export default function KcApp(props: { kcContext: KcContext; }) {`, ``,
``, ` export default function KcApp(props: { kcContext: KcContext; }) {`,
` // ...`, ``,
``, ` // ...`,
` return (`, ``,
` <Suspense>`, ` return (`,
` {(() => {`, ` <Suspense>`,
` switch (kcContext.pageId) {`, ` {(() => {`,
` // ...`, ` switch (kcContext.pageId) {`,
` case "${pageId}": return (`, ` // ...`,
`+ <Login`, `+ case "${pageId}": return (`,
`+ {...{ kcContext, i18n, classes }}`, `+ <Login`,
`+ Template={Template}`, `+ {...{ kcContext, i18n, classes }}`,
...(!componentPageContent.includes(userProfileFormFieldComponentName) `+ Template={Template}`,
? [] ...(!componentPageContent.includes(userProfileFormFieldComponentName)
: [`+ ${userProfileFormFieldComponentName}={${userProfileFormFieldComponentName}}`]), ? []
`+ doUseDefaultCss={true}`, : [`+ ${userProfileFormFieldComponentName}={${userProfileFormFieldComponentName}}`]),
`+ />`, `+ doUseDefaultCss={true}`,
`+ );`, `+ />`,
` default: return <Fallback /* .. */ />;`, `+ );`,
` }`, ` default: return <Fallback /* .. */ />;`,
` })()}`, ` }`,
` </Suspense>`, ` })()}`,
` );`, ` </Suspense>`,
` }`, ` );`,
"```" ` }`
].map(line => {
if (line.startsWith("+")) {
return chalk.green(line);
}
if (line.startsWith("-")) {
return chalk.red(line);
}
return chalk.grey(line);
}),
chalk.grey("```")
].join("\n") ].join("\n")
); );
} }