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
2024-12-04 15:35:10 +00:00 · 2022-09-29 07:25:57 +02:00 · 2022-09-29 07:25:57 +02:00 · c6bb797d58
commit c6bb797d58
parent f40931e81e
16 changed files with 283 additions and 1337 deletions
--- a/console/.eslintrc.js
+++ b/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: {},
+    },
+  ],
+};
--- a/console/.eslintrc.json
+++ b/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": {}
-    }
-  ]
-}
--- a/console/package-lock.json
+++ b/console/package-lock.json
--- a/console/package.json
+++ b/console/package.json
@ -53,11 +53,11 @@
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.2",
-    "@angular-eslint/builder": "^14.0.4",
-    "@angular-eslint/eslint-plugin": "^14.0.4",
-    "@angular-eslint/eslint-plugin-template": "^14.0.4",
-    "@angular-eslint/schematics": "^14.0.4",
-    "@angular-eslint/template-parser": "^14.0.4",
+    "@angular-eslint/builder": "^14.1.2",
+    "@angular-eslint/eslint-plugin": "^14.1.2",
+    "@angular-eslint/eslint-plugin-template": "^14.1.2",
+    "@angular-eslint/schematics": "^14.1.2",
+    "@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"
  }
-}
+}
--- a/console/src/app/app-routing.module.ts
+++ b/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',
--- a/console/src/app/app.component.ts
+++ b/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();
          })
--- a/console/src/app/modules/accounts-card/accounts-card.component.ts
+++ b/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);
  }

--- a/console/src/app/modules/footer/footer.component.html
+++ b/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>
--- a/console/src/app/modules/footer/footer.component.ts
+++ b/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;
-  @Input() public privateLabelPolicy!: LabelPolicy.AsObject;
+  public policy?: PrivacyPolicy.AsObject;
+  @Input() public privateLabelPolicy?: LabelPolicy.AsObject;
  constructor(authService: GrpcAuthService) {
    authService.getMyPrivacyPolicy().then((policyResp) => {
      if (policyResp.policy) {
--- a/console/src/app/modules/header/header.component.html
+++ b/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"
--- a/console/src/app/modules/header/header.component.ts
+++ b/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,
--- a/console/src/app/modules/nav/nav.component.ts
+++ b/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;
--- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
+++ b/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"
--- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
+++ b/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 data!: LabelPolicy.AsObject;
+  public previewData?: 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;
-    this.savePolicy();
+    if (this.previewData) {
+      this.previewData.backgroundColorDark = $event;
+      this.savePolicy();
+    }
  }

  public setDarkPrimaryColorAndSave($event: string): void {
-    this.previewData.primaryColorDark = $event;
-    this.savePolicy();
+    if (this.previewData) {
+      this.previewData.primaryColorDark = $event;
+      this.savePolicy();
+    }
  }

  public setDarkWarnColorAndSave($event: string): void {
-    this.previewData.warnColorDark = $event;
-    this.savePolicy();
+    if (this.previewData) {
+      this.previewData.warnColorDark = $event;
+      this.savePolicy();
+    }
  }

  public setDarkFontColorAndSave($event: string): void {
-    this.previewData.fontColorDark = $event;
-    this.savePolicy();
+    if (this.previewData) {
+      this.previewData.fontColorDark = $event;
+      this.savePolicy();
+    }
  }

  public setBackgroundColorAndSave($event: string): void {
-    this.previewData.backgroundColor = $event;
-    this.savePolicy();
+    if (this.previewData) {
+      this.previewData.backgroundColor = $event;
+      this.savePolicy();
+    }
  }

  public setPrimaryColorAndSave($event: string): void {
-    this.previewData.primaryColor = $event;
-    this.savePolicy();
+    if (this.previewData) {
+      this.previewData.primaryColor = $event;
+      this.savePolicy();
+    }
  }

  public setWarnColorAndSave($event: string): void {
-    this.previewData.warnColor = $event;
-    this.savePolicy();
+    if (this.previewData) {
+      this.previewData.warnColor = $event;
+      this.savePolicy();
+    }
  }

  public setFontColorAndSave($event: string): void {
-    this.previewData.fontColor = $event;
-    this.savePolicy();
+    if (this.previewData) {
+      this.previewData.fontColor = $event;
+      this.savePolicy();
+    }
  }

  public overwriteValues(req: AddCustomLabelPolicyRequest | UpdateCustomLabelPolicyRequest): void {
-    req.setBackgroundColorDark(this.previewData.backgroundColorDark);
-    req.setBackgroundColor(this.previewData.backgroundColor);
+    if (this.previewData) {
+      req.setBackgroundColorDark(this.previewData.backgroundColorDark);
+      req.setBackgroundColor(this.previewData.backgroundColor);

-    req.setFontColorDark(this.previewData.fontColorDark);
-    req.setFontColor(this.previewData.fontColor);
+      req.setFontColorDark(this.previewData.fontColorDark);
+      req.setFontColor(this.previewData.fontColor);

-    req.setPrimaryColorDark(this.previewData.primaryColorDark);
-    req.setPrimaryColor(this.previewData.primaryColor);
+      req.setPrimaryColorDark(this.previewData.primaryColorDark);
+      req.setPrimaryColor(this.previewData.primaryColor);

-    req.setWarnColorDark(this.previewData.warnColorDark);
-    req.setWarnColor(this.previewData.warnColor);
+      req.setWarnColorDark(this.previewData.warnColorDark);
+      req.setWarnColor(this.previewData.warnColor);

-    req.setDisableWatermark(this.previewData.disableWatermark);
-    req.setHideLoginNameSuffix(this.previewData.hideLoginNameSuffix);
+      req.setDisableWatermark(this.previewData.disableWatermark);
+      req.setHideLoginNameSuffix(this.previewData.hideLoginNameSuffix);
+    }
  }

  public activatePolicy(): Promise<any> {
--- a/console/src/app/services/grpc-auth.service.ts
+++ b/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[] = [];
--- a/console/src/app/services/theme.service.ts
+++ b/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();
        });
    }
  }