@firestitch/2fa 12.3.2 → 12.3.5

package/app/enums/verification-method-type.enum.d.ts

@@ -1,4 +1,4 @@
-export declare enum FsVerificationMethodType {
+export declare enum VerificationMethodType {
     Sms = "sms",
     Email = "email",
     App = "app"

package/app/interfaces/verification-method.interface.d.ts

@@ -1,8 +1,8 @@
-import { FsVerificationMethodType } from '../enums/verification-method-type.enum';
+import { VerificationMethodType } from '../enums/verification-method-type.enum';
 export interface IFsVerificationMethod {
     id: number;
     state?: string;
-    type: FsVerificationMethodType;
+    type: VerificationMethodType;
     phoneCode?: number;
     phoneCountry?: string;
     email?: string;

package/app/modules/manage/components/2fa-manage/2fa-manage.component.d.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { VerificationMethodType } from '../../../../enums/verification-method-type.enum';
 import { Observable } from 'rxjs';
 import { TwoFactorManageService } from '../../services';
 import * as i0 from "@angular/core";
@@ -9,6 +10,7 @@ export declare class Fs2faManageComponent implements OnDestroy, OnInit {
     private _twoFactorManageService;
     accountVerify: () => Observable<any>;
     defaultCountry: string;
+    verificationMethodTypes: VerificationMethodType[];
     verificationMethodsFetch: () => Observable<any[]>;
     verificationMethodDelete: (verificationMethod: any) => Observable<any>;
     verificationMethodCreate: (verificationMethod: any) => Observable<any>;
@@ -22,5 +24,5 @@ export declare class Fs2faManageComponent implements OnDestroy, OnInit {
     reload(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<Fs2faManageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Fs2faManageComponent, "fs-2fa-manage", never, { "accountVerify": "accountVerify"; "defaultCountry": "defaultCountry"; "verificationMethodsFetch": "verificationMethodsFetch"; "verificationMethodDelete": "verificationMethodDelete"; "verificationMethodCreate": "verificationMethodCreate"; "verificationMethodVerify": "verificationMethodVerify"; "verificationMethodResend": "verificationMethodResend"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Fs2faManageComponent, "fs-2fa-manage", never, { "accountVerify": "accountVerify"; "defaultCountry": "defaultCountry"; "verificationMethodTypes": "verificationMethodTypes"; "verificationMethodsFetch": "verificationMethodsFetch"; "verificationMethodDelete": "verificationMethodDelete"; "verificationMethodCreate": "verificationMethodCreate"; "verificationMethodVerify": "verificationMethodVerify"; "verificationMethodResend": "verificationMethodResend"; }, {}, never, never>;
 }

package/app/modules/manage/components/emails/emails.component.d.ts

@@ -1,6 +1,6 @@
 import { MatDialogRef } from '@angular/material/dialog';
 import { FsMessage } from '@firestitch/message';
-import { FsVerificationMethodType } from '../../../../enums/verification-method-type.enum';
+import { VerificationMethodType } from '../../../../enums/verification-method-type.enum';
 import { TwoFactorManageService } from '../../services';
 import * as i0 from "@angular/core";
 export declare class EmailsComponent {
@@ -8,7 +8,7 @@ export declare class EmailsComponent {
     private _dialogRef;
     private _message;
     twoFactorManageService: TwoFactorManageService;
-    FsVerificationMethodType: typeof FsVerificationMethodType;
+    VerificationMethodType: typeof VerificationMethodType;
     constructor(_data: any, _dialogRef: MatDialogRef<EmailsComponent>, _message: FsMessage);
     add(): void;
     deleted(): void;

package/app/modules/manage/components/manage-methods/manage-methods.component.d.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { TwoFactorManageService } from '../../services';
+import { VerificationMethodType } from '../../../../enums/verification-method-type.enum';
 import { FsMessage } from '@firestitch/message';
 import * as i0 from "@angular/core";
 export declare class ManageMethodsComponent implements OnInit, OnDestroy {
@@ -10,6 +11,8 @@ export declare class ManageMethodsComponent implements OnInit, OnDestroy {
     private _message;
     twoFactorManageService: TwoFactorManageService;
     verificationMethods: any;
+    verificationMethodTypes: {};
+    VerificationMethodType: typeof VerificationMethodType;
     private _destroy$;
     private _defaultCountry;
     constructor(_data: any, _cdRef: ChangeDetectorRef, _dialog: MatDialog, _message: FsMessage);

package/app/modules/manage/components/numbers/numbers.component.d.ts

@@ -1,6 +1,6 @@
 import { MatDialogRef } from '@angular/material/dialog';
 import { FsMessage } from '@firestitch/message';
-import { FsVerificationMethodType } from '../../../../enums/verification-method-type.enum';
+import { VerificationMethodType } from '../../../../enums/verification-method-type.enum';
 import { TwoFactorManageService } from '../../services';
 import * as i0 from "@angular/core";
 export declare class NumbersComponent {
@@ -9,7 +9,7 @@ export declare class NumbersComponent {
     private _message;
     defaultCountry: any;
     twoFactorManageService: TwoFactorManageService;
-    FsVerificationMethodType: typeof FsVerificationMethodType;
+    VerificationMethodType: typeof VerificationMethodType;
     constructor(_data: any, _dialogRef: MatDialogRef<NumbersComponent>, _message: FsMessage);
     add(): void;
     deleted(): void;

package/app/modules/verification/components/2fa-verification/2fa-verification.component.d.ts

@@ -2,7 +2,7 @@ import { AfterViewInit, ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } fro
 import { FsDialog } from '@firestitch/dialog';
 import { IFsVerificationMethod } from '../../../../interfaces/verification-method.interface';
 import { Observable } from 'rxjs';
-import { FsVerificationMethodType } from '../../../../enums/verification-method-type.enum';
+import { VerificationMethodType } from '../../../../enums/verification-method-type.enum';
 import { Fs2faVerificationCodeComponent } from '../2fa-verification-code/2fa-verification-code.component';
 import * as i0 from "@angular/core";
 export declare class Fs2faVerificationComponent implements OnDestroy, AfterViewInit, OnInit {
@@ -19,7 +19,7 @@ export declare class Fs2faVerificationComponent implements OnDestroy, AfterViewI
     resendInProgress: boolean;
     code: string;
     trustedDevice: boolean;
-    FsVerificationMethodType: typeof FsVerificationMethodType;
+    VerificationMethodType: typeof VerificationMethodType;
     private _destroy$;
     constructor(_cdRef: ChangeDetectorRef, _dialog: FsDialog);
     ngOnInit(): void;

package/app/modules/verification/components/2fa-verification-code/2fa-verification-code.component.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '@angular/core';
 import { CodeInputComponent } from '../../../../modules/code-input/components/code-input';
-import { FsVerificationMethodType } from '../../../../enums/verification-method-type.enum';
+import { VerificationMethodType } from '../../../../enums/verification-method-type.enum';
 import { IFsVerificationMethod } from '../../../../interfaces/verification-method.interface';
 import * as i0 from "@angular/core";
 export declare class Fs2faVerificationCodeComponent {
@@ -9,7 +9,7 @@ export declare class Fs2faVerificationCodeComponent {
     code: any;
     codeChanged: EventEmitter<string>;
     codeCompleted: EventEmitter<void>;
-    FsVerificationMethodType: typeof FsVerificationMethodType;
+    VerificationMethodType: typeof VerificationMethodType;
     codeChange(code: any): void;
     focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<Fs2faVerificationCodeComponent, never>;

package/app/modules/verification/components/2fa-verification-methods/2fa-verification-methods.component.d.ts

@@ -1,6 +1,6 @@
 import { MatDialogRef } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
-import { FsVerificationMethodType } from '../../../../enums/verification-method-type.enum';
+import { VerificationMethodType } from '../../../../enums/verification-method-type.enum';
 import { IFsVerificationMethod } from '../../../../interfaces/verification-method.interface';
 import * as i0 from "@angular/core";
 export declare class Fs2faVerificationMethodsComponent {
@@ -10,7 +10,7 @@ export declare class Fs2faVerificationMethodsComponent {
     phone: string;
     code: string;
     verificationMethods: Record<string, IFsVerificationMethod[]>;
-    readonly verificationMethodType: typeof FsVerificationMethodType;
+    readonly verificationMethodType: typeof VerificationMethodType;
     private _selectVerificationMethod;
     constructor(_dialogData: any, _dialogRef: MatDialogRef<Fs2faVerificationMethodsComponent>);
     compareWith(o1: any, o2: any): boolean;

package/bundles/firestitch-2fa.umd.js

@@ -46,19 +46,19 @@
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
 
-    exports.FsVerificationMethodType = void 0;
-    (function (FsVerificationMethodType) {
-        FsVerificationMethodType["Sms"] = "sms";
-        FsVerificationMethodType["Email"] = "email";
-        FsVerificationMethodType["App"] = "app";
-    })(exports.FsVerificationMethodType || (exports.FsVerificationMethodType = {}));
+    exports.VerificationMethodType = void 0;
+    (function (VerificationMethodType) {
+        VerificationMethodType["Sms"] = "sms";
+        VerificationMethodType["Email"] = "email";
+        VerificationMethodType["App"] = "app";
+    })(exports.VerificationMethodType || (exports.VerificationMethodType = {}));
 
     var Fs2faVerificationMethodsComponent = /** @class */ (function () {
         function Fs2faVerificationMethodsComponent(_dialogData, _dialogRef) {
             var _this = this;
             this._dialogData = _dialogData;
             this._dialogRef = _dialogRef;
-            this.verificationMethodType = exports.FsVerificationMethodType;
+            this.verificationMethodType = exports.VerificationMethodType;
             this.setVerificationMethod = function () {
                 return _this._selectVerificationMethod(_this.method)
                     .pipe(operators.tap(function (method) {
@@ -143,7 +143,7 @@
         function Fs2faVerificationCodeComponent() {
             this.codeChanged = new i0.EventEmitter();
             this.codeCompleted = new i0.EventEmitter();
-            this.FsVerificationMethodType = exports.FsVerificationMethodType;
+            this.VerificationMethodType = exports.VerificationMethodType;
         }
         Fs2faVerificationCodeComponent.prototype.codeChange = function (code) {
             this.code = code;
@@ -155,7 +155,7 @@
         return Fs2faVerificationCodeComponent;
     }());
     Fs2faVerificationCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationCodeComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Fs2faVerificationCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faVerificationCodeComponent, selector: "fs-2fa-verification-code", inputs: { method: "method", code: "code" }, outputs: { codeChanged: "codeChanged", codeCompleted: "codeCompleted" }, viewQueries: [{ propertyName: "codeInputComponent", first: true, predicate: CodeInputComponent, descendants: true }], ngImport: i0__namespace, template: "<ng-container *ngIf=\"method.phoneNumber && method.type === FsVerificationMethodType.Sms\">\n  <p class=\"description\">\n    A text message with a verification code was just\n    sent to <span style=\"white-space: nowrap;\">{{ method.phoneNumber }}</span> to verify it's you.\n  </p>\n\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"method.type === FsVerificationMethodType.Email\">\n  <p class=\"description\">\n    A email with a verification code was just sent to {{ method.email }} to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"method.type === FsVerificationMethodType.App\">\n  <p class=\"description\">\n    Enter the verification code generated by your 2 factor authenticator app to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-template #input> \n <app-code-input  \n    [code]=\"code\"\n    (codeChanged)=\"codeChange($event)\"\n    (codeCompleted)=\"codeCompleted.emit()\">\n  </app-code-input> \n</ng-template> ", styles: ["mat-form-field{width:100%}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper{min-height:unset!important}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper .fs-form-error{padding-bottom:5px}app-code-input{margin-bottom:5px}\n"], components: [{ type: CodeInputComponent, selector: "app-code-input", inputs: ["codeLength", "code"], outputs: ["codeCompleted", "codeChanged"] }], directives: [{ type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], viewProviders: [
+    Fs2faVerificationCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faVerificationCodeComponent, selector: "fs-2fa-verification-code", inputs: { method: "method", code: "code" }, outputs: { codeChanged: "codeChanged", codeCompleted: "codeCompleted" }, viewQueries: [{ propertyName: "codeInputComponent", first: true, predicate: CodeInputComponent, descendants: true }], ngImport: i0__namespace, template: "<ng-container *ngIf=\"method.phoneNumber && method.type === VerificationMethodType.Sms\">\n  <p class=\"description\">\n    A text message with a verification code was just\n    sent to <span style=\"white-space: nowrap;\">{{ method.phoneNumber }}</span> to verify it's you.\n  </p>\n\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"method.type === VerificationMethodType.Email\">\n  <p class=\"description\">\n    A email with a verification code was just sent to {{ method.email }} to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"method.type === VerificationMethodType.App\">\n  <p class=\"description\">\n    Enter the verification code generated by your 2 factor authenticator app to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-template #input> \n <app-code-input  \n    [code]=\"code\"\n    (codeChanged)=\"codeChange($event)\"\n    (codeCompleted)=\"codeCompleted.emit()\">\n  </app-code-input> \n</ng-template> ", styles: ["mat-form-field{width:100%}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper{min-height:unset!important}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper .fs-form-error{padding-bottom:5px}app-code-input{margin-bottom:5px}\n"], components: [{ type: CodeInputComponent, selector: "app-code-input", inputs: ["codeLength", "code"], outputs: ["codeCompleted", "codeChanged"] }], directives: [{ type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], viewProviders: [
             {
                 provide: i8.ControlContainer,
                 useExisting: i8.NgForm,
@@ -200,7 +200,7 @@
             this.resendInProgress = false;
             this.code = '';
             this.trustedDevice = true;
-            this.FsVerificationMethodType = exports.FsVerificationMethodType;
+            this.VerificationMethodType = exports.VerificationMethodType;
             this._destroy$ = new rxjs.Subject();
         }
         Fs2faVerificationComponent.prototype.ngOnInit = function () {
@@ -621,21 +621,21 @@
         });
         Object.defineProperty(TwoFactorManageService.prototype, "emailVerificationMethods", {
             get: function () {
-                return this.getVerificationMethods(exports.FsVerificationMethodType.Email);
+                return this.getVerificationMethods(exports.VerificationMethodType.Email);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(TwoFactorManageService.prototype, "smsVerificationMethods", {
             get: function () {
-                return this.getVerificationMethods(exports.FsVerificationMethodType.Sms);
+                return this.getVerificationMethods(exports.VerificationMethodType.Sms);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(TwoFactorManageService.prototype, "appVerificationMethods", {
             get: function () {
-                return this.getVerificationMethods(exports.FsVerificationMethodType.App);
+                return this.getVerificationMethods(exports.VerificationMethodType.App);
             },
             enumerable: false,
             configurable: true
@@ -698,7 +698,7 @@
             });
         };
         TwoFactorManageService.prototype.accountVerify = function () {
-            return this._accountVerify();
+            return this._accountVerify ? this._accountVerify() : rxjs.of(true);
         };
         TwoFactorManageService.prototype.ngOnDestroy = function () {
             this._destroy$.next();
@@ -777,7 +777,7 @@
                                 title: 'Confirm',
                                 template: 'Would you like to delete this verification method?',
                             })
-                                .pipe(operators.switchMap(function () { return _this.twoFactorManageService
+                                .pipe(operators.switchMap(function () { return _this.twoFactorManageService.accountVerify(); }), operators.switchMap(function () { return _this.twoFactorManageService
                                 .verificationMethodDelete(verificationMethod); }))
                                 .subscribe(function () {
                                 _this.deleted.emit(verificationMethod);
@@ -799,7 +799,7 @@
         return VerificationMethodsComponent;
     }());
     VerificationMethodsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: VerificationMethodsComponent, deps: [{ token: i1__namespace$2.FsPrompt }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    VerificationMethodsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: VerificationMethodsComponent, selector: "app-verification-methods", inputs: { twoFactorManageService: "twoFactorManageService", type: "type" }, outputs: { deleted: "deleted" }, ngImport: i0__namespace, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column class=\"col-name\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"row\">\n        <ng-container *ngIf=\"row.type === 'sms'\">\n          <fs-country [code]=\"row.phoneCountry\" [showName]=\"false\"></fs-country> {{row.phoneNumber | fsPhone}}\n        </ng-container>\n\n        <ng-container *ngIf=\"row.type === 'email'\">\n          {{row.email}}\n        </ng-container>\n   \n        <app-defaulted *ngIf=\"row.default\"></app-defaulted>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: [":host ::ng-deep .col-name .row{display:flex;align-items:center}fs-country{margin-right:5px}app-defaulted{margin-left:5px}\n"], components: [{ type: i2__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i3__namespace$3.FsCountryComponent, selector: "fs-country", inputs: ["code", "showIcon", "showName", "region", "width"] }, { type: DefaultedComponent, selector: "app-defaulted" }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsPhone": i6__namespace.FsPhonePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    VerificationMethodsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: VerificationMethodsComponent, selector: "app-verification-methods", inputs: { twoFactorManageService: "twoFactorManageService", type: "type" }, outputs: { deleted: "deleted" }, ngImport: i0__namespace, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column class=\"col-name\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"row\">\n        <ng-container *ngIf=\"row.type === 'sms'\">\n          <fs-country [code]=\"row.phoneCountry\" [showName]=\"false\"></fs-country> {{row.phoneNumber | fsPhone}}\n        </ng-container>\n\n        <ng-container *ngIf=\"row.type === 'email'\">\n          {{row.email}}\n        </ng-container>\n   \n        <app-defaulted *ngIf=\"row.default\"></app-defaulted>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: [":host ::ng-deep .col-name .row{display:flex;align-items:center}fs-country{margin-right:5px}app-defaulted{margin-left:5px}\n"], components: [{ type: i2__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i3__namespace$3.FsCountryComponent, selector: "fs-country", inputs: ["code", "showIcon", "showName", "region", "width"] }, { type: DefaultedComponent, selector: "app-defaulted" }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsPhone": i6__namespace.FsPhonePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: VerificationMethodsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -821,7 +821,7 @@
             this._data = _data;
             this._dialogRef = _dialogRef;
             this._message = _message;
-            this.FsVerificationMethodType = exports.FsVerificationMethodType;
+            this.VerificationMethodType = exports.VerificationMethodType;
             this.twoFactorManageService = _data.twoFactorManageService;
             this.defaultCountry = _data.defaultCountry;
         }
@@ -831,14 +831,14 @@
         };
         NumbersComponent.prototype.deleted = function () {
             this._message.success('Deleted text message verification method');
-            if (!this.twoFactorManageService.hasVerificationMethod(exports.FsVerificationMethodType.Sms)) {
+            if (!this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.Sms)) {
                 this._dialogRef.close();
             }
         };
         return NumbersComponent;
     }());
     NumbersComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumbersComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NumbersComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumbersComponent, selector: "ng-component", ngImport: i0__namespace, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    Text Message Numbers\n  </h1>\n  <mat-dialog-content>\n    <app-verification-methods\n      [type]=\"FsVerificationMethodType.Sms\"\n      [twoFactorManageService]=\"twoFactorManageService\"\n      (deleted)=\"deleted()\">\n    </app-verification-methods>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Close\n    </button>\n    <button\n        mat-button\n        (click)=\"add()\"\n        type=\"button\">\n      Add Number\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: VerificationMethodsComponent, selector: "app-verification-methods", inputs: ["twoFactorManageService", "type"], outputs: ["deleted"] }, { type: i7__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    NumbersComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumbersComponent, selector: "ng-component", ngImport: i0__namespace, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    Text Message Numbers\n  </h1>\n  <mat-dialog-content>\n    <app-verification-methods\n      [type]=\"VerificationMethodType.Sms\"\n      [twoFactorManageService]=\"twoFactorManageService\"\n      (deleted)=\"deleted()\">\n    </app-verification-methods>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Close\n    </button>\n    <button\n        mat-button\n        (click)=\"add()\"\n        type=\"button\">\n      Add Number\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: VerificationMethodsComponent, selector: "app-verification-methods", inputs: ["twoFactorManageService", "type"], outputs: ["deleted"] }, { type: i7__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumbersComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -858,7 +858,7 @@
             this._data = _data;
             this._dialogRef = _dialogRef;
             this._message = _message;
-            this.FsVerificationMethodType = exports.FsVerificationMethodType;
+            this.VerificationMethodType = exports.VerificationMethodType;
             this.twoFactorManageService = _data.twoFactorManageService;
         }
         EmailsComponent.prototype.add = function () {
@@ -867,14 +867,14 @@
         };
         EmailsComponent.prototype.deleted = function () {
             this._message.success('Deleted email verification method');
-            if (!this.twoFactorManageService.hasVerificationMethod(exports.FsVerificationMethodType.Email)) {
+            if (!this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.Email)) {
                 this._dialogRef.close();
             }
         };
         return EmailsComponent;
     }());
     EmailsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EmailsComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    EmailsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EmailsComponent, selector: "ng-component", ngImport: i0__namespace, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    Emails\n  </h1>\n  <mat-dialog-content>\n    <app-verification-methods\n      [type]=\"FsVerificationMethodType.Email\"\n      [twoFactorManageService]=\"twoFactorManageService\"\n      (deleted)=\"deleted()\">\n    </app-verification-methods>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Close\n    </button>\n    <button\n        mat-button\n        (click)=\"add()\"\n        type=\"button\">\n      Add Email\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: VerificationMethodsComponent, selector: "app-verification-methods", inputs: ["twoFactorManageService", "type"], outputs: ["deleted"] }, { type: i7__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    EmailsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EmailsComponent, selector: "ng-component", ngImport: i0__namespace, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    Emails\n  </h1>\n  <mat-dialog-content>\n    <app-verification-methods\n      [type]=\"VerificationMethodType.Email\"\n      [twoFactorManageService]=\"twoFactorManageService\"\n      (deleted)=\"deleted()\">\n    </app-verification-methods>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Close\n    </button>\n    <button\n        mat-button\n        (click)=\"add()\"\n        type=\"button\">\n      Add Email\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: VerificationMethodsComponent, selector: "app-verification-methods", inputs: ["twoFactorManageService", "type"], outputs: ["deleted"] }, { type: i7__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EmailsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -895,12 +895,19 @@
             this._cdRef = _cdRef;
             this._dialog = _dialog;
             this._message = _message;
+            this.verificationMethodTypes = {};
+            this.VerificationMethodType = exports.VerificationMethodType;
             this._destroy$ = new rxjs.Subject();
         }
         ManageMethodsComponent.prototype.ngOnInit = function () {
             var _this = this;
             this._defaultCountry = this._data.defaultCountry;
             this.twoFactorManageService = this._data.twoFactorManageService;
+            this.verificationMethodTypes = this._data.verificationMethodTypes
+                .reduce(function (verificationMethodTypes, verificationMethodType) {
+                verificationMethodTypes[verificationMethodType] = true;
+                return verificationMethodTypes;
+            }, {});
             this.twoFactorManageService.verificationMethods$
                 .subscribe(function (verificationMethods) {
                 _this.verificationMethods = verificationMethods;
@@ -939,21 +946,21 @@
         });
         Object.defineProperty(ManageMethodsComponent.prototype, "textHasVerificationMethod", {
             get: function () {
-                return this.twoFactorManageService.hasVerificationMethod(exports.FsVerificationMethodType.Sms);
+                return this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.Sms);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(ManageMethodsComponent.prototype, "appHasVerificationMethod", {
             get: function () {
-                return this.twoFactorManageService.hasVerificationMethod(exports.FsVerificationMethodType.App);
+                return this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.App);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(ManageMethodsComponent.prototype, "emailHasVerificationMethod", {
             get: function () {
-                return this.twoFactorManageService.hasVerificationMethod(exports.FsVerificationMethodType.Email);
+                return this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.Email);
             },
             enumerable: false,
             configurable: true
@@ -986,7 +993,7 @@
             this._message.success('Removed App Authenticator verification method');
             var verificationMethod = this.verificationMethods
                 .find(function (_verificationMethod) {
-                return _verificationMethod.type === exports.FsVerificationMethodType.App;
+                return _verificationMethod.type === exports.VerificationMethodType.App;
             });
             if (verificationMethod) {
                 this.twoFactorManageService.verificationMethodDelete(verificationMethod)
@@ -1006,7 +1013,7 @@
         return ManageMethodsComponent;
     }());
     ManageMethodsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ManageMethodsComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.MatDialog }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ManageMethodsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ManageMethodsComponent, selector: "ng-component", ngImport: i0__namespace, template: "<fs-dialog>\n  <h1 mat-dialog-title>2-Step Verification</h1>\n  <mat-dialog-content>\n    <table>\n      <tr>\n        <td>\n          <mat-icon>textsms</mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>Text Message</span>\n            <span *ngIf=\"textHasVerificationMethod\" class=\"enabled\"></span>\n            <app-defaulted *ngIf=\"defaultSms\"></app-defaulted>\n          </div>\n          <div class=\"small\">\n            Verification codes are sent by text message\n            <ng-container *ngIf=\"textHasVerificationMethod\">\n              to <span class=\"items\">\n                <span *ngFor=\"let item of twoFactorManageService.smsVerificationMethods\">{{item.phoneNumber | fsPhone}}</span>\n              </span>\n            </ng-container>\n          </div>\n        </td>\n        <td>\n          <button \n              *ngIf=\"textHasVerificationMethod; else textMessageManageButton\"\n              mat-raised-button \n              type=\"button\"\n              (click)=\"textMessageManage()\">\n              Manage\n            </button>\n          <ng-template #textMessageManageButton>\n            <button               \n                mat-raised-button \n                color=\"primary\"\n                type=\"button\"\n                (click)=\"textMessageAdd()\">\n              Turn On\n            </button>\n          </ng-template>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <mat-icon>email</mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>Email</span> \n            <span *ngIf=\"emailHasVerificationMethod\" class=\"enabled\"></span>\n            <app-defaulted *ngIf=\"defaultEmail\"></app-defaulted>\n          </div>\n          <div class=\"small\">\n            Verification codes are sent by email\n            <ng-container *ngIf=\"emailHasVerificationMethod\">\n              to <span class=\"items\">\n                <span *ngFor=\"let item of twoFactorManageService.emailVerificationMethods\">{{item.email}}</span>\n              </span>\n            </ng-container>\n          </div>\n        </td>\n        <td>\n          <button \n              *ngIf=\"emailHasVerificationMethod; else emailMessageManageButton\"\n              mat-raised-button \n              type=\"button\"\n              (click)=\"emailMessageManage()\">\n            Manage\n          </button>\n        <ng-template #emailMessageManageButton>\n          <button               \n              mat-raised-button \n              color=\"primary\"\n              type=\"button\"\n              (click)=\"emailMessageAdd()\">\n            Turn On\n          </button>\n        </ng-template>\n        </td>\n      </tr>\n      <tr>\n        <td>\n          <mat-icon>phone_iphone</mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>Authenticator App</span>\n            <span *ngIf=\"appHasVerificationMethod\" class=\"enabled\"></span>\n            <app-defaulted *ngIf=\"defaultApp\"></app-defaulted>\n          </div>\n          <div class=\"small\">Verification code is generated by an authenticator app such as Authy or Google Authenticator</div>\n        </td>\n        <td>\n          <button \n              *ngIf=\"appHasVerificationMethod; else appMessageManageButton\"\n              mat-raised-button \n              type=\"button\"\n              (click)=\"appRemove()\">\n            Remove\n          </button>\n        <ng-template #appMessageManageButton>\n          <button               \n              mat-raised-button \n              color=\"primary\"\n              type=\"button\"\n              (click)=\"appAdd()\">\n            Turn On\n          </button>\n        </ng-template>\n        </td>\n      </tr> \n    </table>      \n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        color=\"primary\"\n        type=\"button\"\n        [mat-dialog-close]=\"undefined\">\n      Close\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: ["mat-dialog-content{max-width:500px}.enabled{font-size:75%;background-color:#70b601;padding:2px 4px;border-radius:4px;color:#fff;margin-left:4px}.enabled:after{content:\"Enabled\"}table tr td:first-child,table tr td:last-child{width:1%}table tr td:first-child mat-icon,table tr td:last-child mat-icon{display:flex}table tr td{padding:6px;vertical-align:middle}table tr .type{display:flex;align-items:center}table tr .type app-defaulted{margin-left:4px}.items span+span:not(:last-child):before{content:\", \"}.items span+span:last-child:before{content:\" and \"}\n"], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DefaultedComponent, selector: "app-defaulted" }, { type: i7__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsPhone": i6__namespace.FsPhonePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    ManageMethodsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ManageMethodsComponent, selector: "ng-component", ngImport: i0__namespace, template: "<fs-dialog>\n  <h1 mat-dialog-title>2-Step Verification</h1>\n  <mat-dialog-content>\n    <table>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.Sms]\">\n        <td>\n          <mat-icon>textsms</mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>Text Message</span>\n            <span *ngIf=\"textHasVerificationMethod\" class=\"enabled\"></span>\n            <app-defaulted *ngIf=\"defaultSms\"></app-defaulted>\n          </div>\n          <div class=\"small\">\n            Verification codes are sent by text message\n            <ng-container *ngIf=\"textHasVerificationMethod\">\n              to <span class=\"items\">\n                <span *ngFor=\"let item of twoFactorManageService.smsVerificationMethods\">{{item.phoneNumber | fsPhone}}</span>\n              </span>\n            </ng-container>\n          </div>\n        </td>\n        <td>\n          <button \n              *ngIf=\"textHasVerificationMethod; else textMessageManageButton\"\n              mat-raised-button \n              type=\"button\"\n              (click)=\"textMessageManage()\">\n              Manage\n            </button>\n          <ng-template #textMessageManageButton>\n            <button               \n                mat-raised-button \n                color=\"primary\"\n                type=\"button\"\n                (click)=\"textMessageAdd()\">\n              Turn On\n            </button>\n          </ng-template>\n        </td>\n      </tr>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.Email]\">\n        <td>\n          <mat-icon>email</mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>Email</span> \n            <span *ngIf=\"emailHasVerificationMethod\" class=\"enabled\"></span>\n            <app-defaulted *ngIf=\"defaultEmail\"></app-defaulted>\n          </div>\n          <div class=\"small\">\n            Verification codes are sent by email\n            <ng-container *ngIf=\"emailHasVerificationMethod\">\n              to <span class=\"items\">\n                <span *ngFor=\"let item of twoFactorManageService.emailVerificationMethods\">{{item.email}}</span>\n              </span>\n            </ng-container>\n          </div>\n        </td>\n        <td>\n          <button \n              *ngIf=\"emailHasVerificationMethod; else emailMessageManageButton\"\n              mat-raised-button \n              type=\"button\"\n              (click)=\"emailMessageManage()\">\n            Manage\n          </button>\n        <ng-template #emailMessageManageButton>\n          <button               \n              mat-raised-button \n              color=\"primary\"\n              type=\"button\"\n              (click)=\"emailMessageAdd()\">\n            Turn On\n          </button>\n        </ng-template>\n        </td>\n      </tr>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.App]\">\n        <td>\n          <mat-icon>phone_iphone</mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>Authenticator App</span>\n            <span *ngIf=\"appHasVerificationMethod\" class=\"enabled\"></span>\n            <app-defaulted *ngIf=\"defaultApp\"></app-defaulted>\n          </div>\n          <div class=\"small\">Verification code is generated by an authenticator app such as Authy or Google Authenticator</div>\n        </td>\n        <td>\n          <button \n              *ngIf=\"appHasVerificationMethod; else appMessageManageButton\"\n              mat-raised-button \n              type=\"button\"\n              (click)=\"appRemove()\">\n            Remove\n          </button>\n        <ng-template #appMessageManageButton>\n          <button               \n              mat-raised-button \n              color=\"primary\"\n              type=\"button\"\n              (click)=\"appAdd()\">\n            Turn On\n          </button>\n        </ng-template>\n        </td>\n      </tr> \n    </table>      \n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        color=\"primary\"\n        type=\"button\"\n        [mat-dialog-close]=\"undefined\">\n      Close\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: ["mat-dialog-content{max-width:500px}.enabled{font-size:75%;background-color:#70b601;padding:2px 4px;border-radius:4px;color:#fff;margin-left:4px}.enabled:after{content:\"Enabled\"}table tr td:first-child,table tr td:last-child{width:1%}table tr td:first-child mat-icon,table tr td:last-child mat-icon{display:flex}table tr td{padding:6px;vertical-align:middle}table tr .type{display:flex;align-items:center}table tr .type app-defaulted{margin-left:4px}.items span+span:not(:last-child):before{content:\", \"}.items span+span:last-child:before{content:\" and \"}\n"], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DefaultedComponent, selector: "app-defaulted" }, { type: i7__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsPhone": i6__namespace.FsPhonePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ManageMethodsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1030,6 +1037,11 @@
         }
         Fs2faManageComponent.prototype.ngOnInit = function () {
             var _this = this;
+            this.verificationMethodTypes = this.verificationMethodTypes || [
+                exports.VerificationMethodType.Sms,
+                exports.VerificationMethodType.Email,
+                exports.VerificationMethodType.App
+            ];
             this._twoFactorManageService.registerVerificationMethodFetch(this.verificationMethodsFetch);
             this._twoFactorManageService.registerVerificationMethodDelete(this.verificationMethodDelete);
             this._twoFactorManageService.registerVerificationMethodCreate(this.verificationMethodCreate);
@@ -1061,6 +1073,7 @@
                 data: {
                     defaultCountry: this.defaultCountry,
                     twoFactorManageService: this._twoFactorManageService,
+                    verificationMethodTypes: this.verificationMethodTypes,
                 },
             });
             dialogRef.afterClosed()
@@ -1079,7 +1092,7 @@
         return Fs2faManageComponent;
     }());
     Fs2faManageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faManageComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.MatDialog }, { token: TwoFactorManageService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Fs2faManageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faManageComponent, selector: "fs-2fa-manage", inputs: { accountVerify: "accountVerify", defaultCountry: "defaultCountry", verificationMethodsFetch: "verificationMethodsFetch", verificationMethodDelete: "verificationMethodDelete", verificationMethodCreate: "verificationMethodCreate", verificationMethodVerify: "verificationMethodVerify", verificationMethodResend: "verificationMethodResend" }, providers: [TwoFactorManageService], ngImport: i0__namespace, template: "<fs-label-field>\n  <fs-label>Status</fs-label>\n  <ng-container *ngIf=\"statuses\">\n    <ng-container *ngIf=\"statuses.length === 1\">\n      {{statuses[0]}} verification is enabled\n    </ng-container>\n\n    <ng-container *ngIf=\"statuses.length > 1\">\n      {{statuses.join(', ')}} verifications are enabled\n    </ng-container>\n\n    <ng-container *ngIf=\"statuses.length  === 0\">\n      No verification methods are enabled\n    </ng-container>\n  </ng-container>\n</fs-label-field>", styles: [""], components: [{ type: i3__namespace$4.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3__namespace$4.FsLabelComponent, selector: "fs-label" }], directives: [{ type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    Fs2faManageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faManageComponent, selector: "fs-2fa-manage", inputs: { accountVerify: "accountVerify", defaultCountry: "defaultCountry", verificationMethodTypes: "verificationMethodTypes", verificationMethodsFetch: "verificationMethodsFetch", verificationMethodDelete: "verificationMethodDelete", verificationMethodCreate: "verificationMethodCreate", verificationMethodVerify: "verificationMethodVerify", verificationMethodResend: "verificationMethodResend" }, providers: [TwoFactorManageService], ngImport: i0__namespace, template: "<fs-label-field>\n  <fs-label>Status</fs-label>\n  <ng-container *ngIf=\"statuses\">\n    <ng-container *ngIf=\"statuses.length === 1\">\n      {{statuses[0]}} verification is enabled\n    </ng-container>\n\n    <ng-container *ngIf=\"statuses.length > 1\">\n      {{statuses.join(', ')}} verifications are enabled\n    </ng-container>\n\n    <ng-container *ngIf=\"statuses.length  === 0\">\n      No verification methods are enabled\n    </ng-container>\n  </ng-container>\n</fs-label-field>", styles: [""], components: [{ type: i3__namespace$4.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3__namespace$4.FsLabelComponent, selector: "fs-label" }], directives: [{ type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faManageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1093,6 +1106,8 @@
                     type: i0.Input
                 }], defaultCountry: [{
                     type: i0.Input
+                }], verificationMethodTypes: [{
+                    type: i0.Input
                 }], verificationMethodsFetch: [{
                     type: i0.Input
                 }], verificationMethodDelete: [{