@keycloakify/angular 0.0.1-rc.2 → 0.0.1-rc.20

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

@@ -0,0 +1,35 @@
+import { NgClass } from '@angular/common';
+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';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, TemplateComponent, NgClass],
+    selector: 'kc-account',
+    templateUrl: 'account.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => AccountComponent)
+        }
+    ]
+})
+export class AccountComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    kcContext = inject<Extract<KcContext, { pageId: 'account.ftl' }>>(KC_ACCOUNT_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+    override additionalClasses: Partial<Record<ClassKey, string>> = {
+        kcBodyClass: `${this.classes?.kcBodyClass} user`
+    };
+    active = 'account';
+}

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

@@ -0,0 +1,148 @@
+@let url = kcContext.url;
+@let stateChecker = kcContext.stateChecker;
+@let applications = kcContext.applications?.applications;
+
+<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"
+        />
+
+        <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>
+                            } @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>
+                                }
+                            }
+                            @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>
+                                                {{
+                                                    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>
+
+                        <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>
+
+                        <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>

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

@@ -0,0 +1,33 @@
+import { KeyValuePipe, NgClass } from '@angular/common';
+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';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, TemplateComponent, NgClass, KeyValuePipe, IsArrayWithEmptyObjectPipe],
+    selector: 'kc-applications',
+    templateUrl: 'applications.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => ApplicationsComponent)
+        }
+    ]
+})
+export class ApplicationsComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    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

@@ -0,0 +1,93 @@
+@let url = kcContext.url;
+@let federatedIdentity = kcContext.federatedIdentity;
+@let stateChecker = kcContext.stateChecker;
+
+<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 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"
+                            >
+                                <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>
+        }
+    </div>
+</div>

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

@@ -0,0 +1,32 @@
+import { NgClass } from '@angular/common';
+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';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, TemplateComponent, NgClass],
+    selector: 'kc-federatedIdentity',
+    templateUrl: 'federatedIdentity.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => FederatedIdentityComponent)
+        }
+    ]
+})
+export class FederatedIdentityComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    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

@@ -0,0 +1,40 @@
+@let log = kcContext.log;
+
+<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>
+
+        <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>
+                        }
+                    </td>
+                </tr>
+            }
+        </tbody>
+    </table>
+</div>

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

@@ -0,0 +1,32 @@
+import { DatePipe, NgClass } from '@angular/common';
+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';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, TemplateComponent, NgClass, DatePipe],
+    selector: 'kc-log',
+    templateUrl: 'log.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => LogComponent)
+        }
+    ]
+})
+export class LogComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    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';
+}

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

@@ -0,0 +1,127 @@
+@let url = kcContext.url;
+@let password = kcContext.password;
+@let account = kcContext.account;
+@let stateChecker = kcContext.stateChecker;
+
+<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-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>
+    }
+
+    <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="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>
+                <button
+                    type="submit"
+                    name="submitAction"
+                    value="Save"
+                    [disabled]="newPasswordError() !== '' || newPasswordConfirmError() !== ''"
+                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+                >
+                    {{ i18n.msgStr('doSave') }}
+                </button>
+            </div>
+        </div>
+    </div>
+</form>

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

@@ -0,0 +1,113 @@
+import { NgClass } from '@angular/common';
+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';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, TemplateComponent, NgClass],
+    selector: 'kc-password',
+    templateUrl: 'password.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => PasswordComponent)
+        }
+    ]
+})
+export class PasswordComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    kcContext = inject<Extract<KcContext, { pageId: 'password.ftl' }>>(KC_ACCOUNT_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+    override additionalClasses: Partial<Record<ClassKey, string>> = {
+        kcBodyClass: `${this.classes?.kcBodyClass} password`
+    };
+
+    active = 'password';
+
+    currentPassword = signal('');
+    newPassword = signal('');
+    newPasswordConfirm = signal('');
+    newPasswordError = signal('');
+    newPasswordConfirmError = signal('');
+    hasNewPasswordBlurred = signal(false);
+    hasNewPasswordConfirmBlurred = signal(false);
+
+    constructor() {
+        super();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        window.kcContext = {
+            ...this.kcContext,
+            message: (() => {
+                if (this.newPasswordError() !== '') {
+                    return {
+                        type: 'error',
+                        summary: this.newPasswordError()
+                    };
+                }
+                if (this.newPasswordConfirmError() !== '') {
+                    return {
+                        type: 'error',
+                        summary: this.newPasswordConfirmError()
+                    };
+                }
+                return this.kcContext.message;
+            })()
+        };
+    }
+
+    checkNewPassword(newPassword: string) {
+        if (!this.kcContext.password.passwordSet) return;
+        if (newPassword === this.currentPassword()) {
+            this.newPasswordError.set('newPasswordSameAsOld');
+        } else {
+            this.newPasswordError.set('');
+        }
+    }
+    checkNewPasswordConfirm(newPasswordConfirm: string) {
+        if (newPasswordConfirm === '') return;
+        if (newPasswordConfirm !== this.newPassword()) {
+            this.newPasswordConfirmError.set('passwordConfirmNotMatch');
+        } else {
+            this.newPasswordConfirmError.set('');
+        }
+    }
+
+    onNewPasswordChange(value: string) {
+        const newPassword = value;
+
+        this.newPassword.set(newPassword);
+        if (this.hasNewPasswordBlurred()) {
+            this.checkNewPassword(newPassword);
+        }
+    }
+
+    onNewPasswordBlur() {
+        this.hasNewPasswordBlurred.set(true);
+        this.checkNewPassword(this.newPassword());
+    }
+
+    onNewPasswordConfirmChange(value: string) {
+        const newPasswordConfirm = value;
+
+        this.newPasswordConfirm.set(newPasswordConfirm);
+        if (this.hasNewPasswordConfirmBlurred()) {
+            this.checkNewPasswordConfirm(newPasswordConfirm);
+        }
+    }
+
+    onNewPasswordConfirmBlur() {
+        this.hasNewPasswordConfirmBlurred.set(true);
+        this.checkNewPasswordConfirm(this.newPasswordConfirm());
+    }
+}