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

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

@@ -3,129 +3,125 @@
 @let account = kcContext.account;
 @let stateChecker = kcContext.stateChecker;
 
-<kc-account-template [active]="'password'">
-    <ng-container content>
-        <div class="row">
-            <div class="col-md-10">
-                <h2>{{ i18n.msgStr('changePasswordHtmlTitle') }}</h2>
+<div class="row">
+    <div class="col-md-10">
+        <h2>{{ i18n.msgStr('changePasswordHtmlTitle') }}</h2>
+    </div>
+    <div class="col-md-2 subtitle">
+        <span class="subtitle">{{ i18n.msgStr('allFieldsRequired') }}</span>
+    </div>
+</div>
+
+<form
+    class="form-horizontal"
+    method="post"
+    [action]="url.passwordUrl"
+>
+    <input
+        type="text"
+        id="username"
+        name="username"
+        autoComplete="username"
+        readOnly
+        [value]="account.username ?? ''"
+        [style.display]="'none'"
+    />
+
+    @if (password.passwordSet) {
+        <div class="form-group">
+            <div class="col-sm-2 col-md-2">
+                <label
+                    for="password"
+                    class="control-label"
+                >
+                    {{ i18n.msgStr('password') }}
+                </label>
             </div>
-            <div class="col-md-2 subtitle">
-                <span class="subtitle">{{ i18n.msgStr('allFieldsRequired') }}</span>
+            <div class="col-sm-10 col-md-10">
+                <input
+                    type="password"
+                    class="form-control"
+                    id="password"
+                    name="password"
+                    autoFocus
+                    autoComplete="current-password"
+                    [value]="currentPassword()"
+                    (change)="currentPassword.set($any($event.target).value)"
+                />
             </div>
         </div>
+    }
 
-        <form
-            [action]="url.passwordUrl"
-            class="form-horizontal"
-            method="post"
-        >
+    <input
+        type="hidden"
+        id="stateChecker"
+        name="stateChecker"
+        [value]="stateChecker"
+    />
+
+    <div class="form-group">
+        <div class="col-sm-2 col-md-2">
+            <label
+                for="password-new"
+                class="control-label"
+            >
+                {{ i18n.msgStr('passwordNew') }}
+            </label>
+        </div>
+        <div class="col-sm-10 col-md-10">
             <input
-                type="text"
-                id="username"
-                name="username"
-                [value]="account.username ?? ''"
-                autoComplete="username"
-                readOnly
-                [style.display]="'none'"
+                type="password"
+                class="form-control"
+                id="password-new"
+                name="password-new"
+                autoComplete="new-password"
+                [value]="newPassword()"
+                (change)="onNewPasswordChange($any($event.target).value)"
+                (blur)="onNewPasswordBlur()"
             />
+        </div>
+    </div>
 
-            @if (password.passwordSet) {
-                <div class="form-group">
-                    <div class="col-sm-2 col-md-2">
-                        <label
-                            for="password"
-                            class="control-label"
-                        >
-                            {{ i18n.msgStr('password') }}
-                        </label>
-                    </div>
-                    <div class="col-sm-10 col-md-10">
-                        <input
-                            type="password"
-                            class="form-control"
-                            id="password"
-                            name="password"
-                            autoFocus
-                            autoComplete="current-password"
-                            [value]="currentPassword()"
-                            (change)="currentPassword.set($any($event.target).value)"
-                        />
-                    </div>
-                </div>
-            }
+    <div class="form-group">
+        <div class="col-sm-2 col-md-2">
+            <label
+                for="password-confirm"
+                class="control-label two-lines"
+            >
+                {{ i18n.msgStr('passwordConfirm') }}
+            </label>
+        </div>
 
+        <div class="col-sm-10 col-md-10">
             <input
-                type="hidden"
-                id="stateChecker"
-                name="stateChecker"
-                [value]="stateChecker"
+                type="password"
+                class="form-control"
+                id="password-confirm"
+                name="password-confirm"
+                autoComplete="new-password"
+                [value]="newPasswordConfirm()"
+                (change)="onNewPasswordConfirmChange($any($event.target).value)"
+                (blur)="onNewPasswordConfirmBlur()"
             />
+        </div>
+    </div>
 
-            <div class="form-group">
-                <div class="col-sm-2 col-md-2">
-                    <label
-                        for="password-new"
-                        class="control-label"
-                    >
-                        {{ i18n.msgStr('passwordNew') }}
-                    </label>
-                </div>
-                <div class="col-sm-10 col-md-10">
-                    <input
-                        type="password"
-                        class="form-control"
-                        id="password-new"
-                        name="password-new"
-                        autoComplete="new-password"
-                        [value]="newPassword()"
-                        (change)="onNewPasswordChange($any($event.target).value)"
-                        (blur)="onNewPasswordBlur()"
-                    />
-                </div>
-            </div>
-
-            <div class="form-group">
-                <div class="col-sm-2 col-md-2">
-                    <label
-                        for="password-confirm"
-                        class="control-label two-lines"
-                    >
-                        {{ i18n.msgStr('passwordConfirm') }}
-                    </label>
-                </div>
-
-                <div class="col-sm-10 col-md-10">
-                    <input
-                        type="password"
-                        class="form-control"
-                        id="password-confirm"
-                        name="password-confirm"
-                        autoComplete="new-password"
-                        [value]="newPasswordConfirm()"
-                        (change)="onNewPasswordConfirmChange($any($event.target).value)"
-                        (blur)="onNewPasswordConfirmBlur()"
-                    />
-                </div>
-            </div>
-
-            <div class="form-group">
-                <div
-                    id="kc-form-buttons"
-                    class="col-md-offset-2 col-md-10 submit"
+    <div class="form-group">
+        <div
+            id="kc-form-buttons"
+            class="col-md-offset-2 col-md-10 submit"
+        >
+            <div>
+                <button
+                    type="submit"
+                    name="submitAction"
+                    value="Save"
+                    [disabled]="newPasswordError() !== '' || newPasswordConfirmError() !== ''"
+                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                 >
-                    <div>
-                        <button
-                            [disabled]="newPasswordError() !== '' || newPasswordConfirmError() !== ''"
-                            type="submit"
-                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
-                            name="submitAction"
-                            value="Save"
-                        >
-                            {{ i18n.msgStr('doSave') }}
-                        </button>
-                    </div>
-                </div>
+                    {{ i18n.msgStr('doSave') }}
+                </button>
             </div>
-        </form>
-    </ng-container>
-</kc-account-template>
+        </div>
+    </div>
+</form>

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

@@ -3,18 +3,18 @@ import { Component, forwardRef, inject, signal } 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-password',
     templateUrl: 'password.component.html',
     providers: [
         {
@@ -32,6 +32,8 @@ export class PasswordComponent extends ComponentReference {
         kcBodyClass: `${this.classes?.kcBodyClass} password`
     };
 
+    active = 'password';
+
     currentPassword = signal('');
     newPassword = signal('');
     newPasswordConfirm = signal('');
@@ -42,6 +44,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

@@ -2,62 +2,58 @@
 @let sessions = kcContext.sessions;
 @let stateChecker = kcContext.stateChecker;
 
-<kc-account-template [active]="'sessions'">
-    <ng-container content>
-        <div [kcClass]="'kcContentWrapperClass'">
-            <div class="col-md-10">
-                <h2>{{ i18n.msgStr('sessionsHtmlTitle') }}</h2>
-            </div>
-        </div>
+<div [kcClass]="'kcContentWrapperClass'">
+    <div class="col-md-10">
+        <h2>{{ i18n.msgStr('sessionsHtmlTitle') }}</h2>
+    </div>
+</div>
 
-        <table class="table table-striped table-bordered">
-            <thead>
-                <tr>
-                    <th>{{ i18n.msgStr('ip') }}</th>
-                    <th>{{ i18n.msgStr('started') }}</th>
-                    <th>{{ i18n.msgStr('lastAccess') }}</th>
-                    <th>{{ i18n.msgStr('expires') }}</th>
-                    <th>{{ i18n.msgStr('clients') }}</th>
-                </tr>
-            </thead>
+<table class="table table-striped table-bordered">
+    <thead>
+        <tr>
+            <th>{{ i18n.msgStr('ip') }}</th>
+            <th>{{ i18n.msgStr('started') }}</th>
+            <th>{{ i18n.msgStr('lastAccess') }}</th>
+            <th>{{ i18n.msgStr('expires') }}</th>
+            <th>{{ i18n.msgStr('clients') }}</th>
+        </tr>
+    </thead>
 
-            <tbody role="rowgroup">
-                @for (session of sessions.sessions; track session) {
-                    <tr>
-                        <td>{{ session.ipAddress }}</td>
-                        <td>{{ session?.started }}</td>
-                        <td>{{ session?.lastAccess }}</td>
-                        <td>{{ session?.expires }}</td>
-                        <td>
-                            @for (client of session.clients; track client) {
-                                <div>
-                                    {{ client }}
-                                    <br />
-                                </div>
-                            }
-                        </td>
-                    </tr>
-                }
-            </tbody>
-        </table>
+    <tbody role="rowgroup">
+        @for (session of sessions.sessions; track session) {
+            <tr>
+                <td>{{ session.ipAddress }}</td>
+                <td>{{ session?.started }}</td>
+                <td>{{ session?.lastAccess }}</td>
+                <td>{{ session?.expires }}</td>
+                <td>
+                    @for (client of session.clients; track client) {
+                        <div>
+                            {{ client }}
+                            <br />
+                        </div>
+                    }
+                </td>
+            </tr>
+        }
+    </tbody>
+</table>
 
-        <form
-            [action]="url.sessionsUrl"
-            method="post"
-        >
-            <input
-                type="hidden"
-                id="stateChecker"
-                name="stateChecker"
-                [value]="stateChecker"
-            />
-            <button
-                id="logout-all-sessions"
-                type="submit"
-                [kcClass]="['kcButtonDefaultClass', 'kcButtonClass']"
-            >
-                {{ i18n.msgStr('doLogOutAllSessions') }}
-            </button>
-        </form>
-    </ng-container>
-</kc-account-template>
+<form
+    method="post"
+    [action]="url.sessionsUrl"
+>
+    <input
+        type="hidden"
+        id="stateChecker"
+        name="stateChecker"
+        [value]="stateChecker"
+    />
+    <button
+        id="logout-all-sessions"
+        type="submit"
+        [kcClass]="['kcButtonDefaultClass', 'kcButtonClass']"
+    >
+        {{ i18n.msgStr('doLogOutAllSessions') }}
+    </button>
+</form>

package/src/account/pages/sessions/sessions.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-sessions',
     templateUrl: 'sessions.component.html',
     providers: [
         {
@@ -28,4 +28,5 @@ export class SessionsComponent extends ComponentReference {
     kcContext = inject<Extract<KcContext, { pageId: 'sessions.ftl' }>>(KC_ACCOUNT_CONTEXT);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
     override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+    active = 'sessions';
 }