mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-18 05:52:51 +00:00
feat(console): v2 feature cleanup, fix styling issues, instance naming (#3530)
* new console * move npm ci to angular build * rel path for assets * local grpc copy * login policy, rm clear views, features rel path * login_hint param * edit default color values * remove features, zitadel-tier, contact styles * html formatter * rm feature restrictions, fix theming issues * instance naming * statehandler * rm class * rm class * update footer links * statehandler * stroked color Co-authored-by: Livio Amstutz <[email protected]>
This commit is contained in:
Max Peintner
co-authored by
Livio Amstutz
Livio Amstutz
parent
f9e79ef8fe
commit
41e60b3d8a
@@ -1,137 +1,234 @@
|
||||
<mat-toolbar class="header-wrapper">
|
||||
<div class="header-content">
|
||||
<a class="title custom" [routerLink]="['/']"
|
||||
*ngIf="org && labelpolicy && labelpolicy.disableWatermark; else defaultHome">
|
||||
<img class="logo" alt="home logo" *ngIf="isDarkTheme; else customlighttheme"
|
||||
[src]="labelpolicy?.iconUrlDark ? labelpolicy.iconUrlDark : './assets/images/zitadel-logo-solo-light.svg'"
|
||||
onerror="this.src='./assets/images/zitadel-logo-solo-light.svg';this.onerror='';" />
|
||||
<ng-template #customlighttheme>
|
||||
<img alt="home logo" class="logo"
|
||||
[src]="labelpolicy?.iconUrl ? labelpolicy.iconUrl : './assets/images/zitadel-logo-solo-dark.svg'"
|
||||
onerror="this.src='./assets/images/zitadel-logo-solo-dark.svg';this.onerror='';" />
|
||||
</ng-template>
|
||||
</a>
|
||||
<div class="header-content">
|
||||
<a
|
||||
class="title custom"
|
||||
[routerLink]="['/']"
|
||||
*ngIf="org && labelpolicy && labelpolicy.disableWatermark; else defaultHome"
|
||||
>
|
||||
<img
|
||||
class="logo"
|
||||
alt="home logo"
|
||||
*ngIf="isDarkTheme; else customlighttheme"
|
||||
[src]="labelpolicy?.iconUrlDark ? labelpolicy.iconUrlDark : './assets/images/zitadel-logo-solo-light.svg'"
|
||||
onerror="this.src='./assets/images/zitadel-logo-solo-light.svg';this.onerror='';"
|
||||
/>
|
||||
<ng-template #customlighttheme>
|
||||
<img
|
||||
alt="home logo"
|
||||
class="logo"
|
||||
[src]="labelpolicy?.iconUrl ? labelpolicy.iconUrl : './assets/images/zitadel-logo-solo-dark.svg'"
|
||||
onerror="this.src='./assets/images/zitadel-logo-solo-dark.svg';this.onerror='';"
|
||||
/>
|
||||
</ng-template>
|
||||
</a>
|
||||
|
||||
<ng-template #defaultHome>
|
||||
<a *ngIf="org" class="title" [routerLink]="['/']">
|
||||
<img class="logo" alt="zitadel logo" *ngIf="isDarkTheme; else lighttheme"
|
||||
src="./assets/images/zitadel-logo-solo-light.svg" />
|
||||
<ng-template #lighttheme>
|
||||
<img alt="zitadel logo" class="logo" src="../assets/images/zitadel-logo-solo-dark.svg" />
|
||||
</ng-template>
|
||||
</a>
|
||||
<ng-template #defaultHome>
|
||||
<a *ngIf="org" class="title" [routerLink]="['/']">
|
||||
<img
|
||||
class="logo"
|
||||
alt="zitadel logo"
|
||||
*ngIf="isDarkTheme; else lighttheme"
|
||||
src="./assets/images/zitadel-logo-solo-light.svg"
|
||||
/>
|
||||
<ng-template #lighttheme>
|
||||
<img alt="zitadel logo" class="logo" src="../assets/images/zitadel-logo-solo-dark.svg" />
|
||||
</ng-template>
|
||||
</a>
|
||||
</ng-template>
|
||||
|
||||
<ng-container *ngFor="let bread of (breadcrumbService.breadcrumbs$ | async) as bc; index as i">
|
||||
<ng-container *ngIf="bread.type === BreadcrumbType.IAM">
|
||||
<ng-template cnslHasRole [hasRole]="['iam.read']">
|
||||
<svg class="slash hide-on-small" viewBox="0 0 24 24" width="32" height="32" stroke="currentColor"
|
||||
stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
|
||||
shape-rendering="geometricPrecision">
|
||||
<path d="M16.88 3.549L7.12 20.451"></path>
|
||||
</svg>
|
||||
<ng-container *ngFor="let bread of breadcrumbService.breadcrumbs$ | async as bc; index as i">
|
||||
<ng-container *ngIf="bread.type === BreadcrumbType.IAM">
|
||||
<ng-template cnslHasRole [hasRole]="['iam.read']">
|
||||
<svg
|
||||
class="slash hide-on-small"
|
||||
viewBox="0 0 24 24"
|
||||
width="32"
|
||||
height="32"
|
||||
stroke="currentColor"
|
||||
stroke-width="1"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
shape-rendering="geometricPrecision"
|
||||
>
|
||||
<path d="M16.88 3.549L7.12 20.451"></path>
|
||||
</svg>
|
||||
|
||||
<div class="breadcrumb-context hide-on-small">
|
||||
<a matRipple [matRippleUnbounded]="false" class="breadcrumb-link"
|
||||
[routerLink]="bread.routerLink">
|
||||
{{'MENU.SYSTEM' | translate}}
|
||||
</a>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="bread.type === BreadcrumbType.ORG">
|
||||
<svg class="slash" viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="1"
|
||||
stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision">
|
||||
<path d="M16.88 3.549L7.12 20.451"></path>
|
||||
</svg>
|
||||
|
||||
<div class="org-context">
|
||||
<a *ngIf="org" matRipple [matRippleUnbounded]="false" class="org-link" id="orglink"
|
||||
[routerLink]="[ '/org']">
|
||||
{{org?.name ? org.name : 'NO NAME'}}</a>
|
||||
|
||||
<div class="org-context-wrapper" *ngIf="org">
|
||||
<button cdkOverlayOrigin #trigger="cdkOverlayOrigin" matRipple [matRippleUnbounded]="false"
|
||||
id="orgswitchbutton" class="org-switch-button" (click)="showOrgContext = !showOrgContext">
|
||||
<span class="svgspan">
|
||||
<svg xmlns=" http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<cnsl-action-keys (actionTriggered)="showOrgContext = !showOrgContext"
|
||||
[type]="ActionKeysType.ORGSWITCHER"></cnsl-action-keys>
|
||||
</button>
|
||||
|
||||
<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger"
|
||||
[flexibleDimensions]="true" [lockPosition]="true" [cdkConnectedOverlayOffsetY]="10"
|
||||
[cdkConnectedOverlayHasBackdrop]="true" [cdkConnectedOverlayPositions]="positions"
|
||||
cdkConnectedOverlayBackdropClass="transparent-backdrop"
|
||||
[cdkConnectedOverlayOpen]="showOrgContext" (backdropClick)="showOrgContext = false"
|
||||
(detach)="showOrgContext = false">
|
||||
<cnsl-org-context class="context_card" *ngIf="org && showOrgContext"
|
||||
(closedCard)="showOrgContext = false" [org]="org" (setOrg)="setActiveOrg($event)">
|
||||
</cnsl-org-context>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="bread.type !== BreadcrumbType.IAM && bread.type !== BreadcrumbType.ORG">
|
||||
<svg class="slash" viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="1"
|
||||
stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision">
|
||||
<path d="M16.88 3.549L7.12 20.451"></path>
|
||||
</svg>
|
||||
|
||||
<div class="breadcrumb-context">
|
||||
<a matRipple [matRippleUnbounded]="false" class="breadcrumb-link"
|
||||
[ngClass]="{'maxwidth': bc.length > 1}" [routerLink]="bread.routerLink">
|
||||
<ng-container *ngIf="i !== bc.length - 1; else defLabel">
|
||||
<span class="desk">{{bread.name}}</span>
|
||||
<span class="mob">...</span>
|
||||
</ng-container>
|
||||
<ng-template #defLabel>
|
||||
<span>{{bread.name}}</span>
|
||||
</ng-template>
|
||||
</a>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<span class="fill-space"></span>
|
||||
|
||||
<a class="doc-link" href="https://docs.zitadel.ch" mat-stroked-button target="_blank">
|
||||
{{'MENU.DOCUMENTATION' | translate}}
|
||||
</a>
|
||||
|
||||
<div class="system-rel" *ngIf="!isOnMe">
|
||||
<a id="systembutton" *ngIf="!isOnSystem && (['iam.read$','iam.write$'] | hasRole | async)"
|
||||
[routerLink]="[ '/system']" class="iam-settings cnsl-action-button" mat-stroked-button>
|
||||
<span class="iam-label">{{'MENU.SYSTEM' | translate}}</span>
|
||||
<i class="las la-cog"></i>
|
||||
<div class="breadcrumb-context hide-on-small">
|
||||
<a matRipple [matRippleUnbounded]="false" class="breadcrumb-link" [routerLink]="bread.routerLink">
|
||||
{{ 'MENU.INSTANCE' | translate }}
|
||||
</a>
|
||||
<a id="orgbutton" *ngIf="isOnSystem && (['org.read'] | hasRole | async)" [routerLink]="[ '/org']"
|
||||
class="org-settings cnsl-action-button" mat-stroked-button>
|
||||
<span class="iam-label">{{'MENU.ORGANIZATION' | translate}}</span>
|
||||
<i class="las la-cog"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
|
||||
<div cnslOutsideClick (clickOutside)="closeAccountCard()" class="icon-container"
|
||||
[ngClass]="{'iam-user': (['iam.write$'] | hasRole | async)}">
|
||||
<cnsl-avatar id="avatartoggle"
|
||||
*ngIf="user && (user.human?.profile?.displayName || (user.human?.profile?.firstName && user.human?.profile?.lastName))"
|
||||
class="avatar-toggle dontcloseonclick" (click)="showAccount = !showAccount" [active]="showAccount"
|
||||
[avatarUrl]="user.human?.profile?.avatarUrl || ''" [forColor]="user?.preferredLoginName || ''"
|
||||
[name]="user.human?.profile?.displayName ? user.human?.profile?.displayName ?? '' : (user.human?.profile?.firstName + ' '+ user.human?.profile?.lastName)"
|
||||
[size]="38">
|
||||
</cnsl-avatar>
|
||||
<cnsl-accounts-card @accounts class="a_card" *ngIf="showAccount" (closedCard)="showAccount = false"
|
||||
[user]="user" [iamuser]="(['iam.write$'] | hasRole) | async">
|
||||
</cnsl-accounts-card>
|
||||
<ng-container *ngIf="bread.type === BreadcrumbType.ORG">
|
||||
<svg
|
||||
class="slash"
|
||||
viewBox="0 0 24 24"
|
||||
width="32"
|
||||
height="32"
|
||||
stroke="currentColor"
|
||||
stroke-width="1"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
shape-rendering="geometricPrecision"
|
||||
>
|
||||
<path d="M16.88 3.549L7.12 20.451"></path>
|
||||
</svg>
|
||||
|
||||
<div class="org-context">
|
||||
<a *ngIf="org" matRipple [matRippleUnbounded]="false" class="org-link" id="orglink" [routerLink]="['/org']">
|
||||
{{ org?.name ? org.name : 'NO NAME' }}</a
|
||||
>
|
||||
|
||||
<div class="org-context-wrapper" *ngIf="org">
|
||||
<button
|
||||
cdkOverlayOrigin
|
||||
#trigger="cdkOverlayOrigin"
|
||||
matRipple
|
||||
[matRippleUnbounded]="false"
|
||||
id="orgswitchbutton"
|
||||
class="org-switch-button"
|
||||
(click)="showOrgContext = !showOrgContext"
|
||||
>
|
||||
<span class="svgspan">
|
||||
<svg xmlns=" http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
<cnsl-action-keys
|
||||
(actionTriggered)="showOrgContext = !showOrgContext"
|
||||
[type]="ActionKeysType.ORGSWITCHER"
|
||||
></cnsl-action-keys>
|
||||
</button>
|
||||
|
||||
<ng-template
|
||||
cdkConnectedOverlay
|
||||
[cdkConnectedOverlayOrigin]="trigger"
|
||||
[flexibleDimensions]="true"
|
||||
[lockPosition]="true"
|
||||
[cdkConnectedOverlayOffsetY]="10"
|
||||
[cdkConnectedOverlayHasBackdrop]="true"
|
||||
[cdkConnectedOverlayPositions]="positions"
|
||||
cdkConnectedOverlayBackdropClass="transparent-backdrop"
|
||||
[cdkConnectedOverlayOpen]="showOrgContext"
|
||||
(backdropClick)="showOrgContext = false"
|
||||
(detach)="showOrgContext = false"
|
||||
>
|
||||
<cnsl-org-context
|
||||
class="context_card"
|
||||
*ngIf="org && showOrgContext"
|
||||
(closedCard)="showOrgContext = false"
|
||||
[org]="org"
|
||||
(setOrg)="setActiveOrg($event)"
|
||||
>
|
||||
</cnsl-org-context>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="bread.type !== BreadcrumbType.IAM && bread.type !== BreadcrumbType.ORG">
|
||||
<svg
|
||||
class="slash"
|
||||
viewBox="0 0 24 24"
|
||||
width="32"
|
||||
height="32"
|
||||
stroke="currentColor"
|
||||
stroke-width="1"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
shape-rendering="geometricPrecision"
|
||||
>
|
||||
<path d="M16.88 3.549L7.12 20.451"></path>
|
||||
</svg>
|
||||
|
||||
<div class="breadcrumb-context">
|
||||
<a
|
||||
matRipple
|
||||
[matRippleUnbounded]="false"
|
||||
class="breadcrumb-link"
|
||||
[ngClass]="{ maxwidth: bc.length > 1 }"
|
||||
[routerLink]="bread.routerLink"
|
||||
>
|
||||
<ng-container *ngIf="i !== bc.length - 1; else defLabel">
|
||||
<span class="desk">{{ bread.name }}</span>
|
||||
<span class="mob">...</span>
|
||||
</ng-container>
|
||||
<ng-template #defLabel>
|
||||
<span>{{ bread.name }}</span>
|
||||
</ng-template>
|
||||
</a>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<span class="fill-space"></span>
|
||||
|
||||
<a class="doc-link" href="https://docs.zitadel.ch" mat-stroked-button target="_blank">
|
||||
{{ 'MENU.DOCUMENTATION' | translate }}
|
||||
</a>
|
||||
|
||||
<div class="system-rel" *ngIf="!isOnMe">
|
||||
<a
|
||||
id="systembutton"
|
||||
*ngIf="!isOnSystem && (['iam.read$', 'iam.write$'] | hasRole | async)"
|
||||
[routerLink]="['/system']"
|
||||
class="iam-settings cnsl-action-button"
|
||||
mat-stroked-button
|
||||
>
|
||||
<span class="iam-label">{{ 'MENU.INSTANCE' | translate }}</span>
|
||||
<i class="las la-cog"></i>
|
||||
</a>
|
||||
<a
|
||||
id="orgbutton"
|
||||
*ngIf="isOnSystem && (['org.read'] | hasRole | async)"
|
||||
[routerLink]="['/org']"
|
||||
class="org-settings cnsl-action-button"
|
||||
mat-stroked-button
|
||||
>
|
||||
<span class="iam-label">{{ 'MENU.ORGANIZATION' | translate }}</span>
|
||||
<i class="las la-cog"></i>
|
||||
</a>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
|
||||
<div
|
||||
cnslOutsideClick
|
||||
(clickOutside)="closeAccountCard()"
|
||||
class="icon-container"
|
||||
[ngClass]="{ 'iam-user': (['iam.write$'] | hasRole | async) }"
|
||||
>
|
||||
<cnsl-avatar
|
||||
id="avatartoggle"
|
||||
*ngIf="
|
||||
user && (user.human?.profile?.displayName || (user.human?.profile?.firstName && user.human?.profile?.lastName))
|
||||
"
|
||||
class="avatar-toggle dontcloseonclick"
|
||||
(click)="showAccount = !showAccount"
|
||||
[active]="showAccount"
|
||||
[avatarUrl]="user.human?.profile?.avatarUrl || ''"
|
||||
[forColor]="user?.preferredLoginName || ''"
|
||||
[name]="
|
||||
user.human?.profile?.displayName
|
||||
? user.human?.profile?.displayName ?? ''
|
||||
: user.human?.profile?.firstName + ' ' + user.human?.profile?.lastName
|
||||
"
|
||||
[size]="38"
|
||||
>
|
||||
</cnsl-avatar>
|
||||
<cnsl-accounts-card
|
||||
@accounts
|
||||
class="a_card"
|
||||
*ngIf="showAccount"
|
||||
(closedCard)="showAccount = false"
|
||||
[user]="user"
|
||||
[iamuser]="['iam.write$'] | hasRole | async"
|
||||
>
|
||||
</cnsl-accounts-card>
|
||||
</div>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
|
||||
Reference in New Issue
Block a user