@keycloakify/angular 0.0.1-rc.13 → 0.0.1-rc.16

package/scripts/tools/transformCodebase.ts

@@ -0,0 +1,88 @@
+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;
+}) =>
+    | {
+          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 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 = 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/account/DefaultPage/DefaultPage.ts

@@ -0,0 +1,61 @@
+import { Type } from '@angular/core';
+import type { ClassKey } from 'keycloakify/account';
+import type { KcContext } from '@keycloakify/angular/account/KcContext';
+
+const DefaultPage = async (
+    pageId: KcContext['pageId'],
+    doUseDefaultCss = true,
+    classes: { [key in ClassKey]?: string } = {}
+): Promise<{
+    ComponentBootstrap: Type<unknown>;
+    doMakeUserConfirmPassword: boolean;
+    doUseDefaultCss: boolean;
+    classes: { [key in ClassKey]?: string };
+}> => {
+    let ComponentBootstrapPromise;
+    switch (pageId) {
+        case 'password.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/account/pages/password'
+            ).then(c => c.PasswordComponent);
+            break;
+        case 'account.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/account/pages/account'
+            ).then(c => c.AccountComponent);
+            break;
+        case 'sessions.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/account/pages/sessions'
+            ).then(c => c.SessionsComponent);
+            break;
+        case 'totp.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/account/pages/totp'
+            ).then(c => c.TotpComponent);
+            break;
+        case 'applications.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/account/pages/applications'
+            ).then(c => c.ApplicationsComponent);
+            break;
+        case 'log.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/account/pages/log'
+            ).then(c => c.LogComponent);
+            break;
+        case 'federatedIdentity.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/account/pages/federatedIdentity'
+            ).then(c => c.FederatedIdentityComponent);
+            break;
+    }
+    return ComponentBootstrapPromise?.then(ComponentBootstrap => ({
+        ComponentBootstrap,
+        doMakeUserConfirmPassword: false,
+        doUseDefaultCss,
+        classes
+    }));
+};
+
+export { DefaultPage };

package/src/account/DefaultPage/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/account/KcContext/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/account/classes/component-reference/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/account/containers/template/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/account/containers/template/template.component.ts

@@ -0,0 +1,71 @@
+import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, OnInit, Renderer2 } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+import { AccountResourceInjectorService } from '@keycloakify/angular/account/services/account-resource-injector';
+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 { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ClassKey, getKcClsx } from 'keycloakify/account/lib/kcClsx';
+import { Observable } from 'rxjs';
+import type { I18n } from '@keycloakify/angular/account/i18n';
+import type { KcContext } from '@keycloakify/angular/account/KcContext';
+
+@Component({
+    selector: 'kc-account-template',
+    templateUrl: './template.component.html',
+    standalone: true,
+    imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective, NgClass],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => TemplateComponent)
+        }
+    ]
+})
+export class TemplateComponent extends ComponentReference implements OnInit {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    renderer = inject(Renderer2);
+    meta = inject(Meta);
+    title = inject(Title);
+    kcContext = inject<KcContext>(KC_ACCOUNT_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+    accountResourceInjectorService = inject(AccountResourceInjectorService);
+
+    active = input<'account' | 'password' | 'totp' | 'social' | 'sessions' | 'applications' | 'log' | 'authorization' | undefined>(undefined);
+
+    isReadyToRender$: Observable<boolean>;
+
+    constructor() {
+        super();
+        this.title.setTitle(this.i18n.msgStr('accountManagementTitle'));
+        this.isReadyToRender$ = this.accountResourceInjectorService.injectResource(this.doUseDefaultCss);
+    }
+
+    ngOnInit() {
+        this.applyKcIndexClasses();
+    }
+
+    private applyKcIndexClasses() {
+        const kcClsx = getKcClsx({
+            doUseDefaultCss: this.doUseDefaultCss,
+            classes: this.classes
+        }).kcClsx;
+        const kcBodyClass = kcClsx('kcBodyClass');
+        const kcHtmlClass = kcClsx('kcHtmlClass');
+        const kcBodyClasses = kcBodyClass.split(/\s+/);
+        const kcHtmlClasses = kcHtmlClass.split(/\s+/);
+        kcBodyClasses.push('admin-console', 'user');
+        kcBodyClasses.forEach(klass => {
+            this.renderer.addClass(document.body, klass);
+        });
+        kcHtmlClasses.forEach(klass => {
+            this.renderer.addClass(document.documentElement, klass);
+        });
+    }
+}

package/src/account/directives/kc-class/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/account/i18n/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/account/pages/account/account.component.ts

@@ -0,0 +1,34 @@
+import { NgClass } from '@angular/common';
+import { Component, forwardRef, inject } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+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 { ClassKey } from 'keycloakify/account';
+import type { I18n } from '@keycloakify/angular/account/i18n';
+import type { KcContext } from '@keycloakify/angular/account/KcContext';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, TemplateComponent, NgClass],
+    selector: 'kc-root',
+    templateUrl: 'account.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => AccountComponent)
+        }
+    ]
+})
+export class AccountComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    kcContext = inject<Extract<KcContext, { pageId: 'account.ftl' }>>(KC_ACCOUNT_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+    override additionalClasses: Partial<Record<ClassKey, string>> = {
+        kcBodyClass: `${this.classes?.kcBodyClass} user`
+    };
+}

package/src/account/pages/account/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/account/pages/applications/applications.component.ts

@@ -0,0 +1,32 @@
+import { KeyValuePipe, NgClass } from '@angular/common';
+import { Component, forwardRef, inject } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+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 { IsArrayWithEmptyObjectPipe } from '@keycloakify/angular/lib/pipes/is-array-with-empty-object';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import type { ClassKey } from 'keycloakify/account';
+import type { I18n } from '@keycloakify/angular/account/i18n';
+import type { KcContext } from '@keycloakify/angular/account/KcContext';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, TemplateComponent, NgClass, KeyValuePipe, IsArrayWithEmptyObjectPipe],
+    selector: 'kc-root',
+    templateUrl: 'applications.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => ApplicationsComponent)
+        }
+    ]
+})
+export class ApplicationsComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    kcContext = inject<Extract<KcContext, { pageId: 'applications.ftl' }>>(KC_ACCOUNT_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+}

package/src/account/pages/applications/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/account/pages/federatedIdentity/federatedIdentity.component.ts

@@ -0,0 +1,31 @@
+import { NgClass } from '@angular/common';
+import { Component, forwardRef, inject } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+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 { ClassKey } from 'keycloakify/account';
+import type { I18n } from '@keycloakify/angular/account/i18n';
+import type { KcContext } from '@keycloakify/angular/account/KcContext';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, TemplateComponent, NgClass],
+    selector: 'kc-root',
+    templateUrl: 'federatedIdentity.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => FederatedIdentityComponent)
+        }
+    ]
+})
+export class FederatedIdentityComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    kcContext = inject<Extract<KcContext, { pageId: 'federatedIdentity.ftl' }>>(KC_ACCOUNT_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+}

package/src/account/pages/federatedIdentity/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/account/pages/log/log.component.ts

@@ -0,0 +1,31 @@
+import { DatePipe, NgClass } from '@angular/common';
+import { Component, forwardRef, inject } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+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 { ClassKey } from 'keycloakify/account';
+import type { I18n } from '@keycloakify/angular/account/i18n';
+import type { KcContext } from '@keycloakify/angular/account/KcContext';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, TemplateComponent, NgClass, DatePipe],
+    selector: 'kc-root',
+    templateUrl: 'log.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => LogComponent)
+        }
+    ]
+})
+export class LogComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    kcContext = inject<Extract<KcContext, { pageId: 'log.ftl' }>>(KC_ACCOUNT_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+}

package/src/account/pages/log/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/account/pages/password/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/account/pages/password/password.component.ts

@@ -0,0 +1,110 @@
+import { NgClass } from '@angular/common';
+import { Component, forwardRef, inject, signal } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+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 { ClassKey } from 'keycloakify/account';
+import type { I18n } from '@keycloakify/angular/account/i18n';
+import type { KcContext } from '@keycloakify/angular/account/KcContext';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, TemplateComponent, NgClass],
+    selector: 'kc-root',
+    templateUrl: 'password.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => PasswordComponent)
+        }
+    ]
+})
+export class PasswordComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    kcContext = inject<Extract<KcContext, { pageId: 'password.ftl' }>>(KC_ACCOUNT_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+    override additionalClasses: Partial<Record<ClassKey, string>> = {
+        kcBodyClass: `${this.classes?.kcBodyClass} password`
+    };
+
+    currentPassword = signal('');
+    newPassword = signal('');
+    newPasswordConfirm = signal('');
+    newPasswordError = signal('');
+    newPasswordConfirmError = signal('');
+    hasNewPasswordBlurred = signal(false);
+    hasNewPasswordConfirmBlurred = signal(false);
+
+    constructor() {
+        super();
+        // @ts-ignore
+        window.kcContext = {
+            ...this.kcContext,
+            message: (() => {
+                if (this.newPasswordError() !== '') {
+                    return {
+                        type: 'error',
+                        summary: this.newPasswordError()
+                    };
+                }
+                if (this.newPasswordConfirmError() !== '') {
+                    return {
+                        type: 'error',
+                        summary: this.newPasswordConfirmError()
+                    };
+                }
+                return this.kcContext.message;
+            })()
+        };
+    }
+
+    checkNewPassword(newPassword: string) {
+        if (!this.kcContext.password.passwordSet) return;
+        if (newPassword === this.currentPassword()) {
+            this.newPasswordError.set('newPasswordSameAsOld');
+        } else {
+            this.newPasswordError.set('');
+        }
+    }
+    checkNewPasswordConfirm(newPasswordConfirm: string) {
+        if (newPasswordConfirm === '') return;
+        if (newPasswordConfirm !== this.newPassword()) {
+            this.newPasswordConfirmError.set('passwordConfirmNotMatch');
+        } else {
+            this.newPasswordConfirmError.set('');
+        }
+    }
+
+    onNewPasswordChange(value: string) {
+        const newPassword = value;
+
+        this.newPassword.set(newPassword);
+        if (this.hasNewPasswordBlurred()) {
+            this.checkNewPassword(newPassword);
+        }
+    }
+
+    onNewPasswordBlur() {
+        this.hasNewPasswordBlurred.set(true);
+        this.checkNewPassword(this.newPassword());
+    }
+
+    onNewPasswordConfirmChange(value: string) {
+        const newPasswordConfirm = value;
+
+        this.newPasswordConfirm.set(newPasswordConfirm);
+        if (this.hasNewPasswordConfirmBlurred()) {
+            this.checkNewPasswordConfirm(newPasswordConfirm);
+        }
+    }
+
+    onNewPasswordConfirmBlur() {
+        this.hasNewPasswordConfirmBlurred.set(true);
+        this.checkNewPasswordConfirm(this.newPasswordConfirm());
+    }
+}

package/src/account/pages/sessions/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/account/pages/sessions/sessions.component.ts

@@ -0,0 +1,31 @@
+import { NgClass } from '@angular/common';
+import { Component, forwardRef, inject } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+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 { ClassKey } from 'keycloakify/account';
+import type { I18n } from '@keycloakify/angular/account/i18n';
+import type { KcContext } from '@keycloakify/angular/account/KcContext';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, TemplateComponent, NgClass],
+    selector: 'kc-root',
+    templateUrl: 'sessions.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => SessionsComponent)
+        }
+    ]
+})
+export class SessionsComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    kcContext = inject<Extract<KcContext, { pageId: 'sessions.ftl' }>>(KC_ACCOUNT_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+}

package/src/account/pages/totp/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/account/pages/totp/totp.component.ts

@@ -0,0 +1,32 @@
+import { NgClass } from '@angular/common';
+import { Component, forwardRef, inject } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+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 { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import type { ClassKey } from 'keycloakify/account';
+import type { I18n } from '@keycloakify/angular/account/i18n';
+import type { KcContext } from '@keycloakify/angular/account/KcContext';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, TemplateComponent, KcSanitizePipe, NgClass],
+    selector: 'kc-root',
+    templateUrl: 'totp.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => TotpComponent)
+        }
+    ]
+})
+export class TotpComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    kcContext = inject<Extract<KcContext, { pageId: 'totp.ftl' }>>(KC_ACCOUNT_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+}