@keycloakify/angular 0.0.1-rc.0

package/src/login/pages/login-update-profile/login-update-profile.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 { 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,
+        KcClassDirective,
+        MsgStrPipe,
+        UserProfileFormFieldsComponent
+    ],
+    selector: "kc-root",
+    templateUrl: "login-update-profile.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => LoginUpdateProfileComponent)
+        }
+    ]
+})
+export class LoginUpdateProfileComponent extends ComponentReference {
+    kcContext =
+        inject<Extract<KcContext, { pageId: "login-update-profile.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);
+}

package/src/login/pages/login-username/login-username.component.html

@@ -0,0 +1,161 @@
+@let realm = kcContext.realm;
+@let social = kcContext.social;
+@let usernameHidden = kcContext.usernameHidden;
+@let messagesPerField = kcContext.messagesPerField;
+@let url = kcContext.url;
+@let login = kcContext.login;
+
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'doLogIn' | msgStr }}
+  </ng-container>
+  <ng-container infoNode>
+    <div id="kc-registration">
+      <span>
+        {{ 'noAccount' | msgStr }}
+        <a
+          tabindex="6"
+          [href]="url?.registrationUrl"
+        >
+          {{ 'doRegister' | msgStr }}
+        </a>
+      </span>
+    </div>
+  </ng-container>
+  <ng-container socialProvidersNode>
+    @if (!!realm?.password && !!social?.providers?.length) {
+      <div
+        id="kc-social-providers"
+        [kcClass]="'kcFormSocialAccountSectionClass'"
+      >
+        <hr />
+        <h2>{{ 'identity-provider-login-label' | msgStr }}</h2>
+        <ul
+          [kcClass]="{
+            kcFormSocialAccountListClass: true,
+            kcFormSocialAccountListGridClass: (social?.providers?.length ?? 0) > 3,
+          }"
+        >
+          @for (provider of social?.providers; track provider.alias; let idx = $index) {
+            <li>
+              <a
+                [id]="provider.alias"
+                [kcClass]="{
+                  kcFormSocialAccountListButtonClass: true,
+                  kcFormSocialAccountGridItem: (social?.providers?.length ?? 0) > 3,
+                }"
+                type="button"
+                [href]="provider.loginUrl"
+              >
+                @if (provider.iconClasses) {
+                  <i
+                    [ngClass]="provider.iconClasses"
+                    [kcClass]="'kcCommonLogoIdP'"
+                    aria-hidden="true"
+                  ></i>
+                }
+                <span
+                  [ngClass]="{
+                    'kc-social-icon-text': provider.iconClasses,
+                  }"
+                  [kcClass]="'kcFormSocialAccountNameClass'"
+                  [innerHTML]="provider.displayName | kcSanitize: 'html'"
+                ></span>
+              </a>
+            </li>
+          }
+        </ul>
+      </div>
+    }
+  </ng-container>
+  <ng-container content>
+    <div id="kc-form">
+      <div id="kc-form-wrapper">
+        @if (realm.password) {
+          <form
+            id="kc-form-login"
+            (onSubmit)="isLoginButtonDisabled.set(true)"
+            [action]="url?.loginAction"
+            method="post"
+          >
+            @if (!usernameHidden) {
+              <div [kcClass]="'kcFormGroupClass'">
+                <label
+                  for="username"
+                  [kcClass]="'kcLabelClass'"
+                >
+                  @if (!realm?.loginWithEmailAllowed) {
+                    {{ 'username' | msgStr }}
+                  } @else if (!realm?.registrationEmailAsUsername) {
+                    {{ 'usernameOrEmail' | msgStr }}
+                  } @else {
+                    {{ 'email' | msgStr }}
+                  }
+                </label>
+                <input
+                  tabindex="2"
+                  id="username"
+                  [kcClass]="'kcInputClass'"
+                  name="username"
+                  type="text"
+                  autofocus
+                  autoComplete="off"
+                  [defaultValue]="login?.username || ''"
+                  [attr.aria-invalid]="messagesPerField?.existsError('username')"
+                />
+                @if (messagesPerField?.existsError('username')) {
+                  <span
+                    id="input-error"
+                    [kcClass]="'kcInputErrorMessageClass'"
+                    aria-live="polite"
+                    [innerHTML]="messagesPerField?.getFirstError('username') | kcSanitize: 'html'"
+                  >
+                  </span>
+                }
+                <!---->
+              </div>
+            }
+
+            <div [kcClass]="['kcFormGroupClass', 'kcFormSettingClass']">
+              <div id="kc-form-options">
+                @if (realm.rememberMe && !usernameHidden) {
+                  <div class="checkbox">
+                    <label>
+                      <input
+                        tabindex="5"
+                        id="rememberMe"
+                        name="rememberMe"
+                        type="checkbox"
+                        [defaultChecked]="!!login?.rememberMe"
+                      />
+                      {{ 'rememberMe' | msgStr }}
+                    </label>
+                  </div>
+                }
+              </div>
+            </div>
+            <div
+              id="kc-form-buttons"
+              [kcClass]="'kcFormGroupClass'"
+            >
+              <input
+                tabindex="4"
+                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+                name="login"
+                id="kc-login"
+                type="submit"
+                [value]="'doLogIn' | msgStr"
+              />
+            </div>
+          </form>
+        }
+      </div>
+    </div>
+  </ng-container>
+</kc-login-template>

package/src/login/pages/login-username/login-username.component.ts

@@ -0,0 +1,56 @@
+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 { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
+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: "./login-username.component.html",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        KcClassDirective,
+        AsyncPipe,
+        KcSanitizePipe,
+        NgClass,
+        TemplateComponent,
+        MsgStrPipe
+    ],
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => LoginUsernameComponent)
+        }
+    ]
+})
+export class LoginUsernameComponent extends ComponentReference {
+    kcContext = inject<Extract<KcContext, { pageId: "login-username.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);
+    isLoginButtonDisabled = signal(false);
+    displayInfo: boolean =
+        !!this.kcContext?.realm?.password &&
+        !!this.kcContext?.realm?.registrationAllowed &&
+        !this.kcContext?.registrationDisabled;
+    displayMessage: boolean = !this.kcContext?.messagesPerField?.existsError("username");
+}

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

@@ -0,0 +1,27 @@
+@let url = kcContext.url;
+@let user = kcContext.user;
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'emailVerifyTitle' | msgStr }}
+  </ng-container>
+  <ng-container infoNode>
+    <p class="instruction">
+      {{ 'emailVerifyInstruction2' | msgStr }}
+      <br />
+      <a [href]="url.loginAction">{{ 'doClickHere' | msgStr }}</a>
+      &nbsp;
+      {{ 'emailVerifyInstruction3' | msgStr }}
+    </p>
+  </ng-container>
+  <ng-container content>
+    <p class="instruction">
+      {{ 'emailVerifyInstruction1' | msgStr: user?.email ?? '' }}
+    </p></ng-container
+  >
+</kc-login-template>

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

@@ -0,0 +1,43 @@
+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: [KcClassDirective, TemplateComponent, MsgStrPipe],
+    selector: "kc-root",
+    templateUrl: "login-verify-email.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => LoginVerifyEmailComponent)
+        }
+    ]
+})
+export class LoginVerifyEmailComponent extends ComponentReference {
+    kcContext =
+        inject<Extract<KcContext, { pageId: "login-verify-email.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 = true;
+    displayMessage: boolean = true;
+}

package/src/login/pages/login-x509-info/login-x509-info.component.html

@@ -0,0 +1,102 @@
+@let url = kcContext.url;
+@let x509 = kcContext.x509;
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'doLogIn' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <form
+      id="kc-x509-login-info"
+      [kcClass]="'kcFormClass'"
+      [action]="url.loginAction"
+      method="post"
+    >
+      <div [kcClass]="'kcFormGroupClass'">
+        <div [kcClass]="'kcLabelWrapperClass'">
+          <label
+            for="certificate_subjectDN"
+            [kcClass]="'kcLabelClass'"
+          >
+            {{ 'clientCertificate' | msgStr }}
+          </label>
+        </div>
+        @if (x509.formData.subjectDN) {
+          <div [kcClass]="'kcLabelWrapperClass'">
+            <label
+              id="certificate_subjectDN"
+              [kcClass]="'kcLabelClass'"
+            >
+              {{ x509.formData.subjectDN }}
+            </label>
+          </div>
+        } @else {
+          <div [kcClass]="'kcLabelWrapperClass'">
+            <label
+              id="certificate_subjectDN"
+              [kcClass]="'kcLabelClass'"
+            >
+              {{ 'noCertificate' | msgStr }}
+            </label>
+          </div>
+        }
+      </div>
+      <div [kcClass]="'kcFormGroupClass'">
+        @if (x509.formData.isUserEnabled) {
+          <div [kcClass]="'kcLabelWrapperClass'">
+            <label
+              for="username"
+              [kcClass]="'kcLabelClass'"
+            >
+              {{ 'doX509Login' | msgStr }}
+            </label>
+          </div>
+          <div [kcClass]="'kcLabelWrapperClass'">
+            <label
+              id="username"
+              [kcClass]="'kcLabelClass'"
+            >
+              {{ x509.formData.username }}
+            </label>
+          </div>
+        }
+      </div>
+      <div [kcClass]="'kcFormGroupClass'">
+        <div
+          id="kc-form-options"
+          [kcClass]="'kcFormOptionsClass'"
+        >
+          <div [kcClass]="'kcFormOptionsWrapperClass'"></div>
+        </div>
+        <div
+          id="kc-form-buttons"
+          [kcClass]="'kcFormButtonsClass'"
+        >
+          <div [kcClass]="'kcFormButtonsWrapperClass'">
+            <input
+              [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+              name="login"
+              id="kc-login"
+              type="submit"
+              [value]="'doContinue' | msgStr"
+            />
+            @if (x509.formData.isUserEnabled) {
+              <input
+                [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
+                name="cancel"
+                id="kc-cancel"
+                type="submit"
+                [value]="'doIgnore' | msgStr"
+              />
+            }
+          </div>
+        </div>
+      </div>
+    </form>
+  </ng-container>
+</kc-login-template>

package/src/login/pages/login-x509-info/login-x509-info.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: [TemplateComponent, MsgStrPipe, KcClassDirective],
+    selector: "kc-root",
+    templateUrl: "login-x509-info.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => LoginX509InfoComponent)
+        }
+    ]
+})
+export class LoginX509InfoComponent extends ComponentReference {
+    kcContext = inject<Extract<KcContext, { pageId: "login-x509-info.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/logout-confirm/logout-confirm.component.html

@@ -0,0 +1,59 @@
+@let url = kcContext.url;
+@let logoutConfirm = kcContext.logoutConfirm;
+@let client = kcContext.client;
+
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'logoutConfirmTitle' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <div
+      id="kc-logout-confirm"
+      class="content-area"
+    >
+      <p class="instruction">{{ 'logoutConfirmHeader' | msgStr }}</p>
+      <form
+        class="form-actions"
+        [action]="url.logoutConfirmAction"
+        method="POST"
+      >
+        <input
+          type="hidden"
+          name="session_code"
+          [value]="logoutConfirm.code"
+        />
+        <div [kcClass]="'kcFormGroupClass'">
+          <div id="kc-form-options">
+            <div [kcClass]="'kcFormOptionsWrapperClass'"></div>
+          </div>
+          <div
+            id="kc-form-buttons"
+            class="kcFormGroupClass"
+          >
+            <input
+              tabIndex="4"
+              [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+              name="confirmLogout"
+              id="kc-logout"
+              type="submit"
+              [value]="'doLogout' | msgStr"
+            />
+          </div>
+        </div>
+      </form>
+      <div id="kc-info-message">
+        @if (!logoutConfirm.skipLink && client.baseUrl) {
+          <p>
+            <a [href]="client.baseUrl">{{ 'backToApplication' | msgStr }}</a>
+          </p>
+        }
+      </div>
+    </div>
+  </ng-container>
+</kc-login-template>

package/src/login/pages/logout-confirm/logout-confirm.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: "logout-confirm.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => LogoutConfirmComponent)
+        }
+    ]
+})
+export class LogoutConfirmComponent extends ComponentReference {
+    kcContext = inject<Extract<KcContext, { pageId: "logout-confirm.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;
+}