org 2fa setting for duo

src/app/app-routing.module.ts

@@ -28,6 +28,9 @@ import { PeopleComponent as OrgPeopleComponent } from './organizations/manage/pe
 import { AccountComponent as OrgAccountComponent } from './organizations/settings/account.component';
 import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
 import { SettingsComponent as OrgSettingsComponent } from './organizations/settings/settings.component';
+import {
+    TwoFactorSetupComponent as OrgTwoFactorSetupComponent,
+} from './organizations/settings/two-factor-setup.component';
 
 import { ExportComponent as OrgExportComponent } from './organizations/tools/export.component';
 import { ImportComponent as OrgImportComponent } from './organizations/tools/import.component';
@@ -188,6 +191,7 @@ const routes: Routes = [
                 children: [
                     { path: '', pathMatch: 'full', redirectTo: 'account' },
                     { path: 'account', component: OrgAccountComponent, data: { titleId: 'myOrganization' } },
+                    { path: 'two-factor', component: OrgTwoFactorSetupComponent, data: { titleId: 'twoStepLogin' } },
                     {
                         path: 'billing',
                         component: OrganizationBillingComponent,

src/app/app.module.ts

@@ -56,6 +56,9 @@ import { AdjustSeatsComponent } from './organizations/settings/adjust-seats.comp
 import { DeleteOrganizationComponent } from './organizations/settings/delete-organization.component';
 import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
 import { SettingsComponent as OrgSettingComponent } from './organizations/settings/settings.component';
+import {
+    TwoFactorSetupComponent as OrgTwoFactorSetupComponent,
+} from './organizations/settings/two-factor-setup.component';
 
 import { ExportComponent as OrgExportComponent } from './organizations/tools/export.component';
 import { ImportComponent as OrgImportComponent } from './organizations/tools/import.component';
@@ -210,6 +213,7 @@ import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
         OrgPeopleComponent,
         OrgSettingComponent,
         OrgToolsComponent,
+        OrgTwoFactorSetupComponent,
         OrgUserAddEditComponent,
         OrgUserGroupsComponent,
         OrganizationsComponent,

src/app/organizations/settings/settings.component.html

@@ -10,6 +10,9 @@
                     <a routerLink="billing" class="list-group-item" routerLinkActive="active">
                         {{'billingAndLicensing' | i18n}}
                     </a>
+                    <a routerLink="two-factor" class="list-group-item" routerLinkActive="active" *ngIf="access2fa">
+                        {{'twoStepLogin' | i18n}}
+                    </a>
                 </div>
             </div>
         </div>

src/app/organizations/settings/settings.component.ts

@@ -1,7 +1,21 @@
 import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { UserService } from 'jslib/abstractions/user.service';
 
 @Component({
     selector: 'app-org-settings',
     templateUrl: 'settings.component.html',
 })
-export class SettingsComponent { }
+export class SettingsComponent {
+    access2fa = false;
+
+    constructor(private route: ActivatedRoute, private userService: UserService) { }
+
+    ngOnInit() {
+        this.route.parent.params.subscribe(async (params) => {
+            const organization = await this.userService.getOrganization(params.organizationId);
+            this.access2fa = organization.use2fa;
+        });
+    }
+}

src/app/organizations/settings/two-factor-setup.component.ts

@@ -0,0 +1,58 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { TokenService } from 'jslib/abstractions/token.service';
+
+import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
+
+import { TwoFactorDuoComponent } from '../../settings/two-factor-duo.component';
+import { TwoFactorSetupComponent as BaseTwoFactorSetupComponent } from '../../settings/two-factor-setup.component';
+
+@Component({
+    selector: 'app-two-factor-setup',
+    templateUrl: '../../settings/two-factor-setup.component.html',
+})
+export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
+    organizationId: string;
+
+    constructor(apiService: ApiService, tokenService: TokenService,
+        componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
+        private route: ActivatedRoute) {
+        super(apiService, tokenService, componentFactoryResolver, messagingService);
+    }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organizationId = params.organizationId;
+            await super.ngOnInit();
+        });
+    }
+
+    manage(type: TwoFactorProviderType) {
+        switch (type) {
+            case TwoFactorProviderType.OrganizationDuo:
+                const duoComp = this.openModal(this.duoModalRef, TwoFactorDuoComponent);
+                duoComp.type = TwoFactorProviderType.OrganizationDuo;
+                duoComp.organizationId = this.organizationId;
+                duoComp.onUpdated.subscribe((enabled: boolean) => {
+                    this.updateStatus(enabled, TwoFactorProviderType.OrganizationDuo);
+                });
+                break;
+            default:
+                break;
+        }
+    }
+
+    protected getTwoFactorProviders() {
+        return this.apiService.getTwoFactorOrganizationProviders(this.organizationId);
+    }
+
+    protected filterProvider(type: TwoFactorProviderType) {
+        return type !== TwoFactorProviderType.OrganizationDuo;
+    }
+}

src/app/settings/two-factor-authenticator.component.html

@@ -10,7 +10,7 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <app-two-factor-verify [type]="twoFactorProviderType.Authenticator" (onAuthed)="auth($event)" *ngIf="!authed">
+            <app-two-factor-verify [organizationId]="organizationId" [type]="type" (onAuthed)="auth($event)" *ngIf="!authed">
             </app-two-factor-verify>
             <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="authed">
                 <div class="modal-body">

src/app/settings/two-factor-authenticator.component.ts

@@ -24,6 +24,7 @@ import { TwoFactorBaseComponent } from './two-factor-base.component';
     templateUrl: 'two-factor-authenticator.component.html',
 })
 export class TwoFactorAuthenticatorComponent extends TwoFactorBaseComponent implements OnInit, OnDestroy {
+    type = TwoFactorProviderType.Authenticator;
     key: string;
     token: string;
     formPromise: Promise<any>;
@@ -33,8 +34,7 @@ export class TwoFactorAuthenticatorComponent extends TwoFactorBaseComponent impl
     constructor(apiService: ApiService, i18nService: I18nService,
         analytics: Angulartics2, toasterService: ToasterService,
         private userService: UserService, platformUtilsService: PlatformUtilsService) {
-        super(apiService, i18nService, analytics, toasterService, platformUtilsService,
-            TwoFactorProviderType.Authenticator);
+        super(apiService, i18nService, analytics, toasterService, platformUtilsService);
         this.qrScript = window.document.createElement('script');
         this.qrScript.src = 'scripts/qrious.min.js';
         this.qrScript.async = true;

src/app/settings/two-factor-base.component.ts

@@ -16,6 +16,8 @@ import { TwoFactorProviderRequest } from 'jslib/models/request/twoFactorProvider
 export abstract class TwoFactorBaseComponent {
     @Output() onUpdated = new EventEmitter<boolean>();
 
+    type: TwoFactorProviderType;
+    organizationId: string;
     twoFactorProviderType = TwoFactorProviderType;
     enabled = false;
     authed = false;
@@ -24,7 +26,7 @@ export abstract class TwoFactorBaseComponent {
 
     constructor(protected apiService: ApiService, protected i18nService: I18nService,
         protected analytics: Angulartics2, protected toasterService: ToasterService,
-        protected platformUtilsService: PlatformUtilsService, private type: TwoFactorProviderType) { }
+        protected platformUtilsService: PlatformUtilsService) { }
 
     protected auth(authResponse: any) {
         this.masterPasswordHash = authResponse.masterPasswordHash;
@@ -52,7 +54,11 @@ export abstract class TwoFactorBaseComponent {
             const request = new TwoFactorProviderRequest();
             request.masterPasswordHash = this.masterPasswordHash;
             request.type = this.type;
-            promise = this.apiService.putTwoFactorDisable(request);
+            if (this.organizationId != null) {
+                promise = this.apiService.putTwoFactorOrganizationDisable(this.organizationId, request);
+            } else {
+                promise = this.apiService.putTwoFactorDisable(request);
+            }
             await promise;
             this.enabled = false;
             this.analytics.eventTrack.next({

src/app/settings/two-factor-duo.component.html

@@ -10,7 +10,7 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <app-two-factor-verify [type]="twoFactorProviderType.Duo" (onAuthed)="auth($event)" *ngIf="!authed">
+            <app-two-factor-verify [organizationId]="organizationId" [type]="type" (onAuthed)="auth($event)" *ngIf="!authed">
             </app-two-factor-verify>
             <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="authed">
                 <div class="modal-body">

src/app/settings/two-factor-duo.component.ts

@@ -18,6 +18,7 @@ import { TwoFactorBaseComponent } from './two-factor-base.component';
     templateUrl: 'two-factor-duo.component.html',
 })
 export class TwoFactorDuoComponent extends TwoFactorBaseComponent {
+    type = TwoFactorProviderType.Duo;
     ikey: string;
     skey: string;
     host: string;
@@ -26,8 +27,7 @@ export class TwoFactorDuoComponent extends TwoFactorBaseComponent {
     constructor(apiService: ApiService, i18nService: I18nService,
         analytics: Angulartics2, toasterService: ToasterService,
         platformUtilsService: PlatformUtilsService) {
-        super(apiService, i18nService, analytics, toasterService, platformUtilsService,
-            TwoFactorProviderType.Duo);
+        super(apiService, i18nService, analytics, toasterService, platformUtilsService);
     }
 
     auth(authResponse: any) {
@@ -51,7 +51,11 @@ export class TwoFactorDuoComponent extends TwoFactorBaseComponent {
         request.host = this.host;
 
         return super.enable(async () => {
-            this.formPromise = this.apiService.putTwoFactorDuo(request);
+            if (this.organizationId != null) {
+                this.formPromise = this.apiService.putTwoFactorOrganizationDuo(this.organizationId, request);
+            } else {
+                this.formPromise = this.apiService.putTwoFactorDuo(request);
+            }
             const response = await this.formPromise;
             await this.processResponse(response);
         });

src/app/settings/two-factor-email.component.html

@@ -10,7 +10,7 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <app-two-factor-verify [type]="twoFactorProviderType.Email" (onAuthed)="auth($event)" *ngIf="!authed">
+            <app-two-factor-verify [organizationId]="organizationId" [type]="type" (onAuthed)="auth($event)" *ngIf="!authed">
             </app-two-factor-verify>
             <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="authed">
                 <div class="modal-body">

src/app/settings/two-factor-email.component.ts

@@ -21,6 +21,7 @@ import { TwoFactorBaseComponent } from './two-factor-base.component';
     templateUrl: 'two-factor-email.component.html',
 })
 export class TwoFactorEmailComponent extends TwoFactorBaseComponent {
+    type = TwoFactorProviderType.Email;
     email: string;
     token: string;
     sentEmail: string;
@@ -30,8 +31,7 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent {
     constructor(apiService: ApiService, i18nService: I18nService,
         analytics: Angulartics2, toasterService: ToasterService,
         platformUtilsService: PlatformUtilsService, private userService: UserService) {
-        super(apiService, i18nService, analytics, toasterService, platformUtilsService,
-            TwoFactorProviderType.Email);
+        super(apiService, i18nService, analytics, toasterService, platformUtilsService);
     }
 
     auth(authResponse: any) {

src/app/settings/two-factor-recovery.component.html

@@ -10,7 +10,7 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <app-two-factor-verify [type]="-1" (onAuthed)="auth($event)" *ngIf="!authed">
+            <app-two-factor-verify [organizationId]="organizationId" [type]="type" (onAuthed)="auth($event)" *ngIf="!authed">
             </app-two-factor-verify>
             <ng-container *ngIf="authed">
                 <div class="modal-body text-center">

src/app/settings/two-factor-recovery.component.ts

@@ -11,6 +11,7 @@ import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
     templateUrl: 'two-factor-recovery.component.html',
 })
 export class TwoFactorRecoveryComponent {
+    type = -1;
     code: string;
     authed: boolean;
     twoFactorProviderType = TwoFactorProviderType;

src/app/settings/two-factor-setup.component.html

@@ -1,11 +1,13 @@
 <div class="page-header">
     <h1>{{'twoStepLogin' | i18n}}</h1>
 </div>
-<app-callout type="warning">
+<p *ngIf="!organizationId">{{'twoStepLoginDesc' | i18n}}</p>
+<p *ngIf="organizationId">{{'twoStepLoginOrganizationDesc' | i18n}}</p>
+<app-callout type="warning" *ngIf="!organizationId">
     <p>{{'twoStepLoginRecoveryWarning' | i18n}}</p>
     <button type="button" class="btn btn-outline-secondary" (click)="recoveryCode()">{{'viewRecoveryCode' | i18n}}</button>
 </app-callout>
-<h2 class="mt-5">
+<h2 [ngClass]="{'mt-5':!organizationId}">
     {{'providers' | i18n}}
     <small *ngIf="loading">
         <i class="fa fa-spinner fa-spin fa-fw text-muted" title="{{'loading' | i18n}}"></i>

src/app/settings/two-factor-setup.component.ts

@@ -42,8 +42,8 @@ export class TwoFactorSetupComponent implements OnInit {
 
     private modal: ModalComponent = null;
 
-    constructor(private apiService: ApiService, private tokenService: TokenService,
-        private componentFactoryResolver: ComponentFactoryResolver, private messagingService: MessagingService) { }
+    constructor(protected apiService: ApiService, protected tokenService: TokenService,
+        protected componentFactoryResolver: ComponentFactoryResolver, protected messagingService: MessagingService) { }
 
     async ngOnInit() {
         this.premium = this.tokenService.getPremium();
@@ -54,7 +54,7 @@ export class TwoFactorSetupComponent implements OnInit {
             }
 
             const p = (TwoFactorProviders as any)[key];
-            if (p.type === TwoFactorProviderType.OrganizationDuo) {
+            if (this.filterProvider(p.type)) {
                 continue;
             }
 
@@ -74,7 +74,7 @@ export class TwoFactorSetupComponent implements OnInit {
 
     async load() {
         this.loading = true;
-        const providerList = await this.apiService.getTwoFactorProviders();
+        const providerList = await this.getTwoFactorProviders();
         providerList.data.forEach((p) => {
             this.providers.forEach((p2) => {
                 if (p.type === p2.type) {
@@ -134,7 +134,15 @@ export class TwoFactorSetupComponent implements OnInit {
         }
     }
 
-    private openModal<T>(ref: ViewContainerRef, type: Type<T>): T {
+    protected getTwoFactorProviders() {
+        return this.apiService.getTwoFactorProviders();
+    }
+
+    protected filterProvider(type: TwoFactorProviderType) {
+        return type === TwoFactorProviderType.OrganizationDuo;
+    }
+
+    protected openModal<T>(ref: ViewContainerRef, type: Type<T>): T {
         if (this.modal != null) {
             this.modal.close();
         }
@@ -149,7 +157,7 @@ export class TwoFactorSetupComponent implements OnInit {
         return childComponent;
     }
 
-    private updateStatus(enabled: boolean, type: TwoFactorProviderType) {
+    protected updateStatus(enabled: boolean, type: TwoFactorProviderType) {
         if (!enabled && this.modal != null) {
             this.modal.close();
         }

src/app/settings/two-factor-u2f.component.html

@@ -10,7 +10,7 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <app-two-factor-verify [type]="twoFactorProviderType.U2f" (onAuthed)="auth($event)" *ngIf="!authed">
+            <app-two-factor-verify [organizationId]="organizationId" [type]="type" (onAuthed)="auth($event)" *ngIf="!authed">
             </app-two-factor-verify>
             <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="authed">
                 <div class="modal-body">

src/app/settings/two-factor-u2f.component.ts

@@ -22,6 +22,7 @@ import { TwoFactorBaseComponent } from './two-factor-base.component';
     templateUrl: 'two-factor-u2f.component.html',
 })
 export class TwoFactorU2fComponent extends TwoFactorBaseComponent implements OnInit, OnDestroy {
+    type = TwoFactorProviderType.U2f;
     u2fChallenge: any;
     u2fError: boolean;
     u2fListening: boolean;
@@ -34,8 +35,7 @@ export class TwoFactorU2fComponent extends TwoFactorBaseComponent implements OnI
     constructor(apiService: ApiService, i18nService: I18nService,
         analytics: Angulartics2, toasterService: ToasterService,
         platformUtilsService: PlatformUtilsService) {
-        super(apiService, i18nService, analytics, toasterService, platformUtilsService,
-            TwoFactorProviderType.U2f);
+        super(apiService, i18nService, analytics, toasterService, platformUtilsService);
         this.u2fScript = window.document.createElement('script');
         this.u2fScript.src = 'scripts/u2f.js';
         this.u2fScript.async = true;

src/app/settings/two-factor-verify.component.ts

@@ -20,10 +20,9 @@ import { PasswordVerificationRequest } from 'jslib/models/request/passwordVerifi
     templateUrl: 'two-factor-verify.component.html',
 })
 export class TwoFactorVerifyComponent {
-    @Input()
-    type: TwoFactorProviderType;
-    @Output()
-    onAuthed = new EventEmitter<any>();
+    @Input() type: TwoFactorProviderType;
+    @Input() organizationId: string;
+    @Output() onAuthed = new EventEmitter<any>();
 
     masterPassword: string;
     formPromise: Promise<any>;
@@ -50,7 +49,12 @@ export class TwoFactorVerifyComponent {
                     this.formPromise = this.apiService.getTwoFactorRecover(request);
                     break;
                 case TwoFactorProviderType.Duo:
-                    this.formPromise = this.apiService.getTwoFactorDuo(request);
+                case TwoFactorProviderType.OrganizationDuo:
+                    if (this.organizationId != null) {
+                        this.formPromise = this.apiService.getTwoFactorOrganizationDuo(this.organizationId, request);
+                    } else {
+                        this.formPromise = this.apiService.getTwoFactorDuo(request);
+                    }
                     break;
                 case TwoFactorProviderType.Email:
                     this.formPromise = this.apiService.getTwoFactorEmail(request);

src/app/settings/two-factor-yubikey.component.html

@@ -10,7 +10,7 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <app-two-factor-verify [type]="twoFactorProviderType.Yubikey" (onAuthed)="auth($event)" *ngIf="!authed">
+            <app-two-factor-verify [organizationId]="organizationId" [type]="type" (onAuthed)="auth($event)" *ngIf="!authed">
             </app-two-factor-verify>
             <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="authed">
                 <div class="modal-body">

src/app/settings/two-factor-yubikey.component.ts

@@ -19,6 +19,7 @@ import { TwoFactorBaseComponent } from './two-factor-base.component';
     templateUrl: 'two-factor-yubikey.component.html',
 })
 export class TwoFactorYubiKeyComponent extends TwoFactorBaseComponent {
+    type = TwoFactorProviderType.Yubikey;
     keys: any[];
     nfc = false;
 
@@ -28,8 +29,7 @@ export class TwoFactorYubiKeyComponent extends TwoFactorBaseComponent {
     constructor(apiService: ApiService, i18nService: I18nService,
         analytics: Angulartics2, toasterService: ToasterService,
         platformUtilsService: PlatformUtilsService) {
-        super(apiService, i18nService, analytics, toasterService, platformUtilsService,
-            TwoFactorProviderType.Yubikey);
+        super(apiService, i18nService, analytics, toasterService, platformUtilsService);
     }
 
     auth(authResponse: any) {