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

package/src/login/DefaultPage/DefaultPage.ts

@@ -0,0 +1,208 @@
+import { Type } from '@angular/core';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { KcContext } from '@keycloakify/angular/login/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/src/login/DefaultPage/index.ts

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

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

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

package/src/login/KcContext/index.ts

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

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

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

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

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

package/src/login/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/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 '@keycloakify/angular/login/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/src/login/components/add-remove-buttons-multi-valued-attribute/index.ts

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

package/src/login/components/add-remove-buttons-multi-valued-attribute/ng-package.json

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

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

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

package/src/login/components/field-errors/ng-package.json

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

package/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 '@keycloakify/angular/login/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/src/login/components/group-label/index.ts

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

package/src/login/components/group-label/ng-package.json

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

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

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

package/src/login/components/input-field-by-type/ng-package.json

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

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

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

package/src/login/components/input-tag/input-tag.component.ts

@@ -0,0 +1,99 @@
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output } from '@angular/core';
+import { AttributesDirective } from '@keycloakify/angular/lib/directives/attributes';
+import { InputTypePipe } from '@keycloakify/angular/lib/pipes/input-type';
+import { ToArrayPipe } from '@keycloakify/angular/lib/pipes/to-array';
+import { ToNumberPipe } from '@keycloakify/angular/lib/pipes/to-number';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { AddRemoveButtonsMultiValuedAttributeComponent } from '@keycloakify/angular/login/components/add-remove-buttons-multi-valued-attribute';
+import { FieldErrorsComponent } from '@keycloakify/angular/login/components/field-errors';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import type { I18n } from '@keycloakify/angular/login/i18n';
+import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+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';
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [
+        InputTypePipe,
+        KcClassDirective,
+        ToNumberPipe,
+        AttributesDirective,
+        ToArrayPipe,
+        FieldErrorsComponent,
+        AddRemoveButtonsMultiValuedAttributeComponent
+    ],
+    selector: 'kc-input-tag',
+    templateUrl: 'input-tag.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => InputTagComponent)
+        }
+    ]
+})
+export class InputTagComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
+    attribute = input<Attribute>();
+    valueOrValues = input<string | string[]>();
+    fieldIndex = input<number | undefined>(undefined);
+    values = input<string[]>();
+    displayableErrors = input<FormFieldError[]>();
+    dispatchFormAction = output<FormAction>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
+
+    value = computed(() => {
+        const valueOrValues = this.valueOrValues();
+        const index = this.fieldIndex();
+        if (valueOrValues instanceof Array) {
+            if (index) {
+                return valueOrValues[index] ?? null;
+            }
+            return null;
+        }
+        return valueOrValues ?? null;
+    });
+
+    onChange(event: Event) {
+        const valueOrValues = this.valueOrValues();
+        this.dispatchFormAction.emit({
+            action: 'update',
+            name: this.attribute()?.name ?? '',
+            valueOrValues: (() => {
+                if (this.fieldIndex !== undefined) {
+                    if (valueOrValues instanceof Array) {
+                        return valueOrValues.map((value, i) => {
+                            if (i === this.fieldIndex()) {
+                                return (event.target as HTMLInputElement)?.value;
+                            }
+
+                            return value;
+                        });
+                    }
+                }
+
+                return (event.target as HTMLInputElement)?.value;
+            })()
+        });
+    }
+
+    onBlur() {
+        this.dispatchFormAction.emit({
+            action: 'focus lost',
+            name: this.attribute()?.name ?? '',
+            fieldIndex: this.fieldIndex()
+        });
+    }
+}

package/src/login/components/input-tag/ng-package.json

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

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

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