@keycloakify/angular 0.0.1-rc.8 → 0.0.1

package/src/account/providers/keycloakify-angular/keycloakify-angular.providers.ts

@@ -0,0 +1,62 @@
+import { DOCUMENT } from '@angular/common';
+import { APP_INITIALIZER, LOCALE_ID, makeEnvironmentProviders } from '@angular/core';
+import { I18nService } from '@keycloakify/angular/account/services/i18n';
+import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes';
+import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n';
+import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { type KcContextLike } from 'keycloakify/account/i18n/noJsx';
+import type { ClassKey } from 'keycloakify/account/lib/kcClsx';
+import type { KcContext } from '@keycloakify/angular/account/KcContext';
+
+export type KeycloakifyAngularAccountConfig = {
+    doUseDefaultCss?: boolean;
+    classes?: { [key in ClassKey]?: string };
+    kcContext: KcContext;
+    getI18n: (params: { kcContext: KcContextLike }) => {
+        i18n: unknown;
+        prI18n_currentLanguage: Promise<unknown> | undefined;
+    };
+};
+
+export const provideKeycloakifyAngular = (config: KeycloakifyAngularAccountConfig) =>
+    makeEnvironmentProviders([
+        {
+            provide: KC_ACCOUNT_CONTEXT,
+            useValue: config.kcContext
+        },
+        {
+            provide: LOCALE_ID,
+            useFactory: (document: Document) => {
+                return document.documentElement.lang ?? 'en';
+            },
+            deps: [DOCUMENT]
+        },
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: (i18nService: I18nService, kcContext: KcContext) => async () => {
+                const getI18n = config.getI18n;
+
+                const { i18n, prI18n_currentLanguage } = getI18n({
+                    kcContext
+                });
+                let i18nPromise = new Promise<typeof i18n>(resolve => resolve(i18n));
+                if (prI18n_currentLanguage) {
+                    i18nPromise = prI18n_currentLanguage;
+                }
+                return i18nPromise.then(i18n => {
+                    i18nService.i18n = i18n;
+                    return true;
+                });
+            },
+            deps: [I18nService, KC_ACCOUNT_CONTEXT]
+        },
+        {
+            provide: ACCOUNT_I18N,
+            useFactory: (i18nService: I18nService) => i18nService.i18n,
+            deps: [I18nService]
+        },
+        { provide: USE_DEFAULT_CSS, useValue: config?.doUseDefaultCss ?? true },
+        { provide: ACCOUNT_CLASSES, useValue: config?.classes ?? {} }
+    ]);

package/src/account/services/account-resource-injector/account-resource-injector.service.ts

@@ -0,0 +1,41 @@
+import { inject, Injectable } from '@angular/core';
+import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';
+import { Script } from '@keycloakify/angular/lib/models/script';
+import { ResourceInjectorService } from '@keycloakify/angular/lib/services/resource-injector';
+import { catchError, forkJoin, of, switchMap } from 'rxjs';
+import type { KcContext } from '@keycloakify/angular/account/KcContext';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AccountResourceInjectorService {
+    private kcContext: KcContext = inject<KcContext>(KC_ACCOUNT_CONTEXT);
+    private resourceInjectorService: ResourceInjectorService = inject(
+        ResourceInjectorService
+    );
+
+    injectResource(doUseDefaultCss = true) {
+        if (!doUseDefaultCss) {
+            return of(true);
+        }
+        const stylesheets = [
+            `${this.kcContext.url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
+            `${this.kcContext.url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
+            `${this.kcContext.url.resourcesPath}/css/account.css`
+        ];
+
+        return forkJoin(
+            stylesheets.map(url => this.resourceInjectorService.createLink(url))
+        ).pipe(
+            switchMap(() => of(true)),
+            catchError(error => {
+                console.error('Error loading styles:', error);
+                return of(false);
+            })
+        );
+    }
+
+    insertAdditionalScripts(scripts: Script[]) {
+        scripts.map(script => this.resourceInjectorService.createScript(script));
+    }
+}

package/src/account/services/account-resource-injector/index.ts

@@ -0,0 +1 @@
+export * from './account-resource-injector.service';

package/src/account/services/i18n/index.ts

@@ -0,0 +1 @@
+export * from './i18n.service';

package/src/account/tokens/classes/classes.token.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+import type { ClassKey } from 'keycloakify/account/lib/kcClsx';
+
+export const ACCOUNT_CLASSES = new InjectionToken<{ [key in ClassKey]?: string }>(
+    'account classes'
+);

package/src/account/tokens/classes/index.ts

@@ -0,0 +1 @@
+export * from './classes.token';

package/src/account/tokens/i18n/i18n.token.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const ACCOUNT_I18N = new InjectionToken<unknown>('account i18n');

package/src/account/tokens/i18n/index.ts

@@ -0,0 +1 @@
+export * from './i18n.token';

package/src/account/tokens/kc-context/index.ts

@@ -0,0 +1 @@
+export * from './kc-context.token';

package/src/account/tokens/kc-context/kc-context.token.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+import type { KcContext } from '@keycloakify/angular/account/KcContext';
+
+export const KC_ACCOUNT_CONTEXT = new InjectionToken<KcContext>(
+    'keycloak account context'
+);

package/src/bin/core.ts

@@ -0,0 +1,10 @@
+export * from 'keycloakify/bin/shared/customHandler';
+export type { BuildContext } from 'keycloakify/bin/shared/buildContext';
+export {
+    LOGIN_THEME_PAGE_IDS,
+    ACCOUNT_THEME_PAGE_IDS,
+    type LoginThemePageId,
+    type AccountThemePageId,
+    THEME_TYPES,
+    type ThemeType
+} from 'keycloakify/bin/shared/constants';

package/src/bin/eject-page.ts

@@ -0,0 +1,421 @@
+#!/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,
+    posix as pathPosix
+} 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';
+import { capitalize } from 'tsafe/capitalize';
+import { id } from 'tsafe/id';
+import { z } from 'zod';
+import { is } from 'tsafe/is';
+import * as child_process from 'child_process';
+
+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 userProfileFormFieldsValue =
+        'user-profile-commons.ftl (Renders the form of the register.ftl, login-update-profile.ftl, update-email.ftl and idp-review-user-profile.ftl)';
+
+    const { value: pageIdOrComponent } = await cliSelect<
+        | LoginThemePageId
+        | AccountThemePageId
+        | typeof templateValue
+        | typeof userProfileFormFieldsValue
+    >({
+        values: (() => {
+            switch (themeType) {
+                case 'login':
+                    return [
+                        templateValue,
+                        userProfileFormFieldsValue,
+                        ...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 componentRelativeDirPath_posix_to_componentRelativeFilePath_posix = (params: {
+        componentRelativeDirPath_posix: string;
+    }) => {
+        const { componentRelativeDirPath_posix } = params;
+        return `${componentRelativeDirPath_posix}/${pathPosix.basename(componentRelativeDirPath_posix)}.component`;
+    };
+
+    const componentDirRelativeToThemeTypePath = (() => {
+        if (pageIdOrComponent === templateValue) {
+            return pathJoin('containers', 'template');
+        }
+
+        if (pageIdOrComponent === userProfileFormFieldsValue) {
+            return pathJoin('components', 'user-profile-form-fields');
+        }
+
+        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 };
+                    }
+
+                    if (filePath.endsWith('index.ts')) {
+                        return undefined;
+                    }
+
+                    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 componentRelativeDirPath_posix_to_componentRelativeFilePath_posix(
+                                {
+                                    componentRelativeDirPath_posix:
+                                        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`
+            );
+        }
+    }
+
+    run_format: {
+        const parsedPackageJson = (() => {
+            type ParsedPackageJson = {
+                scripts?: Record<string, string>;
+            };
+
+            const zParsedPackageJson = (() => {
+                type TargetType = ParsedPackageJson;
+
+                const zTargetType = z.object({
+                    scripts: z.record(z.string()).optional()
+                });
+
+                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);
+
+            assert(is<ParsedPackageJson>(parsedPackageJson));
+
+            return parsedPackageJson;
+        })();
+
+        const { scripts } = parsedPackageJson;
+
+        if (scripts === undefined) {
+            break run_format;
+        }
+
+        for (const scriptName of ['format', 'lint']) {
+            if (!(scriptName in scripts)) {
+                continue;
+            }
+
+            const command = `npm run ${scriptName}`;
+
+            console.log(chalk.grey(`$ ${command}`));
+
+            try {
+                child_process.execSync(`npm run ${scriptName}`, {
+                    stdio: 'inherit',
+                    cwd: pathDirname(buildContext.packageJsonFilePath)
+                });
+            } catch {
+                console.log(
+                    chalk.yellow(
+                        `\`${command}\` failed, please format your code manually, continuing...`
+                    )
+                );
+            }
+
+            break run_format;
+        }
+    }
+
+    edit_KcPage: {
+        if (
+            pageIdOrComponent !== templateValue &&
+            pageIdOrComponent !== userProfileFormFieldsValue
+        ) {
+            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_to_componentRelativeFilePath_posix({
+                    componentRelativeDirPath_posix: `./${componentRelativeDirPath_posix}`
+                })
+            );
+        })();
+
+        if (modifiedKcAppTsCode === kcAppTsCode) {
+            console.log(
+                chalk.red(
+                    'Unable to automatically update KcPage.ts, 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('${componentRelativeDirPath_posix_to_componentRelativeFilePath_posix(
+                    {
+                        componentRelativeDirPath_posix: `./${componentDirRelativeToThemeTypePath.split(pathSep).join('/')}`
+                    }
+                )}')).${kebabCaseToCamelCase(capitalize(pageId).replace(/\.ftl$/, ''))}Component,`,
+                `+        TemplateComponent,`,
+                ...(themeType === 'login'
+                    ? [`+        UserProfileFormFieldsComponent,`]
+                    : []),
+                ...(themeType === 'login' ? [`+        doMakeUserConfirmPassword,`] : []),
+                `+        doUseDefaultCss,`,
+                `+        classes,`,
+                `+      };`,
+                `     //...`,
+                `     default:`,
+                `       return {`,
+                `         PageComponent: await getDefaultPageComponent(pageId),`,
+                `         TemplateComponent,`,
+                ...(themeType === 'login'
+                    ? [`         UserProfileFormFieldsComponent,`]
+                    : []),
+                ...(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 };