TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2024-12-12 02:54:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): user memberships, generic member create dialog, fix user autocomplete emitter (#606)

Browse Source 
* load manager mgmtservice, user service

* add org memberships

* membership component, generic member creation

* refactor member create dialog

* project autocomplete context

* create batch managers in user component

* project context wrapper

* emit on user removal, preselect user on init

* membership avatar style, service

* auth user memberships, navigate to target

* cursor fix, avatar gen

* lint

* i18n fix

* remove role translations

* membership detail page, i18n

* fix role label i18n, after view init loader

* remove projectid from grant remove

* fix iam race condition

* refresh table ts, fix no permission project search

* change membership colors

* refresh table everywhere, replace assets, routing

* fix logo header size

* lint, fix project grant removal

* timestmp for p mem, user list, grants, p list (#615)

* npm audit

* update deps, resolve vulnerability

* fix tslint config

* update lock

* load 20 changes at once

* Update console/src/assets/i18n/de.json

Co-authored-by: Florian Forster <florian@caos.ch>

* Update console/src/assets/i18n/de.json

Co-authored-by: Florian Forster <florian@caos.ch>

* Update console/src/assets/i18n/en.json

Co-authored-by: Florian Forster <florian@caos.ch>

* membership i18n

Co-authored-by: Florian Forster <florian@caos.ch>
This commit is contained in:
Max Peintner 2020-08-24 08:48:47 +02:00 committed by GitHub
parent d49fee23bf
commit 193cfb45f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
84 changed files with 1972 additions and 2911 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2183
console/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

35
console/package.json
View File

@ -11,17 +11,17 @@
},
"private": true,
"dependencies": {
"@angular/animations": "~10.0.2",
"@angular/cdk": "~10.0.1",
"@angular/common": "~10.0.2",
"@angular/compiler": "~10.0.2",
"@angular/core": "~10.0.2",
"@angular/forms": "~10.0.2",
"@angular/material": "^10.0.1",
"@angular/platform-browser": "~10.0.2",
"@angular/platform-browser-dynamic": "~10.0.2",
"@angular/router": "~10.0.2",
"@angular/service-worker": "~10.0.2",
"@angular/animations": "~10.0.11",
"@angular/cdk": "~10.1.3",
"@angular/common": "~10.0.11",
"@angular/compiler": "~10.0.11",
"@angular/core": "~10.0.11",
"@angular/forms": "~10.0.11",
"@angular/material": "^10.1.3",
"@angular/platform-browser": "~10.0.11",
"@angular/platform-browser-dynamic": "~10.0.11",
"@angular/router": "~10.0.11",
"@angular/service-worker": "~10.0.11",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@types/file-saver": "^2.0.1",
@ -34,25 +34,24 @@
"google-proto-files": "^2.2.0",
"google-protobuf": "^3.13.0",
"grpc": "^1.24.3",
"grpc-web": "^1.2.0",
"grpc-web": "^1.2.1",
"moment": "^2.27.0",
"ngx-moment": "^5.0.0",
"ngx-quicklink": "^0.2.3",
"prettier-stylelint": "^0.4.2",
"ngx-quicklink": "^0.2.4",
"rxjs": "~6.6.2",
"ts-protoc-gen": "^0.12.0",
"tslib": "^2.0.1",
"uuid": "^8.3.0",
"zone.js": "~0.10.3"
"zone.js": "~0.11.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.6",
"@angular/cli": "~10.0.6",
"@angular/compiler-cli": "~10.0.2",
"@angular/compiler-cli": "~10.0.11",
"@types/jasmine": "~3.5.12",
"@angular/language-service": "~10.0.9",
"@angular/language-service": "~10.0.11",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^14.0.27",
"@types/node": "^14.6.0",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",

4
console/src/app/app.component.html
View File

@ -6,9 +6,9 @@
</button>
<a *ngIf="(isHandset$ | async) == false" class="title" [routerLink]="['/']">
<img class="logo" alt="zitadel logo" *ngIf="componentCssClass == 'dark-theme'; else lighttheme"
src="../assets/images/zitadel-logo-oneline-darkdesign.svg" />
src="../assets/images/zitadel-logo-light.svg" />
<ng-template #lighttheme>
<img alt="zitadel logo" class="logo" src="../assets/images/zitadel-logo-oneline-lightdesign.svg" />
<img alt="zitadel logo" class="logo" src="../assets/images/zitadel-logo-dark.svg" />
</ng-template>
</a>

5
console/src/app/app.component.scss
View File

@ -11,8 +11,8 @@
right: 0;
.logo {
height: 40px;
width: auto;
max-height: 50px;
width: 160px;
}
.title {
@ -20,7 +20,6 @@
color: white;
font-size: 1.2rem;
font-weight: 400;
margin-left: 1rem;
line-height: 1.2rem;
margin-right: 1rem;
}

16
console/src/app/app.component.ts
View File

@ -212,13 +212,17 @@ export class AppComponent implements OnDestroy {
this.router.navigate(['/']);
}
private async getProjectCount(): Promise<any> {
this.ownedProjectsCount = await this.projectService.SearchProjects(0, 0).then(res => {
return res.toObject().totalResult;
});
private getProjectCount(): void {
this.authService.isAllowed(['project.read']).subscribe((allowed) => {
if (allowed) {
this.projectService.SearchProjects(0, 0).then(res => {
this.ownedProjectsCount = res.toObject().totalResult;
});
this.grantedProjectsCount = await this.projectService.SearchGrantedProjects(0, 0).then(res => {
return res.toObject().totalResult;
this.projectService.SearchGrantedProjects(0, 0).then(res => {
this.grantedProjectsCount = res.toObject().totalResult;
});
}
});
}
}

30
console/src/app/modules/add-member-dialog/member-create-dialog.component.html
View File

@ -2,15 +2,39 @@
<span class="title">{{'MEMBER.ADD' | translate}}</span>
</h1>
<p class="desc"> {{'ORG_DETAIL.MEMBER.ADDDESCRIPTION' | translate}}</p>
<div mat-dialog-content>
<app-search-user-autocomplete (selectionChanged)="users = $event"></app-search-user-autocomplete>
<!-- if no context -->
<ng-container *ngIf="showCreationTypeSelector">
<mat-form-field class="full-width" appearance="outline">
<mat-label>{{ 'MEMBER.CREATIONTYPE' | translate }}</mat-label>
<mat-select [(ngModel)]="creationType" (selectionChange)="loadRoles()">
<mat-option *ngFor="let type of creationTypes" [value]="type">
{{ 'MEMBER.CREATIONTYPES.'+type | translate}}
</mat-option>
</mat-select>
</mat-form-field>
<ng-container
*ngIf="creationType === CreationType.PROJECT_OWNED || creationType === CreationType.PROJECT_GRANTED">
<p>{{'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate}}</p>
<app-search-project-autocomplete class="block" singleOutput="true"
(selectionChanged)="selectProject($event)"
[autocompleteType]="creationType === CreationType.PROJECT_OWNED ? ProjectAutocompleteType.PROJECT_OWNED : creationType === CreationType.PROJECT_GRANTED ? ProjectAutocompleteType.PROJECT_GRANTED : undefined">
</app-search-project-autocomplete>
</ng-container>
</ng-container>
<!-- if no context end -->
<app-search-user-autocomplete [users]="preselectedUsers" (selectionChanged)="users = $event">
</app-search-user-autocomplete>
<mat-form-field class="full-width" appearance="outline"
*ngIf="creationType === CreationType.PROJECT_OWNED || creationType === CreationType.PROJECT_GRANTED || creationType === CreationType.IAM">
<mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
<mat-label>{{ 'ROLESLABEL' | translate }}</mat-label>
<mat-select [(ngModel)]="roles" multiple>
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ 'ROLES.'+role | translate }}
{{ role }}
</mat-option>
</mat-select>
</mat-form-field>

94
console/src/app/modules/add-member-dialog/member-create-dialog.component.ts
View File

@ -1,10 +1,12 @@
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ProjectRole, User } from 'src/app/proto/generated/management_pb';
import { ProjectGrantView, ProjectRole, ProjectView, User } from 'src/app/proto/generated/management_pb';
import { AdminService } from 'src/app/services/admin.service';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
import { ProjectAutocompleteType } from '../search-project-autocomplete/search-project-autocomplete.component';
export enum CreationType {
PROJECT_OWNED = 0,
PROJECT_GRANTED = 1,
@ -17,40 +19,78 @@ export enum CreationType {
styleUrls: ['./member-create-dialog.component.scss'],
})
export class MemberCreateDialogComponent {
public projectId: string = '';
private projectId: string = '';
private grantId: string = '';
public preselectedUsers: Array<User.AsObject> = [];
public creationType!: CreationType;
public creationTypes: CreationType[] = [
CreationType.IAM,
CreationType.ORG,
CreationType.PROJECT_OWNED,
CreationType.PROJECT_GRANTED,
];
public users: Array<User.AsObject> = [];
public roles: Array<ProjectRole.AsObject> | string[] = [];
public CreationType: any = CreationType;
public ProjectAutocompleteType: any = ProjectAutocompleteType;
public memberRoleOptions: string[] = [];
public showCreationTypeSelector: boolean = false;
constructor(
private projectService: ProjectService,
private adminService: AdminService,
public dialogRef: MatDialogRef<MemberCreateDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
toastService: ToastService,
private toastService: ToastService,
) {
this.creationType = data.creationType;
this.projectId = data.projectId;
if (data?.projectId) {
this.projectId = data.projectId;
}
if (data?.user) {
this.preselectedUsers = [data.user];
this.users = [data.user];
}
if (this.creationType === CreationType.PROJECT_GRANTED) {
this.projectService.GetProjectGrantMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
toastService.showError(error);
});
} else if (this.creationType === CreationType.PROJECT_OWNED) {
this.projectService.GetProjectMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
toastService.showError(error);
});
} else if (this.creationType === CreationType.IAM) {
this.adminService.GetIamMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
toastService.showError(error);
});
if (data?.creationType !== undefined) {
this.creationType = data.creationType;
this.loadRoles();
} else {
this.showCreationTypeSelector = true;
}
}
public loadRoles(): void {
switch (this.creationType) {
case CreationType.PROJECT_GRANTED:
this.projectService.GetProjectGrantMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
this.toastService.showError(error);
});
break;
case CreationType.PROJECT_OWNED:
this.projectService.GetProjectMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
this.toastService.showError(error);
});
break;
case CreationType.IAM:
this.adminService.GetIamMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
this.toastService.showError(error);
});
break;
}
}
public selectProject(project: ProjectView.AsObject | ProjectGrantView.AsObject | any): void {
this.projectId = project.projectId;
if (project.id) {
this.grantId = project.id;
}
}
@ -59,7 +99,13 @@ export class MemberCreateDialogComponent {
}
public closeDialogWithSuccess(): void {
this.dialogRef.close({ users: this.users, roles: this.roles });
this.dialogRef.close({
users: this.users,
roles: this.roles,
creationType: this.creationType,
projectId: this.projectId,
grantId: this.grantId,
});
}
public setOrgMemberRoles(roles: string[]): void {

2
console/src/app/modules/add-member-dialog/member-create-dialog.module.ts
View File

@ -11,6 +11,7 @@ import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autoco
import {
OrgMemberRolesAutocompleteModule,
} from '../../pages/orgs/org-member-roles-autocomplete/org-member-roles-autocomplete.module';
import { SearchProjectAutocompleteModule } from '../search-project-autocomplete/search-project-autocomplete.module';
import { SearchRolesAutocompleteModule } from '../search-roles-autocomplete/search-roles-autocomplete.module';
import { MemberCreateDialogComponent } from './member-create-dialog.component';
@ -26,6 +27,7 @@ import { MemberCreateDialogComponent } from './member-create-dialog.component';
FormsModule,
SearchUserAutocompleteModule,
SearchRolesAutocompleteModule,
SearchProjectAutocompleteModule,
OrgMemberRolesAutocompleteModule,
],
})

2
console/src/app/modules/changes/changes.component.scss
View File

@ -9,7 +9,7 @@
@mixin changes-theme($theme) {
.scroll-container {
max-height: 60vh;
max-height: 50vh;
overflow-y: scroll;
.item {

14
console/src/app/modules/changes/changes.component.ts
View File

@ -45,13 +45,13 @@ export class ChangesComponent implements OnInit {
private init(): void {
let first: Promise<Changes>;
switch (this.changeType) {
case ChangeType.MYUSER: first = this.authUserService.GetMyUserChanges(10, 0);
case ChangeType.MYUSER: first = this.authUserService.GetMyUserChanges(20, 0);
break;
case ChangeType.USER: first = this.mgmtUserService.UserChanges(this.id, 10, 0);
case ChangeType.USER: first = this.mgmtUserService.UserChanges(this.id, 20, 0);
break;
case ChangeType.PROJECT: first = this.mgmtUserService.ProjectChanges(this.id, 20, 0);
break;
case ChangeType.ORG: first = this.mgmtUserService.OrgChanges(this.id, 10, 0);
case ChangeType.ORG: first = this.mgmtUserService.OrgChanges(this.id, 20, 0);
break;
}
@ -70,13 +70,13 @@ export class ChangesComponent implements OnInit {
let more: Promise<Changes>;
switch (this.changeType) {
case ChangeType.MYUSER: more = this.authUserService.GetMyUserChanges(10, cursor);
case ChangeType.MYUSER: more = this.authUserService.GetMyUserChanges(20, cursor);
break;
case ChangeType.USER: more = this.mgmtUserService.UserChanges(this.id, 10, cursor);
case ChangeType.USER: more = this.mgmtUserService.UserChanges(this.id, 20, cursor);
break;
case ChangeType.PROJECT: more = this.mgmtUserService.ProjectChanges(this.id, 10, cursor);
case ChangeType.PROJECT: more = this.mgmtUserService.ProjectChanges(this.id, 20, cursor);
break;
case ChangeType.ORG: more = this.mgmtUserService.OrgChanges(this.id, 10, cursor);
case ChangeType.ORG: more = this.mgmtUserService.OrgChanges(this.id, 20, cursor);
break;
}

4
console/src/app/modules/contributors/contributors.component.scss
View File

@ -52,6 +52,10 @@
display: flex;
align-items: center;
justify-content: center;
.avatar {
pointer-events: none;
}
}
.margin-neg {

11
console/src/app/modules/project-members/project-members-datasource.ts
View File

@ -1,4 +1,5 @@
import { DataSource } from '@angular/cdk/collections';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { ProjectMember, ProjectMemberSearchResponse, ProjectType } from 'src/app/proto/generated/management_pb';
@ -11,6 +12,8 @@ import { ProjectService } from 'src/app/services/project.service';
*/
export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject> {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public membersSubject: BehaviorSubject<ProjectMember.AsObject[]> = new BehaviorSubject<ProjectMember.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@ -35,8 +38,12 @@ export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject>
if (promise) {
from(promise).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
return resp.toObject().resultList;
const response = resp.toObject();
this.totalResult = response.totalResult;
if (response.viewTimestamp) {
this.viewTimestamp = response.viewTimestamp;
}
return response.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),

8
console/src/app/modules/project-members/project-members.component.html
View File

@ -2,7 +2,7 @@
title="{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}"
description="{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}">
<app-refresh-table *ngIf="project" (refreshed)="changePage()" [dataSize]="dataSource.totalResult"
[selection]="selection" [loading]="dataSource?.loading$ | async">
[timestamp]="dataSource.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
<ng-template appHasRole actions
[appHasRole]="['project.member.delete:' + project.projectId, 'project.member.delete']">
<button (click)="removeProjectMemberSelection()" color="warn"
@ -68,15 +68,15 @@
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
<th mat-header-cell *matHeaderCellDef> {{ 'ROLESLABEL' | translate }} </th>
<td mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline" *ngIf="project">
<mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
<mat-label>{{ 'ROLESLABEL' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple
[disabled]="([('project.member.write:' + project.projectId), 'project.member.write'] | hasRole | async) == false"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ 'ROLES.'+role | translate }}
{{ role }}
</mat-option>
</mat-select>
</mat-form-field>

1
console/src/app/modules/project-members/project-members.component.ts
View File

@ -122,7 +122,6 @@ export class ProjectMembersComponent {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
creationType: CreationType.PROJECT_OWNED,
projectId: this.project.projectId,
},
width: '400px',
});

9
console/src/app/modules/project-roles/project-roles-datasource.ts
View File

@ -1,4 +1,5 @@
import { DataSource } from '@angular/cdk/collections';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { ProjectRole } from 'src/app/proto/generated/management_pb';
@ -11,6 +12,8 @@ import { ProjectService } from 'src/app/services/project.service';
*/
export class ProjectRolesDataSource extends DataSource<ProjectRole.AsObject> {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public rolesSubject: BehaviorSubject<ProjectRole.AsObject[]> = new BehaviorSubject<ProjectRole.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@ -25,7 +28,11 @@ export class ProjectRolesDataSource extends DataSource<ProjectRole.AsObject> {
this.loadingSubject.next(true);
from(this.projectService.SearchProjectRoles(projectId, pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
const response = resp.toObject();
this.totalResult = response.totalResult;
if (response.viewTimestamp) {
this.viewTimestamp = response.viewTimestamp;
}
return resp.toObject().resultList;
}),
catchError(() => of([])),

4
console/src/app/modules/project-roles/project-roles.component.html
View File

@ -1,5 +1,5 @@
<app-refresh-table *ngIf="projectId" (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
[selection]="selection" [loading]="dataSource.loading$ | async">
<app-refresh-table *ngIf="projectId" (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult"
[selection]="selection" [loading]="dataSource?.loading$ | async" [timestamp]="dataSource?.viewTimestamp">
<ng-template appHasRole [appHasRole]="['project.role.delete', 'project.role.delete:' + projectId]" actions>
<button color="warn" class="icon-button" [disabled]="disabled"
matTooltip="{{'PROJECT.ROLE.DELETE' | translate}}" (click)="deleteSelectedRoles()" mat-icon-button

2
console/src/app/modules/refresh-table/refresh-table.component.html
View File

@ -1,5 +1,7 @@
<div class="table-header-row">
<div class="col">
<span class="desc"
*ngIf="timestamp">{{timestamp | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSize}}</span>

2
console/src/app/modules/refresh-table/refresh-table.component.ts
View File

@ -1,6 +1,7 @@
import { animate, animation, keyframes, style, transition, trigger, useAnimation } from '@angular/animations';
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
const rotate = animation([
animate(
@ -27,6 +28,7 @@ const rotate = animation([
})
export class RefreshTableComponent implements OnInit {
@Input() public selection: SelectionModel<any> = new SelectionModel<any>(true, []);
@Input() public timestamp!: Timestamp.AsObject;
@Input() public dataSize: number = 0;
@Input() public emitRefreshAfterTimeoutInMs: number = 0;
@Input() public loading: boolean = false;

4
console/src/app/modules/refresh-table/refresh-table.module.ts
View File

@ -6,6 +6,8 @@ import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe.module';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe.module';
import { RefreshTableComponent } from './refresh-table.component';
@ -21,6 +23,8 @@ import { RefreshTableComponent } from './refresh-table.component';
FormsModule,
MatTooltipModule,
MatProgressSpinnerModule,
TimestampToDatePipeModule,
LocalizedDatePipeModule,
],
exports: [
RefreshTableComponent,

48
console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts
View File

@ -6,14 +6,22 @@ import { MatChipInputEvent } from '@angular/material/chips';
import { forkJoin, from } from 'rxjs';
import { debounceTime, switchMap, tap } from 'rxjs/operators';
import {
ProjectGrantSearchResponse,
ProjectGrantView,
ProjectSearchKey,
ProjectSearchQuery,
ProjectSearchResponse,
ProjectView,
SearchMethod,
} from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
export enum ProjectAutocompleteType {
PROJECT_OWNED = 0,
PROJECT_GRANTED = 1,
}
@Component({
selector: 'app-search-project-autocomplete',
templateUrl: './search-project-autocomplete.component.html',
@ -32,6 +40,7 @@ export class SearchProjectAutocompleteComponent {
@ViewChild('nameInput') public nameInput!: ElementRef<HTMLInputElement>;
@ViewChild('auto') public matAutocomplete!: MatAutocomplete;
@Input() public singleOutput: boolean = false;
@Input() public autocompleteType!: ProjectAutocompleteType;
@Output() public selectionChanged: EventEmitter<
ProjectGrantView.AsObject[]
| ProjectGrantView.AsObject
@ -48,14 +57,39 @@ export class SearchProjectAutocompleteComponent {
query.setKey(ProjectSearchKey.PROJECTSEARCHKEY_PROJECT_NAME);
query.setValue(value);
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
return forkJoin([
from(this.projectService.SearchGrantedProjects(10, 0, [query])),
from(this.projectService.SearchProjects(10, 0, [query])),
]);
switch (this.autocompleteType) {
case ProjectAutocompleteType.PROJECT_GRANTED:
return from(this.projectService.SearchGrantedProjects(10, 0, [query]));
case ProjectAutocompleteType.PROJECT_OWNED:
return from(this.projectService.SearchProjects(10, 0, [query]));
default:
return forkJoin([
from(this.projectService.SearchGrantedProjects(10, 0, [query])),
from(this.projectService.SearchProjects(10, 0, [query])),
]);
}
}),
).subscribe(([granted, owned]) => {
this.isLoading = false;
this.filteredProjects = [...owned.toObject().resultList, ...granted.toObject().resultList];
).subscribe((returnValue) => {
switch (this.autocompleteType) {
case ProjectAutocompleteType.PROJECT_GRANTED:
this.isLoading = false;
this.filteredProjects = [...(returnValue as ProjectGrantSearchResponse).toObject().resultList];
break;
case ProjectAutocompleteType.PROJECT_OWNED:
this.isLoading = false;
this.filteredProjects = [...(returnValue as ProjectSearchResponse).toObject().resultList];
break;
default:
this.isLoading = false;
this.filteredProjects = [
...(returnValue as (ProjectSearchResponse | ProjectGrantSearchResponse)[])[0]
.toObject().resultList,
...(returnValue as (ProjectSearchResponse | ProjectGrantSearchResponse)[])[1]
.toObject().resultList,
];
break;
}
});
}

4
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts
View File

@ -29,7 +29,7 @@ export class SearchUserAutocompleteComponent {
public globalEmailControl: FormControl = new FormControl();
public emails: string[] = [];
public users: Array<User.AsObject> = [];
@Input() public users: Array<User.AsObject> = [];
public filteredUsers: Array<User.AsObject> = [];
public isLoading: boolean = false;
public target: UserTarget = UserTarget.SELF;
@ -39,6 +39,7 @@ export class SearchUserAutocompleteComponent {
@ViewChild('auto') public matAutocomplete!: MatAutocomplete;
@Output() public selectionChanged: EventEmitter<User.AsObject | User.AsObject[]> = new EventEmitter();
@Input() public singleOutput: boolean = false;
private unsubscribed$: Subject<void> = new Subject();
constructor(private userService: MgmtUserService, private toast: ToastService) {
this.getFilteredResults();
@ -102,6 +103,7 @@ export class SearchUserAutocompleteComponent {
if (index >= 0) {
this.users.splice(index, 1);
this.selectionChanged.emit(this.users);
}
}

11
console/src/app/modules/user-grants/user-grants-datasource.ts
View File

@ -1,4 +1,5 @@
import { DataSource } from '@angular/cdk/collections';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import {
@ -20,6 +21,8 @@ export enum UserGrantContext {
export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public grantsSubject: BehaviorSubject<UserGrantView.AsObject[]> = new BehaviorSubject<UserGrantView.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@ -104,8 +107,12 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
private loadResponse(promise: Promise<UserGrantSearchResponse>): void {
from(promise).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
return resp.toObject().resultList;
const response = resp.toObject();
this.totalResult = response.totalResult;
if (response.viewTimestamp) {
this.viewTimestamp = response.viewTimestamp;
}
return response.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),

2
console/src/app/modules/user-grants/user-grants.component.html
View File

@ -1,5 +1,5 @@
<app-refresh-table [loading]="dataSource?.loading$ | async" (refreshed)="changePage()"
[dataSize]="dataSource.totalResult" [selection]="selection">
[timestamp]="dataSource?.viewTimestamp" [dataSize]="dataSource?.totalResult" [selection]="selection">
<button color="warn" matTooltip="{{'GRANTS.DELETE' | translate}}" class="icon-button" mat-icon-button actions
(click)="deleteGrantSelection()" *ngIf="selection.hasValue() && allowDelete">
<i class="las la-trash"></i>

16
console/src/app/pages/iam/failed-events/failed-events.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ViewChild } from '@angular/core';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
@ -12,7 +12,9 @@ import { ToastService } from 'src/app/services/toast.service';
templateUrl: './failed-events.component.html',
styleUrls: ['./failed-events.component.scss'],
})
export class FailedEventsComponent {
export class FailedEventsComponent implements AfterViewInit {
// public viewTimestamp!: Timestamp.AsObject;
@ViewChild(MatPaginator) public eventPaginator!: MatPaginator;
public eventDataSource!: MatTableDataSource<FailedEvent.AsObject>;
@ -24,11 +26,19 @@ export class FailedEventsComponent {
this.loadEvents();
}
ngAfterViewInit(): void {
this.loadEvents();
}
public loadEvents(): void {
this.loadingSubject.next(true);
from(this.adminService.GetFailedEvents()).pipe(
map(resp => {
return resp.toObject().failedEventsList;
const response = resp.toObject();
// if (response.viewTimestamp) {
// this.viewTimestamp = response.viewTimestamp;
// }
return response.failedEventsList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),

10
console/src/app/pages/iam/iam-members/iam-members-datasource.ts
View File

@ -1,4 +1,5 @@
import { DataSource } from '@angular/cdk/collections';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { IamMemberView } from 'src/app/proto/generated/admin_pb';
@ -11,6 +12,7 @@ import { AdminService } from 'src/app/services/admin.service';
*/
export class IamMembersDataSource extends DataSource<IamMemberView.AsObject> {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public membersSubject: BehaviorSubject<IamMemberView.AsObject[]> = new BehaviorSubject<IamMemberView.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@ -27,8 +29,12 @@ export class IamMembersDataSource extends DataSource<IamMemberView.AsObject> {
from(this.adminService.SearchIamMembers(pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
return resp.toObject().resultList;
const response = resp.toObject();
this.totalResult = response.totalResult;
if (response.viewTimestamp) {
this.viewTimestamp = response.viewTimestamp;
}
return response.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),

155
console/src/app/pages/iam/iam-members/iam-members.component.html
View File

@ -1,99 +1,88 @@
<app-detail-layout [backRouterLink]="[ '/iam']" title="{{ 'IAM.MEMBER.TITLE' | translate }}"
description="{{ 'IAM.MEMBER.DESCRIPTION' | translate }}">
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.membersSubject.value.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['iam.member.delete']">
<app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
[timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource.loading$ | async">
<ng-template appHasRole actions [appHasRole]="['iam.member.delete']">
<button color="warn" (click)="removeProjectMemberSelection()"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
*ngIf="selection.hasValue()">
<i class="las la-trash"></i>
</button>
</ng-template>
<ng-template appHasRole [appHasRole]="['iam.member.write']">
<ng-template appHasRole actions [appHasRole]="['iam.member.write']">
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="dataSource?.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
<div class="table-wrapper">
<table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'ROLESLABEL' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline">
<mat-label>{{ 'ROLESLABEL' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple
[disabled]="(['org.member.write'] | hasRole | async) == false"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ role }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="background-style paginator" #paginator [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
<table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline">
<mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple
[disabled]="(['org.member.write'] | hasRole | async) == false"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ 'ROLES.'+role | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="background-style paginator" #paginator [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</app-refresh-table>
</app-detail-layout>

39
console/src/app/pages/iam/iam-members/iam-members.component.scss
View File

@ -1,46 +1,11 @@
.table-header-row {
display: flex;
align-items: center;
width: 100%;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.icon-button {
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
}
.add-button {
border-radius: .5rem;
}
.table-wrapper {
overflow: auto;
width: 100%;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
}
.table,
.paginator {
width: 100%;

7
console/src/app/pages/iam/iam-members/iam-members.component.ts
View File

@ -105,7 +105,7 @@ export class IamMembersComponent implements AfterViewInit {
public openAddMember(): void {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
creationType: CreationType.ORG,
creationType: CreationType.IAM,
},
width: '400px',
});
@ -127,4 +127,9 @@ export class IamMembersComponent implements AfterViewInit {
}
});
}
public refreshPage(): void {
this.selection.clear();
this.dataSource.loadMembers(this.paginator.pageIndex, this.paginator.pageSize);
}
}

2
console/src/app/pages/iam/iam-members/iam-members.module.ts
View File

@ -16,6 +16,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
import { IamMembersRoutingModule } from './iam-members-routing.module';
@ -45,6 +46,7 @@ import { IamMembersComponent } from './iam-members.component';
MatFormFieldModule,
MatSelectModule,
HasRolePipeModule,
RefreshTableModule,
],
})
export class IamMembersModule { }

8
console/src/app/pages/iam/iam-views/iam-views.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ViewChild } from '@angular/core';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
@ -11,7 +11,7 @@ import { AdminService } from 'src/app/services/admin.service';
templateUrl: './iam-views.component.html',
styleUrls: ['./iam-views.component.scss'],
})
export class IamViewsComponent {
export class IamViewsComponent implements AfterViewInit {
@ViewChild(MatPaginator) public paginator!: MatPaginator;
public dataSource!: MatTableDataSource<View.AsObject>;
@ -23,6 +23,10 @@ export class IamViewsComponent {
this.loadViews();
}
ngAfterViewInit(): void {
this.loadViews();
}
public loadViews(): void {
this.loadingSubject.next(true);
from(this.adminService.GetViews()).pipe(

2
console/src/app/pages/orgs/org-member-roles-autocomplete/org-member-roles-autocomplete.component.html
View File

@ -7,7 +7,7 @@
<mat-spinner diameter="30"></mat-spinner>
</mat-option>
<mat-option *ngFor="let role of allRoles" [value]="role">
{{'ROLES.'+role | translate}}
{{ role }}
</mat-option>
</mat-select>
</mat-form-field>

10
console/src/app/pages/orgs/org-members/org-members-datasource.ts
View File

@ -1,4 +1,5 @@
import { DataSource } from '@angular/cdk/collections';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { OrgMemberView } from 'src/app/proto/generated/management_pb';
@ -6,6 +7,7 @@ import { OrgService } from 'src/app/services/org.service';
export class OrgMembersDataSource extends DataSource<OrgMemberView.AsObject> {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public membersSubject: BehaviorSubject<OrgMemberView.AsObject[]> = new BehaviorSubject<OrgMemberView.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@ -20,8 +22,12 @@ export class OrgMembersDataSource extends DataSource<OrgMemberView.AsObject> {
this.loadingSubject.next(true);
from(this.orgService.SearchMyOrgMembers(pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
return resp.toObject().resultList;
const response = resp.toObject();
this.totalResult = response.totalResult;
if (response.viewTimestamp) {
this.viewTimestamp = response.viewTimestamp;
}
return response.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),

154
console/src/app/pages/orgs/org-members/org-members.component.html
View File

@ -1,99 +1,85 @@
<app-detail-layout [backRouterLink]="[ '/org']" title="{{org?.name}} {{ 'ORG.MEMBER.TITLE' | translate }}"
description="{{ 'ORG.MEMBER.DESCRIPTION' | translate }}">
<div class="table-header-row" *ngIf="org">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.membersSubject.value.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['org.member.delete:'+org.id,'org.member.delete']">
<app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
[timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource.loading$ | async">
<ng-template appHasRole actions [appHasRole]="['org.member.delete:'+org.id,'org.member.delete']">
<button (click)="removeProjectMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
class="icon-button" mat-icon-button *ngIf="selection.hasValue()" color="warn">
<i class="las la-trash"></i>
</button>
</ng-template>
<ng-template appHasRole [appHasRole]="['org.member.write:'+org.id,'org.member.write']">
<ng-template appHasRole actions [appHasRole]="['org.member.write:'+org.id,'org.member.write']">
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="dataSource?.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
<div class="table-wrapper">
<table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'ROLESLABEL' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline">
<mat-label>{{ 'ROLESLABEL' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple
[disabled]="(['org.member.write'] | hasRole | async) == false"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ role }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="paginator background-style" #paginator [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
<table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline">
<mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple
[disabled]="(['org.member.write'] | hasRole | async) == false"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ 'ROLES.'+role | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="paginator background-style" #paginator [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</app-refresh-table>
</app-detail-layout>

39
console/src/app/pages/orgs/org-members/org-members.component.scss
View File

@ -1,46 +1,7 @@
.table-header-row {
display: flex;
align-items: center;
width: 100%;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.icon-button {
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
}
}
.table-wrapper {
width: 100%;
overflow: auto;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
}
.table,
.paginator {
width: 100%;

19
console/src/app/pages/orgs/org-members/org-members.component.ts
View File

@ -3,10 +3,9 @@ import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { MatTable } from '@angular/material/table';
import { tap } from 'rxjs/operators';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { Org, OrgMember, OrgMemberView, ProjectMember, ProjectType, User } from 'src/app/proto/generated/management_pb';
import { Org, OrgMemberView, ProjectType, User } from 'src/app/proto/generated/management_pb';
import { OrgService } from 'src/app/services/org.service';
import { ToastService } from 'src/app/services/toast.service';
@ -22,7 +21,6 @@ export class OrgMembersComponent implements AfterViewInit {
public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
public disabled: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<OrgMemberView.AsObject>;
public dataSource!: OrgMembersDataSource;
public selection: SelectionModel<OrgMemberView.AsObject> = new SelectionModel<OrgMemberView.AsObject>(true, []);
@ -63,7 +61,7 @@ export class OrgMembersComponent implements AfterViewInit {
updateRoles(member: OrgMemberView.AsObject, selectionChange: MatSelectChange): void {
this.orgService.ChangeMyOrgMember(member.userId, selectionChange.value)
.then((newmember: OrgMember) => {
.then(() => {
this.toast.showInfo('ORG.TOAST.MEMBERCHANGED', true);
}).catch(error => {
this.toast.showError(error);
@ -87,14 +85,6 @@ export class OrgMembersComponent implements AfterViewInit {
}));
}
public removeMember(member: ProjectMember.AsObject): void {
this.orgService.RemoveMyOrgMember(member.userId).then(() => {
this.toast.showInfo('ORG.TOAST.MEMBERREMOVED', true);
}).catch(error => {
this.toast.showError(error);
});
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.membersSubject.value.length;
@ -132,4 +122,9 @@ export class OrgMembersComponent implements AfterViewInit {
}
});
}
public refreshPage(): void {
this.selection.clear();
this.dataSource.loadMembers(this.paginator.pageIndex, this.paginator.pageSize);
}
}

2
console/src/app/pages/orgs/org-members/org-members.module.ts
View File

@ -16,6 +16,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
import { OrgMembersRoutingModule } from './org-members-routing.module';
@ -45,6 +46,7 @@ import { OrgMembersComponent } from './org-members.component';
MatFormFieldModule,
MatSelectModule,
HasRolePipeModule,
RefreshTableModule,
],
})
export class OrgMembersModule { }

1
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.ts
View File

@ -132,7 +132,6 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
creationType: CreationType.PROJECT_GRANTED,
projectId: this.project.projectId,
},
width: '400px',
});

144
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.html
View File

@ -9,88 +9,66 @@
</div>
<div *ngIf="!grid && grantedProjectList">
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.data?.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
<app-refresh-table (refreshed)="refreshPage()" [dataSize]="totalResult" [timestamp]="viewTimestamp"
[selection]="selection" [loading]="loading$ | async">
<div class="table-wrapper">
<table class="table background-style" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
<td mat-cell *matCellDef="let project"> {{project.projectName}} </td>
</ng-container>
<ng-container matColumnDef="resourceOwnerName">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let project">
{{project.resourceOwnerName}} </td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
<td mat-cell *matCellDef="let project"><span
*ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span></td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.creationDate">{{project.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.changeDate">{{project.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/granted-projects', row.projectId, 'grant', row.id]"></tr>
</table>
<mat-paginator class="paginator background-style" #paginator [length]="totalResult" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</div>
<span class="fill-space"></span>
<div @list class="action-btns" *ngIf="selection.hasValue()">
<button @animate (click)="deactivateSelectedProjects()"
matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="icon-button" mat-icon-button>
<mat-icon svgIcon="mdi_light_off"></mat-icon>
</button>
<button @animate (click)="reactivateSelectedProjects()"
matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" class="icon-button" mat-icon-button>
<mat-icon svgIcon="mdi_light_on"></mat-icon>
</button>
</div>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="(loading$ | async) || (loading$ | async)">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table class="table background-style" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
<td mat-cell *matCellDef="let project"> {{project.projectName}} </td>
</ng-container>
<ng-container matColumnDef="resourceOwnerName">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let project">
{{project.resourceOwnerName}} </td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
<td mat-cell *matCellDef="let project"><span
*ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span></td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.creationDate">{{project.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.changeDate">{{project.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/granted-projects', row.projectId, 'grant', row.id]"></tr>
</table>
<mat-paginator class="paginator background-style" [length]="totalResult" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</div>
</app-refresh-table>
</div>

38
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.scss
View File

@ -10,47 +10,9 @@
}
}
.table-header-row {
display: flex;
align-items: center;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.action-btns {
display: flex;
align-items: center;
}
.icon-button {
margin-right: .5rem;
}
}
.table-wrapper {
overflow: auto;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
}
.table,
.paginator {
width: 100%;

42
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.ts
View File

@ -1,10 +1,11 @@
import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { ProjectGrantView } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
@ -36,8 +37,11 @@ import { ToastService } from 'src/app/services/toast.service';
})
export class GrantedProjectListComponent implements OnInit, OnDestroy {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public dataSource: MatTableDataSource<ProjectGrantView.AsObject> =
new MatTableDataSource<ProjectGrantView.AsObject>();
@ViewChild(MatPaginator) public paginator!: MatPaginator;
public grantedProjectList: ProjectGrantView.AsObject[] = [];
public displayedColumns: string[] = ['select', 'name', 'resourceOwnerName', 'state', 'creationDate', 'changeDate'];
@ -86,8 +90,12 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
private async getData(limit: number, offset: number): Promise<void> {
this.loadingSubject.next(true);
this.projectService.SearchGrantedProjects(limit, offset).then(res => {
this.grantedProjectList = res.toObject().resultList;
this.totalResult = res.toObject().totalResult;
const response = res.toObject();
this.grantedProjectList = response.resultList;
this.totalResult = response.totalResult;
if (response.viewTimestamp) {
this.viewTimestamp = response.viewTimestamp;
}
if (this.totalResult > 5) {
this.grid = false;
}
@ -100,28 +108,8 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
});
}
public reactivateSelectedProjects(): void {
const promises = this.selection.selected.map(project => {
this.projectService.ReactivateProject(project.id);
});
Promise.all(promises).then(() => {
this.toast.showInfo('PROJECT.TOAST.REACTIVATED', true);
}).catch(error => {
this.toast.showError(error);
});
}
public deactivateSelectedProjects(): void {
const promises = this.selection.selected.map(project => {
this.projectService.DeactivateProject(project.id);
});
Promise.all(promises).then(() => {
this.toast.showInfo('PROJECT.TOAST.DEACTIVATED', true);
}).catch(error => {
this.toast.showError(error);
});
public refreshPage(): void {
this.selection.clear();
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
}
}

2
console/src/app/pages/projects/granted-projects/granted-projects.module.ts
View File

@ -22,6 +22,7 @@ import { ChangesModule } from 'src/app/modules/changes/changes.module';
import { ContributorsModule } from 'src/app/modules/contributors/contributors.module';
import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
import { ProjectRolesModule } from 'src/app/modules/project-roles/project-roles.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { SharedModule } from 'src/app/modules/shared/shared.module';
import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
@ -73,6 +74,7 @@ import { GrantedProjectsComponent } from './granted-projects.component';
SharedModule,
LocalizedDatePipeModule,
MemberCreateDialogModule,
RefreshTableModule,
],
})
export class GrantedProjectsModule { }

11
console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications-datasource.ts
View File

@ -1,4 +1,5 @@
import { DataSource } from '@angular/cdk/collections';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { Application } from 'src/app/proto/generated/management_pb';
@ -11,6 +12,8 @@ import { ProjectService } from 'src/app/services/project.service';
*/
export class ProjectApplicationsDataSource extends DataSource<Application.AsObject> {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public appsSubject: BehaviorSubject<Application.AsObject[]> = new BehaviorSubject<Application.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@ -25,8 +28,12 @@ export class ProjectApplicationsDataSource extends DataSource<Application.AsObje
this.loadingSubject.next(true);
from(this.projectService.SearchApplications(projectId, pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
return resp.toObject().resultList;
const response = resp.toObject();
this.totalResult = response.totalResult;
if (response.viewTimestamp) {
this.viewTimestamp = response.viewTimestamp;
}
return response.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),

2
console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.html
View File

@ -1,5 +1,5 @@
<app-refresh-table [loading]="dataSource.loading$ | async" [selection]="selection" (refreshed)="refreshPage()"
[dataSize]="dataSource.totalResult">
[dataSize]="dataSource.totalResult" [timestamp]="dataSource?.viewTimestamp">
<ng-template appHasRole [appHasRole]="['project.app.write']" actions>
<a [disabled]="disabled" class="add-button" [routerLink]="[ '/projects', projectId, 'apps', 'create']"
color="primary" mat-raised-button>

10
console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants-datasource.ts
View File

@ -1,4 +1,5 @@
import { DataSource } from '@angular/cdk/collections';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { ProjectGrant } from 'src/app/proto/generated/management_pb';
@ -11,6 +12,7 @@ import { ProjectService } from 'src/app/services/project.service';
*/
export class ProjectGrantsDataSource extends DataSource<ProjectGrant.AsObject> {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public grantsSubject: BehaviorSubject<ProjectGrant.AsObject[]> = new BehaviorSubject<ProjectGrant.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@ -25,8 +27,12 @@ export class ProjectGrantsDataSource extends DataSource<ProjectGrant.AsObject> {
this.loadingSubject.next(true);
from(this.projectService.SearchProjectGrants(projectId, pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
return resp.toObject().resultList;
const response = resp.toObject();
this.totalResult = response.totalResult;
if (response.viewTimestamp) {
this.viewTimestamp = response.viewTimestamp;
}
return response.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),

2
console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html
View File

@ -1,5 +1,5 @@
<app-refresh-table [loading]="dataSource?.loading$ | async" *ngIf="projectId" (refreshed)="loadGrantsPage()"
[dataSize]="dataSource.totalResult" [selection]="selection">
[dataSize]="dataSource.totalResult" [selection]="selection" [timestamp]="dataSource?.viewTimestamp">
<ng-template appHasRole [appHasRole]="['project.grant.member.delete:'+projectId, 'project.grant.member.delete']"
actions>
<button (click)="deleteSelectedGrants()" [disabled]="disabled" mat-icon-button *ngIf="selection.hasValue()"

126
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.html
View File

@ -8,78 +8,66 @@
</button>
</div>
<div *ngIf="!grid && ownedProjectList">
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.data?.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['project.write']">
<app-refresh-table (refreshed)="refreshPage()" [dataSize]="totalResult" [timestamp]="viewTimestamp"
[selection]="selection" [loading]="loading$ | async">
<ng-template actions appHasRole [appHasRole]="['project.write']">
<a class="add-button" [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="(loading$ | async) || (loading$ | async)">
<mat-spinner diameter="50"></mat-spinner>
<div class="table-wrapper">
<table class="table background-style" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
<td mat-cell *matCellDef="let project"> {{project.name}} </td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
<td mat-cell *matCellDef="let project"><span
*ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span></td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.creationDate">{{project.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.changeDate">{{project.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/projects', row.projectId]"></tr>
</table>
<mat-paginator class="paginator background-style" [length]="totalResult" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</div>
<table class="table background-style" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
<td mat-cell *matCellDef="let project"> {{project.name}} </td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
<td mat-cell *matCellDef="let project"><span
*ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span></td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.creationDate">{{project.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.changeDate">{{project.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/projects', row.projectId]"></tr>
</table>
<mat-paginator class="paginator background-style" [length]="totalResult" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</div>
</app-refresh-table>
</div>

42
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.scss
View File

@ -18,51 +18,9 @@ h1 {
}
}
.table-header-row {
display: flex;
align-items: center;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.action-btns {
display: flex;
align-items: center;
}
.icon-button {
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
}
}
.table-wrapper {
overflow: auto;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
}
.table,
.paginator {
width: 100%;

22
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.ts
View File

@ -1,10 +1,11 @@
import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { ProjectView } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
@ -36,9 +37,13 @@ import { ToastService } from 'src/app/services/toast.service';
})
export class OwnedProjectListComponent implements OnInit, OnDestroy {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public dataSource: MatTableDataSource<ProjectView.AsObject> =
new MatTableDataSource<ProjectView.AsObject>();
@ViewChild(MatPaginator) public paginator!: MatPaginator;
public ownedProjectList: ProjectView.AsObject[] = [];
public displayedColumns: string[] = ['select', 'name', 'state', 'creationDate', 'changeDate'];
public selection: SelectionModel<ProjectView.AsObject> = new SelectionModel<ProjectView.AsObject>(true, []);
@ -86,11 +91,15 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
private async getData(limit: number, offset: number): Promise<void> {
this.loadingSubject.next(true);
this.projectService.SearchProjects(limit, offset).then(res => {
this.ownedProjectList = res.toObject().resultList;
this.totalResult = res.toObject().totalResult;
const response = res.toObject();
this.ownedProjectList = response.resultList;
this.totalResult = response.totalResult;
if (this.totalResult > 10) {
this.grid = false;
}
if (response.viewTimestamp) {
this.viewTimestamp = response.viewTimestamp;
}
this.dataSource.data = this.ownedProjectList;
this.loadingSubject.next(false);
}).catch(error => {
@ -126,4 +135,9 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
this.toast.showError(error);
});
}
public refreshPage(): void {
this.selection.clear();
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
}
}

2
console/src/app/pages/projects/owned-projects/owned-projects.module.ts
View File

@ -17,6 +17,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
import { CardModule } from 'src/app/modules/card/card.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { SharedModule } from 'src/app/modules/shared/shared.module';
import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
@ -61,6 +62,7 @@ import { OwnedProjectsComponent } from './owned-projects.component';
TimestampToDatePipeModule,
LocalizedDatePipeModule,
SharedModule,
RefreshTableModule,
],
})
export class OwnedProjectsModule { }

11
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-datasource.ts
View File

@ -1,4 +1,5 @@
import { DataSource } from '@angular/cdk/collections';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { ProjectMember } from 'src/app/proto/generated/management_pb';
@ -11,6 +12,8 @@ import { ProjectService } from 'src/app/services/project.service';
*/
export class ProjectGrantMembersDataSource extends DataSource<ProjectMember.AsObject> {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public membersSubject: BehaviorSubject<ProjectMember.AsObject[]> = new BehaviorSubject<ProjectMember.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@ -28,8 +31,12 @@ export class ProjectGrantMembersDataSource extends DataSource<ProjectMember.AsOb
from(this.projectService.SearchProjectGrantMembers(projectId,
grantId, pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
return resp.toObject().resultList;
const response = resp.toObject();
this.totalResult = response.totalResult;
if (response.viewTimestamp) {
this.viewTimestamp = response.viewTimestamp;
}
return response.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),

152
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.html
View File

@ -1,15 +1,5 @@
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.membersSubject.value.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
[timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource.loading$ | async">
<button (click)="removeProjectMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
class="icon-button" color="warn" mat-icon-button *ngIf="selection.hasValue()">
<i class="las la-trash"></i>
@ -18,74 +8,74 @@
mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="dataSource?.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="dataSource?.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table mat-table class="table" aria-label="Elements"
[ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline" *ngIf="projectId">
<mat-label>{{ 'PROJECT.MEMBER.ROLES' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple [disabled]="disabled"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ role }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="paginator" [ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}"
#paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
<table mat-table class="table" aria-label="Elements"
[ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline" *ngIf="projectId">
<mat-label>{{ 'PROJECT.MEMBER.ROLES' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple [disabled]="disabled"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ 'ROLES.'+role | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="paginator" [ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" #paginator
[pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</app-refresh-table>

37
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.scss
View File

@ -1,44 +1,7 @@
.table-header-row {
display: flex;
align-items: center;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.icon-button {
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
}
}
.table-wrapper {
overflow: auto;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
}
.table,
.paginator {
td,

13
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.ts
View File

@ -94,14 +94,6 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
}));
}
public removeMember(member: ProjectMember.AsObject): void {
this.projectService.RemoveProjectGrantMember(this.projectId, this.grantId, member.userId).then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERREMOVED', true);
}).catch(error => {
this.toast.showError(error);
});
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.membersSubject.value.length;
@ -150,4 +142,9 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
this.toast.showError(error);
});
}
public refreshPage(): void {
this.selection.clear();
this.dataSource.loadGrantMembers(this.projectId, this.grantId, this.paginator.pageIndex, this.paginator.pageSize);
}
}

2
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.module.ts
View File

@ -16,6 +16,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module';
import {
@ -46,6 +47,7 @@ import { ProjectGrantMembersComponent } from './project-grant-members.component'
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
RefreshTableModule,
],
exports: [
ProjectGrantMembersComponent,

5
console/src/app/pages/signedout/signedout.component.html
View File

@ -1,10 +1,9 @@
<div class="wrap">
<div class="block">
<div class="header">
<img alt="zitadel logo" *ngIf="dark; else lighttheme"
src="../../../assets/images/zitadel-logo-oneline-darkdesign.svg" />
<img alt="zitadel logo" *ngIf="dark; else lighttheme" src="../../../assets/images/zitadel-logo-light.svg" />
<ng-template #lighttheme>
<img alt="zitadel logo" src="../../../assets/images/zitadel-logo-oneline-lightdesign.svg" />
<img alt="zitadel logo" src="../../../assets/images/zitadel-logo-dark.svg" />
</ng-template>
<p>{{'USER.SIGNEDOUT' | translate}}</p>

2
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html
View File

@ -139,6 +139,8 @@
</div>
</div>
<app-memberships [user]="user"></app-memberships>
<app-changes class="changes" [changeType]="ChangeType.MYUSER" [id]="user.id"></app-changes>
</div>
</app-meta-layout>

58
console/src/app/pages/users/user-detail/membership-detail/membership-detail-datasource.ts Normal file
View File

@ -0,0 +1,58 @@
import { DataSource } from '@angular/cdk/collections';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { UserMembershipView } from 'src/app/proto/generated/management_pb';
import { MgmtUserService } from 'src/app/services/mgmt-user.service';
export class MembershipDetailDataSource extends DataSource<UserMembershipView.AsObject> {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public membersSubject: BehaviorSubject<UserMembershipView.AsObject[]>
= new BehaviorSubject<UserMembershipView.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
constructor(private mgmtUserService: MgmtUserService) {
super();
}
public loadMemberships(userId: string, pageIndex: number, pageSize: number): void {
const offset = pageIndex * pageSize;
this.loadingSubject.next(true);
from(this.mgmtUserService.SearchUserMemberships(userId, pageSize, offset)).pipe(
map(resp => {
const response = resp.toObject();
this.totalResult = response.totalResult;
if (response.viewTimestamp) {
this.viewTimestamp = response.viewTimestamp;
}
return response.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
this.membersSubject.next(members);
});
}
/**
* Connect this data source to the table. The table will only update when
* the returned stream emits new items.
* @returns A stream of the items to be rendered.
*/
public connect(): Observable<UserMembershipView.AsObject[]> {
return this.membersSubject.asObservable();
}
/**
* Called when the table is being destroyed. Use this function, to clean up
* any open connections or free any held resources that were set up during connect.
*/
public disconnect(): void {
this.membersSubject.complete();
this.loadingSubject.complete();
}
}

74
console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.html Normal file
View File

@ -0,0 +1,74 @@
<app-detail-layout [backRouterLink]="[ '/users', user?.id]"
title="{{user?.displayName}} {{ 'USER.MEMBERSHIPS.TITLE' | translate }}"
description="{{ 'USER.MEMBERSHIPS.DESCRIPTION' | translate }}">
<app-refresh-table class="refresh-table" (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult"
[timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
<!-- <button actions (click)="removeSelectedMemberships()" matTooltip="{{'USER.MEMBERSHIPS.REMOVE' | translate}}"
class="icon-button" mat-icon-button *ngIf="selection.hasValue()" color="warn">
<i class="las la-trash"></i>
</button> -->
<a actions color="primary" class="add-button" (click)="addMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
<div class="table-wrapper">
<table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="memberType">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MEMBERSHIPS.TYPE' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
{{'USER.MEMBERSHIPS.TYPES.' + member.memberType | translate }} </td>
</ng-container>
<ng-container matColumnDef="displayName">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MEMBERSHIPS.DISPLAYNAME' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
{{member.displayName}} </td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MEMBERSHIPS.CREATIONDATE' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
{{member.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}} </td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MEMBERSHIPS.CHANGEDATE' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
{{member.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
{{member.rolesList.join(', ')}}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="paginator background-style" #paginator [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</app-refresh-table>
</app-detail-layout>

51
console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.scss Normal file
View File

@ -0,0 +1,51 @@
.add-button {
border-radius: .5rem;
}
.refresh-table {
width: 100%;
}
.table-wrapper {
width: 100%;
overflow: auto;
.table,
.paginator {
width: 100%;
td,
th {
padding: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.action {
width: 40px;
}
.data-row {
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
}
}
.pointer {
outline: none;
cursor: pointer;
}

25
console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MembershipDetailComponent } from './membership-detail.component';
describe('MembershipDetailComponent', () => {
let component: MembershipDetailComponent;
let fixture: ComponentFixture<MembershipDetailComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MembershipDetailComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MembershipDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

213
console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.ts Normal file
View File

@ -0,0 +1,213 @@
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatTable } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { tap } from 'rxjs/operators';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { User, UserMembershipSearchResponse, UserMembershipView, UserView } from 'src/app/proto/generated/management_pb';
import { AdminService } from 'src/app/services/admin.service';
import { MgmtUserService } from 'src/app/services/mgmt-user.service';
import { OrgService } from 'src/app/services/org.service';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
import { MembershipDetailDataSource } from './membership-detail-datasource';
@Component({
selector: 'app-membership-detail',
templateUrl: './membership-detail.component.html',
styleUrls: ['./membership-detail.component.scss'],
})
export class MembershipDetailComponent implements AfterViewInit {
public user!: UserView.AsObject;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<UserMembershipView.AsObject>;
public dataSource!: MembershipDetailDataSource;
public selection: SelectionModel<UserMembershipView.AsObject>
= new SelectionModel<UserMembershipView.AsObject>(true, []);
public memberRoleOptions: string[] = [];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'memberType', 'displayName', 'creationDate', 'changeDate', 'roles'];
public loading: boolean = false;
public memberships!: UserMembershipSearchResponse.AsObject;
constructor(
private mgmtUserService: MgmtUserService,
activatedRoute: ActivatedRoute,
private dialog: MatDialog,
private toast: ToastService,
private projectService: ProjectService,
private orgService: OrgService,
private adminService: AdminService,
) {
activatedRoute.params.subscribe(data => {
const { id } = data;
if (id) {
this.mgmtUserService.GetUserByID(id).then(user => {
this.user = user.toObject();
this.dataSource = new MembershipDetailDataSource(this.mgmtUserService);
this.dataSource.loadMemberships(
this.user.id,
0,
50,
);
}).catch(err => {
console.error(err);
});
}
});
}
public ngAfterViewInit(): void {
this.paginator.page
.pipe(
tap(() => this.loadMembershipsPage()),
)
.subscribe();
}
private loadMembershipsPage(): void {
this.dataSource.loadMemberships(
this.user.id,
this.paginator.pageIndex,
this.paginator.pageSize,
);
}
// public removeSelectedMemberships(): void {
// Promise.all(this.selection.selected.map(membership => {
// switch (membership.memberType) {
// case MemberType.MEMBERTYPE_ORGANISATION:
// return this.orgService.RemoveMyOrgMember(membership.objectId);
// case MemberType.MEMBERTYPE_PROJECT:
// return this.projectService.RemoveProjectMember(membership.objectId, this.user.id);
// // case MemberType.MEMBERTYPE_PROJECT_GRANT:
// // return this.projectService.RemoveProjectGrantMember(membership.objectId, this.user.id);
// }
// }));
// }
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.membersSubject.value.length;
return numSelected === numRows;
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
}
public addMember(): void {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
width: '400px',
data: {
user: this.user,
},
});
dialogRef.afterClosed().subscribe(resp => {
if (resp && resp.creationType !== undefined) {
switch (resp.creationType) {
case CreationType.IAM:
this.createIamMember(resp);
break;
case CreationType.ORG:
this.createOrgMember(resp);
break;
case CreationType.PROJECT_OWNED:
this.createOwnedProjectMember(resp);
break;
case CreationType.PROJECT_GRANTED:
this.createGrantedProjectMember(resp);
break;
}
}
});
}
public async loadManager(userId: string): Promise<void> {
this.mgmtUserService.SearchUserMemberships(userId, 100, 0, []).then(response => {
this.memberships = response.toObject();
this.loading = false;
});
}
public createIamMember(response: any): void {
const users: User.AsObject[] = response.users;
const roles: string[] = response.roles;
if (users && users.length && roles && roles.length) {
Promise.all(users.map(user => {
return this.adminService.AddIamMember(user.id, roles);
})).then(() => {
this.toast.showInfo('IAM.TOAST.MEMBERADDED', true);
}).catch(error => {
this.toast.showError(error);
});
}
}
private createOrgMember(response: any): void {
const users: User.AsObject[] = response.users;
const roles: string[] = response.roles;
if (users && users.length && roles && roles.length) {
Promise.all(users.map(user => {
return this.orgService.AddMyOrgMember(user.id, roles);
})).then(() => {
this.toast.showInfo('ORG.TOAST.MEMBERADDED', true);
}).catch(error => {
this.toast.showError(error);
});
}
}
private createGrantedProjectMember(response: any): void {
const users: User.AsObject[] = response.users;
const roles: string[] = response.roles;
if (users && users.length && roles && roles.length) {
users.forEach(user => {
return this.projectService.AddProjectGrantMember(
response.projectId,
response.grantId,
user.id,
roles,
).then(() => {
this.toast.showInfo('PROJECT.TOAST.MEMBERADDED', true);
}).catch(error => {
this.toast.showError(error);
});
});
}
}
private createOwnedProjectMember(response: any): void {
const users: User.AsObject[] = response.users;
const roles: string[] = response.roles;
if (users && users.length && roles && roles.length) {
users.forEach(user => {
return this.projectService.AddProjectMember(response.projectId, user.id, roles)
.then(() => {
this.toast.showInfo('PROJECT.TOAST.MEMBERADDED', true);
}).catch(error => {
this.toast.showError(error);
});
});
}
}
public refreshPage(): void {
this.selection.clear();
this.dataSource.loadMemberships(this.user.id, this.paginator.pageIndex, this.paginator.pageSize);
}
}

50
console/src/app/pages/users/user-detail/membership-detail/membership-detail.module.ts Normal file
View File

@ -0,0 +1,50 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule, Routes } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe.module';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe.module';
import { MembershipDetailComponent } from './membership-detail.component';
const routes: Routes = [
{
path: '',
component: MembershipDetailComponent,
canActivate: [],
data: {
roles: ['user.write'],
},
},
];
@NgModule({
declarations: [MembershipDetailComponent],
imports: [
CommonModule,
RouterModule.forChild(routes),
TranslateModule,
DetailLayoutModule,
MatCheckboxModule,
MatTableModule,
MatPaginatorModule,
MatProgressSpinnerModule,
LocalizedDatePipeModule,
TimestampToDatePipeModule,
HasRoleModule,
MatIconModule,
MatButtonModule,
RefreshTableModule,
MatTooltipModule,
],
})
export class MembershipDetailModule { }

37
console/src/app/pages/users/user-detail/memberships/memberships.component.html Normal file
View File

@ -0,0 +1,37 @@
<div class="membership-groups">
<span class="header">{{ 'USER.MEMBERSHIPS.TITLE' | translate }}</span>
<!-- <span class="sub-header">{{ 'USER,' }}</span> -->
<div class="people" *ngIf="memberships">
<div class="img-list" [@cardAnimation]="memberships.totalResult">
<mat-spinner class="spinner" diameter="20" *ngIf="loading"></mat-spinner>
<ng-container *ngIf="memberships.totalResult < 10; else compact">
<ng-container *ngFor="let membership of memberships.resultList; index as i">
<div @animate class="avatar-circle" (click)="navigateToObject()"
matTooltip="{{ membership.displayName }} | {{membership.rolesList?.join(' ')}}"
[ngStyle]="{'z-index': 100 - i}">
<div class="membership-avatar"
[ngStyle]="{'background-color': getColor(membership.memberType)}">
<i *ngIf="membership.memberType == MemberType.MEMBERTYPE_ORGANISATION"
class="las la-archway"></i>
<i *ngIf="membership.memberType == MemberType.MEMBERTYPE_PROJECT"
class="icon las la-layer-group"></i>
<i *ngIf="membership.memberType == MemberType.MEMBERTYPE_PROJECT_GRANT"
class="icon las la-layer-group"></i>
<span>{{membership.displayName}}</span>
</div>
</div>
</ng-container>
</ng-container>
<ng-template #compact>
<div class="avatar-circle" matTooltip="Click to show detail">
<span>{{memberships.totalResult}}</span>
</div>
</ng-template>
<button class="add-img" (click)="addMember()" mat-icon-button aria-label="add membership">
<mat-icon>add</mat-icon>
</button>
</div>
</div>
</div>

109
console/src/app/pages/users/user-detail/memberships/memberships.component.scss Normal file
View File

@ -0,0 +1,109 @@
@import '~@angular/material/theming';
@mixin membership-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-dark: mat-color($primary, A900);
$accent: map-get($theme, accent);
$accent-color: mat-color($accent, 500);
/* stylelint-enable */
.membership-groups {
.header {
display: block;
margin-bottom: 1rem;
font-weight: 400;
margin-top: 0;
}
.sub-header {
font-size: .8rem;
color: #8795a1;
}
.people {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1rem;
.owner {
margin-right: 1rem;
}
.img-list {
width: 100%;
margin-top: .5rem;
margin-left: 1rem;
display: flex;
align-items: center;
.spinner {
margin-left: -15px;
margin-right: 20px;
}
.add-img {
float: left;
margin: 0 8px 0 -15px;
}
.avatar-circle {
float: left;
margin: 0 8px 0 -12px;
height: 40px;
width: 40px;
border-radius: 50%;
-webkit-box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
-moz-box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
display: flex;
align-items: center;
justify-content: center;
.membership-avatar {
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
color: white;
outline: none;
padding: 3px;
text-align: center;
height: 40px;
width: 40px;
box-sizing: border-box;
font-size: 8px;
border-radius: .5rem;
transition: background-color .2s ease-in-out;
background-color: $accent-color;
cursor: pointer;
flex-direction: column;
overflow: hidden;
span {
max-width: 30px;
text-overflow: ellipsis;
font-weight: 800;
display: block;
white-space: nowrap;
overflow: hidden;
}
i {
font-size: 1.2rem;
flex-basis: 100%;
width: 100%;
height: 1.2rem;
max-height: 1.2rem;
}
}
}
.margin-neg {
margin-left: -1rem;
}
}
}
}
}

25
console/src/app/pages/users/user-detail/memberships/memberships.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MembershipsComponent } from './memberships.component';
describe('MembershipsComponent', () => {
let component: MembershipsComponent;
let fixture: ComponentFixture<MembershipsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MembershipsComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MembershipsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

181
console/src/app/pages/users/user-detail/memberships/memberships.component.ts Normal file
View File

@ -0,0 +1,181 @@
import { animate, animateChild, keyframes, query, stagger, style, transition, trigger } from '@angular/animations';
import { Component, Input, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { MemberType, User, UserMembershipSearchResponse } from 'src/app/proto/generated/management_pb';
import { AdminService } from 'src/app/services/admin.service';
import { MgmtUserService } from 'src/app/services/mgmt-user.service';
import { OrgService } from 'src/app/services/org.service';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-memberships',
templateUrl: './memberships.component.html',
styleUrls: ['./memberships.component.scss'],
animations: [
trigger('cardAnimation', [
transition('* => *', [
query('@animate', stagger('40ms', animateChild()), { optional: true }),
]),
]),
trigger('animate', [
transition(':enter', [
animate('.2s ease-in', keyframes([
style({ opacity: 0, offset: 0 }),
style({ opacity: .5, transform: 'scale(1.05)', offset: 0.3 }),
style({ opacity: 1, transform: 'scale(1)', offset: 1 }),
])),
]),
]),
],
})
export class MembershipsComponent implements OnInit {
public loading: boolean = false;
public memberships!: UserMembershipSearchResponse.AsObject;
@Input() public user!: User.AsObject;
public MemberType: any = MemberType;
constructor(
private orgService: OrgService,
private projectService: ProjectService,
private mgmtUserService: MgmtUserService,
private adminService: AdminService,
private dialog: MatDialog,
private toast: ToastService,
private router: Router,
) { }
ngOnInit(): void {
this.loadManager(this.user.id);
}
public async loadManager(userId: string): Promise<void> {
this.mgmtUserService.SearchUserMemberships(userId, 100, 0, []).then(response => {
this.memberships = response.toObject();
this.loading = false;
});
}
public navigateToObject(): void {
this.router.navigate(['/users', this.user.id, 'memberships']);
}
public addMember(): void {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
width: '400px',
data: {
user: this.user,
},
});
dialogRef.afterClosed().subscribe(resp => {
if (resp && resp.creationType !== undefined) {
switch (resp.creationType) {
case CreationType.IAM:
this.createIamMember(resp);
break;
case CreationType.ORG:
this.createOrgMember(resp);
break;
case CreationType.PROJECT_OWNED:
this.createOwnedProjectMember(resp);
break;
case CreationType.PROJECT_GRANTED:
this.createGrantedProjectMember(resp);
break;
}
}
});
}
public createIamMember(response: any): void {
const users: User.AsObject[] = response.users;
const roles: string[] = response.roles;
if (users && users.length && roles && roles.length) {
Promise.all(users.map(user => {
return this.adminService.AddIamMember(user.id, roles);
})).then(() => {
this.toast.showInfo('IAM.TOAST.MEMBERADDED', true);
}).catch(error => {
this.toast.showError(error);
});
}
}
private createOrgMember(response: any): void {
const users: User.AsObject[] = response.users;
const roles: string[] = response.roles;
if (users && users.length && roles && roles.length) {
Promise.all(users.map(user => {
return this.orgService.AddMyOrgMember(user.id, roles);
})).then(() => {
this.toast.showInfo('ORG.TOAST.MEMBERADDED', true);
}).catch(error => {
this.toast.showError(error);
});
}
}
private createGrantedProjectMember(response: any): void {
const users: User.AsObject[] = response.users;
const roles: string[] = response.roles;
if (users && users.length && roles && roles.length) {
users.forEach(user => {
return this.projectService.AddProjectGrantMember(
response.projectId,
response.grantId,
user.id,
roles,
).then(() => {
this.toast.showInfo('PROJECT.TOAST.MEMBERADDED', true);
}).catch(error => {
this.toast.showError(error);
});
});
}
}
private createOwnedProjectMember(response: any): void {
const users: User.AsObject[] = response.users;
const roles: string[] = response.roles;
if (users && users.length && roles && roles.length) {
users.forEach(user => {
return this.projectService.AddProjectMember(response.projectId, user.id, roles)
.then(() => {
this.toast.showInfo('PROJECT.TOAST.MEMBERADDED', true);
}).catch(error => {
this.toast.showError(error);
});
});
}
}
getColor(type: MemberType): string {
const gen = type.toString();
const colors = [
'rgb(201, 115, 88)',
'rgb(226, 176, 50)',
'rgb(112, 89, 152)',
];
let hash = 0;
if (gen.length === 0) {
return colors[hash];
}
for (let i = 0; i < gen.length; i++) {
// tslint:disable-next-line: no-bitwise
hash = gen.charCodeAt(i) + ((hash << 5) - hash);
// tslint:disable-next-line: no-bitwise
hash = hash & hash;
}
hash = ((hash % colors.length) + colors.length) % colors.length;
return colors[hash];
}
}

9
console/src/app/pages/users/user-detail/user-detail-routing.module.ts
View File

@ -48,6 +48,15 @@ const routes: Routes = [
animation: 'AddPage',
},
},
{
path: ':id/memberships',
loadChildren: () => import('./membership-detail/membership-detail.module').then(m => m.MembershipDetailModule),
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['user.membership.read'],
animation: 'AddPage',
},
},
];
@NgModule({

4
console/src/app/pages/users/user-detail/user-detail.module.ts
View File

@ -15,6 +15,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { QRCodeModule } from 'angularx-qrcode';
import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { MemberCreateDialogModule } from 'src/app/modules/add-member-dialog/member-create-dialog.module';
import { CardModule } from 'src/app/modules/card/card.module';
import { ChangesModule } from 'src/app/modules/changes/changes.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
@ -31,6 +32,7 @@ import { CodeDialogComponent } from './auth-user-detail/code-dialog/code-dialog.
import { DialogOtpComponent } from './auth-user-detail/dialog-otp/dialog-otp.component';
import { ThemeSettingComponent } from './auth-user-detail/theme-setting/theme-setting.component';
import { DetailFormModule } from './detail-form/detail-form.module';
import { MembershipsComponent } from './memberships/memberships.component';
import { PasswordComponent } from './password/password.component';
import { UserDetailRoutingModule } from './user-detail-routing.module';
import { UserDetailComponent } from './user-detail/user-detail.component';
@ -46,6 +48,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
ThemeSettingComponent,
PasswordComponent,
CodeDialogComponent,
MembershipsComponent,
],
imports: [
UserDetailRoutingModule,
@ -76,6 +79,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
CopyToClipboardModule,
DetailLayoutModule,
PasswordComplexityViewModule,
MemberCreateDialogModule,
],
})
export class UserDetailModule { }

4
console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
View File

@ -4,7 +4,7 @@
<a (click)="navigateBack()" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
<h1>{{ 'USER.PROFILE.TITLE' | translate }} {{user?.displayName}}</h1>
<h1>{{user?.displayName}}</h1>
<span class="fill-space"></span>
@ -158,6 +158,8 @@
</div>
</div>
<app-memberships [user]="user"></app-memberships>
<app-changes class="changes" [changeType]="ChangeType.USER" [id]="user.id"></app-changes>
</div>
</app-meta-layout>

3
console/src/app/pages/users/user-detail/user-detail/user-detail.component.scss
View File

@ -11,10 +11,7 @@
}
h1 {
font-size: 2rem;
margin: 0;
font-weight: normal;
margin-right: 1rem;
}
.fill-space {

4
console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
View File

@ -13,8 +13,8 @@ import {
UserState,
UserView,
} from 'src/app/proto/generated/management_pb';
import { AuthUserService } from 'src/app/services/auth-user.service';
import { MgmtUserService } from 'src/app/services/mgmt-user.service';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
@ -43,7 +43,7 @@ export class UserDetailComponent implements OnInit, OnDestroy {
private toast: ToastService,
private mgmtUserService: MgmtUserService,
private _location: Location,
public authUserService: AuthUserService,
public projectService: ProjectService,
) { }
public ngOnInit(): void {

3
console/src/app/pages/users/user-list/user-list.component.html
View File

@ -2,7 +2,8 @@
<h1>{{ 'USER.PAGES.LIST' | translate }}</h1>
<p class="sub">{{ 'USER.PAGES.DESCRIPTION' | translate }}</p>
<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length">
<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
[timestamp]="userResult?.viewTimestamp">
<ng-template appHasRole [appHasRole]="['user.write']" actions>
<button (click)="deactivateSelectedUsers()" matTooltip="{{'ORG_DETAIL.TABLE.DEACTIVATE' | translate}}"
class="icon-button" mat-icon-button *ngIf="selection.hasValue()">

2
console/src/app/pages/users/user-list/user-list.component.ts
View File

@ -77,7 +77,7 @@ export class UserListComponent implements OnDestroy {
this.loadingSubject.next(true);
this.userService.SearchUsers(limit, offset).then(resp => {
this.userResult = resp.toObject();
this.dataSource.data = resp.toObject().resultList;
this.dataSource.data = this.userResult.resultList;
this.loadingSubject.next(false);
}).catch(error => {
this.toast.showError(error);

37
console/src/app/services/mgmt-user.service.ts
View File

@ -15,6 +15,9 @@ import {
ProjectGrantMemberSearchQuery,
ProjectGrantMemberSearchRequest,
ProjectGrantMemberSearchResponse,
ProjectMemberSearchQuery,
ProjectMemberSearchRequest,
ProjectMemberSearchResponse,
ProjectRoleAdd,
SetPasswordNotificationRequest,
UpdateUserAddressRequest,
@ -34,6 +37,9 @@ import {
UserGrantUpdate,
UserGrantView,
UserID,
UserMembershipSearchQuery,
UserMembershipSearchRequest,
UserMembershipSearchResponse,
UserPhone,
UserProfile,
UserSearchQuery,
@ -98,6 +104,37 @@ export class MgmtUserService {
);
}
public async SearchProjectMembers(
limit: number, offset: number, queryList?: ProjectMemberSearchQuery[]): Promise<ProjectMemberSearchResponse> {
const req = new ProjectMemberSearchRequest();
req.setLimit(limit);
req.setOffset(offset);
if (queryList) {
req.setQueriesList(queryList);
}
return await this.request(
c => c.searchProjectMembers,
req,
f => f,
);
}
public async SearchUserMemberships(userId: string,
limit: number, offset: number, queryList?: UserMembershipSearchQuery[]): Promise<UserMembershipSearchResponse> {
const req = new UserMembershipSearchRequest();
req.setLimit(limit);
req.setOffset(offset);
req.setUserId(userId);
if (queryList) {
req.setQueriesList(queryList);
}
return await this.request(
c => c.searchUserMemberships,
req,
f => f,
);
}
public async GetUserProfile(id: string): Promise<UserProfile> {
const req = new UserID();
req.setId(id);

2
console/src/app/services/project.service.ts
View File

@ -312,9 +312,9 @@ export class ProjectService {
userId: string,
): Promise<Empty> {
const req = new ProjectGrantMemberRemove();
req.setProjectId(projectId);
req.setGrantId(grantId);
req.setUserId(userId);
req.setProjectId(projectId);
return await this.request(
c => c.removeProjectGrantMember,
req,

71
console/src/assets/i18n/de.json
View File

@ -227,6 +227,21 @@
"DEACTIVATED":"User deaktiviert!",
"SELECTEDREACTIVATED":"Selektierte User reaktiviert!",
"SELECTEDDEACTIVATED":"Selektierte User deaktiviert!"
},
"MEMBERSHIPS": {
"TITLE":"Zitadel Manager Rollen",
"DESCRIPTION":"Dies sind alle Mitgliedschaften des Benutzers. Sie können die entsprechenden Rechte auch auf der Organisations-, Projekt-, oder IAM Detailseite aufrufen und modifizieren",
"CREATIONDATE":"Erstelldatum",
"CHANGEDATE":"Letzte Änderung",
"DISPLAYNAME":"Anzeigename",
"REMOVE":"Entfernen",
"TYPE":"Typ",
"TYPES":{
"0":"Unbekannt",
"1":"Organisation",
"2":"Projekt",
"3":"Berechtigtes Projekt"
}
}
},
"IAM": {
@ -508,7 +523,8 @@
"PROJECTGRANTMEMBERADDED":"Berechtigungsmanager hinzugefügt!",
"PROJECTGRANTMEMBERCHANGED":"Berechtigungsmanager verändert!",
"PROJECTGRANTMEMBERREMOVED":"Berechtigungsmanager entfernt!"
}
},
"ROLES":"Projekt Rollen"
},
"APP": {
"TITLE": "Applikationen",
@ -643,50 +659,17 @@
"en": "Englisch"
},
"MEMBER":{
"ADD":"Manager hinzufügen"
},
"ROLES": {
"ORG_OWNER": "Org. Owner",
"ORG_MEMBER_VIEWER": "Org. Member Viewer",
"ORG_PROJECT_ROLE_VIEWER": "Org. Projekt Role Viewer",
"ORG_EDITOR":"Org. Editor",
"ORG_VIEWER":"Org. Viewer",
"ORG_MEMBER_EDITOR":"Org.. Member Editor",
"ORG_PROJECT_CREATOR":"Org.. Projekt Creator",
"ORG_PROJECT_EDITOR":"Org.. Projekt Editor",
"ORG_PROJECT_VIEWER":"Org.. Projekt Viewer",
"ORG_PROJECT_MEMBER_EDITOR":"Org.. Projekt Member Editor",
"ORG_PROJECT_MEMBER_VIEWER":"Org.. Projekt Member Viewer",
"ORG_PROJECT_ROLE_EDITOR":"Org.. Projekt Role Editor",
"ORG_PROJECT_APP_EDITOR":"Org. Projekt App Editor",
"ORG_PROJECT_APP_VIEWER":"Org. Projekt App Viewer",
"ORG_PROJECT_GRANT_EDITOR":"Org. Projekt Grant Editor" ,
"ORG_PROJECT_GRANT_VIEWER":"Org.Projekt Grant Viewer",
"ORG_PROJECT_GRANT_MEMBER_EDITOR":"Org.Projekt Grant Member Editor",
"ORG_PROJECT_GRANT_MEMBER_VIEWER":"Org.Projekt Grant Member Viewer",
"ORG_USER_EDITOR":"Org.User Editor",
"ORG_USER_VIEWER":"Org. User Viewer",
"ORG_USER_GRANT_EDITOR":"Org. User Grant Editor",
"ORG_USER_GRANT_VIEWER":"Org. User Grant Viewer",
"ORG_POLICY_EDITOR":"Org. Policy Editor",
"ORG_POLICY_VIEWER":"Org. Policy Viewer",
"PROJECT_OWNER":"Projekt Besitzer",
"PROJECT_OWNER_VIEWER":"Projekt Besitzer Viewer",
"PROJECT_MEMBER_EDITOR":"Projekt Manager Editor",
"PROJECT_APP_EDITOR":"Projekt App Editor",
"PROJECT_APP_VIEWER":"Projekt App Viewer",
"PROJECT_USER_GRANT_EDITOR":"Projekt User Grant Editor",
"PROJECT_USER_GRANT_VIEWER":"Projekt User Grant Viewer",
"PROJECT_ROLE_EDITOR": "Projekt Role Editor",
"PROJECT_MEMBER_VIEWER": "Projekt Member Viewer",
"PROJECT_GRANT_EDITOR":"Projekt Grant Editor",
"PROJECT_GRANT_VIEWER":"Projekt Grant Viewer",
"PROJECT_GRANT_MEMBER_EDITOR":"Projekt Grant Member Editor",
"PROJECT_GRANT_MEMBER_VIEWER":"Projekt Grant Member Viewer",
"PROJECT_GRANT_OWNER":"Projekt Grant Owner",
"PROJECT_GRANT_USER_GRANT_EDITOR":"Projekt Grant User Editor",
"PROJECT_GRANT_USER_GRANT_VIEWER":"Projekt Grant User Grant Viewer"
"ADD":"Verwalter hinzufügen",
"CREATIONTYPE":"Erstell Typ",
"CREATIONTYPES":{
"3":"IAM",
"2":"Organisation",
"0":"Eigenes Projekt",
"1":"Berechtigtes Projekt",
"4":"Projekt"
}
},
"ROLESLABEL":"Rollen",
"GRANTS": {
"DELETE":"Grant löschen",
"ADD":"Grant erstellen",

71
console/src/assets/i18n/en.json
View File

@ -227,6 +227,21 @@
"DEACTIVATED":"User deactivated",
"SELECTEDREACTIVATED":"Selected Users reactivated",
"SELECTEDDEACTIVATED":"Selected Users deactivated"
},
"MEMBERSHIPS": {
"TITLE":"Zitadel Manager Roles",
"DESCRIPTION":"These are all member grants of the user. You can modify them also on organisation-, project-, or iam detailpages.",
"CREATIONDATE":"Creation Date",
"CHANGEDATE":"Last Modified",
"DISPLAYNAME":"Displayname",
"REMOVE":"Remove",
"TYPE":"Type",
"TYPES":{
"0":"Unknown",
"1":"Organisation",
"2":"Project",
"3":"Granted Project"
}
}
},
"IAM": {
@ -508,7 +523,8 @@
"PROJECTGRANTMEMBERADDED":"Grant Manager added!",
"PROJECTGRANTMEMBERCHANGED":"Grant Manager changed!",
"PROJECTGRANTMEMBERREMOVED":"Grant Manager removed!"
}
},
"ROLES":"Project Roles"
},
"APP": {
"TITLE": "Applications",
@ -643,50 +659,17 @@
"en": "English"
},
"MEMBER":{
"ADD":"Add a manager"
},
"ROLES": {
"ORG_OWNER": "Org. Owner",
"ORG_MEMBER_VIEWER": "Org. Member Viewer",
"ORG_PROJECT_ROLE_VIEWER": "Org. Project Role Viewer",
"ORG_EDITOR":"Org. Editor",
"ORG_VIEWER":"Org. Viewer",
"ORG_MEMBER_EDITOR":"Org. Member Editor",
"ORG_PROJECT_CREATOR":"Org. Project Creator",
"ORG_PROJECT_EDITOR":"Org. Project Editor",
"ORG_PROJECT_VIEWER":"Org. Project Viewer",
"ORG_PROJECT_MEMBER_EDITOR":"Org. Project Member Editor",
"ORG_PROJECT_MEMBER_VIEWER":"Org. Project Member Viewer",
"ORG_PROJECT_ROLE_EDITOR":"Org. Project Role Editor",
"ORG_PROJECT_APP_EDITOR":"Org. Project App Editor",
"ORG_PROJECT_APP_VIEWER":"Org. Project App Viewer",
"ORG_PROJECT_GRANT_EDITOR":"Org. Project Grant Editor" ,
"ORG_PROJECT_GRANT_VIEWER":"Org. Project Grant Viewer",
"ORG_PROJECT_GRANT_MEMBER_EDITOR":"Org. Project Grant Member Editor",
"ORG_PROJECT_GRANT_MEMBER_VIEWER":"Org. Project Grant Member Viewer",
"ORG_USER_EDITOR":"Org. User Editor",
"ORG_USER_VIEWER":"Org. User Viewer",
"ORG_USER_GRANT_EDITOR":"Org. User Grant Editor",
"ORG_USER_GRANT_VIEWER":"Org. User Grant Viewer",
"ORG_POLICY_EDITOR":"Org. Policy Editor",
"ORG_POLICY_VIEWER":"Org. Policy Viewer",
"PROJECT_OWNER":"Project Owner",
"PROJECT_OWNER_VIEWER":"Project Owner Viewer",
"PROJECT_MEMBER_EDITOR":"Project Member Editor",
"PROJECT_APP_EDITOR":"Project App Editor",
"PROJECT_APP_VIEWER":"Project App Viewer",
"PROJECT_USER_GRANT_EDITOR":"Project User Grant Editor",
"PROJECT_USER_GRANT_VIEWER":"Project User Grant Viewer",
"PROJECT_ROLE_EDITOR": "Project Role Editor",
"PROJECT_MEMBER_VIEWER": "Project Member Viewer",
"PROJECT_GRANT_EDITOR":"Project Grant Editor",
"PROJECT_GRANT_VIEWER":"Project Grant Viewer",
"PROJECT_GRANT_MEMBER_EDITOR":"Project Grant Member Editor",
"PROJECT_GRANT_MEMBER_VIEWER":"Project Grant Member Viewer",
"PROJECT_GRANT_OWNER":"Project Grant Owner",
"PROJECT_GRANT_USER_GRANT_EDITOR":"Project Grant User Editor",
"PROJECT_GRANT_USER_GRANT_VIEWER":"Project Grant User Grant Viewer"
"ADD":"Add a manager",
"CREATIONTYPE":"Creation Type",
"CREATIONTYPES":{
"3":"IAM",
"2":"Organisation",
"0":"Owned Project",
"1":"Granted Project",
"4":"Project"
}
},
"ROLESLABEL":"Roles",
"GRANTS": {
"DELETE":"delete authorization",
"ADD":"create authorization",

12
console/src/assets/images/zitadel-logo-dark.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

8
console/src/assets/images/zitadel-logo-light.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

99
console/src/assets/images/zitadel-logo-oneline-darkdesign.svg
View File

@ -1,99 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1005 241" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-483,0)">
<g id="zitadel-logo-oneline-darkdesign" transform="matrix(1,0,0,1,483.774,0)">
<rect x="0" y="0" width="1003.45" height="241" style="fill:none;"/>
<g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2188.01,-701.671)">
<path d="M1493.5,1056.38L1493.5,1037L1496.5,1037L1496.5,1061.62L1426.02,1020.38L1496.5,979.392L1496.5,1004L1493.5,1004L1493.5,984.608L1431.98,1020.39L1493.5,1056.38Z" style="fill:white;"/>
</g>
<g transform="matrix(8.28881,0,0,4.69323,-106816,-204.925)">
<g transform="matrix(-0.0429306,-0.282967,0.160219,-0.0758207,12884.5,137.392)">
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear1);"/>
</g>
<g transform="matrix(0.160219,0.0758207,-0.0429306,0.282967,12878.9,10.8747)">
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear2);"/>
</g>
<g transform="matrix(-0.117289,0.207146,-0.117289,-0.207146,12943.8,65.7)">
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear3);"/>
</g>
<g transform="matrix(-0.160219,-0.0758207,0.0429306,-0.282967,12917.4,132.195)">
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear4);"/>
</g>
<g transform="matrix(-0.117289,0.207146,0.117289,0.207146,12897.8,5.87512)">
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear5);"/>
</g>
<g transform="matrix(-0.0429306,-0.282967,-0.160219,0.0758207,12936.8,97.6441)">
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear6);"/>
</g>
</g>
<g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2189.33,-701.315)">
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2177.59,-657.491)">
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2169.76,-628.274)">
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2271.15,-656.072)">
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2197.16,-730.532)">
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2068.91,-256.376)">
<path d="M1499.26,757.787C1499.26,757.787 1497.37,756.489 1497,755.2C1496.71,754.182 1496.57,750.662 1496.54,750C1496.41,747.303 1499.21,745.644 1499.21,745.644L1490.01,745.835C1490.01,745.835 1493.15,745.713 1493.46,750C1493.51,750.661 1493.23,753.476 1493,755.2C1492.91,756.447 1491.2,757.668 1491.2,757.668L1499.26,757.787Z" style="fill:white;"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2049.34,-183.335)">
<path d="M1495,760L1495,744" style="fill:none;"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2049.34,-183.335)">
<path d="M1498.27,757.077C1498.27,757.077 1496.71,756.46 1496.65,754.8C1496.65,753.658 1496.64,753.281 1496.65,752.016C1496.62,751.334 1496.59,750.608 1496.65,749.949C1496.78,746.836 1498.5,746.156 1498.5,746.156L1491.46,745.931C1491.46,745.931 1493.37,746.719 1493.65,749.83C1493.71,750.489 1493.69,751.528 1493.65,752.209C1493.64,753.331 1493.64,753.413 1493.65,754.518C1493.68,756.334 1492.58,756.827 1492.58,756.827L1498.27,757.077Z" style="fill:white;"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2147.14,-208.37)">
<path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2147.14,-208.37)">
<path d="M1500.86,762.056C1500.86,762.056 1499.86,760.4 1503.09,757.456C1504.91,755.797 1507.33,754.151 1509.98,752.255C1514.82,748.79 1520.68,744.94 1526.52,741.049C1531.45,737.766 1536.38,734.479 1540.82,731.68C1544.52,729.349 1547.85,727.296 1550.54,725.8C1551.07,725.506 1551.6,725.329 1552.05,725.029C1554.73,723.257 1556.85,724.968 1556.85,724.968L1552.23,716.282C1552.23,716.282 1551.99,719.454 1550,720.997C1549.57,721.333 1549.15,721.741 1548.67,722.12C1546.2,724.053 1542.99,726.344 1539.39,728.867C1535.06,731.898 1530.13,735.166 1525.19,738.438C1519.35,742.314 1513.52,746.234 1508.49,749.329C1505.74,751.023 1503.28,752.577 1501.13,753.598C1497.99,755.086 1495.28,753.617 1495.28,753.617L1500.86,762.056Z" style="fill:white;"/>
</g>
<g transform="matrix(1.32803,-0.355844,-0.311363,-1.16202,-1672.97,1561.28)">
<path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
</g>
<g transform="matrix(1.32803,-0.355844,-0.311363,-1.16202,-1672.97,1561.28)">
<path d="M1496.1,754.362C1496.1,754.362 1497.2,755.607 1501.13,753.598C1503.25,752.509 1505.74,751.023 1508.49,749.329C1513.52,746.234 1519.35,742.314 1525.19,738.438C1530.13,735.166 1534.94,731.832 1539.27,728.802C1542.87,726.279 1549.36,722.059 1549.81,721.75C1552.75,719.73 1552.18,718.196 1552.18,718.196L1555.28,724.152C1555.28,724.152 1553.77,722.905 1551.37,724.681C1550.93,725.006 1544.52,729.349 1540.82,731.68C1536.38,734.479 1531.45,737.766 1526.52,741.049C1520.68,744.94 1514.82,748.79 1509.98,752.255C1507.33,754.151 1504.89,755.771 1503.09,757.456C1499.47,760.841 1501.26,763.283 1501.26,763.283L1496.1,754.362Z" style="fill:white;"/>
</g>
<g transform="matrix(1.299,0,0,1.08306,-3394.18,-2084.88)">
<g transform="matrix(94.2338,0,0,94.1776,2827.58,2063)">
<path d="M0.449,-0.7L0.177,-0.7C0.185,-0.682 0.197,-0.654 0.2,-0.648C0.205,-0.639 0.216,-0.628 0.239,-0.628L0.32,-0.628C0.332,-0.628 0.336,-0.62 0.334,-0.611L0.128,0L0.389,0C0.412,0 0.422,-0.01 0.427,-0.02L0.45,-0.071L0.255,-0.071C0.245,-0.071 0.239,-0.078 0.242,-0.09L0.449,-0.7Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(94.2338,0,0,94.1776,2912.39,2063)">
<path d="M0.214,-0.7L0.214,-0.015C0.215,-0.01 0.218,0 0.235,0L0.286,0L0.286,-0.672C0.286,-0.684 0.278,-0.7 0.257,-0.7L0.214,-0.7Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(94.2338,0,0,94.1776,2987.78,2063)">
<path d="M0.441,-0.7L0.155,-0.7C0.143,-0.7 0.133,-0.69 0.133,-0.678L0.133,-0.629L0.234,-0.629L0.234,-0.015C0.234,-0.01 0.237,0 0.254,0L0.305,0L0.305,-0.612C0.306,-0.621 0.313,-0.629 0.323,-0.629L0.379,-0.629C0.402,-0.629 0.413,-0.639 0.417,-0.648L0.441,-0.7Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(94.2338,0,0,94.1776,3067.88,2063)">
<path d="M0.422,0L0.343,0L0.28,-0.482L0.217,0L0.138,0L0.244,-0.7L0.283,-0.7C0.313,-0.7 0.318,-0.681 0.321,-0.662L0.422,0Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(94.2338,0,0,94.1776,3148.92,2063)">
<path d="M0.186,-0.7L0.186,0L0.325,0C0.374,0 0.413,-0.039 0.414,-0.088L0.414,-0.612C0.413,-0.661 0.374,-0.7 0.325,-0.7L0.186,-0.7ZM0.343,-0.108C0.343,-0.081 0.325,-0.071 0.305,-0.071L0.258,-0.071L0.258,-0.628L0.305,-0.628C0.325,-0.628 0.343,-0.618 0.343,-0.592L0.343,-0.108Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(94.2338,0,0,94.1776,3233.73,2063)">
<path d="M0.291,-0.071L0.291,-0.314C0.291,-0.323 0.299,-0.331 0.308,-0.331L0.338,-0.331C0.361,-0.331 0.371,-0.341 0.376,-0.35C0.379,-0.356 0.391,-0.385 0.399,-0.403L0.291,-0.403L0.291,-0.611C0.291,-0.621 0.298,-0.628 0.308,-0.628L0.366,-0.628C0.389,-0.628 0.4,-0.639 0.404,-0.648L0.428,-0.7L0.241,-0.7C0.229,-0.7 0.22,-0.691 0.219,-0.68L0.219,0L0.379,0C0.402,0 0.413,-0.01 0.418,-0.019C0.421,-0.025 0.433,-0.053 0.441,-0.071L0.291,-0.071Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(94.2338,0,0,94.1776,3318.54,2063)">
<path d="M0.283,-0.071L0.283,-0.678C0.283,-0.69 0.273,-0.699 0.261,-0.7L0.211,-0.7L0.211,0L0.383,0C0.406,0 0.417,-0.01 0.422,-0.019C0.425,-0.025 0.437,-0.053 0.445,-0.071L0.283,-0.071Z" style="fill:white;fill-rule:nonzero;"/>
</g>
</g>
</g>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,155.247,-155.247,-41.5984,201.516,76.8392)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(155.247,-41.5984,41.5984,155.247,110.08,195.509)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,-113.649,113.649,-113.649,258.31,215.618)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-155.247,41.5984,-41.5984,-155.247,220.914,144.546)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,113.649,113.649,113.649,206.837,124.661)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
<linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,-155.247,-155.247,41.5984,152.054,262.8)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

99
console/src/assets/images/zitadel-logo-oneline-lightdesign.svg
View File

@ -1,99 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1005 242" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-483,-265)">
<g id="zitadel-logo-oneline-lightdesign" transform="matrix(1,0,0,1,483.774,265.93)">
<rect x="0" y="0" width="1003.45" height="241" style="fill:none;"/>
<g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2188.01,-701.671)">
<path d="M1493.5,1056.38L1493.5,1037L1496.5,1037L1496.5,1061.62L1426.02,1020.38L1496.5,979.392L1496.5,1004L1493.5,1004L1493.5,984.608L1431.98,1020.39L1493.5,1056.38Z" style="fill:rgb(35,35,35);"/>
</g>
<g transform="matrix(8.28881,0,0,4.69323,-106816,-204.925)">
<g transform="matrix(-0.0429306,-0.282967,0.160219,-0.0758207,12884.5,137.392)">
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear1);"/>
</g>
<g transform="matrix(0.160219,0.0758207,-0.0429306,0.282967,12878.9,10.8747)">
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear2);"/>
</g>
<g transform="matrix(-0.117289,0.207146,-0.117289,-0.207146,12943.8,65.7)">
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear3);"/>
</g>
<g transform="matrix(-0.160219,-0.0758207,0.0429306,-0.282967,12917.4,132.195)">
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear4);"/>
</g>
<g transform="matrix(-0.117289,0.207146,0.117289,0.207146,12897.8,5.87512)">
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear5);"/>
</g>
<g transform="matrix(-0.0429306,-0.282967,-0.160219,0.0758207,12936.8,97.6441)">
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear6);"/>
</g>
</g>
<g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2189.33,-701.315)">
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2177.59,-657.491)">
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2169.76,-628.274)">
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2271.15,-656.072)">
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2197.16,-730.532)">
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2068.91,-256.376)">
<path d="M1499.26,757.787C1499.26,757.787 1497.37,756.489 1497,755.2C1496.71,754.182 1496.57,750.662 1496.54,750C1496.41,747.303 1499.21,745.644 1499.21,745.644L1490.01,745.835C1490.01,745.835 1493.15,745.713 1493.46,750C1493.51,750.661 1493.23,753.476 1493,755.2C1492.91,756.447 1491.2,757.668 1491.2,757.668L1499.26,757.787Z" style="fill:rgb(35,35,35);"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2049.34,-183.335)">
<path d="M1495,760L1495,744" style="fill:none;"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2049.34,-183.335)">
<path d="M1498.27,757.077C1498.27,757.077 1496.71,756.46 1496.65,754.8C1496.65,753.658 1496.64,753.281 1496.65,752.016C1496.62,751.334 1496.59,750.608 1496.65,749.949C1496.78,746.836 1498.5,746.156 1498.5,746.156L1491.46,745.931C1491.46,745.931 1493.37,746.719 1493.65,749.83C1493.71,750.489 1493.69,751.528 1493.65,752.209C1493.64,753.331 1493.64,753.413 1493.65,754.518C1493.68,756.334 1492.58,756.827 1492.58,756.827L1498.27,757.077Z" style="fill:rgb(35,35,35);"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2147.14,-208.37)">
<path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
</g>
<g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2147.14,-208.37)">
<path d="M1500.86,762.056C1500.86,762.056 1499.86,760.4 1503.09,757.456C1504.91,755.797 1507.33,754.151 1509.98,752.255C1514.82,748.79 1520.68,744.94 1526.52,741.049C1531.45,737.766 1536.38,734.479 1540.82,731.68C1544.52,729.349 1547.85,727.296 1550.54,725.8C1551.07,725.506 1551.6,725.329 1552.05,725.029C1554.73,723.257 1556.85,724.968 1556.85,724.968L1552.23,716.282C1552.23,716.282 1551.99,719.454 1550,720.997C1549.57,721.333 1549.15,721.741 1548.67,722.12C1546.2,724.053 1542.99,726.344 1539.39,728.867C1535.06,731.898 1530.13,735.166 1525.19,738.438C1519.35,742.314 1513.52,746.234 1508.49,749.329C1505.74,751.023 1503.28,752.577 1501.13,753.598C1497.99,755.086 1495.28,753.617 1495.28,753.617L1500.86,762.056Z" style="fill:rgb(35,35,35);"/>
</g>
<g transform="matrix(1.32803,-0.355844,-0.311363,-1.16202,-1672.97,1561.28)">
<path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
</g>
<g transform="matrix(1.32803,-0.355844,-0.311363,-1.16202,-1672.97,1561.28)">
<path d="M1496.1,754.362C1496.1,754.362 1497.2,755.607 1501.13,753.598C1503.25,752.509 1505.74,751.023 1508.49,749.329C1513.52,746.234 1519.35,742.314 1525.19,738.438C1530.13,735.166 1534.94,731.832 1539.27,728.802C1542.87,726.279 1549.36,722.059 1549.81,721.75C1552.75,719.73 1552.18,718.196 1552.18,718.196L1555.28,724.152C1555.28,724.152 1553.77,722.905 1551.37,724.681C1550.93,725.006 1544.52,729.349 1540.82,731.68C1536.38,734.479 1531.45,737.766 1526.52,741.049C1520.68,744.94 1514.82,748.79 1509.98,752.255C1507.33,754.151 1504.89,755.771 1503.09,757.456C1499.47,760.841 1501.26,763.283 1501.26,763.283L1496.1,754.362Z" style="fill:#8795a1;"/>
</g>
<g transform="matrix(1.299,0,0,1.08306,-3394.18,-2084.88)">
<g transform="matrix(94.2338,0,0,94.1776,2827.58,2063)">
<path d="M0.449,-0.7L0.177,-0.7C0.185,-0.682 0.197,-0.654 0.2,-0.648C0.205,-0.639 0.216,-0.628 0.239,-0.628L0.32,-0.628C0.332,-0.628 0.336,-0.62 0.334,-0.611L0.128,0L0.389,0C0.412,0 0.422,-0.01 0.427,-0.02L0.45,-0.071L0.255,-0.071C0.245,-0.071 0.239,-0.078 0.242,-0.09L0.449,-0.7Z" style="fill:#8795a1;fill-rule:nonzero;"/>
</g>
<g transform="matrix(94.2338,0,0,94.1776,2912.39,2063)">
<path d="M0.214,-0.7L0.214,-0.015C0.215,-0.01 0.218,0 0.235,0L0.286,0L0.286,-0.672C0.286,-0.684 0.278,-0.7 0.257,-0.7L0.214,-0.7Z" style="fill:#8795a1;fill-rule:nonzero;"/>
</g>
<g transform="matrix(94.2338,0,0,94.1776,2987.78,2063)">
<path d="M0.441,-0.7L0.155,-0.7C0.143,-0.7 0.133,-0.69 0.133,-0.678L0.133,-0.629L0.234,-0.629L0.234,-0.015C0.234,-0.01 0.237,0 0.254,0L0.305,0L0.305,-0.612C0.306,-0.621 0.313,-0.629 0.323,-0.629L0.379,-0.629C0.402,-0.629 0.413,-0.639 0.417,-0.648L0.441,-0.7Z" style="fill:#8795a1;fill-rule:nonzero;"/>
</g>
<g transform="matrix(94.2338,0,0,94.1776,3067.88,2063)">
<path d="M0.422,0L0.343,0L0.28,-0.482L0.217,0L0.138,0L0.244,-0.7L0.283,-0.7C0.313,-0.7 0.318,-0.681 0.321,-0.662L0.422,0Z" style="fill:#8795a1;fill-rule:nonzero;"/>
</g>
<g transform="matrix(94.2338,0,0,94.1776,3148.92,2063)">
<path d="M0.186,-0.7L0.186,0L0.325,0C0.374,0 0.413,-0.039 0.414,-0.088L0.414,-0.612C0.413,-0.661 0.374,-0.7 0.325,-0.7L0.186,-0.7ZM0.343,-0.108C0.343,-0.081 0.325,-0.071 0.305,-0.071L0.258,-0.071L0.258,-0.628L0.305,-0.628C0.325,-0.628 0.343,-0.618 0.343,-0.592L0.343,-0.108Z" style="fill:#8795a1;fill-rule:nonzero;"/>
</g>
<g transform="matrix(94.2338,0,0,94.1776,3233.73,2063)">
<path d="M0.291,-0.071L0.291,-0.314C0.291,-0.323 0.299,-0.331 0.308,-0.331L0.338,-0.331C0.361,-0.331 0.371,-0.341 0.376,-0.35C0.379,-0.356 0.391,-0.385 0.399,-0.403L0.291,-0.403L0.291,-0.611C0.291,-0.621 0.298,-0.628 0.308,-0.628L0.366,-0.628C0.389,-0.628 0.4,-0.639 0.404,-0.648L0.428,-0.7L0.241,-0.7C0.229,-0.7 0.22,-0.691 0.219,-0.68L0.219,0L0.379,0C0.402,0 0.413,-0.01 0.418,-0.019C0.421,-0.025 0.433,-0.053 0.441,-0.071L0.291,-0.071Z" style="fill:#8795a1;fill-rule:nonzero;"/>
</g>
<g transform="matrix(94.2338,0,0,94.1776,3318.54,2063)">
<path d="M0.283,-0.071L0.283,-0.678C0.283,-0.69 0.273,-0.699 0.261,-0.7L0.211,-0.7L0.211,0L0.383,0C0.406,0 0.417,-0.01 0.422,-0.019C0.425,-0.025 0.437,-0.053 0.445,-0.071L0.283,-0.071Z" style="fill:#8795a1;fill-rule:nonzero;"/>
</g>
</g>
</g>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,155.247,-155.247,-41.5984,201.516,76.8392)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(155.247,-41.5984,41.5984,155.247,110.08,195.509)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,-113.649,113.649,-113.649,258.31,215.618)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-155.247,41.5984,-41.5984,-155.247,220.914,144.546)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,113.649,113.649,113.649,206.837,124.661)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
<linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,-155.247,-155.247,41.5984,152.054,262.8)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

2
console/src/component-themes.scss
View File

@ -7,6 +7,7 @@
@import 'src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component';
@import 'src/app/modules/meta-layout/meta';
@import 'src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card';
@import 'src/app/pages/users/user-detail/memberships/memberships.component';
@mixin component-themes($theme) {
@include avatar-theme($theme);
@ -15,6 +16,7 @@
@include detail-layout-theme($theme);
@include sidenav-list-theme($theme);
@include application-grid-theme($theme);
@include membership-theme($theme);
@include changes-theme($theme);
@include meta-theme($theme);
@include theme-card($theme);

3
console/src/index.html
View File

@ -23,8 +23,7 @@
<meta property="og:description" content="Console Management Platform for ZITADEL IAM" />
<meta property="description" content="Console Management Platform for ZITADEL IAM" />
<meta property="og:image"
content="https://console.zitadel.dev/assets/images/zitadel-logo-oneline-lightdesign.svg" />
<meta property="og:image" content="https://console.zitadel.dev/assets/images/zitadel-logo-dark.svg" />
</head>
<body>

3
console/tslint.json
View File

@ -65,9 +65,6 @@
"variable-name": [true, "check-format", "ban-keywords", "allow-leading-underscore"],
"whitespace": [true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type"],
"no-output-on-prefix": true,
"use-input-property-decorator": true,
"use-output-property-decorator": true,
"use-host-property-decorator": true,
"no-input-rename": true,
"no-output-rename": true,
"use-life-cycle-interface": true,