fix(console): idp name and type, disable toggle if not allowed (#1613)

* fix: idp type

* disable toggle

* restrict access, i18n, fix auth factor remove

* retention in days instead of hours

* chore(deps): bump @types/google-protobuf in /console (#1607)

Bumps [@types/google-protobuf](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/google-protobuf) from 3.7.4 to 3.15.0.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/google-protobuf)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @types/node from 14.14.37 to 14.14.41 in /console (#1602)

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 14.14.37 to 14.14.41.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @angular/cli from 11.2.8 to 11.2.9 in /console (#1600)

Bumps [@angular/cli](https://github.com/angular/angular-cli) from 11.2.8 to 11.2.9.
- [Release notes](https://github.com/angular/angular-cli/releases)
- [Commits](https://github.com/angular/angular-cli/compare/v11.2.8...v11.2.9)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @angular-devkit/build-angular in /console (#1599)

Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1102.8 to 0.1102.9.
- [Release notes](https://github.com/angular/angular-cli/releases)
- [Commits](https://github.com/angular/angular-cli/commits)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Max Peintner <max@caos.ch>

* chore(deps-dev): bump @angular/language-service in /console (#1598)

Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 11.2.9 to 11.2.10.
- [Release notes](https://github.com/angular/angular/releases)
- [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md)
- [Commits](https://github.com/angular/angular/commits/11.2.10/packages/language-service)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* update deps, remove zitadel prefix

* min-width button

* lint styles

* downgrade

* downgrade

* down

* lock custom

* lock

* pack

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

console/src/app/modules/features/features.component.html

@@ -49,7 +49,7 @@
         <div class="row">
             <span class="left-desc">{{'FEATURES.DATA.AUDITLOGRETENTION' | translate}}</span>
             <span class="fill-space"></span>
-            <span>{{features.auditLogRetention | timestampToRetention }} {{'FEATURES.RETENTIONHOURS' |
+            <span>{{features.auditLogRetention | timestampToRetention }} {{'FEATURES.RETENTIONDAYS' |
                 translate}}</span>
         </div>
         <div class="row">

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

@@ -28,13 +28,24 @@
                 [(ngModel)]="loginData.allowUsernamePassword">
                 {{'POLICY.DATA.ALLOWUSERNAMEPASSWORD' | translate}}
             </mat-slide-toggle>
+
+            <ng-container
+                *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.username_login'] | hasFeature | async) == false; else usernameInfo">
+                <cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
+                    'login_policy.username_login'})}}
+                </cnsl-info-section>
+            </ng-container>
+
+            <ng-template #usernameInfo>
                 <cnsl-info-section class="info">
                     {{'POLICY.DATA.ALLOWUSERNAMEPASSWORD_DESC' | translate}}
                 </cnsl-info-section>
+            </ng-template>
         </div>
         <div class="row">
-            <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled" ngDefaultControl
+            <mat-slide-toggle class="toggle" color="primary"
-                [(ngModel)]="loginData.allowRegister">
+                [disabled]="disabled || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.registration'] | hasFeature | async) == false)"
+                ngDefaultControl [(ngModel)]="loginData.allowRegister">
                 {{'POLICY.DATA.ALLOWREGISTER' | translate}}
             </mat-slide-toggle>
 
@@ -55,18 +66,34 @@
                 [(ngModel)]="loginData.allowExternalIdp">
                 {{'POLICY.DATA.ALLOWEXTERNALIDP' | translate}}
             </mat-slide-toggle>
+            <ng-container
+                *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false; else idpInfo">
+                <cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
+                    'login_policy.idp'})}}
+                </cnsl-info-section>
+            </ng-container>
+            <ng-template #idpInfo>
                 <cnsl-info-section class="info">
                     {{'POLICY.DATA.ALLOWEXTERNALIDP_DESC' | translate}}
                 </cnsl-info-section>
+            </ng-template>
         </div>
         <div class="row">
             <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled" ngDefaultControl
                 [(ngModel)]="loginData.forceMfa">
                 {{'POLICY.DATA.FORCEMFA' | translate}}
             </mat-slide-toggle>
+            <ng-container
+                *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false; else factorsInfo">
+                <cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
+                    'login_policy.factors'})}}
+                </cnsl-info-section>
+            </ng-container>
+            <ng-template #factorsInfo>
                 <cnsl-info-section class="info">
                     {{'POLICY.DATA.FORCEMFA_DESC' | translate}}
                 </cnsl-info-section>
+            </ng-template>
         </div>
         <div class="row">
 
@@ -142,8 +169,8 @@
                 <img src="../../../assets/images/google.png"
                     *ngIf="idp.stylingType == IDPStylingType.STYLING_TYPE_GOOGLE" alt="google" />
                 <div>
-                    <span class="name">{{idp.name}}</span>
+                    <span class="name">{{idp.idpName}}</span>
-                    <span class="meta-info">{{ 'IDP.TYPE' | translate }}: {{ 'IDP.OWNERTYPES.'+idp.idpType |
+                    <span class="meta-info">{{ 'IDP.TYPE' | translate }}: {{ 'IDP.TYPES.'+idp.idpType |
                         translate
                         }}</span>
                     <span class="meta-info">{{ 'IDP.ID' | translate }}: {{idp.idpId}}</span>

console/src/app/pages/iam/iam.component.scss

@@ -57,4 +57,8 @@ h2 {
   .fill-space {
     flex: 1;
   }
+
+  button {
+    min-width: 200px;
+  }
 }

console/src/app/pages/orgs/org-detail/org-detail.component.html

@@ -6,7 +6,9 @@
             <app-card title="{{ 'ORG.DOMAINS.TITLE' | translate }}"
                 description="{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}">
 
-                <button (click)="loadDomains()" card-actions mat-icon-button><mat-icon>refresh</mat-icon></button>
+                <button (click)="loadDomains()" card-actions mat-icon-button>
+                    <mat-icon>refresh</mat-icon>
+                </button>
 
                 <div *ngFor="let domain of domains" class="domain">
                     <span *ngIf="canwrite$ | async" (click)="verifyDomain(domain)"
@@ -30,22 +32,24 @@
             </app-card>
         </ng-container>
 
+        <ng-container *ngIf="['features.read'] | hasRole | async">
             <h2>{{'FEATURES.TITLE' | translate}}</h2>
             <p class="top-desc">{{'FEATURES.DESCRIPTION' | translate}}</p>
             <div *ngIf="features" class="tier">
                 <mat-icon class="icon">stars</mat-icon>
                 <div class="text" *ngIf="features.tier">
-                <p class="title"><strong>ZITADEL {{features.tier.name}}</strong></p>
+                    <p class="title"><strong>{{features.tier.name}}</strong></p>
                     <p>{{features.tier?.description}}</p>
                     <p>{{'FEATURES.TIERSTATES.'+features.tier.state | translate}}</p>
                     <p>{{features.tier?.statusInfo}}</p>
                 </div>
                 <span class="fill-space"></span>
-            <a class="ext" href="https://zitadel.ch/pricing" target="_blank"><i
+                <a *ngIf="['features.write'] | hasRole | async" class="ext" href="https://zitadel.ch/pricing"
-                    class="las la-external-link-alt"></i></a>
+                    target="_blank"><i class="las la-external-link-alt"></i></a>
 
                 <button mat-raised-button [routerLink]="['features']">{{'FEATURES.BTN-EDIT' | translate}}</button>
             </div>
+        </ng-container>
 
         <ng-template appHasRole [appHasRole]="['policy.read']">
             <app-policy-grid [type]="PolicyGridType.ORG"></app-policy-grid>

console/src/app/pages/orgs/org-detail/org-detail.component.scss

@@ -57,6 +57,10 @@ h2 {
   .fill-space {
     flex: 1;
   }
+
+  button {
+    min-width: 200px;
+  }
 }
 
 .domain {

console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.ts

@@ -79,7 +79,7 @@ export class UserMfaComponent implements OnInit, OnDestroy {
                         this.toast.showError(error);
                     });
                 } else if (factor.u2f) {
-                    this.mgmtUserService.removeHumanAuthFactorU2F(this.user.id).then(() => {
+                    this.mgmtUserService.removeHumanAuthFactorU2F(this.user.id, factor.u2f.id).then(() => {
                         this.toast.showInfo('USER.TOAST.U2FREMOVED', true);
 
                         const index = this.dataSource.data.findIndex(mfa => !!mfa.u2f);

console/src/app/pipes/timestamp-to-retention-pipe/timestamp-to-retention.pipe.ts

@@ -18,7 +18,7 @@ export class TimestampToRetentionPipe implements PipeTransform {
     if (date?.seconds !== undefined && date?.nanos !== undefined) {
       const ms = (date.seconds * 1000 + date.nanos / 1000 / 1000);
       const mins = ms / 1000 / 60;
-            return mins / 60;
+      return mins / 60 / 24;
     }
   }
 }

console/src/app/services/mgmt.service.ts

@@ -913,9 +913,10 @@ export class ManagementService {
         return this.grpcService.mgmt.removeHumanAuthFactorOTP(req, null).then(resp => resp.toObject());
     }
 
-    public removeHumanAuthFactorU2F(userId: string): Promise<RemoveHumanAuthFactorU2FResponse.AsObject> {
+    public removeHumanAuthFactorU2F(userId: string, tokenId: string): Promise<RemoveHumanAuthFactorU2FResponse.AsObject> {
         const req = new RemoveHumanAuthFactorU2FRequest();
         req.setUserId(userId);
+        req.setTokenId(tokenId);
         return this.grpcService.mgmt.removeHumanAuthFactorU2F(req, null).then(resp => resp.toObject());
     }
 

console/src/assets/i18n/de.json

@@ -583,8 +583,8 @@
   },
   "FEATURES": {
     "TITLE": "Features",
-    "DESCRIPTION": "Hier können Sie Funktionen von ZITADEL auf Basis von Ihrer Preisstufe aktivieren sowie deaktivieren.",
+    "DESCRIPTION": "Hier können Sie Funktionen von ZITADEL auf Basis von Ihrer Preisstufe einsehen.",
-    "BTN-EDIT": "Featureset anpassen",
+    "BTN-EDIT": "Featureset anzeigen",
     "TIER": {
       "NAME": "Preisstufe Name",
       "DETAILS": "Abrechnungsdetails",
@@ -617,8 +617,8 @@
       "2": "Annuliert",
       "3": "Durch IAM Owner gesetzt"
     },
-    "NOTAVAILABLE": "Feature {{value}} ist auf Ihrer Organisation nicht freigeschaltet!",
+    "NOTAVAILABLE": "Feature {{value}} ist auf Ihrer organisation nicht freigeschaltet!",
-    "RETENTIONHOURS": "Stunden"
+    "RETENTIONDAYS": "Tage"
   },
   "POLICY": {
     "TITLE": "Richtlinen entdecken",
@@ -917,6 +917,10 @@
       "1": "System",
       "2": "Organisation"
     },
+    "TYPES": {
+        "0": "unknown",
+        "1": "OIDC"
+    },
     "STATES": {
       "1": "aktiv",
       "2": "inaktiv"

console/src/assets/i18n/en.json

@@ -583,8 +583,8 @@
   },
   "FEATURES": {
     "TITLE": "Features",
-    "DESCRIPTION": "here you can edit your ZITADEL Features based on your Tier",
+    "DESCRIPTION": "Here you can see your ZITADEL Features based on your Tier.",
-    "BTN-EDIT": "Edit Featureset",
+    "BTN-EDIT": "Display Featureset",
     "TIER": {
       "NAME": "Tier Name",
       "DETAILS": "Billing Details",
@@ -618,7 +618,7 @@
       "3": "Grandfathered"
     },
     "NOTAVAILABLE": "Feature {{value}} is missing on your organization.",
-    "RETENTIONHOURS": "Hours"
+    "RETENTIONDAYS": "Days"
   },
   "POLICY": {
     "TITLE": "Explore Policies",
@@ -917,6 +917,10 @@
       "1": "System",
       "2": "Organisation"
     },
+    "TYPES": {
+        "0": "unknown",
+        "1": "OIDC"
+    },
     "STATES": {
       "1": "active",
       "2": "inactive"