feat: label policy (#1708)

* feat: label policy proto extension * feat: label policy and activate event * feat: label policy asset events * feat: label policy asset commands * feat: add storage key * feat: storage key validation * feat: label policy asset tests * feat: label policy query side * feat: avatar * feat: avatar event * feat: human avatar * feat: avatar read side * feat: font on iam label policy * feat: label policy font * feat: possiblity to create bucket on put file * uplaoder * login policy logo * set bucket prefix * feat: avatar upload * feat: avatar upload * feat: use assets on command side * feat: fix human avatar removed event * feat: remove human avatar * feat: mock asset storage * feat: remove human avatar * fix(operator): add configuration of asset storage to zitadel operator * feat(console): private labeling policy (#1697) * private labeling component, routing, preview * font, colors, upload, i18n * show logo * fix: uniqueness (#1710) * fix: uniqueconstraint to lower * feat: change org * feat: org change test * feat: change org * fix: tests * fix: handle domain claims correctly * feat: update org Co-authored-by: fabi <[email protected]> * fix: handle domain claimed event correctly for service users (#1711) * fix: handle domain claimed event correctly on user view * fix: ignore domain claimed events for email notifications * fix: change org * handle org changed in read models correctly * fix: change org in user grant handler Co-authored-by: fabi <[email protected]> * fix: correct value (#1695) * docs(api): correct link (#1712) * upload service Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: fabi <[email protected]> Co-authored-by: Florian Forster <[email protected]> * feat: fix tests, * feat: remove assets from label policy * fix npm, set environment * lint ts * remove stylelinting * fix(operator): add mapping for console with changed unit tests * fix(operator): add secrets as env variables to pod * feat: remove human avatar * fix(operator): add secrets as env variables to pod * feat: map label policy * feat: labelpolicy, admin, mgmt, adv settings (#1715) * fetch label policy, mgmt, admin service * feat: advanced beh, links, add, update * lint ts * feat: watermark * feat: remove human avatar * feat: remove human avatar * feat: remove human avatar * feat: remove human avatar * feat: remove human avatar * feat: remove human avatar * feat: remove human avatar * feat: custom css * css * css * css * css * css * getobject * feat: dynamic handler * feat: varibale css * content info * css overwrite * feat: variablen css * feat: generate css file * feat: dark mode * feat: dark mode * fix logo css * feat: upload logos * dark mode with cookie * feat: handle images in login * avatar css and begin font * feat: avatar * feat: user avatar * caching of static assets in login * add avatar.js to main.html * feat: header dont show logo if no url * feat: label policy colors * feat: mock asset storage * feat: mock asset storage * feat: fix tests * feat: user avatar * feat: header logo * avatar * avatar * make it compatible with go 1.15 * feat: remove unused logos * fix handler * fix: styling error handling * fonts * fix: download func * switch to mux * fix: change upload api to assets * fix build * fix: download avatar * fix: download logos * fix: my avatar * font * fix: remove error msg popup possibility * fix: docs * fix: svalidate colors * rem msg popup from frontend * fix: email with private labeling * fix: tests * fix: email templates * fix: change migration version * fix: fix duplicate imports * fix(console): assets, service url, upload, policy current and preview (#1781) * upload endpoint, layout * fetch current, preview, fix upload * cleanup private labeling * fix linting * begin generated asset handler * generate asset api in dockerfile * features for label policy * features for label policy * features * flag for asset generator * change asset generator flag * fix label policy view in grpc * fix: layout, activate policy (#1786) * theme switcher up on top * change layout * activate policy * feat(console): label policy back color, layout (#1788) * theme switcher up on top * change layout * activate policy * fix overwrite value fc * reset policy, reset service * autosave policy, preview desc, layout impv * layout, i18n * background colors, inject material styles * load images * clean, lint * fix layout * set custom hex * fix content size conversion * remove font format in generated css * fix features for assets * fix(console): label policy colors, image downloads, preview (#1804) * load images * colors, images binding * lint * refresh emitter * lint * propagate font colors * upload error handling * label policy feature check * add blob in csp for console * log * fix: feature edits for label policy, refresh state on upload (#1807) * show error on load image, stop spinner * fix merge * fix migration versions * fix assets * fix csp * fix background color * scss * fix build * lint scss * fix statik for console * fix features check for label policy * cleanup * lint * public links * fix notifications * public links * feat: merge main * feat: fix translation files * fix migration * set api domain * fix logo in email * font face in email * font face in email * validate assets on upload * cleanup * add missing translations * add missing translations Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: Stefan Benz <[email protected]> Co-authored-by: Max Peintner <[email protected]> Co-authored-by: Florian Forster <[email protected]>
2026-11-15 10:25:11 +00:00 · 2021-06-04 14:53:51 +02:00
parent c0d9d86b09
commit 73d37459bb
257 changed files with 18247 additions and 7177 deletions
@@ -0,0 +1,254 @@
+  <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>
+    <p class="desc">{{'POLICY.PRIVATELABELING.PREVIEW_DESCRIPTION' | translate}}</p>
+    <p class="default" *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</p>
+
+    <div class="spinner-wr">
+        <mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
+    </div>
+
+    <ng-template appHasRole [appHasRole]="['policy.delete']">
+        <button *ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
+            matTooltip="{{'POLICY.RESET' | translate}}" color="warn" (click)="removePolicy()" mat-stroked-button>
+            {{'POLICY.RESET' | translate}}
+        </button>
+    </ng-template>
+
+    <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>
+
+      <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">Your Logo will be used in the Login itself, while the icon is used for smaller UI elements like in the organisation switcher in console</p>
+          
+          <!-- <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">
+                  <img matTooltip="Preview" class="prev" *ngIf="images['previewDarkLogo']" [src]="images['previewDarkLogo']" alt="dark logo preview"/>
+                  <span class="fill-space"></span>
+                  <img matTooltip="Current" class="curr" *ngIf="images['darkLogo']" [src]="images['darkLogo']" alt="dark logo"/>
+                </div>
+                <div class="logo-view" *ngSwitchCase="Theme.LIGHT">
+                  <img matTooltip="Preview" class="prev" *ngIf="images['previewLogo']" [src]="images['previewLogo']" alt="logo preview"/>
+                  <span class="fill-space"></span>
+                  <img matTooltip="Current" class="curr" *ngIf="images['logo']" [src]="images['logo']" alt="logo"/>
+                </div>
+              </container>
+              <div class="dropzone" cnslDropzone  (hovered)="toggleHoverLogo(theme, $event)"
+              (dropped)="onDropLogo(theme, $event)"
+              [class.hovering]="isHoveringOverDarkLogo">
+                <label class="file-label">
+                  <input #selectedFile style="display: none;"  class="file-input" type="file" (change)="onDropLogo(theme, $event.target.files)">
+                  <input class="btn" mat-raised-button type="button" [value]="'POLICY.PRIVATELABELING.BTN' | translate" (click)="selectedFile.click();" />
+
+                  <i class="icon las la-cloud-upload-alt"></i>
+                  <span>{{isHoveringOverDarkLogo ? 'Release': 'Drop your Logo here'}}</span>
+                </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">
+                  <img matTooltip="Preview" class="prev" *ngIf="images['previewDarkIcon']" [src]="images['previewDarkIcon']" alt="dark icon preview"/>
+                  <span class="fill-space"></span>
+                  <img matTooltip="Current" class="curr" *ngIf="images['darkIcon']" [src]="images['darkIcon']" alt="dark icon"/>
+                </div>
+                <div class="logo-view" *ngSwitchCase="Theme.LIGHT">
+                  <img matTooltip="Preview" class="prev" *ngIf="images['previewIcon']" [src]="images['previewIcon']" alt="icon preview"/>
+                  <span class="fill-space"></span>
+                  <img matTooltip="Current" class="curr" *ngIf="images['icon']" [src]="images['icon']" alt="icon"/>
+                </div>
+              </container>
+              <div class="dropzone" cnslDropzone (hovered)="toggleHoverIcon(theme, $event)"
+              (dropped)="onDropIcon(theme, $event)"
+              [class.hovering]="isHoveringOverDarkIcon">
+              <label class="file-label">
+                <input #selectedFileIcon style="display: none;"  class="file-input" type="file" (change)="onDropIcon(theme, $event.target.files)">
+                <input class="btn" mat-raised-button type="button" [value]="'POLICY.PRIVATELABELING.BTN' | translate" (click)="selectedFileIcon.click();" />
+
+                <i class="icon las la-cloud-upload-alt"></i>
+                <span>{{isHoveringOverDarkIcon ? 'Release': 'Drop your Logo here'}}</span>
+              </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>
+
+          <!-- <span class="title">{{ theme === Theme.DARK ? ('POLICY.PRIVATELABELING.DARK' | translate) : ('POLICY.PRIVATELABELING.LIGHT' | translate)}}</span> -->
+          
+          <ng-container *ngIf="theme==Theme.DARK">
+            <div class="colors" *ngIf="data && previewData">
+              <div class="color">
+                <cnsl-color [colorType]="ColorType.BACKGROUNDDARK"(previewChanged)="previewData.backgroundColorDark = $event; savePolicy()"  name="Background Color Dark" [color]="data.backgroundColorDark" [previewColor]="previewData.backgroundColorDark"></cnsl-color>
+              </div>
+
+              <div class="color">
+                <cnsl-color [colorType]="ColorType.PRIMARY"(previewChanged)="previewData.primaryColorDark = $event; savePolicy()"  name="Preview Primary Color Dark" [color]="data.primaryColorDark" [previewColor]="previewData.primaryColorDark"></cnsl-color>
+              </div>
+
+              <div class="color">
+                <cnsl-color [colorType]="ColorType.WARN" (previewChanged)="previewData.warnColorDark =  $event; savePolicy()" name="Preview Warn Color Dark" [color]="data.warnColorDark" [previewColor]="previewData.warnColorDark"></cnsl-color>
+              </div>
+
+              <div class="color">
+                <cnsl-color [colorType]="ColorType.FONTDARK"(previewChanged)="previewData.fontColorDark = $event; savePolicy()"  name="Font Color Dark" [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; savePolicy()"  name="Background Color Light" [color]="data.backgroundColor" [previewColor]="previewData.backgroundColor"></cnsl-color>
+              </div>
+
+              <div class="color">
+                <cnsl-color [colorType]="ColorType.PRIMARY" (previewChanged)="previewData.primaryColor = $event; savePolicy()" name="Preview Primary Color Light" [color]="data.primaryColor" [previewColor]="previewData.primaryColor"></cnsl-color>
+              </div>
+
+              <div class="color">
+                <cnsl-color [colorType]="ColorType.WARN" name="Preview Warn Color Light" (previewChanged)="previewData.warnColor= $event; savePolicy()" [color]="data.warnColor" [previewColor]="previewData.warnColor"></cnsl-color>
+              </div>
+
+              <div class="color">
+                <cnsl-color [colorType]="ColorType.FONTLIGHT" (previewChanged)="previewData.fontColor = $event; savePolicy()"  name="Font Color" [color]="data.fontColor" [previewColor]="previewData.fontColor"></cnsl-color>
+              </div>
+            </div>
+          </ng-container>
+        </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">
+            <div class="font-preview">
+              <mat-icon>text_fields</mat-icon>
+              <span>ABC • abc • 123</span>
+              <span>_</span>
+              <span>Upload your favorite font for the UI</span>
+            </div>
+
+            <div class="dropzone" cnslDropzone  (hovered)="toggleHoverFont($event)"
+              (dropped)="onDropFont($event)"
+              [class.hovering]="isHoveringOverFont">
+                <label class="file-label">
+                  <input #selectedFontFile style="display: none;"  class="file-input" type="file" (change)="onDropFont($event.target.files)">
+                  <input class="btn" mat-raised-button type="button" [value]="'POLICY.PRIVATELABELING.BTN' | translate" (click)="selectedFontFile.click();" />
+
+                  <i class="icon las la-cloud-upload-alt"></i>
+                  <span >{{isHoveringOverFont ? 'Release': 'Drop your Logo here'}}</span>
+                </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  class="info" type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
+              'label_policy.private_label'})}}
+          </cnsl-info-section>
+        </ng-container>
+
+        <mat-slide-toggle class="toggle" color="primary" ngDefaultControl
+            [(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 class="info" type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
+              'label_policy.watermark'})}}
+          </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)="saveWatermark()">
+            {{'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>
+    </div>
+
+    <cnsl-links *ngIf="nextLinks" [links]="nextLinks"></cnsl-links>
+</div>