TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-13 17:02:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): cleanup user detail and member components, user/me redirect, permission guards, filter, org policy guard, user table, scss cleanup (#808)

Browse Source 
* fix: remove user.write guard for filtering

* border color

* fix user routing from member tables

* idp detail layout

* generic contact component

* fix redirect to auth user, user grant disable

* disable policy action without permission, i18n

* user-create flex fix, contact ng-content

* rm unused styles

* sidenav divider

* lint

* chore(deps-dev): bump @angular/cli from 10.1.3 to 10.1.4 in /console (#806)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps-dev): bump @angular/cli from 10.1.3 to 10.1.4 in /console

Bumps [@angular/cli](https://github.com/angular/angular-cli) from 10.1.3 to 10.1.4.
- [Release notes](https://github.com/angular/angular-cli/releases)
- [Commits](https://github.com/angular/angular-cli/compare/v10.1.3...v10.1.4)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @angular/language-service from 10.1.3 to 10.1.4 in /console (#805)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps-dev): bump @angular/language-service in /console

Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 10.1.3 to 10.1.4.
- [Release notes](https://github.com/angular/angular/releases)
- [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md)
- [Commits](https://github.com/angular/angular/commits/10.1.4/packages/language-service)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump codelyzer from 6.0.0 to 6.0.1 in /console (#804)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps-dev): bump codelyzer from 6.0.0 to 6.0.1 in /console

Bumps [codelyzer](https://github.com/mgechev/codelyzer) from 6.0.0 to 6.0.1.
- [Release notes](https://github.com/mgechev/codelyzer/releases)
- [Changelog](https://github.com/mgechev/codelyzer/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mgechev/codelyzer/commits/6.0.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @angular-devkit/build-angular from 0.1000.8 to 0.1001.4 in /console (#803)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps-dev): bump @angular-devkit/build-angular in /console

Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1000.8 to 0.1001.4.
- [Release notes](https://github.com/angular/angular-cli/releases)
- [Commits](https://github.com/angular/angular-cli/commits)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Max Peintner <max@caos.ch>

* chore(deps): bump uuid from 8.3.0 to 8.3.1 in /console (#802)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps): bump uuid from 8.3.0 to 8.3.1 in /console

Bumps [uuid](https://github.com/uuidjs/uuid) from 8.3.0 to 8.3.1.
- [Release notes](https://github.com/uuidjs/uuid/releases)
- [Changelog](https://github.com/uuidjs/uuid/blob/master/CHANGELOG.md)
- [Commits](https://github.com/uuidjs/uuid/compare/v8.3.0...v8.3.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* create memberstable as common component

* iam member cleanup

* iam + org m table, user table service user avatar

* toast config

* fix selection emitter

* fix project grant table width

* project grant members refactor

* theme optimizations

* member table col delete

* lint

* fix table row color

* refactor grey color

* lint scss

* org list redirect on click, fix user table undef

* refresh table after grant add

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
This commit is contained in:
Max Peintner
2020-10-08 10:09:10 +02:00
committed by GitHub
parent 5f0cddac37
commit 0bbc9c7c49
129 changed files with 2002 additions and 2208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
console/src/app/pages/home/home.component.scss
View File

@@ -5,7 +5,7 @@
.header {
display: flex;
flex-direction: column;
margin: 4rem 0;
margin-bottom: 4rem;
align-items: center;
h3 {
@@ -15,7 +15,7 @@
}
.wlc_stnce {
color: #8795a1;
color: var(--grey);
font-size: 16px;
}
@@ -46,7 +46,7 @@
p {
display: block;
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}
@@ -75,7 +75,7 @@
}
.disclaimer {
color: #8795a1;
color: var(--grey);
font-size: 14px;
margin-top: 3rem;
}

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

@@ -1,86 +1,23 @@
<app-detail-layout [backRouterLink]="[ '/iam']" title="{{ 'IAM.MEMBER.TITLE' | translate }}"
description="{{ 'IAM.MEMBER.DESCRIPTION' | translate }}">
<div class="wrapp">
<app-detail-layout [backRouterLink]="[ '/iam']" title="{{ 'IAM.MEMBER.TITLE' | translate }}"
description="{{ 'IAM.MEMBER.DESCRIPTION' | translate }}">
<app-members-table [dataSource]="dataSource" [memberRoleOptions]="memberRoleOptions"
(updateRoles)="updateRoles($event.member, $event.change)" [factoryLoadFunc]="changePageFactory"
(changedSelection)="selection = $event" [refreshTrigger]="changePage"
[canDelete]="['iam.member.delete'] | hasRole | async" (deleteMember)="removeMember($event)">
<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 actions [appHasRole]="['iam.member.write']">
<a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
<div class="table-wrapper">
<table mat-table class="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]="(['iam.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="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="paginator" #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</app-refresh-table>
</app-detail-layout>
<ng-template appHasRole selectactions [appHasRole]="['iam.member.delete']">
<button color="warn" (click)="removeMemberSelection()"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="del-button" mat-raised-button>
<i class="las la-trash"></i>
{{'ACTIONS.SELECTIONDELETE' | translate}}
</button>
</ng-template>
<ng-template appHasRole writeactions [appHasRole]="['iam.member.write']">
<a color="primary" (click)="openAddMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
</app-members-table>
</app-detail-layout>
</div>

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

@@ -1,37 +1,7 @@
.table-wrapper {
overflow: auto;
width: 100%;
.table,
.paginator {
width: 100%;
td,
th {
padding: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.action {
width: 40px;
}
.selection {
width: 50px;
max-width: 50px;
}
}
.wrapp {
width: 100% !important;
}
.pointer {
outline: none;
cursor: pointer;
.del-button {
margin-right: .5rem;
}

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

@@ -1,10 +1,7 @@
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { Component, EventEmitter } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { PageEvent } 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 { IamMember, IamMemberView } from 'src/app/proto/generated/admin_pb';
import { ProjectMember, ProjectType, UserView } from 'src/app/proto/generated/management_pb';
@@ -18,17 +15,15 @@ import { IamMembersDataSource } from './iam-members-datasource';
templateUrl: './iam-members.component.html',
styleUrls: ['./iam-members.component.scss'],
})
export class IamMembersComponent implements AfterViewInit {
export class IamMembersComponent {
public INITIALPAGESIZE: number = 25;
public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
public disabled: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<IamMemberView.AsObject>;
public dataSource!: IamMembersDataSource;
public selection: SelectionModel<IamMemberView.AsObject> = new SelectionModel<IamMemberView.AsObject>(true, []);
public memberRoleOptions: string[] = [];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
public changePageFactory!: Function;
public changePage: EventEmitter<void> = new EventEmitter();
public selection: Array<IamMemberView.AsObject> = [];
constructor(private adminService: AdminService,
private dialog: MatDialog,
@@ -37,21 +32,13 @@ export class IamMembersComponent implements AfterViewInit {
this.dataSource = new IamMembersDataSource(this.adminService);
this.dataSource.loadMembers(0, 25);
this.getRoleOptions();
}
public ngAfterViewInit(): void {
this.paginator.page
.pipe(
tap(() => this.loadMembersPage()),
)
.subscribe();
}
private loadMembersPage(): void {
this.dataSource.loadMembers(
this.paginator.pageIndex,
this.paginator.pageSize,
);
this.changePageFactory = (event?: PageEvent) => {
return this.dataSource.loadMembers(
event?.pageIndex ?? 0,
event?.pageSize ?? this.INITIALPAGESIZE,
);
};
}
public getRoleOptions(): void {
@@ -71,11 +58,12 @@ export class IamMembersComponent implements AfterViewInit {
});
}
public removeProjectMemberSelection(): void {
Promise.all(this.selection.selected.map(member => {
public removeMemberSelection(): void {
console.log(this.selection);
Promise.all(this.selection.map(member => {
return this.adminService.RemoveIamMember(member.userId).then(() => {
this.toast.showInfo('IAM.TOAST.MEMBERREMOVED', true);
this.changePage.emit();
}).catch(error => {
this.toast.showError(error);
});
@@ -86,25 +74,13 @@ export class IamMembersComponent implements AfterViewInit {
this.adminService.RemoveIamMember(member.userId).then(() => {
this.toast.showInfo('IAM.TOAST.MEMBERREMOVED', true);
setTimeout(() => {
this.refreshPage();
this.changePage.emit();
}, 1000);
}).catch(error => {
this.toast.showError(error);
});
}
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 openAddMember(): void {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
@@ -124,7 +100,7 @@ export class IamMembersComponent implements AfterViewInit {
})).then(() => {
this.toast.showInfo('IAM.TOAST.MEMBERADDED', true);
setTimeout(() => {
this.refreshPage();
this.changePage.emit();
}, 1000);
}).catch(error => {
this.toast.showError(error);
@@ -133,9 +109,4 @@ export class IamMembersComponent implements AfterViewInit {
}
});
}
public refreshPage(): void {
this.selection.clear();
this.dataSource.loadMembers(this.paginator.pageIndex, this.paginator.pageSize);
}
}

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

@@ -1,22 +1,12 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
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 { MembersTableModule } from 'src/app/modules/members-table/members-table.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { IamMembersRoutingModule } from './iam-members-routing.module';
@@ -29,24 +19,13 @@ import { IamMembersComponent } from './iam-members.component';
IamMembersRoutingModule,
DetailLayoutModule,
CommonModule,
MatAutocompleteModule,
MatChipsModule,
HasRoleModule,
MatButtonModule,
MatCheckboxModule,
MatIconModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatTooltipModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
MatFormFieldModule,
MatSelectModule,
MembersTableModule,
HasRolePipeModule,
RefreshTableModule,
],
})
export class IamMembersModule { }

4
console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.scss
View File

@@ -3,7 +3,7 @@ h1 {
}
.top-desc {
color: #8795a1;
color: var(--grey);
}
.row-lyt {
@@ -57,7 +57,7 @@ h1 {
.desc {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
.fill-space {

2
console/src/app/pages/iam/iam.component.scss
View File

@@ -3,7 +3,7 @@
}
.sub {
color: #8795a1;
color: var(--grey);
margin-bottom: 2rem;
}

6
console/src/app/pages/orgs/org-create/org-create.component.scss
View File

@@ -39,7 +39,7 @@ h1 {
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
margin: 1rem 0;
}
@@ -70,7 +70,7 @@ h1 {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
}
@@ -97,7 +97,7 @@ h1 {
.section {
padding: .5rem;
flex-basis: 100%;
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

2
console/src/app/pages/orgs/org-detail/add-domain-dialog/add-domain-dialog.component.scss
View File

@@ -4,7 +4,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

2
console/src/app/pages/orgs/org-detail/domain-verification/domain-verification.component.scss
View File

@@ -9,7 +9,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
&.warn {

7
console/src/app/pages/orgs/org-detail/org-detail.component.html
View File

@@ -13,12 +13,13 @@
<i matTooltip="verified" *ngIf="domain.verified" class="verified las la-check-circle"></i>
<i matTooltip="primary" *ngIf="domain.primary" class="primary las la-star"></i>
<a *ngIf="!domain.primary" class="primaryset"
<a *ngIf="!domain.primary && (canwrite$ | async)" class="primaryset"
(click)="setPrimary(domain)">{{'ORG.DOMAINS.SETPRIMARY' | translate}}</a>
<span class="fill-space"></span>
<button [disabled]="(canwrite$ | async) == false" matTooltip="Remove domain" color="warn"
mat-icon-button (click)="removeDomain(domain.domain)"><i class="las la-trash"></i></button>
<button class="rem-button" [disabled]="(canwrite$ | async) == false" matTooltip="Remove domain"
color="warn" mat-icon-button (click)="removeDomain(domain.domain)"><i
class="las la-trash"></i></button>
</div>
<p class="new-desc">{{'ORG.PAGES.ORGDOMAIN_VERIFICATION' | translate}}</p>
<button [disabled]="(canwrite$ | async) == false" matTooltip="Add domain" mat-raised-button

12
console/src/app/pages/orgs/org-detail/org-detail.component.scss
View File

@@ -3,7 +3,7 @@
}
.sub {
color: #8795a1;
color: var(--grey);
margin-bottom: 2rem;
}
@@ -47,6 +47,16 @@
.fill-space {
flex: 1;
}
.rem-button {
visibility: hidden;
}
&:hover {
.rem-button {
visibility: visible;
}
}
}
.new-desc {

5
console/src/app/pages/orgs/org-list/org-list.component.html
View File

@@ -40,7 +40,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr (click)="setAndNavigateToOrg(row)" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
</mat-paginator>
@@ -48,8 +48,7 @@
</div>
<ng-template #templateRef let-key="key">
<button class="search-button" mat-icon-button
(click)="this.orgSearchKey != key ? this.orgSearchKey = key : this.orgSearchKey = undefined">
<button class="search-button" mat-icon-button (click)="setFilter(key)">
<mat-icon *ngIf="this.orgSearchKey != key">search</mat-icon>
<mat-icon *ngIf="this.orgSearchKey == key">search_off</mat-icon>
</button>

2
console/src/app/pages/orgs/org-list/org-list.component.scss
View File

@@ -3,7 +3,7 @@ h1 {
}
.top-desc {
color: #8795a1;
color: var(--grey);
}
.table,

24
console/src/app/pages/orgs/org-list/org-list.component.ts
View File

@@ -1,7 +1,9 @@
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatInput } from '@angular/material/input';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { enterAnimations } from 'src/app/animations';
@@ -21,6 +23,7 @@ export class OrgListComponent implements AfterViewInit {
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;
@ViewChild('input') public filter!: MatInput;
public dataSource!: MatTableDataSource<Org.AsObject>;
public displayedColumns: string[] = ['select', 'id', 'name'];
@@ -31,6 +34,7 @@ export class OrgListComponent implements AfterViewInit {
constructor(
private authService: GrpcAuthService,
private router: Router,
) {
this.loadOrgs(10, 0);
@@ -72,6 +76,21 @@ export class OrgListComponent implements AfterViewInit {
this.loadOrgs(this.paginator.length, this.paginator.pageSize * this.paginator.pageIndex);
}
public setFilter(key: MyProjectOrgSearchKey): void {
setTimeout(() => {
if (this.filter) {
(this.filter as any).nativeElement.focus();
}
}, 100);
if (this.orgSearchKey !== key) {
this.orgSearchKey = key;
} else {
this.orgSearchKey = undefined;
this.refresh();
}
}
public applyFilter(event: Event): void {
const filterValue = (event.target as HTMLInputElement).value;
this.loadOrgs(
@@ -80,4 +99,9 @@ export class OrgListComponent implements AfterViewInit {
filterValue.trim().toLowerCase(),
);
}
public setAndNavigateToOrg(org: Org.AsObject): void {
this.authService.setActiveOrg(org);
this.router.navigate(['/org']);
}
}

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

@@ -1,83 +1,21 @@
<app-detail-layout [backRouterLink]="[ '/org']" title="{{org?.name}} {{ 'ORG.MEMBER.TITLE' | translate }}"
description="{{ 'ORG.MEMBER.DESCRIPTION' | translate }}">
<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']">
<app-members-table [dataSource]="dataSource" [memberRoleOptions]="memberRoleOptions"
(updateRoles)="updateRoles($event.member, $event.change)" [factoryLoadFunc]="changePageFactory"
(changedSelection)="selection = $event" [refreshTrigger]="changePage"
[canDelete]="['org.member.delete:'+org?.id,'org.member.delete'] | hasRole | async"
(deleteMember)="removeOrgMember($event)">
<ng-template appHasRole selectactions [appHasRole]="['org.member.delete:'+org?.id,'org.member.delete']">
<button (click)="removeOrgMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
class="icon-button" mat-icon-button *ngIf="selection.hasValue()" color="warn">
class="del-button" mat-raised-button color="warn">
<i class="las la-trash"></i>
{{'ACTIONS.SELECTIONDELETE' | translate}}
</button>
</ng-template>
<ng-template appHasRole actions [appHasRole]="['org.member.write:'+org?.id,'org.member.write']">
<a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
<ng-template appHasRole writeactions [appHasRole]="['org.member.write:'+org?.id,'org.member.write']">
<a color="primary" (click)="openAddMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
<div class="table-wrapper">
<table mat-table class="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="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="paginator" #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</app-refresh-table>
</app-members-table>
</app-detail-layout>

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

@@ -1,37 +1,3 @@
.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;
}
.selection {
width: 50px;
max-width: 50px;
}
}
}
.pointer {
outline: none;
cursor: pointer;
.del-button {
margin-right: .5rem;
}

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

@@ -1,11 +1,9 @@
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { Component, EventEmitter } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { PageEvent } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { tap } from 'rxjs/operators';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { Org, OrgMemberView, ProjectType, UserView } from 'src/app/proto/generated/management_pb';
import { Org, OrgMemberView, UserView } from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -16,18 +14,16 @@ import { OrgMembersDataSource } from './org-members-datasource';
templateUrl: './org-members.component.html',
styleUrls: ['./org-members.component.scss'],
})
export class OrgMembersComponent implements AfterViewInit {
export class OrgMembersComponent {
public INITIALPAGESIZE: number = 25;
public org!: Org.AsObject;
public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
public disabled: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
public disableWrite: boolean = false;
public dataSource!: OrgMembersDataSource;
public selection: SelectionModel<OrgMemberView.AsObject> = new SelectionModel<OrgMemberView.AsObject>(true, []);
public memberRoleOptions: string[] = [];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
public changePageFactory!: Function;
public changePage: EventEmitter<void> = new EventEmitter();
public selection: Array<OrgMemberView.AsObject> = [];
constructor(
private mgmtService: ManagementService,
@@ -37,18 +33,17 @@ export class OrgMembersComponent implements AfterViewInit {
this.mgmtService.GetMyOrg().then(org => {
this.org = org.toObject();
this.dataSource = new OrgMembersDataSource(this.mgmtService);
this.dataSource.loadMembers(0, 25);
this.dataSource.loadMembers(0, this.INITIALPAGESIZE);
});
this.getRoleOptions();
}
public ngAfterViewInit(): void {
this.paginator.page
.pipe(
tap(() => this.loadMembersPage()),
)
.subscribe();
this.changePageFactory = (event?: PageEvent) => {
return this.dataSource.loadMembers(
event?.pageIndex ?? 0,
event?.pageSize ?? this.INITIALPAGESIZE,
);
};
}
public getRoleOptions(): void {
@@ -68,15 +63,8 @@ export class OrgMembersComponent implements AfterViewInit {
});
}
private loadMembersPage(): void {
this.dataSource.loadMembers(
this.paginator.pageIndex,
this.paginator.pageSize,
);
}
public removeOrgMemberSelection(): void {
Promise.all(this.selection.selected.map(member => {
Promise.all(this.selection.map(member => {
return this.mgmtService.RemoveMyOrgMember(member.userId).then(() => {
this.toast.showInfo('ORG.TOAST.MEMBERREMOVED', true);
}).catch(error => {
@@ -84,21 +72,21 @@ export class OrgMembersComponent implements AfterViewInit {
});
})).then(() => {
setTimeout(() => {
this.refreshPage();
this.changePage.emit();
}, 1000);
});
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.membersSubject.value.length;
return numSelected === numRows;
}
public removeOrgMember(member: OrgMemberView.AsObject): void {
this.mgmtService.RemoveMyOrgMember(member.userId).then(() => {
this.toast.showInfo('ORG.TOAST.MEMBERREMOVED', true);
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
setTimeout(() => {
this.changePage.emit();
}, 1000);
}).catch(error => {
this.toast.showError(error);
});
}
public openAddMember(): void {
@@ -120,7 +108,7 @@ export class OrgMembersComponent implements AfterViewInit {
})).then(() => {
this.toast.showInfo('ORG.TOAST.MEMBERADDED', true);
setTimeout(() => {
this.refreshPage();
this.changePage.emit();
}, 1000);
}).catch(error => {
this.toast.showError(error);
@@ -129,9 +117,4 @@ export class OrgMembersComponent implements AfterViewInit {
}
});
}
public refreshPage(): void {
this.selection.clear();
this.dataSource.loadMembers(this.paginator.pageIndex, this.paginator.pageSize);
}
}

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

@@ -1,21 +1,13 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
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 { MembersTableModule } from 'src/app/modules/members-table/members-table.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
@@ -28,25 +20,16 @@ import { OrgMembersComponent } from './org-members.component';
imports: [
OrgMembersRoutingModule,
CommonModule,
MatAutocompleteModule,
MatChipsModule,
MatButtonModule,
HasRoleModule,
MatCheckboxModule,
MatIconModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatTooltipModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
DetailLayoutModule,
MatFormFieldModule,
MatSelectModule,
HasRolePipeModule,
RefreshTableModule,
MembersTableModule,
HasRolePipeModule,
],
})
export class OrgMembersModule { }

12
console/src/app/pages/orgs/policy-grid/policy-grid.component.html
View File

@@ -26,7 +26,8 @@
<button [disabled]="complexityPolicy" [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY,'create' ]"
color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
<button [disabled]="!complexityPolicy" [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY ]"
mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
mat-stroked-button
[matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
</div>
</div>
@@ -55,7 +56,8 @@
<button [disabled]="iamPolicy" [routerLink]="[ 'policy', PolicyComponentType.IAM,'create' ]"
color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
<button [disabled]="!iamPolicy" [routerLink]="[ 'policy', PolicyComponentType.IAM ]"
mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
mat-stroked-button
[matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
</ng-template>
</div>
</div>
@@ -73,7 +75,6 @@
</button>
</div>
<ng-template #showDescIAM>
<p class="desc">
{{'ORG.POLICY.LOGIN_POLICY.DESCRIPTION' | translate}}</p>
@@ -85,9 +86,10 @@
<button [disabled]="loginPolicy" [routerLink]="[ 'policy', PolicyComponentType.LOGIN,'create' ]"
color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
<button [disabled]="!loginPolicy" [routerLink]="[ 'policy', PolicyComponentType.LOGIN ]"
mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
mat-stroked-button
[matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
</ng-template>
</div>
</div>
</ng-template>
</div>
</div>

4
console/src/app/pages/orgs/policy-grid/policy-grid.component.scss
View File

@@ -3,7 +3,7 @@ h1 {
}
.top-desc {
color: #8795a1;
color: var(--grey);
}
.row-lyt {
@@ -57,7 +57,7 @@ h1 {
.desc {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
.fill-space {

8
console/src/app/pages/projects/apps/app-create/app-create.component.scss
View File

@@ -5,7 +5,7 @@ h1 {
p.desc {
font-size: 14px;
color: #8795a1;
color: var(--grey);
}
.proswitch {
@@ -57,12 +57,12 @@ p.desc {
.step-title {
font-size: 1.2rem;
color: #8795a1;
color: var(--grey);
}
.step-description {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
.error {
@@ -102,7 +102,7 @@ p.desc {
.right {
margin-bottom: .5rem;
font-size: 14px;
color: #8795a1;
color: var(--grey);
}
}

6
console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
View File

@@ -19,7 +19,7 @@
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
.zitadel-warning {
@@ -67,7 +67,7 @@
.step-description {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
flex-basis: 100%;
margin: 0 .5rem 1rem .5rem;
}
@@ -81,7 +81,7 @@
.docs-line {
flex-basis: 100%;
font-size: 14px;
color: #8795a1;
color: var(--grey);
margin-top: 0;
}

2
console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.scss
View File

@@ -3,7 +3,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

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

@@ -18,7 +18,7 @@
<app-user-grants *ngIf="projectId && grantId" [context]="UserGrantContext.GRANTED_PROJECT"
[projectId]="projectId" [grantId]="grantId"
[displayedColumns]="['select','user', 'projectId', 'creationDate', 'changeDate', 'roleNamesList']"
[allowCreate]="['user.grant.write','user.grant.write:'+grantId] | hasRole | async"
[allowWrite]="['user.grant.write','user.grant.write:'+grantId] | hasRole | async"
[allowDelete]="['user.grant.delete','user.grant.delete:'+grantId] | hasRole | async"
refreshOnPreviousRoute="/grant-create/project/{{projectId}}/grant/{{grantId}}">
</app-user-grants>

4
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.scss
View File

@@ -23,7 +23,7 @@
.desc {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
.zitadel-warning {
@@ -37,7 +37,7 @@
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
.side {

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

@@ -48,9 +48,10 @@
border-radius: .5rem;
box-sizing: border-box;
min-height: 166px;
transition: box-shadow .1s ease-in;
&.inactive {
color: #8795a1;
color: var(--grey);
}
img {
@@ -70,7 +71,7 @@
font-size: .8rem;
margin-bottom: 0;
margin-top: .5rem;
color: #8795a1;
color: var(--grey);
}
.name {
@@ -85,7 +86,7 @@
.created {
font-size: .8rem;
color: #8795a1;
color: var(--grey);
}
.organization {
@@ -119,7 +120,7 @@
right: 0;
margin: 0;
margin-bottom: .25rem;
color: #8795a1;
color: var(--grey);
&.selected {
opacity: 1;
@@ -127,70 +128,17 @@
}
&:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
.edit-button {
opacity: 1;
}
.text-part {
.icons {
opacity: 1;
}
}
}
&.selected {
.text-part {
.icons {
opacity: 1;
}
}
.edit-button {
opacity: 1;
}
.icon {
opacity: 1;
}
}
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
}
.add-project-button {
z-index: 100;
flex-basis: 250px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 166px;
border-radius: .5rem;
margin: 1rem;
box-sizing: border-box;
.icon {
display: flex;
justify-content: center;
align-self: center;
margin-bottom: 1rem;
height: 2.5rem;
line-height: 2.5rem;
font-size: 2.5rem;
}
&:hover {
background-color: #ffffff25;
.icon,
span {
&.disabled {
color: gray;
}
}
}
@media only screen and (max-width: 450px) {
@@ -203,5 +151,5 @@
flex-basis: 100%;
padding: 0 1rem;
font-size: .8rem;
color: #8795a1;
color: var(--grey);
}

2
console/src/app/pages/projects/granted-projects/granted-projects.component.scss
View File

@@ -3,7 +3,7 @@ h1 {
}
.sub {
color: #8795a1;
color: var(--grey);
margin-bottom: 2rem;
}

3
console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.scss
View File

@@ -52,7 +52,7 @@
border: 1px solid $accent-color;
font-weight: 800;
background-color: $primary-dark;
transition: background-color .2s ease-in-out;
transition: background-color box-shadow .3s ease-in;
background-image:
linear-gradient(transparent 11px, rgba($accent-color, .5) 12px, transparent 12px),
linear-gradient(90deg, transparent 11px, rgba($accent-color, .5) 12px, transparent 12px);
@@ -60,6 +60,7 @@
&:hover {
background-color: rgba($accent-color, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
}
&.add {

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

@@ -90,7 +90,7 @@
description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
<app-user-grants [context]="UserGrantContext.OWNED_PROJECT" [projectId]="projectId"
refreshOnPreviousRoute="/grant-create/project/{{projectId}}"
[allowCreate]="(['user.grant.write', 'user.grant.write:'+projectId] | hasRole) | async"
[allowWrite]="(['user.grant.write', 'user.grant.write:'+projectId] | hasRole) | async"
[allowDelete]="(['user.grant.delete','user.grant.delete:'+projectId] | hasRole) | async">
</app-user-grants>
</app-card>

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

@@ -31,7 +31,7 @@
.desc {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
.zitadel-warning {

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

@@ -71,7 +71,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
<tr class="highlight" mat-row *matRowDef="let grant; columns: displayedColumns;">
</tr>
</table>

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

@@ -48,9 +48,10 @@
border-radius: .5rem;
box-sizing: border-box;
min-height: 166px;
transition: box-shadow .1s ease-in;
&.inactive {
color: #8795a1;
color: var(--grey);
}
img {
@@ -70,7 +71,7 @@
font-size: .8rem;
margin-bottom: 0;
margin-top: .5rem;
color: #8795a1;
color: var(--grey);
}
.name {
@@ -85,7 +86,7 @@
.created {
font-size: .8rem;
color: #8795a1;
color: var(--grey);
}
.organization {
@@ -119,7 +120,7 @@
right: 0;
margin: 0;
margin-bottom: .25rem;
color: #8795a1;
color: var(--grey);
&.selected {
opacity: 1;
@@ -127,24 +128,14 @@
}
&:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
.edit-button {
opacity: 1;
}
.text-part {
.icons {
opacity: 1;
}
}
}
&.selected {
.text-part {
.icons {
opacity: 1;
}
}
.edit-button {
opacity: 1;
}
@@ -171,6 +162,7 @@
border-radius: .5rem;
margin: 1rem;
box-sizing: border-box;
transition: box-shadow .1s ease-in;
.icon {
display: flex;
@@ -183,7 +175,7 @@
}
&:hover {
background-color: #ffffff25;
box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
.icon,
span {
@@ -202,6 +194,6 @@
.n-items {
padding: 0 1rem;
font-size: .8rem;
color: #8795a1;
color: var(--grey);
flex-basis: 100%;
}

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

@@ -3,7 +3,7 @@ h1 {
}
.sub {
color: #8795a1;
color: var(--grey);
margin-bottom: 2rem;
}

2
console/src/app/pages/projects/owned-projects/owned-projects.component.scss
View File

@@ -3,7 +3,7 @@ h1 {
}
.sub {
color: #8795a1;
color: var(--grey);
margin-bottom: 2rem;
}

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

@@ -1,59 +0,0 @@
import { DataSource } from '@angular/cdk/collections';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { ProjectMemberView } from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
/**
* Data source for the ProjectMembers view. This class should
* encapsulate all logic for fetching and manipulating the displayed data
* (including sorting, pagination, and filtering).
*/
export class ProjectGrantDetailDataSource extends DataSource<ProjectMemberView.AsObject> {
public totalResult: number = 0;
public membersSubject: BehaviorSubject<ProjectMemberView.AsObject[]>
= new BehaviorSubject<ProjectMemberView.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
constructor(private mgmtService: ManagementService) {
super();
}
public loadMembers(projectId: string, grantId: string,
pageIndex: number, pageSize: number, sortDirection?: string): void {
const offset = pageIndex * pageSize;
this.loadingSubject.next(true);
from(this.mgmtService.SearchProjectGrantMembers(projectId, grantId, pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
return resp.toObject().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<ProjectMemberView.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();
}
}

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

@@ -28,7 +28,7 @@
<mat-form-field class="formfield" appearance="outline" *ngIf="grant && grant.roleKeysList">
<mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
<mat-select [(ngModel)]="grant.roleKeysList" multiple (selectionChange)="updateRoles($event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role.key">
<mat-option *ngFor="let role of projectRoleOptions" [value]="role.key">
{{role.key}}
</mat-option>
</mat-select>
@@ -39,7 +39,19 @@
<h1 class="h1">{{ 'PROJECT.GRANT.DETAIL.MEMBERTITLE' | translate }}</h1>
<p class="desc">{{ 'PROJECT.GRANT.DETAIL.MEMBERDESC' | translate }}</p>
<app-project-grant-members *ngIf="this.projectid && this.grantid" [projectId]="projectid" [grantId]="grantid"
[type]="projectType">
</app-project-grant-members>
<app-members-table *ngIf="grant" style="width: 100%;" [dataSource]="dataSource"
[memberRoleOptions]="memberRoleOptions" (updateRoles)="updateMemberRoles($event.member, $event.change)"
[factoryLoadFunc]="changePageFactory" (changedSelection)="selection = $event" [refreshTrigger]="changePage">
<button selectactions (click)="removeProjectMemberSelection()"
[disabled]="(['project.grant.member.delete','project.grant.member.delete:' + grant.id] | hasRole | async) == false"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="del-button" color="warn" mat-raised-button>
<i class="las la-trash"></i>
{{'ACTIONS.SELECTIONDELETE' | translate}}
</button>
<a writeactions color="primary"
[disabled]="(['project.grant.member.write','project.grant.member.write:' + grant.id] | hasRole | async) == false"
(click)="openAddMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</app-members-table>
</app-detail-layout>

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

@@ -1,4 +1,8 @@
.del-button {
margin-right: .5rem;
}
.master-row {
display: flex;
flex-wrap: wrap;
@@ -21,7 +25,7 @@
}
.first {
color: #8795a1;
color: var(--grey);
}
}
}
@@ -37,5 +41,5 @@
.divider {
height: 1px;
background-color: #ffffff20;
background-color: #8795a140;
}

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

@@ -1,8 +1,12 @@
import { Component } from '@angular/core';
import { Component, EventEmitter } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { PageEvent } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { ActivatedRoute } from '@angular/router';
import {
ProjectGrant,
ProjectGrantMember,
ProjectGrantMemberView,
ProjectGrantState,
ProjectGrantView,
ProjectRoleView,
@@ -11,12 +15,20 @@ import {
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import {
ProjectGrantMembersCreateDialogComponent,
ProjectGrantMembersCreateDialogExportType,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
import { ProjectGrantMembersDataSource } from './project-grant-members-datasource';
@Component({
selector: 'app-project-grant-detail',
templateUrl: './project-grant-detail.component.html',
styleUrls: ['./project-grant-detail.component.scss'],
})
export class ProjectGrantDetailComponent {
public INITIALPAGESIZE: number = 25;
public grant!: ProjectGrantView.AsObject;
public projectid: string = '';
public grantid: string = '';
@@ -27,18 +39,37 @@ export class ProjectGrantDetailComponent {
public isZitadel: boolean = false;
ProjectGrantState: any = ProjectGrantState;
public memberRoleOptions: ProjectRoleView.AsObject[] = [];
public projectRoleOptions: ProjectRoleView.AsObject[] = [];
public memberRoleOptions: Array<string> = [];
public changePageFactory!: Function;
public changePage: EventEmitter<void> = new EventEmitter();
public selection: Array<ProjectGrantMemberView.AsObject> = [];
public dataSource!: ProjectGrantMembersDataSource;
constructor(
private mgmtService: ManagementService,
private route: ActivatedRoute,
private toast: ToastService,
private dialog: MatDialog,
) {
this.route.params.subscribe(params => {
this.projectid = params.projectid;
this.grantid = params.grantid;
this.dataSource = new ProjectGrantMembersDataSource(this.mgmtService);
this.dataSource.loadGrantMembers(params.projectid, params.grantid, 0, this.INITIALPAGESIZE);
this.getRoleOptions(params.projectid);
this.getMemberRoleOptions();
this.changePageFactory = (event?: PageEvent) => {
return this.dataSource.loadGrantMembers(
params.projectid,
params.grantid,
event?.pageIndex ?? 0,
event?.pageSize ?? this.INITIALPAGESIZE,
);
};
this.mgmtService.ProjectGrantByID(this.grantid, this.projectid).then((grant) => {
this.grant = grant.toObject();
@@ -66,7 +97,15 @@ export class ProjectGrantDetailComponent {
public getRoleOptions(projectId: string): void {
this.mgmtService.SearchProjectRoles(projectId, 100, 0).then(resp => {
this.memberRoleOptions = resp.toObject().resultList;
this.projectRoleOptions = resp.toObject().resultList;
});
}
public getMemberRoleOptions(): void {
this.mgmtService.GetProjectGrantMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
this.toast.showError(error);
});
}
@@ -78,4 +117,57 @@ export class ProjectGrantDetailComponent {
this.toast.showError(error);
});
}
public removeProjectMemberSelection(): void {
Promise.all(this.selection.map(member => {
return this.mgmtService.RemoveProjectGrantMember(this.grant.projectId, this.grant.id, member.userId).then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERREMOVED', true);
setTimeout(() => {
this.changePage.emit();
}, 1000);
}).catch(error => {
this.toast.showError(error);
});
}));
}
public async openAddMember(): Promise<any> {
const keysList = (await this.mgmtService.GetProjectGrantMemberRoles()).toObject();
const dialogRef = this.dialog.open(ProjectGrantMembersCreateDialogComponent, {
data: {
roleKeysList: keysList.rolesList,
},
width: '400px',
});
dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => {
if (dataToAdd) {
Promise.all(dataToAdd.userIds.map((userid: string) => {
return this.mgmtService.AddProjectGrantMember(
this.grant.projectId,
this.grant.id,
userid,
dataToAdd.rolesKeyList,
);
})).then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERADDED', true);
setTimeout(() => {
this.changePage.emit();
}, 3000);
}).catch(error => {
this.toast.showError(error);
});
}
});
}
updateMemberRoles(member: ProjectGrantMember.AsObject, selectionChange: MatSelectChange): void {
this.mgmtService.ChangeProjectGrantMember(this.grant.projectId, this.grant.id, member.userId, selectionChange.value)
.then((_: ProjectGrantMember) => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERCHANGED', true);
}).catch(error => {
this.toast.showError(error);
});
}
}

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

@@ -5,6 +5,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
@@ -15,19 +16,21 @@ 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 { MembersTableModule } from 'src/app/modules/members-table/members-table.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { ProjectGrantDetailRoutingModule } from './project-grant-detail-routing.module';
import { ProjectGrantDetailComponent } from './project-grant-detail.component';
import { ProjectGrantMembersModule } from './project-grant-members/project-grant-members.module';
import {
ProjectGrantMembersCreateDialogModule,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.module';
@NgModule({
declarations: [ProjectGrantDetailComponent],
imports: [
CommonModule,
ProjectGrantDetailRoutingModule,
ProjectGrantMembersModule,
ProjectGrantMembersCreateDialogModule,
MatAutocompleteModule,
HasRoleModule,
MatChipsModule,
@@ -45,6 +48,8 @@ import { ProjectGrantMembersModule } from './project-grant-members/project-grant
MatSelectModule,
DetailLayoutModule,
HasRolePipeModule,
MembersTableModule,
MatDialogModule,
],
})
export class ProjectGrantDetailModule { }

0
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html → console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html
View File

0
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss → console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss
View File

0
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.spec.ts → console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-create-dialog/project-grant-members-create-dialog.component.spec.ts
View File

0
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts → console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts
View File

0
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.module.ts → console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-create-dialog/project-grant-members-create-dialog.module.ts
View File

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

@@ -32,6 +32,7 @@ export class ProjectGrantMembersDataSource extends DataSource<ProjectMember.AsOb
grantId, pageSize, offset)).pipe(
map(resp => {
const response = resp.toObject();
console.log(response.resultList);
this.totalResult = response.totalResult;
if (response.viewTimestamp) {
this.viewTimestamp = response.viewTimestamp;

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

@@ -1,84 +0,0 @@
<app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
[timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource.loading$ | async">
<button (click)="removeProjectMemberSelection()"
[disabled]="(['project.grant.member.delete','project.grant.member.delete:' + grantId] | hasRole | async) == false"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" color="warn" mat-icon-button
*ngIf="selection.hasValue()">
<i class="las la-trash"></i>
</button>
<a color="primary"
[disabled]="(['project.grant.member.write','project.grant.member.write:' + grantId] | hasRole | async) == false"
(click)="openAddMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
<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" [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]="(['project.grant.member.write','project.grant.member.write:' + grantId] | 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="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="paginator" [ngClass]="{'': type == ProjectType.PROJECTTYPE_OWNED}" #paginator
[pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</app-refresh-table>

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

@@ -1,40 +0,0 @@
.table-wrapper {
overflow: auto;
.table,
.paginator {
td,
th {
padding: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.action {
width: 40px;
}
.selection {
width: 50px;
max-width: 50px;
}
.role {
display: inline-block;
margin: .25rem;
}
}
}
.pointer {
outline: none;
cursor: pointer;
}

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

@@ -1,34 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ProjectGrantMembersComponent } from './project-grant-members.component';
describe('ProjectMembersComponent', () => {
let component: ProjectGrantMembersComponent;
let fixture: ComponentFixture<ProjectGrantMembersComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectGrantMembersComponent],
imports: [
NoopAnimationsModule,
MatPaginatorModule,
MatSortModule,
MatTableModule,
],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectGrantMembersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should compile', () => {
expect(component).toBeTruthy();
});
});

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

@@ -1,149 +0,0 @@
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, Input, OnInit, 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 { ProjectMember, ProjectType } from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import {
ProjectGrantMembersCreateDialogComponent,
ProjectGrantMembersCreateDialogExportType,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
import { ProjectGrantMembersDataSource } from './project-grant-members-datasource';
@Component({
selector: 'app-project-grant-members',
templateUrl: './project-grant-members.component.html',
styleUrls: ['./project-grant-members.component.scss'],
})
export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
@Input() public projectId!: string;
@Input() public grantId!: string;
@Input() public type: ProjectType = ProjectType.PROJECTTYPE_GRANTED;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
public dataSource!: ProjectGrantMembersDataSource;
public selection: SelectionModel<ProjectMember.AsObject> = new SelectionModel<ProjectMember.AsObject>(true, []);
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
public ProjectType: any = ProjectType;
public memberRoleOptions: string[] = [];
constructor(
private mgmtService: ManagementService,
private dialog: MatDialog,
private toast: ToastService,
) {
this.dataSource = new ProjectGrantMembersDataSource(this.mgmtService);
this.getRoleOptions();
}
public ngOnInit(): void {
this.dataSource.loadGrantMembers(this.projectId, this.grantId, 0, 25);
}
public ngAfterViewInit(): void {
this.paginator.page
.pipe(
tap(() => this.loadMembersPage()),
)
.subscribe();
}
public getRoleOptions(): void {
if (this.type === ProjectType.PROJECTTYPE_GRANTED) {
this.mgmtService.GetProjectGrantMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
this.toast.showError(error);
});
} else if (this.type === ProjectType.PROJECTTYPE_OWNED) {
this.mgmtService.GetProjectMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
this.toast.showError(error);
});
}
}
private loadMembersPage(): void {
this.dataSource.loadGrantMembers(
this.projectId,
this.grantId,
this.paginator.pageIndex,
this.paginator.pageSize,
);
}
public removeProjectMemberSelection(): void {
Promise.all(this.selection.selected.map(member => {
return this.mgmtService.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;
return numSelected === numRows;
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
}
public async openAddMember(): Promise<any> {
const keysList = (await this.mgmtService.GetProjectGrantMemberRoles()).toObject();
const dialogRef = this.dialog.open(ProjectGrantMembersCreateDialogComponent, {
data: {
roleKeysList: keysList.rolesList,
},
width: '400px',
});
dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => {
if (dataToAdd) {
Promise.all(dataToAdd.userIds.map((userid: string) => {
return this.mgmtService.AddProjectGrantMember(
this.projectId,
this.grantId,
userid,
dataToAdd.rolesKeyList,
);
})).then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERADDED', true);
}).catch(error => {
this.toast.showError(error);
});
}
});
}
updateRoles(member: ProjectMember.AsObject, selectionChange: MatSelectChange): void {
this.mgmtService.ChangeProjectGrantMember(this.projectId, this.grantId, member.userId, selectionChange.value)
.then((newmember: ProjectMember) => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERCHANGED', true);
}).catch(error => {
this.toast.showError(error);
});
}
public refreshPage(): void {
this.selection.clear();
this.dataSource.loadGrantMembers(this.projectId, this.grantId, this.paginator.pageIndex, this.paginator.pageSize);
}
}

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

@@ -1,58 +0,0 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
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 { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import {
ProjectGrantMembersCreateDialogModule,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.module';
import { ProjectGrantMembersComponent } from './project-grant-members.component';
@NgModule({
declarations: [ProjectGrantMembersComponent],
imports: [
CommonModule,
HasRoleModule,
RouterModule,
MatButtonModule,
MatCheckboxModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatTableModule,
SearchUserAutocompleteModule,
ProjectGrantMembersCreateDialogModule,
MatPaginatorModule,
MatSortModule,
MatTooltipModule,
MatDialogModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
RefreshTableModule,
HasRolePipeModule,
],
exports: [
ProjectGrantMembersComponent,
],
})
export class ProjectGrantMembersModule { }

2
console/src/app/pages/signedout/signedout.component.scss
View File

@@ -15,7 +15,7 @@
}
p {
color: #8795a1;
color: var(--grey);
text-align: center;
font-size: 1rem;
margin: 0;

2
console/src/app/pages/user-grant-create/user-grant-create.component.scss
View File

@@ -24,7 +24,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
}
}

5
console/src/app/pages/users/user-create-machine/user-create-machine.component.scss
View File

@@ -15,14 +15,15 @@
.content {
width: 100%;
display: flex wrap;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 0 -.5rem;
.section {
padding: .5rem;
flex-basis: 100%;
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

5
console/src/app/pages/users/user-create/user-create.component.scss
View File

@@ -15,14 +15,15 @@
.content {
width: 100%;
display: flex wrap;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 0 -.5rem;
.section {
padding: .5rem;
flex-basis: 100%;
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

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

@@ -27,18 +27,12 @@
</div>
</app-card>
<!-- <div class="col" *ngIf="user"> -->
<app-card *ngIf="user" class="app-card" title="{{ 'USER.PROFILE.TITLE' | translate }}">
<app-detail-form [genders]="genders" [languages]="languages" [username]="user.userName" [user]="user.human"
(changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
</app-detail-form>
</app-card>
<!-- <app-card title="Theme" class="app-card theme-card">
<app-theme-setting></app-theme-setting>
</app-card> -->
<!-- </div> -->
<app-card *ngIf="user && user.human && user.id" title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}"
description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
<app-external-idps [userId]="user.id" [service]="userService"></app-external-idps>
@@ -46,101 +40,10 @@
<app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
<div class="method-col">
<div class="method-row">
<span class="label">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
<span>*********</span>
<div>
<a [routerLink]="['password']" mat-icon-button>
<mat-icon class="icon">chevron_right</mat-icon>
</a>
</div>
</div>
<div class="method-row">
<span class="label">{{ 'USER.EMAIL' | translate }}</span>
<ng-container *ngIf="!emailEditState; else emailEdit">
<div class="actions">
<span class="name">{{user?.human?.email}}</span>
<mat-icon class="icon" *ngIf="user?.human?.isEmailVerified" color="primary"
aria-hidden="false" aria-label="verified icon">
check_circle_outline</mat-icon>
<ng-container *ngIf="user?.human?.email && !user?.human?.isEmailVerified">
<mat-icon class="icon" color="warn" aria-hidden="false" aria-label="not verified icon">
highlight_off
</mat-icon>
<a class="verify" matTooltip="{{'USER.LOGINMETHODS.EMAIL.RESEND' | translate}}"
(click)="resendVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
</ng-container>
</div>
<div>
<button (click)="emailEditState = true" mat-icon-button>
<mat-icon class="icon">edit</mat-icon>
</button>
</div>
</ng-container>
<ng-template #emailEdit>
<mat-form-field class="name">
<mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>
<input *ngIf="user.human && user.human.email !== undefined && user.human.email !== null"
matInput [(ngModel)]="user.human.email" />
</mat-form-field>
<button (click)="emailEditState = false" mat-icon-button>
<mat-icon class="icon">close</mat-icon>
</button>
<button *ngIf="user.human" [disabled]="!user.human.email" type="button" color="primary"
(click)="saveEmail()" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</ng-template>
</div>
<div class="method-row">
<span class="label">{{ 'USER.PHONE' | translate }}</span>
<ng-container *ngIf="!phoneEditState; else phoneEdit">
<div class="actions">
<span class="name">{{user?.human?.phone}}</span>
<mat-icon class="icon" *ngIf="user?.human?.isPhoneVerified" color="primary"
aria-hidden="false" aria-label="verified icon">
check_circle_outline</mat-icon>
<ng-container *ngIf="user?.human?.phone && !user?.human?.isPhoneVerified">
<mat-icon class="icon" color="warn" aria-hidden="false" aria-label="not verified icon">
highlight_off
</mat-icon>
<a class="verify" matTooltip="{{'USER.LOGINMETHODS.ENTERCODE_DESC' | translate}}"
(click)="enterCode()">{{'USER.LOGINMETHODS.ENTERCODE' | translate}}</a>
<a class="verify" matTooltip="{{'USER.LOGINMETHODS.PHONE.RESEND' | translate}}"
(click)="resendPhoneVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
</ng-container>
</div>
<div>
<button (click)="phoneEditState = true" mat-icon-button>
<mat-icon class="icon">edit</mat-icon>
</button>
</div>
</ng-container>
<ng-template #phoneEdit>
<mat-form-field class="name">
<mat-label>{{ 'USER.PHONE' | translate }}</mat-label>
<input *ngIf="user.human && user.human.phone !== undefined && user.human.phone !== null"
matInput [(ngModel)]="user.human.phone" />
</mat-form-field>
<button (click)="phoneEditState = false" mat-icon-button>
<mat-icon class="icon">close</mat-icon>
</button>
<button *ngIf="user.human && user.human.phone" color="warn" (click)="deletePhone()"
mat-icon-button>
<i class="las la-trash"></i>
</button>
<button *ngIf="user.human" [disabled]="!user.human.phone" type="button" color="primary"
(click)="savePhone()" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</ng-template>
</div>
</div>
<app-contact *ngIf="user?.human" [human]="user.human" (savedPhone)="savePhone($event)"
(savedEmail)="saveEmail($event)" (enteredPhoneCode)="enteredPhoneCode($event)"
(deletedPhone)="deletePhone()" (resendEmailVerification)="resendEmailVerification()"
(resendPhoneVerification)="resendPhoneVerification()"></app-contact>
</app-card>
<app-auth-user-mfa *ngIf="user" #mfaComponent></app-auth-user-mfa>
@@ -149,7 +52,7 @@
<div *ngIf="user" class="side" metainfo>
<div class="details">
<div class="row" *ngIf="user?.preferredLoginName">
<span class="first">Preferred Loginname:</span>
<span class="first">{{'USER.PREFERRED_LOGINNAME' | translate}}</span>
<span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
</div>
</div>

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

@@ -10,7 +10,7 @@
}
.sub {
color: #8795a1;
color: var(--grey);
}
.theme {
@@ -53,59 +53,6 @@
}
}
.method-col {
display: flex;
flex-direction: column;
margin: -.5rem;
.method-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: .5rem;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
.label,
.name {
margin-right: 1rem;
}
.actions {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
}
.label {
font-size: .9rem;
color: #8795a1;
}
.icon {
margin: .5rem;
}
.verify {
text-decoration: none;
font-size: .8rem;
color: #8795a1;
border-radius: .5rem;
cursor: pointer;
word-wrap: none;
white-space: nowrap;
margin-right: 1rem;
&:hover {
color: white;
text-decoration: underline;
}
}
}
}
.col {
display: flex;
flex-wrap: wrap;
@@ -116,14 +63,6 @@
flex: 1;
margin: .5rem;
}
// .theme-card {
// max-width: 300px;
// @media only screen and (max-width: 450px) {
// max-width: none;
// }
// }
}
.side {

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

@@ -1,5 +1,4 @@
import { Component, OnDestroy } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core';
import { Subscription } from 'rxjs';
import { ChangeType } from 'src/app/modules/changes/changes.component';
@@ -7,8 +6,6 @@ import { Gender, UserAddress, UserEmail, UserPhone, UserProfile, UserView } from
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ToastService } from 'src/app/services/toast.service';
import { CodeDialogComponent } from './code-dialog/code-dialog.component';
@Component({
selector: 'app-auth-user-detail',
templateUrl: './auth-user-detail.component.html',
@@ -22,9 +19,6 @@ export class AuthUserDetailComponent implements OnDestroy {
private subscription: Subscription = new Subscription();
public emailEditState: boolean = false;
public phoneEditState: boolean = false;
public loading: boolean = false;
public copied: string = '';
@@ -36,7 +30,6 @@ export class AuthUserDetailComponent implements OnDestroy {
public translate: TranslateService,
private toast: ToastService,
public userService: GrpcAuthService,
private dialog: MatDialog,
) {
this.loading = true;
this.userService.GetMyUser().then(user => {
@@ -79,50 +72,31 @@ export class AuthUserDetailComponent implements OnDestroy {
}
}
public saveEmail(): void {
this.emailEditState = false;
if (this.user.human) {
this.userService
.SaveMyUserEmail(this.user.human.email).then((data: UserEmail) => {
this.toast.showInfo('USER.TOAST.EMAILSAVED', true);
if (this.user.human) {
this.user.human.email = data.toObject().email;
}
this.emailEditState = false;
}).catch(error => {
this.toast.showError(error);
this.emailEditState = false;
});
}
public saveEmail(email: string): void {
this.userService
.SaveMyUserEmail(email).then((data: UserEmail) => {
this.toast.showInfo('USER.TOAST.EMAILSAVED', true);
if (this.user.human) {
this.user.human.email = data.toObject().email;
}
}).catch(error => {
this.toast.showError(error);
});
}
public enterCode(): void {
if (this.user.human) {
const dialogRef = this.dialog.open(CodeDialogComponent, {
data: {
number: this.user.human.phone,
},
width: '400px',
});
dialogRef.afterClosed().subscribe(code => {
if (code) {
this.userService.VerifyMyUserPhone(code).then(() => {
this.toast.showInfo('USER.TOAST.PHONESAVED', true);
}).catch(error => {
this.toast.showError(error);
});
}
});
}
public enteredPhoneCode(code: string): void {
this.userService.VerifyMyUserPhone(code).then(() => {
this.toast.showInfo('USER.TOAST.PHONESAVED', true);
}).catch(error => {
this.toast.showError(error);
});
}
public changedLanguage(language: string): void {
this.translate.use(language);
}
public resendVerification(): void {
public resendEmailVerification(): void {
this.userService.ResendEmailVerification().then(() => {
this.toast.showInfo('USER.TOAST.EMAILSAVED', true);
}).catch(error => {
@@ -139,32 +113,26 @@ export class AuthUserDetailComponent implements OnDestroy {
}
public deletePhone(): void {
if (this.user.human) {
this.userService.RemoveMyUserPhone().then(() => {
this.toast.showInfo('USER.TOAST.PHONEREMOVED', true);
if (this.user.human) {
this.user.human.phone = '';
}
this.phoneEditState = false;
}).catch(error => {
this.toast.showError(error);
});
}
this.userService.RemoveMyUserPhone().then(() => {
this.toast.showInfo('USER.TOAST.PHONEREMOVED', true);
if (this.user.human) {
this.user.human.phone = '';
}
}).catch(error => {
this.toast.showError(error);
});
}
public savePhone(): void {
this.phoneEditState = false;
public savePhone(phone: string): void {
if (this.user.human) {
this.userService
.SaveMyUserPhone(this.user.human.phone).then((data: UserPhone) => {
.SaveMyUserPhone(phone).then((data: UserPhone) => {
this.toast.showInfo('USER.TOAST.PHONESAVED', true);
if (this.user.human) {
this.user.human.phone = data.toObject().phone;
}
this.phoneEditState = false;
}).catch(error => {
this.toast.showError(error);
this.phoneEditState = false;
});
}
}

2
console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card.scss
View File

@@ -9,6 +9,6 @@
.theme-conent,
.crescent {
background-color: $primary-dark;
transition: background-color .4s cubic-bezier(.645, .045, .355, 1);
transition: background-color .3s cubic-bezier(.645, .045, .355, 1); // cubic-bezier(.645, .045, .355, 1);
}
}

2
console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.scss
View File

@@ -34,7 +34,7 @@ $light-background: rgb(220, 220, 220);
background: $light-background;
transform: scale(0);
transform-origin: top right;
transition: transform .4s cubic-bezier(.645, .045, .355, 1);
transition: transform .2s cubic-bezier(.645, .045, .355, 1);
}
p {

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

@@ -0,0 +1,97 @@
<div class="method-col">
<div class="method-row">
<span class="label">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
<span>*********</span>
<div>
<ng-content select="[phoneAction]"></ng-content>
<a [disabled]="!canWrite" [routerLink]="['password']" mat-icon-button>
<mat-icon class="icon">chevron_right</mat-icon>
</a>
</div>
</div>
<div class="method-row">
<span class="label">{{ 'USER.EMAIL' | translate }}</span>
<ng-container *ngIf="!emailEditState; else emailEdit">
<div class="actions">
<span class="name">{{human?.email}}</span>
<mat-icon class="icon" *ngIf="human?.isEmailVerified" color="primary" aria-hidden="false"
aria-label="verified icon">
check_circle_outline</mat-icon>
<ng-container *ngIf="human?.email && !human?.isEmailVerified">
<mat-icon class="icon" color="warn" aria-hidden="false" aria-label="not verified icon">
highlight_off
</mat-icon>
<a *ngIf="canWrite" class="verify" matTooltip="{{'USER.LOGINMETHODS.EMAIL.RESEND' | translate}}"
(click)="emitEmailVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
</ng-container>
</div>
<div>
<button [disabled]="!canWrite" (click)="emailEditState = true" mat-icon-button>
<mat-icon class="icon">edit</mat-icon>
</button>
</div>
</ng-container>
<ng-template #emailEdit>
<mat-form-field class="name">
<mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>
<input *ngIf="human && human.email !== undefined && human.email !== null" matInput
[(ngModel)]="human.email" />
</mat-form-field>
<button (click)="emailEditState = false" mat-icon-button>
<mat-icon class="icon">close</mat-icon>
</button>
<button *ngIf="human" [disabled]="!human.email" type="button" color="primary" (click)="saveEmail()"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</ng-template>
</div>
<div class="method-row">
<span class="label">{{ 'USER.PHONE' | translate }}</span>
<ng-container *ngIf="!phoneEditState; else phoneEdit">
<div class="actions">
<span class="name">{{human?.phone}}</span>
<mat-icon class="icon" *ngIf="human?.isPhoneVerified" color="primary" aria-hidden="false"
aria-label="verified icon">
check_circle_outline</mat-icon>
<ng-container *ngIf="human?.phone && !human?.isPhoneVerified">
<mat-icon class="icon" matTooltip="not verified" color="warn" aria-hidden="false"
aria-label="not verified icon">
highlight_off
</mat-icon>
<a *ngIf="!disablePhoneCode && !canWrite" class="verify"
matTooltip="{{'USER.LOGINMETHODS.ENTERCODE_DESC' | translate}}"
(click)="enterCode()">{{'USER.LOGINMETHODS.ENTERCODE' | translate}}</a>
<a *ngIf="canWrite" class="verify" matTooltip="{{'USER.LOGINMETHODS.PHONE.RESEND' | translate}}"
(click)="emitPhoneVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
</ng-container>
</div>
<div>
<button [disabled]="!canWrite" (click)="phoneEditState = true" mat-icon-button>
<mat-icon class="icon">edit</mat-icon>
</button>
</div>
</ng-container>
<ng-template #phoneEdit>
<mat-form-field class="name">
<mat-label>{{ 'USER.PHONE' | translate }}</mat-label>
<input *ngIf="human && human.phone !== undefined && human.phone !== null" matInput
[(ngModel)]="human.phone" />
</mat-form-field>
<button (click)="phoneEditState = false" mat-icon-button>
<mat-icon class="icon">close</mat-icon>
</button>
<button *ngIf="human && human.phone" color="warn" (click)="emitDeletePhone()" mat-icon-button>
<i class="las la-trash"></i>
</button>
<button *ngIf="human" [disabled]="!human.phone" type="button" color="primary" (click)="savePhone()"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</ng-template>
</div>
</div>

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

@@ -0,0 +1,47 @@
.method-col {
display: flex;
flex-direction: column;
margin: -.5rem;
.method-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: .5rem;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
.actions {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
min-width: 150px;
}
.label {
font-size: .9rem;
min-width: 100px;
color: var(--grey);
}
.icon {
margin: .5rem;
}
.verify {
text-decoration: none;
font-size: .8rem;
color: var(--grey);
border-radius: .5rem;
cursor: pointer;
word-wrap: none;
white-space: nowrap;
&:hover {
text-decoration: underline;
}
}
}
}

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

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

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

@@ -0,0 +1,70 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { HumanView as AuthHumanView } from 'src/app/proto/generated/auth_pb';
import { HumanView as MgmtHumanView } from 'src/app/proto/generated/management_pb';
import { CodeDialogComponent } from '../auth-user-detail/code-dialog/code-dialog.component';
@Component({
selector: 'app-contact',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.scss'],
})
export class ContactComponent implements OnInit {
@Input() disablePhoneCode: boolean = false;
@Input() canWrite: boolean = false;
@Input() human!: AuthHumanView.AsObject | MgmtHumanView.AsObject;
@Output() savedPhone: EventEmitter<string> = new EventEmitter();
@Output() savedEmail: EventEmitter<string> = new EventEmitter();
@Output() resendEmailVerification: EventEmitter<void> = new EventEmitter();
@Output() resendPhoneVerification: EventEmitter<void> = new EventEmitter();
@Output() enteredPhoneCode: EventEmitter<string> = new EventEmitter();
@Output() deletedPhone: EventEmitter<void> = new EventEmitter();
public emailEditState: boolean = false;
public phoneEditState: boolean = false;
constructor(private dialog: MatDialog) { }
ngOnInit(): void {
}
savePhone(): void {
this.phoneEditState = false;
this.savedPhone.emit(this.human.phone);
}
emitDeletePhone(): void {
this.phoneEditState = false;
this.deletedPhone.emit();
}
saveEmail(): void {
this.emailEditState = false;
this.savedEmail.emit(this.human.email);
}
emitEmailVerification(): void {
this.resendEmailVerification.emit();
}
emitPhoneVerification(): void {
this.resendPhoneVerification.emit();
}
public enterCode(): void {
if (this.human) {
const dialogRef = this.dialog.open(CodeDialogComponent, {
data: {
number: this.human.phone,
},
width: '400px',
});
dialogRef.afterClosed().subscribe(code => {
if (code) {
this.enteredPhoneCode.emit(code);
}
});
}
}
}

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

@@ -31,7 +31,7 @@ export class DetailFormComponent implements OnDestroy, OnChanges {
firstName: [{ value: '', disabled: this.disabled }, Validators.required],
lastName: [{ value: '', disabled: this.disabled }, Validators.required],
nickName: [{ value: '', disabled: this.disabled }],
gender: [{ value: 0 }, { disabled: this.disabled }],
gender: [{ value: 0, disabled: this.disabled }],
preferredLanguage: [{ value: '', disabled: this.disabled }],
});
}
@@ -44,7 +44,7 @@ export class DetailFormComponent implements OnDestroy, OnChanges {
firstName: [{ value: '', disabled: this.disabled }, Validators.required],
lastName: [{ value: '', disabled: this.disabled }, Validators.required],
nickName: [{ value: '', disabled: this.disabled }],
gender: [{ value: 0 }, { disabled: this.disabled }],
gender: [{ value: 0, disabled: this.disabled }],
preferredLanguage: [{ value: '', disabled: this.disabled }],
});

2
console/src/app/pages/users/user-detail/machine-keys/add-key-dialog/add-key-dialog.component.scss
View File

@@ -4,7 +4,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

2
console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.scss
View File

@@ -33,7 +33,7 @@
}
.left {
color: #8795a1;
color: var(--grey);
margin-right: 1rem;
margin-top: 0;
margin-bottom: .5rem;

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

@@ -18,7 +18,7 @@
.sub-header {
font-size: .8rem;
color: #8795a1;
color: var(--grey);
}
.people {
@@ -84,7 +84,7 @@
box-sizing: border-box;
font-size: 8px;
border-radius: .5rem;
transition: background-color .2s ease-in-out;
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
background-color: $accent-color;
cursor: pointer;
flex-direction: column;

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

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from 'src/app/guards/auth.guard';
import { RoleGuard } from 'src/app/guards/role.guard';
import { UserGuard } from 'src/app/guards/user.guard';
import { AuthUserDetailComponent } from './auth-user-detail/auth-user-detail.component';
import { PasswordComponent } from './password/password.component';
@@ -41,7 +42,7 @@ const routes: Routes = [
{
path: ':id',
component: UserDetailComponent,
canActivate: [AuthGuard, RoleGuard],
canActivate: [AuthGuard, UserGuard, RoleGuard],
data: {
roles: ['user.read'],
animation: 'HomePage',

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

@@ -46,6 +46,7 @@ import { PasswordComponent } from './password/password.component';
import { UserDetailRoutingModule } from './user-detail-routing.module';
import { UserDetailComponent } from './user-detail/user-detail.component';
import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
import { ContactComponent } from './contact/contact.component';
@NgModule({
declarations: [
@@ -60,6 +61,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
MembershipsComponent,
MachineKeysComponent,
ExternalIdpsComponent,
ContactComponent,
],
imports: [
UserDetailRoutingModule,

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

@@ -68,129 +68,34 @@
<app-card *ngIf="user.human" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
<div class="method-col">
<div class="method-row">
<span class="label">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
<span>******</span>
<div>
<button [disabled]="(canWrite$ | async) == false" (click)="sendSetPasswordNotification()"
mat-stroked-button color="primary"
*ngIf="user.state === UserState.USERSTATE_INITIAL">{{ 'USER.PASSWORD.RESENDNOTIFICATION' | translate }}</button>
<a [disabled]="(canWrite$ | async) == false" [routerLink]="['password']" mat-icon-button>
<mat-icon class="icon">chevron_right</mat-icon>
</a>
</div>
</div>
<div class="method-row">
<span class="label">{{ 'USER.EMAIL' | translate }}</span>
<ng-container *ngIf="!emailEditState; else emailEdit">
<div class="actions">
<span class="name">{{user?.human?.email}}</span>
<mat-icon class="icon" *ngIf="user?.human?.isEmailVerified" color="primary"
aria-hidden="false" aria-label="verified icon">
check_circle_outline</mat-icon>
<ng-container *ngIf="user?.human?.email && !user?.human?.isEmailVerified">
<mat-icon class="icon" color="warn" aria-hidden="false" aria-label="not verified icon">
highlight_off
</mat-icon>
<ng-container *ngIf="(canWrite$ | async)">
<a class="verify" matTooltip="{{'USER.LOGINMETHODS.EMAIL.RESEND' | translate}}"
(click)="resendVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
</ng-container>
</ng-container>
</div>
<div>
<button [disabled]="(canWrite$ | async) == false" (click)="emailEditState = true"
mat-icon-button>
<mat-icon class="icon">edit</mat-icon>
</button>
</div>
</ng-container>
<ng-template #emailEdit>
<mat-form-field class="name">
<mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>
<input matInput
*ngIf="user.human && user.human.email !== undefined && user.human.email !== null"
[(ngModel)]="user.human.email" />
</mat-form-field>
<button (click)="emailEditState = false" mat-icon-button>
<mat-icon class="icon">close</mat-icon>
</button>
<button *ngIf="user.human" [disabled]="!user.human.email || (canWrite$ | async) == false"
type="button" color="primary" (click)="saveEmail()"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</ng-template>
</div>
<div class="method-row">
<span class="label">{{ 'USER.PHONE' | translate }}</span>
<ng-container *ngIf="!phoneEditState; else phoneEdit">
<div class="actions">
<span class="name">{{user?.human?.phone}}</span>
<mat-icon class="icon" *ngIf="user?.human?.isPhoneVerified" color="primary"
aria-hidden="false" aria-label="verified icon">
check_circle_outline</mat-icon>
<ng-container *ngIf="user?.human?.phone && !user?.human?.isPhoneVerified">
<mat-icon class="icon" color="warn" aria-hidden="false" aria-label="not verified icon">
highlight_off
</mat-icon>
<ng-container *ngIf="(canWrite$ | async)">
<a class="verify" matTooltip="{{'USER.LOGINMETHODS.PHONE.RESEND' | translate}}"
(click)="resendPhoneVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
</ng-container>
</ng-container>
</div>
<div>
<button [disabled]="(canWrite$ | async) == false" (click)="phoneEditState = true"
mat-icon-button>
<mat-icon class="icon">edit</mat-icon>
</button>
</div>
</ng-container>
<ng-template #phoneEdit>
<mat-form-field class="name">
<mat-label>{{ 'USER.PHONE' | translate }}</mat-label>
<input *ngIf="user.human && user.human.phone !== undefined && user.human.phone !== null"
matInput [disabled]="(canWrite$ | async) == false" [(ngModel)]="user.human.phone" />
</mat-form-field>
<button matTooltip="{{ 'ACTIONS.CLOSE' | translate }}" (click)="phoneEditState = false"
mat-icon-button [disabled]="(canWrite$ | async) == false">
<mat-icon class="icon">close</mat-icon>
</button>
<button *ngIf="user.human?.phone" color="warn" (click)="deletePhone()"
[disabled]="(canWrite$ | async) == false" mat-icon-button
matTooltip="{{ 'ACTIONS.CLEAR' | translate }}">
<i class="las la-trash"></i>
</button>
<button *ngIf="user.human" [disabled]="!user.human.phone || (canWrite$ | async) == false"
type="button" color="primary" (click)="savePhone()"
matTooltip="{{ 'ACTIONS.SAVE' | translate }}" mat-raised-button>
{{ 'ACTIONS.SAVE' | translate }}</button>
</ng-template>
</div>
</div>
<app-contact disablePhoneCode="true"
[canWrite]="(['user.write:' + user?.id, 'user.write'] | hasRole | async)" *ngIf="user?.human"
[human]="user.human" (savedPhone)="savePhone($event)" (savedEmail)="saveEmail($event)"
(deletedPhone)="deletePhone()" (resendEmailVerification)="resendEmailVerification()"
(resendPhoneVerification)="resendPhoneVerification()">
<button phoneAction [disabled]="(canWrite$ | async) == false" (click)="sendSetPasswordNotification()"
mat-stroked-button color="primary"
*ngIf="user.state === UserState.USERSTATE_INITIAL">{{ 'USER.PASSWORD.RESENDNOTIFICATION' | translate }}</button>
</app-contact>
</app-card>
<app-user-mfa *ngIf="user && user.human" [user]="user"></app-user-mfa>
<app-card *ngIf="user?.id" title="{{ 'GRANTS.USER.TITLE' | translate }}"
description="{{'GRANTS.USER.DESCRIPTION' | translate }}">
<app-user-grants [userId]="user.id" [allowCreate]="['user.grant.write'] | hasRole | async"
<app-user-grants [userId]="user.id"
[allowWrite]="['user.grant.write$'+ 'user.grant.write:'+user?.id] | hasRole | async"
[displayedColumns]="['select', 'projectId', 'creationDate', 'changeDate', 'roleNamesList']"
[allowDelete]="['user.grant.delete'] | hasRole | async"></app-user-grants>
[allowDelete]="['user.grant.delete$', 'user.grant.delete'+ user?.id] | hasRole | async">
</app-user-grants>
</app-card>
</div>
<div *ngIf="user" class="side" metainfo>
<div class="details">
<div class="row" *ngIf="user?.preferredLoginName">
<span class="first">Preferred Loginname:</span>
<span class="first">{{'USER.PREFERRED_LOGINNAME' | translate}}</span>
<span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
</div>
</div>

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

@@ -23,69 +23,6 @@
}
}
.method-col {
display: flex;
flex-direction: column;
margin: -.5rem;
.method-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: .5rem;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
.label,
.name {
padding-right: 1rem;
}
.actions {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
}
.label {
font-size: .9rem;
color: #818a8a;
}
.icon {
margin: .5rem;
}
.verify {
text-decoration: none;
font-size: .8rem;
color: #8795a1;
border-radius: .5rem;
cursor: pointer;
word-wrap: none;
white-space: nowrap;
margin-right: 1rem;
&:hover {
color: white;
text-decoration: underline;
}
}
@media only screen and (max-width: 700px) {
flex-direction: column;
align-items: center;
.label,
.name {
padding-right: 0;
}
}
}
}
.img-phone-email {
width: 300px;
}

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

@@ -31,8 +31,6 @@ export class UserDetailComponent implements OnInit, OnDestroy {
public languages: string[] = ['de', 'en'];
private subscription: Subscription = new Subscription();
public emailEditState: boolean = false;
public phoneEditState: boolean = false;
public ChangeType: any = ChangeType;
public loading: boolean = false;
@@ -127,7 +125,7 @@ export class UserDetailComponent implements OnInit, OnDestroy {
}
}
public resendVerification(): void {
public resendEmailVerification(): void {
this.mgmtUserService.ResendEmailVerification(this.user.id).then(() => {
this.toast.showInfo('USER.TOAST.EMAILVERIFICATIONSENT', true);
}).catch(error => {
@@ -136,6 +134,7 @@ export class UserDetailComponent implements OnInit, OnDestroy {
}
public resendPhoneVerification(): void {
console.log('resend phone ver', this.user.id);
this.mgmtUserService.ResendPhoneVerification(this.user.id).then(() => {
this.toast.showInfo('USER.TOAST.PHONEVERIFICATIONSENT', true);
}).catch(error => {
@@ -149,37 +148,32 @@ export class UserDetailComponent implements OnInit, OnDestroy {
if (this.user.human) {
this.user.human.phone = '';
}
this.phoneEditState = false;
}).catch(error => {
this.toast.showError(error);
});
}
public saveEmail(): void {
this.emailEditState = false;
if (this.user && this.user.human?.email) {
this.mgmtUserService
.SaveUserEmail(this.user.id, this.user.human.email).then((data: UserEmail) => {
this.toast.showInfo('USER.TOAST.EMAILSENT', true);
if (this.user.human) {
this.user.human.email = data.toObject().email;
}
}).catch(error => {
this.toast.showError(error);
});
public saveEmail(email: string): void {
if (this.user.id && email) {
this.mgmtUserService.SaveUserEmail(this.user.id, email).then((data: UserEmail) => {
this.toast.showInfo('USER.TOAST.EMAILSENT', true);
if (this.user.human) {
this.user.human.email = data.toObject().email;
}
}).catch(error => {
this.toast.showError(error);
});
}
}
public savePhone(): void {
this.phoneEditState = false;
if (this.user && this.user.human?.phone) {
public savePhone(phone: string): void {
if (this.user.id && phone) {
this.mgmtUserService
.SaveUserPhone(this.user.id, this.user.human.phone).then((data: UserPhone) => {
.SaveUserPhone(this.user.id, phone).then((data: UserPhone) => {
this.toast.showInfo('USER.TOAST.PHONESAVED', true);
if (this.user.human) {
this.user.human.phone = data.toObject().phone;
}
this.phoneEditState = false;
}).catch(error => {
this.toast.showError(error);
});

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

@@ -3,6 +3,6 @@ h1 {
}
.sub {
color: #8795a1;
color: var(--grey);
margin-bottom: 2rem;
}

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

@@ -1,13 +1,13 @@
<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
[timestamp]="userResult?.viewTimestamp" [selection]="selection"
[emitRefreshOnPreviousRoute]="refreshOnPreviousRoute">
<ng-template appHasRole [appHasRole]="['user.write']" actions>
<mat-form-field @appearfade *ngIf="userSearchKey != undefined" actions class="filtername">
<mat-label>{{'USER.PAGES.FILTER' | translate}}</mat-label>
<input matInput (keyup)="applyFilter($event)"
[placeholder]="('USER.TABLE.FILTER.' + userSearchKey.toString()) | translate" #input>
</mat-form-field>
<mat-form-field @appearfade *ngIf="userSearchKey != undefined" actions class="filtername">
<mat-label>{{'USER.PAGES.FILTER' | translate}}</mat-label>
<input matInput (keyup)="applyFilter($event)"
[placeholder]="('USER.TABLE.FILTER.' + userSearchKey.toString()) | translate" #input>
</mat-form-field>
<ng-template appHasRole [appHasRole]="['user.write']" actions>
<button (click)="deactivateSelectedUsers()" matTooltip="{{'USER.TABLE.DEACTIVATE' | translate}}"
class="icon-button" mat-icon-button *ngIf="selection.hasValue()" [disabled]="disabled">
<mat-icon svgIcon="mdi_account_cancel"></mat-icon>
@@ -25,18 +25,24 @@
<div class="table-wrapper">
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<th mat-header-cell *matHeaderCellDef class="selection">
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let user">
<td mat-cell *matCellDef="let user" class="selection">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(user) : null" [checked]="selection.isSelected(user)">
<app-avatar *ngIf="user[userType] && user[userType].displayName" class="avatar"
[name]="user[userType].displayName" [size]="32">
<app-avatar
*ngIf="user[userType] && user[userType].displayName && user[userType]?.firstName && user[userType]?.lastName; else cog"
class="avatar" [name]="user[userType].displayName" [size]="32">
</app-avatar>
<ng-template #cog>
<div class="sa-icon">
<i class="las la-user-cog"></i>
</div>
</ng-template>
</mat-checkbox>
</td>
</ng-container>

18
console/src/app/pages/users/user-list/user-table/user-table.component.scss
View File

@@ -1,4 +1,3 @@
.table-wrapper {
overflow: auto;
@@ -8,7 +7,7 @@
td,
th {
padding: 0 1rem;
padding: .5rem;
&:first-child {
padding-left: 0;
@@ -19,6 +18,11 @@
padding-right: 0;
}
}
.selection {
width: 50px;
max-width: 50px;
}
}
}
@@ -52,3 +56,13 @@ th {
.filtername {
margin: 0 1rem;
}
.sa-icon {
display: block;
width: 32px;
margin: 0 .5rem;
i {
margin: auto;
}
}

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

@@ -1,6 +1,7 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatInput } from '@angular/material/input';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { TranslateService } from '@ngx-translate/core';
@@ -29,6 +30,7 @@ export class UserTableComponent implements OnInit {
@Input() refreshOnPreviousRoute: string = '';
@Input() disabled: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild('input') public filter!: MatInput;
public dataSource: MatTableDataSource<UserView.AsObject> = new MatTableDataSource<UserView.AsObject>();
public selection: SelectionModel<UserView.AsObject> = new SelectionModel<UserView.AsObject>(true, []);
public userResult!: UserSearchResponse.AsObject;
@@ -38,6 +40,7 @@ export class UserTableComponent implements OnInit {
@Output() public changedSelection: EventEmitter<Array<UserView.AsObject>> = new EventEmitter();
UserSearchKey: any = UserSearchKey;
constructor(
public translate: TranslateService,
private userService: ManagementService,
@@ -119,6 +122,7 @@ export class UserTableComponent implements OnInit {
public applyFilter(event: Event): void {
const filterValue = (event.target as HTMLInputElement).value;
this.getData(
this.paginator.pageSize,
this.paginator.pageIndex * this.paginator.pageSize,
@@ -128,6 +132,12 @@ export class UserTableComponent implements OnInit {
}
public setFilter(key: UserSearchKey): void {
setTimeout(() => {
if (this.filter) {
(this.filter as any).nativeElement.focus();
}
}, 100);
if (this.userSearchKey !== key) {
this.userSearchKey = key;
} else {