feat(console): u2f (#1080)

* fix user table count

* grpc ge

* move grpc

* u2f

* add u2f funcs

* rm local grpc, u2f dialog

* dialog u2f

* 2fa button

* mfa u2f credentialoptions

* decode base64 to bytearray, id, challenge

* u2f verify

* spinner, remove, attribute col

* delete mfa

* add forcemfa to policy

* add id to remove

* fix: add missing remove u2f in management

* user mgmt u2f delete, login policy

* rm log

* show attr in mgmt user mfa

* add missing id of mfa

* mfa table

* multifaktor for admin, org

* add secondfactor to gen component

* remove circular dependency

* lint

* revert identity prov

* add divider

* login policy lint

* Update console/src/app/modules/policies/login-policy/login-policy.component.html

* Update console/src/app/modules/policies/login-policy/login-policy.component.html

Co-authored-by: Maximilian Peintner <csaq7175@uibk.ac.at>
Co-authored-by: Livio Amstutz <livio.a@gmail.com>

console/src/app/modules/policies/login-policy/login-policy.component.html

@@ -44,8 +44,34 @@
             </mat-slide-toggle>
             <p> {{'POLICY.DATA.ALLOWEXTERNALIDP_DESC' | translate}} </p>
         </div>
+        <div class="row">
+            <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled" ngDefaultControl
+                [(ngModel)]="loginData.forceMfa">
+                {{'POLICY.DATA.FORCEMFA' | translate}}
+            </mat-slide-toggle>
+            <p> {{'POLICY.DATA.FORCEMFA_DESC' | translate}} </p>
+        </div>
     </div>
 
+    <button [disabled]="disabled" class="save-button" (click)="savePolicy()" color="primary" type="submit"
+        mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+
+    <div class="divider"></div>
+
+    <h3 class="subheader">{{ 'MFA.LIST.MULTIFACTORTITLE' | translate }}</h3>
+    <p class="subdesc">{{ 'MFA.LIST.MULTIFACTORDESCRIPTION' | translate }}</p>
+    <app-mfa-table [service]="service" [serviceType]="serviceType"
+        [componentType]="LoginMethodComponentType.MultiFactor"
+        [disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.policy.write' : serviceType == PolicyComponentServiceType.MGMT ? 'org.policy.write' : ''] | hasRole | async) == false">
+    </app-mfa-table>
+
+    <h3 class="subheader">{{ 'MFA.LIST.SECONDFACTORTITLE' | translate }}</h3>
+    <p class="subdesc">{{ 'MFA.LIST.SECONDFACTORDESCRIPTION' | translate }}</p>
+    <app-mfa-table [service]="service" [serviceType]="serviceType"
+        [componentType]="LoginMethodComponentType.SecondFactor"
+        [disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.policy.write' : serviceType == PolicyComponentServiceType.MGMT ? 'org.policy.write' : ''] | hasRole | async) == false">
+    </app-mfa-table>
+
     <h3 class="subheader">{{'LOGINPOLICY.IDPS' | translate}}</h3>
 
     <div class="idps">
@@ -63,9 +89,6 @@
         </div>
     </div>
 
-    <button [disabled]="disabled" class="save-button" (click)="savePolicy()" color="primary" type="submit"
-        mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
-
     <ng-template appHasRole [appHasRole]="['org.idp.read']">
         <h2>{{ 'IDP.LIST.TITLE' | translate }}</h2>
         <p>{{ 'IDP.LIST.DESCRIPTION' | translate }}</p>
@@ -73,4 +96,4 @@
             [disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.idp.write' : serviceType == PolicyComponentServiceType.MGMT ? 'org.idp.write' : ''] | hasRole | async) == false">
         </app-idp-table>
     </ng-template>
-</app-detail-layout>
+</app-detail-layout>

console/src/app/modules/policies/login-policy/login-policy.component.scss

@@ -37,6 +37,11 @@
   width: 100%;
 }
 
+.subdesc {
+  color: var(--grey);
+  font-size: 14px;
+}
+
 .idps {
   display: flex;
   margin: 0 -.5rem;
@@ -93,3 +98,10 @@
     }
   }
 }
+
+.divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--grey);
+  margin: 1rem 0;
+}

console/src/app/modules/policies/login-policy/login-policy.component.ts

@@ -22,6 +22,7 @@ import { ToastService } from 'src/app/services/toast.service';
 
 import { PolicyComponentServiceType } from '../policy-component-types.enum';
 import { AddIdpDialogComponent } from './add-idp-dialog/add-idp-dialog.component';
+import { LoginMethodComponentType } from 'src/app/modules/mfa-table/mfa-table.component';
 
 @Component({
     selector: 'app-login-policy',
@@ -29,6 +30,7 @@ import { AddIdpDialogComponent } from './add-idp-dialog/add-idp-dialog.component
     styleUrls: ['./login-policy.component.scss'],
 })
 export class LoginPolicyComponent implements OnDestroy {
+    public LoginMethodComponentType: any = LoginMethodComponentType;
     public loginData!: LoginPolicyView.AsObject | DefaultLoginPolicyView.AsObject;
 
     private sub: Subscription = new Subscription();
@@ -112,6 +114,8 @@ export class LoginPolicyComponent implements OnDestroy {
                 mgmtreq.setAllowExternalIdp(this.loginData.allowExternalIdp);
                 mgmtreq.setAllowRegister(this.loginData.allowRegister);
                 mgmtreq.setAllowUsernamePassword(this.loginData.allowUsernamePassword);
+                mgmtreq.setForceMfa(this.loginData.forceMfa);
+                // console.log(mgmtreq.toObject());
                 if ((this.loginData as LoginPolicyView.AsObject).pb_default) {
                     return (this.service as ManagementService).CreateLoginPolicy(mgmtreq);
                 } else {
@@ -122,6 +126,9 @@ export class LoginPolicyComponent implements OnDestroy {
                 adminreq.setAllowExternalIdp(this.loginData.allowExternalIdp);
                 adminreq.setAllowRegister(this.loginData.allowRegister);
                 adminreq.setAllowUsernamePassword(this.loginData.allowUsernamePassword);
+                adminreq.setForceMfa(this.loginData.forceMfa);
+                // console.log(adminreq.toObject());
+
                 return (this.service as AdminService).UpdateDefaultLoginPolicy(adminreq);
         }
     }

console/src/app/modules/policies/login-policy/login-policy.module.ts

@@ -17,6 +17,7 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
 import { AddIdpDialogModule } from './add-idp-dialog/add-idp-dialog.module';
 import { LoginPolicyRoutingModule } from './login-policy-routing.module';
 import { LoginPolicyComponent } from './login-policy.component';
+import { MfaTableModule } from 'src/app/modules/mfa-table/mfa-table.module';
 
 @NgModule({
     declarations: [LoginPolicyComponent],
@@ -36,6 +37,7 @@ import { LoginPolicyComponent } from './login-policy.component';
         DetailLayoutModule,
         AddIdpDialogModule,
         IdpTableModule,
+        MfaTableModule,
         MatProgressSpinnerModule,
     ],
 })