@keycloakify/angular 0.0.1-rc.0

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

@@ -0,0 +1,50 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    forwardRef,
+    inject,
+    input
+} from "@angular/core";
+import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
+import { Attribute } from "keycloakify/login/KcContext";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { AttributesDirective } from "@keycloakify/angular/login/directives/attributes.directive";
+import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
+import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes/advanced-msg-str.pipe";
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [KcClassDirective, AttributesDirective, AdvancedMsgStrPipe],
+    selector: "kc-group-label",
+    templateUrl: "group-label.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => GroupLabelComponent)
+        }
+    ]
+})
+export class GroupLabelComponent extends ComponentReference {
+    attribute = input<Attribute>();
+    groupName = input<string>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(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/index.ts

@@ -0,0 +1,11 @@
+export * from "./add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component";
+export * from "./field-errors/field-errors.component";
+export * from "./group-label/group-label.component";
+export * from "./input-field-by-type/input-field-by-type.component";
+export * from "./input-tag/input-tag.component";
+export * from "./input-tag-selects/input-tag-selects.component";
+export * from "./logout-other-sessions/logout-other-sessions.component";
+export * from "./password-wrapper/password-wrapper.component";
+export * from "./select-tag/select-tag.component";
+export * from "./textarea-tag/textarea-tag.component";
+export * from "./user-profile-form-fields/user-profile-form-fields.component";

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

@@ -0,0 +1,63 @@
+@let attr = attribute();
+@if (attr) {
+  @let type = attr.annotations.inputType;
+  @switch (type) {
+    @case ('textarea') {
+      <kc-textarea-tag
+        [attribute]="attribute()"
+        [value]="$any(valueOrValues())"
+        [displayableErrors]="displayableErrors()"
+        (dispatchFormAction)="dispatchFormAction.emit($event)"
+      ></kc-textarea-tag>
+    }
+    @case (type === 'select' || type === 'multiselect' ? type : '') {
+      <kc-select-tag
+        [attribute]="attribute()"
+        [valueOrValues]="valueOrValues()"
+        [displayableErrors]="displayableErrors()"
+        (dispatchFormAction)="dispatchFormAction.emit($event)"
+      ></kc-select-tag>
+    }
+    @case (type === 'select-radiobuttons' || type === 'multiselect-checkboxes' ? type : '') {
+      <kc-input-tag-selects
+        [attribute]="attribute()"
+        [valueOrValues]="valueOrValues()"
+        [displayableErrors]="displayableErrors()"
+        (dispatchFormAction)="dispatchFormAction.emit($event)"
+      ></kc-input-tag-selects>
+    }
+    @default {
+      @let values = valueOrValues();
+      <!-- if valueOrValues is string skip -->
+      @if (values && (values | toArray: true).length) {
+        @for (value of values; track value; let i = $index) {
+          <kc-input-tag
+            [attribute]="attribute()"
+            [valueOrValues]="valueOrValues()"
+            [fieldIndex]="i"
+            [displayableErrors]="displayableErrors()"
+            (dispatchFormAction)="dispatchFormAction.emit($event)"
+          ></kc-input-tag>
+        }
+      } @else {
+        @if (attr.name === 'password' || attr.name === 'password-confirm') {
+          <kc-password-wrapper [passwordInputId]="attr.name">
+            <kc-input-tag
+              [attribute]="attributePassword()"
+              [valueOrValues]="valueOrValues()"
+              [displayableErrors]="displayableErrors()"
+              (dispatchFormAction)="dispatchFormAction.emit($event)"
+            ></kc-input-tag>
+          </kc-password-wrapper>
+        } @else {
+          <kc-input-tag
+            [attribute]="attribute()"
+            [valueOrValues]="valueOrValues()"
+            [displayableErrors]="displayableErrors()"
+            (dispatchFormAction)="dispatchFormAction.emit($event)"
+          ></kc-input-tag>
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    forwardRef,
+    inject,
+    input,
+    output
+} from "@angular/core";
+import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
+import { Attribute } from "keycloakify/login/KcContext";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { ToArrayPipe } from "@keycloakify/angular/login/pipes/to-array.pipe";
+import {
+    FormAction,
+    FormFieldError
+} from "@keycloakify/angular/login/services/user-profile-form.service";
+import { InputTagSelectsComponent } from "@keycloakify/angular/login/components/input-tag-selects/input-tag-selects.component";
+import { InputTagComponent } from "@keycloakify/angular/login/components/input-tag/input-tag.component";
+import { PasswordWrapperComponent } from "@keycloakify/angular/login/components/password-wrapper/password-wrapper.component";
+import { SelectTagComponent } from "@keycloakify/angular/login/components/select-tag/select-tag.component";
+import { TextareaTagComponent } from "@keycloakify/angular/login/components/textarea-tag/textarea-tag.component";
+
+@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>>>(CLASSES);
+
+    attributePassword = computed<Attribute>(() => {
+        const attribute: Attribute = this.attribute() ?? ({} as Attribute);
+        return {
+            ...attribute,
+            annotations: { ...(attribute.annotations ?? {}), inputType: "password" }
+        };
+    });
+}

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

@@ -0,0 +1,49 @@
+@let attr = attribute();
+@let index = fieldIndex();
+@if (attr) {
+  <input
+    [type]="attr.annotations.inputType | inputType"
+    [id]="attr.name"
+    [name]="attr.name"
+    [value]="value()"
+    [kcClass]="'kcInputClass'"
+    [attr.aria-invalid]="index && displayableErrors()?.[index] !== undefined"
+    [disabled]="attr.readOnly"
+    [autocomplete]="attr.autocomplete"
+    [placeholder]="attr.annotations.inputTypePlaceholder ?? '' | advancedMsgStr"
+    [attr.pattern]="attr.annotations.inputTypePattern"
+    [attr.size]="
+      !attr.annotations.inputTypeSize
+        ? undefined
+        : (attr.annotations.inputTypeSize | toNumber) === 0
+          ? undefined
+          : (attr.annotations.inputTypeSize | toNumber)
+    "
+    [attr.maxlength]="
+      !attr.annotations.inputTypeMaxlength ? undefined : (attr.annotations.inputTypeMaxlength | toNumber)
+    "
+    [attr.minlength]="
+      !attr.annotations.inputTypeMinlength ? undefined : (attr.annotations.inputTypeMinlength | toNumber)
+    "
+    [attr.max]="attr.annotations.inputTypeMax"
+    [attr.min]="attr.annotations.inputTypeMin"
+    [attr.step]="attr.annotations.inputTypeStep"
+    [kcAttributes]="attr.html5DataAnnotations"
+    (change)="onChange($event)"
+    (blur)="onBlur()"
+  />
+  @if (index !== undefined) {
+    @let values = valueOrValues() ?? [] | toArray;
+    <kc-field-errors
+      [attribute]="attr"
+      [displayableErrors]="displayableErrors()"
+      [fieldIndex]="index"
+    ></kc-field-errors>
+    <kc-add-remove-buttons-multi-valued-attribute
+      [attribute]="attr"
+      [values]="values"
+      [fieldIndex]="index"
+      (dispatchFormAction)="dispatchFormAction.emit($event)"
+    ></kc-add-remove-buttons-multi-valued-attribute>
+  }
+}

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

@@ -0,0 +1,108 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    forwardRef,
+    inject,
+    input,
+    output
+} from "@angular/core";
+import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
+import { Attribute } from "keycloakify/login/KcContext";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { AttributesDirective } from "@keycloakify/angular/login/directives/attributes.directive";
+import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
+import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes/advanced-msg-str.pipe";
+import { InputTypePipe } from "@keycloakify/angular/login/pipes/input-type.pipe";
+import { ToArrayPipe } from "@keycloakify/angular/login/pipes/to-array.pipe";
+import { ToNumberPipe } from "@keycloakify/angular/login/pipes/to-number.pipe";
+import {
+    FormAction,
+    FormFieldError
+} from "@keycloakify/angular/login/services/user-profile-form.service";
+import { AddRemoveButtonsMultiValuedAttributeComponent } from "@keycloakify/angular/login/components/add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component";
+import { FieldErrorsComponent } from "@keycloakify/angular/login/components/field-errors/field-errors.component";
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [
+        InputTypePipe,
+        KcClassDirective,
+        ToNumberPipe,
+        AttributesDirective,
+        ToArrayPipe,
+        FieldErrorsComponent,
+        AddRemoveButtonsMultiValuedAttributeComponent,
+        AdvancedMsgStrPipe
+    ],
+    selector: "kc-input-tag",
+    templateUrl: "input-tag.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => InputTagComponent)
+        }
+    ]
+})
+export class InputTagComponent extends ComponentReference {
+    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>>>(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-selects/input-tag-selects.component.html

@@ -0,0 +1,29 @@
+@let inputType = context()?.inputType;
+@let classInput = context()?.classInput;
+@let classLabel = context()?.classLabel;
+@let classDiv = context()?.classDiv;
+@let attr = attribute();
+@if (attr) {
+  @for (option of options(); track option) {
+    <div [kcClass]="classDiv">
+      <input
+        [type]="inputType"
+        [id]="attr.name + '-' + option"
+        [name]="attr.name"
+        [value]="option"
+        [kcClass]="classInput"
+        [attr.aria-invalid]="!!displayableErrors()?.length"
+        [disabled]="attr.readOnly"
+        [checked]="checked(option)"
+        (change)="onChange($event, option)"
+        (blur)="onBlur()"
+      />
+      <label
+        [for]="attr.name + '-' + option"
+        [kcClass]="[classLabel!, attr.readOnly ? 'kcInputClassRadioCheckboxLabelDisabled' : $any('')]"
+      >
+        {{ option | advancedMsgStr }}
+      </label>
+    </div>
+  }
+}

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

@@ -0,0 +1,150 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    forwardRef,
+    inject,
+    input,
+    output,
+    Signal
+} from "@angular/core";
+import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
+import { Attribute } from "keycloakify/login/KcContext";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
+import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes/advanced-msg-str.pipe";
+import {
+    FormAction,
+    FormFieldError
+} from "@keycloakify/angular/login/services/user-profile-form.service";
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [KcClassDirective, AdvancedMsgStrPipe],
+    selector: "kc-input-tag-selects",
+    templateUrl: "input-tag-selects.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => InputTagSelectsComponent)
+        }
+    ]
+})
+export class InputTagSelectsComponent extends ComponentReference {
+    attribute = input<Attribute>();
+    valueOrValues = input<string | string[]>();
+    dispatchFormAction = output<FormAction>();
+    displayableErrors = input<FormFieldError[]>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+
+    context: Signal<{
+        inputType: "radio" | "checkbox";
+        classDiv: ClassKey;
+        classInput: ClassKey;
+        classLabel: ClassKey;
+    } | null> = computed(() => {
+        const attribute = this.attribute();
+        if (attribute) {
+            const { inputType } = attribute.annotations;
+            switch (inputType) {
+                case "select-radiobuttons":
+                    return {
+                        inputType: "radio",
+                        classDiv: "kcInputClassRadio",
+                        classInput: "kcInputClassRadioInput",
+                        classLabel: "kcInputClassRadioLabel"
+                    };
+                case "multiselect-checkboxes":
+                    return {
+                        inputType: "checkbox",
+                        classDiv: "kcInputClassCheckbox",
+                        classInput: "kcInputClassCheckboxInput",
+                        classLabel: "kcInputClassCheckboxLabel"
+                    };
+            }
+        }
+        return null;
+    });
+
+    options = computed(() => {
+        const attribute = this.attribute();
+        if (attribute) {
+            return (() => {
+                walk: {
+                    const { inputOptionsFromValidation } = attribute.annotations;
+
+                    if (inputOptionsFromValidation === undefined) {
+                        break walk;
+                    }
+
+                    const validator = (
+                        attribute.validators as Record<string, { options?: string[] }>
+                    )[inputOptionsFromValidation];
+
+                    if (validator === undefined) {
+                        break walk;
+                    }
+
+                    if (validator.options === undefined) {
+                        break walk;
+                    }
+
+                    return validator.options;
+                }
+
+                return attribute.validators.options?.options ?? [];
+            })();
+        }
+        return [];
+    });
+
+    checked(option: string) {
+        const valueOrValues = this.valueOrValues();
+        if (valueOrValues instanceof Array) {
+            return valueOrValues.includes(option);
+        }
+        return valueOrValues === option;
+    }
+
+    onChange(event: Event, option: string) {
+        const valueOrValues = this.valueOrValues();
+        const isChecked = (event.target as HTMLInputElement).checked;
+        this.dispatchFormAction.emit({
+            action: "update",
+            name: this.attribute()?.name ?? "",
+            valueOrValues: (() => {
+                if (valueOrValues instanceof Array) {
+                    const newValues = [...valueOrValues];
+
+                    if (isChecked) {
+                        newValues.push(option);
+                    } else {
+                        newValues.splice(newValues.indexOf(option), 1);
+                    }
+
+                    return newValues;
+                }
+
+                return (event.target as HTMLInputElement)?.checked ? option : "";
+            })()
+        });
+    }
+
+    onBlur() {
+        this.dispatchFormAction.emit({
+            action: "focus lost",
+            name: this.attribute()?.name ?? "",
+            fieldIndex: undefined
+        });
+    }
+}

package/src/login/components/logout-other-sessions/logout-other-sessions.component.html

@@ -0,0 +1,19 @@
+<div
+  id="kc-form-options"
+  [kcClass]="'kcFormOptionsClass'"
+>
+  <div [kcClass]="'kcFormOptionsWrapperClass'">
+    <div class="checkbox">
+      <label for="logout-sessions">
+        <input
+          type="checkbox"
+          id="logout-sessions"
+          name="logout-sessions"
+          value="on"
+          defaultChecked="true"
+        />
+        {{ 'logoutOtherSessions' | msgStr }}
+      </label>
+    </div>
+  </div>
+</div>

package/src/login/components/logout-other-sessions/logout-other-sessions.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from "@angular/core";
+import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+
+@Component({
+    selector: "kc-logout-other-sessions",
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    standalone: true,
+    imports: [KcClassDirective, MsgStrPipe],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: "./logout-other-sessions.component.html",
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => LogoutOtherSessionsComponent)
+        }
+    ]
+})
+export class LogoutOtherSessionsComponent extends ComponentReference {
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+}

package/src/login/components/password-wrapper/password-wrapper.component.html

@@ -0,0 +1,15 @@
+<div [kcClass]="'kcInputGroup'">
+  <ng-content></ng-content>
+  <button
+    type="button"
+    [kcClass]="'kcFormPasswordVisibilityButtonClass'"
+    [attr.aria-label]="(isPasswordRevealed() ? 'hidePassword' : 'showPassword') | msgStr"
+    [attr.aria-controls]="passwordInputId()"
+    (click)="togglePasswordVisibility()"
+  >
+    <i
+      [kcClass]="isPasswordRevealed() ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow'"
+      aria-hidden="true"
+    ></i>
+  </button>
+</div>

package/src/login/components/password-wrapper/password-wrapper.component.ts

@@ -0,0 +1,61 @@
+import { AsyncPipe } from "@angular/common";
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input,
+    Renderer2,
+    signal,
+    WritableSignal
+} from "@angular/core";
+import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+
+@Component({
+    selector: "kc-password-wrapper",
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [KcClassDirective, AsyncPipe, MsgStrPipe],
+    templateUrl: "./password-wrapper.component.html",
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => PasswordWrapperComponent)
+        }
+    ]
+})
+export class PasswordWrapperComponent extends ComponentReference {
+    private renderer = inject(Renderer2);
+    passwordInputId = input.required<string>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+
+    isPasswordRevealed: WritableSignal<boolean> = signal(false);
+
+    togglePasswordVisibility(): void {
+        this.isPasswordRevealed.update(revealed => !revealed);
+        this.setPasswordInputType();
+    }
+
+    private setPasswordInputType(): void {
+        const input = document.getElementById(this.passwordInputId());
+        if (input) {
+            this.renderer.setProperty(
+                input,
+                "type",
+                this.isPasswordRevealed() ? "text" : "password"
+            );
+        }
+    }
+}