mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-18 13:52:51 +00:00
196 lines
10 KiB
HTML
196 lines
10 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>
|
|
|
|
<div class="org-context-wrapper" (clickOutside)="showOrgContext ? showOrgContext = false: null">
|
|
<button class="org-button dontcloseonclick" (click)="showOrgContext = !showOrgContext" *ngIf="user && org"
|
|
mat-button>{{org?.name
|
|
?
|
|
org.name : 'NO NAME'}}
|
|
<mat-icon class="dontcloseonclick">
|
|
arrow_drop_down</mat-icon>
|
|
</button>
|
|
<cnsl-org-context class="context_card" *ngIf="showOrgContext" (closedCard)="showOrgContext = false" [org]="org"
|
|
(setOrg)="setActiveOrg($event)">
|
|
</cnsl-org-context>
|
|
</div>
|
|
|
|
<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> |