TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-02-28 16:27:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: return full url of assets in admin and mgmt api (#3157)

Browse Source 
* fix: return full url of assets in admin and mgmt api

* remove asset loading over asset service

* remove unused code

Co-authored-by: Max Peintner <max@caos.ch>
This commit is contained in:
Livio Amstutz 2022-02-04 15:02:18 +01:00 committed by GitHub
parent 31bdd3f431
commit ab62f2d79d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 588 additions and 626 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
console/src/app/modules/policies/private-labeling-policy/preview/preview.component.html
View File

@ -1,34 +1,47 @@
<div class="preview" *ngIf="policy">
<span class="label">{{label}}</span>
<div class="dashed" [ngClass]="{'dark': theme === Theme.DARK, 'light': theme === Theme.LIGHT}" [style.background]="theme === Theme.DARK ? policy.backgroundColorDark : policy.backgroundColor">
<div class="dashed" [ngClass]="{'dark': theme === Theme.DARK, 'light': theme === Theme.LIGHT}"
[style.background]="theme === Theme.DARK ? policy.backgroundColorDark : policy.backgroundColor">
<div class="login-wrapper" [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor">
<ng-container *ngIf="preview === Preview.PREVIEW; else currentimgs">
<img *ngIf="images['previewLogo'] && theme === Theme.LIGHT" [src]="images['previewLogo']" alt="logo-mock" />
<img *ngIf="images['previewDarkLogo'] && theme === Theme.DARK" [src]="images['previewDarkLogo']" alt="logo-mock" />
<img *ngIf="policy.logoUrl && theme === Theme.LIGHT" [src]="policy.logoUrl" alt="logo-mock" />
<img *ngIf="policy.logoUrlDark && theme === Theme.DARK" [src]="policy.logoUrlDark" alt="logo-mock" />
</ng-container>
<ng-template #currentimgs>
<img *ngIf="images['logo'] && theme === Theme.LIGHT" [src]="images['logo']" alt="logo-mock" />
<img *ngIf="images['darkLogo'] && theme === Theme.DARK" [src]="images['darkLogo']" alt="logo-mock" />
<img *ngIf="policy.logoUrl && theme === Theme.LIGHT" [src]="policy.logoUrl" alt="logo-mock" />
<img *ngIf="policy.logoUrlDark && theme === Theme.DARK" [src]="policy.logoUrlDark" alt="logo-mock" />
</ng-template>
<h1 [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor">{{'POLICY.PRIVATELABELING.PREVIEW.TITLE' | translate}}</h1>
<p [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor" class="desc-text">{{'POLICY.PRIVATELABELING.PREVIEW.SECOND' | translate}}</p>
<h1 [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor">
{{'POLICY.PRIVATELABELING.PREVIEW.TITLE' | translate}}</h1>
<p [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor" class="desc-text">
{{'POLICY.PRIVATELABELING.PREVIEW.SECOND' | translate}}</p>
<cnsl-form-field class="formfield">
<cnsl-label>Loginname</cnsl-label>
<input cnslInput [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor" value="road.runner"/>
<input cnslInput [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor"
value="road.runner" />
</cnsl-form-field>
<div class="error-msg" [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor">
<i class="las la-exclamation-circle" [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor"></i>
<span [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor">{{'POLICY.PRIVATELABELING.PREVIEW.ERROR' | translate}}</span>
<div class="error-msg" [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor">
<i class="las la-exclamation-circle"
[style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor"></i>
<span
[style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor">{{'POLICY.PRIVATELABELING.PREVIEW.ERROR'
| translate}}</span>
</div>
<div class="btn-wrapper">
<button mat-stroked-button [style.color]="theme === Theme.DARK ? policy.primaryColorDark : policy.primaryColor">{{'POLICY.PRIVATELABELING.PREVIEW.SECONDARYBUTTON' | translate}}</button>
<button *ngIf="theme === Theme.DARK" mat-raised-button [style.background]="policy.primaryColorDark" [style.color]="policy.primaryColorDark === '#ffffff' ? '#000000' : '#ffffff'">{{'POLICY.PRIVATELABELING.PREVIEW.PRIMARYBUTTON' | translate}}</button>
<button *ngIf="theme === Theme.LIGHT" mat-raised-button [style.background]="policy.primaryColor" [style.color]="policy.primaryColor === '#ffffff' ? '#000000' : '#ffffff'">{{'POLICY.PRIVATELABELING.PREVIEW.PRIMARYBUTTON' | translate}}</button>
<button mat-stroked-button
[style.color]="theme === Theme.DARK ? policy.primaryColorDark : policy.primaryColor">{{'POLICY.PRIVATELABELING.PREVIEW.SECONDARYBUTTON'
| translate}}</button>
<button *ngIf="theme === Theme.DARK" mat-raised-button [style.background]="policy.primaryColorDark"
[style.color]="policy.primaryColorDark === '#ffffff' ? '#000000' : '#ffffff'">{{'POLICY.PRIVATELABELING.PREVIEW.PRIMARYBUTTON'
| translate}}</button>
<button *ngIf="theme === Theme.LIGHT" mat-raised-button [style.background]="policy.primaryColor"
[style.color]="policy.primaryColor === '#ffffff' ? '#000000' : '#ffffff'">{{'POLICY.PRIVATELABELING.PREVIEW.PRIMARYBUTTON'
| translate}}</button>
</div>
</div>
</div>
</div>
</div>

3
console/src/app/modules/policies/private-labeling-policy/preview/preview.component.ts
View File

@ -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<void> = of();
private destroyed$: Subject<void> = 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(() => {

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

@ -1,287 +1,335 @@
<div class="policy enlarged-container">
<div class="header">
<a [routerLink]="[ serviceType === PolicyComponentServiceType.ADMIN ? '/iam/policies' : '/org']" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
<div class="col">
<h1>{{'POLICY.PRIVATELABELING.TITLE' | translate}}</h1>
<p>{{'POLICY.PRIVATELABELING.DESCRIPTION' | translate}}</p>
</div>
<div class="policy enlarged-container">
<div class="header">
<a [routerLink]="[ serviceType === PolicyComponentServiceType.ADMIN ? '/iam/policies' : '/org']" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
<div class="col">
<h1>{{'POLICY.PRIVATELABELING.TITLE' | translate}}</h1>
<p>{{'POLICY.PRIVATELABELING.DESCRIPTION' | translate}}</p>
</div>
<p class="desc">{{'POLICY.PRIVATELABELING.PREVIEW_DESCRIPTION' | translate}}</p>
<cnsl-info-section *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</cnsl-info-section>
</div>
<p class="desc">{{'POLICY.PRIVATELABELING.PREVIEW_DESCRIPTION' | translate}}</p>
<cnsl-info-section *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</cnsl-info-section>
<cnsl-info-section *ngIf="serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) === false" [featureLink]="['/org/features']" class="info" [type]="InfoSectionType.WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'label_policy.private_label'})"></span>
<cnsl-info-section
*ngIf="serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) === false"
[featureLink]="['/org/features']" class="info" [type]="InfoSectionType.WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'label_policy.private_label'})"></span>
</cnsl-info-section>
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
</div>
<div class="top-row">
<div>
<p>{{'POLICY.PRIVATELABELING.THEME' | translate}}</p>
<div class="theme-changer">
<button (click)="theme = Theme.LIGHT" matTooltip="{{'POLICY.PRIVATELABELING.LIGHT' | translate}}" class="light" [ngClass]="{'active': theme === Theme.LIGHT}" >
<i class="icon las la-edit"></i>
</button>
<button (click)="theme = Theme.DARK" matTooltip="{{'POLICY.PRIVATELABELING.DARK' | translate}}" class="dark" [ngClass]="{'active': theme === Theme.DARK}" >
<i class="icon las la-edit"></i>
</button>
</div>
</div>
<span class="fill-space"></span>
<ng-template cnslHasRole [hasRole]="['policy.delete']">
<button class="reset-button" *ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
matTooltip="{{'POLICY.RESET' | translate}}" color="warn" (click)="removePolicy()" mat-stroked-button>
{{'POLICY.RESET' | translate}}
</button>
</ng-template>
<button class="activate-button" [disabled]="serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) === false" mat-raised-button color="primary" (click)="activatePolicy()">
{{'POLICY.PRIVATELABELING.ACTIVATEPREVIEW' | translate}}
</button>
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
</div>
<div *ngIf="previewData && data" class="lab-policy-content">
<mat-accordion class="settings">
<mat-expansion-panel class="expansion">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-image"></i>
Logo</div>
</mat-panel-title>
<mat-panel-description>
</mat-panel-description>
</mat-expansion-panel-header>
<p class="description">{{'POLICY.PRIVATELABELING.USEOFLOGO' | translate}}</p>
<cnsl-info-section class="max-size-desc"> {{'POLICY.PRIVATELABELING.MAXSIZE' | translate}}</cnsl-info-section>
<cnsl-info-section class="max-size-desc"> {{'POLICY.PRIVATELABELING.EMAILNOSVG' | translate}}</cnsl-info-section>
<!-- <span class="title">{{ theme === Theme.DARK ? ('POLICY.PRIVATELABELING.DARK' | translate) : ('POLICY.PRIVATELABELING.LIGHT' | translate)}}</span> -->
<div class="logo-setup-wrapper">
<div class="part">
<span class="label">Logo</span>
<mat-spinner class="spinner" color="primary" diameter="25" *ngIf="loadingImages"></mat-spinner>
<container [ngSwitch]="theme">
<div class="logo-view" *ngSwitchCase="Theme.DARK">
<div class="img-wrapper mat-elevation-z3" *ngIf="images['previewDarkLogo']" >
<mat-icon matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" class="dl-btn" (click)="deleteAsset(AssetType.LOGO, theme)">remove_circle</mat-icon>
<img matTooltip="Preview" class="prev" [src]="images['previewDarkLogo']" alt="dark logo preview"/>
</div>
<span class="fill-space"></span>
<div class="img-wrapper" *ngIf="images['darkLogo']">
<img matTooltip="Current" class="curr" [src]="images['darkLogo']" alt="dark logo"/>
</div>
</div>
<div class="logo-view" *ngSwitchCase="Theme.LIGHT">
<div class="img-wrapper" *ngIf="images['previewLogo']">
<mat-icon matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" class="dl-btn" (click)="deleteAsset(AssetType.LOGO, theme)">remove_circle</mat-icon>
<img matTooltip="Preview" class="prev" [src]="images['previewLogo']" alt="logo preview"/>
</div>
<span class="fill-space"></span>
<div class="img-wrapper" *ngIf="images['logo']">
<img matTooltip="Current" class="curr" [src]="images['logo']" alt="logo"/>
</div>
</div>
</container>
<div class="dropzone" cnslDropzone (hovered)="toggleHoverLogo(theme, $event)"
(dropped)="onDropLogo(theme, $event)"
[class.hovering]="isHoveringOverDarkLogo">
<label class="file-label">
<i class="icon las la-image"></i>
<span>{{isHoveringOverDarkLogo ? ('POLICY.PRIVATELABELING.RELEASE' | translate): ('POLICY.PRIVATELABELING.DROP' | translate)}}</span>
<input #selectedFile style="display: none;" class="file-input" type="file" (change)="onDropLogo(theme, $any($event.target).files)">
<a class="btn" *ngIf="serviceType === PolicyComponentServiceType.ADMIN || (serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async))" (click)="$event.preventDefault(); selectedFile.click();">{{'POLICY.PRIVATELABELING.BTN' | translate}}</a>
</label>
</div>
</div>
<div class="part">
<span class="label">Icon</span>
<mat-spinner class="spinner" color="primary" diameter="25" *ngIf="loadingImages"></mat-spinner>
<container [ngSwitch]="theme">
<div class="logo-view" *ngSwitchCase="Theme.DARK">
<div class="img-wrapper" *ngIf="images['previewDarkIcon']">
<mat-icon matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" class="dl-btn" (click)="deleteAsset(AssetType.ICON, theme)">remove_circle</mat-icon>
<img matTooltip="Preview" class="prev" [src]="images['previewDarkIcon']" alt="dark icon preview"/>
</div>
<span class="fill-space"></span>
<div class="img-wrapper" *ngIf="images['darkIcon']">
<!-- <mat-icon matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" class="dl-btn" (click)="deleteAsset(AssetType.ICON,theme, Preview.CURRENT)">remove_circle</mat-icon> -->
<img matTooltip="Current" class="curr" [src]="images['darkIcon']" alt="dark icon"/>
</div>
</div>
<div class="logo-view" *ngSwitchCase="Theme.LIGHT">
<div class="img-wrapper" *ngIf="images['previewIcon']">
<mat-icon matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" class="dl-btn" (click)="deleteAsset(AssetType.ICON,theme)">remove_circle</mat-icon>
<img matTooltip="Preview" class="prev" [src]="images['previewIcon']" alt="icon preview"/>
</div>
<span class="fill-space"></span>
<div class="img-wrapper" *ngIf="images['icon']" >
<!-- <mat-icon matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" class="dl-btn" (click)="deleteAsset(AssetType.ICON,theme, Preview.CURRENT)">remove_circle</mat-icon> -->
<img matTooltip="Current" class="curr"[src]="images['icon']" alt="icon"/>
</div>
</div>
</container>
<div class="dropzone" cnslDropzone (hovered)="toggleHoverIcon(theme, $event)"
(dropped)="onDropIcon(theme, $event)"
[class.hovering]="isHoveringOverDarkIcon">
<label class="file-label">
<i class="icon las la-image"></i>
<span>{{isHoveringOverDarkIcon ? ('POLICY.PRIVATELABELING.RELEASE' | translate): ('POLICY.PRIVATELABELING.DROP' | translate)}}</span>
<input #selectedFileIcon style="display: none;" class="file-input" type="file" (change)="onDropIcon(theme, $any($event.target).files)">
<a class="btn" *ngIf="serviceType === PolicyComponentServiceType.ADMIN || (serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async))" (click)="$event.preventDefault(); selectedFileIcon.click();">{{'POLICY.PRIVATELABELING.BTN' | translate}}</a>
</label>
</div>
</div>
</div>
</mat-expansion-panel>
<mat-expansion-panel class="expansion" [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-palette"></i>
{{'POLICY.PRIVATELABELING.COLORS' | translate}}</div>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-container *ngIf="theme === Theme.DARK">
<div class="colors" *ngIf="data && previewData">
<div class="color">
<cnsl-color [colorType]="ColorType.BACKGROUNDDARK" (previewChanged)="previewData.backgroundColorDark = $event" name="Background Color" [color]="data.backgroundColorDark" [previewColor]="previewData.backgroundColorDark"></cnsl-color>
</div>
<div class="color">
<cnsl-color [colorType]="ColorType.PRIMARY"(previewChanged)="previewData.primaryColorDark = $event" name="Primary Color" [color]="data.primaryColorDark" [previewColor]="previewData.primaryColorDark"></cnsl-color>
</div>
<div class="color">
<cnsl-color [colorType]="ColorType.WARN" (previewChanged)="previewData.warnColorDark = $event" name="Warn Color" [color]="data.warnColorDark" [previewColor]="previewData.warnColorDark"></cnsl-color>
</div>
<div class="color">
<cnsl-color [colorType]="ColorType.FONTDARK"(previewChanged)="previewData.fontColorDark = $event" name="Font Color" [color]="data.fontColorDark" [previewColor]="previewData.fontColorDark"></cnsl-color>
</div>
</div>
</ng-container>
<ng-container *ngIf="theme === Theme.LIGHT">
<div class="colors" *ngIf="data && previewData">
<div class="color">
<cnsl-color [colorType]="ColorType.BACKGROUNDLIGHT" (previewChanged)="previewData.backgroundColor = $event" name="Background Color" [color]="data.backgroundColor" [previewColor]="previewData.backgroundColor"></cnsl-color>
</div>
<div class="color">
<cnsl-color [colorType]="ColorType.PRIMARY" (previewChanged)="previewData.primaryColor = $event" name="Primary Color" [color]="data.primaryColor" [previewColor]="previewData.primaryColor"></cnsl-color>
</div>
<div class="color">
<cnsl-color [colorType]="ColorType.WARN" name="Warn Color" (previewChanged)="previewData.warnColor= $event" [color]="data.warnColor" [previewColor]="previewData.warnColor"></cnsl-color>
</div>
<div class="color">
<cnsl-color [colorType]="ColorType.FONTLIGHT" (previewChanged)="previewData.fontColor = $event" name="Font Color" [color]="data.fontColor" [previewColor]="previewData.fontColor"></cnsl-color>
</div>
</div>
</ng-container>
<div class="clr-btn-wrapper">
<button color="primary" mat-raised-button (click)="savePolicy()">{{'ACTIONS.SAVE' | translate}}</button>
</div>
</mat-expansion-panel>
<mat-expansion-panel class="expansion">
<mat-expansion-panel-header class="header">
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-font"></i>
{{'POLICY.PRIVATELABELING.FONT' | translate}}</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="fonts">
<cnsl-info-section class="info-section">{{'POLICY.PRIVATELABELING.FONTINLOGINONLY' | translate}}</cnsl-info-section>
<div class="font-preview mat-elevation-z3" *ngIf="preview === Preview.PREVIEW && previewData.fontUrl || preview === Preview.CURRENT && data.fontUrl">
<mat-icon class="icon">text_fields</mat-icon>
<span>ABC • abc • 123</span>
<span class="fill-space"></span>
<button [disabled]="serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) === false" matTooltip="{{'ACTIONS.REMOVE' | translate}}" mat-icon-button color="warn" (click)="deleteFont()"><mat-icon>remove_circle</mat-icon></button>
</div>
<div class="dropzone" cnslDropzone (hovered)="toggleHoverFont($event)"
(dropped)="onDropFont($event)"
[class.hovering]="isHoveringOverFont">
<label class="file-label">
<i class="icon las la-file"></i>
<span >{{isHoveringOverFont ? ('POLICY.PRIVATELABELING.RELEASEFONT' | translate): ('POLICY.PRIVATELABELING.DROPFONT' | translate)}}</span>
<input #selectedFontFile style="display: none;" class="file-input" type="file" (change)="onDropFont($any($event.target).files)">
<a class="btn" *ngIf="serviceType === PolicyComponentServiceType.ADMIN || (serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async))" (click)="selectedFontFile.click()">{{'POLICY.PRIVATELABELING.BTN' | translate}}</a>
</label>
</div>
</div>
</mat-expansion-panel>
<mat-expansion-panel class="expansion">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-universal-access"></i>
{{'POLICY.PRIVATELABELING.ADVANCEDBEHAVIOR' | translate}}
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="adv-container" *ngIf="previewData">
<ng-container
*ngIf="serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) === false">
<cnsl-info-section [featureLink]="['/org/features']" class="info" [type]="InfoSectionType.WARN"
>
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'label_policy.private_label'})"></span>
</cnsl-info-section>
</ng-container>
<mat-slide-toggle class="toggle" color="primary" ngDefaultControl [disabled]="serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) === false"
[(ngModel)]="previewData.hideLoginNameSuffix" (change)="savePolicy()">
{{'POLICY.DATA.HIDELOGINNAMESUFFIX' | translate}}
</mat-slide-toggle>
<ng-container
*ngIf="serviceType === PolicyComponentServiceType.MGMT && (['label_policy.watermark'] | hasFeature | async) === false">
<cnsl-info-section [featureLink]="['/org/features']" class="info" type]="InfoSectionType.WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'label_policy.watermark'})"></span>
</cnsl-info-section>
</ng-container>
<mat-slide-toggle class="toggle" color="primary" ngDefaultControl [disabled]="serviceType === PolicyComponentServiceType.MGMT && (['label_policy.watermark'] | hasFeature | async) === false"
[(ngModel)]="previewData.disableWatermark" (change)="savePolicy()">
{{'POLICY.DATA.DISABLEWATERMARK' | translate}}
</mat-slide-toggle>
</div>
</mat-expansion-panel>
</mat-accordion>
<div class="preview-wrapper">
<!-- <cnsl-preview class="prev" label="CURRENT CONFIG" [policy]="data"></cnsl-preview> -->
<div class="col">
<button color="primary" mat-raised-button class="preview-changer" (click)="preview = preview === Preview.PREVIEW ? Preview.CURRENT : Preview.PREVIEW" matTooltip="{{'POLICY.PRIVATELABELING.CHANGEVIEW' | translate}}" [ngClass]="{'active': preview === Preview.PREVIEW}" >
<span><span [ngClass]="{'strong': preview === Preview.PREVIEW}">P</span> / <span [ngClass]="{'strong': preview === Preview.CURRENT}">C</span></span>
</button>
<cnsl-preview *ngIf="preview === Preview.CURRENT" [refresh]="refreshPreview" [images]="images" [preview]="preview" [theme]="theme" class="prev" label="CURRENT" [policy]="data"></cnsl-preview>
<cnsl-preview *ngIf="preview === Preview.PREVIEW" [refresh]="refreshPreview" [images]="images" [preview]="preview" [theme]="theme" class="prev" label="PREVIEW" [policy]="previewData"></cnsl-preview>
</div>
<div class="top-row">
<div>
<p>{{'POLICY.PRIVATELABELING.THEME' | translate}}</p>
<div class="theme-changer">
<button (click)="theme = Theme.LIGHT" matTooltip="{{'POLICY.PRIVATELABELING.LIGHT' | translate}}" class="light"
[ngClass]="{'active': theme === Theme.LIGHT}">
<i class="icon las la-edit"></i>
</button>
<button (click)="theme = Theme.DARK" matTooltip="{{'POLICY.PRIVATELABELING.DARK' | translate}}" class="dark"
[ngClass]="{'active': theme === Theme.DARK}">
<i class="icon las la-edit"></i>
</button>
</div>
</div>
<cnsl-policy-grid class="grid" [currentPolicy]="currentPolicy" [type]="serviceType" tagForFilter="text"></cnsl-policy-grid>
<span class="fill-space"></span>
<ng-template cnslHasRole [hasRole]="['policy.delete']">
<button class="reset-button" *ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
matTooltip="{{'POLICY.RESET' | translate}}" color="warn" (click)="removePolicy()" mat-stroked-button>
{{'POLICY.RESET' | translate}}
</button>
</ng-template>
<button class="activate-button"
[disabled]="serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) === false"
mat-raised-button color="primary" (click)="activatePolicy()">
{{'POLICY.PRIVATELABELING.ACTIVATEPREVIEW' | translate}}
</button>
</div>
<div *ngIf="previewData && data" class="lab-policy-content">
<mat-accordion class="settings">
<mat-expansion-panel class="expansion">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-image"></i>
Logo
</div>
</mat-panel-title>
<mat-panel-description>
</mat-panel-description>
</mat-expansion-panel-header>
<p class="description">{{'POLICY.PRIVATELABELING.USEOFLOGO' | translate}}</p>
<cnsl-info-section class="max-size-desc"> {{'POLICY.PRIVATELABELING.MAXSIZE' | translate}}</cnsl-info-section>
<cnsl-info-section class="max-size-desc"> {{'POLICY.PRIVATELABELING.EMAILNOSVG' | translate}}
</cnsl-info-section>
<!-- <span class="title">{{ theme === Theme.DARK ? ('POLICY.PRIVATELABELING.DARK' | translate) : ('POLICY.PRIVATELABELING.LIGHT' | translate)}}</span> -->
<div class="logo-setup-wrapper">
<div class="part">
<span class="label">Logo</span>
<!-- <mat-spinner class="spinner" color="primary" diameter="25" *ngIf="loadingImages"></mat-spinner> -->
<container [ngSwitch]="theme">
<div class="logo-view" *ngSwitchCase="Theme.DARK">
<div class="img-wrapper mat-elevation-z3" *ngIf="previewData.logoUrlDark">
<mat-icon matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" class="dl-btn"
(click)="deleteAsset(AssetType.LOGO, theme)">remove_circle</mat-icon>
<img matTooltip="Preview" class="prev" [src]="previewData.logoUrlDark" alt="dark logo preview" />
</div>
<span class="fill-space"></span>
<div class="img-wrapper" *ngIf="data.logoUrlDark">
<img matTooltip="Current" class="curr" [src]="data.logoUrlDark" alt="dark logo" />
</div>
</div>
<div class="logo-view" *ngSwitchCase="Theme.LIGHT">
<div class="img-wrapper" *ngIf="previewData.logoUrl">
<mat-icon matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" class="dl-btn"
(click)="deleteAsset(AssetType.LOGO, theme)">remove_circle</mat-icon>
<img matTooltip="Preview" class="prev" [src]="previewData.logoUrl" alt="logo preview" />
</div>
<span class="fill-space"></span>
<div class="img-wrapper" *ngIf="data.logoUrl">
<img matTooltip="Current" class="curr" [src]="data.logoUrl" alt="logo" />
</div>
</div>
</container>
<div class="dropzone" cnslDropzone (hovered)="toggleHoverLogo(theme, $event)"
(dropped)="onDropLogo(theme, $event)" [class.hovering]="isHoveringOverDarkLogo">
<label class="file-label">
<i class="icon las la-image"></i>
<span>{{isHoveringOverDarkLogo ? ('POLICY.PRIVATELABELING.RELEASE' | translate):
('POLICY.PRIVATELABELING.DROP' | translate)}}</span>
<input #selectedFile style="display: none;" class="file-input" type="file"
(change)="onDropLogo(theme, $any($event.target).files)">
<a class="btn"
*ngIf="serviceType === PolicyComponentServiceType.ADMIN || (serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async))"
(click)="$event.preventDefault(); selectedFile.click();">
{{'POLICY.PRIVATELABELING.BTN' | translate}}</a>
</label>
</div>
</div>
<div class="part">
<span class="label">Icon</span>
<container [ngSwitch]="theme">
<div class="logo-view" *ngSwitchCase="Theme.DARK">
<div class="img-wrapper" *ngIf="previewData.iconUrlDark">
<mat-icon matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" class="dl-btn"
(click)="deleteAsset(AssetType.ICON, theme)">remove_circle</mat-icon>
<img matTooltip="Preview" class="prev" [src]="previewData.iconUrlDark" alt="dark icon preview" />
</div>
<span class="fill-space"></span>
<div class="img-wrapper" *ngIf="data.iconUrlDark">
<img matTooltip="Current" class="curr" [src]="data.iconUrlDark" alt="dark icon" />
</div>
</div>
<div class="logo-view" *ngSwitchCase="Theme.LIGHT">
<div class="img-wrapper" *ngIf="previewData.iconUrl">
<mat-icon matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" class="dl-btn"
(click)="deleteAsset(AssetType.ICON,theme)">remove_circle</mat-icon>
<img matTooltip="Preview" class="prev" [src]="previewData.iconUrl" alt="icon preview" />
</div>
<span class="fill-space"></span>
<div class="img-wrapper" *ngIf="data.iconUrl">
<img matTooltip="Current" class="curr" [src]="data.iconUrl" alt="icon" />
</div>
</div>
</container>
<div class="dropzone" cnslDropzone (hovered)="toggleHoverIcon(theme, $event)"
(dropped)="onDropIcon(theme, $event)" [class.hovering]="isHoveringOverDarkIcon">
<label class="file-label">
<i class="icon las la-image"></i>
<span>{{isHoveringOverDarkIcon ? ('POLICY.PRIVATELABELING.RELEASE' | translate):
('POLICY.PRIVATELABELING.DROP' | translate)}}</span>
<input #selectedFileIcon style="display: none;" class="file-input" type="file"
(change)="onDropIcon(theme, $any($event.target).files)">
<a class="btn"
*ngIf="serviceType === PolicyComponentServiceType.ADMIN || (serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async))"
(click)="$event.preventDefault(); selectedFileIcon.click();">
{{'POLICY.PRIVATELABELING.BTN' | translate}}</a>
</label>
</div>
</div>
</div>
</mat-expansion-panel>
<mat-expansion-panel class="expansion" [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-palette"></i>
{{'POLICY.PRIVATELABELING.COLORS' | translate}}
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-container *ngIf="theme === Theme.DARK">
<div class="colors" *ngIf="data && previewData">
<div class="color">
<cnsl-color [colorType]="ColorType.BACKGROUNDDARK"
(previewChanged)="previewData.backgroundColorDark = $event" name="Background Color"
[color]="data.backgroundColorDark" [previewColor]="previewData.backgroundColorDark"></cnsl-color>
</div>
<div class="color">
<cnsl-color [colorType]="ColorType.PRIMARY" (previewChanged)="previewData.primaryColorDark = $event"
name="Primary Color" [color]="data.primaryColorDark" [previewColor]="previewData.primaryColorDark">
</cnsl-color>
</div>
<div class="color">
<cnsl-color [colorType]="ColorType.WARN" (previewChanged)="previewData.warnColorDark = $event"
name="Warn Color" [color]="data.warnColorDark" [previewColor]="previewData.warnColorDark"></cnsl-color>
</div>
<div class="color">
<cnsl-color [colorType]="ColorType.FONTDARK" (previewChanged)="previewData.fontColorDark = $event"
name="Font Color" [color]="data.fontColorDark" [previewColor]="previewData.fontColorDark"></cnsl-color>
</div>
</div>
</ng-container>
<ng-container *ngIf="theme === Theme.LIGHT">
<div class="colors" *ngIf="data && previewData">
<div class="color">
<cnsl-color [colorType]="ColorType.BACKGROUNDLIGHT"
(previewChanged)="previewData.backgroundColor = $event" name="Background Color"
[color]="data.backgroundColor" [previewColor]="previewData.backgroundColor"></cnsl-color>
</div>
<div class="color">
<cnsl-color [colorType]="ColorType.PRIMARY" (previewChanged)="previewData.primaryColor = $event"
name="Primary Color" [color]="data.primaryColor" [previewColor]="previewData.primaryColor"></cnsl-color>
</div>
<div class="color">
<cnsl-color [colorType]="ColorType.WARN" name="Warn Color"
(previewChanged)="previewData.warnColor= $event" [color]="data.warnColor"
[previewColor]="previewData.warnColor"></cnsl-color>
</div>
<div class="color">
<cnsl-color [colorType]="ColorType.FONTLIGHT" (previewChanged)="previewData.fontColor = $event"
name="Font Color" [color]="data.fontColor" [previewColor]="previewData.fontColor"></cnsl-color>
</div>
</div>
</ng-container>
<div class="clr-btn-wrapper">
<button color="primary" mat-raised-button (click)="savePolicy()">{{'ACTIONS.SAVE' | translate}}</button>
</div>
</mat-expansion-panel>
<mat-expansion-panel class="expansion">
<mat-expansion-panel-header class="header">
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-font"></i>
{{'POLICY.PRIVATELABELING.FONT' | translate}}
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="fonts">
<cnsl-info-section class="info-section">{{'POLICY.PRIVATELABELING.FONTINLOGINONLY' | translate}}
</cnsl-info-section>
<div class="font-preview mat-elevation-z3"
*ngIf="preview === Preview.PREVIEW && previewData.fontUrl || preview === Preview.CURRENT && data.fontUrl">
<mat-icon class="icon">text_fields</mat-icon>
<span>ABC • abc • 123</span>
<span class="fill-space"></span>
<button
[disabled]="serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) === false"
matTooltip="{{'ACTIONS.REMOVE' | translate}}" mat-icon-button color="warn" (click)="deleteFont()">
<mat-icon>remove_circle</mat-icon>
</button>
</div>
<div class="dropzone" cnslDropzone (hovered)="toggleHoverFont($event)" (dropped)="onDropFont($event)"
[class.hovering]="isHoveringOverFont">
<label class="file-label">
<i class="icon las la-file"></i>
<span>{{isHoveringOverFont ? ('POLICY.PRIVATELABELING.RELEASEFONT' | translate):
('POLICY.PRIVATELABELING.DROPFONT' | translate)}}</span>
<input #selectedFontFile style="display: none;" class="file-input" type="file"
(change)="onDropFont($any($event.target).files)">
<a class="btn"
*ngIf="serviceType === PolicyComponentServiceType.ADMIN || (serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async))"
(click)="selectedFontFile.click()">{{'POLICY.PRIVATELABELING.BTN' | translate}}</a>
</label>
</div>
</div>
</mat-expansion-panel>
<mat-expansion-panel class="expansion">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-universal-access"></i>
{{'POLICY.PRIVATELABELING.ADVANCEDBEHAVIOR' | translate}}
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="adv-container" *ngIf="previewData">
<ng-container
*ngIf="serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) === false">
<cnsl-info-section [featureLink]="['/org/features']" class="info" [type]="InfoSectionType.WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'label_policy.private_label'})"></span>
</cnsl-info-section>
</ng-container>
<mat-slide-toggle class="toggle" color="primary" ngDefaultControl
[disabled]="serviceType === PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) === false"
[(ngModel)]="previewData.hideLoginNameSuffix" (change)="savePolicy()">
{{'POLICY.DATA.HIDELOGINNAMESUFFIX' | translate}}
</mat-slide-toggle>
<ng-container
*ngIf="serviceType === PolicyComponentServiceType.MGMT && (['label_policy.watermark'] | hasFeature | async) === false">
<cnsl-info-section [featureLink]="['/org/features']" class="info" type]="InfoSectionType.WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'label_policy.watermark'})"></span>
</cnsl-info-section>
</ng-container>
<mat-slide-toggle class="toggle" color="primary" ngDefaultControl
[disabled]="serviceType === PolicyComponentServiceType.MGMT && (['label_policy.watermark'] | hasFeature | async) === false"
[(ngModel)]="previewData.disableWatermark" (change)="savePolicy()">
{{'POLICY.DATA.DISABLEWATERMARK' | translate}}
</mat-slide-toggle>
</div>
</mat-expansion-panel>
</mat-accordion>
<div class="preview-wrapper">
<!-- <cnsl-preview class="prev" label="CURRENT CONFIG" [policy]="data"></cnsl-preview> -->
<div class="col">
<button color="primary" mat-raised-button class="preview-changer"
(click)="preview = preview === Preview.PREVIEW ? Preview.CURRENT : Preview.PREVIEW"
matTooltip="{{'POLICY.PRIVATELABELING.CHANGEVIEW' | translate}}"
[ngClass]="{'active': preview === Preview.PREVIEW}">
<span><span [ngClass]="{'strong': preview === Preview.PREVIEW}">P</span> / <span
[ngClass]="{'strong': preview === Preview.CURRENT}">C</span></span>
</button>
<cnsl-preview *ngIf="preview === Preview.CURRENT" [refresh]="refreshPreview" [preview]="preview" [theme]="theme"
class="prev" label="CURRENT" [policy]="data"></cnsl-preview>
<cnsl-preview *ngIf="preview === Preview.PREVIEW" [refresh]="refreshPreview" [preview]="preview" [theme]="theme"
class="prev" label="PREVIEW" [policy]="previewData"></cnsl-preview>
</div>
</div>
</div>
<cnsl-policy-grid class="grid" [currentPolicy]="currentPolicy" [type]="serviceType" tagForFilter="text">
</cnsl-policy-grid>
</div>

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

@ -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<void> = 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<ManagementService>);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
break;
}
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
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<any> | 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<any> {
const handler = (prom: Promise<any>) => 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<any>) =>
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<any>) => {
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<any>): Promise<any> {
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<any>): Promise<any> {
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<any>[] = [];
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<any>[] = [];
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<MgmtGetPreviewLabelPolicyResponse.AsObject |
AdminGetPreviewLabelPolicyResponse.AsObject |
MgmtGetLabelPolicyResponse.AsObject |
AdminGetLabelPolicyResponse.AsObject> {
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<MgmtGetPreviewLabelPolicyResponse.AsObject |
AdminGetPreviewLabelPolicyResponse.AsObject |
MgmtGetLabelPolicyResponse.AsObject |
AdminGetLabelPolicyResponse.AsObject> {
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<any> {
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<any> {
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<any> {
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);
});
}
}

38
console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts
View File

@ -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<any> | 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<any>): Promise<any> {
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 {

35
console/src/app/services/asset.service.ts
View File

@ -80,13 +80,16 @@ export class AssetService {
}
private async getServiceUrl(): Promise<string> {
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<any> {
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(),
);
}
}

4
internal/api/grpc/admin/label_policy.go
View File

@ -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) {

6
internal/api/grpc/management/policy_label.go
View File

@ -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) {

13
internal/api/grpc/policy/label_policy.go
View File

@ -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,

7
internal/domain/asset.go
View File

@ -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
}