diff --git a/console/src/app/modules/policies/private-labeling-policy/preview/preview.component.html b/console/src/app/modules/policies/private-labeling-policy/preview/preview.component.html index fe73bcdfb0..8471592f7d 100644 --- a/console/src/app/modules/policies/private-labeling-policy/preview/preview.component.html +++ b/console/src/app/modules/policies/private-labeling-policy/preview/preview.component.html @@ -1,34 +1,47 @@
{{label}} -
+
-
+
\ No newline at end of file diff --git a/console/src/app/modules/policies/private-labeling-policy/preview/preview.component.ts b/console/src/app/modules/policies/private-labeling-policy/preview/preview.component.ts index 95f12dbb40..2cf329669e 100644 --- a/console/src/app/modules/policies/private-labeling-policy/preview/preview.component.ts +++ b/console/src/app/modules/policies/private-labeling-policy/preview/preview.component.ts @@ -14,13 +14,12 @@ export class PreviewComponent implements OnInit, OnDestroy { @Input() preview: Preview = Preview.PREVIEW; @Input() policy!: LabelPolicy.AsObject; @Input() label: string = 'PREVIEW'; - @Input() images: { [imagekey: string]: any; } = {}; @Input() theme: Theme = Theme.DARK; @Input() refresh: Observable = of(); private destroyed$: Subject = new Subject(); public Theme: any = Theme; public Preview: any = Preview; - constructor(private chd: ChangeDetectorRef) { } + constructor(private chd: ChangeDetectorRef) {} public ngOnInit(): void { this.refresh.pipe(takeUntil(this.destroyed$)).subscribe(() => { diff --git 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 index da463962b8..6213e26d8d 100644 --- 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 @@ -1,287 +1,335 @@ -
-
- - arrow_back - -
-

{{'POLICY.PRIVATELABELING.TITLE' | translate}}

-

{{'POLICY.PRIVATELABELING.DESCRIPTION' | translate}}

-
+
+
+ + arrow_back + +
+

{{'POLICY.PRIVATELABELING.TITLE' | translate}}

+

{{'POLICY.PRIVATELABELING.DESCRIPTION' | translate}}

-

{{'POLICY.PRIVATELABELING.PREVIEW_DESCRIPTION' | translate}}

- {{'POLICY.DEFAULTLABEL' | translate}} +
+

{{'POLICY.PRIVATELABELING.PREVIEW_DESCRIPTION' | translate}}

+ {{'POLICY.DEFAULTLABEL' | translate}} - - + + - - -
-
-

{{'POLICY.PRIVATELABELING.THEME' | translate}}

-
- - -
-
- - - - - - - - + -
- - - - - -
- - Logo
- - - - - - -

{{'POLICY.PRIVATELABELING.USEOFLOGO' | translate}}

- - {{'POLICY.PRIVATELABELING.MAXSIZE' | translate}} - {{'POLICY.PRIVATELABELING.EMAILNOSVG' | translate}} - - -
-
- Logo - - -
-
- remove_circle - dark logo preview -
- -
- dark logo -
-
-
-
- remove_circle - logo preview -
- -
- logo -
-
- -
- -
-
- -
- Icon - - -
-
- remove_circle - dark icon preview -
- -
- - dark icon -
-
-
-
- remove_circle - icon preview -
- -
- - icon -
-
- -
- -
-
-
- - - - - - -
- - {{'POLICY.PRIVATELABELING.COLORS' | translate}}
- - - - -
-
- -
- -
- -
- -
- -
- -
- -
-
- - - -
-
- -
- -
- -
- -
- -
- -
- -
-
- - -
- -
- - - - - -
- - {{'POLICY.PRIVATELABELING.FONT' | translate}}
- - -
- {{'POLICY.PRIVATELABELING.FONTINLOGINONLY' | translate}} -
- text_fields - ABC • abc • 123 - - - -
- -
- -
-
- - - - - -
- - {{'POLICY.PRIVATELABELING.ADVANCEDBEHAVIOR' | translate}} -
- - -
- - - - - - - - - {{'POLICY.DATA.HIDELOGINNAMESUFFIX' | translate}} - - - - - - - - - {{'POLICY.DATA.DISABLEWATERMARK' | translate}} - -
- - - -
- -
- - - - -
+
+
+

{{'POLICY.PRIVATELABELING.THEME' | translate}}

+
+ +
- + + + + + + + +
+ +
+ + + + + +
+ + Logo +
+ + + + + + +

{{'POLICY.PRIVATELABELING.USEOFLOGO' | translate}}

+ + {{'POLICY.PRIVATELABELING.MAXSIZE' | translate}} + {{'POLICY.PRIVATELABELING.EMAILNOSVG' | translate}} + + + +
+
+ Logo + + +
+
+ remove_circle + dark logo preview +
+ +
+ dark logo +
+
+
+
+ remove_circle + logo preview +
+ +
+ logo +
+
+ +
+ +
+
+ +
+ Icon + +
+
+ remove_circle + dark icon preview +
+ +
+ dark icon +
+
+
+
+ remove_circle + icon preview +
+ +
+ icon +
+
+ +
+ +
+
+
+ + + + + + +
+ + {{'POLICY.PRIVATELABELING.COLORS' | translate}} +
+ + + + +
+
+ +
+ +
+ + +
+ +
+ +
+ +
+ +
+
+ + + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ +
+ + + + + +
+ + {{'POLICY.PRIVATELABELING.FONT' | translate}} +
+ + +
+ {{'POLICY.PRIVATELABELING.FONTINLOGINONLY' | translate}} + +
+ text_fields + ABC • abc • 123 + + + +
+ +
+ +
+
+ + + + + +
+ + {{'POLICY.PRIVATELABELING.ADVANCEDBEHAVIOR' | translate}} +
+ + +
+ + + + + + + + + {{'POLICY.DATA.HIDELOGINNAMESUFFIX' | translate}} + + + + + + + + + {{'POLICY.DATA.DISABLEWATERMARK' | translate}} + +
+ + + +
+ +
+ + + + +
+
+
+ + +
\ No newline at end of file diff --git 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 index 651f5482d0..5e0cc5b091 100644 --- 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 @@ -1,6 +1,5 @@ import { HttpErrorResponse } from '@angular/common/http'; import { Component, EventEmitter, Injector, OnDestroy, Type } from '@angular/core'; -import { DomSanitizer } from '@angular/platform-browser'; import { ActivatedRoute } from '@angular/router'; import { Subscription } from 'rxjs'; import { switchMap, take } from 'rxjs/operators'; @@ -66,8 +65,6 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { public previewData!: LabelPolicy.AsObject; public data!: LabelPolicy.AsObject; - public images: { [key: string]: any; } = {}; - public panelOpenState: boolean = false; public isHoveringOverDarkLogo: boolean = false; public isHoveringOverDarkIcon: boolean = false; @@ -86,7 +83,6 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { public AssetType: any = AssetType; public refreshPreview: EventEmitter = new EventEmitter(); - public loadingImages: boolean = false; private org!: Org.AsObject; public currentPolicy: GridPolicy = PRIVATELABEL_POLICY; public InfoSectionType: any = InfoSectionType; @@ -96,32 +92,35 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { private toast: ToastService, private injector: Injector, private assetService: AssetService, - private sanitizer: DomSanitizer, private storage: StorageService, private themeService: ThemeService, ) { - const org: Org.AsObject | null = (this.storage.getItem(StorageKey.organization, StorageLocation.session)); + const org: Org.AsObject | null = this.storage.getItem(StorageKey.organization, StorageLocation.session); if (org) { this.org = org; } - this.sub = this.route.data.pipe(switchMap(data => { - this.serviceType = data.serviceType; + this.sub = this.route.data + .pipe( + switchMap((data) => { + this.serviceType = data.serviceType; - switch (this.serviceType) { - case PolicyComponentServiceType.MGMT: - this.service = this.injector.get(ManagementService as Type); - break; - case PolicyComponentServiceType.ADMIN: - this.service = this.injector.get(AdminService as Type); - break; - } + switch (this.serviceType) { + case PolicyComponentServiceType.MGMT: + this.service = this.injector.get(ManagementService as Type); + break; + case PolicyComponentServiceType.ADMIN: + this.service = this.injector.get(AdminService as Type); + break; + } - return this.route.params; - })).subscribe(() => { - this.fetchData(); - }); + return this.route.params; + }), + ) + .subscribe(() => { + this.fetchData(); + }); } public toggleHoverLogo(theme: Theme, isHovering: boolean): void { @@ -140,7 +139,6 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { public onDropLogo(theme: Theme, filelist: FileList): Promise | void { const file = filelist.item(0); if (file) { - if (file.size > MAX_ALLOWED_SIZE) { this.toast.showInfo('POLICY.PRIVATELABELING.MAXSIZEEXCEEDED', true); } else { @@ -183,19 +181,19 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { } public deleteFont(): Promise { - const handler = (prom: Promise) => prom.then(() => { - this.toast.showInfo('POLICY.TOAST.DELETESUCCESS', true); - setTimeout(() => { - this.loadingImages = true; - this.getPreviewData().then(data => { - - if (data.policy) { - this.previewData = data.policy; - this.loadPreviewImages(); - } - }); - }, 1000); - }).catch(error => this.toast.showError(error)); + const handler = (prom: Promise) => + prom + .then(() => { + this.toast.showInfo('POLICY.TOAST.DELETESUCCESS', true); + setTimeout(() => { + this.getPreviewData().then((data) => { + if (data.policy) { + this.previewData = data.policy; + } + }); + }, 1000); + }) + .catch((error) => this.toast.showError(error)); switch (this.serviceType) { case PolicyComponentServiceType.MGMT: @@ -207,19 +205,18 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { public deleteAsset(type: AssetType, theme: Theme): any { const previewHandler = (prom: Promise) => { - return prom.then(() => { - this.toast.showInfo('POLICY.TOAST.DELETESUCCESS', true); - setTimeout(() => { - this.loadingImages = true; - this.getPreviewData().then(data => { - - if (data.policy) { - this.previewData = data.policy; - this.loadPreviewImages(); - } - }); - }, 1000); - }).catch(error => this.toast.showError(error)); + return prom + .then(() => { + this.toast.showInfo('POLICY.TOAST.DELETESUCCESS', true); + setTimeout(() => { + this.getPreviewData().then((data) => { + if (data.policy) { + this.previewData = data.policy; + } + }); + }, 1000); + }) + .catch((error) => this.toast.showError(error)); }; switch (this.serviceType) { @@ -268,7 +265,6 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { public onDropIcon(theme: Theme, filelist: FileList): void { const file = filelist.item(0); if (file) { - if (file.size > MAX_ALLOWED_SIZE) { this.toast.showInfo('POLICY.PRIVATELABELING.MAXSIZEEXCEEDED', true); } else { @@ -299,18 +295,20 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { } private handleFontUploadPromise(task: Promise): Promise { - const enhTask = task.then(() => { - this.toast.showInfo('POLICY.TOAST.UPLOADSUCCESS', true); - setTimeout(() => { - this.getPreviewData().then(data => { - if (data.policy) { - this.previewData = data.policy; - } - }); - }, 1000); - }).catch(error => this.toast.showError(error)); + const enhTask = task + .then(() => { + this.toast.showInfo('POLICY.TOAST.UPLOADSUCCESS', true); + setTimeout(() => { + this.getPreviewData().then((data) => { + if (data.policy) { + this.previewData = data.policy; + } + }); + }, 1000); + }) + .catch((error) => this.toast.showError(error)); - if (this.serviceType === PolicyComponentServiceType.MGMT && ((this.previewData as LabelPolicy.AsObject).isDefault)) { + if (this.serviceType === PolicyComponentServiceType.MGMT && (this.previewData as LabelPolicy.AsObject).isDefault) { return this.savePolicy().then(() => enhTask); } else { return enhTask; @@ -318,21 +316,20 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { } private handleUploadPromise(task: Promise): Promise { - const enhTask = task.then(() => { - this.toast.showInfo('POLICY.TOAST.UPLOADSUCCESS', true); - setTimeout(() => { - this.loadingImages = true; - this.getPreviewData().then(data => { + const enhTask = task + .then(() => { + this.toast.showInfo('POLICY.TOAST.UPLOADSUCCESS', true); + setTimeout(() => { + this.getPreviewData().then((data) => { + if (data.policy) { + this.previewData = data.policy; + } + }); + }, 1000); + }) + .catch((error) => this.toast.showError(error)); - if (data.policy) { - this.previewData = data.policy; - this.loadPreviewImages(); - } - }); - }, 1000); - }).catch(error => this.toast.showError(error)); - - if (this.serviceType === PolicyComponentServiceType.MGMT && ((this.previewData as LabelPolicy.AsObject).isDefault)) { + if (this.serviceType === PolicyComponentServiceType.MGMT && (this.previewData as LabelPolicy.AsObject).isDefault) { return this.savePolicy().then(() => enhTask); } else { return enhTask; @@ -342,133 +339,44 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { public fetchData(): void { this.loading = true; - this.authService.canUseFeature(['label_policy.private_label']).pipe(take(1)).subscribe((canUse) => { - this.getPreviewData().then(data => { - if (data.policy) { - this.previewData = data.policy; - this.loading = false; + this.authService + .canUseFeature(['label_policy.private_label']) + .pipe(take(1)) + .subscribe((canUse) => { + this.getPreviewData() + .then((data) => { + if (data.policy) { + this.previewData = data.policy; + this.loading = false; + } + }) + .catch((error) => { + this.toast.showError(error); + }); - if ((canUse === true && this.serviceType === PolicyComponentServiceType.MGMT) || - this.serviceType === PolicyComponentServiceType.ADMIN) { - this.loadingImages = true; - this.loadPreviewImages(); - } - } - }).catch(error => { - this.toast.showError(error); + this.getData() + .then((data) => { + if (data.policy) { + this.data = data.policy; + this.loading = false; + } + }) + .catch((error) => { + this.toast.showError(error); + }); }); - - this.getData().then(data => { - if (data.policy) { - this.data = data.policy; - this.loading = false; - - if ((canUse === true && this.serviceType === PolicyComponentServiceType.MGMT) || - this.serviceType === PolicyComponentServiceType.ADMIN) { - this.loadImages(); - } - } - }).catch(error => { - this.toast.showError(error); - }); - }); - - } - - private loadImages(): void { - const promises: Promise[] = []; - if (this.serviceType === PolicyComponentServiceType.ADMIN) { - if (this.data.logoUrlDark) { - promises.push(this.loadAsset('darkLogo', AssetEndpoint.IAMDARKLOGO)); - } - if (this.data.iconUrlDark) { - promises.push(this.loadAsset('darkIcon', AssetEndpoint.IAMDARKICON)); - } - if (this.data.logoUrl) { - promises.push(this.loadAsset('logo', AssetEndpoint.IAMLOGO)); - } - if (this.data.iconUrl) { - promises.push(this.loadAsset('icon', AssetEndpoint.IAMICON)); - } - } else if (this.serviceType === PolicyComponentServiceType.MGMT) { - if (this.data.logoUrlDark) { - promises.push(this.loadAsset('darkLogo', AssetEndpoint.MGMTDARKLOGO)); - } - if (this.data.iconUrlDark) { - promises.push(this.loadAsset('darkIcon', AssetEndpoint.MGMTDARKICON)); - } - if (this.data.logoUrl) { - promises.push(this.loadAsset('logo', AssetEndpoint.MGMTLOGO)); - } - if (this.data.iconUrl) { - promises.push(this.loadAsset('icon', AssetEndpoint.MGMTICON)); - } - } - - if (promises.length) { - Promise.all(promises).then(() => { - this.loadingImages = false; - this.refreshPreview.emit(); - }).catch(error => { - this.loadingImages = false; - }); - } else { - this.loadingImages = false; - } - } - - private loadPreviewImages(): void { - const promises: Promise[] = []; - - if (this.serviceType === PolicyComponentServiceType.ADMIN) { - if (this.previewData.logoUrlDark) { - promises.push(this.loadAsset('previewDarkLogo', AssetEndpoint.IAMDARKLOGOPREVIEW)); - } - if (this.previewData.iconUrlDark) { - promises.push(this.loadAsset('previewDarkIcon', AssetEndpoint.IAMDARKICONPREVIEW)); - } - if (this.previewData.logoUrl) { - promises.push(this.loadAsset('previewLogo', AssetEndpoint.IAMLOGOPREVIEW)); - } - if (this.previewData.iconUrl) { - promises.push(this.loadAsset('previewIcon', AssetEndpoint.IAMICONPREVIEW)); - } - } else if (this.serviceType === PolicyComponentServiceType.MGMT) { - if (this.previewData.logoUrlDark) { - promises.push(this.loadAsset('previewDarkLogo', AssetEndpoint.MGMTDARKLOGOPREVIEW)); - } - if (this.previewData.iconUrlDark) { - promises.push(this.loadAsset('previewDarkIcon', AssetEndpoint.MGMTDARKICONPREVIEW)); - } - if (this.previewData.logoUrl) { - promises.push(this.loadAsset('previewLogo', AssetEndpoint.MGMTLOGOPREVIEW)); - } - if (this.previewData.iconUrl) { - promises.push(this.loadAsset('previewIcon', AssetEndpoint.MGMTICONPREVIEW)); - } - } - - if (promises.length) { - Promise.all(promises).then(() => { - this.loadingImages = false; - this.refreshPreview.emit(); - }).catch(error => { - this.loadingImages = false; - }); - } else { - this.loadingImages = false; - } } public ngOnDestroy(): void { this.sub.unsubscribe(); } - private async getPreviewData(): - Promise { + private async getPreviewData(): Promise< + | MgmtGetPreviewLabelPolicyResponse.AsObject + | AdminGetPreviewLabelPolicyResponse.AsObject + | MgmtGetLabelPolicyResponse.AsObject + | AdminGetLabelPolicyResponse.AsObject + > { switch (this.serviceType) { case PolicyComponentServiceType.MGMT: return (this.service as ManagementService).getPreviewLabelPolicy(); @@ -477,11 +385,12 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { } } - private async getData(): - Promise { + private async getData(): Promise< + | MgmtGetPreviewLabelPolicyResponse.AsObject + | AdminGetPreviewLabelPolicyResponse.AsObject + | MgmtGetLabelPolicyResponse.AsObject + | AdminGetLabelPolicyResponse.AsObject + > { switch (this.serviceType) { case PolicyComponentServiceType.MGMT: return (this.service as ManagementService).getLabelPolicy(); @@ -490,38 +399,28 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { } } - private loadAsset(imagekey: string, url: string): Promise { - return this.assetService.load(`${url}`, this.org.id).then(data => { - const objectURL = URL.createObjectURL(data); - this.images[imagekey] = this.sanitizer.bypassSecurityTrustUrl(objectURL); - this.refreshPreview.emit(); - }).catch(error => { - this.toast.showError(error); - }); - } - public removePolicy(): void { if (this.service instanceof ManagementService) { - this.service.resetLabelPolicyToDefault().then(() => { - this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true); - setTimeout(() => { - this.fetchData(); - }, 1000); - }).catch(error => { - this.toast.showError(error); - }); + this.service + .resetLabelPolicyToDefault() + .then(() => { + this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true); + setTimeout(() => { + this.fetchData(); + }, 1000); + }) + .catch((error) => { + this.toast.showError(error); + }); } } public savePolicy(): Promise { const reloadPolicy = () => { setTimeout(() => { - this.loadingImages = true; - this.getData().then(data => { - + this.getData().then((data) => { if (data.policy) { this.data = data.policy; - this.loadImages(); } }); }, 500); @@ -532,34 +431,43 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { const req0 = new AddCustomLabelPolicyRequest(); this.overwriteValues(req0); - return (this.service as ManagementService).addCustomLabelPolicy(req0).then(() => { - this.toast.showInfo('POLICY.TOAST.SET', true); + return (this.service as ManagementService) + .addCustomLabelPolicy(req0) + .then(() => { + this.toast.showInfo('POLICY.TOAST.SET', true); - reloadPolicy(); - }).catch((error: HttpErrorResponse) => { - this.toast.showError(error); - }); + reloadPolicy(); + }) + .catch((error: HttpErrorResponse) => { + this.toast.showError(error); + }); } else { const req1 = new UpdateCustomLabelPolicyRequest(); this.overwriteValues(req1); - return (this.service as ManagementService).updateCustomLabelPolicy(req1).then(() => { - this.toast.showInfo('POLICY.TOAST.SET', true); + return (this.service as ManagementService) + .updateCustomLabelPolicy(req1) + .then(() => { + this.toast.showInfo('POLICY.TOAST.SET', true); - reloadPolicy(); - }).catch(error => { - this.toast.showError(error); - }); + reloadPolicy(); + }) + .catch((error) => { + this.toast.showError(error); + }); } case PolicyComponentServiceType.ADMIN: const req = new UpdateLabelPolicyRequest(); this.overwriteValues(req); - return (this.service as AdminService).updateLabelPolicy(req).then(() => { - reloadPolicy(); - this.toast.showInfo('POLICY.TOAST.SET', true); - }).catch(error => { - this.toast.showError(error); - }); + return (this.service as AdminService) + .updateLabelPolicy(req) + .then(() => { + reloadPolicy(); + this.toast.showInfo('POLICY.TOAST.SET', true); + }) + .catch((error) => { + this.toast.showError(error); + }); } } @@ -592,39 +500,39 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { // dialog warning switch (this.serviceType) { case PolicyComponentServiceType.MGMT: - return (this.service as ManagementService).activateCustomLabelPolicy().then(() => { - this.toast.showInfo('POLICY.PRIVATELABELING.ACTIVATED', true); - setTimeout(() => { - this.loadingImages = true; - this.getData().then(data => { - - if (data.policy) { - this.data = data.policy; - this.applyToConsole(data.policy); - this.loadImages(); - } - }); - }, 1000); - }).catch(error => { - this.toast.showError(error); - }); + return (this.service as ManagementService) + .activateCustomLabelPolicy() + .then(() => { + this.toast.showInfo('POLICY.PRIVATELABELING.ACTIVATED', true); + setTimeout(() => { + this.getData().then((data) => { + if (data.policy) { + this.data = data.policy; + this.applyToConsole(data.policy); + } + }); + }, 1000); + }) + .catch((error) => { + this.toast.showError(error); + }); case PolicyComponentServiceType.ADMIN: - return (this.service as AdminService).activateLabelPolicy().then(() => { - this.toast.showInfo('POLICY.PRIVATELABELING.ACTIVATED', true); - setTimeout(() => { - this.loadingImages = true; - this.getData().then(data => { - - if (data.policy) { - this.data = data.policy; - this.applyToConsole(data.policy); - this.loadImages(); - } - }); - }, 1000); - }).catch(error => { - this.toast.showError(error); - }); + return (this.service as AdminService) + .activateLabelPolicy() + .then(() => { + this.toast.showInfo('POLICY.PRIVATELABELING.ACTIVATED', true); + setTimeout(() => { + this.getData().then((data) => { + if (data.policy) { + this.data = data.policy; + this.applyToConsole(data.policy); + } + }); + }, 1000); + }) + .catch((error) => { + this.toast.showError(error); + }); } } @@ -649,13 +557,16 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { } public resetPolicy(): Promise { - return (this.service as ManagementService).resetLabelPolicyToDefault().then(() => { - this.toast.showInfo('POLICY.PRIVATELABELING.RESET', true); - setTimeout(() => { - this.fetchData(); + return (this.service as ManagementService) + .resetLabelPolicyToDefault() + .then(() => { + this.toast.showInfo('POLICY.PRIVATELABELING.RESET', true); + setTimeout(() => { + this.fetchData(); + }); + }) + .catch((error) => { + this.toast.showError(error); }); - }).catch(error => { - this.toast.showError(error); - }); } } diff --git a/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts b/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts index ca4bca8f95..1e8bfc12a3 100644 --- a/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts +++ b/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts @@ -1,6 +1,5 @@ import { Component, Inject } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { DomSanitizer } from '@angular/platform-browser'; import { AssetService } from 'src/app/services/asset.service'; import { GrpcAuthService } from 'src/app/services/grpc-auth.service'; import { ToastService } from 'src/app/services/toast.service'; @@ -17,9 +16,7 @@ export class ProfilePictureComponent { @Inject(MAT_DIALOG_DATA) public data: any, private toast: ToastService, private assetService: AssetService, - private sanitizer: DomSanitizer, - ) { - } + ) {} public onDrop(event: any): Promise | void { const filelist: FileList = event.target.files; @@ -33,25 +30,26 @@ export class ProfilePictureComponent { } public deletePic(): void { - this.authService.removeMyAvatar().then(() => { - this.toast.showInfo('USER.PROFILE.AVATAR.DELETESUCCESS', true); - this.data.profilePic = null; - }).catch(error => { - this.toast.showError(error); - }); + this.authService + .removeMyAvatar() + .then(() => { + this.toast.showInfo('USER.PROFILE.AVATAR.DELETESUCCESS', true); + this.data.profilePic = null; + }) + .catch((error) => { + this.toast.showError(error); + }); } private handleUploadPromise(task: Promise): Promise { - return task.then(() => { - this.toast.showInfo('POLICY.TOAST.UPLOADSUCCESS', true); - this.assetService.load('users/me/avatar').then(data => { - const objectURL = URL.createObjectURL(data); - const pic = this.sanitizer.bypassSecurityTrustUrl(objectURL); - this.data.profilePic = pic; - }).catch(error => { - this.toast.showError(error); - }); - }).catch(error => this.toast.showError(error)); + return task + .then(() => { + this.toast.showInfo('POLICY.TOAST.UPLOADSUCCESS', true); + this.authService.getMyUser().then((resp) => { + this.data.profilePic = resp.user?.human?.profile?.avatarUrl ?? ''; + }); + }) + .catch((error) => this.toast.showError(error)); } public closeDialog(): void { diff --git a/console/src/app/services/asset.service.ts b/console/src/app/services/asset.service.ts index 1a10a26e23..c165f5050f 100644 --- a/console/src/app/services/asset.service.ts +++ b/console/src/app/services/asset.service.ts @@ -80,13 +80,16 @@ export class AssetService { } private async getServiceUrl(): Promise { - const url = await this.http.get('./assets/environment.json') - .toPromise().then((data: any) => { + const url = await this.http + .get('./assets/environment.json') + .toPromise() + .then((data: any) => { if (data && data.assetServiceUrl) { console.log(data.assetServiceUrl); return data.assetServiceUrl; } - }).catch(error => { + }) + .catch((error) => { console.error(error); }); @@ -103,29 +106,11 @@ export class AssetService { } return this.serviceUrl.then((url) => - this.http.post(`${url}/assets/v1/${endpoint}`, - body, - { + this.http + .post(`${url}/assets/v1/${endpoint}`, body, { headers: headers, - }).toPromise(), - ); - } - - public load(endpoint: string, orgId?: string): Promise { - const headers: any = { - [authorizationKey]: `${bearerPrefix} ${this.accessToken}`, - }; - - if (orgId) { - headers[orgKey] = `${orgId}`; - } - - return this.serviceUrl.then((url) => - this.http.get(`${url}/assets/v1/${endpoint}`, - { - responseType: 'blob', - headers: headers, - }).toPromise(), + }) + .toPromise(), ); } } diff --git a/internal/api/grpc/admin/label_policy.go b/internal/api/grpc/admin/label_policy.go index 54df2a414f..77c1d53617 100644 --- a/internal/api/grpc/admin/label_policy.go +++ b/internal/api/grpc/admin/label_policy.go @@ -13,7 +13,7 @@ func (s *Server) GetLabelPolicy(ctx context.Context, req *admin_pb.GetLabelPolic if err != nil { return nil, err } - return &admin_pb.GetLabelPolicyResponse{Policy: policy_grpc.ModelLabelPolicyToPb(policy)}, nil + return &admin_pb.GetLabelPolicyResponse{Policy: policy_grpc.ModelLabelPolicyToPb(policy, s.assetsAPIDomain)}, nil } func (s *Server) GetPreviewLabelPolicy(ctx context.Context, req *admin_pb.GetPreviewLabelPolicyRequest) (*admin_pb.GetPreviewLabelPolicyResponse, error) { @@ -21,7 +21,7 @@ func (s *Server) GetPreviewLabelPolicy(ctx context.Context, req *admin_pb.GetPre if err != nil { return nil, err } - return &admin_pb.GetPreviewLabelPolicyResponse{Policy: policy_grpc.ModelLabelPolicyToPb(policy)}, nil + return &admin_pb.GetPreviewLabelPolicyResponse{Policy: policy_grpc.ModelLabelPolicyToPb(policy, s.assetsAPIDomain)}, nil } func (s *Server) UpdateLabelPolicy(ctx context.Context, req *admin_pb.UpdateLabelPolicyRequest) (*admin_pb.UpdateLabelPolicyResponse, error) { diff --git a/internal/api/grpc/management/policy_label.go b/internal/api/grpc/management/policy_label.go index a5abcd3146..621be7aadf 100644 --- a/internal/api/grpc/management/policy_label.go +++ b/internal/api/grpc/management/policy_label.go @@ -14,7 +14,7 @@ func (s *Server) GetLabelPolicy(ctx context.Context, req *mgmt_pb.GetLabelPolicy if err != nil { return nil, err } - return &mgmt_pb.GetLabelPolicyResponse{Policy: policy_grpc.ModelLabelPolicyToPb(policy), IsDefault: policy.IsDefault}, nil + return &mgmt_pb.GetLabelPolicyResponse{Policy: policy_grpc.ModelLabelPolicyToPb(policy, s.assetAPIPrefix), IsDefault: policy.IsDefault}, nil } func (s *Server) GetPreviewLabelPolicy(ctx context.Context, req *mgmt_pb.GetPreviewLabelPolicyRequest) (*mgmt_pb.GetPreviewLabelPolicyResponse, error) { @@ -22,7 +22,7 @@ func (s *Server) GetPreviewLabelPolicy(ctx context.Context, req *mgmt_pb.GetPrev if err != nil { return nil, err } - return &mgmt_pb.GetPreviewLabelPolicyResponse{Policy: policy_grpc.ModelLabelPolicyToPb(policy), IsDefault: policy.IsDefault}, nil + return &mgmt_pb.GetPreviewLabelPolicyResponse{Policy: policy_grpc.ModelLabelPolicyToPb(policy, s.assetAPIPrefix), IsDefault: policy.IsDefault}, nil } func (s *Server) GetDefaultLabelPolicy(ctx context.Context, req *mgmt_pb.GetDefaultLabelPolicyRequest) (*mgmt_pb.GetDefaultLabelPolicyResponse, error) { @@ -30,7 +30,7 @@ func (s *Server) GetDefaultLabelPolicy(ctx context.Context, req *mgmt_pb.GetDefa if err != nil { return nil, err } - return &mgmt_pb.GetDefaultLabelPolicyResponse{Policy: policy_grpc.ModelLabelPolicyToPb(policy)}, nil + return &mgmt_pb.GetDefaultLabelPolicyResponse{Policy: policy_grpc.ModelLabelPolicyToPb(policy, s.assetAPIPrefix)}, nil } func (s *Server) AddCustomLabelPolicy(ctx context.Context, req *mgmt_pb.AddCustomLabelPolicyRequest) (*mgmt_pb.AddCustomLabelPolicyResponse, error) { diff --git a/internal/api/grpc/policy/label_policy.go b/internal/api/grpc/policy/label_policy.go index 2b8a0ba4fb..565bf48c82 100644 --- a/internal/api/grpc/policy/label_policy.go +++ b/internal/api/grpc/policy/label_policy.go @@ -2,11 +2,12 @@ package policy import ( "github.com/caos/zitadel/internal/api/grpc/object" + "github.com/caos/zitadel/internal/domain" "github.com/caos/zitadel/internal/query" policy_pb "github.com/caos/zitadel/pkg/grpc/policy" ) -func ModelLabelPolicyToPb(policy *query.LabelPolicy) *policy_pb.LabelPolicy { +func ModelLabelPolicyToPb(policy *query.LabelPolicy, assetPrefix string) *policy_pb.LabelPolicy { return &policy_pb.LabelPolicy{ IsDefault: policy.IsDefault, PrimaryColor: policy.Light.PrimaryColor, @@ -17,11 +18,11 @@ func ModelLabelPolicyToPb(policy *query.LabelPolicy) *policy_pb.LabelPolicy { BackgroundColorDark: policy.Dark.BackgroundColor, WarnColorDark: policy.Dark.WarnColor, FontColorDark: policy.Dark.FontColor, - FontUrl: policy.FontURL, - LogoUrl: policy.Light.LogoURL, - LogoUrlDark: policy.Dark.LogoURL, - IconUrl: policy.Light.IconURL, - IconUrlDark: policy.Dark.IconURL, + FontUrl: domain.AssetURL(assetPrefix, policy.ResourceOwner, policy.FontURL), + LogoUrl: domain.AssetURL(assetPrefix, policy.ResourceOwner, policy.Light.LogoURL), + LogoUrlDark: domain.AssetURL(assetPrefix, policy.ResourceOwner, policy.Dark.LogoURL), + IconUrl: domain.AssetURL(assetPrefix, policy.ResourceOwner, policy.Light.IconURL), + IconUrlDark: domain.AssetURL(assetPrefix, policy.ResourceOwner, policy.Dark.IconURL), DisableWatermark: policy.WatermarkDisabled, HideLoginNameSuffix: policy.HideLoginNameSuffix, diff --git a/internal/domain/asset.go b/internal/domain/asset.go index bd778260c8..f0ae642ed2 100644 --- a/internal/domain/asset.go +++ b/internal/domain/asset.go @@ -37,3 +37,10 @@ type AssetInfo struct { func GetHumanAvatarAssetPath(userID string) string { return UsersAssetPath + "/" + userID + AvatarAssetPath } + +func AssetURL(prefix, resourceOwner, key string) string { + if prefix == "" || resourceOwner == "" || key == "" { + return "" + } + return prefix + resourceOwner + "/" + key +}