@myrmidon/auth-jwt-admin 0.0.2 → 0.0.3

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

@@ -0,0 +1,1061 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, InjectionToken, inject, Optional, Inject, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { retry, catchError, take, startWith, tap, switchMap, map } 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 * as i4 from '@angular/material/form-field';
+import * as i6 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i8 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i7 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i13 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i15 from '@datorama/akita';
+import { EntityStore, StoreConfig, QueryEntity, PaginatorPlugin } from '@datorama/akita';
+import { __decorate } from 'tslib';
+import * as i8$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BehaviorSubject, combineLatest } from 'rxjs';
+import * as i1$2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i2$2 from '@myrmidon/auth-jwt-login';
+import { AuthJwtLoginModule } from '@myrmidon/auth-jwt-login';
+import * as i8$2 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i11 from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import * as i4$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatCardModule } from '@angular/material/card';
+import { RouterModule } from '@angular/router';
+
+class PasswordValidators {
+    /** "Standard" password validator for my API services. */
+    static standard() {
+        return (control) => {
+            if (!control.value) {
+                return null;
+            }
+            if (control.value.length < 8) {
+                return {
+                    passwordTooShort: true,
+                };
+            }
+            if (!/.*[A-Z].*/.test(control.value)) {
+                return {
+                    noUpperInPassword: true,
+                };
+            }
+            if (!/.*[a-z].*/.test(control.value)) {
+                return {
+                    noLowerInPassword: true,
+                };
+            }
+            if (!/.*[A-Z].*/.test(control.value)) {
+                return {
+                    noUpperInPassword: true,
+                };
+            }
+            if (!/.*[-`~!@#$%^&*()_+=\[\]{};:'",.<>/?|\\].*/.test(control.value)) {
+                return {
+                    noSymbolInPassword: true,
+                };
+            }
+            return null;
+        };
+    }
+}
+
+class AuthJwtAccountService {
+    constructor(_http, _error, _env) {
+        this._http = _http;
+        this._error = _error;
+        this._env = _env;
+    }
+    /**
+     * Checks if the specified email address is registered on the server.
+     * @param email email address to test.
+     * @returns result.
+     */
+    isEmailRegistered(email) {
+        return this._http.get(this._env.get('apiUrl') +
+            'accounts/emailexists/' +
+            encodeURIComponent(email));
+    }
+    /**
+     * Checks if the specified user's given name is registered on the server.
+     * This name is a nickname chosen by users during registration, and is the key
+     * used for referencing users when talking to the server.
+     * @param name name to test.
+     * @returns result.
+     */
+    isNameRegistered(name) {
+        return this._http.get(this._env.get('apiUrl') +
+            'accounts/nameexists/' +
+            encodeURIComponent(name));
+    }
+    /**
+     * Register the user with the specified registration data.
+     * @param registration The registration data.
+     */
+    register(registration) {
+        // const options = {
+        //   headers: this.createAuthHeaders({
+        //     'Content-Type': 'application/json',
+        //   }),
+        // };
+        return this._http.post(this._env.get('apiUrl') + 'accounts/register', registration
+        // options
+        );
+    }
+    /**
+     * Resend the confirmation email to the specified address.
+     * @param email address.
+     */
+    resendConfirmEmail(email) {
+        // const options = {
+        //   headers: this.createAuthHeaders({
+        //     'Content-Type': 'application/json',
+        //   }),
+        // };
+        return this._http.get(this._env.get('apiUrl') +
+            'accounts/resendconfirm/' +
+            encodeURIComponent(email)
+        // options
+        );
+    }
+    /**
+     * Request a password reset for the specified email address.
+     * @param email Email address.
+     */
+    requestPasswordReset(email) {
+        return this._http.post(this._env.get('apiUrl') + 'accounts/resetpassword/request', { email });
+    }
+    getAllUsers() {
+        return this._http
+            .get(this._env.get('apiUrl') + 'users', {
+            params: new HttpParams().set('pageNumber', '1'),
+        })
+            .pipe(retry(3), catchError(this._error.handleError));
+    }
+    getUsers(filter) {
+        let httpParams = new HttpParams();
+        httpParams = httpParams.set('pageNumber', filter.pageNumber.toString());
+        httpParams = httpParams.set('pageSize', filter.pageSize.toString());
+        if (filter.name) {
+            httpParams = httpParams.set('name', filter.name);
+        }
+        return this._http
+            .get(this._env.get('apiUrl') + 'users', {
+            params: httpParams,
+        })
+            .pipe(retry(3), catchError(this._error.handleError));
+    }
+    /**
+     * Get the top N users matching the specified name filter.
+     * @param nameFilter The user name filter.
+     * @param limit The maximum number of users to get.
+     */
+    getTopUsers(nameFilter, limit = 10) {
+        let httpParams = new HttpParams();
+        httpParams = httpParams.set('pageNumber', '1');
+        httpParams = httpParams.set('pageSize', limit.toString());
+        if (nameFilter) {
+            httpParams = httpParams.set('name', nameFilter);
+        }
+        const options = httpParams.keys().length > 0
+            ? {
+                params: httpParams,
+            }
+            : {};
+        return this._http
+            .get(this._env.get('apiUrl') + 'users', options)
+            .pipe(retry(3), catchError(this._error.handleError));
+    }
+    /**
+     * Get information about all the users listed in the specified names.
+     * @param names User(s) names.
+     */
+    getUsersFromNames(names) {
+        let httpParams = new HttpParams();
+        if (names && names.length > 0) {
+            httpParams = httpParams.set('names', names.join(','));
+        }
+        const options = httpParams.keys().length > 0
+            ? {
+                params: httpParams,
+            }
+            : {};
+        return this._http
+            .get(this._env.get('apiUrl') + 'users-from-names', options)
+            .pipe(retry(3), catchError(this._error.handleError));
+    }
+    /**
+     * Get data about the specified user.
+     * @param name The user name.
+     */
+    getUser(name) {
+        return this._http
+            .get(this._env.get('apiUrl') + 'users/' + name)
+            .pipe(retry(3), catchError(this._error.handleError));
+    }
+    /**
+     * Update the editable data for the specified user.
+     * @param user The user to update.
+     */
+    updateUser(user) {
+        return this._http
+            .put(this._env.get('apiUrl') + 'users', user)
+            .pipe(catchError(this._error.handleError));
+    }
+    /**
+     * Request a password reset email for the specified email address.
+     * @param email The email address to receive the reset message.
+     */
+    resetPassword(email) {
+        return this._http
+            .post(this._env.get('apiUrl') + 'accounts/resetpassword/request', {
+            email: email,
+        })
+            .pipe(catchError(this._error.handleError));
+    }
+    /**
+     * Change the password.
+     * @param change The password change data.
+     */
+    changePassword(change) {
+        return this._http
+            .post(this._env.get('apiUrl') + 'accounts/changepassword', change)
+            .pipe(catchError(this._error.handleError));
+    }
+    /**
+     * Delete the user with the specified username.
+     * @param name The user name.
+     */
+    deleteUser(name) {
+        return this._http
+            .delete(this._env.get('apiUrl') + 'accounts/' + name)
+            .pipe(catchError(this._error.handleError));
+    }
+}
+AuthJwtAccountService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AuthJwtAccountService, deps: [{ token: i1.HttpClient }, { token: i2.ErrorService }, { token: i2.EnvService }], target: i0.ɵɵFactoryTarget.Injectable });
+AuthJwtAccountService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AuthJwtAccountService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AuthJwtAccountService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.ErrorService }, { type: i2.EnvService }]; } });
+
+class PasswordStrengthBarComponent {
+    constructor() {
+        this._colors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];
+        this.strengthChange = new EventEmitter();
+        this.strengthChange = new EventEmitter();
+        this.bars = [];
+    }
+    measureStrength(p) {
+        let force = 0;
+        const regex = /[$-/:-?{-~!"^_`\[\]]/g; // "
+        const lowerLetters = /[a-z]+/.test(p);
+        const upperLetters = /[A-Z]+/.test(p);
+        const numbers = /[0-9]+/.test(p);
+        const symbols = regex.test(p);
+        const flags = [lowerLetters, upperLetters, numbers, symbols];
+        let passedMatches = 0;
+        for (const flag of flags) {
+            passedMatches += flag === true ? 1 : 0;
+        }
+        force += 2 * p.length + (p.length >= 10 ? 1 : 0);
+        force += passedMatches * 10;
+        // penalty (short password)
+        force = p.length <= 6 ? Math.min(force, 10) : force;
+        // penalty (poor letiety of characters)
+        force = passedMatches === 1 ? Math.min(force, 10) : force;
+        force = passedMatches === 2 ? Math.min(force, 20) : force;
+        force = passedMatches === 3 ? Math.min(force, 40) : force;
+        return force;
+    }
+    getColor(s) {
+        let idx = 0;
+        if (s <= 10) {
+            idx = 0;
+        }
+        else if (s <= 20) {
+            idx = 1;
+        }
+        else if (s <= 30) {
+            idx = 2;
+        }
+        else if (s <= 40) {
+            idx = 3;
+        }
+        else {
+            idx = 4;
+        }
+        return {
+            idx: idx + 1,
+            col: this._colors[idx],
+        };
+    }
+    ngOnChanges(changes) {
+        const password = changes['passwordToCheck'].currentValue;
+        this.setBarColors(5, '#DDD');
+        if (password) {
+            const strength = this.measureStrength(password);
+            const c = this.getColor(strength);
+            this.setBarColors(c.idx, c.col);
+            this.strengthChange.emit(strength);
+        }
+    }
+    setBarColors(count, col) {
+        for (let n = 0; n < count; n++) {
+            this.bars[n] = col;
+        }
+    }
+}
+PasswordStrengthBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: PasswordStrengthBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PasswordStrengthBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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: "13.3.5", 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: [{
+                type: Input
+            }], strengthChange: [{
+                type: Output
+            }] } });
+
+class AuthJwtRegistrationComponent {
+    constructor(formBuilder, _snackbar, _accountService) {
+        this._snackbar = _snackbar;
+        this._accountService = _accountService;
+        this.registered = new EventEmitter();
+        // form
+        this.email = formBuilder.control('', [Validators.required, Validators.email], this.getUniqueEmailValidator(this._accountService).bind(this));
+        this.name = formBuilder.control('', Validators.required, this.getUniqueNameValidator(this._accountService).bind(this));
+        this.firstName = formBuilder.control('', [
+            Validators.required,
+            Validators.maxLength(50),
+        ]);
+        this.lastName = formBuilder.control('', [
+            Validators.required,
+            Validators.maxLength(50),
+        ]);
+        // http://stackoverflow.com/questions/35474991/angular-2-form-validating-for-repeat-password
+        this.password = formBuilder.control('', Validators.compose([Validators.required, PasswordValidators.standard]));
+        this.confirmPassword = formBuilder.control('', Validators.required);
+        this.passwords = formBuilder.group({
+            password: this.password,
+            confirmPassword: this.confirmPassword,
+        }, { validator: this.areEqual.bind(this) });
+        this.registration = formBuilder.group({
+            email: this.email,
+            name: this.name,
+            firstName: this.firstName,
+            lastName: this.lastName,
+            passwords: this.passwords,
+        });
+    }
+    areEqual(group) {
+        if (this.password.value === this.confirmPassword.value) {
+            return null;
+        }
+        return {
+            areEqual: true,
+        };
+    }
+    /**
+     * Creates a unique name validator. There is no dependency injection at this level,
+     * but we can use closures. As a matter of fact, we have access to the service instance
+     * from the component where we register validators. So we will implement a function
+     * that will accept the service as parameter, and create the actual validation function.
+     * This function will have access to the service when called during the validation process.
+     * See http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/.
+     */
+    getUniqueNameValidator(service) {
+        return (control) => {
+            return new Promise((resolve, reject) => {
+                // avoid checking if empty
+                if (!control.value) {
+                    resolve(null);
+                }
+                else {
+                    service.isNameRegistered(control.value).subscribe((data) => {
+                        if (!data.isExisting) {
+                            resolve(null);
+                        }
+                        else {
+                            resolve({ uniqueName: true });
+                        }
+                    }, (err) => {
+                        resolve({ uniqueName: true });
+                    });
+                }
+            });
+        };
+    }
+    getUniqueEmailValidator(service) {
+        return (control) => {
+            return new Promise((resolve, reject) => {
+                // avoid checking if empty
+                if (!control.value) {
+                    resolve(null);
+                }
+                else {
+                    service.isEmailRegistered(control.value).subscribe((data) => {
+                        if (!data.isExisting) {
+                            resolve(null);
+                        }
+                        else {
+                            resolve({ uniqueEmail: true });
+                        }
+                    }, (err) => {
+                        resolve({ uniqueEmail: true });
+                    });
+                }
+            });
+        };
+    }
+    ngOnInit() { }
+    getEmailErrorLabel() {
+        if (!this.email.dirty) {
+            return null;
+        }
+        if (this.email.hasError('required')) {
+            return 'email address required';
+        }
+        if (this.email.hasError('email')) {
+            return 'invalid email address';
+        }
+        if (this.email.hasError('uniqueEmail') && !this.email.pending) {
+            return 'email address already registered';
+        }
+        return null;
+    }
+    getNameErrorLabel() {
+        if (!this.name.dirty) {
+            return null;
+        }
+        if (this.name.hasError('required')) {
+            return 'username required';
+        }
+        if (this.name.hasError('pattern')) {
+            return 'invalid username';
+        }
+        if (this.name.hasError('uniqueName') && !this.name.pending) {
+            return 'username already taken';
+        }
+        return null;
+    }
+    getPasswordErrorLabel() {
+        if (!this.password.dirty) {
+            return null;
+        }
+        if (this.password.hasError('required')) {
+            return 'password required';
+        }
+        if (this.password.hasError('passwordTooShort')) {
+            let s = 'at least 8 characters';
+            if (this.password.value) {
+                s += ` (now ${this.password.value.length})`;
+            }
+            return s;
+        }
+        if (this.password.hasError('noUpperInPassword')) {
+            return 'at least 1 uppercase letter';
+        }
+        if (this.password.hasError('noLowerInPassword')) {
+            return 'at least 1 lowercase letter';
+        }
+        if (this.password.hasError('noSymbolInPassword')) {
+            return 'at least 1 punctuation or symbol';
+        }
+        return null;
+    }
+    onSubmit() {
+        if (!this.registration.valid ||
+            this.busy ||
+            this.name.pending ||
+            this.email.pending) {
+            return;
+        }
+        const model = {
+            email: this.email.value,
+            name: this.name.value,
+            firstName: this.firstName.value,
+            lastName: this.lastName.value,
+            password: this.password.value,
+        };
+        this.busy = true;
+        this._accountService
+            .register(model)
+            .pipe(take(1))
+            .subscribe(() => {
+            this.busy = false;
+            this._snackbar.open('Registration succeeded', 'OK');
+            // this.registration.reset();
+            // this.registration.clearValidators();
+            // this.registration.markAsPristine();
+            this.registered.emit();
+        }, (error) => {
+            this.busy = false;
+            console.error(error);
+            this._snackbar.open('Registration error', 'OK');
+        });
+    }
+}
+AuthJwtRegistrationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$1.MatSnackBar }, { token: AuthJwtAccountService }], target: i0.ɵɵFactoryTarget.Component });
+AuthJwtRegistrationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: AuthJwtRegistrationComponent, selector: "auth-jwt-registration", outputs: { registered: "registered" }, ngImport: i0, template: "<div>\n  <div>\n    <p>\n      To register a new user, you must provide his email address, choose a\n      password, and choose a username, which must be unique (you will be\n      notified if another user has already taken that name). The username must\n      include only letters/digits, start with a letter, and be no shorter than 3\n      characters, nor longer than 50.\n    </p>\n    <p>\n      To promote a decent security level, the password must include at least 8\n      characters, uppercase and lowercase letters, digits, and punctuation (like\n      dashes, stops, parentheses, etc.).\n    </p>\n    <p>\n      Once registered, the user will receive an email message to the email\n      address you specified; he will have to click on the provided link to\n      complete the registration process.\n    </p>\n  </div>\n\n  <form role=\"form\" [formGroup]=\"registration\" (submit)=\"onSubmit()\">\n    <fieldset>\n      <label>register user</label>\n      <!-- email -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"email\"\n            id=\"email\"\n            maxlength=\"256\"\n            required\n            autofocus\n            spellcheck=\"false\"\n            placeholder=\"email\"\n            formControlName=\"email\"\n          />\n          <mat-error>{{ getEmailErrorLabel() }}</mat-error>\n          <mat-icon *ngIf=\"email.pending\">hourglass</mat-icon>\n        </mat-form-field>\n      </div>\n\n      <!-- name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"name\"\n            maxlength=\"50\"\n            required\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\n            spellcheck=\"false\"\n            placeholder=\"username\"\n            formControlName=\"name\"\n          />\n          <mat-error>{{ getNameErrorLabel() }}</mat-error>\n          <mat-icon *ngIf=\"name.pending\">hourglass</mat-icon>\n        </mat-form-field>\n      </div>\n\n      <!-- first name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"firstName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            placeholder=\"first name\"\n            formControlName=\"firstName\"\n          />\n          <mat-error\n            *ngIf=\"\n              firstName.hasError('required') &&\n              (firstName.dirty || firstName.touched)\n            \"\n            class=\"text-danger small\"\n          >\n            first name required\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <!-- last name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"lastName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            placeholder=\"last name\"\n            formControlName=\"lastName\"\n          />\n          <mat-error\n            *ngIf=\"\n              lastName.hasError('required') &&\n              (lastName.dirty || lastName.touched)\n            \"\n            class=\"text-danger small\"\n          >\n            last name required\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div [formGroup]=\"passwords\">\n        <!-- password -->\n        <div>\n          <mat-form-field>\n            <input\n              matInput\n              type=\"password\"\n              name=\"password\"\n              autocomplete=\"new-password\"\n              maxlength=\"50\"\n              required\n              spellcheck=\"false\"\n              placeholder=\"password\"\n              formControlName=\"password\"\n            />\n            <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\n            </auth-jwt-password-strength-bar>\n            <mat-error>{{ getPasswordErrorLabel() }}</mat-error>\n          </mat-form-field>\n        </div>\n\n        <!-- confirm password -->\n        <div>\n          <mat-form-field>\n            <input\n              matInput\n              type=\"password\"\n              name=\"confirmPassword\"\n              maxlength=\"50\"\n              required\n              spellcheck=\"false\"\n              placeholder=\"confirm password\"\n              formControlName=\"confirmPassword\"\n            />\n            <mat-error\n              *ngIf=\"\n                passwords.hasError('areEqual') &&\n                (confirmPassword.dirty || confirmPassword.touched)\n              \"\n            >\n              password differs from confirmation password\n            </mat-error>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <button\n        mat-raised-button\n        type=\"submit\"\n        color=\"primary\"\n        [disabled]=\"\n          !registration.valid || busy || name.pending || email.pending\n        \"\n      >\n        register\n      </button>\n      <mat-progress-spinner\n        diameter=\"20\"\n        *ngIf=\"busy\"\n        aria-label=\"Busy\"\n      ></mat-progress-spinner>\n    </fieldset>\n  </form>\n</div>\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}\n"], components: [{ type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: PasswordStrengthBarComponent, selector: "auth-jwt-password-strength-bar", inputs: ["passwordToCheck"], outputs: ["strengthChange"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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"] }, { 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]" }, { type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AuthJwtRegistrationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'auth-jwt-registration', template: "<div>\n  <div>\n    <p>\n      To register a new user, you must provide his email address, choose a\n      password, and choose a username, which must be unique (you will be\n      notified if another user has already taken that name). The username must\n      include only letters/digits, start with a letter, and be no shorter than 3\n      characters, nor longer than 50.\n    </p>\n    <p>\n      To promote a decent security level, the password must include at least 8\n      characters, uppercase and lowercase letters, digits, and punctuation (like\n      dashes, stops, parentheses, etc.).\n    </p>\n    <p>\n      Once registered, the user will receive an email message to the email\n      address you specified; he will have to click on the provided link to\n      complete the registration process.\n    </p>\n  </div>\n\n  <form role=\"form\" [formGroup]=\"registration\" (submit)=\"onSubmit()\">\n    <fieldset>\n      <label>register user</label>\n      <!-- email -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"email\"\n            id=\"email\"\n            maxlength=\"256\"\n            required\n            autofocus\n            spellcheck=\"false\"\n            placeholder=\"email\"\n            formControlName=\"email\"\n          />\n          <mat-error>{{ getEmailErrorLabel() }}</mat-error>\n          <mat-icon *ngIf=\"email.pending\">hourglass</mat-icon>\n        </mat-form-field>\n      </div>\n\n      <!-- name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"name\"\n            maxlength=\"50\"\n            required\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\n            spellcheck=\"false\"\n            placeholder=\"username\"\n            formControlName=\"name\"\n          />\n          <mat-error>{{ getNameErrorLabel() }}</mat-error>\n          <mat-icon *ngIf=\"name.pending\">hourglass</mat-icon>\n        </mat-form-field>\n      </div>\n\n      <!-- first name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"firstName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            placeholder=\"first name\"\n            formControlName=\"firstName\"\n          />\n          <mat-error\n            *ngIf=\"\n              firstName.hasError('required') &&\n              (firstName.dirty || firstName.touched)\n            \"\n            class=\"text-danger small\"\n          >\n            first name required\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <!-- last name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"lastName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            placeholder=\"last name\"\n            formControlName=\"lastName\"\n          />\n          <mat-error\n            *ngIf=\"\n              lastName.hasError('required') &&\n              (lastName.dirty || lastName.touched)\n            \"\n            class=\"text-danger small\"\n          >\n            last name required\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div [formGroup]=\"passwords\">\n        <!-- password -->\n        <div>\n          <mat-form-field>\n            <input\n              matInput\n              type=\"password\"\n              name=\"password\"\n              autocomplete=\"new-password\"\n              maxlength=\"50\"\n              required\n              spellcheck=\"false\"\n              placeholder=\"password\"\n              formControlName=\"password\"\n            />\n            <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\n            </auth-jwt-password-strength-bar>\n            <mat-error>{{ getPasswordErrorLabel() }}</mat-error>\n          </mat-form-field>\n        </div>\n\n        <!-- confirm password -->\n        <div>\n          <mat-form-field>\n            <input\n              matInput\n              type=\"password\"\n              name=\"confirmPassword\"\n              maxlength=\"50\"\n              required\n              spellcheck=\"false\"\n              placeholder=\"confirm password\"\n              formControlName=\"confirmPassword\"\n            />\n            <mat-error\n              *ngIf=\"\n                passwords.hasError('areEqual') &&\n                (confirmPassword.dirty || confirmPassword.touched)\n              \"\n            >\n              password differs from confirmation password\n            </mat-error>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <button\n        mat-raised-button\n        type=\"submit\"\n        color=\"primary\"\n        [disabled]=\"\n          !registration.valid || busy || name.pending || email.pending\n        \"\n      >\n        register\n      </button>\n      <mat-progress-spinner\n        diameter=\"20\"\n        *ngIf=\"busy\"\n        aria-label=\"Busy\"\n      ></mat-progress-spinner>\n    </fieldset>\n  </form>\n</div>\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i2$1.MatSnackBar }, { type: AuthJwtAccountService }]; }, propDecorators: { registered: [{
+                type: Output
+            }] } });
+
+const initialState = {
+    filter: {
+        pageNumber: 1,
+        pageSize: 20,
+    },
+    active: null
+};
+let UsersStore = class UsersStore extends EntityStore {
+    constructor() {
+        super(initialState);
+    }
+};
+UsersStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UsersStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+UsersStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UsersStore, providedIn: 'root' });
+UsersStore = __decorate([
+    StoreConfig({ name: 'Users', idKey: 'userName', resettable: true })
+], UsersStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UsersStore, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return []; } });
+
+class UsersQuery extends QueryEntity {
+    constructor(_store) {
+        super(_store);
+        this._store = _store;
+    }
+    selectFilter() {
+        return this.select((state) => state.filter);
+    }
+}
+UsersQuery.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UsersQuery, deps: [{ token: UsersStore }], target: i0.ɵɵFactoryTarget.Injectable });
+UsersQuery.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UsersQuery, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UsersQuery, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: UsersStore }]; } });
+
+class UsersService {
+    constructor(_store, _accountService) {
+        this._store = _store;
+        this._accountService = _accountService;
+    }
+    /**
+     * Update the filter in the store.
+     * @param filter The filter.
+     */
+    updateFilter(filter) {
+        this._store.update({
+            filter: filter,
+        });
+    }
+    setActive(name) {
+        this._store.setActive(name);
+    }
+    updateActive(user) {
+        const promise = new Promise((resolve, reject) => {
+            this._store.setLoading(true);
+            this._accountService.updateUser(user).subscribe((_) => {
+                this._store.setLoading(false);
+                this._store.setError(null);
+                this._store.updateActive((u) => {
+                    return Object.assign({}, user);
+                });
+                resolve(true);
+            }, (error) => {
+                console.error(error);
+                this._store.setLoading(false);
+                this._store.setError('Error updating user');
+                resolve(false);
+            });
+        });
+        return promise;
+    }
+    deleteUser(name) {
+        const promise = new Promise((resolve, reject) => {
+            this._store.setLoading(true);
+            this._accountService.deleteUser(name).subscribe((_) => {
+                this._store.setLoading(false);
+                this._store.setError(null);
+                this._store.remove(name);
+                resolve(true);
+            }, (error) => {
+                console.error(error);
+                this._store.setLoading(false);
+                this._store.setError('Error deleting user');
+                reject(error);
+            });
+        });
+        return promise;
+    }
+}
+UsersService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UsersService, deps: [{ token: UsersStore }, { token: AuthJwtAccountService }], target: i0.ɵɵFactoryTarget.Injectable });
+UsersService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UsersService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UsersService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: UsersStore }, { type: AuthJwtAccountService }]; } });
+
+class UserFilterComponent {
+    constructor(formBuilder, query, _corporaService) {
+        this._corporaService = _corporaService;
+        this.filter$ = query.selectFilter();
+        // form
+        this.name = formBuilder.control(null);
+        this.form = formBuilder.group({
+            name: this.name,
+        });
+    }
+    ngOnInit() {
+        this.filter$.subscribe((f) => {
+            this.updateForm(f);
+        });
+    }
+    updateForm(filter) {
+        this.name.setValue(filter.name);
+        this.form.markAsPristine();
+    }
+    reset() {
+        this.form.reset();
+        this.apply();
+    }
+    getFilter() {
+        var _a;
+        return {
+            pageNumber: 1,
+            pageSize: 20,
+            name: (_a = this.name.value) === null || _a === void 0 ? void 0 : _a.trim(),
+        };
+    }
+    apply() {
+        if (this.form.invalid) {
+            return;
+        }
+        const filter = this.getFilter();
+        // update filter in state
+        this._corporaService.updateFilter(filter);
+    }
+}
+UserFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UserFilterComponent, deps: [{ token: i1$1.FormBuilder }, { token: UsersQuery }, { token: UsersService }], target: i0.ɵɵFactoryTarget.Component });
+UserFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: { disabled: "disabled" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"apply()\" ng-disabled=\"disabled\">\n  <mat-form-field>\n    <input matInput [formControl]=\"name\" placeholder=\"name or ID\" />\n    <button\n      mat-icon-button\n      matSuffix\n      type=\"button\"\n      (click)=\"reset()\"\n      color=\"warn\"\n      matTooltip=\"Reset filters\"\n      [disabled]=\"disabled\"\n    >\n      <mat-icon>clear</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <button\n    type=\"submit\"\n    mat-icon-button\n    color=\"primary\"\n    [disabled]=\"disabled\"\n    matTooltip=\"Apply filters\"\n  >\n    <mat-icon>check_circle</mat-icon>\n  </button>\n</form>\n", styles: [""], components: [{ type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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"] }, { 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]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.MatSuffix, selector: "[matSuffix]" }, { type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UserFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'auth-jwt-user-filter', template: "<form [formGroup]=\"form\" (submit)=\"apply()\" ng-disabled=\"disabled\">\n  <mat-form-field>\n    <input matInput [formControl]=\"name\" placeholder=\"name or ID\" />\n    <button\n      mat-icon-button\n      matSuffix\n      type=\"button\"\n      (click)=\"reset()\"\n      color=\"warn\"\n      matTooltip=\"Reset filters\"\n      [disabled]=\"disabled\"\n    >\n      <mat-icon>clear</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <button\n    type=\"submit\"\n    mat-icon-button\n    color=\"primary\"\n    [disabled]=\"disabled\"\n    matTooltip=\"Apply filters\"\n  >\n    <mat-icon>check_circle</mat-icon>\n  </button>\n</form>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: UsersQuery }, { type: UsersService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }] } });
+
+// create a factory provider for the paginator
+const USERS_PAGINATOR = new InjectionToken('USERS_PAGINATOR', {
+    providedIn: 'root',
+    factory: () => {
+        const query = inject(UsersQuery);
+        return new PaginatorPlugin(query).withControls().withRange();
+    },
+});
+
+// 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 = 'Confirm';
+        this.prompt = 'Confirm operation?';
+        this.ok = 'yes';
+        this.cancel = 'no';
+    }
+    ngOnInit() { }
+}
+ConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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: [""], components: [{ type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", 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", styles: [""] }]
+        }], ctorParameters: function () {
+        return [{ 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
+/**
+ * This service acts as a wrapper for MatDialog to simplify the process of calling
+ * the dialog and subscribing to it. What it will do is create an Instance of
+ * MatDialog with our custom component (ConfirmDialogComponent). Then it will set
+ * any public properties it needs to by setting the properties on the
+ * componentInstance object. It will return the observable afterClosed()
+ * to the caller so they can subscribe to it. This will emit an event whenever
+ * the dialog is closed.
+ */
+class DialogService {
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    confirm(title, prompt, ok = 'yes', cancel = 'no') {
+        let dialogRef;
+        dialogRef = this.dialog.open(ConfirmDialogComponent);
+        dialogRef.componentInstance.title = title;
+        dialogRef.componentInstance.prompt = prompt;
+        dialogRef.componentInstance.ok = ok;
+        dialogRef.componentInstance.cancel = cancel;
+        return dialogRef.afterClosed();
+    }
+}
+DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: DialogService, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: DialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialog }]; } });
+
+class UserEditorComponent {
+    constructor(formBuilder, _authService) {
+        this._authService = _authService;
+        // events
+        this.userChange = new EventEmitter();
+        this.editorClose = new EventEmitter();
+        // form
+        this.email = formBuilder.control(null, [
+            Validators.required,
+            Validators.email,
+        ]);
+        this.emailConfirmed = formBuilder.control(false);
+        this.lockoutEnabled = formBuilder.control(false);
+        this.firstName = formBuilder.control(null, [
+            Validators.required,
+            Validators.maxLength(50),
+        ]);
+        this.lastName = formBuilder.control(null, [
+            Validators.required,
+            Validators.maxLength(50),
+        ]);
+        this.roles = formBuilder.control(null, Validators.maxLength(200));
+        this.form = formBuilder.group({
+            email: this.email,
+            emailConfirmed: this.emailConfirmed,
+            lockoutEnabled: this.lockoutEnabled,
+            firstName: this.firstName,
+            lastName: this.lastName,
+            roles: this.roles,
+        });
+    }
+    set user(value) {
+        this._user = value;
+        this.updateForm(value);
+    }
+    get user() {
+        return this._user;
+    }
+    ngOnInit() { }
+    updateForm(user) {
+        var _a;
+        if (!user) {
+            this.form.reset();
+        }
+        else {
+            this.email.setValue(user.email);
+            this.emailConfirmed.setValue(user.emailConfirmed);
+            this.lockoutEnabled.setValue(user.lockoutEnabled);
+            this.firstName.setValue(user.firstName);
+            this.lastName.setValue(user.lastName);
+            if (((_a = user.roles) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                this.roles.setValue(user.roles.join(' '));
+            }
+            else {
+                this.roles.setValue(null);
+            }
+        }
+    }
+    getUserFromForm() {
+        var _a;
+        return {
+            userName: ((_a = this._user) === null || _a === void 0 ? void 0 : _a.userName) || '',
+            email: this.email.value,
+            emailConfirmed: this.emailConfirmed.value,
+            lockoutEnabled: this.lockoutEnabled.value,
+            firstName: this.firstName.value,
+            lastName: this.lastName.value,
+            roles: this.roles.value
+                ? this.roles.value.split(' ').filter((s) => s)
+                : [],
+        };
+    }
+    endLockout() {
+        if (this.unlocked) {
+            return;
+        }
+        this._user.lockoutEnd = this._authService.getUTCDate();
+        this.unlocked = true;
+    }
+    close() {
+        this.editorClose.emit();
+    }
+    save() {
+        if (this.form.invalid) {
+            return;
+        }
+        this.userChange.emit(this.getUserFromForm());
+    }
+}
+UserEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UserEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$2.AuthJwtService }], target: i0.ɵɵFactoryTarget.Component });
+UserEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: { user: "user" }, outputs: { userChange: "userChange", editorClose: "editorClose" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\n  <!-- email -->\n  <div>\n    <mat-form-field>\n      <input type=\"text\" matInput [formControl]=\"email\" placeholder=\"email\" />\n      <mat-error\n        *ngIf=\"email.hasError('required') && (email.dirty || email.touched)\"\n      >\n        email address required\n      </mat-error>\n      <mat-error\n        *ngIf=\"email.hasError('pattern') && (email.dirty || email.touched)\"\n      >\n        invalid email address\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- emailConfirmed -->\n  <div>\n    <mat-checkbox [formControl]=\"emailConfirmed\"\n      >email address confirmed</mat-checkbox\n    >\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div>\n    <mat-checkbox [formControl]=\"lockoutEnabled\"\n      >lockout enabled</mat-checkbox\n    >\n    &nbsp;\n    <button\n      mat-stroked-button\n      (click)=\"endLockout()\"\n      [disabled]=\"unlocked\"\n      matTooltip=\"Unlock this user if locked\"\n    >\n      unlock\n    </button>\n  </div>\n\n  <!-- firstName -->\n  <div>\n    <mat-form-field>\n      <input\n        type=\"text\"\n        matInput\n        [formControl]=\"firstName\"\n        placeholder=\"first name\"\n      />\n      <mat-error\n        *ngIf=\"\n          firstName.hasError('required') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name required\n      </mat-error>\n      <mat-error\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  </div>\n\n  <!-- lastName -->\n  <div>\n    <mat-form-field>\n      <input\n        type=\"text\"\n        matInput\n        [formControl]=\"lastName\"\n        placeholder=\"last name\"\n      />\n      <mat-error\n        *ngIf=\"\n          lastName.hasError('required') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name required\n      </mat-error>\n      <mat-error\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>\n      <input\n        type=\"text\"\n        matInput\n        [formControl]=\"roles\"\n        placeholder=\"roles (separated by space)\"\n      />\n      <mat-error\n        *ngIf=\"roles.hasError('maxlength') && (roles.dirty || roles.touched)\"\n      >\n        too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- buttons -->\n  <br />\n  <div>\n    <button mat-icon-button color=\"warn\" matTooltip=\"Close\" (click)=\"close()\">\n      <mat-icon>cancel</mat-icon>\n    </button>\n    &nbsp;\n    <button\n      type=\"submit\"\n      mat-button\n      color=\"primary\"\n      [disabled]=\"form.invalid\"\n      matTooltip=\"Save user data\"\n    >\n      <mat-icon>check_circle</mat-icon> save\n    </button>\n  </div>\n</form>\n", styles: [""], components: [{ type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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"] }, { 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]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UserEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'auth-jwt-user-editor', template: "<form [formGroup]=\"form\" (submit)=\"save()\">\n  <!-- email -->\n  <div>\n    <mat-form-field>\n      <input type=\"text\" matInput [formControl]=\"email\" placeholder=\"email\" />\n      <mat-error\n        *ngIf=\"email.hasError('required') && (email.dirty || email.touched)\"\n      >\n        email address required\n      </mat-error>\n      <mat-error\n        *ngIf=\"email.hasError('pattern') && (email.dirty || email.touched)\"\n      >\n        invalid email address\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- emailConfirmed -->\n  <div>\n    <mat-checkbox [formControl]=\"emailConfirmed\"\n      >email address confirmed</mat-checkbox\n    >\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div>\n    <mat-checkbox [formControl]=\"lockoutEnabled\"\n      >lockout enabled</mat-checkbox\n    >\n    &nbsp;\n    <button\n      mat-stroked-button\n      (click)=\"endLockout()\"\n      [disabled]=\"unlocked\"\n      matTooltip=\"Unlock this user if locked\"\n    >\n      unlock\n    </button>\n  </div>\n\n  <!-- firstName -->\n  <div>\n    <mat-form-field>\n      <input\n        type=\"text\"\n        matInput\n        [formControl]=\"firstName\"\n        placeholder=\"first name\"\n      />\n      <mat-error\n        *ngIf=\"\n          firstName.hasError('required') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name required\n      </mat-error>\n      <mat-error\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  </div>\n\n  <!-- lastName -->\n  <div>\n    <mat-form-field>\n      <input\n        type=\"text\"\n        matInput\n        [formControl]=\"lastName\"\n        placeholder=\"last name\"\n      />\n      <mat-error\n        *ngIf=\"\n          lastName.hasError('required') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name required\n      </mat-error>\n      <mat-error\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>\n      <input\n        type=\"text\"\n        matInput\n        [formControl]=\"roles\"\n        placeholder=\"roles (separated by space)\"\n      />\n      <mat-error\n        *ngIf=\"roles.hasError('maxlength') && (roles.dirty || roles.touched)\"\n      >\n        too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- buttons -->\n  <br />\n  <div>\n    <button mat-icon-button color=\"warn\" matTooltip=\"Close\" (click)=\"close()\">\n      <mat-icon>cancel</mat-icon>\n    </button>\n    &nbsp;\n    <button\n      type=\"submit\"\n      mat-button\n      color=\"primary\"\n      [disabled]=\"form.invalid\"\n      matTooltip=\"Save user data\"\n    >\n      <mat-icon>check_circle</mat-icon> save\n    </button>\n  </div>\n</form>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i2$2.AuthJwtService }]; }, propDecorators: { user: [{
+                type: Input
+            }], userChange: [{
+                type: Output
+            }], editorClose: [{
+                type: Output
+            }] } });
+
+class UserListComponent {
+    constructor(paginator, userQuery, _accountService, _usersService, _dialogService, _gravatarService, formBuilder) {
+        this.paginator = paginator;
+        this._accountService = _accountService;
+        this._usersService = _usersService;
+        this._dialogService = _dialogService;
+        this._gravatarService = _gravatarService;
+        this.pageSize = formBuilder.control(20);
+        this._refresh$ = new BehaviorSubject(0);
+        this._filter$ = userQuery.selectFilter();
+        // https://netbasal.com/manage-your-entities-with-akita-like-a-boss-768732f8d4d1
+        this.active$ = userQuery.selectActive();
+        this.pagination$ = combineLatest([
+            this.paginator.pageChanges,
+            this.pageSize.valueChanges.pipe(
+            // we are required to emit at least the initial value
+            // as combineLatest emits only if ALL observables have emitted
+            startWith(20), 
+            // clear the cache when page size changes
+            tap((_) => {
+                this.paginator.clearCache();
+            })),
+            this._filter$.pipe(
+            // clear the cache when filters changed
+            tap((_) => {
+                this.paginator.clearCache();
+            })),
+            this._refresh$.pipe(
+            // clear the cache when forcing refresh
+            tap((_) => {
+                this.paginator.clearCache();
+            })),
+        ]).pipe(
+        // for each emitted value, combine into a filter and use it
+        // to request the page from server
+        switchMap(([pageNumber, pageSize, filter, refresh]) => {
+            // const filter = { ...this._docsQuery.getValue().filter };
+            const f = Object.assign({}, filter);
+            f.pageNumber = pageNumber;
+            f.pageSize = pageSize;
+            const request = this.getRequest(f);
+            // update saved filters
+            this.paginator.metadata.set('filter', f);
+            return this.paginator.getPage(request);
+        }));
+    }
+    ngOnDestroy() {
+        this.paginator.destroy();
+    }
+    getRequest(filter) {
+        return () => this._accountService.getUsers(filter).pipe(
+        // adapt server results to the paginator plugin
+        map((p) => {
+            return {
+                currentPage: p.pageNumber,
+                perPage: p.pageSize,
+                lastPage: p.pageCount,
+                data: p.items,
+                total: p.total,
+            };
+        }));
+    }
+    pageChange(event) {
+        // https://material.angular.io/components/paginator/api
+        this.paginator.setPage(event.pageIndex + 1);
+        if (event.pageSize !== this.pageSize.value) {
+            this.pageSize.setValue(event.pageSize);
+        }
+    }
+    refresh() {
+        this.paginator.clearCache();
+        this._refresh$.next(this._refresh$.value + 1);
+    }
+    deleteUser(user) {
+        this._dialogService
+            .confirm('Confirm', `Delete User ${user.userName}?`)
+            .pipe(take(1))
+            .subscribe((yes) => {
+            if (!yes) {
+                return;
+            }
+            this._usersService.deleteUser(user.userName).finally(() => {
+                this.refresh();
+            });
+        });
+    }
+    setActiveUser(user) {
+        this._usersService.setActive((user === null || user === void 0 ? void 0 : user.userName) || null);
+    }
+    resetActiveUser() {
+        this._usersService.setActive(null);
+    }
+    saveActiveUser(user) {
+        this._usersService.updateActive(user).finally(() => {
+            this.refresh();
+        });
+    }
+    onUserEditorClose() {
+        this.setActiveUser(null);
+    }
+    getGravatarUrl(email, size = 80) {
+        return this._gravatarService.buildGravatarUrl(email, size);
+    }
+}
+UserListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UserListComponent, deps: [{ token: USERS_PAGINATOR }, { token: UsersQuery }, { token: AuthJwtAccountService }, { token: UsersService }, { token: DialogService }, { token: i2$2.GravatarService }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+UserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: UserListComponent, selector: "auth-jwt-user-list", ngImport: i0, template: "<div\n  gdAreas=\"filters | progress | list | pager | editor\"\n  gdRows=\"80px 64px 2fr 40px 1fr\"\n  gdColumns=\"1fr\"\n  gdGap=\"8px\"\n>\n  <div>\n    <!-- filters -->\n    <div gdArea=\"filters\">\n      <auth-jwt-user-filter></auth-jwt-user-filter>\n    </div>\n\n    <!-- progress -->\n    <div *ngIf=\"paginator.isLoading$ | async\" gdArea=\"progress\">\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    </div>\n\n    <!-- list -->\n    <div gdArea=\"list\" *ngIf=\"pagination$ | async as pagination\">\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <td></td>\n          <th>name</th>\n          <th>first</th>\n          <th>last</th>\n          <th>email</th>\n          <th>roles</th>\n          <th>lock end</th>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let user of pagination.data\">\n            <td class=\"command\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                matTooltip=\"Edit {{ user.userName }}\"\n                color=\"primary\"\n                (click)=\"setActiveUser(user)\"\n              >\n                <mat-icon>mode_edit</mat-icon>\n              </button>\n            </td>\n            <td class=\"command\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                matTooltip=\"Delete {{ user.userName }}\"\n                color=\"warn\"\n                (click)=\"deleteUser(user)\"\n              >\n                <mat-icon>remove_circle</mat-icon>\n              </button>\n            </td>\n            <td>\n              <img\n                [src]=\"getGravatarUrl(user.email, 32)\"\n                [alt]=\"user.userName\"\n              />\n            </td>\n            <td>{{ user.userName }}</td>\n            <td>{{ user.firstName }}</td>\n            <td>{{ user.lastName }}</td>\n            <td>\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\n            </td>\n            <td>{{ user.roles?.join(\" \") }}</td>\n            <td>{{ user.lockoutEnd }}</td>\n          </tr>\n        </tbody>\n      </table>\n      <!-- pagination -->\n      <mat-paginator\n        gdArea=\"pager\"\n        gdAlignColumns=\"center\"\n        gdAlignRows=\"start\"\n        [length]=\"pagination.total\"\n        [pageSize]=\"pageSize?.value\"\n        [pageSizeOptions]=\"[20, 50, 75, 100]\"\n        [pageIndex]=\"pagination.currentPage - 1\"\n        [showFirstLastButtons]=\"true\"\n        (page)=\"pageChange($event)\"\n      ></mat-paginator>\n    </div>\n  </div>\n\n  <!-- editor -->\n  <div gdArea=\"editor\" *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</div>\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:normal}td{padding:0 8px}td.command{width:24px}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}\n"], components: [{ type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: ["disabled"] }, { type: i8$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i11.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: ["user"], outputs: ["userChange", "editorClose"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "async": i13.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UserListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'auth-jwt-user-list', template: "<div\n  gdAreas=\"filters | progress | list | pager | editor\"\n  gdRows=\"80px 64px 2fr 40px 1fr\"\n  gdColumns=\"1fr\"\n  gdGap=\"8px\"\n>\n  <div>\n    <!-- filters -->\n    <div gdArea=\"filters\">\n      <auth-jwt-user-filter></auth-jwt-user-filter>\n    </div>\n\n    <!-- progress -->\n    <div *ngIf=\"paginator.isLoading$ | async\" gdArea=\"progress\">\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    </div>\n\n    <!-- list -->\n    <div gdArea=\"list\" *ngIf=\"pagination$ | async as pagination\">\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <td></td>\n          <th>name</th>\n          <th>first</th>\n          <th>last</th>\n          <th>email</th>\n          <th>roles</th>\n          <th>lock end</th>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let user of pagination.data\">\n            <td class=\"command\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                matTooltip=\"Edit {{ user.userName }}\"\n                color=\"primary\"\n                (click)=\"setActiveUser(user)\"\n              >\n                <mat-icon>mode_edit</mat-icon>\n              </button>\n            </td>\n            <td class=\"command\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                matTooltip=\"Delete {{ user.userName }}\"\n                color=\"warn\"\n                (click)=\"deleteUser(user)\"\n              >\n                <mat-icon>remove_circle</mat-icon>\n              </button>\n            </td>\n            <td>\n              <img\n                [src]=\"getGravatarUrl(user.email, 32)\"\n                [alt]=\"user.userName\"\n              />\n            </td>\n            <td>{{ user.userName }}</td>\n            <td>{{ user.firstName }}</td>\n            <td>{{ user.lastName }}</td>\n            <td>\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\n            </td>\n            <td>{{ user.roles?.join(\" \") }}</td>\n            <td>{{ user.lockoutEnd }}</td>\n          </tr>\n        </tbody>\n      </table>\n      <!-- pagination -->\n      <mat-paginator\n        gdArea=\"pager\"\n        gdAlignColumns=\"center\"\n        gdAlignRows=\"start\"\n        [length]=\"pagination.total\"\n        [pageSize]=\"pageSize?.value\"\n        [pageSizeOptions]=\"[20, 50, 75, 100]\"\n        [pageIndex]=\"pagination.currentPage - 1\"\n        [showFirstLastButtons]=\"true\"\n        (page)=\"pageChange($event)\"\n      ></mat-paginator>\n    </div>\n  </div>\n\n  <!-- editor -->\n  <div gdArea=\"editor\" *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</div>\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:normal}td{padding:0 8px}td.command{width:24px}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i15.PaginatorPlugin, decorators: [{
+                        type: Inject,
+                        args: [USERS_PAGINATOR]
+                    }] }, { type: UsersQuery }, { type: AuthJwtAccountService }, { type: UsersService }, { type: DialogService }, { type: i2$2.GravatarService }, { type: i1$1.FormBuilder }];
+    } });
+
+class AuthJwtAdminModule {
+}
+AuthJwtAdminModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AuthJwtAdminModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AuthJwtAdminModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AuthJwtAdminModule, declarations: [AuthJwtRegistrationComponent,
+        PasswordStrengthBarComponent,
+        UserFilterComponent,
+        UserListComponent,
+        ConfirmDialogComponent,
+        UserEditorComponent], imports: [CommonModule,
+        HttpClientModule,
+        FormsModule,
+        RouterModule,
+        ReactiveFormsModule,
+        // material
+        MatButtonModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatIconModule,
+        MatInputModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatSnackBarModule,
+        MatTooltipModule,
+        AuthJwtLoginModule,
+        NgToolsModule], exports: [AuthJwtRegistrationComponent,
+        PasswordStrengthBarComponent,
+        UserFilterComponent,
+        UserListComponent] });
+AuthJwtAdminModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AuthJwtAdminModule, imports: [[
+            CommonModule,
+            HttpClientModule,
+            FormsModule,
+            RouterModule,
+            ReactiveFormsModule,
+            // material
+            MatButtonModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatDialogModule,
+            MatIconModule,
+            MatInputModule,
+            MatPaginatorModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatSnackBarModule,
+            MatTooltipModule,
+            AuthJwtLoginModule,
+            NgToolsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AuthJwtAdminModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AuthJwtRegistrationComponent,
+                        PasswordStrengthBarComponent,
+                        UserFilterComponent,
+                        UserListComponent,
+                        ConfirmDialogComponent,
+                        UserEditorComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        FormsModule,
+                        RouterModule,
+                        ReactiveFormsModule,
+                        // material
+                        MatButtonModule,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatDialogModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatPaginatorModule,
+                        MatProgressBarModule,
+                        MatProgressSpinnerModule,
+                        MatSnackBarModule,
+                        MatTooltipModule,
+                        AuthJwtLoginModule,
+                        NgToolsModule
+                    ],
+                    exports: [
+                        AuthJwtRegistrationComponent,
+                        PasswordStrengthBarComponent,
+                        UserFilterComponent,
+                        UserListComponent
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of auth-jwt-admin
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AuthJwtAccountService, AuthJwtAdminModule, AuthJwtRegistrationComponent, PasswordStrengthBarComponent, PasswordValidators, UserFilterComponent, UserListComponent };
+//# sourceMappingURL=myrmidon-auth-jwt-admin.mjs.map