@keycloakify/angular 0.0.1-rc.21 → 0.0.1-rc.22

package/src/bin/eject-page.ts

@@ -0,0 +1,310 @@
+#!/usr/bin/env node
+
+import { getThisCodebaseRootDirPath } from './tools/getThisCodebaseRootDirPath';
+import cliSelect from 'cli-select';
+import {
+    type BuildContext,
+    LOGIN_THEME_PAGE_IDS,
+    ACCOUNT_THEME_PAGE_IDS,
+    type LoginThemePageId,
+    type AccountThemePageId,
+    THEME_TYPES,
+    type ThemeType
+} from './core';
+import * as fs from 'fs';
+import {
+    join as pathJoin,
+    relative as pathRelative,
+    sep as pathSep,
+    dirname as pathDirname
+} from 'path';
+import { assert, Equals } from 'tsafe/assert';
+import chalk from 'chalk';
+import { transformCodebase } from './tools/transformCodebase';
+import { kebabCaseToCamelCase } from './tools/kebabCaseToSnakeCase';
+import { replaceAll } from './tools/String.prototype.replaceAll';
+
+export async function command(params: { buildContext: BuildContext }) {
+    const { buildContext } = params;
+
+    console.log(chalk.cyan('Theme type:'));
+
+    const themeType = await (async () => {
+        const values = THEME_TYPES.filter(themeType => {
+            switch (themeType) {
+                case 'account':
+                    return buildContext.implementedThemeTypes.account.isImplemented;
+                case 'login':
+                    return buildContext.implementedThemeTypes.login.isImplemented;
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        });
+
+        assert(values.length > 0, 'No theme is implemented in this project');
+
+        if (values.length === 1) {
+            return values[0];
+        }
+
+        const { value } = await cliSelect<ThemeType>({
+            values
+        }).catch(() => {
+            process.exit(-1);
+        });
+
+        return value;
+    })();
+
+    console.log(`→ ${themeType}`);
+
+    console.log(chalk.cyan('Select the page you want to customize:'));
+
+    const templateValue = 'template.ftl (Layout common to every page)';
+
+    const { value: pageIdOrComponent } = await cliSelect<
+        LoginThemePageId | AccountThemePageId | typeof templateValue
+    >({
+        values: (() => {
+            switch (themeType) {
+                case 'login':
+                    return [templateValue, ...LOGIN_THEME_PAGE_IDS];
+                case 'account':
+                    return [templateValue, ...ACCOUNT_THEME_PAGE_IDS];
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        })()
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${pageIdOrComponent}`);
+
+    const componentDirRelativeToThemeTypePath = (() => {
+        if (pageIdOrComponent === templateValue) {
+            return pathJoin('containers', 'template');
+        }
+
+        return pathJoin('pages', pageIdOrComponent.replace(/\.ftl$/, ''));
+    })();
+
+    {
+        const componentDirRelativeToThemeTypePaths = [
+            componentDirRelativeToThemeTypePath
+        ];
+
+        while (componentDirRelativeToThemeTypePaths.length !== 0) {
+            const componentDirRelativeToThemeTypePath_i =
+                componentDirRelativeToThemeTypePaths.pop();
+
+            assert(componentDirRelativeToThemeTypePath_i !== undefined);
+
+            const destDirPath = pathJoin(
+                buildContext.themeSrcDirPath,
+                themeType,
+                componentDirRelativeToThemeTypePath_i
+            );
+
+            if (fs.existsSync(destDirPath) && fs.readdirSync(destDirPath).length !== 0) {
+                if (
+                    componentDirRelativeToThemeTypePath_i ===
+                    componentDirRelativeToThemeTypePath
+                ) {
+                    console.log(
+                        `${pageIdOrComponent.split('.ftl')[0]} is already ejected, ${pathRelative(
+                            process.cwd(),
+                            destDirPath
+                        )} already exists`
+                    );
+                    process.exit(-1);
+                }
+                continue;
+            }
+
+            const localThemeTypeDirPath = pathJoin(
+                getThisCodebaseRootDirPath(),
+                'src',
+                themeType
+            );
+
+            transformCodebase({
+                srcDirPath: pathJoin(
+                    localThemeTypeDirPath,
+                    componentDirRelativeToThemeTypePath_i
+                ),
+                destDirPath,
+                transformSourceCode: ({ filePath, sourceCode }) => {
+                    if (!filePath.endsWith('.ts')) {
+                        return { modifiedSourceCode: sourceCode };
+                    }
+
+                    const fileRelativeToThemeTypePath = pathRelative(
+                        localThemeTypeDirPath,
+                        filePath
+                    );
+
+                    let modifiedSourceCode_str = sourceCode.toString();
+
+                    const getPosixPathRelativeToFile = (params: {
+                        pathRelativeToThemeType: string;
+                    }) => {
+                        const { pathRelativeToThemeType } = params;
+
+                        const path = pathRelative(
+                            pathDirname(fileRelativeToThemeTypePath),
+                            pathRelativeToThemeType
+                        )
+                            .split(pathSep)
+                            .join('/');
+
+                        return path.startsWith('.') ? path : `./${path}`;
+                    };
+
+                    modifiedSourceCode_str = replaceAll(
+                        modifiedSourceCode_str,
+                        `@keycloakify/angular/${themeType}/i18n`,
+                        getPosixPathRelativeToFile({
+                            pathRelativeToThemeType: 'i18n'
+                        })
+                    );
+
+                    modifiedSourceCode_str = replaceAll(
+                        modifiedSourceCode_str,
+                        `@keycloakify/angular/${themeType}/KcContext`,
+                        getPosixPathRelativeToFile({
+                            pathRelativeToThemeType: 'KcContext'
+                        })
+                    );
+
+                    modifiedSourceCode_str = modifiedSourceCode_str.replace(
+                        new RegExp(
+                            `@keycloakify/angular/${themeType}/components/([^'"]+)`,
+                            'g'
+                        ),
+                        (...[, componentDirRelativeToComponentsPath]) => {
+                            const componentDirRelativeToThemeTypePath = pathJoin(
+                                'components',
+                                componentDirRelativeToComponentsPath
+                            );
+
+                            componentDirRelativeToThemeTypePaths.push(
+                                componentDirRelativeToThemeTypePath
+                            );
+
+                            return getPosixPathRelativeToFile({
+                                pathRelativeToThemeType:
+                                    componentDirRelativeToThemeTypePath
+                            });
+                        }
+                    );
+
+                    return {
+                        modifiedSourceCode: Buffer.from(modifiedSourceCode_str, 'utf8')
+                    };
+                }
+            });
+
+            console.log(
+                `${chalk.green('✓')} ${chalk.bold(
+                    `.${pathSep}` + pathRelative(process.cwd(), destDirPath)
+                )} moved from the @keycloakify/angular to your project`
+            );
+        }
+    }
+
+    edit_KcPage: {
+        if (pageIdOrComponent !== templateValue) {
+            break edit_KcPage;
+        }
+
+        const kcAppTsFilePath = pathJoin(
+            buildContext.themeSrcDirPath,
+            themeType,
+            'KcPage.ts'
+        );
+
+        const kcAppTsCode = fs.readFileSync(kcAppTsFilePath).toString('utf8');
+
+        const modifiedKcAppTsCode = (() => {
+            const componentRelativeDirPath_posix = componentDirRelativeToThemeTypePath
+                .split(pathSep)
+                .join('/');
+
+            return kcAppTsCode.replace(
+                `@keycloakify/angular/${themeType}/${componentRelativeDirPath_posix}`,
+                `./${componentRelativeDirPath_posix}`
+            );
+        })();
+
+        if (modifiedKcAppTsCode === kcAppTsCode) {
+            console.log(
+                chalk.red(
+                    'Unable to automatically update KcPage.tsx, please update it manually'
+                )
+            );
+            return;
+        }
+
+        fs.writeFileSync(kcAppTsFilePath, Buffer.from(modifiedKcAppTsCode, 'utf8'));
+
+        console.log(
+            `${chalk.green('✓')} ${chalk.bold(
+                `.${pathSep}` + pathRelative(process.cwd(), kcAppTsFilePath)
+            )} Updated`
+        );
+
+        return;
+    }
+
+    const pageId = pageIdOrComponent;
+
+    console.log(
+        [
+            ``,
+            `You now need to update your page router:`,
+            ``,
+            `${chalk.bold(
+                pathJoin(
+                    '.',
+                    pathRelative(process.cwd(), buildContext.themeSrcDirPath),
+                    themeType,
+                    'KcPage.ts'
+                )
+            )}:`,
+            chalk.grey('```'),
+            `// ...`,
+            ``,
+            ...[
+                ` export async function getKcPage(pageId: KcContext['pageId']): Promise<KcPage> {`,
+                `   switch (pageId) {`,
+                `+    case '${pageId}':`,
+                `+      return {`,
+                `+        PageComponent: (await import('./${componentDirRelativeToThemeTypePath.split(pathSep).join('/')}')).${kebabCaseToCamelCase(pageId.replace(/\.ftl$/, ''))}Component,`,
+                `+        TemplateComponent,`,
+                ...(themeType === 'login' ? [`+        doMakeUserConfirmPassword,`] : []),
+                `+        doUseDefaultCss,`,
+                `+        classes,`,
+                `+      };`,
+                `     //...`,
+                `     default:`,
+                `       return {`,
+                `         PageComponent: await getDefaultPageComponent(pageId),`,
+                `         TemplateComponent,`,
+                ...(themeType === 'login' ? [`         doMakeUserConfirmPassword,`] : []),
+                `         doUseDefaultCss,`,
+                `         classes,`,
+                `       };`,
+                `   }`,
+                ` }`
+            ].map(line => {
+                if (line.startsWith('+')) {
+                    return chalk.green(line);
+                }
+                if (line.startsWith('-')) {
+                    return chalk.red(line);
+                }
+                return chalk.grey(line);
+            }),
+            chalk.grey('```')
+        ].join('\n')
+    );
+}

package/src/bin/initialize-account-theme/boilerplate/KcContext.ts

@@ -0,0 +1,11 @@
+import type { ExtendKcContext } from 'keycloakify/account';
+import type { KcEnvName, ThemeName } from '../kc.gen';
+
+export type KcContextExtension = {
+    themeName: ThemeName;
+    properties: Record<KcEnvName, string> & {};
+};
+
+export type KcContextExtensionPerPage = Record<string, Record<string, unknown>>;
+
+export type KcContext = ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>;

package/src/bin/initialize-account-theme/boilerplate/KcContextMock.ts

@@ -0,0 +1,18 @@
+import { createGetKcContextMock } from 'keycloakify/account/KcContext';
+import { kcEnvDefaults, themeNames } from '../kc.gen';
+import type { KcContextExtension, KcContextExtensionPerPage } from './KcContext';
+
+const kcContextExtension: KcContextExtension = {
+    themeName: themeNames[0],
+    properties: {
+        ...kcEnvDefaults
+    }
+};
+const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
+
+export const { getKcContextMock } = createGetKcContextMock({
+    kcContextExtension,
+    kcContextExtensionPerPage,
+    overrides: {},
+    overridesPerPage: {}
+});

package/src/bin/initialize-account-theme/boilerplate/KcPage.ts

@@ -0,0 +1,19 @@
+import { getDefaultPageComponent, type KcPage } from '@keycloakify/angular/account';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
+import type { ClassKey } from 'keycloakify/account';
+import type { KcContext } from './KcContext';
+
+const classes = {} satisfies { [key in ClassKey]?: string };
+const doUseDefaultCss = true;
+
+export async function getKcPage(pageId: KcContext['pageId']): Promise<KcPage> {
+    switch (pageId) {
+        default:
+            return {
+                PageComponent: await getDefaultPageComponent(pageId),
+                TemplateComponent,
+                doUseDefaultCss,
+                classes
+            };
+    }
+}

package/src/bin/initialize-account-theme/boilerplate/i18n.ts

@@ -0,0 +1,11 @@
+import { i18nBuilder } from '@keycloakify/angular/account';
+import { ThemeName } from '../kc.gen';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { getI18n, ofTypeI18n } = i18nBuilder
+    .withThemeName<ThemeName>()
+    .withExtraLanguages({}) // See: https://docs.keycloakify.dev/i18n/adding-support-for-extra-languages
+    .withCustomTranslations({}) // See: https://docs.keycloakify.dev/i18n/adding-new-translation-messages-or-changing-the-default-ones
+    .build();
+type I18n = typeof ofTypeI18n;
+export { getI18n, type I18n };

package/src/bin/initialize-account-theme/initialize-account-theme.ts

@@ -0,0 +1,98 @@
+import type { BuildContext } from '../core';
+import child_process from 'child_process';
+import chalk from 'chalk';
+import { join as pathJoin, relative as pathRelative } from 'path';
+import * as fs from 'fs';
+import { updateAccountThemeImplementationInConfig } from './updateAccountThemeImplementationInConfig';
+import { command as updateKcGenCommand } from '../update-kc-gen';
+import { getThisCodebaseRootDirPath } from '../tools/getThisCodebaseRootDirPath';
+
+export async function command(params: { buildContext: BuildContext }) {
+    const { buildContext } = params;
+
+    const accountThemeSrcDirPath = pathJoin(buildContext.themeSrcDirPath, 'account');
+
+    if (
+        fs.existsSync(accountThemeSrcDirPath) &&
+        fs.readdirSync(accountThemeSrcDirPath).length > 0
+    ) {
+        console.warn(
+            chalk.red(
+                `There is already a ${pathRelative(
+                    process.cwd(),
+                    accountThemeSrcDirPath
+                )} directory in your project. Aborting.`
+            )
+        );
+
+        process.exit(-1);
+    }
+
+    exit_if_uncommitted_changes: {
+        let hasUncommittedChanges: boolean | undefined = undefined;
+
+        try {
+            hasUncommittedChanges =
+                child_process
+                    .execSync(`git status --porcelain`, {
+                        cwd: buildContext.projectDirPath
+                    })
+                    .toString()
+                    .trim() !== '';
+        } catch {
+            // Probably not a git repository
+            break exit_if_uncommitted_changes;
+        }
+
+        if (!hasUncommittedChanges) {
+            break exit_if_uncommitted_changes;
+        }
+        console.warn(
+            [
+                chalk.red(
+                    'Please commit or stash your changes before running this command.\n'
+                ),
+                "This command will modify your project's files so it's better to have a clean working directory",
+                'so that you can easily see what has been changed and revert if needed.'
+            ].join(' ')
+        );
+
+        process.exit(-1);
+    }
+
+    const accountThemeType = 'Multi-Page';
+
+    fs.cpSync(
+        pathJoin(
+            getThisCodebaseRootDirPath(),
+            'src',
+            'bin',
+            'initialize-account-theme',
+            'boilerplate'
+        ),
+        accountThemeSrcDirPath,
+        { recursive: true }
+    );
+
+    updateAccountThemeImplementationInConfig({ buildContext, accountThemeType });
+
+    updateKcGenCommand({
+        buildContext: {
+            ...buildContext,
+            implementedThemeTypes: {
+                ...buildContext.implementedThemeTypes,
+                account: {
+                    isImplemented: true,
+                    type: accountThemeType
+                }
+            }
+        }
+    });
+
+    console.log(
+        [
+            chalk.green(`The ${accountThemeType} account theme has been initialized.`),
+            `Directory created: ${chalk.bold(pathRelative(process.cwd(), accountThemeSrcDirPath))}`
+        ].join('\n')
+    );
+}

package/src/bin/initialize-account-theme/updateAccountThemeImplementationInConfig.ts

@@ -0,0 +1,99 @@
+import { join as pathJoin } from 'path';
+import { assert, type Equals } from 'tsafe/assert';
+import type { BuildContext } from '../core';
+import * as fs from 'fs';
+import chalk from 'chalk';
+import { z } from 'zod';
+import { id } from 'tsafe/id';
+
+export type BuildContextLike = {
+    bundler: BuildContext['bundler'];
+    projectDirPath: string;
+    packageJsonFilePath: string;
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export function updateAccountThemeImplementationInConfig(params: {
+    buildContext: BuildContext;
+    accountThemeType: 'Multi-Page';
+}) {
+    const { buildContext, accountThemeType } = params;
+
+    switch (buildContext.bundler) {
+        case 'vite':
+            {
+                const viteConfigPath = pathJoin(
+                    buildContext.projectDirPath,
+                    'vite.config.ts'
+                );
+
+                if (!fs.existsSync(viteConfigPath)) {
+                    console.log(
+                        chalk.bold(
+                            `You must manually set the accountThemeImplementation to "${accountThemeType}" in your vite config`
+                        )
+                    );
+                    break;
+                }
+
+                const viteConfigContent = fs
+                    .readFileSync(viteConfigPath)
+                    .toString('utf8');
+
+                const modifiedViteConfigContent = viteConfigContent.replace(
+                    /["']?accountThemeImplementation["']?\s*:\s*["']none["']/,
+                    `accountThemeImplementation: '${accountThemeType}'`
+                );
+
+                if (modifiedViteConfigContent === viteConfigContent) {
+                    console.log(
+                        chalk.yellow(
+                            `You must manually set the accountThemeImplementation to "${accountThemeType}" in your vite.config.ts`
+                        )
+                    );
+                    break;
+                }
+
+                fs.writeFileSync(viteConfigPath, modifiedViteConfigContent);
+            }
+            break;
+        case 'webpack':
+            {
+                const parsedPackageJson = (() => {
+                    type ParsedPackageJson = {
+                        keycloakify: Record<string, unknown>;
+                    };
+
+                    const zParsedPackageJson = (() => {
+                        type TargetType = ParsedPackageJson;
+
+                        const zTargetType = z.object({
+                            keycloakify: z.record(z.unknown())
+                        });
+
+                        assert<Equals<z.infer<typeof zTargetType>, TargetType>>();
+
+                        return id<z.ZodType<TargetType>>(zTargetType);
+                    })();
+
+                    const parsedPackageJson = JSON.parse(
+                        fs.readFileSync(buildContext.packageJsonFilePath).toString('utf8')
+                    );
+
+                    zParsedPackageJson.parse(parsedPackageJson);
+
+                    return parsedPackageJson;
+                })();
+
+                parsedPackageJson.keycloakify.accountThemeImplementation =
+                    accountThemeType;
+
+                fs.writeFileSync(
+                    buildContext.packageJsonFilePath,
+                    Buffer.from(JSON.stringify(parsedPackageJson, undefined, 4), 'utf8')
+                );
+            }
+            break;
+    }
+}

package/src/bin/main.ts

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+
+import { readParams, NOT_IMPLEMENTED_EXIT_CODE } from './core';
+
+const { buildContext, commandName } = readParams({ apiVersion: 'v1' });
+
+(async () => {
+    switch (commandName) {
+        case 'add-story':
+            {
+                console.log(
+                    "Not yet supported by @keycloakify/angular, we're working on it!"
+                );
+                process.exit(-1);
+            }
+            return;
+        case 'eject-page':
+            {
+                const { command } = await import('./eject-page');
+                command({ buildContext });
+            }
+            return;
+        case 'update-kc-gen':
+            {
+                const { command } = await import('./update-kc-gen');
+                command({ buildContext });
+            }
+            return;
+        case 'initialize-account-theme':
+            {
+                const { command } = await import('./initialize-account-theme');
+                command({ buildContext });
+            }
+            return;
+        default:
+            process.exit(NOT_IMPLEMENTED_EXIT_CODE);
+    }
+})();