@keycloakify/angular 0.0.1-rc.0

package/src/login/pages/register/register.component.html

@@ -0,0 +1,126 @@
+@let messageHeader = kcContext.messageHeader;
+@let url = kcContext.url;
+@let messagesPerField = kcContext.messagesPerField;
+@let recaptchaRequired = kcContext.recaptchaRequired;
+@let recaptchaVisible = kcContext.recaptchaVisible;
+@let recaptchaSiteKey = kcContext.recaptchaSiteKey;
+@let recaptchaAction = kcContext.recaptchaAction;
+@let termsAcceptanceRequired = kcContext.termsAcceptanceRequired;
+
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ messageHeader ?? 'registerTitle' | advancedMsgStr }}
+  </ng-container>
+  <ng-container content>
+    <form
+      id="kc-register-form"
+      [kcClass]="'kcFormClass'"
+      [action]="url.registrationAction"
+      method="post"
+    >
+      <kc-user-profile-form-fields (onIsFormSubmittable)="isFormSubmittable.set($event)"></kc-user-profile-form-fields>
+      @if (termsAcceptanceRequired) {
+        <div className="form-group">
+          <div [kcClass]="'kcInputWrapperClass'">
+            {{ 'termsTitle' | msgStr }}
+            <div id="kc-registration-terms-text">
+              {{ 'termsText' | msgStr }}
+            </div>
+          </div>
+        </div>
+        <div className="form-group">
+          <div [kcClass]="'kcLabelWrapperClass'">
+            <input
+              type="checkbox"
+              id="termsAccepted"
+              name="termsAccepted"
+              [kcClass]="'kcCheckboxInputClass'"
+              [checked]="areTermsAccepted()"
+              (change)="areTermsAccepted.set($any($event.target).checked)"
+              [attr.aria-invalid]="messagesPerField.existsError('termsAccepted')"
+            />
+            <label
+              for="termsAccepted"
+              [kcClass]="'kcLabelClass'"
+            >
+              {{ 'acceptTerms' | msgStr }}
+            </label>
+          </div>
+          @if (messagesPerField.existsError('termsAccepted')) {
+            <div [kcClass]="'kcLabelWrapperClass'">
+              <span
+                id="input-error-terms-accepted"
+                [kcClass]="'kcInputErrorMessageClass'"
+                aria-live="polite"
+                [innerHtml]="messagesPerField.get('termsAccepted') | kcSanitize: 'html'"
+              ></span>
+            </div>
+          }
+        </div>
+      }
+      @if (recaptchaRequired && (recaptchaVisible || recaptchaAction === undefined)) {
+        <div className="form-group">
+          <div [kcClass]="'kcInputWrapperClass'">
+            <div
+              class="g-recaptcha"
+              data-size="compact"
+              [attr.data-sitekey]="recaptchaSiteKey"
+              [attr.data-action]="recaptchaAction"
+            ></div>
+          </div>
+        </div>
+      }
+
+      <div [kcClass]="'kcFormGroupClass'">
+        <div
+          id="kc-form-options"
+          [kcClass]="'kcFormOptionsClass'"
+        >
+          <div [kcClass]="'kcFormOptionsWrapperClass'">
+            <span>
+              <a
+                [href]="url.loginUrl"
+                [innerHTML]="'backToLogin' | msgStr | kcSanitize: 'html'"
+              ></a>
+            </span>
+          </div>
+        </div>
+        @if (recaptchaRequired && !recaptchaVisible && recaptchaAction !== undefined) {
+          <div
+            id="kc-form-buttons"
+            [kcClass]="'kcFormButtonsClass'"
+          >
+            <button
+              [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+              class="g-recaptcha"
+              [attr.data-sitekey]="recaptchaSiteKey"
+              [attr.data-callback]="onCallback"
+              [attr.data-action]="recaptchaAction"
+              type="submit"
+            >
+              {{ 'doRegister' | msgStr }}
+            </button>
+          </div>
+        } @else {
+          <div
+            id="kc-form-buttons"
+            [kcClass]="'kcFormButtonsClass'"
+          >
+            <input
+              [disabled]="!isFormSubmittable || (termsAcceptanceRequired && !areTermsAccepted)"
+              [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+              type="submit"
+              [value]="'doRegister' | msgStr"
+            />
+          </div>
+        }
+      </div>
+    </form>
+  </ng-container>
+</kc-login-template>

package/src/login/pages/register/register.component.ts

@@ -0,0 +1,62 @@
+import { AsyncPipe, NgClass } from "@angular/common";
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input,
+    signal
+} from "@angular/core";
+import {
+    CLASSES,
+    KC_CONTEXT,
+    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 { UserProfileFormFieldsComponent } from "@keycloakify/angular/login/components/user-profile-form-fields/user-profile-form-fields.component";
+import { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
+import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes/advanced-msg-str.pipe";
+import { KcSanitizePipe } from "@keycloakify/angular/login/pipes/kc-sanitize.pipe";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+
+@Component({
+    selector: "kc-root",
+    templateUrl: "./register.component.html",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        KcClassDirective,
+        AsyncPipe,
+        KcSanitizePipe,
+        NgClass,
+        TemplateComponent,
+        UserProfileFormFieldsComponent,
+        MsgStrPipe,
+        AdvancedMsgStrPipe
+    ],
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => RegisterComponent)
+        }
+    ]
+})
+export class RegisterComponent extends ComponentReference {
+    kcContext = inject<Extract<KcContext, { pageId: "register.ftl" }>>(KC_CONTEXT);
+    displayRequiredFields = input(false);
+    documentTitle = input<string>();
+    bodyClassName = input<string>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    isFormSubmittable = signal(false);
+    areTermsAccepted = signal(false);
+    displayInfo: boolean = false;
+    displayMessage: boolean = !this.kcContext?.messagesPerField?.existsError("global");
+
+    onCallback() {
+        (document.getElementById("kc-register-form") as HTMLFormElement).submit();
+    }
+}

package/src/login/pages/saml-post-form/saml-post-form.component.html

@@ -0,0 +1,51 @@
+@let samlPost = kcContext.samlPost;
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'saml.post-form.title' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <p>{{ 'saml.post-form.message' | msgStr }}</p>
+    <form
+      name="saml-post-binding"
+      method="post"
+      [action]="samlPost.url"
+      #setHtmlFormElement
+    >
+      @if (!!samlPost.SAMLRequest) {
+        <input
+          type="hidden"
+          name="SAMLRequest"
+          [value]="samlPost.SAMLRequest"
+        />
+      }
+      @if (!!samlPost.SAMLResponse) {
+        <input
+          type="hidden"
+          name="SAMLResponse"
+          [value]="samlPost.SAMLResponse"
+        />
+      }
+      @if (!!samlPost.relayState) {
+        <input
+          type="hidden"
+          name="RelayState"
+          [value]="samlPost.relayState"
+        />
+      }
+      <noscript>
+        <p>{{ 'saml.post-form.js-disabled' | msgStr }}</p>
+        <input
+          type="submit"
+          value="{{ 'doContinue' | msgStr }}"
+        />
+      </noscript>
+    </form>
+  </ng-container>
+  ></kc-login-template
+>

package/src/login/pages/saml-post-form/saml-post-form.component.ts

@@ -0,0 +1,58 @@
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input,
+    ViewChild
+} from "@angular/core";
+import {
+    CLASSES,
+    KC_CONTEXT,
+    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 { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+
+@Component({
+    standalone: true,
+    imports: [TemplateComponent, MsgStrPipe],
+    selector: "kc-root",
+    templateUrl: "saml-post-form.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => SamlPostFormComponent)
+        }
+    ]
+})
+export class SamlPostFormComponent extends ComponentReference implements AfterViewInit {
+    kcContext = inject<Extract<KcContext, { pageId: "saml-post-form.ftl" }>>(KC_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    displayRequiredFields = input(false);
+    documentTitle = input<string>();
+    bodyClassName = input<string>();
+    displayInfo: boolean = false;
+    displayMessage: boolean = true;
+    @ViewChild("setHtmlFormElement")
+    htmlFormElement!: HTMLFormElement;
+
+    ngAfterViewInit(): void {
+        if (this.htmlFormElement === null) {
+            return;
+        }
+
+        if (this.kcContext.samlPost.url === "#") {
+            alert("In a real Keycloak the user would be redirected immediately");
+            return;
+        }
+
+        this.htmlFormElement.submit();
+    }
+}

package/src/login/pages/select-authenticator/select-authenticator.component.html

@@ -0,0 +1,49 @@
+@let url = kcContext.url;
+@let auth = kcContext.auth;
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'loginChooseAuthenticator' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <form
+      id="kc-select-credential-form"
+      [kcClass]="'kcFormClass'"
+      [action]="url.loginAction"
+      method="post"
+    >
+      <div [kcClass]="'kcSelectAuthListClass'">
+        @for (authenticationSelection of auth.authenticationSelections; track authenticationSelection; let i = $index) {
+          <button
+            [kcClass]="'kcSelectAuthListItemClass'"
+            type="submit"
+            name="authenticationExecution"
+            [value]="authenticationSelection.authExecId"
+          >
+            <div [kcClass]="'kcSelectAuthListItemIconClass'">
+              <i [kcClass]="['kcSelectAuthListItemIconPropertyClass', $any(authenticationSelection.iconCssClass)]"></i>
+            </div>
+            <div [kcClass]="'kcSelectAuthListItemBodyClass'">
+              <div [kcClass]="'kcSelectAuthListItemHeadingClass'">
+                {{ authenticationSelection.displayName | advancedMsgStr }}
+              </div>
+              <div [kcClass]="'kcSelectAuthListItemDescriptionClass'">
+                {{ authenticationSelection.helpText | advancedMsgStr }}
+              </div>
+            </div>
+            <div [kcClass]="'kcSelectAuthListItemFillClass'"></div>
+            <div [kcClass]="'kcSelectAuthListItemArrowClass'">
+              <i [kcClass]="'kcSelectAuthListItemArrowIconClass'"></i>
+            </div>
+          </button>
+        }
+      </div>
+    </form>
+  </ng-container>
+  ></kc-login-template
+>

package/src/login/pages/select-authenticator/select-authenticator.component.ts

@@ -0,0 +1,51 @@
+import { NgClass } from "@angular/common";
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input
+} from "@angular/core";
+import {
+    CLASSES,
+    KC_CONTEXT,
+    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 { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { KcClassDirective } from "@keycloakify/angular/login/directives";
+import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+
+@Component({
+    standalone: true,
+    imports: [
+        TemplateComponent,
+        MsgStrPipe,
+        AdvancedMsgStrPipe,
+        KcClassDirective,
+        NgClass
+    ],
+    selector: "kc-root",
+    templateUrl: "select-authenticator.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => SelectAuthenticatorComponent)
+        }
+    ]
+})
+export class SelectAuthenticatorComponent extends ComponentReference {
+    kcContext =
+        inject<Extract<KcContext, { pageId: "select-authenticator.ftl" }>>(KC_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    displayRequiredFields = input(false);
+    documentTitle = input<string>();
+    bodyClassName = input<string>();
+    displayInfo: boolean = false;
+    displayMessage: boolean = false;
+}

package/src/login/pages/terms/terms.component.html

@@ -0,0 +1,36 @@
+@let url = kcContext.url;
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'termsTitle' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <div id="kc-terms-text">{{ 'termsText' | msgStr }}</div>
+    <form
+      class="form-actions"
+      [action]="url.loginAction"
+      method="POST"
+    >
+      <input
+        [kcClass]="['kcButtonClass', 'kcButtonClass', 'kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+        name="accept"
+        id="kc-accept"
+        type="submit"
+        [value]="'doAccept' | msgStr"
+      />
+      <input
+        [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
+        name="cancel"
+        id="kc-decline"
+        type="submit"
+        [value]="'doDecline' | msgStr"
+      />
+    </form>
+    <div className="clearfix"></div>
+  </ng-container>
+</kc-login-template>

package/src/login/pages/terms/terms.component.ts

@@ -0,0 +1,42 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input
+} from "@angular/core";
+import {
+    CLASSES,
+    KC_CONTEXT,
+    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 { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { KcClassDirective } from "@keycloakify/angular/login/directives";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+
+@Component({
+    standalone: true,
+    imports: [MsgStrPipe, TemplateComponent, KcClassDirective],
+    selector: "kc-root",
+    templateUrl: "terms.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => TermsComponent)
+        }
+    ]
+})
+export class TermsComponent extends ComponentReference {
+    kcContext = inject<Extract<KcContext, { pageId: "terms.ftl" }>>(KC_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    displayRequiredFields = input(false);
+    documentTitle = input<string>();
+    bodyClassName = input<string>();
+    displayInfo: boolean = false;
+    displayMessage: boolean = false;
+}

package/src/login/pages/update-email/update-email.component.html

@@ -0,0 +1,58 @@
+@let url = kcContext.url;
+@let isAppInitiatedAction = kcContext.isAppInitiatedAction;
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'updateEmailTitle' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <form
+      id="kc-update-email-form"
+      [kcClass]="'kcFormClass'"
+      [action]="url.loginAction"
+      method="post"
+    >
+      <kc-user-profile-form-fields (onIsFormSubmittable)="isFormSubmittable.set($event)"></kc-user-profile-form-fields>
+      <div [kcClass]="'kcFormGroupClass'">
+        <div
+          id="kc-form-options"
+          [kcClass]="'kcFormOptionsClass'"
+        >
+          <div [kcClass]="'kcFormOptionsWrapperClass'"></div>
+        </div>
+        <kc-logout-other-sessions></kc-logout-other-sessions>
+        <div
+          id="kc-form-buttons"
+          [kcClass]="'kcFormButtonsClass'"
+        >
+          <input
+            [disabled]="!isFormSubmittable"
+            [kcClass]="{
+              kcButtonClass: true,
+              kcButtonPrimaryClass: true,
+              kcButtonBlockClass: isAppInitiatedAction,
+              kcButtonLargeClass: true,
+            }"
+            type="submit"
+            value="{{ 'doSubmit' | msgStr }}"
+          />
+          @if (isAppInitiatedAction) {
+            <button
+              [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
+              type="submit"
+              name="cancel-aia"
+              value="true"
+            >
+              {{ 'doCancel' | msgStr }}
+            </button>
+          }
+        </div>
+      </div>
+    </form>
+  </ng-container>
+</kc-login-template>

package/src/login/pages/update-email/update-email.component.ts

@@ -0,0 +1,52 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input,
+    signal
+} from "@angular/core";
+import {
+    CLASSES,
+    KC_CONTEXT,
+    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 { LogoutOtherSessionsComponent } from "@keycloakify/angular/login/components/logout-other-sessions/logout-other-sessions.component";
+import { UserProfileFormFieldsComponent } from "@keycloakify/angular/login/components/user-profile-form-fields/user-profile-form-fields.component";
+import { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { KcClassDirective } from "@keycloakify/angular/login/directives";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+
+@Component({
+    standalone: true,
+    imports: [
+        TemplateComponent,
+        MsgStrPipe,
+        KcClassDirective,
+        UserProfileFormFieldsComponent,
+        LogoutOtherSessionsComponent
+    ],
+    selector: "kc-root",
+    templateUrl: "update-email.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => UpdateEmailComponent)
+        }
+    ]
+})
+export class UpdateEmailComponent extends ComponentReference {
+    kcContext = inject<Extract<KcContext, { pageId: "update-email.ftl" }>>(KC_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    displayRequiredFields = input(true);
+    documentTitle = input<string>();
+    bodyClassName = input<string>();
+    displayInfo: boolean = false;
+    displayMessage: boolean = this.kcContext.messagesPerField.exists("global");
+    isFormSubmittable = signal(false);
+}