@keycloakify/angular 0.0.1-rc.0 → 0.0.1-rc.10

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

@@ -0,0 +1,156 @@
+@let url = kcContext.url;
+@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>
+
+            <form
+                [action]="url.applicationsUrl"
+                method="post"
+            >
+                <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"
+                                            [kcClass]="['kcButtonPrimaryClass', 'kcButtonClass']"
+                                            [id]="'revoke-' + application.client.clientId"
+                                            name="clientId"
+                                            [value]="application.client.id"
+                                        >
+                                            {{ i18n.msgStr('revoke') }}
+                                        </button>
+                                    }
+                                </td>
+                            </tr>
+                        }
+                    </tbody>
+                </table>
+            </form>
+        </div>
+    </ng-container>
+</kc-account-template>

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

@@ -0,0 +1,32 @@
+import { KeyValuePipe, NgClass } from '@angular/common';
+import { Component, forwardRef, inject } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference.class';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template.component';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class.directive';
+import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes.token';
+import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n.token';
+import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context.token';
+import { IsArrayWithEmptyObjectPipe } from '@keycloakify/angular/lib/pipes/is-array-with-empty-object.pipe';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+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',
+    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);
+}

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

@@ -0,0 +1,97 @@
+@let url = kcContext.url;
+@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>
+            </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
+                                [for]="identity.providerId"
+                                class="control-label"
+                            >
+                                {{ 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
+                                        [action]="url.socialUrl"
+                                        method="post"
+                                        class="form-inline"
+                                    >
+                                        <input
+                                            type="hidden"
+                                            name="stateChecker"
+                                            [value]="stateChecker"
+                                        />
+                                        <input
+                                            type="hidden"
+                                            name="action"
+                                            value="remove"
+                                        />
+                                        <input
+                                            type="hidden"
+                                            name="providerId"
+                                            [value]="identity.providerId"
+                                        />
+                                        <button
+                                            [id]="'remove-link-' + identity.providerId"
+                                            class="btn btn-default"
+                                        >
+                                            {{ i18n.msgStr('doRemove') }}
+                                        </button>
+                                    </form>
+                                }
+                            } @else {
+                                <form
+                                    [action]="url.socialUrl"
+                                    method="post"
+                                    class="form-inline"
+                                >
+                                    <input
+                                        type="hidden"
+                                        name="stateChecker"
+                                        [value]="stateChecker"
+                                    />
+                                    <input
+                                        type="hidden"
+                                        name="action"
+                                        value="add"
+                                    />
+                                    <input
+                                        type="hidden"
+                                        name="providerId"
+                                        [value]="identity.providerId"
+                                    />
+                                    <button
+                                        [id]="'add-link-' + identity.providerId"
+                                        class="btn btn-default"
+                                    >
+                                        {{ i18n.msgStr('doAdd') }}
+                                    </button>
+                                </form>
+                            }
+                        </div>
+                    </div>
+                }
+            </div>
+        </div>
+    </ng-container>
+</kc-account-template>

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

@@ -0,0 +1,31 @@
+import { NgClass } from '@angular/common';
+import { Component, forwardRef, inject } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference.class';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template.component';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class.directive';
+import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes.token';
+import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n.token';
+import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context.token';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+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',
+    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);
+}

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

@@ -0,0 +1,44 @@
+@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>
+
+            <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>
+    </ng-container>
+</kc-account-template>

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

@@ -0,0 +1,31 @@
+import { DatePipe, NgClass } from '@angular/common';
+import { Component, forwardRef, inject } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference.class';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template.component';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class.directive';
+import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes.token';
+import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n.token';
+import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context.token';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+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',
+    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);
+}

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

@@ -0,0 +1,131 @@
+@let url = kcContext.url;
+@let password = kcContext.password;
+@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>
+            <div class="col-md-2 subtitle">
+                <span class="subtitle">{{ i18n.msgStr('allFieldsRequired') }}</span>
+            </div>
+        </div>
+
+        <form
+            [action]="url.passwordUrl"
+            class="form-horizontal"
+            method="post"
+        >
+            <input
+                type="text"
+                id="username"
+                name="username"
+                [value]="account.username ?? ''"
+                autoComplete="username"
+                readOnly
+                [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
+                            [disabled]="newPasswordError() !== '' || newPasswordConfirmError() !== ''"
+                            type="submit"
+                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+                            name="submitAction"
+                            value="Save"
+                        >
+                            {{ i18n.msgStr('doSave') }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </ng-container>
+</kc-account-template>

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

@@ -0,0 +1,110 @@
+import { NgClass } from '@angular/common';
+import { Component, forwardRef, inject, signal } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference.class';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template.component';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class.directive';
+import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes.token';
+import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n.token';
+import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context.token';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+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',
+    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`
+    };
+
+    currentPassword = signal('');
+    newPassword = signal('');
+    newPasswordConfirm = signal('');
+    newPasswordError = signal('');
+    newPasswordConfirmError = signal('');
+    hasNewPasswordBlurred = signal(false);
+    hasNewPasswordConfirmBlurred = signal(false);
+
+    constructor() {
+        super();
+        // @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());
+    }
+}