@keycloakify/angular 0.0.1-rc.12 → 0.0.1-rc.15

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/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

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/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

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);
+}

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

@@ -0,0 +1 @@
+export * from './public-api';

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

@@ -0,0 +1,64 @@
+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 };
+    getI18n: (params: { kcContext: KcContextLike }) => {
+        i18n: unknown;
+        prI18n_currentLanguage: Promise<unknown> | undefined;
+    };
+};
+
+export const provideKeycloakifyAngularAccount = (
+    config: KeycloakifyAngularAccountConfig
+) =>
+    makeEnvironmentProviders([
+        {
+            provide: KC_ACCOUNT_CONTEXT,
+            // @ts-ignore
+            useValue: window.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/providers/keycloakify-angular/ng-package.json

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

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 './public-api';

package/src/account/services/account-resource-injector/ng-package.json

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

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

@@ -0,0 +1 @@
+export * from './public-api';

package/src/account/services/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/tokens/classes/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/account/tokens/classes/ng-package.json

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

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

@@ -0,0 +1 @@
+export * from './public-api';

package/src/account/tokens/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/tokens/kc-context/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

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/account/tokens/kc-context/ng-package.json

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

package/src/lib/directives/attributes/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/directives/attributes/ng-package.json

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

package/src/lib/models/script/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/models/script/ng-package.json

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

package/src/lib/ng-package.json

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

package/src/lib/pipes/input-type/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/pipes/input-type/ng-package.json

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

package/src/lib/pipes/is-array-with-empty-object/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/pipes/is-array-with-empty-object/is-array-with-empty-object.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'isArrayWithEmptyObject',
+    standalone: true
+})
+export class IsArrayWithEmptyObjectPipe implements PipeTransform {
+    transform(variable: unknown): boolean {
+        return (
+            Array.isArray(variable) &&
+            variable.length === 1 &&
+            typeof variable[0] === 'object' &&
+            Object.keys(variable[0]).length === 0
+        );
+    }
+}

package/src/lib/pipes/is-array-with-empty-object/ng-package.json

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

package/src/lib/pipes/kc-sanitize/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/pipes/kc-sanitize/ng-package.json

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

package/src/lib/pipes/to-array/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/pipes/to-array/ng-package.json

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

package/src/lib/pipes/to-array/to-array.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'toArray',
+    standalone: true
+})
+export class ToArrayPipe implements PipeTransform {
+    transform(value: string | string[], emptyWhenString = false): string[] {
+        // if (!value) throw new Error('must pass a value');
+        if (value instanceof Array) {
+            return value;
+        }
+        return emptyWhenString ? [] : [value];
+    }
+}

package/src/lib/pipes/to-number/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/pipes/to-number/ng-package.json

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

package/src/lib/pipes/to-number/to-number.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'toNumber',
+    standalone: true
+})
+export class ToNumberPipe implements PipeTransform {
+    transform(value: string | number): number {
+        const number = parseInt(`${value}`);
+        if (isNaN(number)) throw new Error('number is NaN');
+        return number;
+    }
+}

package/src/lib/public-api.ts

@@ -0,0 +1 @@
+export const KEYCLOAKIFY_ANGULAR_LIB = '@keycloakify/angular/lib';

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

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/services/resource-injector/ng-package.json

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

package/src/lib/tokens/use-default-css/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/tokens/use-default-css/ng-package.json

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