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

package/dist/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/dist/src/lib/pipes/kc-sanitize/index.ts

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

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

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

package/dist/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/dist/src/lib/pipes/to-number/index.ts

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

package/dist/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/dist/src/lib/services/resource-injector/index.ts

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

package/dist/src/lib/services/resource-injector/resource-injector.service.ts

@@ -0,0 +1,50 @@
+import { inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Script } from '@keycloakify/angular/lib/models/script';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ResourceInjectorService {
+    private renderer: Renderer2 = inject(RendererFactory2).createRenderer(null, null);
+
+    createLink(url: string): Observable<void> {
+        return new Observable<void>(observer => {
+            // check if the style is already injected
+            if (Array.from(document.styleSheets).some(s => s.href?.includes(url))) {
+                observer.next();
+                observer.complete();
+                console.debug(`stylesheet: ${url} already loaded`);
+                return;
+            }
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = url;
+
+            link.onload = () => {
+                observer.next();
+                observer.complete();
+            };
+
+            link.onerror = () => {
+                observer.error(new Error(`Failed to load stylesheet: ${url}`));
+            };
+
+            this.renderer.appendChild(document.head, link);
+        });
+    }
+    createScript({ type, id, src, textContent }: Script): void {
+        // check if the script is already injected
+        if (Array.from(document.scripts).some(s => s.id?.includes(id))) {
+            console.debug(`script: ${src} already injected`);
+            return;
+        }
+        const script = document.createElement('script');
+        script.type = type;
+        if (src) script.src = src;
+        if (textContent) script.textContent = textContent;
+        script.id = id;
+
+        this.renderer.appendChild(document.head, script);
+    }
+}

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

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

package/dist/src/login/DefaultPage.ts

@@ -0,0 +1,208 @@
+import { Type } from '@angular/core';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { KcContext } from 'KcContext';
+
+const DefaultPage = async (
+    pageId: KcContext['pageId'],
+    doMakeUserConfirmPassword = true,
+    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 'login.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login'
+            ).then(c => c.LoginComponent);
+            break;
+        case 'login-username.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-username'
+            ).then(c => c.LoginUsernameComponent);
+            break;
+        case 'login-password.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-password'
+            ).then(c => c.LoginPasswordComponent);
+            break;
+        case 'webauthn-authenticate.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/webauthn-authenticate'
+            ).then(c => c.WebauthnAuthenticateComponent);
+            break;
+        case 'webauthn-register.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/webauthn-register'
+            ).then(c => c.WebauthnRegisterComponent);
+            break;
+        case 'register.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/register'
+            ).then(c => c.RegisterComponent);
+            break;
+        case 'info.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/info'
+            ).then(c => c.InfoComponent);
+            break;
+        case 'error.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/error'
+            ).then(c => c.ErrorComponent);
+            break;
+        case 'login-reset-password.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-reset-password'
+            ).then(c => c.LoginResetPasswordComponent);
+            break;
+        case 'login-verify-email.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-verify-email'
+            ).then(c => c.LoginVerifyEmailComponent);
+            break;
+        case 'terms.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/terms'
+            ).then(c => c.TermsComponent);
+            break;
+        case 'login-oauth2-device-verify-user-code.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-oauth2-device-verify-user-code'
+            ).then(c => c.LoginOauth2DeviceVerifyUserCodeComponent);
+            break;
+        case 'login-oauth-grant.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-oauth-grant'
+            ).then(c => c.LoginOauthGrantComponent);
+            break;
+        case 'login-otp.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-otp'
+            ).then(c => c.LoginOtpComponent);
+
+            break;
+        case 'login-update-profile.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-update-profile'
+            ).then(c => c.LoginUpdateProfileComponent);
+            break;
+        case 'login-update-password.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-update-password'
+            ).then(c => c.LoginUpdatePasswordComponent);
+            break;
+        case 'login-idp-link-confirm.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-idp-link-confirm'
+            ).then(c => c.LoginIdpLinkConfirmComponent);
+            break;
+        case 'login-idp-link-email.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-idp-link-email'
+            ).then(c => c.LoginIdpLinkEmailComponent);
+            break;
+        case 'login-page-expired.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-page-expired'
+            ).then(c => c.LoginPageExpiredComponent);
+            break;
+        case 'login-config-totp.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-config-totp'
+            ).then(c => c.LoginConfigTotpComponent);
+            break;
+        case 'logout-confirm.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/logout-confirm'
+            ).then(c => c.LogoutConfirmComponent);
+            break;
+        case 'idp-review-user-profile.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/idp-review-user-profile'
+            ).then(c => c.IdpReviewUserProfileComponent);
+            break;
+        case 'update-email.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/update-email'
+            ).then(c => c.UpdateEmailComponent);
+            break;
+        case 'select-authenticator.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/select-authenticator'
+            ).then(c => c.SelectAuthenticatorComponent);
+            break;
+        case 'saml-post-form.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/saml-post-form'
+            ).then(c => c.SamlPostFormComponent);
+            break;
+        case 'delete-credential.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/delete-credential'
+            ).then(c => c.DeleteCredentialComponent);
+            break;
+        case 'code.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/code'
+            ).then(c => c.CodeComponent);
+            break;
+        case 'delete-account-confirm.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/delete-account-confirm'
+            ).then(c => c.DeleteAccountConfirmComponent);
+            break;
+        case 'frontchannel-logout.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/frontchannel-logout'
+            ).then(c => c.FrontchannelLogoutComponent);
+            break;
+        case 'login-recovery-authn-code-config.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-recovery-authn-code-config'
+            ).then(c => c.LoginRecoveryAuthnCodeConfigComponent);
+            break;
+        case 'login-recovery-authn-code-input.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-recovery-authn-code-input'
+            ).then(c => c.LoginRecoveryAuthnCodeInputComponent);
+            break;
+        case 'login-reset-otp.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-reset-otp'
+            ).then(c => c.LoginResetOtpComponent);
+            break;
+        case 'login-x509-info.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-x509-info'
+            ).then(c => c.LoginX509InfoComponent);
+            break;
+        case 'webauthn-error.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/webauthn-error'
+            ).then(c => c.WebauthnErrorComponent);
+            break;
+        case 'login-passkeys-conditional-authenticate.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-passkeys-conditional-authenticate'
+            ).then(c => c.LoginPasskeysConditionalAuthenticateComponent);
+            break;
+        case 'login-idp-link-confirm-override.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-idp-link-confirm-override'
+            ).then(c => c.LoginIdpLinkConfirmOverrideComponent);
+            break;
+    }
+    return ComponentBootstrapPromise?.then(ComponentBootstrap => ({
+        ComponentBootstrap,
+        doMakeUserConfirmPassword,
+        doUseDefaultCss,
+        classes
+    }));
+};
+
+export { DefaultPage };

package/dist/src/login/classes/component-reference/component-reference.class.ts

@@ -0,0 +1,5 @@
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+export abstract class ComponentReference {
+    doUseDefaultCss: boolean | undefined;
+    classes: Partial<Record<ClassKey, string>> | undefined;
+}

package/dist/src/login/classes/component-reference/index.ts

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

package/dist/src/login/components/add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component.ts

@@ -0,0 +1,136 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
+import { type FormAction } from '@keycloakify/angular/login/services/user-profile-form';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import type { I18n } from '../../i18n';
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [],
+    selector: 'kc-add-remove-buttons-multi-valued-attribute',
+    templateUrl: 'add-remove-buttons-multi-valued-attribute.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AddRemoveButtonsMultiValuedAttributeComponent {
+    i18n = inject<I18n>(LOGIN_I18N);
+    attribute = input<Attribute>();
+    values = input<string[]>();
+    fieldIndex = input<number>();
+    dispatchFormAction = output<FormAction>();
+
+    hasRemove = computed(() => {
+        const attribute = this.attribute();
+        const values = this.values();
+        const fieldIndex = this.fieldIndex();
+        if (attribute && values && fieldIndex) {
+            return this.getButtonToDisplayForMultivaluedAttributeField({
+                attribute,
+                values,
+                fieldIndex
+            }).hasRemove;
+        }
+        return false;
+    });
+    hasAdd = computed(() => {
+        const attribute = this.attribute();
+        const values = this.values();
+        const fieldIndex = this.fieldIndex();
+        if (attribute && values && fieldIndex) {
+            return this.getButtonToDisplayForMultivaluedAttributeField({
+                attribute,
+                values,
+                fieldIndex
+            }).hasAdd;
+        }
+        return false;
+    });
+
+    onAdd() {
+        this.dispatchFormAction.emit({
+            action: 'update',
+            name: this.attribute()?.name ?? '',
+            valueOrValues: [...(this.values() ?? []), '']
+        });
+    }
+
+    onRemove() {
+        this.dispatchFormAction.emit({
+            action: 'update',
+            name: this.attribute()?.name ?? '',
+            valueOrValues: (this.values() ?? []).filter((_, i) => i !== this.fieldIndex())
+        });
+    }
+
+    private getButtonToDisplayForMultivaluedAttributeField(params: { attribute: Attribute; values: string[]; fieldIndex: number }) {
+        const { attribute, values, fieldIndex } = params;
+
+        const hasRemove = (() => {
+            if (values.length === 1) {
+                return false;
+            }
+
+            const minCount = (() => {
+                const { multivalued } = attribute.validators;
+
+                if (multivalued === undefined) {
+                    return undefined;
+                }
+
+                const minStr = multivalued.min;
+
+                if (minStr === undefined) {
+                    return undefined;
+                }
+
+                return parseInt(`${minStr}`);
+            })();
+
+            if (minCount === undefined) {
+                return true;
+            }
+
+            if (values.length === minCount) {
+                return false;
+            }
+
+            return true;
+        })();
+
+        const hasAdd = (() => {
+            if (fieldIndex + 1 !== values.length) {
+                return false;
+            }
+
+            const maxCount = (() => {
+                const { multivalued } = attribute.validators;
+
+                if (multivalued === undefined) {
+                    return undefined;
+                }
+
+                const maxStr = multivalued.max;
+
+                if (maxStr === undefined) {
+                    return undefined;
+                }
+
+                return parseInt(`${maxStr}`);
+            })();
+
+            if (maxCount === undefined) {
+                return true;
+            }
+
+            return values.length !== maxCount;
+        })();
+
+        return { hasRemove, hasAdd };
+    }
+}

package/dist/src/login/components/add-remove-buttons-multi-valued-attribute/index.ts

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

package/dist/src/login/components/field-errors/field-errors.component.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input } from '@angular/core';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import { type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [KcClassDirective],
+    selector: 'kc-field-errors',
+    templateUrl: 'field-errors.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => FieldErrorsComponent)
+        }
+    ]
+})
+export class FieldErrorsComponent extends ComponentReference {
+    attribute = input<Attribute>();
+    displayableErrors = input<FormFieldError[]>();
+    fieldIndex = input<number>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
+}

package/dist/src/login/components/field-errors/index.ts

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

package/dist/src/login/components/group-label/group-label.component.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input } from '@angular/core';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { AttributesDirective } from '@keycloakify/angular/lib/directives/attributes';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../../i18n';
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [KcClassDirective, AttributesDirective],
+    selector: 'kc-group-label',
+    templateUrl: 'group-label.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => GroupLabelComponent)
+        }
+    ]
+})
+export class GroupLabelComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
+    attribute = input<Attribute>();
+    groupName = input<string>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
+    groupNameRef = computed(() => {
+        const attribute = this.attribute();
+        const groupName = this.groupName();
+        if (attribute?.group?.name !== groupName) {
+            return attribute?.group?.name ?? '';
+        }
+        return '';
+    });
+}

package/dist/src/login/components/group-label/index.ts

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

package/dist/src/login/components/input-field-by-type/index.ts

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

package/dist/src/login/components/input-field-by-type/input-field-by-type.component.ts

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output } from '@angular/core';
+import { ToArrayPipe } from '@keycloakify/angular/lib/pipes/to-array';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { InputTagComponent } from '@keycloakify/angular/login/components/input-tag';
+import { InputTagSelectsComponent } from '@keycloakify/angular/login/components/input-tag-selects';
+import { PasswordWrapperComponent } from '@keycloakify/angular/login/components/password-wrapper';
+import { SelectTagComponent } from '@keycloakify/angular/login/components/select-tag';
+import { TextareaTagComponent } from '@keycloakify/angular/login/components/textarea-tag';
+import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [ToArrayPipe, TextareaTagComponent, SelectTagComponent, InputTagSelectsComponent, InputTagComponent, PasswordWrapperComponent],
+    selector: 'kc-input-field-by-type',
+    templateUrl: 'input-field-by-type.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => InputFieldByTypeComponent)
+        }
+    ]
+})
+export class InputFieldByTypeComponent extends ComponentReference {
+    attribute = input<Attribute>();
+    valueOrValues = input<string | string[]>();
+    displayableErrors = input<FormFieldError[]>();
+    dispatchFormAction = output<FormAction>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
+
+    attributePassword = computed<Attribute>(() => {
+        const attribute: Attribute = this.attribute() ?? ({} as Attribute);
+        return {
+            ...attribute,
+            annotations: { ...(attribute.annotations ?? {}), inputType: 'password' }
+        };
+    });
+}

package/dist/src/login/components/input-tag/index.ts

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