fix(console): update eslint, redirect user without roles, private labeling save and icon (#4459)

* header check

* eslint, header link

* labelpolicy promise

* set isdefault of branding to false on add

* icon

* branding toggles

console/.eslintrc.js

@@ -0,0 +1,40 @@
+module.exports = {
+  root: true,
+  ignorePatterns: ['projects/**/*'],
+  overrides: [
+    {
+      files: ['*.ts'],
+      parserOptions: {
+        project: ['tsconfig.json', 'e2e/tsconfig.json'],
+        createDefaultProgram: true,
+        tsconfigRootDir: __dirname,
+      },
+      extends: ['plugin:@angular-eslint/recommended', 'plugin:@angular-eslint/template/process-inline-templates'],
+      rules: {
+        '@angular-eslint/no-conflicting-lifecycle': 'off',
+        '@angular-eslint/no-host-metadata-property': 'off',
+        '@angular-eslint/component-selector': [
+          'error',
+          {
+            prefix: 'cnsl',
+            style: 'kebab-case',
+            type: 'element',
+          },
+        ],
+        '@angular-eslint/directive-selector': [
+          'error',
+          {
+            prefix: 'cnsl',
+            style: 'camelCase',
+            type: 'attribute',
+          },
+        ],
+      },
+    },
+    {
+      files: ['*.html'],
+      extends: ['plugin:@angular-eslint/template/recommended'],
+      rules: {},
+    },
+  ],
+};

console/.eslintrc.json

@@ -1,53 +0,0 @@
-{
-  "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "*.ts"
-      ],
-      "parserOptions": {
-        "project": [
-          "tsconfig.json",
-          "e2e/tsconfig.json"
-        ],
-        "createDefaultProgram": true
-      },
-      "extends": [
-        "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
-      "rules": {
-        "@angular-eslint/no-conflicting-lifecycle": "off",
-        "@angular-eslint/no-host-metadata-property": "off",
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "prefix": "cnsl",
-            "style": "kebab-case",
-            "type": "element"
-          }
-        ],
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "prefix": "cnsl",
-            "style": "camelCase",
-            "type": "attribute"
-          }
-        ]
-      }
-    },
-    {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
-      "rules": {}
-    }
-  ]
-}

console/package.json

@@ -53,11 +53,11 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^14.2.2",
-    "@angular-eslint/builder": "^14.0.4",
+    "@angular-eslint/builder": "^14.1.2",
-    "@angular-eslint/eslint-plugin": "^14.0.4",
+    "@angular-eslint/eslint-plugin": "^14.1.2",
-    "@angular-eslint/eslint-plugin-template": "^14.0.4",
+    "@angular-eslint/eslint-plugin-template": "^14.1.2",
-    "@angular-eslint/schematics": "^14.0.4",
+    "@angular-eslint/schematics": "^14.1.2",
-    "@angular-eslint/template-parser": "^14.0.4",
+    "@angular-eslint/template-parser": "^14.1.2",
     "@angular/cli": "^14.2.2",
     "@angular/compiler-cli": "^14.2.2",
     "@angular/language-service": "^14.2.2",
@@ -80,4 +80,4 @@
     "protractor": "~7.0.0",
     "typescript": "^4.4.4"
   }
-}
+}

console/src/app/app-routing.module.ts

@@ -11,7 +11,10 @@ const routes: Routes = [
   {
     path: '',
     loadChildren: () => import('./pages/home/home.module').then((m) => m.HomeModule),
-    canActivate: [AuthGuard],
+    canActivate: [AuthGuard, RoleGuard],
+    data: {
+      roles: ['.'],
+    },
   },
   {
     path: 'signedout',

console/src/app/app.component.ts

@@ -47,7 +47,7 @@ export class AppComponent implements OnDestroy {
   public showProjectSection: boolean = false;
 
   private destroy$: Subject<void> = new Subject();
-  public labelpolicy!: LabelPolicy.AsObject;
+  public labelpolicy: LabelPolicy.AsObject | undefined = undefined;
 
   public language: string = 'en';
   public privacyPolicy!: PrivacyPolicy.AsObject;
@@ -195,10 +195,12 @@ export class AppComponent implements OnDestroy {
       if (authenticated) {
         this.authService
           .getActiveOrg()
-          .then((org) => {
+          .then(async (org) => {
             this.org = org;
-            this.themeService.loadPrivateLabelling();
+            const policy = await this.themeService.loadPrivateLabelling();
-
+            if (policy) {
+              this.labelpolicy = policy;
+            }
             // TODO add when console storage is implemented
             // this.startIntroWorkflow();
           })

console/src/app/modules/accounts-card/accounts-card.component.ts

@@ -51,7 +51,6 @@ export class AccountsCardComponent implements OnInit {
         login_hint: loginHint,
       },
     };
-    (configWithPrompt as any).customQueryParams['login_hint'] = loginHint;
     this.authService.authenticate(configWithPrompt);
   }
 

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

@@ -1,11 +1,11 @@
 <div class="footer-wrapper">
   <div class="footer-row">
     <div class="footer-links">
-      <a target="_blank" *ngIf="policy?.tosLink" rel="noreferrer" [href]="policy.tosLink" external>
+      <a target="_blank" *ngIf="policy?.tosLink" rel="noreferrer" [href]="policy?.tosLink" external>
         <span>{{ 'FOOTER.LINKS.TOS' | translate }}</span>
         <i class="las la-external-link-alt"></i>
       </a>
-      <a target="_blank" *ngIf="policy?.privacyLink" rel="noreferrer" [href]="policy.privacyLink" external>
+      <a target="_blank" *ngIf="policy?.privacyLink" rel="noreferrer" [href]="policy?.privacyLink" external>
         <span>{{ 'FOOTER.LINKS.PP' | translate }}</span>
         <i class="las la-external-link-alt"></i>
       </a>

console/src/app/modules/footer/footer.component.ts

@@ -8,8 +8,8 @@ import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
   styleUrls: ['./footer.component.scss'],
 })
 export class FooterComponent {
-  public policy!: PrivacyPolicy.AsObject;
+  public policy?: PrivacyPolicy.AsObject;
-  @Input() public privateLabelPolicy!: LabelPolicy.AsObject;
+  @Input() public privateLabelPolicy?: LabelPolicy.AsObject;
   constructor(authService: GrpcAuthService) {
     authService.getMyPrivacyPolicy().then((policyResp) => {
       if (policyResp.policy) {

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

@@ -23,7 +23,7 @@
     </a>
 
     <ng-template #defaultHome>
-      <a class="title" [routerLink]="['/']">
+      <a class="title" [routerLink]="authService.zitadelPermissions.getValue().length === 0 ? ['/users', 'me'] : ['/']">
         <img
           class="logo"
           alt="zitadel logo"

console/src/app/modules/header/header.component.ts

@@ -45,7 +45,7 @@ export class HeaderComponent implements OnDestroy {
   ];
   constructor(
     public authenticationService: AuthenticationService,
-    private authService: GrpcAuthService,
+    public authService: GrpcAuthService,
     public mgmtService: ManagementService,
     public breadcrumbService: BreadcrumbService,
     public router: Router,

console/src/app/modules/nav/nav.component.ts

@@ -73,7 +73,7 @@ export class NavComponent implements OnDestroy {
 
   @Input() public isDarkTheme: boolean = true;
   @Input() public user!: User.AsObject;
-  @Input() public labelpolicy!: LabelPolicy.AsObject;
+  @Input() public labelpolicy?: LabelPolicy.AsObject;
   public isHandset$: Observable<boolean> = this.breakpointObserver.observe('(max-width: 599px)').pipe(
     map((result) => {
       return result.matches;

console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html

@@ -162,7 +162,7 @@
                   "
                   matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
                 >
-                  <i class="las la-ban"></i>
+                  <i class="las la-trash"></i>
                 </button>
               </ng-container>
               <ng-template #addLogoButton>
@@ -233,7 +233,7 @@
                   "
                   matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
                 >
-                  <i class="las la-ban"></i>
+                  <i class="las la-trash"></i>
                 </button>
               </ng-container>
               <ng-template #addIconButton>
@@ -514,7 +514,7 @@
               (click)="deleteFont()"
               matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
             >
-              <i class="las la-ban"></i>
+              <i class="las la-trash"></i>
             </button>
           </div>
 
@@ -568,7 +568,7 @@
             </div>
           </mat-panel-title>
         </mat-expansion-panel-header>
-        <div class="adv-container" *ngIf="previewData">
+        <div class="adv-container">
           <mat-slide-toggle
             class="toggle"
             color="primary"

console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts

@@ -60,8 +60,8 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
   @Input() public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
   public service!: ManagementService | AdminService;
 
-  public previewData!: LabelPolicy.AsObject;
+  public previewData?: LabelPolicy.AsObject;
-  public data!: LabelPolicy.AsObject;
+  public data?: LabelPolicy.AsObject;
 
   public panelOpenState: boolean = false;
   public isHoveringOverDarkLogo: boolean = false;
@@ -447,6 +447,9 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
           return (this.service as ManagementService)
             .addCustomLabelPolicy(req0)
             .then(() => {
+              if (this.previewData) {
+                this.previewData.isDefault = false;
+              }
               this.toast.showInfo('POLICY.TOAST.SET', true);
 
               reloadPolicy();
@@ -493,60 +496,78 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
   }
 
   public setDarkBackgroundColorAndSave($event: string): void {
-    this.previewData.backgroundColorDark = $event;
+    if (this.previewData) {
-    this.savePolicy();
+      this.previewData.backgroundColorDark = $event;
+      this.savePolicy();
+    }
   }
 
   public setDarkPrimaryColorAndSave($event: string): void {
-    this.previewData.primaryColorDark = $event;
+    if (this.previewData) {
-    this.savePolicy();
+      this.previewData.primaryColorDark = $event;
+      this.savePolicy();
+    }
   }
 
   public setDarkWarnColorAndSave($event: string): void {
-    this.previewData.warnColorDark = $event;
+    if (this.previewData) {
-    this.savePolicy();
+      this.previewData.warnColorDark = $event;
+      this.savePolicy();
+    }
   }
 
   public setDarkFontColorAndSave($event: string): void {
-    this.previewData.fontColorDark = $event;
+    if (this.previewData) {
-    this.savePolicy();
+      this.previewData.fontColorDark = $event;
+      this.savePolicy();
+    }
   }
 
   public setBackgroundColorAndSave($event: string): void {
-    this.previewData.backgroundColor = $event;
+    if (this.previewData) {
-    this.savePolicy();
+      this.previewData.backgroundColor = $event;
+      this.savePolicy();
+    }
   }
 
   public setPrimaryColorAndSave($event: string): void {
-    this.previewData.primaryColor = $event;
+    if (this.previewData) {
-    this.savePolicy();
+      this.previewData.primaryColor = $event;
+      this.savePolicy();
+    }
   }
 
   public setWarnColorAndSave($event: string): void {
-    this.previewData.warnColor = $event;
+    if (this.previewData) {
-    this.savePolicy();
+      this.previewData.warnColor = $event;
+      this.savePolicy();
+    }
   }
 
   public setFontColorAndSave($event: string): void {
-    this.previewData.fontColor = $event;
+    if (this.previewData) {
-    this.savePolicy();
+      this.previewData.fontColor = $event;
+      this.savePolicy();
+    }
   }
 
   public overwriteValues(req: AddCustomLabelPolicyRequest | UpdateCustomLabelPolicyRequest): void {
-    req.setBackgroundColorDark(this.previewData.backgroundColorDark);
+    if (this.previewData) {
-    req.setBackgroundColor(this.previewData.backgroundColor);
+      req.setBackgroundColorDark(this.previewData.backgroundColorDark);
+      req.setBackgroundColor(this.previewData.backgroundColor);
 
-    req.setFontColorDark(this.previewData.fontColorDark);
+      req.setFontColorDark(this.previewData.fontColorDark);
-    req.setFontColor(this.previewData.fontColor);
+      req.setFontColor(this.previewData.fontColor);
 
-    req.setPrimaryColorDark(this.previewData.primaryColorDark);
+      req.setPrimaryColorDark(this.previewData.primaryColorDark);
-    req.setPrimaryColor(this.previewData.primaryColor);
+      req.setPrimaryColor(this.previewData.primaryColor);
 
-    req.setWarnColorDark(this.previewData.warnColorDark);
+      req.setWarnColorDark(this.previewData.warnColorDark);
-    req.setWarnColor(this.previewData.warnColor);
+      req.setWarnColor(this.previewData.warnColor);
 
-    req.setDisableWatermark(this.previewData.disableWatermark);
+      req.setDisableWatermark(this.previewData.disableWatermark);
-    req.setHideLoginNameSuffix(this.previewData.hideLoginNameSuffix);
+      req.setHideLoginNameSuffix(this.previewData.hideLoginNameSuffix);
+    }
   }
 
   public activatePolicy(): Promise<any> {

console/src/app/services/grpc-auth.service.ts

@@ -132,7 +132,7 @@ export class GrpcAuthService {
       ),
     ),
   );
-  private zitadelPermissions: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);
+  public zitadelPermissions: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);
   public readonly fetchedZitadelPermissions: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
   private cachedOrgs: Org.AsObject[] = [];

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

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { LabelPolicy } from '../proto/generated/zitadel/policy_pb';
 
 import { GrpcAuthService } from './grpc-auth.service';
 
@@ -140,14 +141,15 @@ export class ThemeService {
     this.saveTextColor(lightText, false);
   };
 
-  public loadPrivateLabelling(forceDefault: boolean = false): void {
+  public loadPrivateLabelling(forceDefault: boolean = false): Promise<LabelPolicy.AsObject | undefined> {
     if (forceDefault) {
       this.setDefaultColors();
+      return Promise.resolve(undefined);
     } else {
       const isDark = (color: string) => this.isDark(color);
       const isLight = (color: string) => this.isLight(color);
 
-      this.authService
+      return this.authService
         .getMyLabelPolicy()
         .then((lpresp) => {
           const labelpolicy = lpresp.policy;
@@ -201,10 +203,17 @@ export class ThemeService {
             lightText = '#000000';
           }
           this.saveTextColor(lightText || '#000000', false);
+
+          if (labelpolicy) {
+            return labelpolicy;
+          } else {
+            return Promise.reject();
+          }
         })
         .catch((error) => {
           console.error('could not load private labelling policy!', error);
           this.setDefaultColors();
+          return Promise.reject();
         });
     }
   }