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

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

@@ -2,155 +2,147 @@
 @let stateChecker = kcContext.stateChecker;
 @let applications = kcContext.applications?.applications;
 
-<kc-account-template [active]="'applications'">
-    <ng-container content>
-        <div class="row">
-            <div class="col-md-10">
-                <h2>{{ i18n.msgStr('applicationsHtmlTitle') }}</h2>
-            </div>
+<div class="row">
+    <div class="col-md-10">
+        <h2>{{ i18n.msgStr('applicationsHtmlTitle') }}</h2>
+    </div>
 
-            <form
-                method="post"
-                [action]="url.applicationsUrl"
-            >
-                <input
-                    type="hidden"
-                    id="stateChecker"
-                    name="stateChecker"
-                    [value]="stateChecker"
-                />
-                <input
-                    type="hidden"
-                    id="referrer"
-                    name="referrer"
-                    [value]="stateChecker"
-                />
+    <form
+        method="post"
+        [action]="url.applicationsUrl"
+    >
+        <input
+            type="hidden"
+            id="stateChecker"
+            name="stateChecker"
+            [value]="stateChecker"
+        />
+        <input
+            type="hidden"
+            id="referrer"
+            name="referrer"
+            [value]="stateChecker"
+        />
 
-                <table class="table table-striped table-bordered">
-                    <thead>
-                        <tr>
-                            <td>{{ i18n.msgStr('application') }}</td>
-                            <td>{{ i18n.msgStr('availableRoles') }}</td>
-                            <td>{{ i18n.msgStr('grantedPermissions') }}</td>
-                            <td>{{ i18n.msgStr('additionalGrants') }}</td>
-                            <td>{{ i18n.msgStr('action') }}</td>
-                        </tr>
-                    </thead>
+        <table class="table table-striped table-bordered">
+            <thead>
+                <tr>
+                    <td>{{ i18n.msgStr('application') }}</td>
+                    <td>{{ i18n.msgStr('availableRoles') }}</td>
+                    <td>{{ i18n.msgStr('grantedPermissions') }}</td>
+                    <td>{{ i18n.msgStr('additionalGrants') }}</td>
+                    <td>{{ i18n.msgStr('action') }}</td>
+                </tr>
+            </thead>
 
-                    <tbody>
-                        @for (application of applications ?? []; track application) {
-                            <tr>
-                                <td>
-                                    @if (application.effectiveUrl) {
-                                        <a [href]="application.effectiveUrl">
-                                            @if (application.client.name) {
-                                                {{ i18n.advancedMsgStr(application.client.name) }}
-                                            } @else {
-                                                {{ application.client.clientId }}
-                                            }
-                                        </a>
+            <tbody>
+                @for (application of applications ?? []; track application) {
+                    <tr>
+                        <td>
+                            @if (application.effectiveUrl) {
+                                <a [href]="application.effectiveUrl">
+                                    @if (application.client.name) {
+                                        {{ i18n.advancedMsgStr(application.client.name) }}
                                     } @else {
-                                        @if (application.client.name) {
-                                            {{ i18n.advancedMsgStr(application.client.name) }}
-                                        } @else {
-                                            {{ application.client.clientId }}
-                                        }
+                                        {{ application.client.clientId }}
                                     }
-                                </td>
+                                </a>
+                            } @else {
+                                @if (application.client.name) {
+                                    {{ i18n.advancedMsgStr(application.client.name) }}
+                                } @else {
+                                    {{ application.client.clientId }}
+                                }
+                            }
+                        </td>
 
-                                <td>
-                                    @if (!(application.realmRolesAvailable | isArrayWithEmptyObject)) {
-                                        @for (role of application.realmRolesAvailable; track role; let last = $last) {
-                                            <span>
-                                                @if (role.description) {
-                                                    {{ i18n.advancedMsgStr(role.description) }}
-                                                } @else {
-                                                    {{ i18n.advancedMsgStr(role.name) }}
-                                                }
-                                                @if (!last) {
-                                                    ,&nbsp;
-                                                }
-                                            </span>
+                        <td>
+                            @if (!(application.realmRolesAvailable | isArrayWithEmptyObject)) {
+                                @for (role of application.realmRolesAvailable; track role; let last = $last) {
+                                    <span>
+                                        @if (role.description) {
+                                            {{ i18n.advancedMsgStr(role.description) }}
+                                        } @else {
+                                            {{ i18n.advancedMsgStr(role.name) }}
                                         }
-                                    }
-                                    @if (application.resourceRolesAvailable) {
-                                        @for (resource of application.resourceRolesAvailable | keyvalue; track resource.key) {
+                                        @if (!last) {
+                                            ,&nbsp;
+                                        }
+                                    </span>
+                                }
+                            }
+                            @if (application.resourceRolesAvailable) {
+                                @for (resource of application.resourceRolesAvailable | keyvalue; track resource.key) {
+                                    <span>
+                                        @if (!(application.realmRolesAvailable | isArrayWithEmptyObject)) {
+                                            ,&nbsp;
+                                        }
+                                        @for (
+                                            clientRole of application.resourceRolesAvailable[resource.key];
+                                            track clientRole;
+                                            let roleLast = $last
+                                        ) {
                                             <span>
-                                                @if (!(application.realmRolesAvailable | isArrayWithEmptyObject)) {
+                                                {{
+                                                    i18n.advancedMsgStr(clientRole.roleDescription ? clientRole.roleDescription : clientRole.roleName)
+                                                }}
+                                                {{ i18n.msgStr('inResource') }}
+                                                <strong>
+                                                    {{
+                                                        clientRole.clientName ? i18n.advancedMsgStr(clientRole.clientName) : clientRole.clientId
+                                                    }}</strong
+                                                >
+                                                @if (!roleLast) {
                                                     ,&nbsp;
                                                 }
-                                                @for (
-                                                    clientRole of application.resourceRolesAvailable[resource.key];
-                                                    track clientRole;
-                                                    let roleLast = $last
-                                                ) {
-                                                    <span>
-                                                        {{
-                                                            i18n.advancedMsgStr(
-                                                                clientRole.roleDescription ? clientRole.roleDescription : clientRole.roleName
-                                                            )
-                                                        }}
-                                                        {{ i18n.msgStr('inResource') }}
-                                                        <strong>
-                                                            {{
-                                                                clientRole.clientName
-                                                                    ? i18n.advancedMsgStr(clientRole.clientName)
-                                                                    : clientRole.clientId
-                                                            }}</strong
-                                                        >
-                                                        @if (!roleLast) {
-                                                            ,&nbsp;
-                                                        }
-                                                    </span>
-                                                }
                                             </span>
                                         }
-                                    }
-                                </td>
+                                    </span>
+                                }
+                            }
+                        </td>
 
-                                <td>
-                                    @if (application.client.consentRequired) {
-                                        @for (claim of application.clientScopesGranted; track claim; let last = $last) {
-                                            {{ i18n.advancedMsgStr(claim) }}
-                                            @if (!last) {
-                                                ,&nbsp;
-                                            }
-                                        }
-                                    } @else {
-                                        <strong>{{ i18n.msgStr('fullAccess') }}</strong>
+                        <td>
+                            @if (application.client.consentRequired) {
+                                @for (claim of application.clientScopesGranted; track claim; let last = $last) {
+                                    {{ i18n.advancedMsgStr(claim) }}
+                                    @if (!last) {
+                                        ,&nbsp;
                                     }
-                                </td>
+                                }
+                            } @else {
+                                <strong>{{ i18n.msgStr('fullAccess') }}</strong>
+                            }
+                        </td>
 
-                                <td>
-                                    @for (grant of application.additionalGrants; track grant; let last = $last) {
-                                        {{ i18n.advancedMsgStr(grant) }}
-                                        @if (!last) {
-                                            ,&nbsp;
-                                        }
-                                    }
-                                </td>
+                        <td>
+                            @for (grant of application.additionalGrants; track grant; let last = $last) {
+                                {{ i18n.advancedMsgStr(grant) }}
+                                @if (!last) {
+                                    ,&nbsp;
+                                }
+                            }
+                        </td>
 
-                                <td>
-                                    @if (
-                                        (application.client.consentRequired && application.clientScopesGranted.length > 0) ||
-                                        application.additionalGrants.length > 0
-                                    ) {
-                                        <button
-                                            type="submit"
-                                            name="clientId"
-                                            [kcClass]="['kcButtonPrimaryClass', 'kcButtonClass']"
-                                            [id]="'revoke-' + application.client.clientId"
-                                            [value]="application.client.id"
-                                        >
-                                            {{ i18n.msgStr('revoke') }}
-                                        </button>
-                                    }
-                                </td>
-                            </tr>
-                        }
-                    </tbody>
-                </table>
-            </form>
-        </div>
-    </ng-container>
-</kc-account-template>
+                        <td>
+                            @if (
+                                (application.client.consentRequired && application.clientScopesGranted.length > 0) ||
+                                application.additionalGrants.length > 0
+                            ) {
+                                <button
+                                    type="submit"
+                                    name="clientId"
+                                    [kcClass]="['kcButtonPrimaryClass', 'kcButtonClass']"
+                                    [id]="'revoke-' + application.client.clientId"
+                                    [value]="application.client.id"
+                                >
+                                    {{ i18n.msgStr('revoke') }}
+                                </button>
+                            }
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </form>
+</div>

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

@@ -3,19 +3,19 @@ import { Component, forwardRef, inject } from '@angular/core';
 import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
 import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
 import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+import type { I18n } from '../../i18n';
+import type { KcContext } from '../../KcContext';
 import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes';
 import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n';
 import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';
 import { IsArrayWithEmptyObjectPipe } from '@keycloakify/angular/lib/pipes/is-array-with-empty-object';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import type { ClassKey } from 'keycloakify/account';
-import type { I18n } from '../../i18n';
-import type { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
     imports: [KcClassDirective, TemplateComponent, NgClass, KeyValuePipe, IsArrayWithEmptyObjectPipe],
-    selector: 'kc-root',
+    selector: 'kc-applications',
     templateUrl: 'applications.component.html',
     providers: [
         {
@@ -29,4 +29,5 @@ export class ApplicationsComponent extends ComponentReference {
     kcContext = inject<Extract<KcContext, { pageId: 'applications.ftl' }>>(KC_ACCOUNT_CONTEXT);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
     override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+    active = 'applications';
 }

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

@@ -2,96 +2,92 @@
 @let federatedIdentity = kcContext.federatedIdentity;
 @let stateChecker = kcContext.stateChecker;
 
-<kc-account-template [active]="'social'">
-    <ng-container content>
-        <div class="main-layout social">
-            <div class="row">
-                <div class="col-md-10">
-                    <h2>{{ i18n.msgStr('federatedIdentitiesHtmlTitle') }}</h2>
+<div class="main-layout social">
+    <div class="row">
+        <div class="col-md-10">
+            <h2>{{ i18n.msgStr('federatedIdentitiesHtmlTitle') }}</h2>
+        </div>
+    </div>
+    <div id="federated-identities">
+        @for (identity of federatedIdentity.identities; track identity) {
+            <div class="row margin-bottom">
+                <div class="col-sm-2 col-md-2">
+                    <label
+                        class="control-label"
+                        [for]="identity.providerId"
+                    >
+                        {{ identity.displayName }}
+                    </label>
                 </div>
-            </div>
-            <div id="federated-identities">
-                @for (identity of federatedIdentity.identities; track identity) {
-                    <div class="row margin-bottom">
-                        <div class="col-sm-2 col-md-2">
-                            <label
-                                class="control-label"
-                                [for]="identity.providerId"
+                <div class="col-sm-5 col-md-5">
+                    <input
+                        disabled
+                        class="form-control"
+                        [value]="identity.userName"
+                    />
+                </div>
+                <div class="col-sm-5 col-md-5">
+                    @if (identity.connected) {
+                        @if (federatedIdentity.removeLinkPossible) {
+                            <form
+                                method="post"
+                                class="form-inline"
+                                [action]="url.socialUrl"
                             >
-                                {{ identity.displayName }}
-                            </label>
-                        </div>
-                        <div class="col-sm-5 col-md-5">
+                                <input
+                                    type="hidden"
+                                    name="stateChecker"
+                                    [value]="stateChecker"
+                                />
+                                <input
+                                    type="hidden"
+                                    name="action"
+                                    value="remove"
+                                />
+                                <input
+                                    type="hidden"
+                                    name="providerId"
+                                    [value]="identity.providerId"
+                                />
+                                <button
+                                    class="btn btn-default"
+                                    [id]="'remove-link-' + identity.providerId"
+                                >
+                                    {{ i18n.msgStr('doRemove') }}
+                                </button>
+                            </form>
+                        }
+                    } @else {
+                        <form
+                            method="post"
+                            class="form-inline"
+                            [action]="url.socialUrl"
+                        >
                             <input
-                                disabled
-                                class="form-control"
-                                [value]="identity.userName"
+                                type="hidden"
+                                name="stateChecker"
+                                [value]="stateChecker"
                             />
-                        </div>
-                        <div class="col-sm-5 col-md-5">
-                            @if (identity.connected) {
-                                @if (federatedIdentity.removeLinkPossible) {
-                                    <form
-                                        method="post"
-                                        class="form-inline"
-                                        [action]="url.socialUrl"
-                                    >
-                                        <input
-                                            type="hidden"
-                                            name="stateChecker"
-                                            [value]="stateChecker"
-                                        />
-                                        <input
-                                            type="hidden"
-                                            name="action"
-                                            value="remove"
-                                        />
-                                        <input
-                                            type="hidden"
-                                            name="providerId"
-                                            [value]="identity.providerId"
-                                        />
-                                        <button
-                                            class="btn btn-default"
-                                            [id]="'remove-link-' + identity.providerId"
-                                        >
-                                            {{ i18n.msgStr('doRemove') }}
-                                        </button>
-                                    </form>
-                                }
-                            } @else {
-                                <form
-                                    method="post"
-                                    class="form-inline"
-                                    [action]="url.socialUrl"
-                                >
-                                    <input
-                                        type="hidden"
-                                        name="stateChecker"
-                                        [value]="stateChecker"
-                                    />
-                                    <input
-                                        type="hidden"
-                                        name="action"
-                                        value="add"
-                                    />
-                                    <input
-                                        type="hidden"
-                                        name="providerId"
-                                        [value]="identity.providerId"
-                                    />
-                                    <button
-                                        class="btn btn-default"
-                                        [id]="'add-link-' + identity.providerId"
-                                    >
-                                        {{ i18n.msgStr('doAdd') }}
-                                    </button>
-                                </form>
-                            }
-                        </div>
-                    </div>
-                }
+                            <input
+                                type="hidden"
+                                name="action"
+                                value="add"
+                            />
+                            <input
+                                type="hidden"
+                                name="providerId"
+                                [value]="identity.providerId"
+                            />
+                            <button
+                                class="btn btn-default"
+                                [id]="'add-link-' + identity.providerId"
+                            >
+                                {{ i18n.msgStr('doAdd') }}
+                            </button>
+                        </form>
+                    }
+                </div>
             </div>
-        </div>
-    </ng-container>
-</kc-account-template>
+        }
+    </div>
+</div>

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

@@ -3,18 +3,18 @@ import { Component, forwardRef, inject } from '@angular/core';
 import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
 import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
 import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+import type { I18n } from '../../i18n';
+import type { KcContext } from '../../KcContext';
 import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes';
 import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n';
 import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import type { ClassKey } from 'keycloakify/account';
-import type { I18n } from '../../i18n';
-import type { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
     imports: [KcClassDirective, TemplateComponent, NgClass],
-    selector: 'kc-root',
+    selector: 'kc-federatedIdentity',
     templateUrl: 'federatedIdentity.component.html',
     providers: [
         {
@@ -28,4 +28,5 @@ export class FederatedIdentityComponent extends ComponentReference {
     kcContext = inject<Extract<KcContext, { pageId: 'federatedIdentity.ftl' }>>(KC_ACCOUNT_CONTEXT);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
     override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+    active = 'social';
 }

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

@@ -1,44 +1,40 @@
 @let log = kcContext.log;
 
-<kc-account-template [active]="'log'">
-    <ng-container content>
-        <div [kcClass]="'kcContentWrapperClass'">
-            <div class="col-md-10">
-                <h2>{{ i18n.msgStr('accountLogHtmlTitle') }}</h2>
-            </div>
+<div [kcClass]="'kcContentWrapperClass'">
+    <div class="col-md-10">
+        <h2>{{ i18n.msgStr('accountLogHtmlTitle') }}</h2>
+    </div>
 
-            <table class="table table-striped table-bordered">
-                <thead>
-                    <tr>
-                        <td>{{ i18n.msgStr('date') }}</td>
-                        <td>{{ i18n.msgStr('event') }}</td>
-                        <td>{{ i18n.msgStr('ip') }}</td>
-                        <td>{{ i18n.msgStr('client') }}</td>
-                        <td>{{ i18n.msgStr('details') }}</td>
-                    </tr>
-                </thead>
+    <table class="table table-striped table-bordered">
+        <thead>
+            <tr>
+                <td>{{ i18n.msgStr('date') }}</td>
+                <td>{{ i18n.msgStr('event') }}</td>
+                <td>{{ i18n.msgStr('ip') }}</td>
+                <td>{{ i18n.msgStr('client') }}</td>
+                <td>{{ i18n.msgStr('details') }}</td>
+            </tr>
+        </thead>
 
-                <tbody>
-                    @for (event of log.events; track event) {
-                        <tr>
-                            <td>{{ event.date ? (event.date | date) : '' }}</td>
-                            <td>{{ event.event }}</td>
-                            <td>{{ event.ipAddress }}</td>
-                            <td>{{ event.client || '' }}</td>
-                            <td>
-                                @for (detail of event.details; track detail; let last = $last) {
-                                    <span>
-                                        {{ detail.key }} = {{ detail.value }}
-                                        @if (!last) {
-                                            ,&nbsp;
-                                        }
-                                    </span>
+        <tbody>
+            @for (event of log.events; track event) {
+                <tr>
+                    <td>{{ event.date ? (event.date | date) : '' }}</td>
+                    <td>{{ event.event }}</td>
+                    <td>{{ event.ipAddress }}</td>
+                    <td>{{ event.client || '' }}</td>
+                    <td>
+                        @for (detail of event.details; track detail; let last = $last) {
+                            <span>
+                                {{ detail.key }} = {{ detail.value }}
+                                @if (!last) {
+                                    ,&nbsp;
                                 }
-                            </td>
-                        </tr>
-                    }
-                </tbody>
-            </table>
-        </div>
-    </ng-container>
-</kc-account-template>
+                            </span>
+                        }
+                    </td>
+                </tr>
+            }
+        </tbody>
+    </table>
+</div>

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

@@ -3,18 +3,18 @@ import { Component, forwardRef, inject } from '@angular/core';
 import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
 import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
 import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+import type { I18n } from '../../i18n';
+import type { KcContext } from '../../KcContext';
 import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes';
 import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n';
 import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import type { ClassKey } from 'keycloakify/account';
-import type { I18n } from '../../i18n';
-import type { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
     imports: [KcClassDirective, TemplateComponent, NgClass, DatePipe],
-    selector: 'kc-root',
+    selector: 'kc-log',
     templateUrl: 'log.component.html',
     providers: [
         {
@@ -28,4 +28,5 @@ export class LogComponent extends ComponentReference {
     kcContext = inject<Extract<KcContext, { pageId: 'log.ftl' }>>(KC_ACCOUNT_CONTEXT);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
     override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+    active = 'log';
 }