@keycloakify/angular 0.0.1-rc.0

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

@@ -0,0 +1,54 @@
+@let skipLink = kcContext.skipLink;
+@let actionUri = kcContext.actionUri;
+@let pageRedirectUri = kcContext.pageRedirectUri;
+@let client = kcContext.client;
+@let messageHeader = kcContext.messageHeader;
+@let message = kcContext.message;
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    <span [innerHTML]="messageHeader ?? message.summary | advancedMsgStr | kcSanitize: 'html'"> </span>
+  </ng-container>
+  <ng-container content>
+    <div id="kc-info-message">
+      <p
+        class="instruction"
+        [innerHTML]="infoMessage | kcSanitize: 'html'"
+      ></p>
+      @if (!skipLink) {
+        @if (pageRedirectUri) {
+          <p>
+            <a
+              [href]="pageRedirectUri"
+              [innerHTML]="'backToApplication' | msgStr | kcSanitize: 'html'"
+            >
+            </a>
+          </p>
+        }
+        @if (actionUri) {
+          <p>
+            <a
+              [href]="actionUri"
+              [innerHTML]="'proceedWithAction' | msgStr | kcSanitize: 'html'"
+            >
+            </a>
+          </p>
+        }
+        @if (client.baseUrl) {
+          <p>
+            <a
+              [href]="client.baseUrl"
+              [innerHTML]="'backToApplication' | msgStr | kcSanitize: 'html'"
+            >
+            </a>
+          </p>
+        }
+      }
+    </div>
+  </ng-container>
+</kc-login-template>

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

@@ -0,0 +1,65 @@
+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 { 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({
+    standalone: true,
+    imports: [TemplateComponent, MsgStrPipe, KcSanitizePipe, AdvancedMsgStrPipe],
+    selector: "kc-root",
+    templateUrl: "info.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        AdvancedMsgStrPipe,
+        MsgStrPipe,
+        KcSanitizePipe,
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => InfoComponent)
+        }
+    ]
+})
+export class InfoComponent extends ComponentReference {
+    kcContext = inject<Extract<KcContext, { pageId: "info.ftl" }>>(KC_CONTEXT);
+    advancedMsgStr = inject(AdvancedMsgStrPipe);
+    kcSanitize = inject(KcSanitizePipe);
+    msgStr = inject(MsgStrPipe);
+    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;
+
+    get infoMessage() {
+        let html = this.kcContext.message.summary;
+        if (this.kcContext.requiredActions) {
+            html += "<b>";
+
+            html += this.kcContext.requiredActions
+                .map(requiredAction =>
+                    this.advancedMsgStr.transform(`requiredAction.${requiredAction}`)
+                )
+                .join(", ");
+
+            html += "</b>";
+        }
+        return html;
+    }
+}

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

@@ -0,0 +1,212 @@
+@let realm = kcContext.realm;
+@let social = kcContext.social;
+@let usernameHidden = kcContext.usernameHidden;
+@let auth = kcContext.auth;
+@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>
+    {{ 'loginAccountTitle' | msgStr }}
+  </ng-container>
+  <ng-container infoNode>
+    <div id="kc-registration-container">
+      <div id="kc-registration">
+        <span>
+          {{ 'noAccount' | msgStr }}
+          <a
+            tabindex="8"
+            [href]="url?.registrationUrl"
+          >
+            {{ 'doRegister' | msgStr }}
+          </a>
+        </span>
+      </div>
+    </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">
+        <!-- login.component.html -->
+        @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
+                  [defaultValue]="login?.username || ''"
+                  [attr.aria-invalid]="messagesPerField?.existsError('username', 'password')"
+                />
+                @if (messagesPerField?.existsError('username', 'password')) {
+                  <span
+                    id="input-error"
+                    [kcClass]="'kcInputErrorMessageClass'"
+                    aria-live="polite"
+                    [innerHTML]="messagesPerField?.getFirstError('username', 'password') | kcSanitize: 'html'"
+                  >
+                  </span>
+                }
+              </div>
+            }
+
+            <div [kcClass]="'kcFormGroupClass'">
+              <label
+                for="password"
+                [kcClass]="'kcLabelClass'"
+              >
+                {{ 'password' | msgStr }}
+              </label>
+
+              <kc-password-wrapper passwordInputId="password">
+                <input
+                  tabindex="3"
+                  id="password"
+                  [kcClass]="'kcInputClass'"
+                  name="password"
+                  type="password"
+                  autocomplete="off"
+                  [attr.aria-invalid]="messagesPerField.existsError('username', 'password')"
+                />
+              </kc-password-wrapper>
+              @if (usernameHidden && messagesPerField?.existsError('username', 'password')) {
+                <span
+                  id="input-error"
+                  [kcClass]="'kcInputErrorMessageClass'"
+                  aria-live="polite"
+                  [innerHTML]="messagesPerField?.getFirstError('username', 'password') | 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 [kcClass]="'kcFormOptionsWrapperClass'">
+                @if (realm?.resetPasswordAllowed) {
+                  <span>
+                    <a
+                      tabindex="6"
+                      [href]="url?.loginResetCredentialsUrl"
+                      >{{ 'doForgotPassword' | msgStr }}</a
+                    >
+                  </span>
+                }
+              </div>
+            </div>
+            <div
+              id="kc-form-buttons"
+              [kcClass]="'kcFormGroupClass'"
+            >
+              <input
+                type="hidden"
+                id="id-hidden-input"
+                name="credentialId"
+                [value]="auth?.selectedCredential"
+              />
+              <input
+                tabindex="7"
+                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+                name="login"
+                id="kc-login"
+                type="submit"
+                [value]="'doLogIn' | msgStr"
+                [disabled]="isLoginButtonDisabled()"
+              />
+            </div>
+          </form>
+        }
+      </div>
+    </div>
+  </ng-container>
+</kc-login-template>

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

@@ -0,0 +1,61 @@
+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 { PasswordWrapperComponent } from "@keycloakify/angular/login/components/password-wrapper/password-wrapper.component";
+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.component.html",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        KcClassDirective,
+        AsyncPipe,
+        KcSanitizePipe,
+        PasswordWrapperComponent,
+        NgClass,
+        TemplateComponent,
+        MsgStrPipe
+    ],
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => LoginComponent)
+        }
+    ]
+})
+export class LoginComponent extends ComponentReference {
+    kcContext = inject<Extract<KcContext, { pageId: "login.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",
+        "password"
+    );
+}

package/src/login/pages/login-config-totp/login-config-totp.component.html

@@ -0,0 +1,190 @@
+@let totp = kcContext.totp;
+@let url = kcContext.url;
+@let messagesPerField = kcContext.messagesPerField;
+@let mode = kcContext.mode;
+@let isAppInitiatedAction = kcContext.isAppInitiatedAction;
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'loginTotpStep1' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <ol id="kc-totp-settings">
+      <li>
+        <p>{{ 'loginTotpStep1' | msgStr }}</p>
+        <ul id="kc-totp-supported-apps">
+          @for (app of totp.supportedApplications; track app) {
+            <li>{{ app | advancedMsgStr }}</li>
+          }
+        </ul>
+      </li>
+      @if (kcContext.mode === 'manual') {
+        <li>
+          <p>{{ 'loginTotpManualStep2' | msgStr }}</p>
+          <p>
+            <span id="kc-totp-secret-key">{{ totp.totpSecretEncoded }}</span>
+          </p>
+          <p>
+            <a
+              href="{{ totp.qrUrl }}"
+              id="mode-barcode"
+            >
+              {{ 'loginTotpScanBarcode' | msgStr }}
+            </a>
+          </p>
+        </li>
+        <li>
+          <p>{{ 'loginTotpManualStep3' | msgStr }}</p>
+          <p></p>
+          <ul>
+            <li id="kc-totp-type">
+              {{ 'loginTotpType' | msgStr }}: {{ 'loginTotp.' + totp.policy.type | advancedMsgStr }}
+            </li>
+            <li id="kc-totp-algorithm">{{ 'loginTotpAlgorithm' | msgStr }}: {{ totp.policy.getAlgorithmKey() }}</li>
+            <li id="kc-totp-digits">{{ 'loginTotpDigits' | msgStr }}: {{ totp.policy.digits }}</li>
+            @if (totp.policy.type === 'totp') {
+              <li id="kc-totp-period">{{ 'loginTotpInterval' | msgStr }}: {{ totp.policy.period }}</li>
+            } @else {
+              <li id="kc-totp-counter">{{ 'loginTotpCounter' | msgStr }}: {{ totp.policy.initialCounter }}</li>
+            }
+          </ul>
+        </li>
+      } @else {
+        <li>
+          <p>{{ 'loginTotpStep2' | msgStr }}</p>
+          <img
+            id="kc-totp-secret-qr-code"
+            src="{{ 'data:image/png;base64, ' + totp.totpSecretQrCode }}"
+            alt="Figure: Barcode"
+          />
+          <br />
+          <p>
+            <a
+              href="{{ totp.manualUrl }}"
+              id="mode-manual"
+            >
+              {{ 'loginTotpUnableToScan' | msgStr }}
+            </a>
+          </p>
+        </li>
+      }
+      <li>
+        <p>{{ 'loginTotpStep3' | msgStr }}</p>
+        <p>{{ 'loginTotpStep3DeviceName' | msgStr }}</p>
+      </li>
+    </ol>
+    <form
+      [action]="url.loginAction"
+      [kcClass]="'kcFormClass'"
+      id="kc-totp-settings-form"
+      method="post"
+    >
+      <div [kcClass]="'kcFormGroupClass'">
+        <div [kcClass]="'kcInputWrapperClass'">
+          <label
+            for="totp"
+            [kcClass]="'kcLabelClass'"
+          >
+            {{ 'authenticatorCode' | msgStr }}
+          </label>
+          <span class="required">*</span>
+        </div>
+        <div [kcClass]="'kcInputWrapperClass'">
+          <input
+            type="text"
+            id="totp"
+            name="totp"
+            autoComplete="off"
+            [kcClass]="'kcInputClass'"
+            [attr.aria-invalid]="messagesPerField.existsError('totp')"
+          />
+          @if (messagesPerField.existsError('totp')) {
+            <span
+              id="input-error-otp-code"
+              [kcClass]="'kcInputErrorMessageClass'"
+              aria-live="polite"
+              [innerHTML]="messagesPerField.get('totp') | kcSanitize: 'html'"
+            ></span>
+          }
+        </div>
+        <input
+          type="hidden"
+          id="totpSecret"
+          name="totpSecret"
+          [value]="totp.totpSecret"
+        />
+        @if (mode) {
+          <input
+            type="hidden"
+            id="mode"
+            [value]="mode"
+          />
+        }
+      </div>
+      <div [kcClass]="'kcFormGroupClass'">
+        <div [kcClass]="'kcInputWrapperClass'">
+          <label
+            for="userLabel"
+            [kcClass]="'kcLabelClass'"
+          >
+            {{ 'loginTotpDeviceName' | msgStr }}
+          </label>
+          @if (totp.otpCredentials.length >= 1) {
+            <span class="required">*</span>
+          }
+        </div>
+        <div [kcClass]="'kcInputWrapperClass'">
+          <input
+            type="text"
+            id="userLabel"
+            name="userLabel"
+            autoComplete="off"
+            [kcClass]="'kcInputClass'"
+            [attr.aria-invalid]="messagesPerField.existsError('userLabel')"
+          />
+          @if (messagesPerField.existsError('userLabel')) {
+            <span
+              id="input-error-otp-label"
+              [kcClass]="'kcInputErrorMessageClass'"
+              aria-live="polite"
+              [innerHTML]="messagesPerField.get('userLabel') | kcSanitize: 'html'"
+            ></span>
+          }
+        </div>
+      </div>
+      <div [kcClass]="'kcFormGroupClass'">
+        <kc-logout-other-sessions />
+      </div>
+
+      @if (isAppInitiatedAction) {
+        <input
+          type="submit"
+          [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+          id="saveTOTPBtn"
+          [value]="'doSubmit' | msgStr"
+        />
+        <button
+          type="submit"
+          [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass', 'kcButtonLargeClass']"
+          id="cancelTOTPBtn"
+          name="cancel-aia"
+          [value]="true"
+        >
+          {{ 'doCancel' | msgStr }}
+        </button>
+      } @else {
+        <input
+          type="submit"
+          [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+          id="saveTOTPBtn"
+          [value]="'doSubmit' | msgStr"
+        />
+      }
+    </form> </ng-container
+></kc-login-template>
+>

package/src/login/pages/login-config-totp/login-config-totp.component.ts

@@ -0,0 +1,57 @@
+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 { LogoutOtherSessionsComponent } from "@keycloakify/angular/login/components/logout-other-sessions/logout-other-sessions.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({
+    standalone: true,
+    imports: [
+        TemplateComponent,
+        MsgStrPipe,
+        AdvancedMsgStrPipe,
+        KcClassDirective,
+        KcSanitizePipe,
+        LogoutOtherSessionsComponent
+    ],
+    selector: "kc-root",
+    templateUrl: "login-config-totp.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => LoginConfigTotpComponent)
+        }
+    ]
+})
+export class LoginConfigTotpComponent extends ComponentReference {
+    kcContext =
+        inject<Extract<KcContext, { pageId: "login-config-totp.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 = this.kcContext.messagesPerField.existsError(
+        "totp",
+        "userLabel"
+    );
+}

package/src/login/pages/login-idp-link-confirm/login-idp-link-confirm.component.html

@@ -0,0 +1,41 @@
+@let url = kcContext.url;
+@let idpAlias = kcContext.idpAlias;
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'confirmLinkIdpTitle' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <form
+      id="kc-register-form"
+      [action]="url.loginAction"
+      method="post"
+    >
+      <div [kcClass]="'kcFormGroupClass'">
+        <button
+          type="submit"
+          [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+          name="submitAction"
+          id="updateProfile"
+          value="updateProfile"
+        >
+          {{ 'confirmLinkIdpReviewProfile' | msgStr }}
+        </button>
+        <button
+          type="submit"
+          [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+          name="submitAction"
+          id="linkAccount"
+          value="linkAccount"
+        >
+          {{ 'confirmLinkIdpContinue' | msgStr: idpAlias }}
+        </button>
+      </div>
+    </form>
+  </ng-container>
+</kc-login-template>