@keycloakify/angular 0.0.10 → 0.1.0

package/src/bin/tools/nodeModulesBinDirPath.ts

@@ -0,0 +1,38 @@
+import { sep as pathSep } from 'path';
+
+let cache: string | undefined = undefined;
+
+export function getNodeModulesBinDirPath() {
+    if (cache !== undefined) {
+        return cache;
+    }
+
+    const binPath = process.argv[1];
+
+    const segments: string[] = ['.bin'];
+
+    let foundNodeModules = false;
+
+    for (const segment of binPath.split(pathSep).reverse()) {
+        skip_segment: {
+            if (foundNodeModules) {
+                break skip_segment;
+            }
+
+            if (segment === 'node_modules') {
+                foundNodeModules = true;
+                break skip_segment;
+            }
+
+            continue;
+        }
+
+        segments.unshift(segment);
+    }
+
+    const nodeModulesBinDirPath = segments.join(pathSep);
+
+    cache = nodeModulesBinDirPath;
+
+    return nodeModulesBinDirPath;
+}

package/src/bin/tools/runPrettier.ts

@@ -0,0 +1,89 @@
+import { getNodeModulesBinDirPath } from './nodeModulesBinDirPath';
+import { join as pathJoin } from 'path';
+import * as fsPr from 'fs/promises';
+import { id } from 'tsafe/id';
+import { assert } from 'tsafe/assert';
+import chalk from 'chalk';
+
+getIsPrettierAvailable.cache = id<boolean | undefined>(undefined);
+
+export async function getIsPrettierAvailable(): Promise<boolean> {
+    if (getIsPrettierAvailable.cache !== undefined) {
+        return getIsPrettierAvailable.cache;
+    }
+
+    const nodeModulesBinDirPath = getNodeModulesBinDirPath();
+
+    const prettierBinPath = pathJoin(nodeModulesBinDirPath, 'prettier');
+
+    const stats = await fsPr.stat(prettierBinPath).catch(() => undefined);
+
+    const isPrettierAvailable = stats?.isFile() ?? false;
+
+    getIsPrettierAvailable.cache = isPrettierAvailable;
+
+    return isPrettierAvailable;
+}
+
+type PrettierAndConfig = {
+    prettier: typeof import('prettier');
+    config: import('prettier').Options | null;
+};
+
+getPrettierAndConfig.cache = id<PrettierAndConfig | undefined>(undefined);
+
+export async function getPrettierAndConfig(): Promise<PrettierAndConfig> {
+    assert(getIsPrettierAvailable());
+
+    if (getPrettierAndConfig.cache !== undefined) {
+        return getPrettierAndConfig.cache;
+    }
+
+    const prettier = await import('prettier');
+
+    const prettierAndConfig: PrettierAndConfig = {
+        prettier,
+        config: await prettier.resolveConfig(pathJoin(getNodeModulesBinDirPath(), '..'))
+    };
+
+    getPrettierAndConfig.cache = prettierAndConfig;
+
+    return prettierAndConfig;
+}
+
+export async function runPrettier(params: {
+    sourceCode: string;
+    filePath: string;
+}): Promise<string> {
+    const { sourceCode, filePath } = params;
+
+    let formattedSourceCode: string;
+
+    try {
+        const { prettier, config } = await getPrettierAndConfig();
+
+        const { ignored, inferredParser } = await prettier.getFileInfo(filePath, {
+            resolveConfig: true
+        });
+
+        if (ignored) {
+            return sourceCode;
+        }
+
+        formattedSourceCode = await prettier.format(sourceCode, {
+            ...config,
+            filePath,
+            parser: inferredParser ?? undefined
+        });
+    } catch (error) {
+        console.log(
+            chalk.red(
+                `You probably need to upgrade the version of prettier in your project`
+            )
+        );
+
+        throw error;
+    }
+
+    return formattedSourceCode;
+}

package/src/bin/tools/transformCodebase_async.ts

@@ -0,0 +1,89 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { crawl } from './crawl';
+import { rmSync } from '../tools/fs.rmSync';
+
+type TransformSourceCode = (params: {
+    sourceCode: Buffer;
+    filePath: string;
+    fileRelativePath: string;
+}) => Promise<
+    | {
+          modifiedSourceCode: Buffer;
+          newFileName?: string;
+      }
+    | undefined
+>;
+
+/**
+ * Apply a transformation function to every file of directory
+ * If source and destination are the same this function can be used to apply the transformation in place
+ * like filtering out some files or modifying them.
+ * */
+export async function transformCodebase(params: {
+    srcDirPath: string;
+    destDirPath: string;
+    transformSourceCode?: TransformSourceCode;
+}) {
+    const { srcDirPath, transformSourceCode } = params;
+
+    const isTargetSameAsSource = path.relative(srcDirPath, params.destDirPath) === '';
+
+    const destDirPath = isTargetSameAsSource
+        ? path.join(srcDirPath, '..', 'tmp_xOsPdkPsTdzPs34sOkHs')
+        : params.destDirPath;
+
+    fs.mkdirSync(destDirPath, {
+        recursive: true
+    });
+
+    for (const fileRelativePath of crawl({
+        dirPath: srcDirPath,
+        returnedPathsType: 'relative to dirPath'
+    })) {
+        const filePath = path.join(srcDirPath, fileRelativePath);
+        const destFilePath = path.join(destDirPath, fileRelativePath);
+
+        // NOTE: Optimization, if we don't need to transform the file, just copy
+        // it using the lower level implementation.
+        if (transformSourceCode === undefined) {
+            fs.mkdirSync(path.dirname(destFilePath), {
+                recursive: true
+            });
+
+            fs.copyFileSync(filePath, destFilePath);
+
+            continue;
+        }
+
+        const transformSourceCodeResult = await transformSourceCode({
+            sourceCode: fs.readFileSync(filePath),
+            filePath,
+            fileRelativePath
+        });
+
+        if (transformSourceCodeResult === undefined) {
+            continue;
+        }
+
+        fs.mkdirSync(path.dirname(destFilePath), {
+            recursive: true
+        });
+
+        const { newFileName, modifiedSourceCode } = transformSourceCodeResult;
+
+        fs.writeFileSync(
+            path.join(
+                path.dirname(destFilePath),
+                newFileName ?? path.basename(destFilePath)
+            ),
+            modifiedSourceCode
+        );
+    }
+
+    if (isTargetSameAsSource) {
+        rmSync(srcDirPath, { recursive: true });
+
+        fs.renameSync(destDirPath, srcDirPath);
+    }
+}

package/src/bin/update-kc-gen.ts

@@ -1,10 +1,10 @@
 import type { BuildContext } from './core';
 import * as fs from 'fs';
 import { join as pathJoin } from 'path';
-import { runFormat } from './tools/runFormat';
+import { getIsPrettierAvailable, runPrettier } from './tools/runPrettier';
 import * as crypto from 'crypto';
 
-export function command(params: { buildContext: BuildContext }) {
+export async function command(params: { buildContext: BuildContext }) {
     const { buildContext } = params;
 
     const filePath = pathJoin(buildContext.themeSrcDirPath, 'kc.gen.ts');
@@ -109,6 +109,7 @@ export function command(params: { buildContext: BuildContext }) {
                 `                });`,
                 ``,
                 `                appRef.components.forEach(componentRef => {`,
+                `                    // page must be defined first          `,
                 `                    if ("page" in componentRef.instance) {`,
                 `                        componentRef.setInput("page", PageComponent);`,
                 `                    }`,
@@ -148,18 +149,23 @@ export function command(params: { buildContext: BuildContext }) {
         return;
     }
 
-    fs.writeFileSync(
-        filePath,
-        Buffer.from(
-            [
-                `// This file is auto-generated by keycloakify. Do not edit it manually.`,
-                `// Hash: ${hash}`,
-                ``,
-                newContent
-            ].join('\n'),
-            'utf8'
-        )
-    );
+    let sourceCode = [
+        `// This file is auto-generated by keycloakify. Do not edit it manually.`,
+        `// Hash: ${hash}`,
+        ``,
+        newContent
+    ].join('\n');
+
+    run_prettier: {
+        if (!(await getIsPrettierAvailable())) {
+            break run_prettier;
+        }
+
+        sourceCode = await runPrettier({
+            filePath,
+            sourceCode
+        });
+    }
 
-    runFormat({ packageJsonFilePath: buildContext.packageJsonFilePath });
+    fs.writeFileSync(filePath, Buffer.from(sourceCode, 'utf8'));
 }

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

@@ -53,7 +53,7 @@ export class LoginResourceInjectorService {
                 id: `${this.kcContext.url.resourcesPath}/js/menu-button-links.js`,
                 src: `${this.kcContext.url.resourcesPath}/js/menu-button-links.js`
             },
-            ...this.kcContext.scripts.map(script => ({
+            ...(this.kcContext.scripts ?? []).map(script => ({
                 type: 'text/javascript',
                 src: script,
                 id: script

package/src/login/{containers/template → template}/template.component.html

@@ -159,14 +159,8 @@
                         </div>
                     }
                     <!-- Content -->
-                    @let pageRef = page();
-                    @if (!!pageRef) {
-                        <kc-dynamic-page-injector
-                            [page]="pageRef"
-                            [userProfileFormFields]="userProfileFormFields()"
-                            (componentCreated)="onComponentCreated($event)"
-                        />
-                    }
+                    <ng-template #pageRef></ng-template>
+
                     @if (!!auth && auth?.showTryAnotherWayLink) {
                         <form
                             id="kc-select-try-another-way-form"

package/src/login/{containers/template → template}/template.component.ts

@@ -5,14 +5,15 @@ import {
     Component,
     computed,
     effect,
+    EffectRef,
     forwardRef,
     inject,
     input,
-    output,
     Renderer2,
     type Signal,
     type TemplateRef,
     type Type,
+    viewChild,
     ViewContainerRef
 } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
@@ -29,38 +30,11 @@ import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
 import { type ClassKey, getKcClsx } from 'keycloakify/login/lib/kcClsx';
 import type { Observable } from 'rxjs';
 
-@Component({
-    selector: 'kc-dynamic-page-injector',
-    standalone: true,
-    template: ``
-})
-export class DynamicPageInjectorComponent {
-    page = input<Type<unknown>>();
-    userProfileFormFields = input<Type<unknown>>();
-    componentCreated = output<object>();
-    #vcr = inject<ViewContainerRef>(ViewContainerRef);
-    constructor() {
-        effect(
-            () => {
-                const page = this.page();
-                const userProfileFormFields = this.userProfileFormFields();
-                if (!page) return;
-                const compRef = this.#vcr.createComponent(page);
-                if ('userProfileFormFields' in (compRef.instance as object) && userProfileFormFields) {
-                    compRef.setInput('userProfileFormFields', userProfileFormFields);
-                }
-                this.componentCreated.emit(compRef.instance as object);
-            },
-            { allowSignalWrites: true }
-        );
-    }
-}
-
 @Component({
     selector: 'kc-root',
     templateUrl: 'template.component.html',
     standalone: true,
-    imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective, DynamicPageInjectorComponent],
+    imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -73,6 +47,7 @@ export class TemplateComponent extends ComponentReference {
     i18n = inject<I18n>(LOGIN_I18N);
     renderer = inject(Renderer2);
     #cdr = inject(ChangeDetectorRef);
+    #effectRef: EffectRef;
     meta = inject(Meta);
     title = inject(Title);
     kcContext = inject<KcContext>(KC_LOGIN_CONTEXT);
@@ -89,6 +64,8 @@ export class TemplateComponent extends ComponentReference {
     isReadyToRender$: Observable<boolean>;
 
     page = input<Type<unknown>>();
+    pageRef = viewChild('pageRef', { read: ViewContainerRef });
+
     userProfileFormFields = input<Type<unknown>>();
     headerNode: Signal<TemplateRef<HTMLElement>> | undefined;
     infoNode: Signal<TemplateRef<HTMLElement>> | undefined;
@@ -98,6 +75,22 @@ export class TemplateComponent extends ComponentReference {
         super();
 
         this.isReadyToRender$ = this.loginResourceInjectorService.injectResource(this.doUseDefaultCss);
+        this.#effectRef = effect(
+            () => {
+                const page = this.page();
+                const pageRef = this.pageRef();
+                if (!page || !pageRef) return;
+
+                const userProfileFormFields = this.userProfileFormFields();
+
+                const compRef = pageRef.createComponent(page);
+                if ('userProfileFormFields' in (compRef.instance as object) && userProfileFormFields) {
+                    compRef.setInput('userProfileFormFields', userProfileFormFields);
+                }
+                this.onComponentCreated(compRef.instance as object);
+            },
+            { manualCleanup: true }
+        );
     }
 
     private applyKcIndexClasses() {
@@ -158,5 +151,6 @@ export class TemplateComponent extends ComponentReference {
         this.title.setTitle(this.documentTitle ?? this.i18n.msgStr('loginTitle', this.kcContext.realm.displayName));
         this.applyKcIndexClasses();
         this.#cdr.markForCheck();
+        this.#effectRef.destroy();
     }
 }

package/stories/account/pages/account.stories.ts

@@ -0,0 +1,133 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'account/account.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'account.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const UsernameNotEditable: Story = {
+    globals: {
+        overrides: {
+            account: {
+                username: 'john_doe',
+                email: 'john.doe@gmail.com',
+                firstName: 'John',
+                lastName: 'Doe'
+            },
+            realm: {
+                registrationEmailAsUsername: false,
+                editUsernameAllowed: false
+            },
+            referrer: {
+                url: '/home'
+            },
+            url: {
+                accountUrl: '/account'
+            },
+            messagesPerField: {
+                printIfExists: () => ''
+            },
+            stateChecker: 'state-checker'
+        }
+    }
+};
+
+export const WithValidationErrors: Story = {
+    globals: {
+        overrides: {
+            account: {
+                username: 'john_doe',
+                email: '',
+                firstName: '',
+                lastName: 'Doe'
+            },
+            realm: {
+                registrationEmailAsUsername: false,
+                editUsernameAllowed: true
+            },
+            referrer: {
+                url: '/home'
+            },
+            url: {
+                accountUrl: '/account'
+            },
+            messagesPerField: {
+                printIfExists: (field: string) =>
+                    field === 'email' || field === 'firstName' ? 'has-error' : ''
+            },
+            stateChecker: 'state-checker'
+        }
+    }
+};
+
+export const EmailAsUsername: Story = {
+    globals: {
+        overrides: {
+            account: {
+                email: 'john.doe@gmail.com',
+                firstName: 'John',
+                lastName: 'Doe'
+            },
+            realm: {
+                registrationEmailAsUsername: true
+            },
+            referrer: {
+                url: '/home'
+            },
+            url: {
+                accountUrl: '/account'
+            },
+            messagesPerField: {
+                printIfExists: () => ''
+            },
+            stateChecker: 'state-checker'
+        }
+    }
+};
+
+export const WithErrorCode: Story = {
+    globals: {
+        overrides: {
+            code: {
+                success: false,
+                error: 'Failed to generate code'
+            }
+        }
+    }
+};
+
+export const WithFrenchLanguage: Story = {
+    globals: {
+        overrides: {
+            locale: {
+                currentLanguageTag: 'fr'
+            },
+            code: {
+                success: true,
+                code: 'XYZ789'
+            }
+        }
+    }
+};
+
+export const WithHtmlErrorMessage: Story = {
+    globals: {
+        overrides: {
+            code: {
+                success: false,
+                error: "Something went wrong. <a href='https://example.com'>Try again</a>"
+            }
+        }
+    }
+};