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

feat(console): org managers, refactor, bugfixes (#226)

Browse Source 
* resourceowner header, i18n

* password policy validators, roles required field

* use angular pattern instead of custom validator

* user detail fixes, mfa qr code, add org

* use mgmt for mfa list

* fetch owned projects

* search project

* seperate owned from granted projects

* lint

* fix granted project grid

* refactor project detail

* disable zitadel apps

* refactor project contributors

* changed i18n

* hide meta nav

* mobile meta layout

* refactor contributor name

* refactor org contributors

* org i18n, org member detail view
This commit is contained in:
Max Peintner
2020-06-16 14:52:07 +02:00
committed by GitHub
parent 7a6ca24625
commit f2cdae9ea3
95 changed files with 5019 additions and 3413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import { animate, group, query, style, transition, trigger } from '@angular/animations';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { BreakpointObserver } from '@angular/cdk/layout';
import { OverlayContainer } from '@angular/cdk/overlay';
import { Component, HostBinding, OnDestroy, ViewChild } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
@@ -119,7 +119,7 @@ export class AppComponent implements OnDestroy {
@ViewChild('drawer')
public drawer!: MatDrawer;
public isHandset$: Observable<boolean> = this.breakpointObserver
.observe(Breakpoints.Handset)
.observe('(max-width: 599px)')
.pipe(map(result => {
return result.matches;
}));
@@ -190,11 +190,6 @@ export class AppComponent implements OnDestroy {
this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/radar.svg'),
);
this.matIconRegistry.addSvgIcon(
'mdi_account_circle_outline',
this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/account-circle-outline.svg'),
);
this.matIconRegistry.addSvgIcon(
'mdi_lock_question',
this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/lock-question.svg'),

3
console/src/app/modules/accounts-card/accounts-card.component.html
View File

@@ -8,7 +8,8 @@
<div class="l-accounts">
<mat-progress-bar *ngIf="loadingUsers" color="accent" mode="indeterminate"></mat-progress-bar>
<a class="row" *ngFor="let user of users" (click)="selectAccount(user.userName)">
<mat-icon class="small-avatar" svgIcon="mdi_account_circle_outline"></mat-icon>
<i class="small-avatar las la-user-circle"></i>
<div class="col">
<span class="title">{{user.userName}}</span>
<span class="email">{{'USER.STATE.'+user.authState | translate}}</span>

0
console/src/app/modules/add-member-dialog/project-member-create-dialog.component.html → console/src/app/modules/add-member-dialog/member-create-dialog.component.html
View File

0
console/src/app/modules/add-member-dialog/project-member-create-dialog.component.scss → console/src/app/modules/add-member-dialog/member-create-dialog.component.scss
View File

10
console/src/app/modules/add-member-dialog/project-member-create-dialog.component.spec.ts → console/src/app/modules/add-member-dialog/member-create-dialog.component.spec.ts
View File

@@ -1,21 +1,21 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProjectMemberCreateDialogComponent } from './project-member-create-dialog.component';
import { MemberCreateDialogComponent } from './member-create-dialog.component';
describe('AddMemberDialogComponent', () => {
let component: ProjectMemberCreateDialogComponent;
let fixture: ComponentFixture<ProjectMemberCreateDialogComponent>;
let component: MemberCreateDialogComponent;
let fixture: ComponentFixture<MemberCreateDialogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectMemberCreateDialogComponent],
declarations: [MemberCreateDialogComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectMemberCreateDialogComponent);
fixture = TestBed.createComponent(MemberCreateDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

10
console/src/app/modules/add-member-dialog/project-member-create-dialog.component.ts → console/src/app/modules/add-member-dialog/member-create-dialog.component.ts
View File

@@ -10,11 +10,11 @@ export enum CreationType {
ORG = 2,
}
@Component({
selector: 'app-project-member-create-dialog',
templateUrl: './project-member-create-dialog.component.html',
styleUrls: ['./project-member-create-dialog.component.scss'],
selector: 'app-member-create-dialog',
templateUrl: './member-create-dialog.component.html',
styleUrls: ['./member-create-dialog.component.scss'],
})
export class ProjectMemberCreateDialogComponent {
export class MemberCreateDialogComponent {
public projectId: string = '';
public creationType!: CreationType;
public users: Array<User.AsObject> = [];
@@ -23,7 +23,7 @@ export class ProjectMemberCreateDialogComponent {
public memberRoleOptions: string[] = [];
constructor(
private projectService: ProjectService,
public dialogRef: MatDialogRef<ProjectMemberCreateDialogComponent>,
public dialogRef: MatDialogRef<MemberCreateDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
toastService: ToastService,
) {

8
console/src/app/modules/add-member-dialog/project-member-create-dialog.module.ts → console/src/app/modules/add-member-dialog/member-create-dialog.module.ts
View File

@@ -12,10 +12,10 @@ import {
OrgMemberRolesAutocompleteModule,
} from '../../pages/orgs/org-member-roles-autocomplete/org-member-roles-autocomplete.module';
import { SearchRolesAutocompleteModule } from '../search-roles-autocomplete/search-roles-autocomplete.module';
import { ProjectMemberCreateDialogComponent } from './project-member-create-dialog.component';
import { MemberCreateDialogComponent } from './member-create-dialog.component';
@NgModule({
declarations: [ProjectMemberCreateDialogComponent],
declarations: [MemberCreateDialogComponent],
imports: [
CommonModule,
MatDialogModule,
@@ -29,7 +29,7 @@ import { ProjectMemberCreateDialogComponent } from './project-member-create-dial
OrgMemberRolesAutocompleteModule,
],
entryComponents: [
ProjectMemberCreateDialogComponent,
MemberCreateDialogComponent,
],
})
export class ProjectMemberCreateDialogModule { }
export class MemberCreateDialogModule { }

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

@@ -11,7 +11,7 @@
.item {
box-sizing: border-box;
height: 60px;
height: 50px;
padding: .5rem;
margin: .25rem 0;
border-radius: .5rem;
@@ -26,8 +26,7 @@
.desc {
overflow-x: auto;
font-size: .9rem;
margin: 4px 0;
font-size: 14px;
}
}

6
console/src/app/modules/meta-layout/meta-layout.component.html
View File

@@ -1,8 +1,10 @@
<div class="meta-wrapper">
<div class="main-content">
<div class="main-content" [ngClass]="{'hidden': (hidden)}">
<ng-content></ng-content>
</div>
<div class="meta">
<div class="meta" [ngClass]="{'hidden': hidden}">
<button (click)="hidden = !hidden" color="accent" class="hide" mat-icon-button><i
class="las la-arrow-right"></i></button>
<ng-content class="meta-content" select="metainfo"></ng-content>
</div>
</div>

69
console/src/app/modules/meta-layout/meta-layout.component.scss
View File

@@ -1,19 +1,27 @@
.meta-wrapper {
display: flex;
height: 100%;
height: 100%;
overflow-x: hidden;
transition: all .2s ease-in-out;
.main-content {
display: relative;
width: 100%;
overflow-y: auto;
&.hidden {
flex-basis: 100%;
}
}
.meta {
position: relative;
flex: 1 0 300px;
background: linear-gradient(to bottom right, #4072b410 20%,transparent 50%);
@media only screen and (min-width: 1500px) {
flex-basis: 400px;
}
// overflow-y: auto;
padding: 1rem;
.meta-content {
@@ -21,13 +29,58 @@
display: flex;
flex-direction: column;
}
&.hidden {
flex: 0 0 0 !important;
width: 0;
background: linear-gradient(to bottom right, #4072b450,transparent 50%);
.hide {
transform: rotate(180deg);
visibility: visible;
opacity: 1;
}
}
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
border-left: 2px solid #4072b4;
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#4072b4), to(#212224), color-stop(01, #212224)) 50 21;
border-image: -webkit-gradient(linear, left top, left bottom, from(#4072b4), to(#212224), color-stop(01, #212224)) 50 21;
}
.hide {
position: absolute;
left: -40px;
top: .5rem;
opacity: 0;
transition: all .3s ease-in-out;
i {
font-size: 1.5rem;
}
&:hover {
visibility: visible;
}
}
&:hover {
.hide {
opacity: 1;
}
}
}
@media only screen and (max-width: 700px) {
flex-direction: column;
.main-content, .meta {
overflow-y: visible;
}
}
// @media only screen and (max-width: 700px) {
// flex-direction: column;
// .main-content, .meta {
// overflow-y: visible;
// }
// }
}

15
console/src/app/modules/meta-layout/meta-layout.component.ts
View File

@@ -1,4 +1,7 @@
import { BreakpointObserver } from '@angular/cdk/layout';
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-meta-layout',
@@ -6,4 +9,16 @@ import { Component } from '@angular/core';
styleUrls: ['./meta-layout.component.scss'],
})
export class MetaLayoutComponent {
constructor(private breakpointObserver: BreakpointObserver) {
this.isSmallScreen$.subscribe(small => this.hidden = small);
}
public hidden: boolean = false;
public isSmallScreen$: Observable<boolean> = this.breakpointObserver
.observe('(max-width: 899px)')
.pipe(map(result => {
return result.matches;
}));
}

4
console/src/app/modules/meta-layout/meta-layout.module.ts
View File

@@ -1,5 +1,7 @@
import { LayoutModule } from '@angular/cdk/layout';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MetaLayoutComponent } from './meta-layout.component';
@@ -9,6 +11,8 @@ import { MetaLayoutComponent } from './meta-layout.component';
declarations: [MetaLayoutComponent],
imports: [
CommonModule,
MatButtonModule,
LayoutModule,
],
exports: [MetaLayoutComponent],
})

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

@@ -70,8 +70,6 @@
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

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

@@ -6,9 +6,10 @@ import { MatChipInputEvent } from '@angular/material/chips';
import { from } from 'rxjs';
import { debounceTime, switchMap, tap } from 'rxjs/operators';
import {
GrantedProjectSearchKey,
GrantedProjectSearchQuery,
Project,
ProjectGrantView,
ProjectSearchKey,
ProjectSearchQuery,
SearchMethod,
} from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
@@ -25,21 +26,22 @@ export class SearchProjectAutocompleteComponent {
public separatorKeysCodes: number[] = [ENTER, COMMA];
public myControl: FormControl = new FormControl();
public names: string[] = [];
public projects: Array<Project.AsObject> = [];
public filteredProjects: Array<Project.AsObject> = [];
public projects: Array<ProjectGrantView.AsObject> = [];
public filteredProjects: Array<ProjectGrantView.AsObject> = [];
public isLoading: boolean = false;
@ViewChild('nameInput') public nameInput!: ElementRef<HTMLInputElement>;
@ViewChild('auto') public matAutocomplete!: MatAutocomplete;
@Input() public singleOutput: boolean = false;
@Output() public selectionChanged: EventEmitter<Project.AsObject[] | Project.AsObject> = new EventEmitter();
@Output() public selectionChanged: EventEmitter<ProjectGrantView.AsObject[] | ProjectGrantView.AsObject>
= new EventEmitter();
constructor(private projectService: ProjectService) {
this.myControl.valueChanges
.pipe(
debounceTime(200),
tap(() => this.isLoading = true),
switchMap(value => {
const query = new GrantedProjectSearchQuery();
query.setKey(GrantedProjectSearchKey.PROJECTSEARCHKEY_PROJECT_NAME);
const query = new ProjectSearchQuery();
query.setKey(ProjectSearchKey.PROJECTSEARCHKEY_PROJECT_NAME);
query.setValue(value);
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS);
return from(this.projectService.SearchGrantedProjects(10, 0, [query]));
@@ -63,8 +65,8 @@ export class SearchProjectAutocompleteComponent {
if ((value || '').trim()) {
const index = this.filteredProjects.findIndex((project) => {
if (project.name) {
return project.name === value;
if (project.projectName) {
return project.projectName === value;
}
});
if (index > -1) {
@@ -82,7 +84,7 @@ export class SearchProjectAutocompleteComponent {
}
}
public remove(project: Project.AsObject): void {
public remove(project: ProjectGrantView.AsObject): void {
const index = this.projects.indexOf(project);
if (index >= 0) {

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

@@ -86,7 +86,7 @@
<mat-form-field class="full-width" appearance="outline">
<mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
<mat-chip-list #chipRedirectList>
<mat-chip-list #chipRedirectList [disabled]="isZitadel">
<mat-chip *ngFor="let redirect of redirectUrisList" [selectable]="selectable"
(removed)="remove(redirect, RedirectType.REDIRECT)">
{{redirect}}
@@ -100,7 +100,7 @@
<mat-form-field class="full-width" appearance="outline">
<mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
<mat-chip-list #chipPostRedirectList>
<mat-chip-list #chipPostRedirectList [disabled]="isZitadel">
<mat-chip *ngFor="let redirect of postLogoutRedirectUrisList" [selectable]="selectable"
(removed)="remove(redirect, RedirectType.POSTREDIRECT)">
{{redirect}}

19
console/src/app/pages/apps/app-detail/app-detail.component.ts
View File

@@ -17,6 +17,7 @@ import {
OIDCGrantType,
OIDCResponseType,
} from 'src/app/proto/generated/management_pb';
import { GrpcService } from 'src/app/services/grpc.service';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -72,6 +73,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public RedirectType: any = RedirectType;
public isZitadel: boolean = false;
constructor(
public translate: TranslateService,
private route: ActivatedRoute,
@@ -80,6 +83,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
private fb: FormBuilder,
private _location: Location,
private dialog: MatDialog,
private grpcService: GrpcService,
) {
this.appNameForm = this.fb.group({
state: ['', []],
@@ -104,16 +108,27 @@ export class AppDetailComponent implements OnInit, OnDestroy {
private async getData({ projectid, id }: Params): Promise<void> {
this.projectId = projectid;
this.projectService.GetProjectById(this.projectId).then(project => {
this.isZitadel = project.toObject().name === 'Zitadel';
if (this.isZitadel) {
this.appNameForm.disable();
this.appForm.disable();
}
});
this.projectService.GetApplicationById(projectid, id).then(app => {
this.app = app.toObject();
this.appNameForm.patchValue(this.app);
if (this.app.state !== AppState.APPSTATE_ACTIVE) {
console.log(this.grpcService.clientid, this.app.oidcConfig?.clientId);
console.log(this.isZitadel);
if (this.app.state !== AppState.APPSTATE_ACTIVE || this.isZitadel) {
this.appNameForm.controls['name'].disable();
this.appForm.disable();
} else {
this.appNameForm.controls['name'].enable();
this.appForm.enable();
this.clientId?.disable();
}
if (this.app.oidcConfig?.redirectUrisList) {
this.redirectUrisList = this.app.oidcConfig.redirectUrisList;

25
console/src/app/pages/orgs/org-contributors/org-contributors.component.html Normal file
View File

@@ -0,0 +1,25 @@
<div class="groups">
<span class="header">{{ 'PROJECT.MEMBER.TITLE' | translate }}</span>
<span class="sub-header">{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}</span>
<div class="people">
<div class="img-list">
<ng-container *ngIf="totalResult < 10; else compact">
<ng-container *ngFor="let member of membersSubject | async">
<div (click)="showDetail()" class="avatar-circle"
matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
<i class="avatar las la-user-circle"></i>
</div>
</ng-container>
</ng-container>
<ng-template #compact>
<div (click)="showDetail()" class="avatar-circle" matTooltip="Click to show detail">
<span>{{totalResult}}</span>
</div>
</ng-template>
<button class="add-img" (click)="openAddMember()" [disabled]="org?.state !== OrgState.ORGSTATE_ACTIVE"
mat-icon-button aria-label="Edit contributors">
<mat-icon>add</mat-icon>
</button>
</div>
</div>
</div>

0
console/src/app/pages/projects/project-contributors/project-contributors.component.scss → console/src/app/pages/orgs/org-contributors/org-contributors.component.scss
View File

34
console/src/app/pages/orgs/org-contributors/org-contributors.component.spec.ts Normal file
View File

@@ -0,0 +1,34 @@
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 { OrgContributorsComponent } from './org-contributors.component';
describe('OrgContributorsComponent', () => {
let component: OrgContributorsComponent;
let fixture: ComponentFixture<OrgContributorsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [OrgContributorsComponent],
imports: [
NoopAnimationsModule,
MatPaginatorModule,
MatSortModule,
MatTableModule,
],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(OrgContributorsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should compile', () => {
expect(component).toBeTruthy();
});
});

93
console/src/app/pages/orgs/org-contributors/org-contributors.component.ts Normal file
View File

@@ -0,0 +1,93 @@
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatTable } from '@angular/material/table';
import { Router } from '@angular/router';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { Org, OrgMember, OrgMemberView, OrgState, User } from 'src/app/proto/generated/management_pb';
import { OrgService } from 'src/app/services/org.service';
import { ToastService } from 'src/app/services/toast.service';
import {
CreationType,
MemberCreateDialogComponent,
} from '../../../modules/add-member-dialog/member-create-dialog.component';
@Component({
selector: 'app-org-contributors',
templateUrl: './org-contributors.component.html',
styleUrls: ['./org-contributors.component.scss'],
})
export class OrgContributorsComponent implements OnInit {
@Input() public org!: Org.AsObject;
@Input() public disabled: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<OrgMember.AsObject>;
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public totalResult: number = 0;
public membersSubject: BehaviorSubject<OrgMemberView.AsObject[]>
= new BehaviorSubject<OrgMemberView.AsObject[]>([]);
public OrgState: any = OrgState;
constructor(private orgService: OrgService, private dialog: MatDialog,
private toast: ToastService,
private router: Router) { }
public ngOnInit(): void {
this.loadMembers(0, 25, 'asc');
}
public loadMembers(pageIndex: number, pageSize: number, sortDirection?: string): void {
const offset = pageIndex * pageSize;
this.loadingSubject.next(true);
from(this.orgService.SearchMyOrgMembers(pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
return resp.toObject().resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
console.log(members);
this.membersSubject.next(members);
});
}
public openAddMember(): void {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
creationType: CreationType.ORG,
},
width: '400px',
});
dialogRef.afterClosed().subscribe(resp => {
if (resp) {
const users: User.AsObject[] = resp.users;
const roles: string[] = resp.roles;
if (users && users.length && roles && roles.length) {
Promise.all(users.map(user => {
return this.orgService.AddMyOrgMember(user.id, roles);
})).then(() => {
this.toast.showError('members added');
}).catch(error => {
this.toast.showError(error.message);
});
}
}
});
}
public showDetail(): void {
if (this.org?.state === OrgState.ORGSTATE_ACTIVE) {
this.router.navigate(['orgs', this.org.id, 'members']);
}
}
}

42
console/src/app/pages/orgs/org-contributors/org-contributors.module.ts Normal file
View File

@@ -0,0 +1,42 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { MemberCreateDialogModule } from '../../../modules/add-member-dialog/member-create-dialog.module';
import { OrgContributorsComponent } from './org-contributors.component';
@NgModule({
declarations: [OrgContributorsComponent],
imports: [
CommonModule,
FormsModule,
MemberCreateDialogModule,
HasRoleModule,
MatButtonModule,
MatDialogModule,
MatTableModule,
MatPaginatorModule,
MatIconModule,
RouterModule,
MatProgressSpinnerModule,
MatCheckboxModule,
MatTooltipModule,
TranslateModule,
],
exports: [
OrgContributorsComponent,
],
})
export class OrgContributorsModule { }

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

@@ -1,23 +1,13 @@
<app-meta-layout>
<div class="max-width-container">
<!-- {{ 'ORG_DETAIL.TITLE' | translate }} -->
<div class="enlarged-container">
<h1>{{org?.name}}</h1>
<p class="sub">{{'ORG_DETAIL.DESCRIPTION' | translate}}
</p>
<ng-template appHasRole [appHasRole]="['org.member.read']">
<h3>{{ 'ORG_DETAIL.MEMBER.TITLE' | translate }}</h3>
<app-org-members [orgId]="orgId"></app-org-members>
<ng-template appHasRole [appHasRole]="['policy.read']">
<app-policy-grid></app-policy-grid>
</ng-template>
</div>
<ng-template appHasRole [appHasRole]="['policy.read']">
<div class="enlarged-container">
<app-policy-grid></app-policy-grid>
</div>
</ng-template>
<metainfo class="side">
<div class="details">
<div class="row">
@@ -31,7 +21,14 @@
</div>
</div>
<p class="side-section">{{ 'CHANGES.ORG.TITLE' | translate }}</p>
<app-changes *ngIf="org" [changeType]="ChangeType.ORG" [id]="org.id"></app-changes>
<mat-tab-group mat-stretch-tabs class="tab-group" disablePagination="true">
<mat-tab label="Details">
<app-org-contributors *ngIf="org" [org]="org">
</app-org-contributors>
</mat-tab>
<mat-tab label="{{ 'CHANGES.ORG.TITLE' | translate }}" class="flex-col">
<app-changes *ngIf="org" [changeType]="ChangeType.ORG" [id]="org.id"></app-changes>
</mat-tab>
</mat-tab-group>
</metainfo>
</app-meta-layout>

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

@@ -44,5 +44,12 @@
</ng-template>
</mat-menu>
</div>
<ng-template appHasRole [appHasRole]="['iam.write']">
<div class="card add-org-button" [routerLink]="[ '/orgs/create' ]">
<mat-icon class="icon">add</mat-icon>
<span>Add new organization</span>
</div>
</ng-template>
</div>
</div>

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

@@ -53,7 +53,7 @@ h1 {
}
&.active {
border-color: #db4c69;
border: 2px solid #db4c69;
}
.selection-icon {
@@ -186,4 +186,40 @@ h1 {
}
}
}
.add-org-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: 0.5rem;
margin: 1rem;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
.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;
}
}
}
}
}

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

@@ -1,17 +1,17 @@
import { DataSource } from '@angular/cdk/collections';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { OrgMember } from 'src/app/proto/generated/management_pb';
import { ProjectMember, ProjectMemberSearchResponse } from 'src/app/proto/generated/management_pb';
import { OrgService } from 'src/app/services/org.service';
/**
* Data source for the OrgMembers view. This class should
* 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 OrgMembersDataSource extends DataSource<OrgMember.AsObject> {
export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject> {
public totalResult: number = 0;
public membersSubject: BehaviorSubject<OrgMember.AsObject[]> = new BehaviorSubject<OrgMember.AsObject[]>([]);
public membersSubject: BehaviorSubject<ProjectMember.AsObject[]> = new BehaviorSubject<ProjectMember.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -19,21 +19,27 @@ export class OrgMembersDataSource extends DataSource<OrgMember.AsObject> {
super();
}
public loadMembers(pageIndex: number, pageSize: number, sortDirection?: string): void {
public loadMembers(
pageIndex: number, pageSize: number, grantId?: string, sortDirection?: string): void {
const offset = pageIndex * pageSize;
this.loadingSubject.next(true);
from(this.orgService.SearchMyOrgMembers(pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
return resp.toObject().resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
console.log(members);
this.membersSubject.next(members);
});
// TODO
const promise: Promise<ProjectMemberSearchResponse> =
this.orgService.SearchMyOrgMembers(pageSize, offset);
if (promise) {
from(promise).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
console.log(this.totalResult);
return resp.toObject().resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
this.membersSubject.next(members);
});
}
}
@@ -42,7 +48,7 @@ export class OrgMembersDataSource extends DataSource<OrgMember.AsObject> {
* the returned stream emits new items.
* @returns A stream of the items to be rendered.
*/
public connect(): Observable<OrgMember.AsObject[]> {
public connect(): Observable<ProjectMember.AsObject[]> {
return this.membersSubject.asObservable();
}

18
console/src/app/pages/orgs/org-members/org-members-routing.module.ts Normal file
View File

@@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { OrgMembersComponent } from './org-members.component';
const routes: Routes = [
{
path: '',
component: OrgMembersComponent,
data: { animation: 'AddPage' },
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class OrgMembersRoutingModule { }

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

@@ -1,87 +1,105 @@
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource.membersSubject.value.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
<div class="max-width-container">
<div class="container">
<div class="left">
<a *ngIf="org" [routerLink]="[ '/orgs', org.id]" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
</div>
<div class="right">
<div class="head">
<h1>{{org?.name}} {{ 'ORG.MEMBER.TITLE' | translate }}</h1>
<p class="desc">{{ 'ORG.MEMBER.DESCRIPTION' | translate }}</p>
</div>
<div class="table-header-row" *ngIf="org">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.membersSubject.value.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['org.member.delete:'+org.id,'org.member.delete']">
<button (click)="removeProjectMemberSelection()"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
*ngIf="selection.hasValue()">
<mat-icon>remove_circle</mat-icon>
</button>
</ng-template>
<ng-template appHasRole [appHasRole]="['org.member.write:'+org.id,'org.member.write']">
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()"
color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="dataSource?.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table mat-table class="background-style full-width-table" aria-label="Elements"
[dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (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 (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" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
<span class="role app-label" *ngFor="let role of member.rolesList; index as i">
{{ 'ROLES.'+role | translate }}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="background-style" #paginator [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</div>
</div>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['org.member.delete']">
<button [disabled]="disabled" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button"
(click)="removeSelectedOrgMembers()" mat-icon-button *ngIf="selection.hasValue()">
<mat-icon>delete_outline</mat-icon>
</button>
</ng-template>
<ng-template appHasRole [appHasRole]="['org.member.write']">
<button [disabled]="disabled" color="primary" class="add-button" mat-raised-button (click)="openAddMember()">
<mat-icon>add</mat-icon>{{ 'ORG_DETAIL.MEMBER.ADD' | translate }}
</button>
</ng-template>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="dataSource.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table mat-table class="background-style full-width-table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (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 (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> {{ 'ORG_DETAIL.MEMBER.FIRSTNAME' | translate }} </th>
<td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'ORG_DETAIL.MEMBER.LASTNAME' | translate }} </th>
<td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'ORG_DETAIL.MEMBER.USERNAME' | translate }} </th>
<td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'ORG_DETAIL.MEMBER.EMAIL' | translate }} </th>
<td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'ORG_DETAIL.MEMBER.ROLES' | translate }} </th>
<td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
<span class="role app-label"
*ngFor="let role of member.rolesList; index as i">{{'ROLES.'+role | translate }}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator class="background-style" #paginator [length]="dataSource.totalResult" [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>

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

@@ -1,36 +1,74 @@
.container {
display: flex;
padding-bottom: 3rem;
h1 {
font-family: ailerons;
.left {
width: 100px;
display: flex;
padding: 1rem;
justify-content: center;
a {
margin-top: .2rem;
}
}
.right {
flex: 1;
padding-top: 1rem;
.head {
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
margin-bottom: 2rem;
flex-wrap: wrap;
a {
display: block;
}
h1 {
font-size: 1.2rem;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #81868a;
}
}
}
}
.table-header-row {
display: flex;
align-items: center;
display: flex;
align-items: center;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
}
.count {
font-size: 2rem;
}
}
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.fill-space {
flex: 1;
}
.icon-button {
margin-right: .5rem;
}
.icon-button {
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
}
.add-button {
border-radius: .5rem;
}
}
.table-wrapper {
@@ -41,12 +79,12 @@ h1 {
align-items: center;
justify-content: center;
}
table, mat-paginator {
width: 100%;
td, th {
padding: 0 1rem;
padding: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
@@ -57,8 +95,11 @@ h1 {
}
}
.action {
width: 40px;
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
@@ -79,4 +120,4 @@ h1 {
.pointer {
outline: none;
cursor: pointer;
}
}

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

@@ -4,15 +4,15 @@ import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { OrgMembersComponent } from './org-members.component';
import { ProjectMembersComponent } from './project-members.component';
describe('OrgMembersComponent', () => {
let component: OrgMembersComponent;
let fixture: ComponentFixture<OrgMembersComponent>;
describe('ProjectMembersComponent', () => {
let component: ProjectMembersComponent;
let fixture: ComponentFixture<ProjectMembersComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [OrgMembersComponent],
declarations: [ProjectMembersComponent],
imports: [
NoopAnimationsModule,
MatPaginatorModule,
@@ -23,7 +23,7 @@ describe('OrgMembersComponent', () => {
}));
beforeEach(() => {
fixture = TestBed.createComponent(OrgMembersComponent);
fixture = TestBed.createComponent(ProjectMembersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

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

@@ -1,44 +1,46 @@
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatTable } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { tap } from 'rxjs/operators';
import { OrgMember, User } from 'src/app/proto/generated/management_pb';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { User } from 'src/app/proto/generated/auth_pb';
import { Org, ProjectMember, ProjectType } from 'src/app/proto/generated/management_pb';
import { OrgService } from 'src/app/services/org.service';
import { ToastService } from 'src/app/services/toast.service';
import {
CreationType,
ProjectMemberCreateDialogComponent,
} from '../../../modules/add-member-dialog/project-member-create-dialog.component';
import { OrgMembersDataSource } from './org-members-datasource';
import { ProjectMembersDataSource } from './org-members-datasource';
@Component({
selector: 'app-org-members',
templateUrl: './org-members.component.html',
styleUrls: ['./org-members.component.scss'],
})
export class OrgMembersComponent implements AfterViewInit, OnInit {
@Input() public orgId: string = '';
@Input() public disabled: boolean = false;
export class OrgMembersComponent implements AfterViewInit {
public org!: Org.AsObject;
public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
public disabled: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<OrgMember.AsObject>;
@Output() public changedSelection: EventEmitter<Array<OrgMember.AsObject>> = new EventEmitter();
public dataSource!: OrgMembersDataSource;
public selection: SelectionModel<OrgMember.AsObject> = new SelectionModel<OrgMember.AsObject>(true, []);
@ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
public dataSource!: ProjectMembersDataSource;
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'];
constructor(private orgService: OrgService, private dialog: MatDialog, private toast: ToastService) { }
public ngOnInit(): void {
this.dataSource = new OrgMembersDataSource(this.orgService);
this.dataSource.loadMembers(0, 25, 'asc');
this.selection.changed.subscribe(change => {
console.log(change);
// this.changedSelection.emit(change)
constructor(private orgService: OrgService,
private dialog: MatDialog,
private toast: ToastService,
private route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.orgService.GetOrgById(params.orgid).then(org => {
this.org = org.toObject();
console.log(this.org);
this.dataSource = new ProjectMembersDataSource(this.orgService);
this.dataSource.loadMembers(0, 25, 'asc');
});
});
}
@@ -48,6 +50,7 @@ export class OrgMembersComponent implements AfterViewInit, OnInit {
tap(() => this.loadMembersPage()),
)
.subscribe();
}
private loadMembersPage(): void {
@@ -57,6 +60,24 @@ export class OrgMembersComponent implements AfterViewInit, OnInit {
);
}
public removeProjectMemberSelection(): void {
Promise.all(this.selection.selected.map(member => {
return this.orgService.RemoveMyOrgMember(member.userId).then(() => {
this.toast.showInfo('Removed successfully');
}).catch(error => {
this.toast.showError(error.message);
});
}));
}
public removeMember(member: ProjectMember.AsObject): void {
this.orgService.RemoveMyOrgMember(member.userId).then(() => {
this.toast.showInfo('Member removed successfully');
}).catch(error => {
this.toast.showError(error.message);
});
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.membersSubject.value.length;
@@ -66,11 +87,11 @@ export class OrgMembersComponent implements AfterViewInit, OnInit {
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.membersSubject.value.forEach((row: OrgMember.AsObject) => this.selection.select(row));
this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
}
public openAddMember(): void {
const dialogRef = this.dialog.open(ProjectMemberCreateDialogComponent, {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
creationType: CreationType.ORG,
},
@@ -94,14 +115,4 @@ export class OrgMembersComponent implements AfterViewInit, OnInit {
}
});
}
public removeSelectedOrgMembers(): void {
Promise.all(this.selection.selected.map(member => {
return this.orgService.RemoveMyOrgMember(member.userId).then(() => {
this.toast.showInfo('Removed successfully');
}).catch(error => {
this.toast.showError(error.message);
});
}));
}
}

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

@@ -1,42 +1,42 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
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 { MatDialogModule } from '@angular/material/dialog';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
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 { ProjectMemberCreateDialogModule } from '../../../modules/add-member-dialog/project-member-create-dialog.module';
import { OrgMembersRoutingModule } from './org-members-routing.module';
import { OrgMembersComponent } from './org-members.component';
@NgModule({
declarations: [OrgMembersComponent],
imports: [
OrgMembersRoutingModule,
CommonModule,
FormsModule,
ProjectMemberCreateDialogModule,
HasRoleModule,
MatAutocompleteModule,
MatChipsModule,
MatButtonModule,
MatDialogModule,
HasRoleModule,
MatCheckboxModule,
MatIconModule,
MatTableModule,
MatPaginatorModule,
MatIconModule,
RouterModule,
MatProgressSpinnerModule,
MatCheckboxModule,
MatSortModule,
MatTooltipModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
],
exports: [
OrgMembersComponent,
],
})
export class OrgMembersModule { }

4
console/src/app/pages/orgs/orgs-routing.module.ts
View File

@@ -32,6 +32,10 @@ const routes: Routes = [
},
loadChildren: () => import('./password-policy/password-policy.module').then(m => m.PasswordPolicyModule),
},
{
path: ':orgid/members',
loadChildren: () => import('./org-members/org-members.module').then(m => m.OrgMembersModule),
},
{
path: ':id',
component: OrgDetailComponent,

4
console/src/app/pages/orgs/orgs.module.ts
View File

@@ -17,9 +17,9 @@ import { CardModule } from 'src/app/modules/card/card.module';
import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
import { ChangesModule } from '../../modules/changes/changes.module';
import { OrgContributorsModule } from './org-contributors/org-contributors.module';
import { OrgDetailComponent } from './org-detail/org-detail.component';
import { OrgGridComponent } from './org-grid/org-grid.component';
import { OrgMembersModule } from './org-members/org-members.module';
import { OrgsRoutingModule } from './orgs-routing.module';
import { PolicyGridComponent } from './policy-grid/policy-grid.component';
@@ -28,7 +28,7 @@ import { PolicyGridComponent } from './policy-grid/policy-grid.component';
imports: [
CommonModule,
OrgsRoutingModule,
OrgMembersModule,
OrgContributorsModule,
FormsModule,
HasRoleModule,
MatFormFieldModule,

8
console/src/app/pages/project-role-create/project-role-create.component.html
View File

@@ -18,12 +18,8 @@
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'PROJECT.ROLE.KEY' | translate }}</mat-label>
<input matInput formControlName="key" />
<!-- <mat-error *ngIf="name?.errors?.required">{{'ERRORS.REQUIRED' | translate}}</mat-error> -->
</mat-form-field>
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'PROJECT.ROLE.NAME' | translate }}</mat-label>
<input matInput formControlName="name" />
<!-- <mat-error *ngIf="name?.errors?.required">{{'ERRORS.REQUIRED' | translate}}</mat-error> -->
<mat-error *ngIf="formGroup.get('key')?.errors?.required">{{'ERRORS.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</mat-label>

5
console/src/app/pages/project-role-create/project-role-create.component.ts
View File

@@ -50,14 +50,13 @@ export class ProjectRoleCreateComponent implements OnInit, OnDestroy {
private fb: FormBuilder,
) {
this.formGroup = new FormGroup({
key: new FormControl(''),
name: new FormControl(''),
key: new FormControl('', [Validators.required]),
// name: new FormControl(''),
displayName: new FormControl(''),
group: new FormControl('', [Validators.required]),
});
this.formArray = new FormArray([this.formGroup]);
}
public addEntry(): void {

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

@@ -4,30 +4,17 @@
<a [routerLink]="[ '/projects' ]" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
<h1>{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.name}}</h1>
<h1>{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.projectName}}</h1>
<div class="full-width">
<p class="desc">{{ 'PROJECT.PAGES.DESCRIPTION' | translate }}</p>
</div>
</div>
<!-- <ng-template appHasRole [appHasRole]="['project.app.read:' + project?.id, 'project.app.read']">
<app-project-application-grid *ngIf="grid" [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
(changeView)="grid = false" [projectId]="projectId"></app-project-application-grid>
<app-card *ngIf="!grid" title="{{ 'PROJECT.APP.TITLE' | translate }}">
<card-actions class="card-actions">
<button mat-icon-button (click)="grid = true">
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</card-actions>
<app-project-applications [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
[projectId]="projectId"></app-project-applications>
</app-card>
</ng-template> -->
<app-card>
<app-project-grant-members *ngIf="project && project.id && project.grantId"
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE" [project]="project">
<app-project-grant-members *ngIf="project && project.projectId && project.id"
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE || (isZitadel$ | async)"
[project]="project">
</app-project-grant-members>
</app-card>
</div>

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

@@ -9,7 +9,7 @@ import { ChangeType } from 'src/app/modules/changes/changes.component';
import {
Application,
ApplicationSearchResponse,
GrantedProject,
ProjectGrantView,
ProjectMember,
ProjectMemberSearchResponse,
ProjectRole,
@@ -29,7 +29,7 @@ import { ToastService } from 'src/app/services/toast.service';
export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
public projectId: string = '';
public grantId: string = '';
public project!: GrantedProject.AsObject;
public project!: ProjectGrantView.AsObject;
public pageSizeRoles: number = 10;
public roleDataSource: MatTableDataSource<ProjectRole.AsObject> = new MatTableDataSource<ProjectRole.AsObject>();
@@ -82,7 +82,7 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
this.grantId = grantId;
if (this.projectId && this.grantId) {
this.projectService.GetGrantedProjectGrantByID(this.projectId, this.grantId).then(proj => {
this.projectService.GetGrantedProjectByID(this.projectId, this.grantId).then(proj => {
this.project = proj.toObject();
console.log(this.project);
this.isZitadel$ = from(this.projectService.SearchApplications(this.project.id, 100, 0).then(appsResp => {

58
console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.html Normal file
View File

@@ -0,0 +1,58 @@
<div class="view-toggle">
<div class="anim-list" @list *ngIf="selection.selected.length > 0">
<!-- <ng-template appHasRole [appHasRole]="['project.write']">
<button (click)="deactivateProjects(selection.selected)" @animate
matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="left-button" mat-icon-button>
<i class="las la-toggle-off"></i>
</button>
<button @animate (click)="reactivateProjects(selection.selected)" class="left-button"
matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" mat-icon-button>
<i class="las la-toggle-on"></i>
</button>
</ng-template> -->
</div>
<button [disabled]="selection.selected.length > 0" (click)="changedView.emit(true)" mat-icon-button>
<i class="show list view las la-th-list"></i>
</button>
</div>
<div class="container">
<mat-progress-bar *ngIf="loading" class="spinner" color="accent" mode="indeterminate"></mat-progress-bar>
<div class="item card" *ngFor="let item of items; index as i" (click)="selectItem(item, $event)"
[ngClass]="{ selected: selection.isSelected(item), inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}">
<mat-icon matTooltip="select item" (click)="selection.toggle(item)" class="selection-icon">
check_circle</mat-icon>
<div class="text-part">
<span *ngIf="item.changeDate" class="top">last modified on
{{
dateFromTimestamp(item.changeDate) | date: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="name" *ngIf="item.projectName">{{ item.projectName }}</span>
<span class="description" *ngIf="item.state">{{'PROJECT.STATE.'+item.state | translate}}</span>
<span class="description">{{'PROJECT.TYPE.TITLE' | translate}}:
{{'PROJECT.TYPE.'+ProjectType.PROJECTTYPE_GRANTED | translate}}</span>
<span *ngIf="item.changeDate" class="created">created on
{{
dateFromTimestamp(item.creationDate) | date: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="fill-space"></span>
<div class="icons">
<mat-icon class="icon">apps</mat-icon>
</div>
</div>
<button [matMenuTriggerFor]="editMenu" class="edit-button" mat-icon-button>
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #editMenu="matMenu">
<ng-template matMenuContent>
<button (click)="selectItem(item)" mat-menu-item>
{{'ACTIONS.VIEW' | translate}}
</button>
<button (click)="selection.toggle(item)" mat-menu-item>
{{'ACTIONS.INFO' | translate}}
</button>
</ng-template>
</mat-menu>
</div>
<p class="n-items" *ngIf="!loading && items.length === 0">{{'PROJECT.PAGES.NOITEMS' | translate}}</p>
</div>

219
console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.scss Normal file
View File

@@ -0,0 +1,219 @@
.view-toggle {
width: 100%;
display: flex;
justify-content: flex-end;
padding-bottom: .5rem;
border-bottom: 1px solid #2d2e30;
.anim-list {
display: flex;
justify-content: flex-end;
align-items: center;
}
button {
&.left-button {
margin-right: 1rem;
}
}
}
.spinner {
margin: 1rem;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
box-sizing: border-box;
h2 {
padding: 0 1rem;
flex-basis: 100%;
}
.item {
position: relative;
z-index: 100;
margin: 1rem;
flex-basis: 250px;
display: flex;
text-decoration: none;
cursor: pointer;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 1rem;
border-radius: 0.5rem;
box-sizing: border-box;
min-height: 166px;
&.inactive {
color: #81868a;
}
.selection-icon {
opacity: 0;
position: absolute;
top: -12px;
left: -12px;
user-select: none;
&:hover {
color: white;
}
}
img {
height: 50px;
width: 50px;
margin: 1rem;
}
.text-part {
flex: 1;
display: flex;
flex-direction: column;
min-height: 70px;
padding: 0.5rem 0;
.top {
font-size: 0.8rem;
margin-bottom: 0;
margin-top: .5rem;
color: #81868a;
}
.name {
margin-top: 1rem;
font-size: 1.2rem;
margin-bottom: 0.5rem;
font-family: 'Rubik', sans-serif;
}
.description {
font-size: 0.8rem;
}
.created {
font-size: 0.8rem;
color: #81868a;
}
.organization {
display: flex;
align-items: center;
margin-top: 1rem;
.org_avatar {
height: 25px;
width: 25px;
border-radius: 50%;
margin: 0;
margin-right: 1rem;
}
}
.fill-space {
flex: 1;
}
.icons {
margin-top: 1rem;
transition: all 0.3s;
opacity: 0;
.icon {
margin-right: 3px;
font-size: 1.3rem;
height: 1.4rem;
color: #81868a;
}
}
span {
margin: 2px 0;
}
}
.edit-button {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
margin-bottom: 0.25rem;
}
&:hover {
.selection-icon {
opacity: 1;
}
.text-part {
.icons {
opacity: 1;
}
}
}
&.selected {
.text-part {
.icons {
opacity: 1;
}
}
.selection-icon {
opacity: 1;
}
.icon {
opacity: 1;
}
}
}
.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: 0.5rem;
margin: 1rem;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
.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;
}
}
}
}
}
.n-items {
flex-basis: 100%;
padding: 0 1rem;
font-size: .8rem;
color: #81868a;
}

25
console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.spec.ts Normal file
View File

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

65
console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.ts Normal file
View File

@@ -0,0 +1,65 @@
import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Router } from '@angular/router';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { ProjectGrantView, ProjectState, ProjectType, ProjectView } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-granted-project-grid',
templateUrl: './granted-project-grid.component.html',
styleUrls: ['./granted-project-grid.component.scss'],
animations: [
trigger('list', [
transition(':enter', [
query('@animate',
stagger(100, animateChild()),
),
]),
]),
trigger('animate', [
transition(':enter', [
style({ opacity: 0, transform: 'translateY(-100%)' }),
animate('100ms', style({ opacity: 1, transform: 'translateY(0)' })),
]),
transition(':leave', [
style({ opacity: 1, transform: 'translateY(0)' }),
animate('100ms', style({ opacity: 0, transform: 'translateY(100%)' })),
]),
]),
],
})
export class GrantedProjectGridComponent {
@Input() items: Array<ProjectGrantView.AsObject> = [];
@Output() newClicked: EventEmitter<boolean> = new EventEmitter();
@Output() changedView: EventEmitter<boolean> = new EventEmitter();
@Input() loading: boolean = false;
public selection: SelectionModel<ProjectView.AsObject> = new SelectionModel<ProjectView.AsObject>(true, []);
public selectedIndex: number = -1;
public showNewProject: boolean = false;
public ProjectState: any = ProjectState;
public ProjectType: any = ProjectType;
constructor(private router: Router, private projectService: ProjectService, private toast: ToastService) { }
public selectItem(item: ProjectGrantView.AsObject, event?: any): void {
if (event && !event.target.classList.contains('mat-icon')) {
this.router.navigate(['projects', item.projectId, 'grant', `${item.id}`]);
} else if (!event) {
this.router.navigate(['projects', item.projectId, 'grant', `${item.id}`]);
}
}
public addItem(): void {
this.newClicked.emit(true);
}
public dateFromTimestamp(date: Timestamp.AsObject): any {
const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000);
return ts;
}
}

112
console/src/app/pages/projects/granted-project-list/granted-project-list.component.html Normal file
View File

@@ -0,0 +1,112 @@
<app-granted-project-grid *ngIf="grid" [loading]="loading$ | async" (changedView)="grid = false"
[items]="grantedProjectList" (newClicked)="addProject()">
</app-granted-project-grid>
<div *ngIf="!grid" class="view-toggle">
<button (click)="grid = true" mat-icon-button>
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</div>
<div *ngIf="!grid && grantedProjectList">
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.data?.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<div @list class="action-btns" *ngIf="selection.hasValue()">
<button @animate (click)="deactivateSelectedProjects()"
matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="icon-button" mat-icon-button>
<mat-icon svgIcon="mdi_light_off"></mat-icon>
</button>
<button @animate (click)="reactivateSelectedProjects()"
matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" class="icon-button" mat-icon-button>
<mat-icon svgIcon="mdi_light_on"></mat-icon>
</button>
</div>
<a class="add-button" [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="(loading$ | async) || (loading$ | async)">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table class="background-style" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (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 (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
<td mat-cell *matCellDef="let project"> {{project.name}} </td>
</ng-container>
<ng-container matColumnDef="orgName">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGNAME' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let project">
{{project.orgName}} </td>
</ng-container>
<ng-container matColumnDef="orgDomain">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGDOMAIN' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let project">
{{project?.orgDomain}} </td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
<td mat-cell *matCellDef="let project"><span
*ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span></td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.TYPE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span *ngIf="project.type !== undefined">{{'PROJECT.TYPE.'+project.type | translate}}</span>
</td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.creationDate">{{dateFromTimestamp(project.creationDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.changeDate">{{dateFromTimestamp(project.changeDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/projects', row.id]"></tr>
</table>
<mat-paginator class="background-style" [length]="totalResult" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"
(page)="changePage($event)"></mat-paginator>
</div>
</div>

98
console/src/app/pages/projects/granted-project-list/granted-project-list.component.scss Normal file
View File

@@ -0,0 +1,98 @@
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
mat-form-field {
flex: 1 1 33%;
margin: 0 .5rem;
}
}
.view-toggle {
width: 100%;
display: flex;
justify-content: flex-end;
button {
display: block;
border-radius: .5rem;
}
}
.table-header-row {
display: flex;
align-items: center;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.action-btns {
display: flex;
align-items: center;
}
.icon-button {
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
}
}
.table-wrapper {
overflow: auto;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
}
table, mat-paginator {
width: 100%;
background-color: #2d2e30;
td, th {
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
}
}
tr {
outline: none;
}

25
console/src/app/pages/projects/granted-project-list/granted-project-list.component.spec.ts Normal file
View File

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

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

@@ -3,18 +3,18 @@ import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute, Router } from '@angular/router';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { GrantedProject, Project } from 'src/app/proto/generated/management_pb';
import { ProjectGrantView } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-project-list',
templateUrl: './project-list.component.html',
styleUrls: ['./project-list.component.scss'],
selector: 'app-granted-project-list',
templateUrl: './granted-project-list.component.html',
styleUrls: ['./granted-project-list.component.scss'],
animations: [
trigger('list', [
transition(':enter', [
@@ -35,12 +35,15 @@ import { ToastService } from 'src/app/services/toast.service';
]),
],
})
export class ProjectListComponent implements OnInit, OnDestroy {
export class GrantedProjectListComponent implements OnInit, OnDestroy {
public totalResult: number = 0;
public dataSource: MatTableDataSource<GrantedProject.AsObject> = new MatTableDataSource<GrantedProject.AsObject>();
public projectList: GrantedProject.AsObject[] = [];
public dataSource: MatTableDataSource<ProjectGrantView.AsObject> =
new MatTableDataSource<ProjectGrantView.AsObject>();
public grantedProjectList: ProjectGrantView.AsObject[] = [];
public displayedColumns: string[] = ['select', 'name', 'orgName', 'orgDomain', 'type', 'state', 'creationDate', 'changeDate'];
public selection: SelectionModel<Project.AsObject> = new SelectionModel<Project.AsObject>(true, []);
public selection: SelectionModel<ProjectGrantView.AsObject> = new SelectionModel<ProjectGrantView.AsObject>(true, []);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -49,13 +52,12 @@ export class ProjectListComponent implements OnInit, OnDestroy {
constructor(private router: Router,
public translate: TranslateService,
private route: ActivatedRoute,
private projectService: ProjectService,
private toast: ToastService,
) { }
public ngOnInit(): void {
this.subscription = this.route.params.subscribe(() => this.getData(10, 0));
this.getData(10, 0);
}
public ngOnDestroy(): void {
@@ -83,14 +85,13 @@ export class ProjectListComponent implements OnInit, OnDestroy {
}
private async getData(limit: number, offset: number): Promise<void> {
console.log('getprojects');
this.loadingSubject.next(true);
this.projectService.SearchGrantedProjects(limit, offset).then(res => {
this.projectList = res.toObject().resultList;
this.grantedProjectList = res.toObject().resultList;
this.totalResult = res.toObject().totalResult;
this.dataSource.data = this.projectList;
this.dataSource.data = this.grantedProjectList;
this.loadingSubject.next(false);
console.log(this.projectList);
console.log(this.grantedProjectList);
}).catch(error => {
console.error(error);
this.toast.showError(error.message);

7
console/src/app/pages/projects/project-contributors/project-contributors.component.html → console/src/app/pages/projects/owned-project-contributors/owned-project-contributors.component.html
View File

@@ -5,15 +5,10 @@
<div class="img-list">
<ng-container *ngIf="totalResult < 10; else compact">
<ng-container *ngFor="let member of membersSubject | async">
<!-- <img (click)="showDetail()" *ngIf="member.imageURL; else render" class="avatar-img"
[src]="member.imageURL" matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}"
alt="editor avatar" />
<ng-template #render> -->
<div (click)="showDetail()" class="avatar-circle"
matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
<mat-icon>face</mat-icon>
<i class="avatar las la-user-circle"></i>
</div>
<!-- </ng-template> -->
</ng-container>
</ng-container>
<ng-template #compact>

72
console/src/app/pages/projects/owned-project-contributors/owned-project-contributors.component.scss Normal file
View File

@@ -0,0 +1,72 @@
.groups {
padding-top: 1rem;
.header {
display: block;
margin-bottom: 1rem;
font-weight: 400;
}
.sub-header {
font-size: .8rem;
color: #81868a;
}
.people {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1rem;
.owner {
margin-right: 1rem;
}
.img-list {
width: 100%;
margin-top: 0.5rem;
margin-left: 1rem;
display: flex;
align-items: center;
.avatar-img, .avatar-circle {
float: left;
margin: 0 8px 0 -15px;
height: 32px;
width: 32px;
border-radius: 50%;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.5);
}
.add-img {
float: left;
margin: 0 8px 0 -15px;
}
.avatar-img {
&:before {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
height: 32px;
width: 32px;
}
}
.avatar-circle {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background-color: indianred;
}
.margin-neg {
margin-left: -1rem;
}
}
}
}

10
console/src/app/pages/projects/project-contributors/project-contributors.component.spec.ts → console/src/app/pages/projects/owned-project-contributors/owned-project-contributors.component.spec.ts
View File

@@ -1,20 +1,20 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProjectContributorsComponent } from './project-contributors.component';
import { OwnedProjectContributorsComponent } from './owned-project-contributors.component';
describe('ProjectContributorsComponent', () => {
let component: ProjectContributorsComponent;
let fixture: ComponentFixture<ProjectContributorsComponent>;
let component: OwnedProjectContributorsComponent;
let fixture: ComponentFixture<OwnedProjectContributorsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectContributorsComponent],
declarations: [OwnedProjectContributorsComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectContributorsComponent);
fixture = TestBed.createComponent(OwnedProjectContributorsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

33
console/src/app/pages/projects/project-contributors/project-contributors.component.ts → console/src/app/pages/projects/owned-project-contributors/owned-project-contributors.component.ts
View File

@@ -5,27 +5,27 @@ import { BehaviorSubject, from, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { User } from 'src/app/proto/generated/auth_pb';
import {
GrantedProject,
ProjectMemberSearchResponse,
ProjectMemberView,
ProjectState,
ProjectType,
ProjectView,
} from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
import {
CreationType,
ProjectMemberCreateDialogComponent,
} from '../../../modules/add-member-dialog/project-member-create-dialog.component';
MemberCreateDialogComponent,
} from '../../../modules/add-member-dialog/member-create-dialog.component';
@Component({
selector: 'app-project-contributors',
templateUrl: './project-contributors.component.html',
styleUrls: ['./project-contributors.component.scss'],
selector: 'app-owned-project-contributors',
templateUrl: './owned-project-contributors.component.html',
styleUrls: ['./owned-project-contributors.component.scss'],
})
export class ProjectContributorsComponent implements OnInit {
@Input() public project!: GrantedProject.AsObject;
export class OwnedProjectContributorsComponent implements OnInit {
@Input() public project!: ProjectView.AsObject;
@Input() public projectType!: ProjectType;
@Input() public disabled: boolean = false;
@@ -45,9 +45,10 @@ export class ProjectContributorsComponent implements OnInit {
console.log('project grant members');
const promise: Promise<ProjectMemberSearchResponse> | undefined =
this.projectType === ProjectType.PROJECTTYPE_OWNED ?
this.projectService.SearchProjectMembers(this.project.id, 100, 0) :
this.projectService.SearchProjectMembers(this.project.projectId, 100, 0) :
this.projectType === ProjectType.PROJECTTYPE_GRANTED ?
this.projectService.SearchProjectGrantMembers(this.project.id, this.project.grantId, 100, 0) : undefined;
this.projectService.SearchProjectGrantMembers(this.project.projectId,
this.project.projectId, 100, 0) : undefined;
if (promise) {
from(promise).pipe(
map(resp => {
@@ -64,12 +65,10 @@ export class ProjectContributorsComponent implements OnInit {
}
public openAddMember(): void {
const dialogRef = this.dialog.open(ProjectMemberCreateDialogComponent, {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
creationType: this.project.type ===
ProjectType.PROJECTTYPE_GRANTED ? CreationType.PROJECT_GRANTED :
ProjectType.PROJECTTYPE_OWNED ? CreationType.PROJECT_OWNED : undefined,
projectId: this.project.id,
creationType: CreationType.PROJECT_OWNED,
projectId: this.project.projectId,
},
width: '400px',
});
@@ -81,7 +80,7 @@ export class ProjectContributorsComponent implements OnInit {
if (users && users.length && roles && roles.length) {
Promise.all(users.map(user => {
return this.projectService.AddProjectMember(this.project.id, user.id, roles);
return this.projectService.AddProjectMember(this.project.projectId, user.id, roles);
})).then(() => {
this.toast.showError('members added');
}).catch(error => {
@@ -94,7 +93,7 @@ export class ProjectContributorsComponent implements OnInit {
public showDetail(): void {
if (this.project?.state === ProjectState.PROJECTSTATE_ACTIVE) {
this.router.navigate(['projects', this.project.id, 'members']);
this.router.navigate(['projects', this.project.projectId, 'members']);
}
}
}

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

@@ -6,11 +6,11 @@
</a>
<h1>{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.name}}</h1>
<ng-template appHasRole [appHasRole]="['project.write:'+projectId, 'project.write']">
<!-- <button *ngIf="project?.type == ProjectType.PROJECTTYPE_OWNED" mat-icon-button
(click)="editstate = !editstate" aria-label="Edit project name">
<button mat-icon-button (click)="editstate = !editstate" aria-label="Edit project name"
*ngIf="(isZitadel$ | async) === false">
<mat-icon *ngIf="!editstate">edit</mat-icon>
<mat-icon *ngIf="editstate">close</mat-icon>
</button> -->
</button>
</ng-template>
<div class="full-width">
@@ -23,10 +23,10 @@
<button class="icon-button" *ngIf="editstate" mat-icon-button (click)="updateName()">
<mat-icon>check</mat-icon>
</button>
<button mat-stroked-button color="accent"
<button mat-stroked-button color="accent" [disabled]="(isZitadel$ | async)"
*ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="second"
(click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
<button mat-stroked-button color="accent"
<button mat-stroked-button color="accent" [disabled]="(isZitadel$ | async)"
*ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="second"
(click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
</ng-container>
@@ -38,15 +38,16 @@
<ng-container *ngIf="project">
<ng-template appHasRole [appHasRole]="['project.app.read:' + project.id, 'project.app.read']">
<app-project-application-grid *ngIf="grid"
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE" (changeView)="grid = false"
[projectId]="projectId"></app-project-application-grid>
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE || (isZitadel$ | async)"
(changeView)="grid = false" [projectId]="projectId"></app-project-application-grid>
<app-card *ngIf="!grid" title="{{ 'PROJECT.APP.TITLE' | translate }}">
<card-actions class="card-actions">
<button mat-icon-button (click)="grid = true">
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</card-actions>
<app-project-applications [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
<app-project-applications
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE || (isZitadel$ | async)"
[projectId]="projectId"></app-project-applications>
</app-card>
</ng-template>
@@ -87,10 +88,10 @@
<mat-tab-group mat-stretch-tabs class="tab-group" disablePagination="true">
<mat-tab label="Details">
<app-project-contributors *ngIf="project"
<app-owned-project-contributors *ngIf="project"
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
[projectType]="ProjectType.PROJECTTYPE_OWNED" [project]="project">
</app-project-contributors>
</app-owned-project-contributors>
</mat-tab>
<mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="flex-col">
<app-changes *ngIf="project" [changeType]="ChangeType.PROJECT" [id]="project.id"></app-changes>

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

26
console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.spec.ts Normal file
View File

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

12
console/src/app/pages/projects/project-detail/project-detail.component.ts → console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.ts
View File

@@ -9,7 +9,6 @@ import { ChangeType } from 'src/app/modules/changes/changes.component';
import {
Application,
ApplicationSearchResponse,
GrantedProject,
Project,
ProjectMember,
ProjectMemberSearchResponse,
@@ -23,14 +22,14 @@ import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-project-detail',
templateUrl: './project-detail.component.html',
styleUrls: ['./project-detail.component.scss'],
selector: 'app-owned-project-detail',
templateUrl: './owned-project-detail.component.html',
styleUrls: ['./owned-project-detail.component.scss'],
})
export class ProjectDetailComponent implements OnInit, OnDestroy {
export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
public projectId: string = '';
public project!: Project.AsObject | GrantedProject.AsObject;
public project!: Project.AsObject;
public pageSizeRoles: number = 10;
public roleDataSource: MatTableDataSource<ProjectRole.AsObject> = new MatTableDataSource<ProjectRole.AsObject>();
@@ -84,6 +83,7 @@ export class ProjectDetailComponent implements OnInit, OnDestroy {
if (this.projectId) {
this.projectService.GetProjectById(id).then(proj => {
this.project = proj.toObject();
console.log(this.project);
this.isZitadel$ = from(this.projectService.SearchApplications(this.project.id, 100, 0).then(appsResp => {
const ret = appsResp.toObject().resultList
.filter(app => app.oidcConfig?.clientId === this.grpcService.clientid).length > 0;

7
console/src/app/pages/projects/project-grid/project-grid.component.html → console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.html
View File

@@ -29,8 +29,8 @@
}}</span>
<span class="name" *ngIf="item.name">{{ item.name }}</span>
<span class="description" *ngIf="item.state">{{'PROJECT.STATE.'+item.state | translate}}</span>
<span class="description" *ngIf="item.type !== undefined">{{'PROJECT.TYPE.TITLE' | translate}}:
{{'PROJECT.TYPE.'+item.type | translate}}</span>
<span class="description">{{'PROJECT.TYPE.TITLE' | translate}}:
{{'PROJECT.TYPE.'+ProjectType.PROJECTTYPE_OWNED | translate}}</span>
<span *ngIf="item.changeDate" class="created">created on
{{
dateFromTimestamp(item.creationDate) | date: 'EEE dd. MMM, HH:mm'
@@ -55,6 +55,9 @@
</ng-template>
</mat-menu>
</div>
<p class="n-items" *ngIf="!loading && items.length === 0">{{'PROJECT.PAGES.NOITEMS' | translate}}</p>
<div class="add-project-button card" (click)="addItem()">
<mat-icon class="icon">add</mat-icon>
<span>Add new project</span>

12
console/src/app/pages/projects/project-grid/project-grid.component.scss → console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.scss
View File

@@ -27,6 +27,11 @@
margin: 0 -1rem;
box-sizing: border-box;
h2 {
padding: 0 1rem;
flex-basis: 100%;
}
.item {
position: relative;
z-index: 100;
@@ -204,4 +209,11 @@
}
}
}
}
.n-items {
padding: 0 1rem;
font-size: .8rem;
color: #81868a;
flex-basis: 100%;
}

25
console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.spec.ts Normal file
View File

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

37
console/src/app/pages/projects/project-grid/project-grid.component.ts → console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.ts
View File

@@ -3,14 +3,14 @@ import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Router } from '@angular/router';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { GrantedProject, Project, ProjectState } from 'src/app/proto/generated/management_pb';
import { ProjectState, ProjectType, ProjectView } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-project-grid',
templateUrl: './project-grid.component.html',
styleUrls: ['./project-grid.component.scss'],
selector: 'app-owned-project-grid',
templateUrl: './owned-project-grid.component.html',
styleUrls: ['./owned-project-grid.component.scss'],
animations: [
trigger('list', [
transition(':enter', [
@@ -31,33 +31,26 @@ import { ToastService } from 'src/app/services/toast.service';
]),
],
})
export class ProjectGridComponent {
@Input() items: Array<GrantedProject.AsObject> = [];
export class OwnedProjectGridComponent {
@Input() items: Array<ProjectView.AsObject> = [];
@Output() newClicked: EventEmitter<boolean> = new EventEmitter();
@Output() changedView: EventEmitter<boolean> = new EventEmitter();
@Input() loading: boolean = false;
public selection: SelectionModel<GrantedProject.AsObject> = new SelectionModel<GrantedProject.AsObject>(true, []);
public selection: SelectionModel<ProjectView.AsObject> = new SelectionModel<ProjectView.AsObject>(true, []);
public selectedIndex: number = -1;
public showNewProject: boolean = false;
public ProjectState: any = ProjectState;
public ProjectType: any = ProjectType;
constructor(private router: Router, private projectService: ProjectService, private toast: ToastService) { }
public selectItem(item: GrantedProject.AsObject, event?: any): void {
public selectItem(item: ProjectView.AsObject, event?: any): void {
if (event && !event.target.classList.contains('mat-icon')) {
if (item.grantId) {
this.router.navigate(['projects', item.id, 'grant', `${item.grantId}`]);
} else {
this.router.navigate(['/projects', item.id]);
}
this.router.navigate(['/projects', item.projectId]);
} else if (!event) {
if (item.grantId) {
this.router.navigate(['projects', item.id, 'grant', `${item.grantId}`]);
} else {
this.router.navigate(['/projects', item.id]);
}
this.router.navigate(['/projects', item.projectId]);
}
}
@@ -70,9 +63,9 @@ export class ProjectGridComponent {
return ts;
}
public reactivateProjects(selected: Project.AsObject[]): void {
public reactivateProjects(selected: ProjectView.AsObject[]): void {
Promise.all([selected.map(proj => {
return this.projectService.ReactivateProject(proj.id);
return this.projectService.ReactivateProject(proj.projectId);
})]).then(() => {
this.toast.showInfo('Successful reactivated all projects');
}).catch(error => {
@@ -80,9 +73,9 @@ export class ProjectGridComponent {
});
}
public deactivateProjects(selected: Project.AsObject[]): void {
public deactivateProjects(selected: ProjectView.AsObject[]): void {
Promise.all([selected.map(proj => {
return this.projectService.DeactivateProject(proj.id);
return this.projectService.DeactivateProject(proj.projectId);
})]).then(() => {
this.toast.showInfo('Successful deactivated all projects');
}).catch(error => {

111
console/src/app/pages/projects/owned-project-list/owned-project-list.component.html Normal file
View File

@@ -0,0 +1,111 @@
<app-owned-project-grid *ngIf="grid" [loading]="loading$ | async" (changedView)="grid = false"
[items]="ownedProjectList" (newClicked)="addProject()">
</app-owned-project-grid>
<div *ngIf="!grid" class="view-toggle">
<button (click)="grid = true" mat-icon-button>
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</div>
<div *ngIf="!grid && ownedProjectList">
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.data?.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<div @list class="action-btns" *ngIf="selection.hasValue()">
<button @animate (click)="deactivateSelectedProjects()"
matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="icon-button" mat-icon-button>
<mat-icon svgIcon="mdi_light_off"></mat-icon>
</button>
<button @animate (click)="reactivateSelectedProjects()"
matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" class="icon-button" mat-icon-button>
<mat-icon svgIcon="mdi_light_on"></mat-icon>
</button>
</div>
<a class="add-button" [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="(loading$ | async) || (loading$ | async)">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table class="background-style" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (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 (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
<td mat-cell *matCellDef="let project"> {{project.name}} </td>
</ng-container>
<ng-container matColumnDef="orgName">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGNAME' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let project">
{{project.orgName}} </td>
</ng-container>
<ng-container matColumnDef="orgDomain">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGDOMAIN' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let project">
{{project?.orgDomain}} </td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
<td mat-cell *matCellDef="let project"><span
*ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span></td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.TYPE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span *ngIf="project.type !== undefined">{{'PROJECT.TYPE.'+project.type | translate}}</span>
</td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.creationDate">{{dateFromTimestamp(project.creationDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.changeDate">{{dateFromTimestamp(project.changeDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/projects', row.id]"></tr>
</table>
<mat-paginator class="background-style" [length]="totalResult" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"
(page)="changePage($event)"></mat-paginator>
</div>
</div>

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

25
console/src/app/pages/projects/owned-project-list/owned-project-list.component.spec.ts Normal file
View File

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

135
console/src/app/pages/projects/owned-project-list/owned-project-list.component.ts Normal file
View File

@@ -0,0 +1,135 @@
import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { ProjectView } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-owned-project-list',
templateUrl: './owned-project-list.component.html',
styleUrls: ['./owned-project-list.component.scss'],
animations: [
trigger('list', [
transition(':enter', [
query('@animate',
stagger(80, animateChild()),
),
]),
]),
trigger('animate', [
transition(':enter', [
style({ opacity: 0, transform: 'translateY(-100%)' }),
animate('100ms', style({ opacity: 1, transform: 'translateY(0)' })),
]),
transition(':leave', [
style({ opacity: 1, transform: 'translateY(0)' }),
animate('100ms', style({ opacity: 0, transform: 'translateY(100%)' })),
]),
]),
],
})
export class OwnedProjectListComponent implements OnInit, OnDestroy {
public totalResult: number = 0;
public dataSource: MatTableDataSource<ProjectView.AsObject> =
new MatTableDataSource<ProjectView.AsObject>();
public ownedProjectList: ProjectView.AsObject[] = [];
public displayedColumns: string[] = ['select', 'name', 'orgName', 'orgDomain', 'type', 'state', 'creationDate', 'changeDate'];
public selection: SelectionModel<ProjectView.AsObject> = new SelectionModel<ProjectView.AsObject>(true, []);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public grid: boolean = true;
private subscription?: Subscription;
constructor(private router: Router,
public translate: TranslateService,
private projectService: ProjectService,
private toast: ToastService,
) { }
public ngOnInit(): void {
console.log('asdf');
this.getData(10, 0);
}
public ngOnDestroy(): void {
this.subscription?.unsubscribe();
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
public changePage(event: PageEvent): void {
this.getData(event.pageSize, event.pageIndex);
}
public addProject(): void {
this.router.navigate(['/projects', 'create']);
}
private async getData(limit: number, offset: number): Promise<void> {
console.log('getprojects');
this.loadingSubject.next(true);
this.projectService.SearchProjects(limit, offset).then(res => {
this.ownedProjectList = res.toObject().resultList;
this.totalResult = res.toObject().totalResult;
this.dataSource.data = this.ownedProjectList;
this.loadingSubject.next(false);
console.log(this.ownedProjectList);
}).catch(error => {
console.error(error);
this.toast.showError(error.message);
this.loadingSubject.next(false);
});
this.ownedProjectList = [];
}
public dateFromTimestamp(date: Timestamp.AsObject): any {
const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000);
return ts;
}
public reactivateSelectedProjects(): void {
const promises = this.selection.selected.map(project => {
this.projectService.ReactivateProject(project.projectId);
});
Promise.all(promises).then(() => {
this.toast.showInfo('Reactivated selected projects successfully');
}).catch(error => {
this.toast.showInfo(error.message);
});
}
public deactivateSelectedProjects(): void {
const promises = this.selection.selected.map(project => {
this.projectService.DeactivateProject(project.projectId);
});
Promise.all(promises).then(() => {
this.toast.showInfo('Deactivated selected projects Successfully');
}).catch(error => {
this.toast.showInfo(error.message);
});
}
}

25
console/src/app/pages/projects/project-detail/project-detail.component.spec.ts
View File

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

8
console/src/app/pages/projects/project-grant-members/project-grant-members.component.ts
View File

@@ -10,8 +10,8 @@ import { ToastService } from 'src/app/services/toast.service';
import {
CreationType,
ProjectMemberCreateDialogComponent,
} from '../../../modules/add-member-dialog/project-member-create-dialog.component';
MemberCreateDialogComponent,
} from '../../../modules/add-member-dialog/member-create-dialog.component';
import { ProjectGrantMembersDataSource } from './project-grant-members-datasource';
@Component({
@@ -23,7 +23,7 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
@Input() public projectId!: string;
@Input() public grantId!: string;
public disabled: boolean = false;
@Input() public disabled: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
public dataSource!: ProjectGrantMembersDataSource;
@@ -91,7 +91,7 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
}
public openAddMember(): void {
const dialogRef = this.dialog.open(ProjectMemberCreateDialogComponent, {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
creationType: CreationType.PROJECT_GRANTED,
projectId: this.projectId,

25
console/src/app/pages/projects/project-grid/project-grid.component.spec.ts
View File

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

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

@@ -1,116 +0,0 @@
<div class="max-width-container">
<h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
<p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
<app-project-grid *ngIf="grid && projectList" [loading]="loading$ | async" (changedView)="grid = false"
[items]="projectList" (newClicked)="addProject()">
</app-project-grid>
<div *ngIf="!grid" class="view-toggle">
<button (click)="grid = true" mat-icon-button>
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</div>
<div *ngIf="!grid && projectList">
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.data?.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<div @list class="action-btns" *ngIf="selection.hasValue()">
<button @animate (click)="deactivateSelectedProjects()"
matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="icon-button" mat-icon-button>
<mat-icon svgIcon="mdi_light_off"></mat-icon>
</button>
<button @animate (click)="reactivateSelectedProjects()"
matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" class="icon-button" mat-icon-button>
<mat-icon svgIcon="mdi_light_on"></mat-icon>
</button>
</div>
<a class="add-button" [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table class="background-style" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (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 (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
<td mat-cell *matCellDef="let project"> {{project.name}} </td>
</ng-container>
<ng-container matColumnDef="orgName">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGNAME' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let project">
{{project.orgName}} </td>
</ng-container>
<ng-container matColumnDef="orgDomain">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGDOMAIN' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let project">
{{project?.orgDomain}} </td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
<td mat-cell *matCellDef="let project"><span
*ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span></td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.TYPE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span *ngIf="project.type !== undefined">{{'PROJECT.TYPE.'+project.type | translate}}</span>
</td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.creationDate">{{dateFromTimestamp(project.creationDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.changeDate">{{dateFromTimestamp(project.changeDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/projects', row.id]"></tr>
</table>
<mat-paginator class="background-style" [length]="totalResult" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</div>
</div>
</div>

25
console/src/app/pages/projects/project-list/project-list.component.spec.ts
View File

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

8
console/src/app/pages/projects/projects-routing.module.ts
View File

@@ -2,13 +2,13 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
import { ProjectDetailComponent } from './project-detail/project-detail.component';
import { ProjectListComponent } from './project-list/project-list.component';
import { OwnedProjectDetailComponent } from './owned-project-detail/owned-project-detail.component';
import { ProjectsComponent } from './projects.component';
const routes: Routes = [
{
path: '',
component: ProjectListComponent,
component: ProjectsComponent,
data: { animation: 'HomePage' },
},
{
@@ -22,7 +22,7 @@ const routes: Routes = [
},
{
path: ':id',
component: ProjectDetailComponent,
component: OwnedProjectDetailComponent,
data: { animation: 'HomePage' },
},
{

11
console/src/app/pages/projects/projects.component.html Normal file
View File

@@ -0,0 +1,11 @@
<div class="max-width-container">
<h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
<p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
<h2>Owned Projects</h2>
<app-owned-project-list></app-owned-project-list>
<h2>Granted Projects</h2>
<app-granted-project-list>
</app-granted-project-list>
</div>

13
console/src/app/pages/projects/projects.component.scss Normal file
View File

@@ -0,0 +1,13 @@
h1 {
font-family: ailerons;
margin-top: 0;
}
.sub {
color: #81868a;
margin-bottom: 2rem;
}
.max-width-container {
padding-bottom: 3rem;
}

25
console/src/app/pages/projects/projects.component.spec.ts Normal file
View File

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

29
console/src/app/pages/projects/projects.component.ts Normal file
View File

@@ -0,0 +1,29 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-projects',
templateUrl: './projects.component.html',
styleUrls: ['./projects.component.scss'],
})
export class ProjectsComponent implements OnInit, OnDestroy {
// public projectId: string = '';
// public grantId: string = '';
private sub: Subscription = new Subscription();
constructor(private route: ActivatedRoute,
) {
// this.route.params.subscribe((params) => {
// this.projectId = params.projectId;
// this.grantId = params.grantId;
// });
}
ngOnInit(): void {
}
public ngOnDestroy(): void {
// this.sub.unsubscribe();
}
}

34
console/src/app/pages/projects/projects.module.ts
View File

@@ -28,34 +28,42 @@ import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autoco
import { ChangesModule } from '../../modules/changes/changes.module';
import { ProjectRolesModule } from '../../modules/project-roles/project-roles.module';
import { OrgMembersModule } from '../orgs/org-members/org-members.module';
import { OrgContributorsModule } from '../orgs/org-contributors/org-contributors.module';
import { UserListModule } from '../user-list/user-list.module';
import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
import { GrantedProjectGridComponent } from './granted-project-grid/granted-project-grid.component';
import { GrantedProjectListComponent } from './granted-project-list/granted-project-list.component';
import { OwnedProjectContributorsComponent } from './owned-project-contributors/owned-project-contributors.component';
import { OwnedProjectDetailComponent } from './owned-project-detail/owned-project-detail.component';
import { OwnedProjectGridComponent } from './owned-project-grid/owned-project-grid.component';
import { OwnedProjectListComponent } from './owned-project-list/owned-project-list.component';
import { ProjectApplicationGridComponent } from './project-application-grid/project-application-grid.component';
import { ProjectApplicationsComponent } from './project-applications/project-applications.component';
import { ProjectContributorsComponent } from './project-contributors/project-contributors.component';
import { ProjectDetailComponent } from './project-detail/project-detail.component';
import {
ProjectGrantMembersCreateDialogComponent,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
import { ProjectGrantMembersComponent } from './project-grant-members/project-grant-members.component';
import { ProjectGrantsComponent } from './project-grants/project-grants.component';
import { ProjectGridComponent } from './project-grid/project-grid.component';
import { ProjectListComponent } from './project-list/project-list.component';
import { ProjectsRoutingModule } from './projects-routing.module';
import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
import { ProjectsComponent } from './projects.component';
@NgModule({
declarations: [
ProjectListComponent,
ProjectDetailComponent,
GrantedProjectListComponent,
GrantedProjectGridComponent,
GrantedProjectDetailComponent,
OwnedProjectListComponent,
OwnedProjectGridComponent,
OwnedProjectDetailComponent,
ProjectApplicationsComponent,
ProjectGridComponent,
ProjectApplicationGridComponent,
ProjectGrantsComponent,
ProjectGrantMembersComponent,
ProjectGrantMembersCreateDialogComponent,
ProjectContributorsComponent,
GrantedProjectDetailComponent,
OwnedProjectContributorsComponent,
ProjectsComponent,
],
imports: [
ProjectsRoutingModule,
@@ -87,7 +95,7 @@ import { GrantedProjectDetailComponent } from './granted-project-detail/granted-
CardModule,
MatTooltipModule,
MatSortModule,
OrgMembersModule,
OrgContributorsModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
@@ -99,7 +107,7 @@ import { GrantedProjectDetailComponent } from './granted-project-detail/granted-
entryComponents: [
ProjectGrantMembersCreateDialogComponent,
],
exports: [ProjectListComponent],
exports: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
})
export class ProjectsModule { }

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

@@ -148,7 +148,7 @@
</div>
</app-card>
<app-auth-user-mfa *ngIf="profile"></app-auth-user-mfa>
<app-auth-user-mfa *ngIf="profile" [profile]="profile"></app-auth-user-mfa>
<app-card title="{{ 'USER.ADDRESS.TITLE' | translate }}" *ngIf="address && profile">
<form [formGroup]="addressForm" (ngSubmit)="saveAddress()">

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

@@ -68,6 +68,7 @@ h1 {
justify-content: space-evenly;
padding: .5rem;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
.label, .name {
margin-right: 1rem;

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

@@ -11,7 +11,6 @@ import { ToastService } from 'src/app/services/toast.service';
import { CodeDialogComponent } from '../code-dialog/code-dialog.component';
function passwordConfirmValidator(c: AbstractControl): any {
if (!c.parent || !c) {
return;
@@ -68,13 +67,25 @@ export class AuthUserDetailComponent implements OnDestroy {
if (policy.minLength) {
validators.push(Validators.minLength(policy.minLength));
}
if (policy.hasLowercase) {
validators.push(Validators.pattern(/[a-z]/g));
}
if (policy.hasUppercase) {
validators.push(Validators.pattern(/[A-Z]/g));
}
if (policy.hasNumber) {
validators.push(Validators.pattern(/[0-9]/g));
}
if (policy.hasSymbol) {
// All characters that are not a digit or an English letter \W or a whitespace \S
validators.push(Validators.pattern(/[\W\S]/));
}
this.passwordForm = this.fb.group({
currentPassword: ['', []],
newPassword: ['', validators],
confirmPassword: ['', [...validators, passwordConfirmValidator]],
});
// TODO custom validator for pattern
}).catch(error => {
console.log('no password complexity policy defined!');
this.passwordForm = this.fb.group({
@@ -160,6 +171,7 @@ export class AuthUserDetailComponent implements OnDestroy {
data: {
number: this.phone.phone,
},
width: '400px',
});
dialogRef.afterClosed().subscribe(code => {

15
console/src/app/pages/user-detail/auth-user-mfa/auth-user-mfa.component.ts
View File

@@ -1,8 +1,10 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { BehaviorSubject, Observable } from 'rxjs';
import { MfaOtpResponse, MFAState, MfaType, MultiFactor } from 'src/app/proto/generated/auth_pb';
import { UserProfile } from 'src/app/proto/generated/management_pb';
import { AuthUserService } from 'src/app/services/auth-user.service';
import { MgmtUserService } from 'src/app/services/mgmt-user.service';
import { ToastService } from 'src/app/services/toast.service';
import { DialogOtpComponent } from '../dialog-otp/dialog-otp.component';
@@ -13,15 +15,18 @@ import { DialogOtpComponent } from '../dialog-otp/dialog-otp.component';
styleUrls: ['./auth-user-mfa.component.scss'],
})
export class AuthUserMfaComponent implements OnInit, OnDestroy {
@Input() private profile!: UserProfile.AsObject;
public mfaSubject: BehaviorSubject<MultiFactor.AsObject[]> = new BehaviorSubject<MultiFactor.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public MfaType: any = MfaType;
public MFAState: any = MFAState;
constructor(private userService: AuthUserService, private toast: ToastService, private dialog: MatDialog) { }
constructor(private userService: AuthUserService, private mgmtUserService: MgmtUserService,
private toast: ToastService, private dialog: MatDialog) { }
public ngOnInit(): void {
console.log(this.profile);
this.getOTP();
}
@@ -33,6 +38,7 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
public addOTP(): void {
this.userService.AddMfaOTP().then((otpresp) => {
const otp: MfaOtpResponse.AsObject = otpresp.toObject();
console.log(otp);
const dialogRef = this.dialog.open(DialogOtpComponent, {
data: otp.url,
width: '400px',
@@ -52,9 +58,12 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
}
public getOTP(): void {
this.userService.GetMyMfas().then(mfas => {
console.log('otp');
this.mgmtUserService.getUserMfas(this.profile.id).then(mfas => {
this.mfaSubject.next(mfas.toObject().mfasList);
console.log(mfas.toObject());
}).catch(error => {
console.error(error);
this.toast.showError(error.message);
});
}

2
console/src/app/pages/user-detail/code-dialog/code-dialog.component.scss
View File

@@ -1,5 +1,5 @@
.formfield {
width: 200px;
width: 100%;
}
.action {

2
console/src/app/pages/user-detail/dialog-otp/dialog-otp.component.html
View File

@@ -2,7 +2,7 @@
<div mat-dialog-content>
<p translate>{{'USER.MFA.OTP_DIALOG_DESCRIPTION' | translate}}</p>
<div class="qrcode-wrapper">
<qrcode *ngIf="data" class="qrcode" [qrdata]="data" [size]="150" [level]="'M'"></qrcode>
<qrcode *ngIf="data" class="qrcode" [qrdata]="data" [width]="150" [errorCorrectionLevel]="'M'"></qrcode>
</div>
<mat-form-field label="Access Code" required="true">

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

@@ -10,6 +10,7 @@ import { MatInputModule } from '@angular/material/input';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { QRCodeModule } from 'angularx-qrcode';
import { HttpLoaderFactory } from 'src/app/app.module';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { CardModule } from 'src/app/modules/card/card.module';
@@ -44,6 +45,7 @@ import { UserMfaComponent } from './user-mfa/user-mfa.component';
ReactiveFormsModule,
DetailFormModule,
MatDialogModule,
QRCodeModule,
MetaLayoutModule,
MatFormFieldModule,
UserGrantsModule,

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

@@ -146,6 +146,8 @@
</div>
</app-card>
<app-auth-user-mfa *ngIf="profile" [profile]="profile"></app-auth-user-mfa>
<app-card title="{{ 'USER.ADDRESS.TITLE' | translate }}" *ngIf="address">
<form [formGroup]="addressForm" (ngSubmit)="saveAddress()">
<div class="content">

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

@@ -71,6 +71,7 @@
justify-content: space-evenly;
padding: .5rem;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
.label, .name {
margin-right: 1rem;

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

@@ -83,6 +83,19 @@ export class UserDetailComponent implements OnInit, OnDestroy {
if (policy.minLength) {
validators.push(Validators.minLength(policy.minLength));
}
if (policy.hasLowercase) {
validators.push(Validators.pattern(/[a-z]/g));
}
if (policy.hasUppercase) {
validators.push(Validators.pattern(/[A-Z]/g));
}
if (policy.hasNumber) {
validators.push(Validators.pattern(/[0-9]/g));
}
if (policy.hasSymbol) {
// All characters that are not a digit or an English letter \W or a whitespace \S
validators.push(Validators.pattern(/[\W\S]/));
}
this.passwordForm = this.fb.group({
password: ['', validators],
@@ -160,18 +173,16 @@ export class UserDetailComponent implements OnInit, OnDestroy {
public resendVerification(): void {
console.log('resendverification');
this.mgmtUserService.ResendEmailVerification(this.profile.id).then((data: any) => {
this.mgmtUserService.ResendEmailVerification(this.profile.id).then(() => {
this.toast.showInfo('Email was successfully sent!');
this.email = data.toObject();
}).catch(data => {
this.toast.showError(data.message);
});
}
public resendPhoneVerification(): void {
this.mgmtUserService.ResendPhoneVerification(this.profile.id).then((data: any) => {
this.mgmtUserService.ResendPhoneVerification(this.profile.id).then(() => {
this.toast.showInfo('Phoneverification was successfully sent!');
this.email = data.toObject();
}).catch(data => {
this.toast.showError(data.message);
});

2831
console/src/app/proto/generated/management_grpc_web_pb.d.ts vendored
View File

File diff suppressed because it is too large Load Diff

168
console/src/app/proto/generated/management_grpc_web_pb.js
View File

@@ -4169,80 +4169,80 @@ proto.caos.zitadel.management.api.v1.ManagementServicePromiseClient.prototype.se
/**
* @const
* @type {!grpc.web.MethodDescriptor<
* !proto.caos.zitadel.management.api.v1.GrantedProjectSearchRequest,
* !proto.caos.zitadel.management.api.v1.GrantedProjectSearchResponse>}
* !proto.caos.zitadel.management.api.v1.ProjectSearchRequest,
* !proto.caos.zitadel.management.api.v1.ProjectSearchResponse>}
*/
const methodDescriptor_ManagementService_SearchGrantedProjects = new grpc.web.MethodDescriptor(
'/caos.zitadel.management.api.v1.ManagementService/SearchGrantedProjects',
const methodDescriptor_ManagementService_SearchProjects = new grpc.web.MethodDescriptor(
'/caos.zitadel.management.api.v1.ManagementService/SearchProjects',
grpc.web.MethodType.UNARY,
proto.caos.zitadel.management.api.v1.GrantedProjectSearchRequest,
proto.caos.zitadel.management.api.v1.GrantedProjectSearchResponse,
proto.caos.zitadel.management.api.v1.ProjectSearchRequest,
proto.caos.zitadel.management.api.v1.ProjectSearchResponse,
/**
* @param {!proto.caos.zitadel.management.api.v1.GrantedProjectSearchRequest} request
* @param {!proto.caos.zitadel.management.api.v1.ProjectSearchRequest} request
* @return {!Uint8Array}
*/
function(request) {
return request.serializeBinary();
},
proto.caos.zitadel.management.api.v1.GrantedProjectSearchResponse.deserializeBinary
proto.caos.zitadel.management.api.v1.ProjectSearchResponse.deserializeBinary
);
/**
* @const
* @type {!grpc.web.AbstractClientBase.MethodInfo<
* !proto.caos.zitadel.management.api.v1.GrantedProjectSearchRequest,
* !proto.caos.zitadel.management.api.v1.GrantedProjectSearchResponse>}
* !proto.caos.zitadel.management.api.v1.ProjectSearchRequest,
* !proto.caos.zitadel.management.api.v1.ProjectSearchResponse>}
*/
const methodInfo_ManagementService_SearchGrantedProjects = new grpc.web.AbstractClientBase.MethodInfo(
proto.caos.zitadel.management.api.v1.GrantedProjectSearchResponse,
const methodInfo_ManagementService_SearchProjects = new grpc.web.AbstractClientBase.MethodInfo(
proto.caos.zitadel.management.api.v1.ProjectSearchResponse,
/**
* @param {!proto.caos.zitadel.management.api.v1.GrantedProjectSearchRequest} request
* @param {!proto.caos.zitadel.management.api.v1.ProjectSearchRequest} request
* @return {!Uint8Array}
*/
function(request) {
return request.serializeBinary();
},
proto.caos.zitadel.management.api.v1.GrantedProjectSearchResponse.deserializeBinary
proto.caos.zitadel.management.api.v1.ProjectSearchResponse.deserializeBinary
);
/**
* @param {!proto.caos.zitadel.management.api.v1.GrantedProjectSearchRequest} request The
* @param {!proto.caos.zitadel.management.api.v1.ProjectSearchRequest} request The
* request proto
* @param {?Object<string, string>} metadata User defined
* call metadata
* @param {function(?grpc.web.Error, ?proto.caos.zitadel.management.api.v1.GrantedProjectSearchResponse)}
* @param {function(?grpc.web.Error, ?proto.caos.zitadel.management.api.v1.ProjectSearchResponse)}
* callback The callback function(error, response)
* @return {!grpc.web.ClientReadableStream<!proto.caos.zitadel.management.api.v1.GrantedProjectSearchResponse>|undefined}
* @return {!grpc.web.ClientReadableStream<!proto.caos.zitadel.management.api.v1.ProjectSearchResponse>|undefined}
* The XHR Node Readable Stream
*/
proto.caos.zitadel.management.api.v1.ManagementServiceClient.prototype.searchGrantedProjects =
proto.caos.zitadel.management.api.v1.ManagementServiceClient.prototype.searchProjects =
function(request, metadata, callback) {
return this.client_.rpcCall(this.hostname_ +
'/caos.zitadel.management.api.v1.ManagementService/SearchGrantedProjects',
'/caos.zitadel.management.api.v1.ManagementService/SearchProjects',
request,
metadata || {},
methodDescriptor_ManagementService_SearchGrantedProjects,
methodDescriptor_ManagementService_SearchProjects,
callback);
};
/**
* @param {!proto.caos.zitadel.management.api.v1.GrantedProjectSearchRequest} request The
* @param {!proto.caos.zitadel.management.api.v1.ProjectSearchRequest} request The
* request proto
* @param {?Object<string, string>} metadata User defined
* call metadata
* @return {!Promise<!proto.caos.zitadel.management.api.v1.GrantedProjectSearchResponse>}
* @return {!Promise<!proto.caos.zitadel.management.api.v1.ProjectSearchResponse>}
* A native promise that resolves to the response
*/
proto.caos.zitadel.management.api.v1.ManagementServicePromiseClient.prototype.searchGrantedProjects =
proto.caos.zitadel.management.api.v1.ManagementServicePromiseClient.prototype.searchProjects =
function(request, metadata) {
return this.client_.unaryCall(this.hostname_ +
'/caos.zitadel.management.api.v1.ManagementService/SearchGrantedProjects',
'/caos.zitadel.management.api.v1.ManagementService/SearchProjects',
request,
metadata || {},
methodDescriptor_ManagementService_SearchGrantedProjects);
methodDescriptor_ManagementService_SearchProjects);
};
@@ -4649,14 +4649,94 @@ proto.caos.zitadel.management.api.v1.ManagementServicePromiseClient.prototype.re
/**
* @const
* @type {!grpc.web.MethodDescriptor<
* !proto.caos.zitadel.management.api.v1.ProjectGrantID,
* !proto.caos.zitadel.management.api.v1.GrantedProject>}
* !proto.caos.zitadel.management.api.v1.GrantedProjectSearchRequest,
* !proto.caos.zitadel.management.api.v1.ProjectGrantSearchResponse>}
*/
const methodDescriptor_ManagementService_GetGrantedProjectGrantByID = new grpc.web.MethodDescriptor(
'/caos.zitadel.management.api.v1.ManagementService/GetGrantedProjectGrantByID',
const methodDescriptor_ManagementService_SearchGrantedProjects = new grpc.web.MethodDescriptor(
'/caos.zitadel.management.api.v1.ManagementService/SearchGrantedProjects',
grpc.web.MethodType.UNARY,
proto.caos.zitadel.management.api.v1.GrantedProjectSearchRequest,
proto.caos.zitadel.management.api.v1.ProjectGrantSearchResponse,
/**
* @param {!proto.caos.zitadel.management.api.v1.GrantedProjectSearchRequest} request
* @return {!Uint8Array}
*/
function(request) {
return request.serializeBinary();
},
proto.caos.zitadel.management.api.v1.ProjectGrantSearchResponse.deserializeBinary
);
/**
* @const
* @type {!grpc.web.AbstractClientBase.MethodInfo<
* !proto.caos.zitadel.management.api.v1.GrantedProjectSearchRequest,
* !proto.caos.zitadel.management.api.v1.ProjectGrantSearchResponse>}
*/
const methodInfo_ManagementService_SearchGrantedProjects = new grpc.web.AbstractClientBase.MethodInfo(
proto.caos.zitadel.management.api.v1.ProjectGrantSearchResponse,
/**
* @param {!proto.caos.zitadel.management.api.v1.GrantedProjectSearchRequest} request
* @return {!Uint8Array}
*/
function(request) {
return request.serializeBinary();
},
proto.caos.zitadel.management.api.v1.ProjectGrantSearchResponse.deserializeBinary
);
/**
* @param {!proto.caos.zitadel.management.api.v1.GrantedProjectSearchRequest} request The
* request proto
* @param {?Object<string, string>} metadata User defined
* call metadata
* @param {function(?grpc.web.Error, ?proto.caos.zitadel.management.api.v1.ProjectGrantSearchResponse)}
* callback The callback function(error, response)
* @return {!grpc.web.ClientReadableStream<!proto.caos.zitadel.management.api.v1.ProjectGrantSearchResponse>|undefined}
* The XHR Node Readable Stream
*/
proto.caos.zitadel.management.api.v1.ManagementServiceClient.prototype.searchGrantedProjects =
function(request, metadata, callback) {
return this.client_.rpcCall(this.hostname_ +
'/caos.zitadel.management.api.v1.ManagementService/SearchGrantedProjects',
request,
metadata || {},
methodDescriptor_ManagementService_SearchGrantedProjects,
callback);
};
/**
* @param {!proto.caos.zitadel.management.api.v1.GrantedProjectSearchRequest} request The
* request proto
* @param {?Object<string, string>} metadata User defined
* call metadata
* @return {!Promise<!proto.caos.zitadel.management.api.v1.ProjectGrantSearchResponse>}
* A native promise that resolves to the response
*/
proto.caos.zitadel.management.api.v1.ManagementServicePromiseClient.prototype.searchGrantedProjects =
function(request, metadata) {
return this.client_.unaryCall(this.hostname_ +
'/caos.zitadel.management.api.v1.ManagementService/SearchGrantedProjects',
request,
metadata || {},
methodDescriptor_ManagementService_SearchGrantedProjects);
};
/**
* @const
* @type {!grpc.web.MethodDescriptor<
* !proto.caos.zitadel.management.api.v1.ProjectGrantID,
* !proto.caos.zitadel.management.api.v1.ProjectGrantView>}
*/
const methodDescriptor_ManagementService_GetGrantedProjectByID = new grpc.web.MethodDescriptor(
'/caos.zitadel.management.api.v1.ManagementService/GetGrantedProjectByID',
grpc.web.MethodType.UNARY,
proto.caos.zitadel.management.api.v1.ProjectGrantID,
proto.caos.zitadel.management.api.v1.GrantedProject,
proto.caos.zitadel.management.api.v1.ProjectGrantView,
/**
* @param {!proto.caos.zitadel.management.api.v1.ProjectGrantID} request
* @return {!Uint8Array}
@@ -4664,7 +4744,7 @@ const methodDescriptor_ManagementService_GetGrantedProjectGrantByID = new grpc.w
function(request) {
return request.serializeBinary();
},
proto.caos.zitadel.management.api.v1.GrantedProject.deserializeBinary
proto.caos.zitadel.management.api.v1.ProjectGrantView.deserializeBinary
);
@@ -4672,10 +4752,10 @@ const methodDescriptor_ManagementService_GetGrantedProjectGrantByID = new grpc.w
* @const
* @type {!grpc.web.AbstractClientBase.MethodInfo<
* !proto.caos.zitadel.management.api.v1.ProjectGrantID,
* !proto.caos.zitadel.management.api.v1.GrantedProject>}
* !proto.caos.zitadel.management.api.v1.ProjectGrantView>}
*/
const methodInfo_ManagementService_GetGrantedProjectGrantByID = new grpc.web.AbstractClientBase.MethodInfo(
proto.caos.zitadel.management.api.v1.GrantedProject,
const methodInfo_ManagementService_GetGrantedProjectByID = new grpc.web.AbstractClientBase.MethodInfo(
proto.caos.zitadel.management.api.v1.ProjectGrantView,
/**
* @param {!proto.caos.zitadel.management.api.v1.ProjectGrantID} request
* @return {!Uint8Array}
@@ -4683,7 +4763,7 @@ const methodInfo_ManagementService_GetGrantedProjectGrantByID = new grpc.web.Abs
function(request) {
return request.serializeBinary();
},
proto.caos.zitadel.management.api.v1.GrantedProject.deserializeBinary
proto.caos.zitadel.management.api.v1.ProjectGrantView.deserializeBinary
);
@@ -4692,18 +4772,18 @@ const methodInfo_ManagementService_GetGrantedProjectGrantByID = new grpc.web.Abs
* request proto
* @param {?Object<string, string>} metadata User defined
* call metadata
* @param {function(?grpc.web.Error, ?proto.caos.zitadel.management.api.v1.GrantedProject)}
* @param {function(?grpc.web.Error, ?proto.caos.zitadel.management.api.v1.ProjectGrantView)}
* callback The callback function(error, response)
* @return {!grpc.web.ClientReadableStream<!proto.caos.zitadel.management.api.v1.GrantedProject>|undefined}
* @return {!grpc.web.ClientReadableStream<!proto.caos.zitadel.management.api.v1.ProjectGrantView>|undefined}
* The XHR Node Readable Stream
*/
proto.caos.zitadel.management.api.v1.ManagementServiceClient.prototype.getGrantedProjectGrantByID =
proto.caos.zitadel.management.api.v1.ManagementServiceClient.prototype.getGrantedProjectByID =
function(request, metadata, callback) {
return this.client_.rpcCall(this.hostname_ +
'/caos.zitadel.management.api.v1.ManagementService/GetGrantedProjectGrantByID',
'/caos.zitadel.management.api.v1.ManagementService/GetGrantedProjectByID',
request,
metadata || {},
methodDescriptor_ManagementService_GetGrantedProjectGrantByID,
methodDescriptor_ManagementService_GetGrantedProjectByID,
callback);
};
@@ -4713,16 +4793,16 @@ proto.caos.zitadel.management.api.v1.ManagementServiceClient.prototype.getGrante
* request proto
* @param {?Object<string, string>} metadata User defined
* call metadata
* @return {!Promise<!proto.caos.zitadel.management.api.v1.GrantedProject>}
* @return {!Promise<!proto.caos.zitadel.management.api.v1.ProjectGrantView>}
* A native promise that resolves to the response
*/
proto.caos.zitadel.management.api.v1.ManagementServicePromiseClient.prototype.getGrantedProjectGrantByID =
proto.caos.zitadel.management.api.v1.ManagementServicePromiseClient.prototype.getGrantedProjectByID =
function(request, metadata) {
return this.client_.unaryCall(this.hostname_ +
'/caos.zitadel.management.api.v1.ManagementService/GetGrantedProjectGrantByID',
'/caos.zitadel.management.api.v1.ManagementService/GetGrantedProjectByID',
request,
metadata || {},
methodDescriptor_ManagementService_GetGrantedProjectGrantByID);
methodDescriptor_ManagementService_GetGrantedProjectByID);
};

320
console/src/app/proto/generated/management_pb.d.ts vendored
View File

@@ -1877,6 +1877,138 @@ export namespace ProjectUpdateRequest {
}
}
export class ProjectSearchResponse extends jspb.Message {
getOffset(): number;
setOffset(value: number): void;
getLimit(): number;
setLimit(value: number): void;
getTotalResult(): number;
setTotalResult(value: number): void;
getResultList(): Array<ProjectView>;
setResultList(value: Array<ProjectView>): void;
clearResultList(): void;
addResult(value?: ProjectView, index?: number): ProjectView;
serializeBinary(): Uint8Array;
toObject(includeInstance?: boolean): ProjectSearchResponse.AsObject;
static toObject(includeInstance: boolean, msg: ProjectSearchResponse): ProjectSearchResponse.AsObject;
static serializeBinaryToWriter(message: ProjectSearchResponse, writer: jspb.BinaryWriter): void;
static deserializeBinary(bytes: Uint8Array): ProjectSearchResponse;
static deserializeBinaryFromReader(message: ProjectSearchResponse, reader: jspb.BinaryReader): ProjectSearchResponse;
}
export namespace ProjectSearchResponse {
export type AsObject = {
offset: number,
limit: number,
totalResult: number,
resultList: Array<ProjectView.AsObject>,
}
}
export class ProjectView extends jspb.Message {
getProjectId(): string;
setProjectId(value: string): void;
getName(): string;
setName(value: string): void;
getState(): ProjectState;
setState(value: ProjectState): void;
getChangeDate(): google_protobuf_timestamp_pb.Timestamp | undefined;
setChangeDate(value?: google_protobuf_timestamp_pb.Timestamp): void;
hasChangeDate(): boolean;
clearChangeDate(): void;
getCreationDate(): google_protobuf_timestamp_pb.Timestamp | undefined;
setCreationDate(value?: google_protobuf_timestamp_pb.Timestamp): void;
hasCreationDate(): boolean;
clearCreationDate(): void;
getResourceOwner(): string;
setResourceOwner(value: string): void;
getSequence(): number;
setSequence(value: number): void;
serializeBinary(): Uint8Array;
toObject(includeInstance?: boolean): ProjectView.AsObject;
static toObject(includeInstance: boolean, msg: ProjectView): ProjectView.AsObject;
static serializeBinaryToWriter(message: ProjectView, writer: jspb.BinaryWriter): void;
static deserializeBinary(bytes: Uint8Array): ProjectView;
static deserializeBinaryFromReader(message: ProjectView, reader: jspb.BinaryReader): ProjectView;
}
export namespace ProjectView {
export type AsObject = {
projectId: string,
name: string,
state: ProjectState,
changeDate?: google_protobuf_timestamp_pb.Timestamp.AsObject,
creationDate?: google_protobuf_timestamp_pb.Timestamp.AsObject,
resourceOwner: string,
sequence: number,
}
}
export class ProjectSearchRequest extends jspb.Message {
getOffset(): number;
setOffset(value: number): void;
getLimit(): number;
setLimit(value: number): void;
getQueriesList(): Array<ProjectSearchQuery>;
setQueriesList(value: Array<ProjectSearchQuery>): void;
clearQueriesList(): void;
addQueries(value?: ProjectSearchQuery, index?: number): ProjectSearchQuery;
serializeBinary(): Uint8Array;
toObject(includeInstance?: boolean): ProjectSearchRequest.AsObject;
static toObject(includeInstance: boolean, msg: ProjectSearchRequest): ProjectSearchRequest.AsObject;
static serializeBinaryToWriter(message: ProjectSearchRequest, writer: jspb.BinaryWriter): void;
static deserializeBinary(bytes: Uint8Array): ProjectSearchRequest;
static deserializeBinaryFromReader(message: ProjectSearchRequest, reader: jspb.BinaryReader): ProjectSearchRequest;
}
export namespace ProjectSearchRequest {
export type AsObject = {
offset: number,
limit: number,
queriesList: Array<ProjectSearchQuery.AsObject>,
}
}
export class ProjectSearchQuery extends jspb.Message {
getKey(): ProjectSearchKey;
setKey(value: ProjectSearchKey): void;
getMethod(): SearchMethod;
setMethod(value: SearchMethod): void;
getValue(): string;
setValue(value: string): void;
serializeBinary(): Uint8Array;
toObject(includeInstance?: boolean): ProjectSearchQuery.AsObject;
static toObject(includeInstance: boolean, msg: ProjectSearchQuery): ProjectSearchQuery.AsObject;
static serializeBinaryToWriter(message: ProjectSearchQuery, writer: jspb.BinaryWriter): void;
static deserializeBinary(bytes: Uint8Array): ProjectSearchQuery;
static deserializeBinaryFromReader(message: ProjectSearchQuery, reader: jspb.BinaryReader): ProjectSearchQuery;
}
export namespace ProjectSearchQuery {
export type AsObject = {
key: ProjectSearchKey,
method: SearchMethod,
value: string,
}
}
export class Projects extends jspb.Message {
getProjectsList(): Array<Project>;
setProjectsList(value: Array<Project>): void;
@@ -1939,158 +2071,6 @@ export namespace Project {
}
}
export class GrantedProjectSearchResponse extends jspb.Message {
getOffset(): number;
setOffset(value: number): void;
getLimit(): number;
setLimit(value: number): void;
getTotalResult(): number;
setTotalResult(value: number): void;
getResultList(): Array<GrantedProject>;
setResultList(value: Array<GrantedProject>): void;
clearResultList(): void;
addResult(value?: GrantedProject, index?: number): GrantedProject;
serializeBinary(): Uint8Array;
toObject(includeInstance?: boolean): GrantedProjectSearchResponse.AsObject;
static toObject(includeInstance: boolean, msg: GrantedProjectSearchResponse): GrantedProjectSearchResponse.AsObject;
static serializeBinaryToWriter(message: GrantedProjectSearchResponse, writer: jspb.BinaryWriter): void;
static deserializeBinary(bytes: Uint8Array): GrantedProjectSearchResponse;
static deserializeBinaryFromReader(message: GrantedProjectSearchResponse, reader: jspb.BinaryReader): GrantedProjectSearchResponse;
}
export namespace GrantedProjectSearchResponse {
export type AsObject = {
offset: number,
limit: number,
totalResult: number,
resultList: Array<GrantedProject.AsObject>,
}
}
export class GrantedProject extends jspb.Message {
getId(): string;
setId(value: string): void;
getName(): string;
setName(value: string): void;
getState(): ProjectState;
setState(value: ProjectState): void;
getChangeDate(): google_protobuf_timestamp_pb.Timestamp | undefined;
setChangeDate(value?: google_protobuf_timestamp_pb.Timestamp): void;
hasChangeDate(): boolean;
clearChangeDate(): void;
getCreationDate(): google_protobuf_timestamp_pb.Timestamp | undefined;
setCreationDate(value?: google_protobuf_timestamp_pb.Timestamp): void;
hasCreationDate(): boolean;
clearCreationDate(): void;
getType(): ProjectType;
setType(value: ProjectType): void;
getResourceOwner(): string;
setResourceOwner(value: string): void;
getOrgId(): string;
setOrgId(value: string): void;
getOrgName(): string;
setOrgName(value: string): void;
getOrgDomain(): string;
setOrgDomain(value: string): void;
getGrantId(): string;
setGrantId(value: string): void;
getSequence(): number;
setSequence(value: number): void;
serializeBinary(): Uint8Array;
toObject(includeInstance?: boolean): GrantedProject.AsObject;
static toObject(includeInstance: boolean, msg: GrantedProject): GrantedProject.AsObject;
static serializeBinaryToWriter(message: GrantedProject, writer: jspb.BinaryWriter): void;
static deserializeBinary(bytes: Uint8Array): GrantedProject;
static deserializeBinaryFromReader(message: GrantedProject, reader: jspb.BinaryReader): GrantedProject;
}
export namespace GrantedProject {
export type AsObject = {
id: string,
name: string,
state: ProjectState,
changeDate?: google_protobuf_timestamp_pb.Timestamp.AsObject,
creationDate?: google_protobuf_timestamp_pb.Timestamp.AsObject,
type: ProjectType,
resourceOwner: string,
orgId: string,
orgName: string,
orgDomain: string,
grantId: string,
sequence: number,
}
}
export class GrantedProjectSearchRequest extends jspb.Message {
getOffset(): number;
setOffset(value: number): void;
getLimit(): number;
setLimit(value: number): void;
getQueriesList(): Array<GrantedProjectSearchQuery>;
setQueriesList(value: Array<GrantedProjectSearchQuery>): void;
clearQueriesList(): void;
addQueries(value?: GrantedProjectSearchQuery, index?: number): GrantedProjectSearchQuery;
serializeBinary(): Uint8Array;
toObject(includeInstance?: boolean): GrantedProjectSearchRequest.AsObject;
static toObject(includeInstance: boolean, msg: GrantedProjectSearchRequest): GrantedProjectSearchRequest.AsObject;
static serializeBinaryToWriter(message: GrantedProjectSearchRequest, writer: jspb.BinaryWriter): void;
static deserializeBinary(bytes: Uint8Array): GrantedProjectSearchRequest;
static deserializeBinaryFromReader(message: GrantedProjectSearchRequest, reader: jspb.BinaryReader): GrantedProjectSearchRequest;
}
export namespace GrantedProjectSearchRequest {
export type AsObject = {
offset: number,
limit: number,
queriesList: Array<GrantedProjectSearchQuery.AsObject>,
}
}
export class GrantedProjectSearchQuery extends jspb.Message {
getKey(): GrantedProjectSearchKey;
setKey(value: GrantedProjectSearchKey): void;
getMethod(): SearchMethod;
setMethod(value: SearchMethod): void;
getValue(): string;
setValue(value: string): void;
serializeBinary(): Uint8Array;
toObject(includeInstance?: boolean): GrantedProjectSearchQuery.AsObject;
static toObject(includeInstance: boolean, msg: GrantedProjectSearchQuery): GrantedProjectSearchQuery.AsObject;
static serializeBinaryToWriter(message: GrantedProjectSearchQuery, writer: jspb.BinaryWriter): void;
static deserializeBinary(bytes: Uint8Array): GrantedProjectSearchQuery;
static deserializeBinaryFromReader(message: GrantedProjectSearchQuery, reader: jspb.BinaryReader): GrantedProjectSearchQuery;
}
export namespace GrantedProjectSearchQuery {
export type AsObject = {
key: GrantedProjectSearchKey,
method: SearchMethod,
value: string,
}
}
export class ProjectMemberRoles extends jspb.Message {
getRolesList(): Array<string>;
setRolesList(value: Array<string>): void;
@@ -3291,6 +3271,34 @@ export namespace ProjectGrantSearchRequest {
}
}
export class GrantedProjectSearchRequest extends jspb.Message {
getOffset(): number;
setOffset(value: number): void;
getLimit(): number;
setLimit(value: number): void;
getQueriesList(): Array<ProjectSearchQuery>;
setQueriesList(value: Array<ProjectSearchQuery>): void;
clearQueriesList(): void;
addQueries(value?: ProjectSearchQuery, index?: number): ProjectSearchQuery;
serializeBinary(): Uint8Array;
toObject(includeInstance?: boolean): GrantedProjectSearchRequest.AsObject;
static toObject(includeInstance: boolean, msg: GrantedProjectSearchRequest): GrantedProjectSearchRequest.AsObject;
static serializeBinaryToWriter(message: GrantedProjectSearchRequest, writer: jspb.BinaryWriter): void;
static deserializeBinary(bytes: Uint8Array): GrantedProjectSearchRequest;
static deserializeBinaryFromReader(message: GrantedProjectSearchRequest, reader: jspb.BinaryReader): GrantedProjectSearchRequest;
}
export namespace GrantedProjectSearchRequest {
export type AsObject = {
offset: number,
limit: number,
queriesList: Array<ProjectSearchQuery.AsObject>,
}
}
export class ProjectGrantMemberRoles extends jspb.Message {
getRolesList(): Array<string>;
setRolesList(value: Array<string>): void;
@@ -4307,6 +4315,10 @@ export enum OrgMemberSearchKey {
ORGMEMBERSEARCHKEY_EMAIL = 3,
ORGMEMBERSEARCHKEY_USER_ID = 4,
}
export enum ProjectSearchKey {
PROJECTSEARCHKEY_UNSPECIFIED = 0,
PROJECTSEARCHKEY_PROJECT_NAME = 1,
}
export enum ProjectState {
PROJECTSTATE_UNSPECIFIED = 0,
PROJECTSTATE_ACTIVE = 1,
@@ -4317,10 +4329,6 @@ export enum ProjectType {
PROJECTTYPE_OWNED = 1,
PROJECTTYPE_GRANTED = 2,
}
export enum GrantedProjectSearchKey {
PROJECTSEARCHKEY_UNSPECIFIED = 0,
PROJECTSEARCHKEY_PROJECT_NAME = 1,
}
export enum ProjectRoleSearchKey {
PROJECTROLESEARCHKEY_UNSPECIFIED = 0,
PROJECTROLESEARCHKEY_KEY = 1,

2455
console/src/app/proto/generated/management_pb.js
View File

File diff suppressed because it is too large Load Diff

8
console/src/app/services/auth-user.service.ts
View File

@@ -96,6 +96,7 @@ export class AuthUserService {
req.setDisplayName(profile.displayName);
req.setPreferredLanguage(profile.preferredLanguage);
req.setGender(profile.gender);
console.log(req.toObject());
return await this.request(
c => c.updateMyUserProfile,
req,
@@ -264,7 +265,12 @@ export class AuthUserService {
return this.GetMyzitadelPermissions().pipe(
switchMap(response => {
const userRoles = response.toObject().permissionsList;
let userRoles = [];
if (response.toObject().permissionsList) {
userRoles = response.toObject().permissionsList;
} else {
userRoles = ['user.resourceowner'];
}
this._roleCache = userRoles;
return of(this.hasRoles(userRoles, roles, each));
}),

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

@@ -7,6 +7,7 @@ import {
ChangeRequest,
Changes,
CreateUserRequest,
MultiFactors,
NotificationType,
PasswordRequest,
ProjectGrantMemberSearchQuery,
@@ -92,6 +93,16 @@ export class MgmtUserService {
);
}
public async getUserMfas(id: string): Promise<MultiFactors> {
const req = new UserID();
req.setId(id);
return await this.request(
c => c.getUserMfas,
req,
f => f,
);
}
public async SaveUserProfile(profile: UserProfile.AsObject): Promise<UserProfile> {
const req = new UpdateUserProfileRequest();
req.setId(profile.id);

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

@@ -10,10 +10,7 @@ import {
ApplicationSearchRequest,
ApplicationSearchResponse,
ApplicationUpdate,
GrantedProject,
GrantedProjectSearchQuery,
GrantedProjectSearchRequest,
GrantedProjectSearchResponse,
OIDCApplicationCreate,
OIDCConfig,
OIDCConfigUpdate,
@@ -30,6 +27,7 @@ import {
ProjectGrantSearchRequest,
ProjectGrantSearchResponse,
ProjectGrantUpdate,
ProjectGrantView,
ProjectID,
ProjectMemberAdd,
ProjectMemberChange,
@@ -42,6 +40,9 @@ import {
ProjectRoleSearchQuery,
ProjectRoleSearchRequest,
ProjectRoleSearchResponse,
ProjectSearchQuery,
ProjectSearchRequest,
ProjectSearchResponse,
ProjectUpdateRequest,
ProjectUserGrantSearchRequest,
UserGrant,
@@ -73,8 +74,23 @@ export class ProjectService {
return responseMapper(response);
}
public async SearchProjects(
limit: number, offset: number, queryList?: ProjectSearchQuery[]): Promise<ProjectSearchResponse> {
const req = new ProjectSearchRequest();
req.setLimit(limit);
req.setOffset(offset);
if (queryList) {
req.setQueriesList(queryList);
}
return await this.request(
c => c.searchProjects,
req,
f => f,
);
}
public async SearchGrantedProjects(
limit: number, offset: number, queryList?: GrantedProjectSearchQuery[]): Promise<GrantedProjectSearchResponse> {
limit: number, offset: number, queryList?: ProjectSearchQuery[]): Promise<ProjectGrantSearchResponse> {
const req = new GrantedProjectSearchRequest();
req.setLimit(limit);
req.setOffset(offset);
@@ -88,21 +104,6 @@ export class ProjectService {
);
}
// public async SearchGrantedProjects(
// limit: number, offset: number, queryList?: GrantedProjectSearchQuery[]): Promise<GrantedProjectSearchResponse> {
// const req = new GrantedProjectSearchRequest();
// req.setLimit(limit);
// req.setOffset(offset);
// if (queryList) {
// req.setQueriesList(queryList);
// }
// return await this.request(
// c => c.search,
// req,
// f => f,
// );
// }
public async GetProjectById(projectId: string): Promise<Project> {
const req = new ProjectID();
req.setId(projectId);
@@ -113,12 +114,12 @@ export class ProjectService {
);
}
public async GetGrantedProjectGrantByID(projectId: string, id: string): Promise<GrantedProject> {
public async GetGrantedProjectByID(projectId: string, id: string): Promise<ProjectGrantView> {
const req = new ProjectGrantID();
req.setId(id);
req.setProjectId(projectId);
return await this.request(
c => c.getGrantedProjectGrantByID,
c => c.getGrantedProjectByID,
req,
f => f,
);

2
console/src/assets/environment.json
View File

@@ -3,5 +3,5 @@
"mgmtServiceUrl": "https://api.zitadel.dev",
"adminServiceUrl":"https://api.zitadel.dev",
"issuer": "https://issuer.zitadel.dev",
"clientid": "58891550352010481@zitadel"
"clientid": "60073514127912158@zitadel"
}

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

@@ -176,7 +176,7 @@
"SIGNEDOUT":"Du bist abgemeldet. Klicke den Button um dich wieder anzumelden!",
"SIGNEDOUT_BTN":"Anmelden",
"EDITACCOUNT":"Account bearbeiten",
"ADDACCOUNT":"Neuen Account hinzufügen"
"ADDACCOUNT":"mit einem anderen Account anmelden"
},
"ORG": {
"PAGES": {
@@ -197,6 +197,10 @@
"1": "aktiv",
"2": "inaktiv"
},
"MEMBER": {
"TITLE":"Organisations Manager verwalten",
"DESCRIPTION":"Definieren Sie hier die Accounts, die Operationen auf ihrer Organisationen vornehmen dürfen."
},
"POLICY": {
"TITLE":"Richtlinen festlegen",
"DESCRIPTION":"Vorgefertigte Lösungen, die Ihnen Zeit sparen und Ihre Sicherheit gewährleisten",
@@ -275,7 +279,8 @@
"DETAIL": "Detail",
"CREATE": "Projekt erstellen",
"CREATE_DESC": "Geben Sie den Namen ein",
"ROLE": "Rolle"
"ROLE": "Rolle",
"NOITEMS": "Keine Projekte"
},
"STATE": {
"TITLE":"Status",
@@ -474,6 +479,10 @@
"org.changed":"Org editiert",
"org.member.added":"Organisation Member erstellt",
"org.member.removed":"Organisation Member gelöscht",
"org.domain.added":"Org Domain hinzugefügt",
"org.domain.verified":"Org Domain verifiziert",
"org.domain.primary.set":"Primäre domain gesetzt",
"org.iam.policy.added":"IAM Policy hinzugefügt",
"project.added": "Projekt erstellt",
"project.changed":"Projekt editiert",
"project.deactivated":"Projekt deaktiviert",
@@ -481,7 +490,17 @@
"project.member.removed":"Projekt Member gelöscht",
"project.role.added":"Rolle erstellt",
"project.role.removed":"Rolle gelöscht",
"project.application.added":"App hinzugefügt",
"project.application.config.oidc.added":"OIDC config hinzugefügt",
"user.added":"User hinzugefügt",
"user.initialization.code.added":"Init code hinzugefügt",
"user.phone.code.added":"User phone code hinzugefügt",
"user.phone.code.sent":"User phone code gesendet",
"user.initialization.code.sent":"Init code gesendet",
"user.email.verification.sended": "User email verifiziert",
"user.email.code.added":"Email code hinzugefügt",
"user.email.code.sent":"Email code gesendet",
"user.email.verified":"Email verifiziert",
"user.phone.verificationsended":"User phone verifikation gesendet",
"user.phone.code":"User phone code erstellt",
"user.initialization.verification.sended":"User mail verifikation gesendet",
@@ -496,9 +515,17 @@
"skipped.init.mfa.user":"User MFA init überspungen",
"user.email.password.request.sended":"User Email Password Anfrage gesended",
"user.password.set.requested":"Password Anfrage",
"user.phone.verification.sended":"User Nummer verifikation gesended",
"user.phone.verification.sended":"User Nummer verifikation gesendet",
"user.phone.changed":"User phone geändert",
"user.phone.verified":"User phone verifiziert",
"updated.user.profile":"User Profil update",
"user.email.init.sended":"User Email init sended"
"user.email.init.sended":"User Email init sended",
"user.password.changed":"Password changed",
"user.initialization.check.succeeded":"Init check erfolgreich",
"user.password.check.succeeded":"Password check erfolgreich",
"user.mfa.init.skipped":"MFA init übersprungen",
"user.mfa.otp.added":"MFA OTP hinzugefügt",
"user.mfa.otp.verified":"MFA OTP verifiziert"
}
}
}

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

@@ -176,7 +176,7 @@
"SIGNEDOUT":"You are signed out. Click the button below to sign in again!",
"SIGNEDOUT_BTN":"Sign In",
"EDITACCOUNT":"Edit Account",
"ADDACCOUNT":"Add new account"
"ADDACCOUNT":"Login with another account"
},
"ORG": {
"PAGES": {
@@ -197,6 +197,10 @@
"1": "aktiv",
"2": "inaktiv"
},
"MEMBER": {
"TITLE":"Organization Managers",
"DESCRIPTION":"Define Accounts which can change your organizations preferences."
},
"POLICY": {
"TITLE":"Explore Policies",
"DESCRIPTION":"Pre-packaged solutions that save you time and ensure security",
@@ -275,7 +279,8 @@
"DETAIL": "Detail",
"CREATE": "Create project",
"CREATE_DESC": "Insert your projects name",
"ROLE": "Role"
"ROLE": "Role",
"NOITEMS": "No projects"
},
"STATE": {
"TITLE":"State",
@@ -472,8 +477,12 @@
"EVENTS": {
"org.added": "Org created",
"org.changed":"Org edited",
"org.member.added":"Organization Member created",
"org.member.removed":"Organization Member deleted",
"org.member.added":"Org Member created",
"org.member.removed":"Org Member deleted",
"org.domain.added":"Org Domain added",
"org.domain.verified":"Org Domain verified",
"org.domain.primary.set":"Primary domain set",
"org.iam.policy.added":"IAM Policy added",
"project.added": "Project created",
"project.changed":"Project edited",
"project.deactivated":"Project deactivated",
@@ -481,7 +490,17 @@
"project.member.removed":"Project Member deleted",
"project.role.added":"Role created",
"project.role.removed":"Role deleted",
"project.application.added":"App added",
"project.application.config.oidc.added":"OIDC config added",
"user.added":"User added",
"user.initialization.code.added":"Init code added",
"user.phone.code.added":"Phone code added",
"user.phone.code.sent":"User phone code sent",
"user.initialization.code.sent":"Init code sent",
"user.email.verification.sended": "User email verified",
"user.email.code.added":"Email code added",
"user.email.code.sent":"Email code sent",
"user.email.verified":"Email verified",
"user.phone.verificationsended":"User phone verification sent",
"user.phone.code":"User phone code created",
"user.initialization.verification.sended":"User mail verification sent",
@@ -497,8 +516,16 @@
"user.email.password.request.sended":"Email password request sended",
"user.password.set.requested":"Password request",
"user.phone.verification.sended":"User Phone verification sended",
"user.phone.changed":"User phone changed",
"user.phone.verified":"User phone verified",
"updated.user.profile":"User Profile update",
"user.email.init.sended":"User Email init sended"
"user.email.init.sended":"User Email init sended",
"user.password.changed":"Password geändert",
"user.initialization.check.succeeded":"Init check succeeded",
"user.password.check.succeeded":"Password check succeeded",
"user.mfa.init.skipped":"MFA init skipped",
"user.mfa.otp.added":"MFA OTP added",
"user.mfa.otp.verified":"MFA OTP verified"
}
}
}

1
console/src/styles/card.scss
View File

@@ -14,6 +14,7 @@
border: 1px solid $border-color;
box-sizing: border-box;
border-radius: .5rem;
outline: none;
.selection-icon {
opacity: 0;

4
console/src/styles/changes.scss
View File

@@ -2,9 +2,9 @@
@mixin changes-theme($theme) {
$primary: map-get($theme, primary);
$secondary-dark: mat-color($primary, A800);
$primary-dark: mat-color($primary, A900);
.change-item-back {
background-color: $secondary-dark;
background-color: lighten($primary-dark, 5%);
}
}

2
console/src/styles/sidenav-list.scss
View File

@@ -3,7 +3,7 @@
@mixin sidenav-list-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat-color($primary, 500);
$primary-dark: mat-color($primary, A800);
$primary-dark: mat-color($primary, A900);
.mat-menu-item {
&.show-all {