@keycloakify/angular 0.0.1-rc.0

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

@@ -0,0 +1,31 @@
+@let attr = attribute();
+@let multiple = isMultiple();
+@if (attr) {
+  <select
+    [id]="attr.name"
+    [name]="attr.name"
+    [value]="valueOrValues()"
+    [kcClass]="'kcInputClass'"
+    [attr.aria-invalid]="!!displayableErrors()?.length"
+    [disabled]="attr.readOnly"
+    [multiple]="multiple"
+    [size]="!attr.annotations.inputTypeSize ? undefined : (attr.annotations.inputTypeSize | toNumber)"
+    (change)="onChange($event)"
+    (blur)="onBlur()"
+  >
+    @if (!multiple) {
+      <option value=""></option>
+    }
+    @for (option of options(); track option) {
+      <option [value]="option">
+        @if (!!attr.annotations.inputOptionLabels) {
+          {{ attr.annotations.inputOptionLabels[option] ?? option | advancedMsgStr }}
+        } @else if (!!attr.annotations.inputOptionLabelsI18nPrefix) {
+          {{ attr.annotations.inputOptionLabelsI18nPrefix + '.' + option | advancedMsgStr }}
+        } @else {
+          {{ option }}
+        }
+      </option>
+    }
+  </select>
+}

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

@@ -0,0 +1,109 @@
+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 { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
+import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes/advanced-msg-str.pipe";
+import { ToNumberPipe } from "@keycloakify/angular/login/pipes/to-number.pipe";
+import {
+    FormAction,
+    FormFieldError
+} from "@keycloakify/angular/login/services/user-profile-form.service";
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [KcClassDirective, ToNumberPipe, AdvancedMsgStrPipe],
+    selector: "kc-select-tag",
+    templateUrl: "select-tag.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => SelectTagComponent)
+        }
+    ]
+})
+export class SelectTagComponent 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);
+
+    isMultiple = computed(() => {
+        return this.attribute()?.annotations?.inputType === "multiselect";
+    });
+
+    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 [];
+    });
+
+    onChange(event: Event) {
+        this.dispatchFormAction.emit({
+            action: "update",
+            name: this.attribute()?.name ?? "",
+            valueOrValues: (() => {
+                if (this.isMultiple()) {
+                    return Array.from(
+                        (event.target as HTMLSelectElement).selectedOptions
+                    ).map(option => option.value);
+                }
+
+                return (event.target as HTMLSelectElement).value;
+            })()
+        });
+    }
+
+    onBlur() {
+        this.dispatchFormAction.emit({
+            action: "focus lost",
+            name: this.attribute()?.name ?? "",
+            fieldIndex: undefined
+        });
+    }
+}

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

@@ -0,0 +1,18 @@
+@let attr = attribute();
+@if (attr) {
+  <textarea
+    [id]="attr.name"
+    [name]="attr.name"
+    [kcClass]="'kcInputClass'"
+    [attr.aria-invalid]="!!displayableErrors()?.length"
+    [disabled]="attr.readOnly"
+    [cols]="attr.annotations.inputTypeCols === undefined ? undefined : (attr.annotations.inputTypeCols | toNumber)"
+    [rows]="attr.annotations.inputTypeRows === undefined ? undefined : (attr.annotations.inputTypeRows | toNumber)"
+    [maxLength]="
+      attr.annotations.inputTypeMaxlength === undefined ? undefined : (attr.annotations.inputTypeMaxlength | toNumber)
+    "
+    [value]="value()"
+    (change)="onChange($event)"
+    (blur)="onBlur()"
+  ></textarea>
+}

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

@@ -0,0 +1,63 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    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 { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
+import { ToNumberPipe } from "@keycloakify/angular/login/pipes/to-number.pipe";
+import {
+    FormAction,
+    FormFieldError
+} from "@keycloakify/angular/login/services/user-profile-form.service";
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [KcClassDirective, ToNumberPipe],
+    selector: "kc-textarea-tag",
+    templateUrl: "textarea-tag.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => TextareaTagComponent)
+        }
+    ]
+})
+export class TextareaTagComponent extends ComponentReference {
+    attribute = input<Attribute>();
+    value = input<string>();
+    displayableErrors = input<FormFieldError[]>();
+    dispatchFormAction = output<FormAction>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+
+    onChange(event: Event) {
+        this.dispatchFormAction.emit({
+            action: "update",
+            name: this.attribute()?.name ?? "",
+            valueOrValues: (event.target as HTMLTextAreaElement).value
+        });
+    }
+
+    onBlur() {
+        this.dispatchFormAction.emit({
+            action: "focus lost",
+            name: this.attribute()?.name ?? "",
+            fieldIndex: undefined
+        });
+    }
+}

package/src/login/components/user-profile-form-fields/user-profile-form-fields.component.html

@@ -0,0 +1,85 @@
+@let formFieldStates = formState().formFieldStates;
+
+@for (fieldState of formFieldStates; track fieldState.attribute) {
+  <!-- [groupNameRef]="groupNameRef"
+  TODO: verify this logic
+  -->
+  <kc-group-label [attribute]="fieldState.attribute"> </kc-group-label>
+
+  @if (beforeField) {
+    <ng-container
+      [ngTemplateOutlet]="beforeField"
+      [ngTemplateOutletContext]="{
+        attribute: fieldState.attribute,
+        valueOrValues: fieldState.valueOrValues,
+        displayableErrors: fieldState.displayableErrors,
+      }"
+    >
+    </ng-container>
+  }
+
+  <div
+    [kcClass]="'kcFormGroupClass'"
+    [style.display]="fieldState.attribute.name === 'password-confirm' && !doMakeUserConfirmPassword ? 'none' : 'block'"
+  >
+    <div [kcClass]="'kcLabelWrapperClass'">
+      <label
+        [for]="fieldState.attribute.name"
+        [kcClass]="'kcLabelClass'"
+      >
+        {{ fieldState.attribute.displayName ?? '' | advancedMsgStr }}
+        @if (fieldState.attribute.required) {
+          *
+        }
+      </label>
+    </div>
+
+    <div [kcClass]="'kcInputWrapperClass'">
+      @if (fieldState.attribute.annotations.inputHelperTextBefore) {
+        <div
+          [kcClass]="'kcInputHelperTextBeforeClass'"
+          [id]="'form-help-text-before-' + fieldState.attribute.name"
+          aria-live="polite"
+        >
+          {{ fieldState.attribute.annotations.inputHelperTextBefore | advancedMsgStr }}
+        </div>
+      }
+
+      <kc-input-field-by-type
+        [attribute]="fieldState.attribute"
+        [valueOrValues]="fieldState.valueOrValues"
+        [displayableErrors]="fieldState.displayableErrors"
+        (dispatchFormAction)="onDispatch($event)"
+      >
+      </kc-input-field-by-type>
+
+      <kc-field-errors
+        [attribute]="fieldState.attribute"
+        [displayableErrors]="fieldState.displayableErrors"
+      >
+      </kc-field-errors>
+      @if (fieldState.attribute.annotations.inputHelperTextAfter) {
+        <div
+          [kcClass]="'kcInputHelperTextAfterClass'"
+          [id]="'form-help-text-after-' + fieldState.attribute.name"
+          aria-live="polite"
+        >
+          {{ fieldState.attribute.annotations.inputHelperTextAfter | advancedMsgStr }}
+        </div>
+      }
+
+      @if (afterField) {
+        <ng-container
+          [ngTemplateOutlet]="afterField"
+          [ngTemplateOutletContext]="{
+            attribute: fieldState.attribute,
+            valueOrValues: fieldState.valueOrValues,
+            displayableErrors: fieldState.displayableErrors,
+          }"
+        >
+        </ng-container>
+      }
+      <!-- NOTE: Downloading of html5DataAnnotations scripts is done in the useUserProfileForm hook -->
+    </div>
+  </div>
+}

package/src/login/components/user-profile-form-fields/user-profile-form-fields.component.ts

@@ -0,0 +1,84 @@
+import { NgTemplateOutlet } from "@angular/common";
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ContentChild,
+    effect,
+    forwardRef,
+    inject,
+    output,
+    TemplateRef
+} from "@angular/core";
+import {
+    DO_MAKE_USER_CONFIRM_PASSWORD,
+    KC_CONTEXT,
+    CLASSES,
+    USE_DEFAULT_CSS
+} from "@keycloakify/angular/lib/public-api";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { KcContext } from "keycloakify/login/KcContext";
+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,
+    UserProfileFormService
+} from "@keycloakify/angular/login/services/user-profile-form.service";
+import { FieldErrorsComponent } from "@keycloakify/angular/login/components/field-errors/field-errors.component";
+import { GroupLabelComponent } from "@keycloakify/angular/login/components/group-label/group-label.component";
+import { InputFieldByTypeComponent } from "@keycloakify/angular/login/components/input-field-by-type/input-field-by-type.component";
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [
+        KcClassDirective,
+        FieldErrorsComponent,
+        InputFieldByTypeComponent,
+        GroupLabelComponent,
+        NgTemplateOutlet,
+        AdvancedMsgStrPipe
+    ],
+    selector: "kc-user-profile-form-fields",
+    templateUrl: "user-profile-form-fields.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        UserProfileFormService,
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => UserProfileFormFieldsComponent)
+        }
+    ]
+})
+export class UserProfileFormFieldsComponent extends ComponentReference {
+    kcContext = inject<KcContext>(KC_CONTEXT);
+    userProfileFormService = inject(UserProfileFormService);
+    doMakeUserConfirmPassword = inject(DO_MAKE_USER_CONFIRM_PASSWORD);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+
+    onIsFormSubmittable = output<boolean>();
+
+    formState = this.userProfileFormService.formState;
+
+    @ContentChild("beforField") beforeField: TemplateRef<unknown> | undefined;
+    @ContentChild("afterField") afterField: TemplateRef<unknown> | undefined;
+
+    constructor() {
+        super();
+        effect(() => {
+            const isFormSubmittable = this.formState().isFormSubmittable;
+            this.onIsFormSubmittable.emit(isFormSubmittable);
+        });
+    }
+
+    onDispatch(formAction: FormAction) {
+        this.userProfileFormService.dispatchFormAction(formAction);
+    }
+}

package/src/login/containers/template.component.html

@@ -0,0 +1,203 @@
+@let realm = kcContext.realm;
+@let message = kcContext.message;
+@let auth = kcContext.auth;
+@let isAppInitiatedAction = kcContext.isAppInitiatedAction;
+@let url = kcContext.url;
+@let isReadyToRender = isReadyToRender$ | async;
+
+@if (isReadyToRender) {
+  <div [kcClass]="'kcLoginClass'">
+    <div
+      id="kc-header"
+      [kcClass]="'kcHeaderClass'"
+    >
+      <div
+        id="kc-header-wrapper"
+        [kcClass]="'kcHeaderWrapperClass'"
+      >
+        <div [innerHTML]="realm?.displayNameHtml | kcSanitize: 'html'"></div>
+      </div>
+    </div>
+
+    <div [kcClass]="'kcFormCardClass'">
+      <header [kcClass]="'kcFormHeaderClass'">
+        <!-- Locale switcher -->
+        @if (i18n.enabledLanguages.length > 1) {
+          <div
+            id="kc-locale"
+            [kcClass]="'kcLocaleMainClass'"
+          >
+            <div
+              id="kc-locale-wrapper"
+              [kcClass]="'kcLocaleWrapperClass'"
+            >
+              <div
+                id="kc-locale-dropdown"
+                [kcClass]="'kcLocaleDropDownClass'"
+                class="menu-button-links"
+              >
+                <button
+                  tabindex="1"
+                  id="kc-current-locale-link"
+                  [attr.aria-label]="'languages' | msgStr"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                  aria-controls="language-switch1"
+                >
+                  {{ i18n.currentLanguage.label }}
+                </button>
+                <ul
+                  role="menu"
+                  tabindex="-1"
+                  aria-labelledby="kc-current-locale-link"
+                  aria-activedescendant=""
+                  id="language-switch1"
+                  [kcClass]="'kcLocaleListClass'"
+                >
+                  @for (entry of i18n.enabledLanguages; track entry; let idx = $index) {
+                    <li
+                      [kcClass]="'kcLocaleListItemClass'"
+                      role="none"
+                    >
+                      <a
+                        role="menuitem"
+                        tabindex="-1"
+                        [href]="entry.href"
+                        [kcClass]="'kcLocaleItemClass'"
+                        [id]="'language-' + idx"
+                      >
+                        {{ entry.label }}
+                      </a>
+                    </li>
+                  }
+                </ul>
+              </div>
+            </div>
+          </div>
+        }
+
+        <!-- Header content -->
+        <ng-template #node>
+          @if (auth && !auth.showUsername && !auth.showResetCredentials) {
+            <h1 id="kc-page-title">
+              <ng-content select="[headerNode]"></ng-content>
+            </h1>
+          } @else {
+            <div
+              id="kc-username"
+              [kcClass]="'kcFormGroupClass'"
+            >
+              <label id="kc-attempted-username">{{ auth?.attemptedUsername }}</label>
+              <a
+                id="reset-login"
+                [href]="url?.loginRestartFlowUrl"
+                [attr.aria-label]="'restartLoginTooltip' | msgStr"
+              >
+                <div class="kc-login-tooltip">
+                  <i [kcClass]="'kcResetFlowIcon'"></i>
+                  <span class="kc-tooltip-text">
+                    {{ 'restartLoginTooltip' | msgStr }}
+                  </span>
+                </div>
+              </a>
+            </div>
+          }
+        </ng-template>
+
+        @if (displayRequiredFields()) {
+          <div [kcClass]="'kcContentWrapperClass'">
+            <div
+              [kcClass]="'kcLabelWrapperClass'"
+              class="subtitle"
+            >
+              <span class="subtitle">
+                <span class="required">*</span>
+                {{ 'requiredFields' | msgStr }}
+              </span>
+            </div>
+            <div class="col-md-10">
+              <ng-container [ngTemplateOutlet]="node"></ng-container>
+            </div>
+          </div>
+        } @else {
+          <ng-container [ngTemplateOutlet]="node"></ng-container>
+        }
+      </header>
+
+      <div id="kc-content">
+        <div id="kc-content-wrapper">
+          <!-- Message display -->
+          @if (displayMessage() && message && (message.type !== 'warning' || !isAppInitiatedAction)) {
+            <div
+              [kcClass]="'kcAlertClass'"
+              [ngClass]="message.type === 'error' ? 'pf-m-danger' : 'pf-m-' + message.type"
+              [class]="'alert-' + message.type"
+            >
+              <div class="pf-c-alert__icon">
+                @switch (message.type) {
+                  @case ('success') {
+                    <span [kcClass]="'kcFeedbackSuccessIcon'"></span>
+                  }
+                  @case ('warning') {
+                    <span [kcClass]="'kcFeedbackWarningIcon'"></span>
+                  }
+                  @case ('info') {
+                    <span [kcClass]="'kcFeedbackInfoIcon'"></span>
+                  }
+                  @case ('error') {
+                    <span [kcClass]="'kcFeedbackErrorIcon'"></span>
+                  }
+                }
+              </div>
+              <span
+                [kcClass]="'kcAlertTitleClass'"
+                [innerHTML]="message.summary | kcSanitize: 'html'"
+              ></span>
+            </div>
+          }
+          <!-- Content -->
+          <ng-content select="[content]"></ng-content>
+          @if (!!auth && auth?.showTryAnotherWayLink) {
+            <form
+              id="kc-select-try-another-way-form"
+              [action]="url?.loginAction"
+              method="post"
+            >
+              <div [kcClass]="'kcFormGroupClass'">
+                <div [kcClass]="'kcFormGroupClass'">
+                  <input
+                    type="hidden"
+                    name="tryAnotherWay"
+                    value="on"
+                  />
+                  <a
+                    id="try-another-way"
+                    (click)="tryAnotherWay()"
+                  >
+                    {{ 'doTryAnotherWay' | msgStr }}
+                  </a>
+                </div>
+              </div>
+            </form>
+          }
+
+          <ng-content select="[socialProvidersNode]"></ng-content>
+          <!-- Info display -->
+          @if (displayInfo()) {
+            <div
+              id="kc-info"
+              [kcClass]="'kcSignUpClass'"
+            >
+              <div
+                id="kc-info-wrapper"
+                [kcClass]="'kcInfoAreaWrapperClass'"
+              >
+                <ng-content select="[infoNode]"></ng-content>
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+}

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

@@ -0,0 +1,94 @@
+import { AsyncPipe, NgTemplateOutlet } from "@angular/common";
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input,
+    OnInit,
+    Renderer2
+} from "@angular/core";
+import { Meta, Title } from "@angular/platform-browser";
+import {
+    CLASSES,
+    I18N,
+    KC_CONTEXT,
+    USE_DEFAULT_CSS
+} from "@keycloakify/angular/lib/public-api";
+import type { I18n } from "@keycloakify/angular/login/i18n";
+import { KcContext } from "keycloakify/login/KcContext/KcContext";
+import { ClassKey, getKcClsx } from "keycloakify/login/lib/kcClsx";
+import { Observable } from "rxjs";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
+import { KcSanitizePipe } from "@keycloakify/angular/login/pipes";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+import { LoginResourceInjectorService } from "@keycloakify/angular/login/services/login-resource-injector.service";
+
+@Component({
+    selector: "kc-login-template",
+    templateUrl: "./template.component.html",
+    standalone: true,
+    imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective, MsgStrPipe],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => TemplateComponent)
+        }
+    ]
+})
+export class TemplateComponent extends ComponentReference implements OnInit {
+    i18n = inject<I18n>(I18N);
+    renderer = inject(Renderer2);
+    meta = inject(Meta);
+    title = inject(Title);
+    kcContext = inject<KcContext>(KC_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    loginResourceInjectorService = inject(LoginResourceInjectorService);
+
+    displayInfo = input(false);
+    displayMessage = input(true);
+    displayRequiredFields = input(false);
+    documentTitle = input<string>();
+    bodyClassName = input<string>();
+
+    isReadyToRender$: Observable<boolean>;
+
+    constructor() {
+        super();
+        this.title.setTitle(
+            this.documentTitle() ??
+                this.i18n.msgStr("loginTitle", this.kcContext.realm.displayName)
+        );
+        this.isReadyToRender$ = this.loginResourceInjectorService.injectResource(
+            this.doUseDefaultCss
+        );
+    }
+
+    ngOnInit() {
+        this.applyKcIndexClasses();
+    }
+
+    private applyKcIndexClasses() {
+        const kcClsx = getKcClsx({
+            doUseDefaultCss: this.doUseDefaultCss,
+            classes: this.classes
+        }).kcClsx;
+        const kcBodyClass = this.bodyClassName() ?? kcClsx("kcBodyClass");
+        const kcHtmlClass = kcClsx("kcHtmlClass");
+        const kcBodyClasses = kcBodyClass.split(/\s+/);
+        const kcHtmlClasses = kcHtmlClass.split(/\s+/);
+        kcBodyClasses.forEach(klass => {
+            this.renderer.addClass(document.body, klass);
+        });
+        kcHtmlClasses.forEach(klass => {
+            this.renderer.addClass(document.documentElement, klass);
+        });
+    }
+
+    tryAnotherWay() {
+        document.forms["kc-select-try-another-way-form" as never].submit();
+    }
+}