@keycloakify/angular 0.0.1-rc.9 → 0.0.1

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,112 @@
+import { NgClass } from '@angular/common';
+import { Component, forwardRef, inject, signal } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+import type { I18n } from '@keycloakify/angular/account/i18n';
+import type { KcContext } from '@keycloakify/angular/account/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, 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());
+    }
+}

package/src/account/pages/sessions/index.ts

@@ -0,0 +1 @@
+export * from './sessions.component';

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

@@ -0,0 +1,59 @@
+@let url = kcContext.url;
+@let sessions = kcContext.sessions;
+@let stateChecker = kcContext.stateChecker;
+
+<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>
+
+    <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
+    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

@@ -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';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+import type { I18n } from '@keycloakify/angular/account/i18n';
+import type { KcContext } from '@keycloakify/angular/account/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, NgClass],
+    selector: 'kc-sessions',
+    templateUrl: 'sessions.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => SessionsComponent)
+        }
+    ]
+})
+export class SessionsComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    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';
+}

package/src/account/pages/totp/index.ts

@@ -0,0 +1 @@
+export * from './totp.component';

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

@@ -0,0 +1,254 @@
+@let url = kcContext.url;
+@let mode = kcContext.mode;
+@let messagesPerField = kcContext.messagesPerField;
+@let stateChecker = kcContext.stateChecker;
+@let totp = kcContext.totp;
+
+<div class="row">
+    <div class="col-md-10">
+        <h2>{{ i18n.msgStr('authenticatorTitle') }}</h2>
+    </div>
+    @if (totp.otpCredentials.length) {
+        <div class="subtitle col-md-2">
+            <span class="required">*</span>
+            {{ i18n.msgStr('requiredFields') }}
+        </div>
+    }
+</div>
+@if (totp.enabled) {
+    <table class="table table-bordered table-striped">
+        <thead>
+            @if (totp.otpCredentials.length > 1) {
+                <tr>
+                    <th [colSpan]="4">{{ i18n.msgStr('configureAuthenticators') }}</th>
+                </tr>
+            } @else {
+                <tr>
+                    <th [colSpan]="3">{{ i18n.msgStr('configureAuthenticators') }}</th>
+                </tr>
+            }
+        </thead>
+        <tbody>
+            @for (credential of totp.otpCredentials; track credential; let index = $index) {
+                <tr>
+                    <td class="provider">{{ i18n.msgStr('mobile') }}</td>
+                    @if (totp.otpCredentials.length > 1) {
+                        <td class="provider">{{ credential.id }}</td>
+                    }
+                    <td class="provider">{{ credential.userLabel || '' }}</td>
+                    <td class="action">
+                        <form
+                            method="post"
+                            class="form-inline"
+                            [action]="url.totpUrl"
+                        >
+                            <input
+                                type="hidden"
+                                id="stateChecker"
+                                name="stateChecker"
+                                [value]="stateChecker"
+                            />
+                            <input
+                                type="hidden"
+                                id="submitAction"
+                                name="submitAction"
+                                value="Delete"
+                            />
+                            <input
+                                type="hidden"
+                                id="credentialId"
+                                name="credentialId"
+                                [value]="credential.id"
+                            />
+                            <button
+                                class="btn btn-default"
+                                [id]="'remove-mobile-' + index"
+                            >
+                                <i class="pficon pficon-delete"></i>
+                            </button>
+                        </form>
+                    </td>
+                </tr>
+            }
+        </tbody>
+    </table>
+} @else {
+    <div>
+        <hr />
+        <ol id="kc-totp-settings">
+            <li>
+                <p>{{ i18n.msgStr('totpStep1') }}</p>
+
+                <ul id="kc-totp-supported-apps">
+                    @for (app of totp.supportedApplications; track app) {
+                        <li>{{ i18n.advancedMsgStr(app) }}</li>
+                    }
+                </ul>
+            </li>
+            @if (mode && mode === 'manual') {
+                <li>
+                    <p>{{ i18n.msgStr('totpManualStep2') }}</p>
+                    <p>
+                        <span id="kc-totp-secret-key">{{ totp.totpSecretEncoded }}</span>
+                    </p>
+                    <p>
+                        <a
+                            id="mode-barcode"
+                            [href]="totp.qrUrl"
+                        >
+                            {{ i18n.msgStr('totpScanBarcode') }}
+                        </a>
+                    </p>
+                </li>
+                <li>
+                    <p>{{ i18n.msgStr('totpManualStep3') }}</p>
+                    <ul>
+                        <li id="kc-totp-type">{{ i18n.msgStr('totpType') }}: {{ i18n.msgStr($any('totp.' + totp.policy.type)) }}</li>
+                        <li id="kc-totp-algorithm">{{ i18n.msgStr('totpAlgorithm') }}: {{ totp.policy.getAlgorithmKey() }}</li>
+                        <li id="kc-totp-digits">{{ i18n.msgStr('totpDigits') }}: {{ totp.policy.digits }}</li>
+                        @if (totp.policy.type === 'totp') {
+                            <li id="kc-totp-period">{{ i18n.msgStr('totpInterval') }}: {{ totp.policy.period }}</li>
+                        } @else {
+                            <li id="kc-totp-counter">{{ i18n.msgStr('totpCounter') }}: {{ totp.policy.initialCounter }}</li>
+                        }
+                    </ul>
+                </li>
+            } @else {
+                <li>
+                    <p>{{ i18n.msgStr('totpStep2') }}</p>
+                    <p>
+                        <img
+                            id="kc-totp-secret-qr-code"
+                            alt="Figure: Barcode"
+                            [src]="'data:image/png;base64, ' + totp.totpSecretQrCode"
+                        />
+                    </p>
+                    <p>
+                        <a
+                            id="mode-manual"
+                            [href]="totp.manualUrl"
+                        >
+                            {{ i18n.msgStr('totpUnableToScan') }}
+                        </a>
+                    </p>
+                </li>
+            }
+            <li>
+                <p>{{ i18n.msgStr('totpStep3') }}</p>
+                <p>{{ i18n.msgStr('totpStep3DeviceName') }}</p>
+            </li>
+        </ol>
+        <hr />
+        <form
+            id="kc-totp-settings-form"
+            method="post"
+            [action]="url.totpUrl"
+            [kcClass]="'kcFormClass'"
+        >
+            <input
+                type="hidden"
+                id="stateChecker"
+                name="stateChecker"
+                [value]="stateChecker"
+            />
+            <div [kcClass]="'kcFormGroupClass'">
+                <div class="col-sm-2 col-md-2">
+                    <label
+                        for="totp"
+                        class="control-label"
+                    >
+                        {{ i18n.msgStr('authenticatorCode') }}
+                    </label>
+                    <span class="required">*</span>
+                </div>
+                <div class="col-sm-10 col-md-10">
+                    <input
+                        type="text"
+                        id="totp"
+                        name="totp"
+                        autoComplete="off"
+                        [kcClass]="'kcInputClass'"
+                        [attr.aria-invalid]="messagesPerField.existsError('totp')"
+                    />
+                    @if (messagesPerField.existsError('totp')) {
+                        <span
+                            id="input-error-otp-code"
+                            aria-live="polite"
+                            [kcClass]="'kcInputErrorMessageClass'"
+                            [innerHTML]="messagesPerField.get('totp') | kcSanitize: 'html'"
+                        ></span>
+                    }
+                </div>
+                <input
+                    type="hidden"
+                    id="totpSecret"
+                    name="totpSecret"
+                    [value]="totp.totpSecret"
+                />
+                @if (mode) {
+                    <input
+                        type="hidden"
+                        id="mode"
+                        [value]="mode"
+                    />
+                }
+            </div>
+
+            <div [kcClass]="'kcFormGroupClass'">
+                <div class="col-sm-2 col-md-2">
+                    <label
+                        for="userLabel"
+                        [kcClass]="'kcLabelClass'"
+                    >
+                        {{ i18n.msgStr('totpDeviceName') }}
+                    </label>
+                    @if (totp.otpCredentials.length >= 1) {
+                        <span class="required">*</span>
+                    }
+                </div>
+                <div class="col-sm-10 col-md-10">
+                    <input
+                        type="text"
+                        id="userLabel"
+                        name="userLabel"
+                        autoComplete="off"
+                        [kcClass]="'kcInputClass'"
+                        [attr.aria-invalid]="messagesPerField.existsError('userLabel')"
+                    />
+                    @if (messagesPerField.existsError('userLabel')) {
+                        <span
+                            id="input-error-otp-label"
+                            aria-live="polite"
+                            [kcClass]="'kcInputErrorMessageClass'"
+                            [innerHTML]="messagesPerField.get('userLabel') | kcSanitize: 'html'"
+                        ></span>
+                    }
+                </div>
+            </div>
+
+            <div
+                id="kc-form-buttons"
+                class="text-right"
+                [kcClass]="'kcFormGroupClass'"
+            >
+                <div [kcClass]="'kcInputWrapperClass'">
+                    <input
+                        type="submit"
+                        id="saveTOTPBtn"
+                        [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+                        [value]="i18n.msgStr('doSave')"
+                    />
+                    <button
+                        type="submit"
+                        id="cancelTOTPBtn"
+                        name="submitAction"
+                        value="Cancel"
+                        [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
+                    >
+                        {{ i18n.msgStr('doCancel') }}
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+}

package/src/account/pages/totp/totp.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 { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+import type { I18n } from '@keycloakify/angular/account/i18n';
+import type { KcContext } from '@keycloakify/angular/account/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 { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import type { ClassKey } from 'keycloakify/account';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, KcSanitizePipe, NgClass],
+    selector: 'kc-totp',
+    templateUrl: 'totp.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => TotpComponent)
+        }
+    ]
+})
+export class TotpComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    kcContext = inject<Extract<KcContext, { pageId: 'totp.ftl' }>>(KC_ACCOUNT_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+    active = 'totp';
+}

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

@@ -0,0 +1 @@
+export * from './keycloakify-angular.providers';