@myrmidon/auth-jwt-admin 1.0.4 → 1.0.5

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

@@ -51,32 +51,44 @@ class PasswordValidators {
             }
             if (control.value.length < 8) {
                 return {
-                    passwordTooShort: true,
+                    passwordtooshort: true,
                 };
             }
             if (!/.*[A-Z].*/.test(control.value)) {
                 return {
-                    noUpperInPassword: true,
+                    noupperinpassword: true,
                 };
             }
             if (!/.*[a-z].*/.test(control.value)) {
                 return {
-                    noLowerInPassword: true,
+                    nolowerinpassword: true,
                 };
             }
             if (!/.*[A-Z].*/.test(control.value)) {
                 return {
-                    noUpperInPassword: true,
+                    noupperinpassword: true,
                 };
             }
             if (!/.*[-`~!@#$%^&*()_+=\[\]{};:'",.<>/?|\\].*/.test(control.value)) {
                 return {
-                    noSymbolInPassword: true,
+                    nosymbolinpassword: true,
                 };
             }
             return null;
         };
     }
+    static areEqual(controlName, otherControlName) {
+        return (control) => {
+            const g = control;
+            const a = g.controls[controlName];
+            const b = g.controls[otherControlName];
+            return a.value !== b.value
+                ? {
+                    areequal: true,
+                }
+                : null;
+        };
+    }
 }
 
 class AuthJwtAccountService {
@@ -338,39 +350,46 @@ class AuthJwtRegistrationComponent {
         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),
-        ]);
+        this.email = formBuilder.control('', {
+            validators: [Validators.required, Validators.email],
+            asyncValidators: this.getUniqueEmailValidator(this._accountService).bind(this),
+            nonNullable: true,
+        });
+        this.name = formBuilder.control('', {
+            validators: Validators.required,
+            asyncValidators: this.getUniqueNameValidator(this._accountService).bind(this),
+            nonNullable: true,
+        });
+        this.firstName = formBuilder.control('', {
+            validators: [Validators.required, Validators.maxLength(50)],
+            nonNullable: true,
+        });
+        this.lastName = formBuilder.control('', {
+            validators: [Validators.required, Validators.maxLength(50)],
+            nonNullable: true,
+        });
         // 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({
+        this.password = formBuilder.control('', {
+            validators: [Validators.required, PasswordValidators.standard()],
+            nonNullable: true,
+        });
+        this.confirmPassword = formBuilder.control('', {
+            validators: Validators.required,
+            nonNullable: true,
+        });
+        this.form = formBuilder.group({
             email: this.email,
             name: this.name,
             firstName: this.firstName,
             lastName: this.lastName,
-            passwords: this.passwords,
+            password: this.password,
+            confirmPassword: this.confirmPassword,
+        }, {
+            validators: [
+                PasswordValidators.areEqual('password', 'confirmPassword'),
+            ],
         });
     }
-    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
@@ -387,15 +406,20 @@ class AuthJwtRegistrationComponent {
                     resolve(null);
                 }
                 else {
-                    service.isNameRegistered(control.value).subscribe((data) => {
-                        if (!data.isExisting) {
-                            resolve(null);
-                        }
-                        else {
+                    service.isNameRegistered(control.value).subscribe({
+                        next: (data) => {
+                            if (!data.isExisting) {
+                                resolve(null);
+                            }
+                            else {
+                                resolve({ uniqueName: true });
+                            }
+                        },
+                        error: (error) => {
+                            console.error('Unique name validator error' +
+                                (error ? JSON.stringify(error) : ''));
                             resolve({ uniqueName: true });
-                        }
-                    }, (err) => {
-                        resolve({ uniqueName: true });
+                        },
                     });
                 }
             });
@@ -409,78 +433,27 @@ class AuthJwtRegistrationComponent {
                     resolve(null);
                 }
                 else {
-                    service.isEmailRegistered(control.value).subscribe((data) => {
-                        if (!data.isExisting) {
-                            resolve(null);
-                        }
-                        else {
+                    service.isEmailRegistered(control.value).subscribe({
+                        next: (data) => {
+                            if (!data.isExisting) {
+                                resolve(null);
+                            }
+                            else {
+                                resolve({ uniqueEmail: true });
+                            }
+                        },
+                        error: (error) => {
+                            console.error('Unique email validator error' +
+                                (error ? JSON.stringify(error) : ''));
                             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 ||
+        if (!this.form.valid ||
             this.busy ||
             this.name.pending ||
             this.email.pending) {
@@ -497,26 +470,26 @@ class AuthJwtRegistrationComponent {
         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');
+            .subscribe({
+            next: () => {
+                this.busy = false;
+                this._snackbar.open('Registration succeeded', 'OK');
+                this.registered.emit();
+            },
+            error: (error) => {
+                this.busy = false;
+                console.error('Registration  error' + (error ? JSON.stringify(error) : ''));
+                this._snackbar.open('Registration error', 'OK');
+            },
         });
     }
 }
-AuthJwtRegistrationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i2$1.MatSnackBar }, { token: AuthJwtAccountService }], target: i0.ɵɵFactoryTarget.Component });
-AuthJwtRegistrationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", 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          <mat-label>email</mat-label>\n          <input\n            matInput\n            type=\"email\"\n            id=\"email\"\n            maxlength=\"256\"\n            required\n            autofocus\n            spellcheck=\"false\"\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          <mat-label>username</mat-label>\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            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          <mat-label>first name</mat-label>\n          <input\n            matInput\n            type=\"text\"\n            id=\"firstName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\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          <mat-label>last name</mat-label>\n          <input\n            matInput\n            type=\"text\"\n            id=\"lastName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\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            <mat-label>password</mat-label>\n            <input\n              matInput\n              type=\"password\"\n              name=\"password\"\n              autocomplete=\"new-password\"\n              maxlength=\"50\"\n              required\n              spellcheck=\"false\"\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            <mat-label>confirm password</mat-label>\n            <input\n              matInput\n              type=\"password\"\n              name=\"confirmPassword\"\n              maxlength=\"50\"\n              required\n              spellcheck=\"false\"\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"], 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.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"] }] });
+AuthJwtRegistrationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$1.MatSnackBar }, { token: AuthJwtAccountService }], target: i0.ɵɵFactoryTarget.Component });
+AuthJwtRegistrationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", 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>registration</legend>\r\n      <!-- email -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label>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            *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            *ngIf=\"$any(email).errors?.email && (email.dirty || email.touched)\"\r\n            >invalid email</mat-error\r\n          >\r\n          <mat-error\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>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            *ngIf=\"$any(name).errors?.required && (name.dirty || name.touched)\"\r\n            >username required</mat-error\r\n          >\r\n          <mat-error\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            *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>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            *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>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            *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>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            *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            *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            *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            *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            *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>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        *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        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\r\n        diameter=\"20\"\r\n        *ngIf=\"busy\"\r\n        aria-label=\"Busy\"\r\n      ></mat-progress-spinner>\r\n    </fieldset>\r\n  </form>\r\n\r\n  <details>\r\n    <summary>Hints</summary>\r\n    <p>\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>\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>\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: i5.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", 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          <mat-label>email</mat-label>\n          <input\n            matInput\n            type=\"email\"\n            id=\"email\"\n            maxlength=\"256\"\n            required\n            autofocus\n            spellcheck=\"false\"\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          <mat-label>username</mat-label>\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            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          <mat-label>first name</mat-label>\n          <input\n            matInput\n            type=\"text\"\n            id=\"firstName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\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          <mat-label>last name</mat-label>\n          <input\n            matInput\n            type=\"text\"\n            id=\"lastName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\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            <mat-label>password</mat-label>\n            <input\n              matInput\n              type=\"password\"\n              name=\"password\"\n              autocomplete=\"new-password\"\n              maxlength=\"50\"\n              required\n              spellcheck=\"false\"\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            <mat-label>confirm password</mat-label>\n            <input\n              matInput\n              type=\"password\"\n              name=\"confirmPassword\"\n              maxlength=\"50\"\n              required\n              spellcheck=\"false\"\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.UntypedFormBuilder }, { 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>registration</legend>\r\n      <!-- email -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label>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            *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            *ngIf=\"$any(email).errors?.email && (email.dirty || email.touched)\"\r\n            >invalid email</mat-error\r\n          >\r\n          <mat-error\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>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            *ngIf=\"$any(name).errors?.required && (name.dirty || name.touched)\"\r\n            >username required</mat-error\r\n          >\r\n          <mat-error\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            *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>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            *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>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            *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>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            *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            *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            *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            *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            *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>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        *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        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\r\n        diameter=\"20\"\r\n        *ngIf=\"busy\"\r\n        aria-label=\"Busy\"\r\n      ></mat-progress-spinner>\r\n    </fieldset>\r\n  </form>\r\n\r\n  <details>\r\n    <summary>Hints</summary>\r\n    <p>\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>\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>\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: [{
                 type: Output
             }] } });
 
@@ -694,10 +667,10 @@ class UserFilterComponent {
     }
 }
 UserFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: UserFilterComponent, deps: [{ token: i1$1.FormBuilder }, { token: UserListRepository }], target: i0.ɵɵFactoryTarget.Component });
-UserFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: { disabled: "disabled" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"apply()\" ng-disabled=\"disabled\">\n  <div class=\"form-row\">\n    <mat-form-field>\n      <mat-label>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        matTooltip=\"Reset filters\"\n        [disabled]=\"disabled\"\n      >\n        <mat-icon>clear</mat-icon>\n      </button>\n    </mat-form-field>\n\n    <button\n      style=\"margin-top: -20px\"\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  </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: 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: i5.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: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+UserFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: { disabled: "disabled" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"apply()\" ng-disabled=\"disabled\">\r\n  <div class=\"form-row\">\r\n    <mat-form-field>\r\n      <mat-label>name or ID</mat-label>\r\n      <input matInput [formControl]=\"name\" />\r\n      <button\r\n        mat-icon-button\r\n        matSuffix\r\n        type=\"button\"\r\n        (click)=\"reset()\"\r\n        color=\"warn\"\r\n        matTooltip=\"Reset filters\"\r\n        [disabled]=\"disabled\"\r\n      >\r\n        <mat-icon>clear</mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n\r\n    <button\r\n      style=\"margin-top: -20px\"\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      [disabled]=\"disabled\"\r\n      matTooltip=\"Apply filters\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\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: 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: i5.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: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", 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>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        matTooltip=\"Reset filters\"\n        [disabled]=\"disabled\"\n      >\n        <mat-icon>clear</mat-icon>\n      </button>\n    </mat-form-field>\n\n    <button\n      style=\"margin-top: -20px\"\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  </div>\n</form>\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
+            args: [{ selector: 'auth-jwt-user-filter', template: "<form [formGroup]=\"form\" (submit)=\"apply()\" ng-disabled=\"disabled\">\r\n  <div class=\"form-row\">\r\n    <mat-form-field>\r\n      <mat-label>name or ID</mat-label>\r\n      <input matInput [formControl]=\"name\" />\r\n      <button\r\n        mat-icon-button\r\n        matSuffix\r\n        type=\"button\"\r\n        (click)=\"reset()\"\r\n        color=\"warn\"\r\n        matTooltip=\"Reset filters\"\r\n        [disabled]=\"disabled\"\r\n      >\r\n        <mat-icon>clear</mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n\r\n    <button\r\n      style=\"margin-top: -20px\"\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      [disabled]=\"disabled\"\r\n      matTooltip=\"Apply filters\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\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.FormBuilder }, { type: UserListRepository }]; }, propDecorators: { disabled: [{
                 type: Input
             }] } });
@@ -847,10 +820,10 @@ class UserEditorComponent {
     }
 }
 UserEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: UserEditorComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i2$2.AuthJwtService }], target: i0.ɵɵFactoryTarget.Component });
-UserEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", 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>email</mat-label>\n      <input type=\"text\" matInput [formControl]=\"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\n    <!-- emailConfirmed -->\n    <mat-checkbox [formControl]=\"emailConfirmed\"\n      >email address confirmed</mat-checkbox\n    >\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div class=\"form-row\">\n    <mat-checkbox [formControl]=\"lockoutEnabled\">lockout enabled</mat-checkbox>\n    <button\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"endLockout()\"\n      [disabled]=\"unlocked\"\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>first name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\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\n    <!-- lastName -->\n    <mat-form-field>\n      <mat-label>last name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\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 style=\"width: 16em\">\n      <mat-label>roles</mat-label>\n      <input type=\"text\" matInput [formControl]=\"roles\" />\n      <mat-error\n        *ngIf=\"roles.hasError('maxlength') && (roles.dirty || roles.touched)\"\n      >\n        too long\n      </mat-error>\n      <mat-hint>roles (separated by space)</mat-hint>\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    <button\n      type=\"submit\"\n      mat-icon-button\n      color=\"primary\"\n      [disabled]=\"form.invalid\"\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: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.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: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+UserEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: { user: "user" }, outputs: { userChange: "userChange", editorClose: "editorClose" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- email -->\r\n    <mat-form-field>\r\n      <mat-label>email</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"email\" />\r\n      <mat-error\r\n        *ngIf=\"email.hasError('required') && (email.dirty || email.touched)\"\r\n      >\r\n        email address required\r\n      </mat-error>\r\n      <mat-error\r\n        *ngIf=\"email.hasError('pattern') && (email.dirty || email.touched)\"\r\n      >\r\n        invalid email address\r\n      </mat-error>\r\n    </mat-form-field>\r\n\r\n    <!-- emailConfirmed -->\r\n    <mat-checkbox [formControl]=\"emailConfirmed\"\r\n      >email address confirmed</mat-checkbox\r\n    >\r\n  </div>\r\n\r\n  <!-- lockoutEnabled -->\r\n  <div class=\"form-row\">\r\n    <mat-checkbox [formControl]=\"lockoutEnabled\">lockout enabled</mat-checkbox>\r\n    <button\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      (click)=\"endLockout()\"\r\n      [disabled]=\"unlocked\"\r\n      matTooltip=\"Unlock this user if locked\"\r\n    >\r\n      <mat-icon>lock_open</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"form-row\">\r\n    <!-- firstName -->\r\n    <mat-form-field>\r\n      <mat-label>first name</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\r\n      <mat-error\r\n        *ngIf=\"\r\n          firstName.hasError('required') &&\r\n          (firstName.dirty || firstName.touched)\r\n        \"\r\n      >\r\n        first name required\r\n      </mat-error>\r\n      <mat-error\r\n        *ngIf=\"\r\n          firstName.hasError('maxlength') &&\r\n          (firstName.dirty || firstName.touched)\r\n        \"\r\n      >\r\n        first name too long\r\n      </mat-error>\r\n    </mat-form-field>\r\n\r\n    <!-- lastName -->\r\n    <mat-form-field>\r\n      <mat-label>last name</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\r\n      <mat-error\r\n        *ngIf=\"\r\n          lastName.hasError('required') && (lastName.dirty || lastName.touched)\r\n        \"\r\n      >\r\n        last name required\r\n      </mat-error>\r\n      <mat-error\r\n        *ngIf=\"\r\n          lastName.hasError('maxlength') && (lastName.dirty || lastName.touched)\r\n        \"\r\n      >\r\n        last name too long\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- roles -->\r\n  <div>\r\n    <mat-form-field style=\"width: 16em\">\r\n      <mat-label>roles</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"roles\" />\r\n      <mat-error\r\n        *ngIf=\"roles.hasError('maxlength') && (roles.dirty || roles.touched)\"\r\n      >\r\n        too long\r\n      </mat-error>\r\n      <mat-hint>roles (separated by space)</mat-hint>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <br />\r\n  <div>\r\n    <button mat-icon-button color=\"warn\" matTooltip=\"Close\" (click)=\"close()\">\r\n      <mat-icon>cancel</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      [disabled]=\"form.invalid\"\r\n      matTooltip=\"Save user\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\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: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.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: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", 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>email</mat-label>\n      <input type=\"text\" matInput [formControl]=\"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\n    <!-- emailConfirmed -->\n    <mat-checkbox [formControl]=\"emailConfirmed\"\n      >email address confirmed</mat-checkbox\n    >\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div class=\"form-row\">\n    <mat-checkbox [formControl]=\"lockoutEnabled\">lockout enabled</mat-checkbox>\n    <button\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"endLockout()\"\n      [disabled]=\"unlocked\"\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>first name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\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\n    <!-- lastName -->\n    <mat-form-field>\n      <mat-label>last name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\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 style=\"width: 16em\">\n      <mat-label>roles</mat-label>\n      <input type=\"text\" matInput [formControl]=\"roles\" />\n      <mat-error\n        *ngIf=\"roles.hasError('maxlength') && (roles.dirty || roles.touched)\"\n      >\n        too long\n      </mat-error>\n      <mat-hint>roles (separated by space)</mat-hint>\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    <button\n      type=\"submit\"\n      mat-icon-button\n      color=\"primary\"\n      [disabled]=\"form.invalid\"\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"] }]
+            args: [{ selector: 'auth-jwt-user-editor', template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- email -->\r\n    <mat-form-field>\r\n      <mat-label>email</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"email\" />\r\n      <mat-error\r\n        *ngIf=\"email.hasError('required') && (email.dirty || email.touched)\"\r\n      >\r\n        email address required\r\n      </mat-error>\r\n      <mat-error\r\n        *ngIf=\"email.hasError('pattern') && (email.dirty || email.touched)\"\r\n      >\r\n        invalid email address\r\n      </mat-error>\r\n    </mat-form-field>\r\n\r\n    <!-- emailConfirmed -->\r\n    <mat-checkbox [formControl]=\"emailConfirmed\"\r\n      >email address confirmed</mat-checkbox\r\n    >\r\n  </div>\r\n\r\n  <!-- lockoutEnabled -->\r\n  <div class=\"form-row\">\r\n    <mat-checkbox [formControl]=\"lockoutEnabled\">lockout enabled</mat-checkbox>\r\n    <button\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      (click)=\"endLockout()\"\r\n      [disabled]=\"unlocked\"\r\n      matTooltip=\"Unlock this user if locked\"\r\n    >\r\n      <mat-icon>lock_open</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"form-row\">\r\n    <!-- firstName -->\r\n    <mat-form-field>\r\n      <mat-label>first name</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\r\n      <mat-error\r\n        *ngIf=\"\r\n          firstName.hasError('required') &&\r\n          (firstName.dirty || firstName.touched)\r\n        \"\r\n      >\r\n        first name required\r\n      </mat-error>\r\n      <mat-error\r\n        *ngIf=\"\r\n          firstName.hasError('maxlength') &&\r\n          (firstName.dirty || firstName.touched)\r\n        \"\r\n      >\r\n        first name too long\r\n      </mat-error>\r\n    </mat-form-field>\r\n\r\n    <!-- lastName -->\r\n    <mat-form-field>\r\n      <mat-label>last name</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\r\n      <mat-error\r\n        *ngIf=\"\r\n          lastName.hasError('required') && (lastName.dirty || lastName.touched)\r\n        \"\r\n      >\r\n        last name required\r\n      </mat-error>\r\n      <mat-error\r\n        *ngIf=\"\r\n          lastName.hasError('maxlength') && (lastName.dirty || lastName.touched)\r\n        \"\r\n      >\r\n        last name too long\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- roles -->\r\n  <div>\r\n    <mat-form-field style=\"width: 16em\">\r\n      <mat-label>roles</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"roles\" />\r\n      <mat-error\r\n        *ngIf=\"roles.hasError('maxlength') && (roles.dirty || roles.touched)\"\r\n      >\r\n        too long\r\n      </mat-error>\r\n      <mat-hint>roles (separated by space)</mat-hint>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <br />\r\n  <div>\r\n    <button mat-icon-button color=\"warn\" matTooltip=\"Close\" (click)=\"close()\">\r\n      <mat-icon>cancel</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      [disabled]=\"form.invalid\"\r\n      matTooltip=\"Save user\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\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$2.AuthJwtService }]; }, propDecorators: { user: [{
                 type: Input
             }], userChange: [{
@@ -907,10 +880,10 @@ class UserListComponent {
     }
 }
 UserListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: UserListComponent, deps: [{ token: UserListRepository }, { token: DialogService }, { token: i2$2.GravatarService }], target: i0.ɵɵFactoryTarget.Component });
-UserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: UserListComponent, selector: "auth-jwt-user-list", ngImport: i0, template: "<div id=\"container\">\n  <div>\n    <!-- filters -->\n    <div style=\"grid-area: filters\">\n      <auth-jwt-user-filter></auth-jwt-user-filter>\n    </div>\n\n    <!-- list -->\n    <div style=\"grid-area: list\" *ngIf=\"pagination$ | async as pagination\">\n      <div *ngIf=\"loading$ | async\" gdArea=\"progress\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <th>name</th>\n          <th class=\"noif-lt-md\">first</th>\n          <th class=\"noif-lt-md\">last</th>\n          <th class=\"noif-lt-md\">email</th>\n          <th>roles</th>\n          <th class=\"noif-lt-md\">lock end</th>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let user of pagination.data\">\n            <td>\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              <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 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 style=\"grid-area: paginator; justify-content: end\" class=\"form-row\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          color=\"warn\"\n          matTooltip=\"Clear items cache\"\n          (click)=\"clearCache()\"\n        >\n          <mat-icon>autorenew</mat-icon>\n        </button>\n\n        <mat-paginator\n          gdArea=\"pager\"\n          gdAlignColumns=\"center\"\n          gdAlignRows=\"start\"\n          [length]=\"pagination.total\"\n          [pageSize]=\"pagination.perPage\"\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  </div>\n\n  <!-- editor -->\n  <mat-expansion-panel style=\"grid-area: 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.command{width:24px}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#container{display:grid;grid-template-rows:auto 1fr auto auto;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-template-areas:\"filters\" \"list\" \"paginator\" \"editor\";gap:8px}@media only screen and (max-width: 959px){.noif-lt-md{display:none}}\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: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.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: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: ["disabled"] }, { kind: "component", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: ["user"], outputs: ["userChange", "editorClose"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+UserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: UserListComponent, selector: "auth-jwt-user-list", ngImport: i0, template: "<div id=\"container\">\r\n  <div>\r\n    <!-- filters -->\r\n    <div style=\"grid-area: filters\">\r\n      <auth-jwt-user-filter></auth-jwt-user-filter>\r\n    </div>\r\n\r\n    <!-- list -->\r\n    <div style=\"grid-area: list\" *ngIf=\"pagination$ | async as pagination\">\r\n      <div *ngIf=\"loading$ | async\" gdArea=\"progress\">\r\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <td></td>\r\n          <td></td>\r\n          <th>name</th>\r\n          <th class=\"noif-lt-md\">first</th>\r\n          <th class=\"noif-lt-md\">last</th>\r\n          <th class=\"noif-lt-md\">email</th>\r\n          <th>roles</th>\r\n          <th class=\"noif-lt-md\">lock end</th>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let user of pagination.data\">\r\n            <td>\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                matTooltip=\"Edit {{ user.userName }}\"\r\n                color=\"primary\"\r\n                (click)=\"setActiveUser(user)\"\r\n              >\r\n                <mat-icon>mode_edit</mat-icon>\r\n              </button>\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                matTooltip=\"Delete {{ user.userName }}\"\r\n                color=\"warn\"\r\n                (click)=\"deleteUser(user)\"\r\n              >\r\n                <mat-icon>remove_circle</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>\r\n              <img\r\n                [src]=\"getGravatarUrl(user.email, 32)\"\r\n                [alt]=\"user.userName\"\r\n              />\r\n            </td>\r\n            <td>{{ user.userName }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\r\n            <td class=\"noif-lt-md\">\r\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\r\n            </td>\r\n            <td>{{ user.roles.join(\" \") }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- paginator -->\r\n      <div style=\"grid-area: paginator; justify-content: end\" class=\"form-row\">\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          matTooltip=\"Clear items cache\"\r\n          (click)=\"clearCache()\"\r\n        >\r\n          <mat-icon>autorenew</mat-icon>\r\n        </button>\r\n\r\n        <mat-paginator\r\n          gdArea=\"pager\"\r\n          gdAlignColumns=\"center\"\r\n          gdAlignRows=\"start\"\r\n          [length]=\"pagination.total\"\r\n          [pageSize]=\"pagination.perPage\"\r\n          [pageSizeOptions]=\"[20, 50, 75, 100]\"\r\n          [pageIndex]=\"pagination.currentPage - 1\"\r\n          [showFirstLastButtons]=\"true\"\r\n          (page)=\"pageChange($event)\"\r\n        ></mat-paginator>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel style=\"grid-area: editor\"\r\n    [expanded]=\"active$ | async\"\r\n    [disabled]=\"!(active$ | async)\"\r\n  >\r\n    <div *ngIf=\"active$ | async as active\">\r\n      <fieldset>\r\n        <legend>{{ active.userName }}</legend>\r\n        <auth-jwt-user-editor\r\n          [user]=\"active\"\r\n          (userChange)=\"saveActiveUser($event)\"\r\n          (editorClose)=\"resetActiveUser()\"\r\n        ></auth-jwt-user-editor>\r\n      </fieldset>\r\n    </div>\r\n  </mat-expansion-panel>\r\n</div>\r\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.command{width:24px}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#container{display:grid;grid-template-rows:auto 1fr auto auto;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-template-areas:\"filters\" \"list\" \"paginator\" \"editor\";gap:8px}@media only screen and (max-width: 959px){.noif-lt-md{display:none}}\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: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.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: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: ["disabled"] }, { 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: "15.1.4", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth-jwt-user-list', template: "<div id=\"container\">\n  <div>\n    <!-- filters -->\n    <div style=\"grid-area: filters\">\n      <auth-jwt-user-filter></auth-jwt-user-filter>\n    </div>\n\n    <!-- list -->\n    <div style=\"grid-area: list\" *ngIf=\"pagination$ | async as pagination\">\n      <div *ngIf=\"loading$ | async\" gdArea=\"progress\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <th>name</th>\n          <th class=\"noif-lt-md\">first</th>\n          <th class=\"noif-lt-md\">last</th>\n          <th class=\"noif-lt-md\">email</th>\n          <th>roles</th>\n          <th class=\"noif-lt-md\">lock end</th>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let user of pagination.data\">\n            <td>\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              <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 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 style=\"grid-area: paginator; justify-content: end\" class=\"form-row\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          color=\"warn\"\n          matTooltip=\"Clear items cache\"\n          (click)=\"clearCache()\"\n        >\n          <mat-icon>autorenew</mat-icon>\n        </button>\n\n        <mat-paginator\n          gdArea=\"pager\"\n          gdAlignColumns=\"center\"\n          gdAlignRows=\"start\"\n          [length]=\"pagination.total\"\n          [pageSize]=\"pagination.perPage\"\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  </div>\n\n  <!-- editor -->\n  <mat-expansion-panel style=\"grid-area: 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.command{width:24px}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#container{display:grid;grid-template-rows:auto 1fr auto auto;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-template-areas:\"filters\" \"list\" \"paginator\" \"editor\";gap:8px}@media only screen and (max-width: 959px){.noif-lt-md{display:none}}\n"] }]
+            args: [{ selector: 'auth-jwt-user-list', template: "<div id=\"container\">\r\n  <div>\r\n    <!-- filters -->\r\n    <div style=\"grid-area: filters\">\r\n      <auth-jwt-user-filter></auth-jwt-user-filter>\r\n    </div>\r\n\r\n    <!-- list -->\r\n    <div style=\"grid-area: list\" *ngIf=\"pagination$ | async as pagination\">\r\n      <div *ngIf=\"loading$ | async\" gdArea=\"progress\">\r\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <td></td>\r\n          <td></td>\r\n          <th>name</th>\r\n          <th class=\"noif-lt-md\">first</th>\r\n          <th class=\"noif-lt-md\">last</th>\r\n          <th class=\"noif-lt-md\">email</th>\r\n          <th>roles</th>\r\n          <th class=\"noif-lt-md\">lock end</th>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let user of pagination.data\">\r\n            <td>\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                matTooltip=\"Edit {{ user.userName }}\"\r\n                color=\"primary\"\r\n                (click)=\"setActiveUser(user)\"\r\n              >\r\n                <mat-icon>mode_edit</mat-icon>\r\n              </button>\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                matTooltip=\"Delete {{ user.userName }}\"\r\n                color=\"warn\"\r\n                (click)=\"deleteUser(user)\"\r\n              >\r\n                <mat-icon>remove_circle</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>\r\n              <img\r\n                [src]=\"getGravatarUrl(user.email, 32)\"\r\n                [alt]=\"user.userName\"\r\n              />\r\n            </td>\r\n            <td>{{ user.userName }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\r\n            <td class=\"noif-lt-md\">\r\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\r\n            </td>\r\n            <td>{{ user.roles.join(\" \") }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- paginator -->\r\n      <div style=\"grid-area: paginator; justify-content: end\" class=\"form-row\">\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          matTooltip=\"Clear items cache\"\r\n          (click)=\"clearCache()\"\r\n        >\r\n          <mat-icon>autorenew</mat-icon>\r\n        </button>\r\n\r\n        <mat-paginator\r\n          gdArea=\"pager\"\r\n          gdAlignColumns=\"center\"\r\n          gdAlignRows=\"start\"\r\n          [length]=\"pagination.total\"\r\n          [pageSize]=\"pagination.perPage\"\r\n          [pageSizeOptions]=\"[20, 50, 75, 100]\"\r\n          [pageIndex]=\"pagination.currentPage - 1\"\r\n          [showFirstLastButtons]=\"true\"\r\n          (page)=\"pageChange($event)\"\r\n        ></mat-paginator>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel style=\"grid-area: editor\"\r\n    [expanded]=\"active$ | async\"\r\n    [disabled]=\"!(active$ | async)\"\r\n  >\r\n    <div *ngIf=\"active$ | async as active\">\r\n      <fieldset>\r\n        <legend>{{ active.userName }}</legend>\r\n        <auth-jwt-user-editor\r\n          [user]=\"active\"\r\n          (userChange)=\"saveActiveUser($event)\"\r\n          (editorClose)=\"resetActiveUser()\"\r\n        ></auth-jwt-user-editor>\r\n      </fieldset>\r\n    </div>\r\n  </mat-expansion-panel>\r\n</div>\r\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.command{width:24px}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#container{display:grid;grid-template-rows:auto 1fr auto auto;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-template-areas:\"filters\" \"list\" \"paginator\" \"editor\";gap:8px}@media only screen and (max-width: 959px){.noif-lt-md{display:none}}\n"] }]
         }], ctorParameters: function () { return [{ type: UserListRepository }, { type: DialogService }, { type: i2$2.GravatarService }]; } });
 
 class AuthJwtAdminModule {