@firestitch/2fa 13.1.3 → 13.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/modules/verification/components/2fa-verification/2fa-verification.component.d.ts +3 -3
- package/esm2020/app/modules/code-input/components/code-input/code-input.component.mjs +2 -2
- package/esm2020/app/modules/manage/components/email/email.component.mjs +7 -4
- package/esm2020/app/modules/manage/components/number/number.component.mjs +7 -4
- package/esm2020/app/modules/verification/components/2fa-verification/2fa-verification.component.mjs +17 -20
- package/esm2020/app/modules/verification/components/2fa-verification-code/2fa-verification-code.component.mjs +3 -3
- package/fesm2015/firestitch-2fa.mjs +30 -27
- package/fesm2015/firestitch-2fa.mjs.map +1 -1
- package/fesm2020/firestitch-2fa.mjs +30 -27
- package/fesm2020/firestitch-2fa.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -26,7 +26,7 @@ import * as i3 from '@firestitch/dialog';
|
|
|
26
26
|
import { FsDialogModule } from '@firestitch/dialog';
|
|
27
27
|
import * as i2 from '@firestitch/message';
|
|
28
28
|
import { Subject, of, BehaviorSubject } from 'rxjs';
|
|
29
|
-
import { tap,
|
|
29
|
+
import { tap, finalize, switchMap, filter, takeUntil, map } from 'rxjs/operators';
|
|
30
30
|
import * as i1 from '@firestitch/code-input';
|
|
31
31
|
import { FsCodeInputComponent, FsCodeInputModule } from '@firestitch/code-input';
|
|
32
32
|
import * as i1$1 from '@angular/material/dialog';
|
|
@@ -101,7 +101,7 @@ class Fs2faVerificationCodeComponent {
|
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
103
|
Fs2faVerificationCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: Fs2faVerificationCodeComponent, deps: [{ token: i9.FsFormDirective }], target: i0.ɵɵFactoryTarget.Component });
|
|
104
|
-
Fs2faVerificationCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: Fs2faVerificationCodeComponent, selector: "fs-2fa-verification-code", inputs: { type: "type", recipient: "recipient", codeLength: "codeLength", code: "code" }, outputs: { codeChanged: "codeChanged", codeCompleted: "codeCompleted" }, viewQueries: [{ propertyName: "codeInputComponent", first: true, predicate: CodeInputComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type === VerificationMethodType.Sms\">\n <p class=\"description\">\n A text message with a verification code was just sent to <span style=\"white-space: nowrap;\">{{ recipient }}</span> to verify it's you.\n </p>\n\n <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.Email\">\n <p class=\"description\">\n An email with a verification code was just sent to {{ recipient }} to verify it's you.\n </p>\n <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"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 [codeLength]=\"codeLength\"\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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], viewProviders: [
|
|
104
|
+
Fs2faVerificationCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: Fs2faVerificationCodeComponent, selector: "fs-2fa-verification-code", inputs: { type: "type", recipient: "recipient", codeLength: "codeLength", code: "code" }, outputs: { codeChanged: "codeChanged", codeCompleted: "codeCompleted" }, viewQueries: [{ propertyName: "codeInputComponent", first: true, predicate: CodeInputComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type === VerificationMethodType.Sms\">\n <p class=\"description\">\n A text message with a verification code was just sent to <span style=\"white-space: nowrap;\">{{ recipient }}</span> to verify it's you.\n </p>\n\n <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.Email\">\n <p class=\"description\">\n An email with a verification code was just sent to {{ recipient }} to verify it's you.\n </p>\n <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"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 [codeLength]=\"codeLength\"\n (codeChanged)=\"codeChange($event)\"\n (codeCompleted)=\"codeCompleted.emit($event)\">\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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], viewProviders: [
|
|
105
105
|
{
|
|
106
106
|
provide: ControlContainer,
|
|
107
107
|
useExisting: NgForm,
|
|
@@ -114,7 +114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
114
114
|
provide: ControlContainer,
|
|
115
115
|
useExisting: NgForm,
|
|
116
116
|
},
|
|
117
|
-
], template: "<ng-container *ngIf=\"type === VerificationMethodType.Sms\">\n <p class=\"description\">\n A text message with a verification code was just sent to <span style=\"white-space: nowrap;\">{{ recipient }}</span> to verify it's you.\n </p>\n\n <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.Email\">\n <p class=\"description\">\n An email with a verification code was just sent to {{ recipient }} to verify it's you.\n </p>\n <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"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 [codeLength]=\"codeLength\"\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"] }]
|
|
117
|
+
], template: "<ng-container *ngIf=\"type === VerificationMethodType.Sms\">\n <p class=\"description\">\n A text message with a verification code was just sent to <span style=\"white-space: nowrap;\">{{ recipient }}</span> to verify it's you.\n </p>\n\n <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.Email\">\n <p class=\"description\">\n An email with a verification code was just sent to {{ recipient }} to verify it's you.\n </p>\n <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"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 [codeLength]=\"codeLength\"\n (codeChanged)=\"codeChange($event)\"\n (codeCompleted)=\"codeCompleted.emit($event)\">\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"] }]
|
|
118
118
|
}], ctorParameters: function () { return [{ type: i9.FsFormDirective }]; }, propDecorators: { codeInputComponent: [{
|
|
119
119
|
type: ViewChild,
|
|
120
120
|
args: [CodeInputComponent]
|
|
@@ -198,12 +198,9 @@ class Fs2faVerificationComponent {
|
|
|
198
198
|
return this.verificationMethod.phoneNumber;
|
|
199
199
|
}
|
|
200
200
|
}
|
|
201
|
-
|
|
202
|
-
this.
|
|
203
|
-
|
|
204
|
-
.subscribe((code) => {
|
|
205
|
-
this.code = code;
|
|
206
|
-
});
|
|
201
|
+
codeComplete(code) {
|
|
202
|
+
this.code = code;
|
|
203
|
+
this.codeCompleted.emit(this.code);
|
|
207
204
|
}
|
|
208
205
|
ngOnDestroy() {
|
|
209
206
|
this._destroy$.next();
|
|
@@ -223,8 +220,8 @@ class Fs2faVerificationComponent {
|
|
|
223
220
|
}
|
|
224
221
|
showVerificationMethods() {
|
|
225
222
|
this.getVerificationMethods()
|
|
226
|
-
.
|
|
227
|
-
this._dialog.open(Fs2faVerificationMethodsComponent, {
|
|
223
|
+
.pipe(switchMap((verificationMethods) => {
|
|
224
|
+
return this._dialog.open(Fs2faVerificationMethodsComponent, {
|
|
228
225
|
data: {
|
|
229
226
|
verificationMethod: this.verificationMethod,
|
|
230
227
|
verificationMethods,
|
|
@@ -232,23 +229,23 @@ class Fs2faVerificationComponent {
|
|
|
232
229
|
},
|
|
233
230
|
})
|
|
234
231
|
.afterClosed()
|
|
235
|
-
.pipe(filter((verificationMethod) => !!verificationMethod))
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
232
|
+
.pipe(filter((verificationMethod) => !!verificationMethod));
|
|
233
|
+
}))
|
|
234
|
+
.subscribe((verificationMethod) => {
|
|
235
|
+
this.verificationMethod = verificationMethod;
|
|
236
|
+
this.code = '';
|
|
237
|
+
this._cdRef.markForCheck();
|
|
238
|
+
setTimeout(() => {
|
|
239
|
+
this.verificationCodeComponent.focus();
|
|
243
240
|
});
|
|
244
241
|
});
|
|
245
242
|
}
|
|
246
243
|
}
|
|
247
244
|
Fs2faVerificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: Fs2faVerificationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i3.FsDialog }, { token: i2.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
|
|
248
|
-
Fs2faVerificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: { verificationMethod: "verificationMethod", resend: "resend", showTrustedDevice: "showTrustedDevice", trustDevice: "trustDevice", codeLength: "codeLength", trustDays: "trustDays", formatRecipient: "formatRecipient", getVerificationMethods: "getVerificationMethods", selectVerificationMethod: "selectVerificationMethod" }, outputs: { verified: "verified", codeChanged: "codeChanged", codeCompleted: "codeCompleted", trustDeviceChange: "trustDeviceChange" }, viewQueries: [{ propertyName: "verificationCodeComponent", first: true, predicate: Fs2faVerificationCodeComponent, descendants: true }], ngImport: i0, template: "<div class=\"code-container\">\n <fs-2fa-verification-code\n [recipient]=\"(formatRecipient && verificationMethod.type === VerificationMethodType.Sms) ? (recipient | fsPhone) : recipient\"\n [type]=\"verificationMethod.type\"\n [code]=\"code\"\n [codeLength]=\"codeLength\"\n (codeChanged)=\"codeChanged.emit($event)\"\n (codeCompleted)=\"
|
|
245
|
+
Fs2faVerificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: { verificationMethod: "verificationMethod", resend: "resend", showTrustedDevice: "showTrustedDevice", trustDevice: "trustDevice", codeLength: "codeLength", trustDays: "trustDays", formatRecipient: "formatRecipient", getVerificationMethods: "getVerificationMethods", selectVerificationMethod: "selectVerificationMethod" }, outputs: { verified: "verified", codeChanged: "codeChanged", codeCompleted: "codeCompleted", trustDeviceChange: "trustDeviceChange" }, viewQueries: [{ propertyName: "verificationCodeComponent", first: true, predicate: Fs2faVerificationCodeComponent, descendants: true }], ngImport: i0, template: "<div class=\"code-container\">\n <fs-2fa-verification-code\n [recipient]=\"(formatRecipient && verificationMethod.type === VerificationMethodType.Sms) ? (recipient | fsPhone) : recipient\"\n [type]=\"verificationMethod.type\"\n [code]=\"code\"\n [codeLength]=\"codeLength\"\n (codeChanged)=\"codeChanged.emit($event)\"\n (codeCompleted)=\"codeComplete($event)\">\n </fs-2fa-verification-code>\n</div>\n\n<div class=\"additional\">\n <div \n class=\"trust-device\"\n *ngIf=\"showTrustedDevice\">\n <mat-checkbox\n name=\"trust-device\"\n [(ngModel)]=\"trustDevice\"\n (ngModelChange)=\"trustDeviceChange.emit($event)\">\n <div class=\"small\">\n Bypass verification \n <ng-container *ngIf=\"trustDays\">for {{trustDays}} days</ng-container> \n <ng-container *ngIf=\"!trustDays\">for future signins</ng-container> \n unless cookies are cleared\n </div>\n </mat-checkbox>\n </div>\n</div>", styles: [":host ::ng-deep .mat-checkbox{margin:2px 0}:host ::ng-deep .mat-checkbox .mat-checkbox-label{line-height:normal}:host ::ng-deep .mat-checkbox .mat-checkbox-layout{white-space:normal}.code-container{text-align:center}.additional{display:flex;justify-content:space-between;align-items:center;margin:4px 0 5px}.additional small{color:inherit}.additional .resend{cursor:pointer;text-transform:none}.additional .resend mat-spinner{display:inline-block;vertical-align:middle}\n"], components: [{ type: Fs2faVerificationCodeComponent, selector: "fs-2fa-verification-code", inputs: ["type", "recipient", "codeLength", "code"], outputs: ["codeChanged", "codeCompleted"] }, { type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i9$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], pipes: { "fsPhone": i8$1.FsPhonePipe }, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
249
246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: Fs2faVerificationComponent, decorators: [{
|
|
250
247
|
type: Component,
|
|
251
|
-
args: [{ selector: 'fs-2fa-verification', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class=\"code-container\">\n <fs-2fa-verification-code\n [recipient]=\"(formatRecipient && verificationMethod.type === VerificationMethodType.Sms) ? (recipient | fsPhone) : recipient\"\n [type]=\"verificationMethod.type\"\n [code]=\"code\"\n [codeLength]=\"codeLength\"\n (codeChanged)=\"codeChanged.emit($event)\"\n (codeCompleted)=\"
|
|
248
|
+
args: [{ selector: 'fs-2fa-verification', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class=\"code-container\">\n <fs-2fa-verification-code\n [recipient]=\"(formatRecipient && verificationMethod.type === VerificationMethodType.Sms) ? (recipient | fsPhone) : recipient\"\n [type]=\"verificationMethod.type\"\n [code]=\"code\"\n [codeLength]=\"codeLength\"\n (codeChanged)=\"codeChanged.emit($event)\"\n (codeCompleted)=\"codeComplete($event)\">\n </fs-2fa-verification-code>\n</div>\n\n<div class=\"additional\">\n <div \n class=\"trust-device\"\n *ngIf=\"showTrustedDevice\">\n <mat-checkbox\n name=\"trust-device\"\n [(ngModel)]=\"trustDevice\"\n (ngModelChange)=\"trustDeviceChange.emit($event)\">\n <div class=\"small\">\n Bypass verification \n <ng-container *ngIf=\"trustDays\">for {{trustDays}} days</ng-container> \n <ng-container *ngIf=\"!trustDays\">for future signins</ng-container> \n unless cookies are cleared\n </div>\n </mat-checkbox>\n </div>\n</div>", styles: [":host ::ng-deep .mat-checkbox{margin:2px 0}:host ::ng-deep .mat-checkbox .mat-checkbox-label{line-height:normal}:host ::ng-deep .mat-checkbox .mat-checkbox-layout{white-space:normal}.code-container{text-align:center}.additional{display:flex;justify-content:space-between;align-items:center;margin:4px 0 5px}.additional small{color:inherit}.additional .resend{cursor:pointer;text-transform:none}.additional .resend mat-spinner{display:inline-block;vertical-align:middle}\n"] }]
|
|
252
249
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i3.FsDialog }, { type: i2.FsMessage }]; }, propDecorators: { verificationCodeComponent: [{
|
|
253
250
|
type: ViewChild,
|
|
254
251
|
args: [Fs2faVerificationCodeComponent]
|
|
@@ -595,9 +592,12 @@ class EmailComponent {
|
|
|
595
592
|
this.default = !this.twoFactorManageService.hasVerificationMethods;
|
|
596
593
|
}
|
|
597
594
|
codeCompleted() {
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
595
|
+
//Legacy support
|
|
596
|
+
setTimeout(() => {
|
|
597
|
+
if (!this.form.submitting) {
|
|
598
|
+
this.form.triggerSubmit();
|
|
599
|
+
}
|
|
600
|
+
});
|
|
601
601
|
}
|
|
602
602
|
codeChanged(code) {
|
|
603
603
|
this.code = code;
|
|
@@ -658,9 +658,12 @@ class NumberComponent {
|
|
|
658
658
|
this.default = !this.twoFactorManageService.hasVerificationMethods;
|
|
659
659
|
}
|
|
660
660
|
codeCompleted() {
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
661
|
+
//Legacy support
|
|
662
|
+
setTimeout(() => {
|
|
663
|
+
if (!this.form.submitting) {
|
|
664
|
+
this.form.triggerSubmit();
|
|
665
|
+
}
|
|
666
|
+
});
|
|
664
667
|
}
|
|
665
668
|
codeChanged(code) {
|
|
666
669
|
this.code = code;
|