@myrmidon/auth-jwt-admin 3.0.0 → 4.1.0

package/fesm2022/myrmidon-auth-jwt-admin.mjs

@@ -2,32 +2,32 @@ import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Component, Input, Output, Optional, Inject, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { retry, catchError, take } from 'rxjs/operators';
+import { retry, map, catchError, take } from 'rxjs/operators';
 import * as i2$1 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i1 from '@angular/common/http';
 import { HttpParams, HttpClientModule } from '@angular/common/http';
 import * as i2 from '@myrmidon/ng-tools';
 import { NgToolsModule } from '@myrmidon/ng-tools';
+import { BehaviorSubject, tap } from 'rxjs';
+import { PagedListStore } from '@myrmidon/paged-data-browsers';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$2 from '@angular/material/button';
+import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i6 from '@angular/material/icon';
+import * as i7 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i7 from '@angular/material/input';
+import * as i8 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i8 from '@angular/material/form-field';
-import * as i9 from '@angular/material/progress-spinner';
+import * as i9 from '@angular/material/form-field';
+import * as i10 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i6$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import '@angular/localize/init';
-import { BehaviorSubject, tap } from 'rxjs';
-import { PagedListStore } from '@myrmidon/paged-data-browsers';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i2$3 from '@myrmidon/auth-jwt-login';
+import * as i2$2 from '@myrmidon/auth-jwt-login';
 import { AuthJwtLoginModule } from '@myrmidon/auth-jwt-login';
 import * as i6$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
@@ -146,12 +146,25 @@ class AuthJwtAccountService {
     requestPasswordReset(email) {
         return this._http.post(this._env.get('apiUrl') + 'accounts/resetpassword/request', { email });
     }
+    getUserFromWrapper(response) {
+        return response.user
+            ? {
+                ...response.user,
+                roles: response.roles || [],
+            }
+            : response;
+    }
     getAllUsers() {
         return this._http
             .get(this._env.get('apiUrl') + 'users', {
             params: new HttpParams().set('pageNumber', '1'),
         })
-            .pipe(retry(3), catchError(this._error.handleError));
+            .pipe(retry(3), map((dataPage) => {
+            return {
+                ...dataPage,
+                items: dataPage.items.map(this.getUserFromWrapper),
+            };
+        }), catchError(this._error.handleError));
     }
     getUsers(filter, pageNumber = 1, pageSize = 20) {
         let httpParams = new HttpParams();
@@ -164,7 +177,12 @@ class AuthJwtAccountService {
             .get(this._env.get('apiUrl') + 'users', {
             params: httpParams,
         })
-            .pipe(retry(3), catchError(this._error.handleError));
+            .pipe(retry(3), map((dataPage) => {
+            return {
+                ...dataPage,
+                items: dataPage.items.map(this.getUserFromWrapper),
+            };
+        }), catchError(this._error.handleError));
     }
     /**
      * Get the top N users matching the specified name filter.
@@ -185,7 +203,9 @@ class AuthJwtAccountService {
             : {};
         return this._http
             .get(this._env.get('apiUrl') + 'users', options)
-            .pipe(retry(3), catchError(this._error.handleError));
+            .pipe(retry(3), map((users) => {
+            return users.map(this.getUserFromWrapper);
+        }), catchError(this._error.handleError));
     }
     /**
      * Get information about all the users listed in the specified names.
@@ -203,7 +223,9 @@ class AuthJwtAccountService {
             : {};
         return this._http
             .get(this._env.get('apiUrl') + 'users-from-names', options)
-            .pipe(retry(3), catchError(this._error.handleError));
+            .pipe(retry(3), map((users) => {
+            return users.map(this.getUserFromWrapper);
+        }), catchError(this._error.handleError));
     }
     /**
      * Get data about the specified user.
@@ -212,7 +234,7 @@ class AuthJwtAccountService {
     getUser(name) {
         return this._http
             .get(this._env.get('apiUrl') + 'users/' + name)
-            .pipe(retry(3), catchError(this._error.handleError));
+            .pipe(retry(3), map(this.getUserFromWrapper), catchError(this._error.handleError));
     }
     /**
      * Update the editable data for the specified user.
@@ -254,15 +276,136 @@ class AuthJwtAccountService {
             .delete(this._env.get('apiUrl') + 'accounts/' + name)
             .pipe(catchError(this._error.handleError));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AuthJwtAccountService, deps: [{ token: i1.HttpClient }, { token: i2.ErrorService }, { token: i2.EnvService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AuthJwtAccountService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AuthJwtAccountService, deps: [{ token: i1.HttpClient }, { token: i2.ErrorService }, { token: i2.EnvService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AuthJwtAccountService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AuthJwtAccountService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AuthJwtAccountService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.ErrorService }, { type: i2.EnvService }]; } });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ErrorService }, { type: i2.EnvService }] });
+
+class UserListRepository {
+    get activeUser$() {
+        return this._activeUser$.asObservable();
+    }
+    get filter$() {
+        return this._store.filter$;
+    }
+    get page$() {
+        return this._store.page$;
+    }
+    get loading$() {
+        return this._loading$.asObservable();
+    }
+    get saving$() {
+        return this._saving$.asObservable();
+    }
+    constructor(_accService) {
+        this._accService = _accService;
+        this._store = new PagedListStore(this);
+        this._activeUser$ = new BehaviorSubject(undefined);
+        this._loading$ = new BehaviorSubject(false);
+        this._saving$ = new BehaviorSubject(false);
+        this._store.reset();
+    }
+    loadPage(pageNumber, pageSize, filter) {
+        this._loading$.next(true);
+        return this._accService.getUsers(filter, pageNumber, pageSize).pipe(tap({
+            next: () => this._loading$.next(false),
+            error: () => this._loading$.next(false),
+        }));
+    }
+    async reset() {
+        this._loading$.next(true);
+        try {
+            await this._store.reset();
+        }
+        catch (error) {
+            throw error;
+        }
+        finally {
+            this._loading$.next(false);
+        }
+    }
+    async setFilter(filter) {
+        this._loading$.next(true);
+        try {
+            await this._store.setFilter(filter);
+        }
+        catch (error) {
+            throw error;
+        }
+        finally {
+            this._loading$.next(false);
+        }
+    }
+    getFilter() {
+        return this._store.getFilter();
+    }
+    async setPage(pageNumber, pageSize) {
+        this._loading$.next(true);
+        try {
+            await this._store.setPage(pageNumber, pageSize);
+        }
+        catch (error) {
+            throw error;
+        }
+        finally {
+            this._loading$.next(false);
+        }
+    }
+    setActiveUser(user) {
+        this._activeUser$.next(user || undefined);
+    }
+    updateActiveUser(user) {
+        const promise = new Promise((resolve, reject) => {
+            this._saving$.next(true);
+            this._accService.updateUser(user).subscribe({
+                next: (_) => {
+                    this._saving$.next(false);
+                    this._store.reset();
+                    resolve(true);
+                },
+                error: (error) => {
+                    this._saving$.next(false);
+                    console.error(`Error updating user ${user.userName}: ` +
+                        JSON.stringify(error || {}));
+                    resolve(false);
+                },
+            });
+        });
+        return promise;
+    }
+    deleteUser(name) {
+        const promise = new Promise((resolve, reject) => {
+            if (this._activeUser$.value?.userName === name) {
+                this._activeUser$.next(undefined);
+            }
+            this._saving$.next(true);
+            this._accService.deleteUser(name).subscribe({
+                next: (_) => {
+                    this._saving$.next(false);
+                    this._store.reset();
+                    resolve(true);
+                },
+                error: (error) => {
+                    this._saving$.next(false);
+                    console.error(`Error deleting user ${name}: ` + JSON.stringify(error || {}));
+                    reject(error);
+                },
+            });
+        });
+        return promise;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UserListRepository, deps: [{ token: AuthJwtAccountService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UserListRepository, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UserListRepository, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: AuthJwtAccountService }] });
 
 class PasswordStrengthBarComponent {
     constructor() {
@@ -330,22 +473,24 @@ class PasswordStrengthBarComponent {
             this.bars[n] = col;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PasswordStrengthBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: PasswordStrengthBarComponent, selector: "auth-jwt-password-strength-bar", inputs: { passwordToCheck: "passwordToCheck" }, outputs: { strengthChange: "strengthChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"strength\">\n  <small>strength:</small>\n  <ul id=\"strengthBar\">\n    <li class=\"point\" [style.background-color]=\"bars[0]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[1]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[2]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[3]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[4]\"></li>\n  </ul>\n</div>\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PasswordStrengthBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: PasswordStrengthBarComponent, selector: "auth-jwt-password-strength-bar", inputs: { passwordToCheck: "passwordToCheck" }, outputs: { strengthChange: "strengthChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"strength\">\n  <small>strength:</small>\n  <ul id=\"strengthBar\">\n    <li class=\"point\" [style.background-color]=\"bars[0]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[1]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[2]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[3]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[4]\"></li>\n  </ul>\n</div>\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PasswordStrengthBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PasswordStrengthBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-password-strength-bar', template: "<div id=\"strength\">\n  <small>strength:</small>\n  <ul id=\"strengthBar\">\n    <li class=\"point\" [style.background-color]=\"bars[0]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[1]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[2]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[3]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[4]\"></li>\n  </ul>\n</div>\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { passwordToCheck: [{
+        }], ctorParameters: () => [], propDecorators: { passwordToCheck: [{
                 type: Input
             }], strengthChange: [{
                 type: Output
             }] } });
 
 class AuthJwtRegistrationComponent {
-    constructor(formBuilder, _snackbar, _accountService) {
+    constructor(formBuilder, _snackbar, _accountService, _userRepository) {
         this._snackbar = _snackbar;
         this._accountService = _accountService;
+        this._userRepository = _userRepository;
+        this.hide = true;
         this.registered = new EventEmitter();
         // form
         this.email = formBuilder.control('', {
@@ -471,23 +616,24 @@ class AuthJwtRegistrationComponent {
             .subscribe({
             next: () => {
                 this.busy = false;
-                this._snackbar.open($localize `Registration succeeded`, 'OK');
+                this._snackbar.open($localize `:auth-jwt-admin:Registration succeeded`, 'OK');
+                this._userRepository.reset();
                 this.registered.emit();
             },
             error: (error) => {
                 this.busy = false;
                 console.error('Registration  error' + (error ? JSON.stringify(error) : ''));
-                this._snackbar.open($localize `Registration error`, 'OK');
+                this._snackbar.open($localize `:auth-jwt-admin:Registration error`, 'OK');
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$1.MatSnackBar }, { token: AuthJwtAccountService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: AuthJwtRegistrationComponent, selector: "auth-jwt-registration", outputs: { registered: "registered" }, ngImport: i0, template: "<div>\r\n  <form role=\"form\" [formGroup]=\"form\" (submit)=\"onSubmit()\">\r\n    <fieldset>\r\n      <legend i18n>registration</legend>\r\n      <!-- email -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n>email</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"email\"\r\n            id=\"email\"\r\n            maxlength=\"256\"\r\n            required\r\n            autofocus\r\n            spellcheck=\"false\"\r\n            [formControl]=\"email\"\r\n          />\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(email).errors?.required && (email.dirty || email.touched)\r\n            \"\r\n            >email required</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"$any(email).errors?.email && (email.dirty || email.touched)\"\r\n            >invalid email</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(email).errors?.uniqueEmail && (email.dirty || email.touched)\r\n            \"\r\n            >email already registered</mat-error\r\n          >\r\n        </mat-form-field>\r\n        <mat-icon *ngIf=\"email.pending\">hourglass</mat-icon>\r\n      </div>\r\n\r\n      <!-- name -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n>username</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"name\"\r\n            maxlength=\"50\"\r\n            required\r\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\r\n            spellcheck=\"false\"\r\n            [formControl]=\"name\"\r\n          />\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"$any(name).errors?.required && (name.dirty || name.touched)\"\r\n            >username required</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"$any(name).errors?.pattern && (name.dirty || name.touched)\"\r\n            >invalid username</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(name).errors?.uniqueName && (name.dirty || name.touched)\r\n            \"\r\n            >username already registered</mat-error\r\n          >\r\n        </mat-form-field>\r\n        <mat-icon *ngIf=\"name.pending\">hourglass</mat-icon>\r\n      </div>\r\n\r\n      <!-- first name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n>first name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"firstName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"firstName\"\r\n          />\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              firstName.hasError('required') &&\r\n              (firstName.dirty || firstName.touched)\r\n            \"\r\n            class=\"text-danger small\"\r\n          >\r\n            first name required\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- last name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n>last name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"lastName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"lastName\"\r\n          />\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              lastName.hasError('required') &&\r\n              (lastName.dirty || lastName.touched)\r\n            \"\r\n            class=\"text-danger small\"\r\n          >\r\n            last name required\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- <div [formGroup]=\"passwords\"> -->\r\n      <!-- password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n>password</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"password\"\r\n            name=\"password\"\r\n            autocomplete=\"new-password\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"password\"\r\n          />\r\n          <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\r\n          </auth-jwt-password-strength-bar>\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(password).errors?.required &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >password required</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(password).errors?.passwordtooshort &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 8 characters</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(password).errors?.noupperinpassword &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 1 uppercase letter</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(password).errors?.nolowerinpassword &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 1 lowercase letter</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(password).errors?.nosymbolinpassword &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 1 punctuation/symbol</mat-error\r\n          >\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- confirm password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n>confirm password</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"password\"\r\n            name=\"confirmPassword\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"confirmPassword\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n      <div\r\n        i18n\r\n        *ngIf=\"form.errors?.areequal && confirmPassword.touched\"\r\n        style=\"color: red\"\r\n      >\r\n        password differs from confirmation password\r\n      </div>\r\n\r\n      <button i18n\r\n        mat-raised-button\r\n        type=\"submit\"\r\n        color=\"primary\"\r\n        [disabled]=\"\r\n          form.invalid || form.pristine || busy || name.pending || email.pending\r\n        \"\r\n      >\r\n        register\r\n      </button>\r\n      <mat-progress-spinner diameter=\"20\" *ngIf=\"busy\"></mat-progress-spinner>\r\n    </fieldset>\r\n  </form>\r\n\r\n  <details>\r\n    <summary i18n>Hints</summary>\r\n    <p i18n>\r\n      To register a new user, you must provide his email address, choose a\r\n      password, and choose a username, which must be unique (you will be\r\n      notified if another user has already taken that name). The username must\r\n      include only letters/digits, start with a letter, and be no shorter than 3\r\n      characters, nor longer than 50.\r\n    </p>\r\n    <p i18n>\r\n      To promote a decent security level, the password must include at least 8\r\n      characters, uppercase and lowercase letters, digits, and punctuation (like\r\n      dashes, stops, parentheses, etc.).\r\n    </p>\r\n    <p i18n>\r\n      Once registered, if messaging is enabled on the server side the user will\r\n      receive an email message to the email address you specified; he will have\r\n      to click on the provided link to complete the registration process.\r\n      Otherwise, you should edit the newly created user and confirm the email\r\n      registration.\r\n    </p>\r\n  </details>\r\n</div>\r\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}details{margin:8px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: PasswordStrengthBarComponent, selector: "auth-jwt-password-strength-bar", inputs: ["passwordToCheck"], outputs: ["strengthChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$1.MatSnackBar }, { token: AuthJwtAccountService }, { token: UserListRepository }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: AuthJwtRegistrationComponent, selector: "auth-jwt-registration", outputs: { registered: "registered" }, ngImport: i0, template: "<div>\r\n  <form role=\"form\" [formGroup]=\"form\" (submit)=\"onSubmit()\">\r\n    <fieldset>\r\n      <legend i18n=\"auth-jwt-admin\">registration</legend>\r\n      <!-- email -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n>email</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"email\"\r\n            id=\"email\"\r\n            maxlength=\"256\"\r\n            required\r\n            autofocus\r\n            spellcheck=\"false\"\r\n            [formControl]=\"email\"\r\n          />\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(email).errors?.required && (email.dirty || email.touched)\r\n            \"\r\n            >email required</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"$any(email).errors?.email && (email.dirty || email.touched)\"\r\n            >invalid email</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(email).errors?.uniqueEmail && (email.dirty || email.touched)\r\n            \"\r\n            >email already registered</mat-error\r\n          >\r\n        </mat-form-field>\r\n        <mat-icon *ngIf=\"email.pending\">hourglass</mat-icon>\r\n      </div>\r\n\r\n      <!-- name -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">username</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"name\"\r\n            maxlength=\"50\"\r\n            required\r\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\r\n            spellcheck=\"false\"\r\n            [formControl]=\"name\"\r\n          />\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"$any(name).errors?.required && (name.dirty || name.touched)\"\r\n            >username required</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"$any(name).errors?.pattern && (name.dirty || name.touched)\"\r\n            >invalid username</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(name).errors?.uniqueName && (name.dirty || name.touched)\r\n            \"\r\n            >username already registered</mat-error\r\n          >\r\n        </mat-form-field>\r\n        <mat-icon *ngIf=\"name.pending\">hourglass</mat-icon>\r\n      </div>\r\n\r\n      <!-- first name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"firstName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"firstName\"\r\n          />\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              firstName.hasError('required') &&\r\n              (firstName.dirty || firstName.touched)\r\n            \"\r\n            class=\"text-danger small\"\r\n          >\r\n            first name required\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- last name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"lastName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"lastName\"\r\n          />\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              lastName.hasError('required') &&\r\n              (lastName.dirty || lastName.touched)\r\n            \"\r\n            class=\"text-danger small\"\r\n          >\r\n            last name required\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- <div [formGroup]=\"passwords\"> -->\r\n      <!-- password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hide ? 'password' : 'text'\"\r\n            name=\"password\"\r\n            autocomplete=\"new-password\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"password\"\r\n          />\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matSuffix\r\n            (click)=\"hide = !hide\"\r\n            i18n-aria-label=\"auth-jwt-login\"\r\n            aria-label=\"Hide password\"\r\n            [attr.aria-pressed]=\"hide\"\r\n          >\r\n            <mat-icon>{{ hide ? \"visibility_off\" : \"visibility\" }}</mat-icon>\r\n          </button>\r\n          <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\r\n          </auth-jwt-password-strength-bar>\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(password).errors?.required &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >password required</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(password).errors?.passwordtooshort &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 8 characters</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(password).errors?.noupperinpassword &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 1 uppercase letter</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(password).errors?.nolowerinpassword &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 1 lowercase letter</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(password).errors?.nosymbolinpassword &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 1 punctuation/symbol</mat-error\r\n          >\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- confirm password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">confirm password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hide ? 'password' : 'text'\"\r\n            name=\"confirmPassword\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"confirmPassword\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n      <div\r\n        i18n=\"auth-jwt-admin\"\r\n        *ngIf=\"form.errors?.areequal && confirmPassword.touched\"\r\n        style=\"color: red\"\r\n      >\r\n        password differs from confirmation password\r\n      </div>\r\n\r\n      <button\r\n        i18n=\"auth-jwt-admin\"\r\n        mat-raised-button\r\n        type=\"submit\"\r\n        color=\"primary\"\r\n        [disabled]=\"\r\n          form.invalid || form.pristine || busy || name.pending || email.pending\r\n        \"\r\n      >\r\n        register\r\n      </button>\r\n      <mat-progress-spinner diameter=\"20\" *ngIf=\"busy\"></mat-progress-spinner>\r\n    </fieldset>\r\n  </form>\r\n\r\n  <details>\r\n    <summary i18n=\"auth-jwt-admin\">Hints</summary>\r\n    <div class=\"info\">\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To register a new user, you must provide his email address, choose a\r\n        password, and choose a username, which must be unique (you will be\r\n        notified if another user has already taken that name). The username must\r\n        include only letters/digits, start with a letter, and be no shorter than\r\n        3 characters, nor longer than 50.\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To promote a decent security level, the password must include at least 8\r\n        characters, uppercase and lowercase letters, digits, and punctuation\r\n        (like dashes, stops, parentheses, etc.).\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        Once registered, if messaging is enabled on the server side the user\r\n        will receive an email message to the email address you specified; he\r\n        will have to click on the provided link to complete the registration\r\n        process. Otherwise, you should edit the newly created user and confirm\r\n        the email registration.\r\n      </p>\r\n    </div>\r\n  </details>\r\n</div>\r\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}details{margin:8px}.info{column-width:600px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i10.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: PasswordStrengthBarComponent, selector: "auth-jwt-password-strength-bar", inputs: ["passwordToCheck"], outputs: ["strengthChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AuthJwtRegistrationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AuthJwtRegistrationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth-jwt-registration', template: "<div>\r\n  <form role=\"form\" [formGroup]=\"form\" (submit)=\"onSubmit()\">\r\n    <fieldset>\r\n      <legend i18n>registration</legend>\r\n      <!-- email -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n>email</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"email\"\r\n            id=\"email\"\r\n            maxlength=\"256\"\r\n            required\r\n            autofocus\r\n            spellcheck=\"false\"\r\n            [formControl]=\"email\"\r\n          />\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(email).errors?.required && (email.dirty || email.touched)\r\n            \"\r\n            >email required</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"$any(email).errors?.email && (email.dirty || email.touched)\"\r\n            >invalid email</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(email).errors?.uniqueEmail && (email.dirty || email.touched)\r\n            \"\r\n            >email already registered</mat-error\r\n          >\r\n        </mat-form-field>\r\n        <mat-icon *ngIf=\"email.pending\">hourglass</mat-icon>\r\n      </div>\r\n\r\n      <!-- name -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n>username</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"name\"\r\n            maxlength=\"50\"\r\n            required\r\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\r\n            spellcheck=\"false\"\r\n            [formControl]=\"name\"\r\n          />\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"$any(name).errors?.required && (name.dirty || name.touched)\"\r\n            >username required</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"$any(name).errors?.pattern && (name.dirty || name.touched)\"\r\n            >invalid username</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(name).errors?.uniqueName && (name.dirty || name.touched)\r\n            \"\r\n            >username already registered</mat-error\r\n          >\r\n        </mat-form-field>\r\n        <mat-icon *ngIf=\"name.pending\">hourglass</mat-icon>\r\n      </div>\r\n\r\n      <!-- first name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n>first name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"firstName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"firstName\"\r\n          />\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              firstName.hasError('required') &&\r\n              (firstName.dirty || firstName.touched)\r\n            \"\r\n            class=\"text-danger small\"\r\n          >\r\n            first name required\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- last name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n>last name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"lastName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"lastName\"\r\n          />\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              lastName.hasError('required') &&\r\n              (lastName.dirty || lastName.touched)\r\n            \"\r\n            class=\"text-danger small\"\r\n          >\r\n            last name required\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- <div [formGroup]=\"passwords\"> -->\r\n      <!-- password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n>password</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"password\"\r\n            name=\"password\"\r\n            autocomplete=\"new-password\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"password\"\r\n          />\r\n          <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\r\n          </auth-jwt-password-strength-bar>\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(password).errors?.required &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >password required</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(password).errors?.passwordtooshort &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 8 characters</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(password).errors?.noupperinpassword &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 1 uppercase letter</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(password).errors?.nolowerinpassword &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 1 lowercase letter</mat-error\r\n          >\r\n          <mat-error\r\n            i18n\r\n            *ngIf=\"\r\n              $any(password).errors?.nosymbolinpassword &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 1 punctuation/symbol</mat-error\r\n          >\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- confirm password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n>confirm password</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"password\"\r\n            name=\"confirmPassword\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"confirmPassword\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n      <div\r\n        i18n\r\n        *ngIf=\"form.errors?.areequal && confirmPassword.touched\"\r\n        style=\"color: red\"\r\n      >\r\n        password differs from confirmation password\r\n      </div>\r\n\r\n      <button i18n\r\n        mat-raised-button\r\n        type=\"submit\"\r\n        color=\"primary\"\r\n        [disabled]=\"\r\n          form.invalid || form.pristine || busy || name.pending || email.pending\r\n        \"\r\n      >\r\n        register\r\n      </button>\r\n      <mat-progress-spinner diameter=\"20\" *ngIf=\"busy\"></mat-progress-spinner>\r\n    </fieldset>\r\n  </form>\r\n\r\n  <details>\r\n    <summary i18n>Hints</summary>\r\n    <p i18n>\r\n      To register a new user, you must provide his email address, choose a\r\n      password, and choose a username, which must be unique (you will be\r\n      notified if another user has already taken that name). The username must\r\n      include only letters/digits, start with a letter, and be no shorter than 3\r\n      characters, nor longer than 50.\r\n    </p>\r\n    <p i18n>\r\n      To promote a decent security level, the password must include at least 8\r\n      characters, uppercase and lowercase letters, digits, and punctuation (like\r\n      dashes, stops, parentheses, etc.).\r\n    </p>\r\n    <p i18n>\r\n      Once registered, if messaging is enabled on the server side the user will\r\n      receive an email message to the email address you specified; he will have\r\n      to click on the provided link to complete the registration process.\r\n      Otherwise, you should edit the newly created user and confirm the email\r\n      registration.\r\n    </p>\r\n  </details>\r\n</div>\r\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}details{margin:8px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i2$1.MatSnackBar }, { type: AuthJwtAccountService }]; }, propDecorators: { registered: [{
+            args: [{ selector: 'auth-jwt-registration', template: "<div>\r\n  <form role=\"form\" [formGroup]=\"form\" (submit)=\"onSubmit()\">\r\n    <fieldset>\r\n      <legend i18n=\"auth-jwt-admin\">registration</legend>\r\n      <!-- email -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n>email</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"email\"\r\n            id=\"email\"\r\n            maxlength=\"256\"\r\n            required\r\n            autofocus\r\n            spellcheck=\"false\"\r\n            [formControl]=\"email\"\r\n          />\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(email).errors?.required && (email.dirty || email.touched)\r\n            \"\r\n            >email required</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"$any(email).errors?.email && (email.dirty || email.touched)\"\r\n            >invalid email</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(email).errors?.uniqueEmail && (email.dirty || email.touched)\r\n            \"\r\n            >email already registered</mat-error\r\n          >\r\n        </mat-form-field>\r\n        <mat-icon *ngIf=\"email.pending\">hourglass</mat-icon>\r\n      </div>\r\n\r\n      <!-- name -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">username</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"name\"\r\n            maxlength=\"50\"\r\n            required\r\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\r\n            spellcheck=\"false\"\r\n            [formControl]=\"name\"\r\n          />\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"$any(name).errors?.required && (name.dirty || name.touched)\"\r\n            >username required</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"$any(name).errors?.pattern && (name.dirty || name.touched)\"\r\n            >invalid username</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(name).errors?.uniqueName && (name.dirty || name.touched)\r\n            \"\r\n            >username already registered</mat-error\r\n          >\r\n        </mat-form-field>\r\n        <mat-icon *ngIf=\"name.pending\">hourglass</mat-icon>\r\n      </div>\r\n\r\n      <!-- first name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"firstName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"firstName\"\r\n          />\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              firstName.hasError('required') &&\r\n              (firstName.dirty || firstName.touched)\r\n            \"\r\n            class=\"text-danger small\"\r\n          >\r\n            first name required\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- last name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"lastName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"lastName\"\r\n          />\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              lastName.hasError('required') &&\r\n              (lastName.dirty || lastName.touched)\r\n            \"\r\n            class=\"text-danger small\"\r\n          >\r\n            last name required\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- <div [formGroup]=\"passwords\"> -->\r\n      <!-- password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hide ? 'password' : 'text'\"\r\n            name=\"password\"\r\n            autocomplete=\"new-password\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"password\"\r\n          />\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matSuffix\r\n            (click)=\"hide = !hide\"\r\n            i18n-aria-label=\"auth-jwt-login\"\r\n            aria-label=\"Hide password\"\r\n            [attr.aria-pressed]=\"hide\"\r\n          >\r\n            <mat-icon>{{ hide ? \"visibility_off\" : \"visibility\" }}</mat-icon>\r\n          </button>\r\n          <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\r\n          </auth-jwt-password-strength-bar>\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(password).errors?.required &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >password required</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(password).errors?.passwordtooshort &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 8 characters</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(password).errors?.noupperinpassword &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 1 uppercase letter</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(password).errors?.nolowerinpassword &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 1 lowercase letter</mat-error\r\n          >\r\n          <mat-error\r\n            i18n=\"auth-jwt-admin\"\r\n            *ngIf=\"\r\n              $any(password).errors?.nosymbolinpassword &&\r\n              (password.dirty || password.touched)\r\n            \"\r\n            >at least 1 punctuation/symbol</mat-error\r\n          >\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- confirm password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">confirm password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hide ? 'password' : 'text'\"\r\n            name=\"confirmPassword\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"confirmPassword\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n      <div\r\n        i18n=\"auth-jwt-admin\"\r\n        *ngIf=\"form.errors?.areequal && confirmPassword.touched\"\r\n        style=\"color: red\"\r\n      >\r\n        password differs from confirmation password\r\n      </div>\r\n\r\n      <button\r\n        i18n=\"auth-jwt-admin\"\r\n        mat-raised-button\r\n        type=\"submit\"\r\n        color=\"primary\"\r\n        [disabled]=\"\r\n          form.invalid || form.pristine || busy || name.pending || email.pending\r\n        \"\r\n      >\r\n        register\r\n      </button>\r\n      <mat-progress-spinner diameter=\"20\" *ngIf=\"busy\"></mat-progress-spinner>\r\n    </fieldset>\r\n  </form>\r\n\r\n  <details>\r\n    <summary i18n=\"auth-jwt-admin\">Hints</summary>\r\n    <div class=\"info\">\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To register a new user, you must provide his email address, choose a\r\n        password, and choose a username, which must be unique (you will be\r\n        notified if another user has already taken that name). The username must\r\n        include only letters/digits, start with a letter, and be no shorter than\r\n        3 characters, nor longer than 50.\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To promote a decent security level, the password must include at least 8\r\n        characters, uppercase and lowercase letters, digits, and punctuation\r\n        (like dashes, stops, parentheses, etc.).\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        Once registered, if messaging is enabled on the server side the user\r\n        will receive an email message to the email address you specified; he\r\n        will have to click on the provided link to complete the registration\r\n        process. Otherwise, you should edit the newly created user and confirm\r\n        the email registration.\r\n      </p>\r\n    </div>\r\n  </details>\r\n</div>\r\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}details{margin:8px}.info{column-width:600px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i2$1.MatSnackBar }, { type: AuthJwtAccountService }, { type: UserListRepository }], propDecorators: { registered: [{
                 type: Output
             }] } });
 
@@ -533,13 +679,13 @@ class UserFilterComponent {
         this._filter = this.getFilter();
         this.filterChange.emit(this._filter);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: UserFilterComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: { filter: "filter", disabled: "disabled" }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"apply()\" ng-disabled=\"disabled\">\n  <div class=\"form-row\">\n    <mat-form-field>\n      <mat-label i18n>name or ID</mat-label>\n      <input matInput [formControl]=\"name\" />\n      <button\n        mat-icon-button\n        matSuffix\n        type=\"button\"\n        (click)=\"reset()\"\n        color=\"warn\"\n        i18n-matTooltip\n        matTooltip=\"Reset filters\"\n        [disabled]=\"disabled\"\n      >\n        <mat-icon>clear</mat-icon>\n      </button>\n    </mat-form-field>\n\n    <button\n      id=\"apply\"\n      type=\"submit\"\n      mat-icon-button\n      color=\"primary\"\n      [disabled]=\"disabled\"\n      i18n-matTooltip\n      matTooltip=\"Apply filters\"\n    >\n      <mat-icon>check_circle</mat-icon>\n    </button>\n  </div>\n</form>\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#apply{margin-top:-20px}\n"], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UserFilterComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: { filter: "filter", disabled: "disabled" }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"apply()\" ng-disabled=\"disabled\">\n  <div class=\"form-row\">\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">name or ID</mat-label>\n      <input matInput [formControl]=\"name\" />\n      <button\n        mat-icon-button\n        matSuffix\n        type=\"button\"\n        (click)=\"reset()\"\n        color=\"warn\"\n        i18n-matTooltip=\"auth-jwt-admin\"\n        matTooltip=\"Reset filters\"\n        [disabled]=\"disabled\"\n      >\n        <mat-icon>clear</mat-icon>\n      </button>\n    </mat-form-field>\n\n    <button\n      id=\"apply\"\n      type=\"submit\"\n      mat-icon-button\n      color=\"primary\"\n      [disabled]=\"disabled\"\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Apply filters\"\n    >\n      <mat-icon>check_circle</mat-icon>\n    </button>\n  </div>\n</form>\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#apply{margin-top:-20px}\n"], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: UserFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UserFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth-jwt-user-filter', template: "<form [formGroup]=\"form\" (submit)=\"apply()\" ng-disabled=\"disabled\">\n  <div class=\"form-row\">\n    <mat-form-field>\n      <mat-label i18n>name or ID</mat-label>\n      <input matInput [formControl]=\"name\" />\n      <button\n        mat-icon-button\n        matSuffix\n        type=\"button\"\n        (click)=\"reset()\"\n        color=\"warn\"\n        i18n-matTooltip\n        matTooltip=\"Reset filters\"\n        [disabled]=\"disabled\"\n      >\n        <mat-icon>clear</mat-icon>\n      </button>\n    </mat-form-field>\n\n    <button\n      id=\"apply\"\n      type=\"submit\"\n      mat-icon-button\n      color=\"primary\"\n      [disabled]=\"disabled\"\n      i18n-matTooltip\n      matTooltip=\"Apply filters\"\n    >\n      <mat-icon>check_circle</mat-icon>\n    </button>\n  </div>\n</form>\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#apply{margin-top:-20px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { filter: [{
+            args: [{ selector: 'auth-jwt-user-filter', template: "<form [formGroup]=\"form\" (submit)=\"apply()\" ng-disabled=\"disabled\">\n  <div class=\"form-row\">\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">name or ID</mat-label>\n      <input matInput [formControl]=\"name\" />\n      <button\n        mat-icon-button\n        matSuffix\n        type=\"button\"\n        (click)=\"reset()\"\n        color=\"warn\"\n        i18n-matTooltip=\"auth-jwt-admin\"\n        matTooltip=\"Reset filters\"\n        [disabled]=\"disabled\"\n      >\n        <mat-icon>clear</mat-icon>\n      </button>\n    </mat-form-field>\n\n    <button\n      id=\"apply\"\n      type=\"submit\"\n      mat-icon-button\n      color=\"primary\"\n      [disabled]=\"disabled\"\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Apply filters\"\n    >\n      <mat-icon>check_circle</mat-icon>\n    </button>\n  </div>\n</form>\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#apply{margin-top:-20px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { filter: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -547,150 +693,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 type: Output
             }] } });
 
-class UserListRepository {
-    get activeUser$() {
-        return this._activeUser$.asObservable();
-    }
-    get filter$() {
-        return this._store.filter$;
-    }
-    get page$() {
-        return this._store.page$;
-    }
-    get loading$() {
-        return this._loading$.asObservable();
-    }
-    get saving$() {
-        return this._saving$.asObservable();
-    }
-    constructor(_accService) {
-        this._accService = _accService;
-        this._store = new PagedListStore(this);
-        this._activeUser$ = new BehaviorSubject(undefined);
-        this._loading$ = new BehaviorSubject(false);
-        this._saving$ = new BehaviorSubject(false);
-        this._store.reset();
-    }
-    loadPage(pageNumber, pageSize, filter) {
-        this._loading$.next(true);
-        return this._accService.getUsers(filter, pageNumber, pageSize).pipe(tap({
-            next: () => this._loading$.next(false),
-            error: () => this._loading$.next(false),
-        }));
-    }
-    async reset() {
-        this._loading$.next(true);
-        try {
-            await this._store.reset();
-        }
-        catch (error) {
-            throw error;
-        }
-        finally {
-            this._loading$.next(false);
-        }
-    }
-    async setFilter(filter) {
-        this._loading$.next(true);
-        try {
-            await this._store.setFilter(filter);
-        }
-        catch (error) {
-            throw error;
-        }
-        finally {
-            this._loading$.next(false);
-        }
-    }
-    getFilter() {
-        return this._store.getFilter();
-    }
-    async setPage(pageNumber, pageSize) {
-        this._loading$.next(true);
-        try {
-            await this._store.setPage(pageNumber, pageSize);
-        }
-        catch (error) {
-            throw error;
-        }
-        finally {
-            this._loading$.next(false);
-        }
-    }
-    setActiveUser(user) {
-        this._activeUser$.next(user || undefined);
-    }
-    updateActiveUser(user) {
-        const promise = new Promise((resolve, reject) => {
-            this._saving$.next(true);
-            this._accService.updateUser(user).subscribe({
-                next: (_) => {
-                    this._saving$.next(false);
-                    this._store.reset();
-                    resolve(true);
-                },
-                error: (error) => {
-                    this._saving$.next(false);
-                    console.error(`Error updating user ${user.userName}: ` +
-                        JSON.stringify(error || {}));
-                    resolve(false);
-                },
-            });
-        });
-        return promise;
-    }
-    deleteUser(name) {
-        const promise = new Promise((resolve, reject) => {
-            if (this._activeUser$.value?.userName === name) {
-                this._activeUser$.next(undefined);
-            }
-            this._saving$.next(true);
-            this._accService.deleteUser(name).subscribe({
-                next: (_) => {
-                    this._saving$.next(false);
-                    this._store.reset();
-                    resolve(true);
-                },
-                error: (error) => {
-                    this._saving$.next(false);
-                    console.error(`Error deleting user ${name}: ` + JSON.stringify(error || {}));
-                    reject(error);
-                },
-            });
-        });
-        return promise;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: UserListRepository, deps: [{ token: AuthJwtAccountService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: UserListRepository, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: UserListRepository, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: AuthJwtAccountService }]; } });
-
 // https://medium.com/@tarik.nzl/making-use-of-dialogs-in-material-2-mddialog-7533d27df41
 class ConfirmDialogComponent {
     constructor(dialogRef, data) {
         this.dialogRef = dialogRef;
         this.data = data;
-        this.title = $localize `Confirm`;
-        this.prompt = $localize `Confirm operation?`;
-        this.ok = $localize `yes`;
-        this.cancel = $localize `no`;
+        this.title = $localize `:auth-jwt-admin:Confirm`;
+        this.prompt = $localize `:auth-jwt-admin:Confirm operation?`;
+        this.ok = $localize `:auth-jwt-admin:yes`;
+        this.cancel = $localize `:auth-jwt-admin:no`;
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ConfirmDialogComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>{{ title }}</h1>\r\n<mat-dialog-content>\r\n  {{ prompt }}\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button\r\n    type=\"button\"\r\n    mat-raised-button\r\n    color=\"warn\"\r\n    (click)=\"dialogRef.close(true)\"\r\n  >\r\n    {{ ok }}\r\n  </button>\r\n  <button type=\"button\" mat-button (click)=\"dialogRef.close()\">\r\n    {{ cancel }}\r\n  </button>\r\n</mat-dialog-actions>\r\n", styles: [""], dependencies: [{ kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: ConfirmDialogComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>{{ title }}</h1>\r\n<mat-dialog-content>\r\n  {{ prompt }}\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button\r\n    type=\"button\"\r\n    mat-raised-button\r\n    color=\"warn\"\r\n    (click)=\"dialogRef.close(true)\"\r\n  >\r\n    {{ ok }}\r\n  </button>\r\n  <button type=\"button\" mat-button (click)=\"dialogRef.close()\">\r\n    {{ cancel }}\r\n  </button>\r\n</mat-dialog-actions>\r\n", styles: [""], dependencies: [{ kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ template: "<h1 mat-dialog-title>{{ title }}</h1>\r\n<mat-dialog-content>\r\n  {{ prompt }}\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button\r\n    type=\"button\"\r\n    mat-raised-button\r\n    color=\"warn\"\r\n    (click)=\"dialogRef.close(true)\"\r\n  >\r\n    {{ ok }}\r\n  </button>\r\n  <button type=\"button\" mat-button (click)=\"dialogRef.close()\">\r\n    {{ cancel }}\r\n  </button>\r\n</mat-dialog-actions>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }]; } });
+                }] }] });
 
 // https://medium.com/@tarik.nzl/making-use-of-dialogs-in-material-2-mddialog-7533d27df41
 /**
@@ -706,7 +731,7 @@ class DialogService {
     constructor(dialog) {
         this.dialog = dialog;
     }
-    confirm(title, prompt, ok = $localize `yes`, cancel = $localize `no`) {
+    confirm(title, prompt, ok = $localize `:auth-jwt-admin:yes`, cancel = $localize `:auth-jwt-admin:no`) {
         let dialogRef;
         dialogRef = this.dialog.open(ConfirmDialogComponent);
         dialogRef.componentInstance.title = title;
@@ -715,15 +740,15 @@ class DialogService {
         dialogRef.componentInstance.cancel = cancel;
         return dialogRef.afterClosed();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DialogService, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DialogService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: DialogService, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: DialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.MatDialog }]; } });
+        }], ctorParameters: () => [{ type: i1$2.MatDialog }] });
 
 class UserEditorComponent {
     set user(value) {
@@ -811,13 +836,13 @@ class UserEditorComponent {
         }
         this.userChange.emit(this.getUserFromForm());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: UserEditorComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i2$3.AuthJwtService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: { user: "user" }, outputs: { userChange: "userChange", editorClose: "editorClose" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\n  <div class=\"form-row\">\n    <!-- email -->\n    <mat-form-field>\n      <mat-label i18n>email</mat-label>\n      <input type=\"text\" matInput [formControl]=\"email\" />\n      <mat-error\n        i18n\n        *ngIf=\"email.hasError('required') && (email.dirty || email.touched)\"\n      >\n        email address required\n      </mat-error>\n      <mat-error\n        i18n\n        *ngIf=\"email.hasError('pattern') && (email.dirty || email.touched)\"\n      >\n        invalid email address\n      </mat-error>\n    </mat-form-field>\n\n    <!-- emailConfirmed -->\n    <mat-checkbox [formControl]=\"emailConfirmed\" i18n\n      >email address confirmed</mat-checkbox\n    >\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div class=\"form-row\">\n    <mat-checkbox [formControl]=\"lockoutEnabled\" i18n\n      >lockout enabled</mat-checkbox\n    >\n    <button\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"endLockout()\"\n      [disabled]=\"unlocked\"\n      i18n-matTooltip\n      matTooltip=\"Unlock this user if locked\"\n    >\n      <mat-icon>lock_open</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"form-row\">\n    <!-- firstName -->\n    <mat-form-field>\n      <mat-label i18n>first name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\n      <mat-error\n        i18n\n        *ngIf=\"\n          firstName.hasError('required') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name required\n      </mat-error>\n      <mat-error\n        i18n\n        *ngIf=\"\n          firstName.hasError('maxlength') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name too long\n      </mat-error>\n    </mat-form-field>\n\n    <!-- lastName -->\n    <mat-form-field>\n      <mat-label i18n>last name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\n      <mat-error\n        i18n\n        *ngIf=\"\n          lastName.hasError('required') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name required\n      </mat-error>\n      <mat-error\n        i18n\n        *ngIf=\"\n          lastName.hasError('maxlength') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- roles -->\n  <div>\n    <mat-form-field style=\"width: 16em\">\n      <mat-label i18n>roles</mat-label>\n      <input type=\"text\" matInput [formControl]=\"roles\" />\n      <mat-error\n        i18n\n        *ngIf=\"roles.hasError('maxlength') && (roles.dirty || roles.touched)\"\n      >\n        too long\n      </mat-error>\n      <mat-hint i18n>roles (separated by space)</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <!-- buttons -->\n  <br />\n  <div>\n    <button\n      type=\"button\"\n      mat-icon-button\n      color=\"warn\"\n      i18n-matTooltip\n      matTooltip=\"Close\"\n      (click)=\"close()\"\n    >\n      <mat-icon>cancel</mat-icon>\n    </button>\n    <button\n      type=\"submit\"\n      mat-icon-button\n      color=\"primary\"\n      [disabled]=\"form.invalid\"\n      i18n-matTooltip\n      matTooltip=\"Save user\"\n    >\n      <mat-icon>check_circle</mat-icon>\n    </button>\n  </div>\n</form>\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UserEditorComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i2$2.AuthJwtService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: { user: "user" }, outputs: { userChange: "userChange", editorClose: "editorClose" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\n  <div class=\"form-row\">\n    <!-- email -->\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">email</mat-label>\n      <input type=\"text\" matInput [formControl]=\"email\" />\n      <mat-error\n        i18n=\"auth-jwt-admin\"\n        *ngIf=\"email.hasError('required') && (email.dirty || email.touched)\"\n      >\n        email address required\n      </mat-error>\n      <mat-error\n        i18n=\"auth-jwt-admin\"\n        *ngIf=\"email.hasError('pattern') && (email.dirty || email.touched)\"\n      >\n        invalid email address\n      </mat-error>\n    </mat-form-field>\n\n    <!-- emailConfirmed -->\n    <mat-checkbox [formControl]=\"emailConfirmed\" i18n=\"auth-jwt-admin\"\n      >email address confirmed</mat-checkbox\n    >\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div class=\"form-row\">\n    <mat-checkbox [formControl]=\"lockoutEnabled\" i18n=\"auth-jwt-admin\"\n      >lockout enabled</mat-checkbox\n    >\n    <button\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"endLockout()\"\n      [disabled]=\"unlocked\"\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Unlock this user if locked\"\n    >\n      <mat-icon>lock_open</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"form-row\">\n    <!-- firstName -->\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\n      <mat-error\n        i18n=\"auth-jwt-admin\"\n        *ngIf=\"\n          firstName.hasError('required') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name required\n      </mat-error>\n      <mat-error\n        i18n=\"auth-jwt-admin\"\n        *ngIf=\"\n          firstName.hasError('maxlength') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name too long\n      </mat-error>\n    </mat-form-field>\n\n    <!-- lastName -->\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\n      <mat-error\n        i18n=\"auth-jwt-admin\"\n        *ngIf=\"\n          lastName.hasError('required') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name required\n      </mat-error>\n      <mat-error\n        i18n=\"auth-jwt-admin\"\n        *ngIf=\"\n          lastName.hasError('maxlength') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- roles -->\n  <div>\n    <mat-form-field style=\"width: 16em\">\n      <mat-label i18n=\"auth-jwt-admin\">roles</mat-label>\n      <input type=\"text\" matInput [formControl]=\"roles\" />\n      <mat-error\n        i18n=\"auth-jwt-admin\"\n        *ngIf=\"roles.hasError('maxlength') && (roles.dirty || roles.touched)\"\n      >\n        too long\n      </mat-error>\n      <mat-hint i18n>roles (separated by space)</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <!-- buttons -->\n  <br />\n  <div>\n    <button\n      type=\"button\"\n      mat-icon-button\n      color=\"warn\"\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Close\"\n      (click)=\"close()\"\n    >\n      <mat-icon>cancel</mat-icon>\n    </button>\n    <button\n      type=\"submit\"\n      mat-icon-button\n      color=\"primary\"\n      [disabled]=\"form.invalid\"\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Save user\"\n    >\n      <mat-icon>check_circle</mat-icon>\n    </button>\n  </div>\n</form>\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: UserEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UserEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth-jwt-user-editor', template: "<form [formGroup]=\"form\" (submit)=\"save()\">\n  <div class=\"form-row\">\n    <!-- email -->\n    <mat-form-field>\n      <mat-label i18n>email</mat-label>\n      <input type=\"text\" matInput [formControl]=\"email\" />\n      <mat-error\n        i18n\n        *ngIf=\"email.hasError('required') && (email.dirty || email.touched)\"\n      >\n        email address required\n      </mat-error>\n      <mat-error\n        i18n\n        *ngIf=\"email.hasError('pattern') && (email.dirty || email.touched)\"\n      >\n        invalid email address\n      </mat-error>\n    </mat-form-field>\n\n    <!-- emailConfirmed -->\n    <mat-checkbox [formControl]=\"emailConfirmed\" i18n\n      >email address confirmed</mat-checkbox\n    >\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div class=\"form-row\">\n    <mat-checkbox [formControl]=\"lockoutEnabled\" i18n\n      >lockout enabled</mat-checkbox\n    >\n    <button\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"endLockout()\"\n      [disabled]=\"unlocked\"\n      i18n-matTooltip\n      matTooltip=\"Unlock this user if locked\"\n    >\n      <mat-icon>lock_open</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"form-row\">\n    <!-- firstName -->\n    <mat-form-field>\n      <mat-label i18n>first name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\n      <mat-error\n        i18n\n        *ngIf=\"\n          firstName.hasError('required') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name required\n      </mat-error>\n      <mat-error\n        i18n\n        *ngIf=\"\n          firstName.hasError('maxlength') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name too long\n      </mat-error>\n    </mat-form-field>\n\n    <!-- lastName -->\n    <mat-form-field>\n      <mat-label i18n>last name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\n      <mat-error\n        i18n\n        *ngIf=\"\n          lastName.hasError('required') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name required\n      </mat-error>\n      <mat-error\n        i18n\n        *ngIf=\"\n          lastName.hasError('maxlength') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- roles -->\n  <div>\n    <mat-form-field style=\"width: 16em\">\n      <mat-label i18n>roles</mat-label>\n      <input type=\"text\" matInput [formControl]=\"roles\" />\n      <mat-error\n        i18n\n        *ngIf=\"roles.hasError('maxlength') && (roles.dirty || roles.touched)\"\n      >\n        too long\n      </mat-error>\n      <mat-hint i18n>roles (separated by space)</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <!-- buttons -->\n  <br />\n  <div>\n    <button\n      type=\"button\"\n      mat-icon-button\n      color=\"warn\"\n      i18n-matTooltip\n      matTooltip=\"Close\"\n      (click)=\"close()\"\n    >\n      <mat-icon>cancel</mat-icon>\n    </button>\n    <button\n      type=\"submit\"\n      mat-icon-button\n      color=\"primary\"\n      [disabled]=\"form.invalid\"\n      i18n-matTooltip\n      matTooltip=\"Save user\"\n    >\n      <mat-icon>check_circle</mat-icon>\n    </button>\n  </div>\n</form>\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.UntypedFormBuilder }, { type: i2$3.AuthJwtService }]; }, propDecorators: { user: [{
+            args: [{ selector: 'auth-jwt-user-editor', template: "<form [formGroup]=\"form\" (submit)=\"save()\">\n  <div class=\"form-row\">\n    <!-- email -->\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">email</mat-label>\n      <input type=\"text\" matInput [formControl]=\"email\" />\n      <mat-error\n        i18n=\"auth-jwt-admin\"\n        *ngIf=\"email.hasError('required') && (email.dirty || email.touched)\"\n      >\n        email address required\n      </mat-error>\n      <mat-error\n        i18n=\"auth-jwt-admin\"\n        *ngIf=\"email.hasError('pattern') && (email.dirty || email.touched)\"\n      >\n        invalid email address\n      </mat-error>\n    </mat-form-field>\n\n    <!-- emailConfirmed -->\n    <mat-checkbox [formControl]=\"emailConfirmed\" i18n=\"auth-jwt-admin\"\n      >email address confirmed</mat-checkbox\n    >\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div class=\"form-row\">\n    <mat-checkbox [formControl]=\"lockoutEnabled\" i18n=\"auth-jwt-admin\"\n      >lockout enabled</mat-checkbox\n    >\n    <button\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"endLockout()\"\n      [disabled]=\"unlocked\"\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Unlock this user if locked\"\n    >\n      <mat-icon>lock_open</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"form-row\">\n    <!-- firstName -->\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\n      <mat-error\n        i18n=\"auth-jwt-admin\"\n        *ngIf=\"\n          firstName.hasError('required') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name required\n      </mat-error>\n      <mat-error\n        i18n=\"auth-jwt-admin\"\n        *ngIf=\"\n          firstName.hasError('maxlength') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name too long\n      </mat-error>\n    </mat-form-field>\n\n    <!-- lastName -->\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\n      <mat-error\n        i18n=\"auth-jwt-admin\"\n        *ngIf=\"\n          lastName.hasError('required') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name required\n      </mat-error>\n      <mat-error\n        i18n=\"auth-jwt-admin\"\n        *ngIf=\"\n          lastName.hasError('maxlength') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- roles -->\n  <div>\n    <mat-form-field style=\"width: 16em\">\n      <mat-label i18n=\"auth-jwt-admin\">roles</mat-label>\n      <input type=\"text\" matInput [formControl]=\"roles\" />\n      <mat-error\n        i18n=\"auth-jwt-admin\"\n        *ngIf=\"roles.hasError('maxlength') && (roles.dirty || roles.touched)\"\n      >\n        too long\n      </mat-error>\n      <mat-hint i18n>roles (separated by space)</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <!-- buttons -->\n  <br />\n  <div>\n    <button\n      type=\"button\"\n      mat-icon-button\n      color=\"warn\"\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Close\"\n      (click)=\"close()\"\n    >\n      <mat-icon>cancel</mat-icon>\n    </button>\n    <button\n      type=\"submit\"\n      mat-icon-button\n      color=\"primary\"\n      [disabled]=\"form.invalid\"\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Save user\"\n    >\n      <mat-icon>check_circle</mat-icon>\n    </button>\n  </div>\n</form>\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.UntypedFormBuilder }, { type: i2$2.AuthJwtService }], propDecorators: { user: [{
                 type: Input
             }], userChange: [{
                 type: Output
@@ -846,7 +871,7 @@ class UserListComponent {
     }
     deleteUser(user) {
         this._dialogService
-            .confirm($localize `Confirm`, $localize `Delete user ${user.userName}?`)
+            .confirm($localize `:auth-jwt-admin:Confirm`, $localize `:auth-jwt-admin:Delete user` + user.userName + '?')
             .subscribe((yes) => {
             if (yes) {
                 this._repository.deleteUser(user.userName);
@@ -869,17 +894,17 @@ class UserListComponent {
     getGravatarUrl(email, size = 80) {
         return this._gravatarService.buildGravatarUrl(email, size);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: UserListComponent, deps: [{ token: UserListRepository }, { token: DialogService }, { token: i2$3.GravatarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: UserListComponent, selector: "auth-jwt-user-list", ngImport: i0, template: "<div id=\"container\">\n  <div>\n    <!-- filters -->\n    <div id=\"filters\">\n      <auth-jwt-user-filter\n        [filter]=\"filter$ | async\"\n        (filterChange)=\"onFilterChange($event)\"\n      ></auth-jwt-user-filter>\n    </div>\n\n    <!-- list -->\n    <div id=\"list\" *ngIf=\"page$ | async as page\">\n      <div *ngIf=\"loading$ | async\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <th i18n>name</th>\n          <th i18n class=\"noif-lt-md\">first</th>\n          <th i18n class=\"noif-lt-md\">last</th>\n          <th i18n class=\"noif-lt-md\">email</th>\n          <th i18n>roles</th>\n          <th i18n class=\"noif-lt-md\">lock end</th>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let user of page.items\">\n            <td class=\"fit-width\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip\n                matTooltip=\"Edit this user\"\n                color=\"primary\"\n                (click)=\"setActiveUser(user)\"\n              >\n                <mat-icon>mode_edit</mat-icon>\n              </button>\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip\n                matTooltip=\"Delete this user\"\n                color=\"warn\"\n                (click)=\"deleteUser(user)\"\n              >\n                <mat-icon>remove_circle</mat-icon>\n              </button>\n            </td>\n            <td class=\"fit-width\">\n              <img\n                alt=\"avatar\"\n                [src]=\"getGravatarUrl(user.email, 32)\"\n                [alt]=\"user.userName\"\n              />\n            </td>\n            <td>{{ user.userName }}</td>\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\n            <td class=\"noif-lt-md\">\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\n            </td>\n            <td>{{ user.roles.join(\" \") }}</td>\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\n          </tr>\n        </tbody>\n      </table>\n\n      <!-- paginator -->\n      <div class=\"form-row\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          color=\"warn\"\n          i18n-matmatTooltip\n          matTooltip=\"Refresh list\"\n          (click)=\"reset()\"\n        >\n          <mat-icon>autorenew</mat-icon>\n        </button>\n\n        <mat-paginator\n          [length]=\"page.total\"\n          [pageIndex]=\"page.pageNumber - 1\"\n          [pageSize]=\"page.pageSize\"\n          [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\n          (page)=\"onPageChange($event)\"\n          [showFirstLastButtons]=\"true\"\n        ></mat-paginator>\n      </div>\n    </div>\n  </div>\n\n  <!-- editor -->\n  <mat-expansion-panel\n    id=\"editor\"\n    [expanded]=\"active$ | async\"\n    [disabled]=\"!(active$ | async)\"\n  >\n    <div *ngIf=\"active$ | async as active\">\n      <fieldset>\n        <legend>{{ active.userName }}</legend>\n        <auth-jwt-user-editor\n          [user]=\"active\"\n          (userChange)=\"saveActiveUser($event)\"\n          (editorClose)=\"resetActiveUser()\"\n        ></auth-jwt-user-editor>\n      </fieldset>\n    </div>\n  </mat-expansion-panel>\n</div>\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.fit-width{width:1px;white-space:nowrap}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}div#filters{grid-area:filters}div#list{grid-area:list}div#editor{grid-area:editor}div#container{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"filters\" \"list\" \"editor\";gap:8px}@media only screen and (max-width: 959px){.noif-lt-md{display:none}}@media only screen and (min-width: 1920px){div#container{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"filters filters\" \"list editor\"}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i9$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: ["filter", "disabled"], outputs: ["filterChange"] }, { kind: "component", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: ["user"], outputs: ["userChange", "editorClose"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UserListComponent, deps: [{ token: UserListRepository }, { token: DialogService }, { token: i2$2.GravatarService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: UserListComponent, selector: "auth-jwt-user-list", ngImport: i0, template: "<div id=\"container\">\n  <div>\n    <!-- filters -->\n    <div id=\"filters\">\n      <auth-jwt-user-filter\n        [filter]=\"filter$ | async\"\n        (filterChange)=\"onFilterChange($event)\"\n      ></auth-jwt-user-filter>\n    </div>\n\n    <!-- list -->\n    <div id=\"list\" *ngIf=\"page$ | async as page\">\n      <div *ngIf=\"loading$ | async\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <th i18n=\"auth-jwt-admin\">name</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">first</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">last</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">email</th>\n          <th i18n=\"auth-jwt-admin\">roles</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">lock end</th>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let user of page.items\">\n            <td class=\"fit-width\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip=\"auth-jwt-admin\"\n                matTooltip=\"Edit this user\"\n                color=\"primary\"\n                (click)=\"setActiveUser(user)\"\n              >\n                <mat-icon>mode_edit</mat-icon>\n              </button>\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip=\"auth-jwt-admin\"\n                matTooltip=\"Delete this user\"\n                color=\"warn\"\n                (click)=\"deleteUser(user)\"\n              >\n                <mat-icon>remove_circle</mat-icon>\n              </button>\n            </td>\n            <td class=\"fit-width\">\n              <img\n                alt=\"avatar\"\n                [src]=\"getGravatarUrl(user.email, 32)\"\n                [alt]=\"user.userName\"\n              />\n            </td>\n            <td>{{ user.userName }}</td>\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\n            <td class=\"noif-lt-md\">\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\n            </td>\n            <td>{{ user.roles.join(\" \") }}</td>\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\n          </tr>\n        </tbody>\n      </table>\n\n      <!-- paginator -->\n      <div class=\"form-row\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          color=\"warn\"\n          i18n-matmatTooltip=\"auth-jwt-admin\"\n          matTooltip=\"Refresh list\"\n          (click)=\"reset()\"\n        >\n          <mat-icon>autorenew</mat-icon>\n        </button>\n\n        <mat-paginator\n          [length]=\"page.total\"\n          [pageIndex]=\"page.pageNumber - 1\"\n          [pageSize]=\"page.pageSize\"\n          [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\n          (page)=\"onPageChange($event)\"\n          [showFirstLastButtons]=\"true\"\n        ></mat-paginator>\n      </div>\n    </div>\n  </div>\n\n  <!-- editor -->\n  <mat-expansion-panel\n    id=\"editor\"\n    [expanded]=\"active$ | async\"\n    [disabled]=\"!(active$ | async)\"\n  >\n    <div *ngIf=\"active$ | async as active\">\n      <fieldset>\n        <legend>{{ active.userName }}</legend>\n        <auth-jwt-user-editor\n          [user]=\"active\"\n          (userChange)=\"saveActiveUser($event)\"\n          (editorClose)=\"resetActiveUser()\"\n        ></auth-jwt-user-editor>\n      </fieldset>\n    </div>\n  </mat-expansion-panel>\n</div>\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.fit-width{width:1px;white-space:nowrap}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}div#filters{grid-area:filters}div#list{grid-area:list}div#editor{grid-area:editor}div#container{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"filters\" \"list\" \"editor\";gap:8px}@media only screen and (max-width: 959px){.noif-lt-md{display:none}}@media only screen and (min-width: 1920px){div#container{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"filters filters\" \"list editor\"}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i9$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: ["filter", "disabled"], outputs: ["filterChange"] }, { kind: "component", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: ["user"], outputs: ["userChange", "editorClose"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: UserListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth-jwt-user-list', template: "<div id=\"container\">\n  <div>\n    <!-- filters -->\n    <div id=\"filters\">\n      <auth-jwt-user-filter\n        [filter]=\"filter$ | async\"\n        (filterChange)=\"onFilterChange($event)\"\n      ></auth-jwt-user-filter>\n    </div>\n\n    <!-- list -->\n    <div id=\"list\" *ngIf=\"page$ | async as page\">\n      <div *ngIf=\"loading$ | async\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <th i18n>name</th>\n          <th i18n class=\"noif-lt-md\">first</th>\n          <th i18n class=\"noif-lt-md\">last</th>\n          <th i18n class=\"noif-lt-md\">email</th>\n          <th i18n>roles</th>\n          <th i18n class=\"noif-lt-md\">lock end</th>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let user of page.items\">\n            <td class=\"fit-width\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip\n                matTooltip=\"Edit this user\"\n                color=\"primary\"\n                (click)=\"setActiveUser(user)\"\n              >\n                <mat-icon>mode_edit</mat-icon>\n              </button>\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip\n                matTooltip=\"Delete this user\"\n                color=\"warn\"\n                (click)=\"deleteUser(user)\"\n              >\n                <mat-icon>remove_circle</mat-icon>\n              </button>\n            </td>\n            <td class=\"fit-width\">\n              <img\n                alt=\"avatar\"\n                [src]=\"getGravatarUrl(user.email, 32)\"\n                [alt]=\"user.userName\"\n              />\n            </td>\n            <td>{{ user.userName }}</td>\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\n            <td class=\"noif-lt-md\">\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\n            </td>\n            <td>{{ user.roles.join(\" \") }}</td>\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\n          </tr>\n        </tbody>\n      </table>\n\n      <!-- paginator -->\n      <div class=\"form-row\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          color=\"warn\"\n          i18n-matmatTooltip\n          matTooltip=\"Refresh list\"\n          (click)=\"reset()\"\n        >\n          <mat-icon>autorenew</mat-icon>\n        </button>\n\n        <mat-paginator\n          [length]=\"page.total\"\n          [pageIndex]=\"page.pageNumber - 1\"\n          [pageSize]=\"page.pageSize\"\n          [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\n          (page)=\"onPageChange($event)\"\n          [showFirstLastButtons]=\"true\"\n        ></mat-paginator>\n      </div>\n    </div>\n  </div>\n\n  <!-- editor -->\n  <mat-expansion-panel\n    id=\"editor\"\n    [expanded]=\"active$ | async\"\n    [disabled]=\"!(active$ | async)\"\n  >\n    <div *ngIf=\"active$ | async as active\">\n      <fieldset>\n        <legend>{{ active.userName }}</legend>\n        <auth-jwt-user-editor\n          [user]=\"active\"\n          (userChange)=\"saveActiveUser($event)\"\n          (editorClose)=\"resetActiveUser()\"\n        ></auth-jwt-user-editor>\n      </fieldset>\n    </div>\n  </mat-expansion-panel>\n</div>\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.fit-width{width:1px;white-space:nowrap}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}div#filters{grid-area:filters}div#list{grid-area:list}div#editor{grid-area:editor}div#container{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"filters\" \"list\" \"editor\";gap:8px}@media only screen and (max-width: 959px){.noif-lt-md{display:none}}@media only screen and (min-width: 1920px){div#container{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"filters filters\" \"list editor\"}}\n"] }]
-        }], ctorParameters: function () { return [{ type: UserListRepository }, { type: DialogService }, { type: i2$3.GravatarService }]; } });
+            args: [{ selector: 'auth-jwt-user-list', template: "<div id=\"container\">\n  <div>\n    <!-- filters -->\n    <div id=\"filters\">\n      <auth-jwt-user-filter\n        [filter]=\"filter$ | async\"\n        (filterChange)=\"onFilterChange($event)\"\n      ></auth-jwt-user-filter>\n    </div>\n\n    <!-- list -->\n    <div id=\"list\" *ngIf=\"page$ | async as page\">\n      <div *ngIf=\"loading$ | async\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <th i18n=\"auth-jwt-admin\">name</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">first</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">last</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">email</th>\n          <th i18n=\"auth-jwt-admin\">roles</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">lock end</th>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let user of page.items\">\n            <td class=\"fit-width\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip=\"auth-jwt-admin\"\n                matTooltip=\"Edit this user\"\n                color=\"primary\"\n                (click)=\"setActiveUser(user)\"\n              >\n                <mat-icon>mode_edit</mat-icon>\n              </button>\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip=\"auth-jwt-admin\"\n                matTooltip=\"Delete this user\"\n                color=\"warn\"\n                (click)=\"deleteUser(user)\"\n              >\n                <mat-icon>remove_circle</mat-icon>\n              </button>\n            </td>\n            <td class=\"fit-width\">\n              <img\n                alt=\"avatar\"\n                [src]=\"getGravatarUrl(user.email, 32)\"\n                [alt]=\"user.userName\"\n              />\n            </td>\n            <td>{{ user.userName }}</td>\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\n            <td class=\"noif-lt-md\">\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\n            </td>\n            <td>{{ user.roles.join(\" \") }}</td>\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\n          </tr>\n        </tbody>\n      </table>\n\n      <!-- paginator -->\n      <div class=\"form-row\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          color=\"warn\"\n          i18n-matmatTooltip=\"auth-jwt-admin\"\n          matTooltip=\"Refresh list\"\n          (click)=\"reset()\"\n        >\n          <mat-icon>autorenew</mat-icon>\n        </button>\n\n        <mat-paginator\n          [length]=\"page.total\"\n          [pageIndex]=\"page.pageNumber - 1\"\n          [pageSize]=\"page.pageSize\"\n          [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\n          (page)=\"onPageChange($event)\"\n          [showFirstLastButtons]=\"true\"\n        ></mat-paginator>\n      </div>\n    </div>\n  </div>\n\n  <!-- editor -->\n  <mat-expansion-panel\n    id=\"editor\"\n    [expanded]=\"active$ | async\"\n    [disabled]=\"!(active$ | async)\"\n  >\n    <div *ngIf=\"active$ | async as active\">\n      <fieldset>\n        <legend>{{ active.userName }}</legend>\n        <auth-jwt-user-editor\n          [user]=\"active\"\n          (userChange)=\"saveActiveUser($event)\"\n          (editorClose)=\"resetActiveUser()\"\n        ></auth-jwt-user-editor>\n      </fieldset>\n    </div>\n  </mat-expansion-panel>\n</div>\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.fit-width{width:1px;white-space:nowrap}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}div#filters{grid-area:filters}div#list{grid-area:list}div#editor{grid-area:editor}div#container{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"filters\" \"list\" \"editor\";gap:8px}@media only screen and (max-width: 959px){.noif-lt-md{display:none}}@media only screen and (min-width: 1920px){div#container{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"filters filters\" \"list editor\"}}\n"] }]
+        }], ctorParameters: () => [{ type: UserListRepository }, { type: DialogService }, { type: i2$2.GravatarService }] });
 
 class AuthJwtAdminModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AuthJwtAdminModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: AuthJwtAdminModule, declarations: [AuthJwtRegistrationComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AuthJwtAdminModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: AuthJwtAdminModule, declarations: [AuthJwtRegistrationComponent,
             PasswordStrengthBarComponent,
             UserFilterComponent,
             UserListComponent,
@@ -907,7 +932,7 @@ class AuthJwtAdminModule {
             PasswordStrengthBarComponent,
             UserFilterComponent,
             UserListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AuthJwtAdminModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AuthJwtAdminModule, imports: [CommonModule,
             HttpClientModule,
             FormsModule,
             RouterModule,
@@ -928,7 +953,7 @@ class AuthJwtAdminModule {
             AuthJwtLoginModule,
             NgToolsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AuthJwtAdminModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AuthJwtAdminModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [