fix(console): new colorpicker, remove icons logo font (#1826)

* custom color picker, delete font

* delete asset, i18n

* escape deep styles

* ts, proto

* remove fallback img, color clickable, remove font

* stylelint

* fix spinner

* fix deprecated chipinput.input

* improve logo on login

* fix qr code

* always use black on white for qr code

* fix header and footer css

Co-authored-by: Livio Amstutz <[email protected]>

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

@@ -1,6 +1,8 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 
+import { PolicyComponentServiceType } from '../modules/policies/policy-component-types.enum';
+import { Theme } from '../modules/policies/private-labeling-policy/private-labeling-policy.component';
 import { Org } from '../proto/generated/zitadel/org_pb';
 import { StorageService } from './storage.service';
 
@@ -11,22 +13,12 @@ const orgKey = 'x-zitadel-orgid';
 const bearerPrefix = 'Bearer';
 const accessTokenStorageKey = 'access_token';
 
-export enum UploadEndpoint {
-  IAMFONT = 'iam/policy/label/font',
-  MGMTFONT = 'org/policy/label/font',
-
-  IAMDARKLOGO = 'iam/policy/label/logo/dark',
-  IAMLIGHTLOGO = 'iam/policy/label/logo',
-  IAMDARKICON = 'iam/policy/label/icon/dark',
-  IAMLIGHTICON = 'iam/policy/label/icon',
-
-  MGMTDARKLOGO = 'org/policy/label/logo/dark',
-  MGMTLIGHTLOGO = 'org/policy/label/logo',
-  MGMTDARKICON = 'org/policy/label/icon/dark',
-  MGMTLIGHTICON = 'org/policy/label/icon',
+export enum AssetType {
+  LOGO,
+  ICON,
 }
 
-export enum DownloadEndpoint {
+export enum AssetEndpoint {
   IAMFONT = 'iam/policy/label/font',
   MGMTFONT = 'org/policy/label/font',
 
@@ -51,10 +43,33 @@ export enum DownloadEndpoint {
   MGMTICONPREVIEW = 'org/policy/label/icon/_preview',
 }
 
+export const ENDPOINT = {
+  [Theme.DARK]: {
+    [PolicyComponentServiceType.ADMIN]: {
+      [AssetType.LOGO]: AssetEndpoint.IAMDARKLOGO,
+      [AssetType.ICON]: AssetEndpoint.IAMDARKICON,
+    },
+    [PolicyComponentServiceType.MGMT]: {
+      [AssetType.LOGO]: AssetEndpoint.MGMTDARKLOGO,
+      [AssetType.ICON]: AssetEndpoint.MGMTDARKICON,
+    },
+  },
+  [Theme.LIGHT]: {
+    [PolicyComponentServiceType.ADMIN]: {
+      [AssetType.LOGO]: AssetEndpoint.IAMLOGO,
+      [AssetType.ICON]: AssetEndpoint.IAMICON,
+    },
+    [PolicyComponentServiceType.MGMT]: {
+      [AssetType.LOGO]: AssetEndpoint.MGMTLOGO,
+      [AssetType.ICON]: AssetEndpoint.MGMTICON,
+    },
+  },
+};
+
 @Injectable({
   providedIn: 'root',
 })
-export class UploadService {
+export class AssetService {
   private serviceUrl: string = '';
   private accessToken: string = '';
   private org!: Org.AsObject;
@@ -81,7 +96,7 @@ export class UploadService {
       });
   }
 
-  public upload(endpoint: UploadEndpoint, body: any): Promise<any> {
+  public upload(endpoint: AssetEndpoint, body: any): Promise<any> {
     return this.http.post(`${this.serviceUrl}/assets/v1/${endpoint}`,
       body,
       {
@@ -103,4 +118,14 @@ export class UploadService {
         },
       }).toPromise();
   }
+
+  public delete(endpoint: AssetEndpoint): Promise<any> {
+    return this.http.delete(`${this.serviceUrl}/assets/v1/${endpoint}`,
+      {
+        headers: {
+          [authorizationKey]: `${bearerPrefix} ${this.accessToken}`,
+          [orgKey]: `${this.org.id}`,
+        },
+      }).toPromise();
+  }
 }

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

@@ -12,6 +12,8 @@ import {
   RemoveLabelPolicyIconResponse,
   RemoveLabelPolicyLogoDarkRequest,
   RemoveLabelPolicyLogoDarkResponse,
+  RemoveLabelPolicyLogoRequest,
+  RemoveLabelPolicyLogoResponse,
 } from '../proto/generated/zitadel/admin_pb';
 import { AppQuery } from '../proto/generated/zitadel/app_pb';
 import { KeyType } from '../proto/generated/zitadel/auth_n_key_pb';
@@ -212,8 +214,6 @@ import {
   RemoveAppKeyResponse,
   RemoveAppRequest,
   RemoveAppResponse,
-  RemoveCustomLabelPolicyLogoRequest,
-  RemoveCustomLabelPolicyLogoResponse,
   RemoveHumanAuthFactorOTPRequest,
   RemoveHumanAuthFactorOTPResponse,
   RemoveHumanAuthFactorU2FRequest,
@@ -783,31 +783,31 @@ export class ManagementService {
   public removeLabelPolicyFont():
     Promise<RemoveLabelPolicyFontResponse.AsObject> {
     const req = new RemoveLabelPolicyFontRequest();
-    return this.grpcService.admin.removeLabelPolicyFont(req, null).then(resp => resp.toObject());
+    return this.grpcService.mgmt.removeCustomLabelPolicyFont(req, null).then(resp => resp.toObject());
   }
 
   public removeLabelPolicyIcon():
     Promise<RemoveLabelPolicyIconResponse.AsObject> {
     const req = new RemoveLabelPolicyIconRequest();
-    return this.grpcService.admin.removeLabelPolicyIcon(req, null).then(resp => resp.toObject());
+    return this.grpcService.mgmt.removeCustomLabelPolicyIcon(req, null).then(resp => resp.toObject());
   }
 
   public removeLabelPolicyIconDark():
     Promise<RemoveLabelPolicyIconDarkResponse.AsObject> {
     const req = new RemoveLabelPolicyIconDarkRequest();
-    return this.grpcService.admin.removeLabelPolicyIconDark(req, null).then(resp => resp.toObject());
+    return this.grpcService.mgmt.removeCustomLabelPolicyIconDark(req, null).then(resp => resp.toObject());
   }
 
-  public removeCustomLabelPolicyLogo():
-    Promise<RemoveCustomLabelPolicyLogoResponse.AsObject> {
-    const req = new RemoveCustomLabelPolicyLogoRequest();
+  public removeLabelPolicyLogo():
+    Promise<RemoveLabelPolicyLogoResponse.AsObject> {
+    const req = new RemoveLabelPolicyLogoRequest();
     return this.grpcService.mgmt.removeCustomLabelPolicyLogo(req, null).then(resp => resp.toObject());
   }
 
   public removeLabelPolicyLogoDark():
     Promise<RemoveLabelPolicyLogoDarkResponse.AsObject> {
     const req = new RemoveLabelPolicyLogoDarkRequest();
-    return this.grpcService.admin.removeLabelPolicyLogoDark(req, null).then(resp => resp.toObject());
+    return this.grpcService.mgmt.removeCustomLabelPolicyLogoDark(req, null).then(resp => resp.toObject());
   }
 
   public getOrgIAMPolicy(): Promise<GetOrgIAMPolicyResponse.AsObject> {