@keycloakify/angular 0.0.1-rc.17 → 0.0.1-rc.18

package/src/account/pages/account/account.component.html

@@ -16,9 +16,9 @@
             </div>
         </div>
         <form
-            [action]="url.accountUrl"
             class="form-horizontal"
             method="post"
+            [action]="url.accountUrl"
         >
             <input
                 type="hidden"
@@ -143,17 +143,17 @@
                         }
                         <button
                             type="submit"
-                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                             name="submitAction"
                             value="Save"
+                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                         >
                             {{ i18n.msgStr('doSave') }}
                         </button>
                         <button
                             type="submit"
-                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                             name="submitAction"
                             value="Cancel"
+                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                         >
                             {{ i18n.msgStr('doCancel') }}
                         </button>

package/src/account/pages/applications/applications.component.html

@@ -10,8 +10,8 @@
             </div>
 
             <form
-                [action]="url.applicationsUrl"
                 method="post"
+                [action]="url.applicationsUrl"
             >
                 <input
                     type="hidden"
@@ -137,9 +137,9 @@
                                     ) {
                                         <button
                                             type="submit"
+                                            name="clientId"
                                             [kcClass]="['kcButtonPrimaryClass', 'kcButtonClass']"
                                             [id]="'revoke-' + application.client.clientId"
-                                            name="clientId"
                                             [value]="application.client.id"
                                         >
                                             {{ i18n.msgStr('revoke') }}

package/src/account/pages/federatedIdentity/federatedIdentity.component.html

@@ -15,8 +15,8 @@
                     <div class="row margin-bottom">
                         <div class="col-sm-2 col-md-2">
                             <label
-                                [for]="identity.providerId"
                                 class="control-label"
+                                [for]="identity.providerId"
                             >
                                 {{ identity.displayName }}
                             </label>
@@ -32,9 +32,9 @@
                             @if (identity.connected) {
                                 @if (federatedIdentity.removeLinkPossible) {
                                     <form
-                                        [action]="url.socialUrl"
                                         method="post"
                                         class="form-inline"
+                                        [action]="url.socialUrl"
                                     >
                                         <input
                                             type="hidden"
@@ -52,8 +52,8 @@
                                             [value]="identity.providerId"
                                         />
                                         <button
-                                            [id]="'remove-link-' + identity.providerId"
                                             class="btn btn-default"
+                                            [id]="'remove-link-' + identity.providerId"
                                         >
                                             {{ i18n.msgStr('doRemove') }}
                                         </button>
@@ -61,9 +61,9 @@
                                 }
                             } @else {
                                 <form
-                                    [action]="url.socialUrl"
                                     method="post"
                                     class="form-inline"
+                                    [action]="url.socialUrl"
                                 >
                                     <input
                                         type="hidden"
@@ -81,8 +81,8 @@
                                         [value]="identity.providerId"
                                     />
                                     <button
-                                        [id]="'add-link-' + identity.providerId"
                                         class="btn btn-default"
+                                        [id]="'add-link-' + identity.providerId"
                                     >
                                         {{ i18n.msgStr('doAdd') }}
                                     </button>

package/src/account/pages/password/password.component.html

@@ -15,17 +15,17 @@
         </div>
 
         <form
-            [action]="url.passwordUrl"
             class="form-horizontal"
             method="post"
+            [action]="url.passwordUrl"
         >
             <input
                 type="text"
                 id="username"
                 name="username"
-                [value]="account.username ?? ''"
                 autoComplete="username"
                 readOnly
+                [value]="account.username ?? ''"
                 [style.display]="'none'"
             />
 
@@ -115,11 +115,11 @@
                 >
                     <div>
                         <button
-                            [disabled]="newPasswordError() !== '' || newPasswordConfirmError() !== ''"
                             type="submit"
-                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                             name="submitAction"
                             value="Save"
+                            [disabled]="newPasswordError() !== '' || newPasswordConfirmError() !== ''"
+                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                         >
                             {{ i18n.msgStr('doSave') }}
                         </button>

package/src/account/pages/password/password.component.ts

@@ -42,6 +42,7 @@ export class PasswordComponent extends ComponentReference {
 
     constructor() {
         super();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         window.kcContext = {
             ...this.kcContext,

package/src/account/pages/sessions/sessions.component.html

@@ -42,8 +42,8 @@
         </table>
 
         <form
-            [action]="url.sessionsUrl"
             method="post"
+            [action]="url.sessionsUrl"
         >
             <input
                 type="hidden"

package/src/account/pages/totp/totp.component.html

@@ -40,9 +40,9 @@
                             <td class="provider">{{ credential.userLabel || '' }}</td>
                             <td class="action">
                                 <form
-                                    [action]="url.totpUrl"
                                     method="post"
                                     class="form-inline"
+                                    [action]="url.totpUrl"
                                 >
                                     <input
                                         type="hidden"
@@ -63,8 +63,8 @@
                                         [value]="credential.id"
                                     />
                                     <button
-                                        [id]="'remove-mobile-' + index"
                                         class="btn btn-default"
+                                        [id]="'remove-mobile-' + index"
                                     >
                                         <i class="pficon pficon-delete"></i>
                                     </button>
@@ -95,8 +95,8 @@
                             </p>
                             <p>
                                 <a
-                                    [href]="totp.qrUrl"
                                     id="mode-barcode"
+                                    [href]="totp.qrUrl"
                                 >
                                     {{ i18n.msgStr('totpScanBarcode') }}
                                 </a>
@@ -121,14 +121,14 @@
                             <p>
                                 <img
                                     id="kc-totp-secret-qr-code"
-                                    [src]="'data:image/png;base64, ' + totp.totpSecretQrCode"
                                     alt="Figure: Barcode"
+                                    [src]="'data:image/png;base64, ' + totp.totpSecretQrCode"
                                 />
                             </p>
                             <p>
                                 <a
-                                    [href]="totp.manualUrl"
                                     id="mode-manual"
+                                    [href]="totp.manualUrl"
                                 >
                                     {{ i18n.msgStr('totpUnableToScan') }}
                                 </a>
@@ -142,10 +142,10 @@
                 </ol>
                 <hr />
                 <form
-                    [action]="url.totpUrl"
-                    [kcClass]="'kcFormClass'"
                     id="kc-totp-settings-form"
                     method="post"
+                    [action]="url.totpUrl"
+                    [kcClass]="'kcFormClass'"
                 >
                     <input
                         type="hidden"
@@ -175,8 +175,8 @@
                             @if (messagesPerField.existsError('totp')) {
                                 <span
                                     id="input-error-otp-code"
-                                    [kcClass]="'kcInputErrorMessageClass'"
                                     aria-live="polite"
+                                    [kcClass]="'kcInputErrorMessageClass'"
                                     [innerHTML]="messagesPerField.get('totp') | kcSanitize: 'html'"
                                 ></span>
                             }
@@ -220,8 +220,8 @@
                             @if (messagesPerField.existsError('userLabel')) {
                                 <span
                                     id="input-error-otp-label"
-                                    [kcClass]="'kcInputErrorMessageClass'"
                                     aria-live="polite"
+                                    [kcClass]="'kcInputErrorMessageClass'"
                                     [innerHTML]="messagesPerField.get('userLabel') | kcSanitize: 'html'"
                                 ></span>
                             }
@@ -236,16 +236,16 @@
                         <div [kcClass]="'kcInputWrapperClass'">
                             <input
                                 type="submit"
-                                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                                 id="saveTOTPBtn"
+                                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                                 [value]="i18n.msgStr('doSave')"
                             />
                             <button
                                 type="submit"
-                                [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
                                 id="cancelTOTPBtn"
                                 name="submitAction"
                                 value="Cancel"
+                                [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
                             >
                                 {{ i18n.msgStr('doCancel') }}
                             </button>

package/src/account/providers/keycloakify-angular/keycloakify-angular.providers.ts

@@ -24,6 +24,7 @@ export const provideKeycloakifyAngularAccount = (
     makeEnvironmentProviders([
         {
             provide: KC_ACCOUNT_CONTEXT,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             useValue: window.kcContext
         },

package/src/login/components/add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component.html

@@ -1,9 +1,9 @@
 @let idPostfix = attribute()?.name ?? '' + '-' + (fieldIndex() ?? 0 + 1);
 @if (hasRemove()) {
     <button
-        [id]="'kc-remove-' + idPostfix"
         type="button"
         class="pf-c-button pf-m-inline pf-m-link"
+        [id]="'kc-remove-' + idPostfix"
         (click)="onRemove()"
     >
         {{ i18n.msgStr('remove') }}
@@ -14,9 +14,9 @@
 }
 @if (hasAdd()) {
     <button
-        [id]="'kc-add-' + idPostfix"
         type="button"
         class="pf-c-button pf-m-inline pf-m-link"
+        [id]="'kc-add-' + idPostfix"
         (click)="onAdd()"
     >
         {{ i18n.msgStr('addValue') }}

package/src/login/components/field-errors/field-errors.component.html

@@ -1,8 +1,8 @@
 @let index = fieldIndex();
 <span
+    aria-live="polite"
     [id]="'input-error-' + attribute.name + (index === undefined ? '' : '-' + index)"
     [kcClass]="'kcInputErrorMessageClass'"
-    aria-live="polite"
 >
     @for (error of displayableErrors(); track error; let i = $index) {
         @if (error.fieldIndex === index) {

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

@@ -8,7 +8,7 @@
                 [value]="$any(valueOrValues())"
                 [displayableErrors]="displayableErrors()"
                 (dispatchFormAction)="dispatchFormAction.emit($event)"
-            ></kc-textarea-tag>
+            />
         }
         @case (type === 'select' || type === 'multiselect' ? type : '') {
             <kc-select-tag
@@ -16,7 +16,7 @@
                 [valueOrValues]="valueOrValues()"
                 [displayableErrors]="displayableErrors()"
                 (dispatchFormAction)="dispatchFormAction.emit($event)"
-            ></kc-select-tag>
+            />
         }
         @case (type === 'select-radiobuttons' || type === 'multiselect-checkboxes' ? type : '') {
             <kc-input-tag-selects
@@ -24,7 +24,7 @@
                 [valueOrValues]="valueOrValues()"
                 [displayableErrors]="displayableErrors()"
                 (dispatchFormAction)="dispatchFormAction.emit($event)"
-            ></kc-input-tag-selects>
+            />
         }
         @default {
             @let values = valueOrValues();
@@ -37,7 +37,7 @@
                         [fieldIndex]="i"
                         [displayableErrors]="displayableErrors()"
                         (dispatchFormAction)="dispatchFormAction.emit($event)"
-                    ></kc-input-tag>
+                    />
                 }
             } @else {
                 @if (attr.name === 'password' || attr.name === 'password-confirm') {
@@ -47,7 +47,7 @@
                             [valueOrValues]="valueOrValues()"
                             [displayableErrors]="displayableErrors()"
                             (dispatchFormAction)="dispatchFormAction.emit($event)"
-                        ></kc-input-tag>
+                        />
                     </kc-password-wrapper>
                 } @else {
                     <kc-input-tag
@@ -55,7 +55,7 @@
                         [valueOrValues]="valueOrValues()"
                         [displayableErrors]="displayableErrors()"
                         (dispatchFormAction)="dispatchFormAction.emit($event)"
-                    ></kc-input-tag>
+                    />
                 }
             }
         }

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

@@ -34,12 +34,12 @@
             [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/password-wrapper/password-wrapper.component.html

@@ -1,5 +1,5 @@
 <div [kcClass]="'kcInputGroup'">
-    <ng-content></ng-content>
+    <ng-content />
     <button
         type="button"
         [kcClass]="'kcFormPasswordVisibilityButtonClass'"
@@ -8,8 +8,8 @@
         (click)="togglePasswordVisibility()"
     >
         <i
-            [kcClass]="isPasswordRevealed() ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow'"
             aria-hidden="true"
+            [kcClass]="isPasswordRevealed() ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow'"
         ></i>
     </button>
 </div>

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

@@ -1,7 +1,7 @@
 @let formFieldStates = formState().formFieldStates;
 
 @for (fieldState of formFieldStates; track fieldState.attribute) {
-    <kc-group-label [attribute]="fieldState.attribute"> </kc-group-label>
+    <kc-group-label [attribute]="fieldState.attribute" />
 
     @if (beforeField) {
         <ng-container
@@ -11,8 +11,7 @@
                 valueOrValues: fieldState.valueOrValues,
                 displayableErrors: fieldState.displayableErrors
             }"
-        >
-        </ng-container>
+        />
     }
 
     <div
@@ -34,9 +33,9 @@
         <div [kcClass]="'kcInputWrapperClass'">
             @if (fieldState.attribute.annotations.inputHelperTextBefore) {
                 <div
+                    aria-live="polite"
                     [kcClass]="'kcInputHelperTextBeforeClass'"
                     [id]="'form-help-text-before-' + fieldState.attribute.name"
-                    aria-live="polite"
                 >
                     {{ i18n.advancedMsgStr(fieldState.attribute.annotations.inputHelperTextBefore) }}
                 </div>
@@ -47,19 +46,17 @@
                 [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
+                    aria-live="polite"
                     [kcClass]="'kcInputHelperTextAfterClass'"
                     [id]="'form-help-text-after-' + fieldState.attribute.name"
-                    aria-live="polite"
                 >
                     {{ i18n.advancedMsgStr(fieldState.attribute.annotations.inputHelperTextAfter) }}
                 </div>
@@ -73,8 +70,7 @@
                         valueOrValues: fieldState.valueOrValues,
                         displayableErrors: fieldState.displayableErrors
                     }"
-                >
-                </ng-container>
+                />
             }
             <!-- NOTE: Downloading of html5DataAnnotations scripts is done in the useUserProfileForm hook -->
         </div>

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

@@ -33,16 +33,16 @@
                         >
                             <div
                                 id="kc-locale-dropdown"
-                                [kcClass]="'kcLocaleDropDownClass'"
                                 class="menu-button-links"
+                                [kcClass]="'kcLocaleDropDownClass'"
                             >
                                 <button
                                     tabindex="1"
                                     id="kc-current-locale-link"
-                                    [attr.aria-label]="i18n.msgStr('languages')"
                                     aria-haspopup="true"
                                     aria-expanded="false"
                                     aria-controls="language-switch1"
+                                    [attr.aria-label]="i18n.msgStr('languages')"
                                 >
                                     {{ i18n.currentLanguage.label }}
                                 </button>
@@ -56,8 +56,8 @@
                                 >
                                     @for (entry of i18n.enabledLanguages; track entry; let idx = $index) {
                                         <li
-                                            [kcClass]="'kcLocaleListItemClass'"
                                             role="none"
+                                            [kcClass]="'kcLocaleListItemClass'"
                                         >
                                             <a
                                                 role="menuitem"
@@ -80,7 +80,7 @@
                 <ng-template #node>
                     @if (auth && !auth.showUsername && !auth.showResetCredentials) {
                         <h1 id="kc-page-title">
-                            <ng-content select="[headerNode]"></ng-content>
+                            <ng-content select="[headerNode]" />
                         </h1>
                     } @else {
                         <div
@@ -107,8 +107,8 @@
                 @if (displayRequiredFields()) {
                     <div [kcClass]="'kcContentWrapperClass'">
                         <div
-                            [kcClass]="'kcLabelWrapperClass'"
                             class="subtitle"
+                            [kcClass]="'kcLabelWrapperClass'"
                         >
                             <span class="subtitle">
                                 <span class="required">*</span>
@@ -116,11 +116,11 @@
                             </span>
                         </div>
                         <div class="col-md-10">
-                            <ng-container [ngTemplateOutlet]="node"></ng-container>
+                            <ng-container [ngTemplateOutlet]="node" />
                         </div>
                     </div>
                 } @else {
-                    <ng-container [ngTemplateOutlet]="node"></ng-container>
+                    <ng-container [ngTemplateOutlet]="node" />
                 }
             </header>
 
@@ -156,12 +156,12 @@
                         </div>
                     }
                     <!-- Content -->
-                    <ng-content select="[content]"></ng-content>
+                    <ng-content select="[content]" />
                     @if (!!auth && auth?.showTryAnotherWayLink) {
                         <form
                             id="kc-select-try-another-way-form"
-                            [action]="url?.loginAction"
                             method="post"
+                            [action]="url?.loginAction"
                         >
                             <div [kcClass]="'kcFormGroupClass'">
                                 <div [kcClass]="'kcFormGroupClass'">
@@ -181,7 +181,7 @@
                         </form>
                     }
 
-                    <ng-content select="[socialProvidersNode]"></ng-content>
+                    <ng-content select="[socialProvidersNode]" />
                     <!-- Info display -->
                     @if (displayInfo()) {
                         <div
@@ -192,7 +192,7 @@
                                 id="kc-info-wrapper"
                                 [kcClass]="'kcInfoAreaWrapperClass'"
                             >
-                                <ng-content select="[infoNode]"></ng-content>
+                                <ng-content select="[infoNode]" />
                             </div>
                         </div>
                     }

package/src/login/directives/kc-class/kc-class.directive.ts

@@ -10,9 +10,8 @@ import {
     Renderer2,
     ɵstringify as stringify
 } from '@angular/core';
-import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { type ClassKey, getKcClsx } from 'keycloakify/login/lib/kcClsx';
 
 interface CssClassState {
     // PERF: could use a bit mask to represent state as all fields are boolean flags

package/src/login/pages/delete-account-confirm/delete-account-confirm.component.html

@@ -6,9 +6,9 @@
     </ng-container>
     <ng-container content>
         <form
-            [action]="url.loginAction"
             method="post"
             class="form-actions"
+            [action]="url.loginAction"
         >
             <div
                 class="alert alert-warning"
@@ -27,17 +27,17 @@
             </p>
             <div id="kc-form-buttons">
                 <input
-                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                     type="submit"
+                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                     [value]="i18n.msgStr('doConfirmDelete')"
                 />
                 @if (triggered_from_aia) {
                     <button
-                        [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
                         style="margin-left: calc(100% - 220px)"
                         type="submit"
                         name="cancel-aia"
                         value="true"
+                        [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
                     >
                         {{ i18n.msgStr('doCancel') }}
                     </button>

package/src/login/pages/delete-credential/delete-credential.component.html

@@ -11,23 +11,23 @@
 
         <form
             class="form-actions"
-            [action]="url.loginAction"
             method="post"
+            [action]="url.loginAction"
         >
             <input
-                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                 name="accept"
                 id="kc-accept"
                 type="submit"
+                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                 [value]="i18n.msgStr('doConfirmDelete')"
             />
 
             <input
-                [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
                 name="cancel-aia"
-                [value]="i18n.msgStr('doCancel')"
                 id="kc-decline"
                 type="submit"
+                [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
+                [value]="i18n.msgStr('doCancel')"
             />
         </form>
         <div class="clearfix"></div>

package/src/login/pages/frontchannel-logout/frontchannel-logout.component.html

@@ -16,8 +16,8 @@
                 <li>
                     {{ client.name }}
                     <iframe
-                        [src]="'client.frontChannelLogoutUrl' | kcSanitize: 'resourceUrl'"
                         style="display: none"
+                        [src]="'client.frontChannelLogoutUrl' | kcSanitize: 'resourceUrl'"
                     ></iframe>
                 </li>
             }

package/src/login/pages/idp-review-user-profile/idp-review-user-profile.component.html

@@ -12,11 +12,11 @@
     <ng-container content>
         <form
             id="kc-idp-review-profile-form"
+            method="post"
             [kcClass]="'kcFormClass'"
             [action]="url.loginAction"
-            method="post"
         >
-            <ng-container [ngComponentOutlet]="userProfileFormFields() ?? null"></ng-container>
+            <ng-container [ngComponentOutlet]="userProfileFormFields() ?? null" />
             <div [kcClass]="'kcFormGroupClass'">
                 <div
                     id="kc-form-options"
@@ -29,8 +29,8 @@
                     [kcClass]="'kcFormButtonsClass'"
                 >
                     <input
-                        [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                         type="submit"
+                        [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                         [value]="i18n.msgStr('doSubmit')"
                         [disabled]="!isFormSubmittable()"
                     />