feat(console-v2): login policy extension, domain policy, filter and UI fixes (#3644)

* show filter count when set

* toast contrast color

* fix notification settings, password dialog

* app-create, user-create layout

* domain policy

* login-policy, project grid loader, i18n

* login policy

* login policy save lifetimes

* private labeling optim

* granted project grantId

* smtp address matching

* i18n

* i18n

* i18n

* replace url strategy

* fix privatelabeling color picker saving

* stylelint

Co-authored-by: Livio Amstutz <livio.a@gmail.com>
This commit is contained in:
Max Peintner
2022-05-17 16:18:37 +02:00
committed by GitHub
parent 8d0cf9f368
commit 8baf0fe08c
83 changed files with 1967 additions and 1212 deletions

View File

@@ -1,79 +1,95 @@
<div class="grid-main-container" *ngIf="projectType$ | async as type">
<div class="loading-sp-wrapper">
<mat-progress-spinner diameter="25" *ngIf="(loading$| async) === false" class="spinner" color="primary">
</mat-progress-spinner>
<div class="loading-sp-wrapper" *ngIf="loading$ | async">
<mat-spinner diameter="25" class="spinner" color="primary"> </mat-spinner>
</div>
<div class="owned-project-grid-container">
<div class="item card" matRipple *ngFor="let item of selection.selected; index as i"
<div
class="item card"
matRipple
*ngFor="let item of selection.selected; index as i"
(click)="navigateToProject(type, item, $event)"
[ngClass]="{ inactive: item.state !== ProjectState.PROJECT_STATE_ACTIVE}">
[ngClass]="{ inactive: item.state !== ProjectState.PROJECT_STATE_ACTIVE }"
>
<div class="text-part">
<span *ngIf="item.details && item.details.changeDate"
class="top cnsl-secondary-text">{{'PROJECT.PAGES.LASTMODIFIED' |
translate}}
{{ item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
<span *ngIf="item.details && item.details.changeDate" class="top cnsl-secondary-text"
>{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}
{{ item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span
>
<div class="name-row">
<span class="name" *ngIf="$any(item).name">{{ $any(item).name }}</span>
<span class="name" *ngIf="$any(item).projectName">{{ $any(item).projectName }}</span>
<div class="state-dot"
[ngClass]="{'active': item.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': item.state === ProjectState.PROJECT_STATE_INACTIVE}">
</div>
<div
class="state-dot"
[ngClass]="{
active: item.state === ProjectState.PROJECT_STATE_ACTIVE,
inactive: item.state === ProjectState.PROJECT_STATE_INACTIVE
}"
></div>
</div>
<span *ngIf="item.details && item.details.creationDate" class="created">{{'PROJECT.PAGES.CREATEDON' |
translate}}
{{ item.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
<span *ngIf="item.details && item.details.creationDate" class="created"
>{{ 'PROJECT.PAGES.CREATEDON' | translate }}
{{ item.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span
>
<span class="fill-space"></span>
</div>
<template [ngTemplateOutlet]="deleteButton" [ngTemplateOutletContext]="{key: item}"></template>
<template [ngTemplateOutlet]="toggleButton" [ngTemplateOutletContext]="{key: item}"></template>
<template [ngTemplateOutlet]="deleteButton" [ngTemplateOutletContext]="{ key: item }"></template>
<template [ngTemplateOutlet]="toggleButton" [ngTemplateOutletContext]="{ key: item }"></template>
</div>
</div>
<div class="owned-project-grid-container">
<div class="item card" matRipple *ngFor="let item of notPinned; index as i"
<div
class="item card"
matRipple
*ngFor="let item of notPinned; index as i"
(click)="navigateToProject(type, $any(item), $event)"
[ngClass]="{ inactive: item.state !== ProjectState.PROJECT_STATE_ACTIVE}" [attr.data-e2e]="'grid-card'">
[ngClass]="{ inactive: item.state !== ProjectState.PROJECT_STATE_ACTIVE }"
[attr.data-e2e]="'grid-card'"
>
<div class="text-part">
<span *ngIf="item.details && item.details.changeDate"
class="top cnsl-secondary-text">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
{{ item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
<span *ngIf="item.details && item.details.changeDate" class="top cnsl-secondary-text"
>{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}
{{ item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span
>
<div class="name-row">
<span class="name" *ngIf="$any(item).name">{{ $any(item).name }}</span>
<span class="name" *ngIf="$any(item).projectName">{{ $any(item).projectName }}</span>
<div class="state-dot"
[ngClass]="{'active': item.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': item.state === ProjectState.PROJECT_STATE_INACTIVE}">
</div>
<div
class="state-dot"
[ngClass]="{
active: item.state === ProjectState.PROJECT_STATE_ACTIVE,
inactive: item.state === ProjectState.PROJECT_STATE_INACTIVE
}"
></div>
</div>
<span class="owning-org" *ngIf="$any(item).projectOwnerName">{{$any(item).projectOwnerName}}</span>
<span *ngIf="item.details && item.details.creationDate"
class="created cnsl-secondary-text">{{'PROJECT.PAGES.CREATEDON' |
translate}}
{{
item.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="owning-org" *ngIf="$any(item).projectOwnerName">{{ $any(item).projectOwnerName }}</span>
<span *ngIf="item.details && item.details.creationDate" class="created cnsl-secondary-text"
>{{ 'PROJECT.PAGES.CREATEDON' | translate }}
{{ item.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span
>
<span class="fill-space"></span>
</div>
<ng-container *ngIf="type === ProjectType.PROJECTTYPE_OWNED">
<template [ngTemplateOutlet]="deleteButton" [ngTemplateOutletContext]="{key: item}"></template>
<template [ngTemplateOutlet]="deleteButton" [ngTemplateOutletContext]="{ key: item }"></template>
</ng-container>
<template [ngTemplateOutlet]="toggleButton" [ngTemplateOutletContext]="{key: item}"></template>
<template [ngTemplateOutlet]="toggleButton" [ngTemplateOutletContext]="{ key: item }"></template>
</div>
<p class="n-items cnsl-secondary-text" *ngIf="(loading$ | async) === false && projectList.length === 0">
{{'PROJECT.PAGES.NOITEMS' |
translate}}</p>
{{ 'PROJECT.PAGES.NOITEMS' | translate }}
</p>
<ng-container *ngIf="type === ProjectType.PROJECTTYPE_OWNED">
<ng-template cnslHasRole [hasRole]="['project.create']">
<div class="add-project-button card" matRipple (click)="addItem()">
<mat-icon class="icon">add</mat-icon>
<span>{{'PROJECT.PAGES.ADDNEW' | translate}}</span>
<span>{{ 'PROJECT.PAGES.ADDNEW' | translate }}</span>
<cnsl-action-keys [doNotUseContrast]="true" [withoutMargin]="true" (actionTriggered)="addItem()">
</cnsl-action-keys>
</div>
@@ -83,17 +99,28 @@
</div>
<ng-template #deleteButton let-key="key">
<button *ngIf="key.id !== zitadelProjectId" matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn"
(click)="deleteProject($event, key)" class="delete-button" mat-icon-button
[attr.data-e2e]="'delete-project-button'">
<button
*ngIf="key.id !== zitadelProjectId"
matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
color="warn"
(click)="deleteProject($event, key)"
class="delete-button"
mat-icon-button
[attr.data-e2e]="'delete-project-button'"
>
<i class="las la-trash"></i>
</button>
</ng-template>
<ng-template #toggleButton let-key="key">
<button matTooltip="{{'ACTIONS.PIN' | translate}}" [ngClass]="{ selected: selection.isSelected(key)}"
(click)="toggle(key,$event)" class="edit-button" mat-icon-button>
<button
matTooltip="{{ 'ACTIONS.PIN' | translate }}"
[ngClass]="{ selected: selection.isSelected(key) }"
(click)="toggle(key, $event)"
class="edit-button"
mat-icon-button
>
<mat-icon *ngIf="selection.isSelected(key)" svgIcon="mdi_pin"></mat-icon>
<mat-icon svgIcon="mdi_pin_outline" *ngIf="!selection.isSelected(key)"></mat-icon>
</button>
</ng-template>
</ng-template>