mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-26 08:26:29 +00:00
06e1af4f78
* features, page, table, create dialog, i18n * trigger actions service, add action dialog * display flows, add flow dialog, duration pipe, i18n * optim flow layout, action presets * delete actions, flows, layout * drag drop list, fix update * lint * stylelint * fix template rest * actions, drag, fix hasrole * stylelint * toast, i18n * missing italian translations * it * fix ActionSearchQueries Co-authored-by: Livio Amstutz <livio.a@gmail.com>
217 lines
11 KiB
HTML
217 lines
11 KiB
HTML
<ng-container *ngIf="$any(authService.user | async) || {} as user">
|
|
<ng-container *ngIf="((['iam.read$','iam.write$'] | hasRole)) as iamuser$">
|
|
<mat-toolbar class="root-header">
|
|
<button *ngIf="authenticationService.authenticated" aria-label="Toggle sidenav" mat-icon-button
|
|
(click)="drawer.toggle()">
|
|
<i class="icon las la-bars"></i>
|
|
</button>
|
|
<ng-container *ngIf="labelpolicy && !labelpolicy?.disableWatermark">
|
|
<a class="title" [routerLink]="['/']">
|
|
<img class="logo" alt="zitadel logo" *ngIf="componentCssClass === 'dark-theme'; 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>
|
|
|
|
<svg class="slash" viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="1"
|
|
stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision">
|
|
<path d="M16.88 3.549L7.12 20.451"></path>
|
|
</svg>
|
|
</ng-container>
|
|
|
|
<button class="org-button" (click)="loadOrgs()" *ngIf="user && org" mat-button [matMenuTriggerFor]="menu"
|
|
(menuOpened)="focusFilter()">{{org?.name ? org.name : 'NO NAME'}}
|
|
<mat-icon>
|
|
arrow_drop_down</mat-icon>
|
|
</button>
|
|
|
|
<mat-menu class="menu" #menu="matMenu">
|
|
<div class="spinner-w">
|
|
<mat-spinner diameter="20" *ngIf="orgLoading$ | async" color="accent">
|
|
</mat-spinner>
|
|
</div>
|
|
|
|
<div class="filter-wrapper">
|
|
<input cnslInput class="filter-input" [formControl]="filterControl" autocomplete="off"
|
|
(click)="$event.stopPropagation()" placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}" #input>
|
|
</div>
|
|
|
|
<div class="org-wrapper">
|
|
<button [ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id"
|
|
*ngFor="let temporg of orgs$ | async" mat-menu-item (click)="setActiveOrg(temporg)">
|
|
{{temporg?.name ? temporg.name : 'NO NAME'}}
|
|
</button>
|
|
</div>
|
|
|
|
<button class="show-all" mat-menu-item [routerLink]="[ '/org/overview' ]">{{'MENU.SHOWORGS' |
|
|
translate}}</button>
|
|
|
|
<ng-template cnslHasRole [hasRole]="['org.create','iam.write']">
|
|
<button mat-menu-item [routerLink]="[ '/org/create' ]">
|
|
<mat-icon class="avatar">add</mat-icon>
|
|
{{'MENU.NEWORG' | translate}}
|
|
</button>
|
|
</ng-template>
|
|
</mat-menu>
|
|
<span class="fill-space"></span>
|
|
|
|
<a class="doc-link" href="https://docs.zitadel.ch" mat-stroked-button target="_blank">{{'MENU.DOCUMENTATION'
|
|
| translate}}</a>
|
|
<div (clickOutside)="closeAccountCard()" class="icon-container">
|
|
<cnsl-avatar
|
|
*ngIf="user && (user.human?.profile?.displayName || (user.human?.profile?.firstName && user.human?.profile?.lastName))"
|
|
class="avatar 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 mat-elevation-z1" *ngIf="showAccount"
|
|
(closedCard)="showAccount = false" [user]="user" [iamuser]="iamuser$ | async">
|
|
</cnsl-accounts-card>
|
|
</div>
|
|
</mat-toolbar>
|
|
<mat-drawer-container class="main-container">
|
|
<mat-drawer #drawer class="sidenav" [mode]="(isHandset$ | async) ? 'over' : 'side'"
|
|
[opened]="(isHandset$ | async) === false && authenticationService.authenticated">
|
|
<div class="side-column">
|
|
<div class="list">
|
|
<a @navitem class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"
|
|
[routerLink]="['/']">
|
|
<i class="icon las la-home"></i>
|
|
<span class="label">{{ 'MENU.DASHBOARD' | translate }}</span>
|
|
</a>
|
|
|
|
<ng-container *ngIf="authenticationService.authenticationChanged | async">
|
|
<a @navitem matTooltip="{{'MENU.TOOLTIP.PERSONAL' | translate}}" class="nav-item"
|
|
[routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"
|
|
[routerLink]="['/users/me']">
|
|
<i class="icon las la-user-circle"></i>
|
|
<span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
|
|
</a>
|
|
</ng-container>
|
|
|
|
<div *ngIf="org" [@navAnimation]="org">
|
|
<ng-template cnslHasRole [hasRole]="['org.read']">
|
|
<div @navitem class="divider">
|
|
<div class="line"></div>
|
|
<span>{{org?.name ? org.name : ('MENU.ORGSECTION' | translate)}}</span>
|
|
<div class="hiddenline"></div>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template cnslHasRole [hasRole]="['org.read']">
|
|
<a @navitem matTooltip="{{'MENU.TOOLTIP.ORG' | translate}}" class="nav-item"
|
|
[routerLinkActive]="['active']" [routerLink]="[ '/org']">
|
|
<i class="icon las la-cog"></i>
|
|
<span class="label">{{'MENU.ORGANIZATION' | translate}}</span>
|
|
</a>
|
|
</ng-template>
|
|
|
|
<ng-template cnslHasRole [hasRole]="['project.read(:[0-9]*)?']">
|
|
<a @navitem matTooltip="{{'MENU.TOOLTIP.SELFPROJECTS' | translate}}" class="nav-item"
|
|
[routerLinkActive]="['active']" [routerLink]="[ '/projects']">
|
|
<i class="icon las la-layer-group"></i>
|
|
|
|
<div class="c_label">
|
|
<span> {{'MENU.PROJECT' | translate}} </span>
|
|
<span *ngIf="(mgmtService?.ownedProjectsCount | async)"
|
|
class="count">{{mgmtService?.ownedProjectsCount | async}}</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a @navitem matTooltip="{{'MENU.TOOLTIP.GRANTEDPROJECTS' | translate}}"
|
|
*ngIf="mgmtService?.grantedProjectsCount && (mgmtService?.grantedProjectsCount | async)"
|
|
class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/granted-projects']">
|
|
<i class="icon las la-layer-group"></i>
|
|
<div class="c_label">
|
|
<span>{{ 'MENU.GRANTEDPROJECT' | translate }}</span>
|
|
<span class="count">{{mgmtService?.grantedProjectsCount | async}}</span>
|
|
</div>
|
|
</a>
|
|
</ng-template>
|
|
|
|
<ng-template cnslHasRole [hasRole]="['user.read(:[0-9]*)?']">
|
|
<a @navitem matTooltip="{{'MENU.TOOLTIP.HUMANUSERS' | translate}}" class="nav-item"
|
|
[routerLinkActive]="['active']" [routerLink]="[ '/users/list/humans']"
|
|
[routerLinkActiveOptions]="{ exact: true }">
|
|
<i class="icon las la-user-friends"></i>
|
|
<span class="label">{{ 'MENU.HUMANUSERS' | translate }}</span>
|
|
</a>
|
|
|
|
<a @navitem matTooltip="{{'MENU.TOOLTIP.MACHINEUSERS' | translate}}" class="nav-item"
|
|
[routerLinkActive]="['active']" [routerLink]="[ '/users/list/machines']"
|
|
[routerLinkActiveOptions]="{ exact: true }">
|
|
<i class="icon las la-users-cog"></i>
|
|
<span class="label">{{ 'MENU.MACHINEUSERS' | translate }}</span>
|
|
</a>
|
|
</ng-template>
|
|
|
|
<ng-template cnslHasRole [hasRole]="['user.grant.read(:[0-9]*)?']">
|
|
<a @navitem matTooltip="{{'MENU.TOOLTIP.AUTHZ' | translate}}" class="nav-item"
|
|
[routerLinkActive]="['active']" [routerLink]="[ '/grants']"
|
|
[routerLinkActiveOptions]="{ exact: true }">
|
|
<i class="icon las la-shield-alt"></i>
|
|
<span class="label">{{ 'MENU.GRANTS' | translate }}</span>
|
|
</a>
|
|
</ng-template>
|
|
|
|
<ng-template cnslHasFeature [hasFeature]="['actions']">
|
|
<a @navitem matTooltip="{{'MENU.TOOLTIP.ACTIONS' | translate}}" class="nav-item"
|
|
[routerLinkActive]="['active']" [routerLink]="[ '/actions']"
|
|
[routerLinkActiveOptions]="{ exact: true }">
|
|
<i class="icon las la-exchange-alt"></i>
|
|
<span class="label">{{ 'MENU.ACTIONS' | translate }}</span>
|
|
</a>
|
|
</ng-template>
|
|
</div>
|
|
|
|
<ng-container *ngIf="iamuser$ | async">
|
|
<div @navitem class="divider">
|
|
<div class="line"></div>
|
|
<span>{{'MENU.ADMINSECTION' | translate}}</span>
|
|
<div class="hiddenline"></div>
|
|
</div>
|
|
<a @navitem matTooltip="{{'MENU.TOOLTIP.IAMPOLICIES' | translate}}" class="nav-item"
|
|
[routerLinkActive]="['active']" [routerLink]="[ '/iam','policies']">
|
|
<i class="icon las la-cog"></i>
|
|
<span class="label">{{'MENU.IAMPOLICIES' | translate}}</span>
|
|
</a>
|
|
|
|
<a @navitem matTooltip="{{'MENU.TOOLTIP.IAMEVENTSTORE' | translate}}" class="nav-item"
|
|
[routerLinkActive]="['active']" [routerLink]="[ '/iam', 'eventstore']">
|
|
<i class="icon las la-database"></i>
|
|
<span class="label">{{'MENU.IAMEVENTSTORE' | translate}}</span>
|
|
</a>
|
|
</ng-container>
|
|
|
|
<span class="fill-space"></span>
|
|
|
|
<div class="toc-line" *ngIf="privacyPolicy">
|
|
<a class="toc" [href]="privacyPolicy.tosLink" alt="Terms and Conditions" target="_blank">{{'MENU.TOS'
|
|
| translate}}</a>
|
|
<span class="slash">|</span>
|
|
<a class="toc" [href]="privacyPolicy.privacyLink" alt="Privacy Policy " target="_blank">{{'MENU.PRIVACY'
|
|
| translate}}</a>
|
|
<span> </span>
|
|
</div>
|
|
</div>
|
|
<span class="fill-space"></span>
|
|
</div>
|
|
</mat-drawer>
|
|
<mat-drawer-content class="content">
|
|
<div class="router" [@routeAnimations]="prepareRoute(outlet)">
|
|
<router-outlet #outlet="outlet"></router-outlet>
|
|
</div>
|
|
</mat-drawer-content>
|
|
</mat-drawer-container>
|
|
<div @adminline *ngIf="iamuser$ | async" class="admin-line" [ngClass]="{'expanded': !hideAdminWarn}"
|
|
matTooltip="IAM Administrator">
|
|
<button [matTooltip]="!hideAdminWarn ? 'Unpin': 'Pin'" (click)="toggleAdminHide()" mat-icon-button>
|
|
<mat-icon *ngIf="!hideAdminWarn" svgIcon="mdi_pin"></mat-icon>
|
|
<mat-icon *ngIf="hideAdminWarn" svgIcon="mdi_pin_outline"></mat-icon>
|
|
</button>
|
|
<span>{{'MENU.IAMADMIN' | translate}}</span>
|
|
</div>
|
|
</ng-container>
|
|
</ng-container> |