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

fix(console): ui/ux improvements, delete user phone, pinned cards, user grant role load fix (#357)

Browse Source 
* project grant member edit

* project grant member dialog, import cleanup

* readd project roles

* user login-methods cleanup

* fix sw config, user grant context

* delete user grants, context for creation, search

* contributor box shadow

* password to detail view

* user detail notification

* ui ux improvements

* pinned section

* project pinnable grid, rem columns, move buttons

* user detail mfa, move user comonents, user grant

* del phone

* user detail service

* delete phone for auth, mgmt user
This commit is contained in:
Max Peintner 2020-07-07 11:50:42 +02:00 committed by GitHub
parent 18669b39c1
commit b8798230b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
57 changed files with 1299 additions and 363 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,7 +59,9 @@
<span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
</a>
<div *ngIf="authService.authenticationChanged | async" class="divider"><span></span></div>
<div *ngIf="authService.authenticationChanged | async" class="divider">
<div class="line"></div>
</div>
<a *ngIf="iamreadwrite" class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/iam']">
<i class="icon las la-gem"></i>
@ -71,12 +73,17 @@
<span class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}</span>
</a>
<div *ngIf="showOrgSection" class="divider"><span></span></div>
<div *ngIf="showOrgSection" class="divider">
<div class="line"></div>
<span>{{'MENU.PROJECTSSECTION' | translate}}</span>
<div class="line"></div>
</div>
<a *ngIf="showProjectSection" class="nav-item" [routerLinkActive]="['active']"
[routerLink]="[ '/projects']">
<i class="icon las la-layer-group"></i>
<span class="label">{{ 'MENU.PROJECT' | translate }}</span>
<span class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}
{{ 'MENU.PROJECT' | translate }}</span>
</a>
<a *ngIf="showProjectSection" class="nav-item" [routerLinkActive]="['active']"
@ -85,7 +92,13 @@
<span class="label">{{ 'MENU.GRANTEDPROJECT' | translate }}</span>
</a>
<div *ngIf="showProjectSection" class="divider"><span></span></div>
<div *ngIf="showProjectSection" class="divider">
<div class="line"></div>
<span class="label">
{{ 'MENU.USERSECTION' | translate }}</span>
<div class="line"></div>
</div>
<a *ngIf="showUserSection" class="nav-item" [routerLinkActive]="['active']"
[routerLink]="[ '/users']" [routerLinkActiveOptions]="{ exact: true }">

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

@ -194,8 +194,23 @@
}
.divider {
display: block;
background-color: #ffffff10;
height: 1px;
display: flex;
align-items: center;
width: 100%;
margin: .5rem 0;
span {
border: 1px solid #ffffff10;
padding: 2px 1rem;
border-radius: .5rem;
color: #8795a1;
font-size: 12px;
}
.line {
display: block;
background-color: #ffffff10;
height: 1px;
margin: .5rem 0;
flex: 1;
}
}

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

@ -77,25 +77,22 @@
<ng-container matColumnDef="roleNamesList">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }} </th>
<td mat-cell *matCellDef="let grant">
<!-- TODO check behaviour for empty role projects -->
<ng-container *ngIf="roleOptions.length === 0; else showOptions">
<td mat-cell *matCellDef="let grant; let i = index">
<ng-container *ngIf="loadedProjectId !== grant.projectId">
<span class="role app-label" *ngFor="let role of grant.roleKeysList">{{role}}</span>
<button mat-icon-button (click)="loadRoleOptions(grant.projectId)">
<mat-icon>edit</mat-icon>
<i class="las la-edit"></i>
</button>
</ng-container>
<ng-template #showOptions>
<mat-form-field class="form-field" appearance="outline" *ngIf="projectId">
<mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
<mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowCreate == false"
(selectionChange)="updateRoles(grant, $event)">
<mat-option *ngFor="let role of roleOptions" [value]="role.key">
{{ role.displayName }} {{role.key}}
</mat-option>
</mat-select>
</mat-form-field>
</ng-template>
<mat-form-field class="form-field" appearance="outline" *ngIf="loadedProjectId === grant.projectId">
<mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
<mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowCreate == false"
(selectionChange)="updateRoles(grant, $event)">
<mat-option *ngFor="let role of roleOptions" [value]="role.key">
{{role.key}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>

5
console/src/app/modules/user-grants/user-grants.component.ts
View File

@ -37,6 +37,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
public roleOptions: ProjectRoleView.AsObject[] = [];
public routerLink: any = [''];
public loadedProjectId: string = '';
constructor(
private userService: MgmtUserService,
private projectService: ProjectService,
@ -121,16 +122,14 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
public getRoleOptions(projectId: string): void {
this.projectService.SearchProjectRoles(projectId, 100, 0).then(resp => {
this.loadedProjectId = projectId;
this.roleOptions = resp.toObject().resultList;
console.log(this.roleOptions);
});
}
updateRoles(grant: UserGrant.AsObject, selectionChange: MatSelectChange): void {
console.log(grant, selectionChange.value);
this.userService.UpdateUserGrant(grant.id, grant.userId, selectionChange.value)
.then((newmember: UserGrant) => {
console.log(newmember.toObject());
this.toast.showInfo('Grant updated!');
}).catch(error => {
this.toast.showError(error.message);

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

@ -1,7 +1,7 @@
<app-meta-layout>
<div class="max-width-container">
<div class="head" *ngIf="project?.id">
<a [routerLink]="[ '/projects' ]" mat-icon-button>
<a [routerLink]="[ '/granted-projects' ]" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
<h1>{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.projectName}}</h1>
@ -24,10 +24,6 @@
</div>
<metainfo class="side">
<div class="details">
<div class="row">
<span class="first">{{'PROJECT.TYPE.TITLE' | translate}}:</span>
<span class="second">{{'PROJECT.TYPE.'+ ProjectType.PROJECTTYPE_GRANTED | translate}}</span>
</div>
<div class="row">
<span class="first">{{'PROJECT.STATE.TITLE' | translate}}:</span>
<span *ngIf="project && project.state !== undefined"

79
console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.html
View File

@ -1,56 +1,59 @@
<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>
<button (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>
<p class="n-items" *ngIf="!loading && selection.selected.length > 0">{{'PROJECT.PAGES.PINNED' | translate}}</p>
<div class="item card" *ngFor="let item of selection.selected; index as i"
[ngClass]="{ inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}"
[routerLink]="[item.projectId, 'grant', item.id]">
<div class="text-part">
<span *ngIf="item.changeDate" class="top">last modified on
<span *ngIf="item.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
{{
item.changeDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="name" *ngIf="item.projectName">{{ item.projectName }}</span>
<span class="description" *ngIf="item.grantedOrgName">{{item.grantedOrgName}}</span>
<!-- <span class="description" *ngIf="item.state">{{'PROJECT.STATE.'+item.state | translate}}</span> -->
<span *ngIf="item.changeDate" class="created">created on
{{
item.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="description" *ngIf="item.resourceOwnerName">{{item.resourceOwnerName}}</span>
<span *ngIf="item.changeDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{ item.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm' }}</span>
<span class="fill-space"></span>
<div class="icons">
</div>
</div>
<button [matMenuTriggerFor]="editMenu" class="edit-button" mat-icon-button>
<mat-icon>more_vert</mat-icon>
<button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
mat-icon-button>
<mat-icon>push_pin_outline</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>
<div class="container">
<p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>
<div class="item card" *ngFor="let item of notPinned; index as i" [routerLink]="[item.projectId, 'grant', item.id]"
[ngClass]="{ inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}">
<div class="text-part">
<span *ngIf="item.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
{{
item.changeDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="name" *ngIf="item.projectName">{{ item.projectName }}</span>
<span class="description" *ngIf="item.resourceOwnerName">{{item.resourceOwnerName}}</span>
<span *ngIf="item.changeDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{ item.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm' }}</span>
<span class="fill-space"></span>
<div class="icons">
</div>
</div>
<button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
mat-icon-button>
<mat-icon>push_pin_outline</mat-icon>
</button>
</div>
<p class="n-items" *ngIf="!loading && items.length === 0 && selection.selected.length === 0">
{{'PROJECT.PAGES.NOITEMS' | translate}}</p>
</div>

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

@ -52,18 +52,6 @@
color: #8795a1;
}
.selection-icon {
opacity: 0;
position: absolute;
top: -12px;
left: -12px;
user-select: none;
&:hover {
color: white;
}
}
img {
height: 50px;
width: 50px;
@ -136,16 +124,26 @@
}
.edit-button {
opacity: 0;
user-select: none;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
margin-bottom: 0.25rem;
color: #8795a1;
&:hover {
color: white;
}
&.selected {
opacity: 1;
}
}
&:hover {
.selection-icon {
.edit-button {
opacity: 1;
}
@ -163,7 +161,7 @@
}
}
.selection-icon {
.edit-button {
opacity: 1;
}

73
console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.ts
View File

@ -1,10 +1,8 @@
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 { 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';
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { ProjectGrantView, ProjectState, ProjectType } from 'src/app/proto/generated/management_pb';
import { AuthService } from 'src/app/services/auth.service';
@Component({
selector: 'app-granted-project-grid',
@ -30,30 +28,73 @@ import { ToastService } from 'src/app/services/toast.service';
]),
],
})
export class GrantedProjectGridComponent {
export class GrantedProjectGridComponent implements OnChanges {
@Input() items: Array<ProjectGrantView.AsObject> = [];
public notPinned: 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 selection: SelectionModel<ProjectGrantView.AsObject> = new SelectionModel<ProjectGrantView.AsObject>(true, []);
public showNewProject: boolean = false;
public ProjectState: any = ProjectState;
public ProjectType: any = ProjectType;
constructor(private router: Router, private projectService: ProjectService, private toast: ToastService) { }
constructor(private authService: AuthService) {
this.selection.changed.subscribe(selection => {
this.setPrefixedItem('pinned-granted-projects', JSON.stringify(
this.selection.selected.map(item => item.projectId),
)).then(() => {
const filtered = this.notPinned.filter(item => item === selection.added.find(i => i === item));
filtered.forEach((f, i) => {
this.notPinned.splice(i, 1);
});
public selectItem(item: ProjectGrantView.AsObject, event?: any): void {
if (event && !event.target.classList.contains('mat-icon')) {
this.router.navigate(['granted-projects', item.projectId, 'grant', `${item.id}`]);
} else if (!event) {
this.router.navigate(['granted-projects', item.projectId, 'grant', `${item.id}`]);
}
this.notPinned.push(...selection.removed);
});
});
}
public addItem(): void {
this.newClicked.emit(true);
}
public ngOnChanges(changes: SimpleChanges): void {
if (changes.items.currentValue && changes.items.currentValue.length > 0) {
this.notPinned = Object.assign([], this.items);
this.reorganizeItems();
}
}
public reorganizeItems(): void {
this.getPrefixedItem('pinned-granted-projects').then(storageEntry => {
if (storageEntry) {
const array: string[] = JSON.parse(storageEntry);
const toSelect: ProjectGrantView.AsObject[] = this.items.filter((item, index) => {
if (array.includes(item.projectId)) {
// this.notPinned.splice(index, 1);
return true;
}
});
this.selection.select(...toSelect);
const toNotPinned: ProjectGrantView.AsObject[] = this.items.filter((item, index) => {
if (!array.includes(item.projectId)) {
return true;
}
});
this.notPinned = toNotPinned;
}
});
}
private async getPrefixedItem(key: string): Promise<string | null> {
const prefix = (await this.authService.GetActiveOrg()).id;
return localStorage.getItem(`${prefix}:${key}`);
}
private async setPrefixedItem(key: string, value: any): Promise<void> {
const prefix = (await this.authService.GetActiveOrg()).id;
return localStorage.setItem(`${prefix}:${key}`, value);
}
}

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

@ -53,19 +53,13 @@
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
<td mat-cell *matCellDef="let project"> {{project.name}} </td>
<td mat-cell *matCellDef="let project"> {{project.projectName}} </td>
</ng-container>
<ng-container matColumnDef="orgName">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGNAME' | translate }} </th>
<ng-container matColumnDef="resourceOwnerName">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.RESOURCEOWNER' | 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>
{{project.resourceOwnerName}} </td>
</ng-container>
<ng-container matColumnDef="state">

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

@ -40,7 +40,7 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
new MatTableDataSource<ProjectGrantView.AsObject>();
public grantedProjectList: ProjectGrantView.AsObject[] = [];
public displayedColumns: string[] = ['select', 'name', 'orgName', 'orgDomain', 'state', 'creationDate', 'changeDate'];
public displayedColumns: string[] = ['select', 'name', 'resourceOwnerName', 'state', 'creationDate', 'changeDate'];
public selection: SelectionModel<ProjectGrantView.AsObject> = new SelectionModel<ProjectGrantView.AsObject>(true, []);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
@ -88,6 +88,9 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
this.projectService.SearchGrantedProjects(limit, offset).then(res => {
this.grantedProjectList = res.toObject().resultList;
this.totalResult = res.toObject().totalResult;
if (this.totalResult > 5) {
this.grid = false;
}
this.dataSource.data = this.grantedProjectList;
this.loadingSubject.next(false);
}).catch(error => {

25
console/src/app/pages/granted-projects/granted-projects.component.ts
View File

@ -1,29 +1,10 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { Component } from '@angular/core';
@Component({
selector: 'app-granted-projects',
templateUrl: './granted-projects.component.html',
styleUrls: ['./granted-projects.component.scss'],
})
export class GrantedProjectsComponent 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();
}
export class GrantedProjectsComponent {
constructor() { }
}

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

@ -7,7 +7,6 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@ -51,7 +50,6 @@ import { GrantedProjectsComponent } from './granted-projects.component';
HasRoleModule,
MatTableModule,
MatPaginatorModule,
MatMenuModule,
MatFormFieldModule,
MatInputModule,
ChangesModule,

4
console/src/app/pages/orgs/org-create/org-create.component.html
View File

@ -23,7 +23,7 @@
</div>
</form>
<div *ngIf="name?.touched" @openClose>
<!-- <div *ngIf="name?.touched" @openClose>
<p class="desc">{{ 'ORG.PAGES.ORGDOMAIN_VERIFICATION' | translate }}</p>
<p>{{domain?.value}}/.well-known/caos-developer-domain-association.txt</p>
@ -36,7 +36,7 @@
</div>
<p class="desc">{{ 'ORG.PAGES.ORGDOMAIN_VERIFICATION_SKIP' | translate }}</p>
</div>
</div> -->
</ng-container>
<ng-container *ngIf="currentCreateStep == createSteps">

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

@ -8,11 +8,8 @@
<div *ngFor="let domain of domains" class="domain">
<span class="title">{{domain.domain}}</span>
<i matTooltip="verified" *ngIf="domain.verified" class="verified las la-check-circle"></i>
<i matTooltip="primary" *ngIf="domain.primary" class="primary las la-chess-queen"></i>
<i matTooltip="primary" *ngIf="domain.primary" class="primary las la-star"></i>
<span class="fill-space"></span>
<!-- <button disabled mat-icon-button
matTooltip="download /.well-known/caos-developer-domain-association.txt and deploy it on your domain. Then verify"><i
class="las la-file-download"></i></button> -->
<button matTooltip="Remove domain" color="warn" mat-icon-button (click)="removeDomain(domain.domain)"><i
class="las la-trash"></i></button>
</div>
@ -27,11 +24,6 @@
<button matTooltip="Add domain" mat-icon-button color="primary" (click)="saveNewOrgDomain()">
<mat-icon>check</mat-icon>
</button>
<!-- <button disabled mat-icon-button
matTooltip="download /.well-known/caos-developer-domain-association.txt and deploy it on your domain. Then verify"><i
class="las la-file-download"></i></button> -->
<!-- <button disabled mat-icon-button matTooltip="Verify"><i class=" las la-check-circle"></i></button> -->
</div>
</app-card>
@ -43,12 +35,11 @@
<metainfo class="side">
<div class="details">
<div class="row">
<span class="first">Domains:</span>
<span class="second"><span style="display: block;"
*ngFor="let domain of domains">{{domain.domain}}</span></span>
<span class="first">{{'ORG.PAGES.PRIMARYDOMAIN' | translate}}</span>
<span class="second"><span style="display: block;">{{primaryDomain}}</span></span>
</div>
<div class="row">
<span class="first">State:</span>
<span class="first">{{'ORG.PAGES.STATE' | translate}}</span>
<span *ngIf="org && org.state !== undefined"
class="second">{{'ORG.STATE.'+org.state | translate}}</span>
</div>

2
console/src/app/pages/orgs/org-detail/org-detail.component.ts
View File

@ -28,6 +28,7 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
private subscription: Subscription = new Subscription();
public domains: OrgDomainView.AsObject[] = [];
public primaryDomain: string = '';
public newDomain: string = '';
constructor(
@ -53,6 +54,7 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
this.orgService.SearchMyOrgDomains(0, 100).then(result => {
this.domains = result.toObject().resultList;
this.primaryDomain = this.domains.find(domain => domain.primary)?.domain ?? '';
});
}

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

@ -13,31 +13,34 @@
</button>
</ng-template>
<span class="fill-space"></span>
<button mat-stroked-button color="accent" [disabled]="isZitadel"
*ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="state-button"
(click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
<button mat-stroked-button color="accent" [disabled]="isZitadel"
*ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="state-button"
(click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
<div class="full-width">
<ng-container *ngIf="editstate">
<mat-form-field *ngIf="editstate && project?.name" class="formfield"
hintLabel="The name is required!">
<mat-label>Project Name</mat-label>
<input matInput [(ngModel)]="project.name" />
</mat-form-field>
<button class="icon-button" *ngIf="editstate" mat-icon-button (click)="updateName()">
<mat-icon>check</mat-icon>
</button>
<button mat-stroked-button color="accent" [disabled]="isZitadel"
*ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="second"
(click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
<button mat-stroked-button color="accent" [disabled]="isZitadel"
*ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="second"
(click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
</ng-container>
<div class="line">
<ng-container *ngIf="editstate">
<mat-form-field *ngIf="editstate && project?.name" class="formfield"
hintLabel="The name is required!">
<mat-label>{{'PROJECT.NAME' | translate}}</mat-label>
<input matInput [(ngModel)]="project.name" />
</mat-form-field>
<button class="icon-button" *ngIf="editstate" mat-icon-button (click)="updateName()">
<mat-icon>check</mat-icon>
</button>
</ng-container>
<span class="fill-space"></span>
</div>
<p class="desc">{{ 'PROJECT.PAGES.DESCRIPTION' | translate }}</p>
<p *ngIf="isZitadel" class="zitadel-warning">This belongs to Zitadel project. If you change something,
Zitadel
may not behave as intended!</p>
<p *ngIf="isZitadel" class="zitadel-warning">{{'PROJECT.PAGES.ZITADELPROJECT' | translate}}</p>
</div>
</div>
<!-- show only on owned projects-->
<ng-container *ngIf="project">
<ng-template appHasRole [appHasRole]="['project.app.read:' + project.projectId, 'project.app.read']">
<app-project-application-grid *ngIf="grid"
@ -89,10 +92,6 @@
</div>
<metainfo class="side">
<div class="details">
<div class="row">
<span class="first">{{'PROJECT.TYPE.TITLE' | translate}}:</span>
<span class="second">{{'PROJECT.TYPE.'+ ProjectType.PROJECTTYPE_OWNED | translate}}</span>
</div>
<div class="row">
<span class="first">{{'PROJECT.STATE.TITLE' | translate}}:</span>
<span *ngIf="project && project.state !== undefined"

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

@ -5,6 +5,14 @@
flex-wrap: wrap;
margin-bottom: 1rem;
.fill-space {
flex: 1;
}
.state-button {
border-radius: .5rem;
}
a {
display: block;
}

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

@ -1,16 +1,4 @@
<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>
@ -18,19 +6,19 @@
<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>
<p class="n-items" *ngIf="!loading && selection.selected.length > 0">{{'PROJECT.PAGES.PINNED' | translate}}</p>
<div class="item card" *ngFor="let item of selection.selected; index as i" [routerLink]="[item.projectId]"
[ngClass]="{ inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}">
<div class="text-part">
<span *ngIf="item.changeDate" class="top">last modified on
<span *ngIf="item.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
{{
item.changeDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="name" *ngIf="item.name">{{ item.name }}</span>
<!-- <span class="description" *ngIf="item.state">{{'PROJECT.STATE.'+item.state | translate}}</span> -->
<span *ngIf="item.changeDate" class="created">created on
<span *ngIf="item.changeDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{
item.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
}}</span>
@ -38,20 +26,37 @@
<div class="icons">
</div>
</div>
<button [matMenuTriggerFor]="editMenu" class="edit-button" mat-icon-button>
<mat-icon>more_vert</mat-icon>
<button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
mat-icon-button>
<mat-icon>push_pin_outline</mat-icon>
</button>
</div>
<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>
<div class="container">
<p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>
<div class="item card" *ngFor="let item of notPinned; index as i" [routerLink]="[item.projectId]"
[ngClass]="{ inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}">
<div class="text-part">
<span *ngIf="item.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
{{
item.changeDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="name" *ngIf="item.name">{{ item.name }}</span>
<span *ngIf="item.changeDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{
item.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="fill-space"></span>
<div class="icons">
</div>
</div>
<button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
mat-icon-button>
<mat-icon>push_pin_outline</mat-icon>
</button>
</div>
<p class="n-items" *ngIf="!loading && items.length === 0">{{'PROJECT.PAGES.NOITEMS' | translate}}</p>

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

@ -52,14 +52,6 @@
color: #8795a1;
}
.selection-icon {
opacity: 0;
position: absolute;
top: -12px;
left: -12px;
user-select: none;
}
img {
height: 50px;
width: 50px;
@ -132,16 +124,27 @@
}
.edit-button {
opacity: 0;
user-select: none;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
margin-bottom: 0.25rem;
color: #8795a1;
&:hover {
color: white;
}
&.selected {
opacity: 1;
}
}
&:hover {
.selection-icon {
.edit-button {
opacity: 1;
}
@ -159,7 +162,7 @@
}
}
.selection-icon {
.edit-button {
opacity: 1;
}

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

@ -1,10 +1,9 @@
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 { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { Router } from '@angular/router';
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';
import { AuthService } from 'src/app/services/auth.service';
@Component({
selector: 'app-owned-project-grid',
@ -30,8 +29,10 @@ import { ToastService } from 'src/app/services/toast.service';
]),
],
})
export class OwnedProjectGridComponent {
export class OwnedProjectGridComponent implements OnChanges {
@Input() items: Array<ProjectView.AsObject> = [];
public notPinned: Array<ProjectView.AsObject> = [];
@Output() newClicked: EventEmitter<boolean> = new EventEmitter();
@Output() changedView: EventEmitter<boolean> = new EventEmitter();
@Input() loading: boolean = false;
@ -43,7 +44,20 @@ export class OwnedProjectGridComponent {
public ProjectState: any = ProjectState;
public ProjectType: any = ProjectType;
constructor(private router: Router, private projectService: ProjectService, private toast: ToastService) { }
constructor(private router: Router, private authService: AuthService) {
this.selection.changed.subscribe(selection => {
this.setPrefixedItem('pinned-projects', JSON.stringify(
this.selection.selected.map(item => item.projectId),
)).then(() => {
const filtered = this.notPinned.filter(item => item === selection.added.find(i => i === item));
filtered.forEach((f, i) => {
this.notPinned.splice(i, 1);
});
this.notPinned.push(...selection.removed);
});
});
}
public selectItem(item: ProjectView.AsObject, event?: any): void {
if (event && !event.target.classList.contains('mat-icon')) {
@ -57,23 +71,42 @@ export class OwnedProjectGridComponent {
this.newClicked.emit(true);
}
public reactivateProjects(selected: ProjectView.AsObject[]): void {
Promise.all([selected.map(proj => {
return this.projectService.ReactivateProject(proj.projectId);
})]).then(() => {
this.toast.showInfo('Successful reactivated all projects');
}).catch(error => {
this.toast.showError(error.message);
public ngOnChanges(changes: SimpleChanges): void {
if (changes.items.currentValue && changes.items.currentValue.length > 0) {
this.notPinned = Object.assign([], this.items);
this.reorganizeItems();
}
}
public reorganizeItems(): void {
this.getPrefixedItem('pinned-projects').then(storageEntry => {
if (storageEntry) {
const array: string[] = JSON.parse(storageEntry);
const toSelect: ProjectView.AsObject[] = this.items.filter((item, index) => {
if (array.includes(item.projectId)) {
// this.notPinned.splice(index, 1);
return true;
}
});
this.selection.select(...toSelect);
const toNotPinned: ProjectView.AsObject[] = this.items.filter((item, index) => {
if (!array.includes(item.projectId)) {
return true;
}
});
this.notPinned = toNotPinned;
}
});
}
public deactivateProjects(selected: ProjectView.AsObject[]): void {
Promise.all([selected.map(proj => {
return this.projectService.DeactivateProject(proj.projectId);
})]).then(() => {
this.toast.showInfo('Successful deactivated all projects');
}).catch(error => {
this.toast.showError(error.message);
});
private async getPrefixedItem(key: string): Promise<string | null> {
const prefix = (await this.authService.GetActiveOrg()).id;
return localStorage.getItem(`${prefix}:${key}`);
}
private async setPrefixedItem(key: string, value: any): Promise<void> {
const prefix = (await this.authService.GetActiveOrg()).id;
return localStorage.setItem(`${prefix}:${key}`, value);
}
}

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

@ -88,6 +88,9 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
this.projectService.SearchProjects(limit, offset).then(res => {
this.ownedProjectList = res.toObject().resultList;
this.totalResult = res.toObject().totalResult;
if (this.totalResult > 5) {
this.grid = false;
}
this.dataSource.data = this.ownedProjectList;
this.loadingSubject.next(false);
}).catch(error => {

25
console/src/app/pages/owned-projects/owned-projects.component.ts
View File

@ -1,29 +1,10 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { Component } from '@angular/core';
@Component({
selector: 'app-owned-projects',
templateUrl: './owned-projects.component.html',
styleUrls: ['./owned-projects.component.scss'],
})
export class OwnedProjectsComponent 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();
}
export class OwnedProjectsComponent {
constructor() { }
}

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

@ -8,7 +8,6 @@ import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@ -64,7 +63,6 @@ import { ProjectGrantsComponent } from './project-grants/project-grants.componen
MatInputModule,
ChangesModule,
UserListModule,
MatMenuModule,
MatChipsModule,
MatIconModule,
MatButtonModule,

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

@ -50,12 +50,6 @@
{{grant.grantedOrgName}} </td>
</ng-container>
<ng-container matColumnDef="grantedOrgDomain">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORGDOMAIN' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let grant">
{{grant.grantedOrgDomain}} </td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CREATIONDATE' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let grant">

6
console/src/app/pages/owned-projects/project-grants/project-grants.component.ts
View File

@ -1,13 +1,11 @@
import { animate, state, style, transition, trigger } from '@angular/animations';
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatTable } from '@angular/material/table';
import { tap } from 'rxjs/operators';
import { ProjectGrant, ProjectMemberView } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
import { ProjectGrantsDataSource } from './project-grants-datasource';
@ -34,9 +32,9 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
public selectedGrantMembers: ProjectMemberView.AsObject[] = [];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'grantedOrgName', 'grantedOrgDomain', 'creationDate', 'changeDate', 'roleNamesList'];
public displayedColumns: string[] = ['select', 'grantedOrgName', 'creationDate', 'changeDate', 'roleNamesList'];
constructor(private projectService: ProjectService, private toast: ToastService, private dialog: MatDialog) { }
constructor(private projectService: ProjectService) { }
public ngOnInit(): void {
this.dataSource = new ProjectGrantsDataSource(this.projectService);

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

@ -117,6 +117,9 @@
<button (click)="phoneEditState = false" mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<button *ngIf="user.phone" color="warn" (click)="deletePhone()" mat-icon-button>
<i class="las la-trash"></i>
</button>
<button [disabled]="!user.phone" type="button" color="primary" (click)="savePhone()"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</ng-template>
@ -129,10 +132,9 @@
<metainfo *ngIf="user" class="side">
<div class="details">
<div class="row" *ngIf="user?.loginNamesList">
<span class="first">Login Names:</span>
<span class="second"><span style="display: block;"
*ngFor="let login of user?.loginNamesList">{{login}}</span></span>
<div class="row" *ngIf="user?.preferredLoginName">
<span class="first">Preferred Loginname:</span>
<span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
</div>
</div>

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

@ -1,35 +1,13 @@
import { Component, OnDestroy } from '@angular/core';
import { AbstractControl, FormBuilder } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core';
import { Subscription } from 'rxjs';
import { ChangeType } from 'src/app/modules/changes/changes.component';
import { Gender, UserAddress, UserEmail, UserPhone, UserProfile, UserView } from 'src/app/proto/generated/auth_pb';
import { AuthUserService } from 'src/app/services/auth-user.service';
import { OrgService } from 'src/app/services/org.service';
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;
}
const pwd = c.parent.get('newPassword');
const cpwd = c.parent.get('confirmPassword');
if (!pwd || !cpwd) {
return;
}
if (pwd.value !== cpwd.value) {
return {
invalid: true,
notequal: {
valid: false,
},
};
}
}
import { CodeDialogComponent } from './code-dialog/code-dialog.component';
@Component({
selector: 'app-auth-user-detail',
@ -58,9 +36,7 @@ export class AuthUserDetailComponent implements OnDestroy {
public translate: TranslateService,
private toast: ToastService,
private userService: AuthUserService,
private fb: FormBuilder,
private dialog: MatDialog,
private orgService: OrgService,
) {
this.loading = true;
this.getData().then(() => {
@ -151,6 +127,16 @@ export class AuthUserDetailComponent implements OnDestroy {
});
}
public deletePhone(): void {
this.userService.RemoveMyUserPhone().then(() => {
this.toast.showInfo('Phone removed with success!');
this.user.phone = '';
this.phoneEditState = false;
}).catch(data => {
this.toast.showError(data.message);
});
}
public savePhone(): void {
this.phoneEditState = false;
this.userService

6
console/src/app/pages/user-detail/auth-user-mfa/auth-user-mfa.component.html → console/src/app/pages/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html
View File

@ -2,7 +2,11 @@
<div class="col">
<div class="row" *ngFor="let mfa of mfaSubject | async">
<span>{{'USER.MFA.TYPE.'+ mfa.type | translate}}</span>
<span>{{'USER.MFA.STATE.'+ mfa.state | translate}}</span>
<i matTooltip="{{'USER.MFA.STATE.'+ mfa.state | translate}}" *ngIf="mfa.state === MFAState.MFASTATE_READY"
class="verified las la-check-circle"></i>
<i matTooltip="{{'USER.MFA.STATE.'+ mfa.state | translate}}"
*ngIf="mfa.state === MFAState.MFASTATE_NOT_READY || mfa.state === MFAState.MFASTATE_REMOVED"
class="primary las la-ban"></i>
<button mat-icon-button (click)="deleteMFA(mfa.type)" color="warn"
matTooltip="{{'ACTIONS.DELETE' | translate}}">
<i class="las la-trash"></i>

0
console/src/app/pages/user-detail/auth-user-mfa/auth-user-mfa.component.scss → console/src/app/pages/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.scss
View File

0
console/src/app/pages/user-detail/auth-user-mfa/auth-user-mfa.component.spec.ts → console/src/app/pages/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.spec.ts
View File

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

0
console/src/app/pages/user-detail/code-dialog/code-dialog.component.html → console/src/app/pages/user-detail/auth-user-detail/code-dialog/code-dialog.component.html
View File

0
console/src/app/pages/user-detail/code-dialog/code-dialog.component.scss → console/src/app/pages/user-detail/auth-user-detail/code-dialog/code-dialog.component.scss
View File

0
console/src/app/pages/user-detail/code-dialog/code-dialog.component.spec.ts → console/src/app/pages/user-detail/auth-user-detail/code-dialog/code-dialog.component.spec.ts
View File

0
console/src/app/pages/user-detail/code-dialog/code-dialog.component.ts → console/src/app/pages/user-detail/auth-user-detail/code-dialog/code-dialog.component.ts
View File

0
console/src/app/pages/user-detail/dialog-otp/dialog-otp.component.html → console/src/app/pages/user-detail/auth-user-detail/dialog-otp/dialog-otp.component.html
View File

0
console/src/app/pages/user-detail/dialog-otp/dialog-otp.component.scss → console/src/app/pages/user-detail/auth-user-detail/dialog-otp/dialog-otp.component.scss
View File

0
console/src/app/pages/user-detail/dialog-otp/dialog-otp.component.ts → console/src/app/pages/user-detail/auth-user-detail/dialog-otp/dialog-otp.component.ts
View File

34
console/src/app/pages/user-detail/code-dialog/code-dialog.module.ts
View File

@ -1,34 +0,0 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { TranslateModule } from '@ngx-translate/core';
import { CodeDialogComponent } from './code-dialog.component';
@NgModule({
declarations: [
CodeDialogComponent,
],
imports: [
CommonModule,
FormsModule,
MatDialogModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule,
MatIconModule,
TranslateModule,
],
entryComponents: [
CodeDialogComponent,
],
exports: [
CodeDialogComponent,
],
})
export class CodeDialogModule { }

3
console/src/app/pages/user-detail/password/password.component.spec.ts
View File

@ -9,8 +9,7 @@ describe('PasswordComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [PasswordComponent],
})
.compileComponents();
}).compileComponents();
}));
beforeEach(() => {

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

@ -20,15 +20,15 @@ import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module
import { PipesModule } from 'src/app/pipes/pipes.module';
import { AuthUserDetailComponent } from './auth-user-detail/auth-user-detail.component';
import { AuthUserMfaComponent } from './auth-user-mfa/auth-user-mfa.component';
import { CodeDialogModule } from './code-dialog/code-dialog.module';
import { AuthUserMfaComponent } from './auth-user-detail/auth-user-mfa/auth-user-mfa.component';
import { CodeDialogComponent } from './auth-user-detail/code-dialog/code-dialog.component';
import { DialogOtpComponent } from './auth-user-detail/dialog-otp/dialog-otp.component';
import { DetailFormModule } from './detail-form/detail-form.module';
import { DialogOtpComponent } from './dialog-otp/dialog-otp.component';
import { PasswordComponent } from './password/password.component';
import { ThemeSettingComponent } from './theme-setting/theme-setting.component';
import { UserDetailRoutingModule } from './user-detail-routing.module';
import { UserDetailComponent } from './user-detail/user-detail.component';
import { UserMfaComponent } from './user-mfa/user-mfa.component';
import { PasswordComponent } from './password/password.component';
@NgModule({
declarations: [
@ -39,6 +39,7 @@ import { PasswordComponent } from './password/password.component';
UserMfaComponent,
ThemeSettingComponent,
PasswordComponent,
CodeDialogComponent,
],
imports: [
UserDetailRoutingModule,
@ -53,7 +54,6 @@ import { PasswordComponent } from './password/password.component';
PipesModule,
MatFormFieldModule,
UserGrantsModule,
CodeDialogModule,
MatInputModule,
MatButtonModule,
MatIconModule,

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

@ -6,6 +6,17 @@
</a>
<h1>{{ 'USER.PROFILE.TITLE' | translate }} {{user?.displayName}}</h1>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['user.write', 'user.write:'+user?.id]">
<button mat-stroked-button color="accent" *ngIf="user?.state === UserState.USERSTATE_ACTIVE"
class="state-button"
(click)="changeState(UserState.USERSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
<button mat-stroked-button color="accent" *ngIf="user?.state === UserState.USERSTATE_INACTIVE"
class="state-button"
(click)="changeState(UserState.USERSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
</ng-template>
<p class="desc">{{ 'USER.PROFILE.DESCRIPTION' | translate }}</p>
</div>
@ -13,6 +24,19 @@
<span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
<app-card title="{{ 'USER.PAGES.LOGINNAMES' | translate }}"
description="{{ 'USER.PAGES.LOGINNAMESDESC' | translate }}" *ngIf="user">
<div class="login-name-row" *ngFor="let login of user?.loginNamesList">
<span>{{login}}</span>
<button color="primary" [disabled]="copied == login"
[matTooltip]="(copied != login ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
(click)="copytoclipboard(login)" mat-icon-button>
<i *ngIf="copied != login" class="las la-clipboard"></i>
<i *ngIf="copied == login" class="las la-clipboard-check"></i>
</button>
</div>
</app-card>
<ng-template appHasRole [appHasRole]="['user.read', 'user.read:'+user?.id]">
<app-card title="{{ 'USER.PROFILE.TITLE' | translate }}"
description="{{'USER.PROFILE.DESCRIPTION' | translate}}">
@ -108,6 +132,9 @@
<button (click)="phoneEditState = false" mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<button *ngIf="user.phone" color="warn" (click)="deletePhone()" mat-icon-button>
<i class="las la-trash"></i>
</button>
<button [disabled]="!user.phone" type="button" color="primary" (click)="savePhone()"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</ng-template>
@ -126,10 +153,9 @@
<metainfo *ngIf="user" class="side">
<div class="details">
<div class="row" *ngIf="user?.loginNamesList">
<span class="first">Login Names:</span>
<span class="second"><span style="display: block;"
*ngFor="let login of user?.loginNamesList">{{login}}</span></span>
<div class="row" *ngIf="user?.preferredLoginName">
<span class="first">Preferred Loginname:</span>
<span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
</div>
</div>

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

@ -21,6 +21,14 @@
font-size: .9rem;
color: #8795a1;
}
.fill-space {
flex: 1;
}
.state-button {
border-radius: .5rem;
}
}
.card-actions {

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

@ -36,6 +36,8 @@ export class UserDetailComponent implements OnInit, OnDestroy {
public loading: boolean = false;
public UserState: any = UserState;
public copied: string = '';
constructor(
public translate: TranslateService,
private route: ActivatedRoute,
@ -60,6 +62,22 @@ export class UserDetailComponent implements OnInit, OnDestroy {
this.subscription.unsubscribe();
}
public changeState(newState: UserState): void {
if (newState === UserState.USERSTATE_ACTIVE) {
this.mgmtUserService.ReactivateUser(this.user.id).then(() => {
this.toast.showInfo('reactivated User');
}).catch(error => {
this.toast.showError(error.message);
});
} else if (newState === UserState.USERSTATE_INACTIVE) {
this.mgmtUserService.DeactivateUser(this.user.id).then(() => {
this.toast.showInfo('deactivated User');
}).catch(error => {
this.toast.showError(error.message);
});
}
}
public saveProfile(profileData: UserProfile.AsObject): void {
this.user.firstName = profileData.firstName;
this.user.lastName = profileData.lastName;
@ -100,6 +118,16 @@ export class UserDetailComponent implements OnInit, OnDestroy {
});
}
public deletePhone(): void {
this.mgmtUserService.RemoveUserPhone(this.user.id).then(() => {
this.toast.showInfo('Phone removed with success!');
this.user.phone = '';
this.phoneEditState = false;
}).catch(data => {
this.toast.showError(data.message);
});
}
public saveEmail(): void {
this.emailEditState = false;
this.mgmtUserService
@ -117,6 +145,7 @@ export class UserDetailComponent implements OnInit, OnDestroy {
.SaveUserPhone(this.user.id, this.user.phone).then((data: UserPhone) => {
this.toast.showInfo('Saved Phone');
this.user.phone = data.toObject().phone;
this.phoneEditState = false;
}).catch(data => {
this.toast.showError(data.message);
});
@ -143,4 +172,22 @@ export class UserDetailComponent implements OnInit, OnDestroy {
this.toast.showError(data.message);
});
}
public copytoclipboard(value: string): void {
const selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
selBox.value = value;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
this.copied = value;
setTimeout(() => {
this.copied = '';
}, 3000);
}
}

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

@ -1,4 +1,5 @@
<app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}">
<app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}"
*ngIf="mfaSubject && (mfaSubject | async)?.length > 0">
<div class="col">
<div class="row" *ngFor="let mfa of mfaSubject | async">
<span>{{'USER.MFA.TYPE.'+ mfa.type | translate}}</span>

25
console/src/app/proto/generated/auth_grpc_web_pb.d.ts vendored
View File

@ -17,6 +17,7 @@ import {
MyProjectOrgSearchRequest,
MyProjectOrgSearchResponse,
PasswordChange,
PasswordComplexityPolicy,
UpdateUserAddressRequest,
UpdateUserEmailRequest,
UpdateUserPhoneRequest,
@ -133,6 +134,13 @@ export class AuthServiceClient {
response: UserPhone) => void
): grpcWeb.ClientReadableStream<UserPhone>;
removeMyUserPhone(
request: google_protobuf_empty_pb.Empty,
metadata: grpcWeb.Metadata | undefined,
callback: (err: grpcWeb.Error,
response: google_protobuf_empty_pb.Empty) => void
): grpcWeb.ClientReadableStream<google_protobuf_empty_pb.Empty>;
verifyMyUserPhone(
request: VerifyUserPhoneRequest,
metadata: grpcWeb.Metadata | undefined,
@ -182,6 +190,13 @@ export class AuthServiceClient {
response: google_protobuf_empty_pb.Empty) => void
): grpcWeb.ClientReadableStream<google_protobuf_empty_pb.Empty>;
getMyPasswordComplexityPolicy(
request: google_protobuf_empty_pb.Empty,
metadata: grpcWeb.Metadata | undefined,
callback: (err: grpcWeb.Error,
response: PasswordComplexityPolicy) => void
): grpcWeb.ClientReadableStream<PasswordComplexityPolicy>;
addMfaOTP(
request: google_protobuf_empty_pb.Empty,
metadata: grpcWeb.Metadata | undefined,
@ -303,6 +318,11 @@ export class AuthServicePromiseClient {
metadata?: grpcWeb.Metadata
): Promise<UserPhone>;
removeMyUserPhone(
request: google_protobuf_empty_pb.Empty,
metadata?: grpcWeb.Metadata
): Promise<google_protobuf_empty_pb.Empty>;
verifyMyUserPhone(
request: VerifyUserPhoneRequest,
metadata?: grpcWeb.Metadata
@ -338,6 +358,11 @@ export class AuthServicePromiseClient {
metadata?: grpcWeb.Metadata
): Promise<google_protobuf_empty_pb.Empty>;
getMyPasswordComplexityPolicy(
request: google_protobuf_empty_pb.Empty,
metadata?: grpcWeb.Metadata
): Promise<PasswordComplexityPolicy>;
addMfaOTP(
request: google_protobuf_empty_pb.Empty,
metadata?: grpcWeb.Metadata

160
console/src/app/proto/generated/auth_grpc_web_pb.js
View File

@ -1124,6 +1124,86 @@ proto.caos.zitadel.auth.api.v1.AuthServicePromiseClient.prototype.changeMyUserPh
};
/**
* @const
* @type {!grpc.web.MethodDescriptor<
* !proto.google.protobuf.Empty,
* !proto.google.protobuf.Empty>}
*/
const methodDescriptor_AuthService_RemoveMyUserPhone = new grpc.web.MethodDescriptor(
'/caos.zitadel.auth.api.v1.AuthService/RemoveMyUserPhone',
grpc.web.MethodType.UNARY,
google_protobuf_empty_pb.Empty,
google_protobuf_empty_pb.Empty,
/**
* @param {!proto.google.protobuf.Empty} request
* @return {!Uint8Array}
*/
function(request) {
return request.serializeBinary();
},
google_protobuf_empty_pb.Empty.deserializeBinary
);
/**
* @const
* @type {!grpc.web.AbstractClientBase.MethodInfo<
* !proto.google.protobuf.Empty,
* !proto.google.protobuf.Empty>}
*/
const methodInfo_AuthService_RemoveMyUserPhone = new grpc.web.AbstractClientBase.MethodInfo(
google_protobuf_empty_pb.Empty,
/**
* @param {!proto.google.protobuf.Empty} request
* @return {!Uint8Array}
*/
function(request) {
return request.serializeBinary();
},
google_protobuf_empty_pb.Empty.deserializeBinary
);
/**
* @param {!proto.google.protobuf.Empty} request The
* request proto
* @param {?Object<string, string>} metadata User defined
* call metadata
* @param {function(?grpc.web.Error, ?proto.google.protobuf.Empty)}
* callback The callback function(error, response)
* @return {!grpc.web.ClientReadableStream<!proto.google.protobuf.Empty>|undefined}
* The XHR Node Readable Stream
*/
proto.caos.zitadel.auth.api.v1.AuthServiceClient.prototype.removeMyUserPhone =
function(request, metadata, callback) {
return this.client_.rpcCall(this.hostname_ +
'/caos.zitadel.auth.api.v1.AuthService/RemoveMyUserPhone',
request,
metadata || {},
methodDescriptor_AuthService_RemoveMyUserPhone,
callback);
};
/**
* @param {!proto.google.protobuf.Empty} request The
* request proto
* @param {?Object<string, string>} metadata User defined
* call metadata
* @return {!Promise<!proto.google.protobuf.Empty>}
* A native promise that resolves to the response
*/
proto.caos.zitadel.auth.api.v1.AuthServicePromiseClient.prototype.removeMyUserPhone =
function(request, metadata) {
return this.client_.unaryCall(this.hostname_ +
'/caos.zitadel.auth.api.v1.AuthService/RemoveMyUserPhone',
request,
metadata || {},
methodDescriptor_AuthService_RemoveMyUserPhone);
};
/**
* @const
* @type {!grpc.web.MethodDescriptor<
@ -1684,6 +1764,86 @@ proto.caos.zitadel.auth.api.v1.AuthServicePromiseClient.prototype.changeMyPasswo
};
/**
* @const
* @type {!grpc.web.MethodDescriptor<
* !proto.google.protobuf.Empty,
* !proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy>}
*/
const methodDescriptor_AuthService_GetMyPasswordComplexityPolicy = new grpc.web.MethodDescriptor(
'/caos.zitadel.auth.api.v1.AuthService/GetMyPasswordComplexityPolicy',
grpc.web.MethodType.UNARY,
google_protobuf_empty_pb.Empty,
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy,
/**
* @param {!proto.google.protobuf.Empty} request
* @return {!Uint8Array}
*/
function(request) {
return request.serializeBinary();
},
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.deserializeBinary
);
/**
* @const
* @type {!grpc.web.AbstractClientBase.MethodInfo<
* !proto.google.protobuf.Empty,
* !proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy>}
*/
const methodInfo_AuthService_GetMyPasswordComplexityPolicy = new grpc.web.AbstractClientBase.MethodInfo(
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy,
/**
* @param {!proto.google.protobuf.Empty} request
* @return {!Uint8Array}
*/
function(request) {
return request.serializeBinary();
},
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.deserializeBinary
);
/**
* @param {!proto.google.protobuf.Empty} request The
* request proto
* @param {?Object<string, string>} metadata User defined
* call metadata
* @param {function(?grpc.web.Error, ?proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy)}
* callback The callback function(error, response)
* @return {!grpc.web.ClientReadableStream<!proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy>|undefined}
* The XHR Node Readable Stream
*/
proto.caos.zitadel.auth.api.v1.AuthServiceClient.prototype.getMyPasswordComplexityPolicy =
function(request, metadata, callback) {
return this.client_.rpcCall(this.hostname_ +
'/caos.zitadel.auth.api.v1.AuthService/GetMyPasswordComplexityPolicy',
request,
metadata || {},
methodDescriptor_AuthService_GetMyPasswordComplexityPolicy,
callback);
};
/**
* @param {!proto.google.protobuf.Empty} request The
* request proto
* @param {?Object<string, string>} metadata User defined
* call metadata
* @return {!Promise<!proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy>}
* A native promise that resolves to the response
*/
proto.caos.zitadel.auth.api.v1.AuthServicePromiseClient.prototype.getMyPasswordComplexityPolicy =
function(request, metadata) {
return this.client_.unaryCall(this.hostname_ +
'/caos.zitadel.auth.api.v1.AuthService/GetMyPasswordComplexityPolicy',
request,
metadata || {},
methodDescriptor_AuthService_GetMyPasswordComplexityPolicy);
};
/**
* @const
* @type {!grpc.web.MethodDescriptor<

62
console/src/app/proto/generated/auth_pb.d.ts vendored
View File

@ -1302,6 +1302,68 @@ export namespace Change {
}
}
export class PasswordComplexityPolicy extends jspb.Message {
getId(): string;
setId(value: string): void;
getDescription(): string;
setDescription(value: string): void;
getCreationDate(): google_protobuf_timestamp_pb.Timestamp | undefined;
setCreationDate(value?: google_protobuf_timestamp_pb.Timestamp): void;
hasCreationDate(): boolean;
clearCreationDate(): void;
getChangeDate(): google_protobuf_timestamp_pb.Timestamp | undefined;
setChangeDate(value?: google_protobuf_timestamp_pb.Timestamp): void;
hasChangeDate(): boolean;
clearChangeDate(): void;
getMinLength(): number;
setMinLength(value: number): void;
getHasLowercase(): boolean;
setHasLowercase(value: boolean): void;
getHasUppercase(): boolean;
setHasUppercase(value: boolean): void;
getHasNumber(): boolean;
setHasNumber(value: boolean): void;
getHasSymbol(): boolean;
setHasSymbol(value: boolean): void;
getSequence(): number;
setSequence(value: number): void;
getIsDefault(): boolean;
setIsDefault(value: boolean): void;
serializeBinary(): Uint8Array;
toObject(includeInstance?: boolean): PasswordComplexityPolicy.AsObject;
static toObject(includeInstance: boolean, msg: PasswordComplexityPolicy): PasswordComplexityPolicy.AsObject;
static serializeBinaryToWriter(message: PasswordComplexityPolicy, writer: jspb.BinaryWriter): void;
static deserializeBinary(bytes: Uint8Array): PasswordComplexityPolicy;
static deserializeBinaryFromReader(message: PasswordComplexityPolicy, reader: jspb.BinaryReader): PasswordComplexityPolicy;
}
export namespace PasswordComplexityPolicy {
export type AsObject = {
id: string,
description: string,
creationDate?: google_protobuf_timestamp_pb.Timestamp.AsObject,
changeDate?: google_protobuf_timestamp_pb.Timestamp.AsObject,
minLength: number,
hasLowercase: boolean,
hasUppercase: boolean,
hasNumber: boolean,
hasSymbol: boolean,
sequence: number,
isDefault: boolean,
}
}
export enum UserSessionState {
USERSESSIONSTATE_UNSPECIFIED = 0,
USERSESSIONSTATE_ACTIVE = 1,

467
console/src/app/proto/generated/auth_pb.js
View File

@ -43,6 +43,7 @@ goog.exportSymbol('proto.caos.zitadel.auth.api.v1.OIDCClientAuth', null, global)
goog.exportSymbol('proto.caos.zitadel.auth.api.v1.OIDCResponseType', null, global);
goog.exportSymbol('proto.caos.zitadel.auth.api.v1.Org', null, global);
goog.exportSymbol('proto.caos.zitadel.auth.api.v1.PasswordChange', null, global);
goog.exportSymbol('proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy', null, global);
goog.exportSymbol('proto.caos.zitadel.auth.api.v1.PasswordID', null, global);
goog.exportSymbol('proto.caos.zitadel.auth.api.v1.PasswordRequest', null, global);
goog.exportSymbol('proto.caos.zitadel.auth.api.v1.SearchMethod', null, global);
@ -870,6 +871,27 @@ if (goog.DEBUG && !COMPILED) {
*/
proto.caos.zitadel.auth.api.v1.Change.displayName = 'proto.caos.zitadel.auth.api.v1.Change';
}
/**
* Generated by JsPbCodeGenerator.
* @param {Array=} opt_data Optional initial data array, typically from a
* server response, or constructed directly in Javascript. The array is used
* in place and becomes part of the constructed object. It is not cloned.
* If no data is provided, the constructed object will be empty, but still
* valid.
* @extends {jspb.Message}
* @constructor
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy = function(opt_data) {
jspb.Message.initialize(this, opt_data, 0, -1, null, null);
};
goog.inherits(proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy, jspb.Message);
if (goog.DEBUG && !COMPILED) {
/**
* @public
* @override
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.displayName = 'proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy';
}
/**
* List of repeated fields within this message type.
@ -10049,6 +10071,451 @@ proto.caos.zitadel.auth.api.v1.Change.prototype.hasData = function() {
};
if (jspb.Message.GENERATE_TO_OBJECT) {
/**
* Creates an object representation of this proto suitable for use in Soy templates.
* Field names that are reserved in JavaScript and will be renamed to pb_name.
* To access a reserved field use, foo.pb_<name>, eg, foo.pb_default.
* For the list of reserved names please see:
* com.google.apps.jspb.JsClassTemplate.JS_RESERVED_WORDS.
* @param {boolean=} opt_includeInstance Whether to include the JSPB instance
* for transitional soy proto support: http://goto/soy-param-migration
* @return {!Object}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.toObject = function(opt_includeInstance) {
return proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.toObject(opt_includeInstance, this);
};
/**
* Static version of the {@see toObject} method.
* @param {boolean|undefined} includeInstance Whether to include the JSPB
* instance for transitional soy proto support:
* http://goto/soy-param-migration
* @param {!proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy} msg The msg instance to transform.
* @return {!Object}
* @suppress {unusedLocalVariables} f is only used for nested messages
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.toObject = function(includeInstance, msg) {
var f, obj = {
id: jspb.Message.getFieldWithDefault(msg, 1, ""),
description: jspb.Message.getFieldWithDefault(msg, 2, ""),
creationDate: (f = msg.getCreationDate()) && google_protobuf_timestamp_pb.Timestamp.toObject(includeInstance, f),
changeDate: (f = msg.getChangeDate()) && google_protobuf_timestamp_pb.Timestamp.toObject(includeInstance, f),
minLength: jspb.Message.getFieldWithDefault(msg, 5, 0),
hasLowercase: jspb.Message.getFieldWithDefault(msg, 6, false),
hasUppercase: jspb.Message.getFieldWithDefault(msg, 7, false),
hasNumber: jspb.Message.getFieldWithDefault(msg, 8, false),
hasSymbol: jspb.Message.getFieldWithDefault(msg, 9, false),
sequence: jspb.Message.getFieldWithDefault(msg, 10, 0),
isDefault: jspb.Message.getFieldWithDefault(msg, 11, false)
};
if (includeInstance) {
obj.$jspbMessageInstance = msg;
}
return obj;
};
}
/**
* Deserializes binary data (in protobuf wire format).
* @param {jspb.ByteSource} bytes The bytes to deserialize.
* @return {!proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.deserializeBinary = function(bytes) {
var reader = new jspb.BinaryReader(bytes);
var msg = new proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy;
return proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.deserializeBinaryFromReader(msg, reader);
};
/**
* Deserializes binary data (in protobuf wire format) from the
* given reader into the given message object.
* @param {!proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy} msg The message object to deserialize into.
* @param {!jspb.BinaryReader} reader The BinaryReader to use.
* @return {!proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.deserializeBinaryFromReader = function(msg, reader) {
while (reader.nextField()) {
if (reader.isEndGroup()) {
break;
}
var field = reader.getFieldNumber();
switch (field) {
case 1:
var value = /** @type {string} */ (reader.readString());
msg.setId(value);
break;
case 2:
var value = /** @type {string} */ (reader.readString());
msg.setDescription(value);
break;
case 3:
var value = new google_protobuf_timestamp_pb.Timestamp;
reader.readMessage(value,google_protobuf_timestamp_pb.Timestamp.deserializeBinaryFromReader);
msg.setCreationDate(value);
break;
case 4:
var value = new google_protobuf_timestamp_pb.Timestamp;
reader.readMessage(value,google_protobuf_timestamp_pb.Timestamp.deserializeBinaryFromReader);
msg.setChangeDate(value);
break;
case 5:
var value = /** @type {number} */ (reader.readUint64());
msg.setMinLength(value);
break;
case 6:
var value = /** @type {boolean} */ (reader.readBool());
msg.setHasLowercase(value);
break;
case 7:
var value = /** @type {boolean} */ (reader.readBool());
msg.setHasUppercase(value);
break;
case 8:
var value = /** @type {boolean} */ (reader.readBool());
msg.setHasNumber(value);
break;
case 9:
var value = /** @type {boolean} */ (reader.readBool());
msg.setHasSymbol(value);
break;
case 10:
var value = /** @type {number} */ (reader.readUint64());
msg.setSequence(value);
break;
case 11:
var value = /** @type {boolean} */ (reader.readBool());
msg.setIsDefault(value);
break;
default:
reader.skipField();
break;
}
}
return msg;
};
/**
* Serializes the message to binary data (in protobuf wire format).
* @return {!Uint8Array}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.serializeBinary = function() {
var writer = new jspb.BinaryWriter();
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.serializeBinaryToWriter(this, writer);
return writer.getResultBuffer();
};
/**
* Serializes the given message to binary data (in protobuf wire
* format), writing to the given BinaryWriter.
* @param {!proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy} message
* @param {!jspb.BinaryWriter} writer
* @suppress {unusedLocalVariables} f is only used for nested messages
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.serializeBinaryToWriter = function(message, writer) {
var f = undefined;
f = message.getId();
if (f.length > 0) {
writer.writeString(
1,
f
);
}
f = message.getDescription();
if (f.length > 0) {
writer.writeString(
2,
f
);
}
f = message.getCreationDate();
if (f != null) {
writer.writeMessage(
3,
f,
google_protobuf_timestamp_pb.Timestamp.serializeBinaryToWriter
);
}
f = message.getChangeDate();
if (f != null) {
writer.writeMessage(
4,
f,
google_protobuf_timestamp_pb.Timestamp.serializeBinaryToWriter
);
}
f = message.getMinLength();
if (f !== 0) {
writer.writeUint64(
5,
f
);
}
f = message.getHasLowercase();
if (f) {
writer.writeBool(
6,
f
);
}
f = message.getHasUppercase();
if (f) {
writer.writeBool(
7,
f
);
}
f = message.getHasNumber();
if (f) {
writer.writeBool(
8,
f
);
}
f = message.getHasSymbol();
if (f) {
writer.writeBool(
9,
f
);
}
f = message.getSequence();
if (f !== 0) {
writer.writeUint64(
10,
f
);
}
f = message.getIsDefault();
if (f) {
writer.writeBool(
11,
f
);
}
};
/**
* optional string id = 1;
* @return {string}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getId = function() {
return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 1, ""));
};
/** @param {string} value */
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setId = function(value) {
jspb.Message.setProto3StringField(this, 1, value);
};
/**
* optional string description = 2;
* @return {string}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getDescription = function() {
return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 2, ""));
};
/** @param {string} value */
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setDescription = function(value) {
jspb.Message.setProto3StringField(this, 2, value);
};
/**
* optional google.protobuf.Timestamp creation_date = 3;
* @return {?proto.google.protobuf.Timestamp}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getCreationDate = function() {
return /** @type{?proto.google.protobuf.Timestamp} */ (
jspb.Message.getWrapperField(this, google_protobuf_timestamp_pb.Timestamp, 3));
};
/** @param {?proto.google.protobuf.Timestamp|undefined} value */
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setCreationDate = function(value) {
jspb.Message.setWrapperField(this, 3, value);
};
/**
* Clears the message field making it undefined.
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.clearCreationDate = function() {
this.setCreationDate(undefined);
};
/**
* Returns whether this field is set.
* @return {boolean}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.hasCreationDate = function() {
return jspb.Message.getField(this, 3) != null;
};
/**
* optional google.protobuf.Timestamp change_date = 4;
* @return {?proto.google.protobuf.Timestamp}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getChangeDate = function() {
return /** @type{?proto.google.protobuf.Timestamp} */ (
jspb.Message.getWrapperField(this, google_protobuf_timestamp_pb.Timestamp, 4));
};
/** @param {?proto.google.protobuf.Timestamp|undefined} value */
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setChangeDate = function(value) {
jspb.Message.setWrapperField(this, 4, value);
};
/**
* Clears the message field making it undefined.
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.clearChangeDate = function() {
this.setChangeDate(undefined);
};
/**
* Returns whether this field is set.
* @return {boolean}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.hasChangeDate = function() {
return jspb.Message.getField(this, 4) != null;
};
/**
* optional uint64 min_length = 5;
* @return {number}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getMinLength = function() {
return /** @type {number} */ (jspb.Message.getFieldWithDefault(this, 5, 0));
};
/** @param {number} value */
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setMinLength = function(value) {
jspb.Message.setProto3IntField(this, 5, value);
};
/**
* optional bool has_lowercase = 6;
* Note that Boolean fields may be set to 0/1 when serialized from a Java server.
* You should avoid comparisons like {@code val === true/false} in those cases.
* @return {boolean}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getHasLowercase = function() {
return /** @type {boolean} */ (jspb.Message.getFieldWithDefault(this, 6, false));
};
/** @param {boolean} value */
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setHasLowercase = function(value) {
jspb.Message.setProto3BooleanField(this, 6, value);
};
/**
* optional bool has_uppercase = 7;
* Note that Boolean fields may be set to 0/1 when serialized from a Java server.
* You should avoid comparisons like {@code val === true/false} in those cases.
* @return {boolean}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getHasUppercase = function() {
return /** @type {boolean} */ (jspb.Message.getFieldWithDefault(this, 7, false));
};
/** @param {boolean} value */
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setHasUppercase = function(value) {
jspb.Message.setProto3BooleanField(this, 7, value);
};
/**
* optional bool has_number = 8;
* Note that Boolean fields may be set to 0/1 when serialized from a Java server.
* You should avoid comparisons like {@code val === true/false} in those cases.
* @return {boolean}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getHasNumber = function() {
return /** @type {boolean} */ (jspb.Message.getFieldWithDefault(this, 8, false));
};
/** @param {boolean} value */
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setHasNumber = function(value) {
jspb.Message.setProto3BooleanField(this, 8, value);
};
/**
* optional bool has_symbol = 9;
* Note that Boolean fields may be set to 0/1 when serialized from a Java server.
* You should avoid comparisons like {@code val === true/false} in those cases.
* @return {boolean}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getHasSymbol = function() {
return /** @type {boolean} */ (jspb.Message.getFieldWithDefault(this, 9, false));
};
/** @param {boolean} value */
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setHasSymbol = function(value) {
jspb.Message.setProto3BooleanField(this, 9, value);
};
/**
* optional uint64 sequence = 10;
* @return {number}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getSequence = function() {
return /** @type {number} */ (jspb.Message.getFieldWithDefault(this, 10, 0));
};
/** @param {number} value */
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setSequence = function(value) {
jspb.Message.setProto3IntField(this, 10, value);
};
/**
* optional bool is_default = 11;
* Note that Boolean fields may be set to 0/1 when serialized from a Java server.
* You should avoid comparisons like {@code val === true/false} in those cases.
* @return {boolean}
*/
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getIsDefault = function() {
return /** @type {boolean} */ (jspb.Message.getFieldWithDefault(this, 11, false));
};
/** @param {boolean} value */
proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setIsDefault = function(value) {
jspb.Message.setProto3BooleanField(this, 11, value);
};
/**
* @enum {number}
*/

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

@ -309,6 +309,13 @@ export class ManagementServiceClient {
response: UserPhone) => void
): grpcWeb.ClientReadableStream<UserPhone>;
removeUserPhone(
request: UserID,
metadata: grpcWeb.Metadata | undefined,
callback: (err: grpcWeb.Error,
response: google_protobuf_empty_pb.Empty) => void
): grpcWeb.ClientReadableStream<google_protobuf_empty_pb.Empty>;
resendPhoneVerificationCode(
request: UserID,
metadata: grpcWeb.Metadata | undefined,
@ -1085,6 +1092,11 @@ export class ManagementServicePromiseClient {
metadata?: grpcWeb.Metadata
): Promise<UserPhone>;
removeUserPhone(
request: UserID,
metadata?: grpcWeb.Metadata
): Promise<google_protobuf_empty_pb.Empty>;
resendPhoneVerificationCode(
request: UserID,
metadata?: grpcWeb.Metadata

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

@ -2086,6 +2086,86 @@ proto.caos.zitadel.management.api.v1.ManagementServicePromiseClient.prototype.ch
};
/**
* @const
* @type {!grpc.web.MethodDescriptor<
* !proto.caos.zitadel.management.api.v1.UserID,
* !proto.google.protobuf.Empty>}
*/
const methodDescriptor_ManagementService_RemoveUserPhone = new grpc.web.MethodDescriptor(
'/caos.zitadel.management.api.v1.ManagementService/RemoveUserPhone',
grpc.web.MethodType.UNARY,
proto.caos.zitadel.management.api.v1.UserID,
google_protobuf_empty_pb.Empty,
/**
* @param {!proto.caos.zitadel.management.api.v1.UserID} request
* @return {!Uint8Array}
*/
function(request) {
return request.serializeBinary();
},
google_protobuf_empty_pb.Empty.deserializeBinary
);
/**
* @const
* @type {!grpc.web.AbstractClientBase.MethodInfo<
* !proto.caos.zitadel.management.api.v1.UserID,
* !proto.google.protobuf.Empty>}
*/
const methodInfo_ManagementService_RemoveUserPhone = new grpc.web.AbstractClientBase.MethodInfo(
google_protobuf_empty_pb.Empty,
/**
* @param {!proto.caos.zitadel.management.api.v1.UserID} request
* @return {!Uint8Array}
*/
function(request) {
return request.serializeBinary();
},
google_protobuf_empty_pb.Empty.deserializeBinary
);
/**
* @param {!proto.caos.zitadel.management.api.v1.UserID} request The
* request proto
* @param {?Object<string, string>} metadata User defined
* call metadata
* @param {function(?grpc.web.Error, ?proto.google.protobuf.Empty)}
* callback The callback function(error, response)
* @return {!grpc.web.ClientReadableStream<!proto.google.protobuf.Empty>|undefined}
* The XHR Node Readable Stream
*/
proto.caos.zitadel.management.api.v1.ManagementServiceClient.prototype.removeUserPhone =
function(request, metadata, callback) {
return this.client_.rpcCall(this.hostname_ +
'/caos.zitadel.management.api.v1.ManagementService/RemoveUserPhone',
request,
metadata || {},
methodDescriptor_ManagementService_RemoveUserPhone,
callback);
};
/**
* @param {!proto.caos.zitadel.management.api.v1.UserID} request The
* request proto
* @param {?Object<string, string>} metadata User defined
* call metadata
* @return {!Promise<!proto.google.protobuf.Empty>}
* A native promise that resolves to the response
*/
proto.caos.zitadel.management.api.v1.ManagementServicePromiseClient.prototype.removeUserPhone =
function(request, metadata) {
return this.client_.unaryCall(this.hostname_ +
'/caos.zitadel.management.api.v1.ManagementService/RemoveUserPhone',
request,
metadata || {},
methodDescriptor_ManagementService_RemoveUserPhone);
};
/**
* @const
* @type {!grpc.web.MethodDescriptor<

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

@ -156,6 +156,14 @@ export class AuthUserService {
);
}
public async RemoveMyUserPhone(): Promise<Empty> {
return await this.request(
c => c.removeMyUserPhone,
new Empty(),
f => f,
);
}
private async getMyzitadelPermissions(): Promise<any> {
return await this.request(
c => c.getMyZitadelPermissions,

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

@ -197,6 +197,16 @@ export class MgmtUserService {
);
}
public async RemoveUserPhone(id: string): Promise<Empty> {
const req = new UserID();
req.setId(id);
return await this.request(
c => c.removeUserPhone,
req,
f => f,
);
}
public async DeactivateUser(id: string): Promise<UserPhone> {
const req = new UserID();
req.setId(id);

4
console/src/app/services/storage.service.ts
View File

@ -1,8 +1,6 @@
import { Injectable } from '@angular/core';
import { OAuthStorage } from 'angular-oauth2-oidc';
import { GrpcService } from './grpc.service';
@Injectable({
providedIn: 'root',
@ -11,7 +9,7 @@ import { GrpcService } from './grpc.service';
export class StorageService implements OAuthStorage {
private storage: Storage = window.sessionStorage;
constructor(private grpcService: GrpcService) { }
constructor() { }
public setItem<TValue = string>(key: string, value: TValue): void {
this.storage.setItem(this.getPrefixedKey(key), JSON.stringify(value));

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

@ -20,12 +20,14 @@
},
"MENU": {
"PERSONAL_INFO": "Persönliche Informationen",
"IAM":"IAM",
"IAM":"Administration",
"ORGANIZATION": "Organisation",
"PROJECTSSECTION":"Projekte",
"PROJECT": "Projekte",
"GRANTEDPROJECT":"Berechtigte Projekte",
"USERSECTION":"Benutzer",
"USER": "Benutzer",
"LOGOUT": "abmelden",
"LOGOUT": "alle Benutzer abmelden",
"NEWORG":"Neue Organisation",
"IAMADMIN":"Sie sind ein IAM Administrator. Sie haben erweiterte Berechtigungen!",
"SHOWORGS":"Alle organisationen anzeigen"
@ -64,7 +66,9 @@
"LOGINNAMESDESC":"Mit diesen Namen können Sie sich anmelden",
"COPY":"In die Zwischenablage kopieren",
"COPIED":"In die Zwischenablage kopiert!",
"NOUSER":"Kein User"
"NOUSER":"Kein User",
"REACTIVATE":"Reaktivieren",
"DEACTIVATE":"Deaktivieren"
},
"MFA": {
"TITLE": "Multifaktor-Authentifizierung",
@ -220,7 +224,9 @@
"ORGDOMAIN_VERIFICATION_SKIP":"Sie können die Überprüfung vorerst überspringen und Ihre Organisation weiter erstellen. Um Ihre Organisation jedoch verwenden zu können, muss dieser Schritt abgeschlossen sein!",
"ORGDETAILUSER_TITLE":"Organisationsbesitzer hinzufügen",
"DOWNLOAD_FILE":"File download",
"SELECTORGTOOLTIP":"Wähle diese Organisation"
"SELECTORGTOOLTIP":"Wähle diese Organisation",
"PRIMARYDOMAIN":"Primäre Domain",
"STATE":"Status"
},
"DOMAINS": {
"TITLE":"Domains",
@ -330,7 +336,11 @@
"TYPE":{
"OWNED":"Eigene Projekte",
"GRANTED":"Berechtigte Projekte"
}
},
"PINNED":"Angepinnt",
"ALL": "Alle",
"CREATEDON":"erstellt am",
"LASTMODIFIED":"zuletzt verändert am"
},
"STATE": {
"TITLE":"Status",
@ -420,7 +430,8 @@
"STATE":"Status",
"TYPE":"Typ",
"CREATIONDATE":"Erstelldatum",
"CHANGEDATE":"Letzte Änderung"
"CHANGEDATE":"Letzte Änderung",
"RESOURCEOWNER":"Besitzer"
}
},
"APP": {

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

@ -20,12 +20,14 @@
},
"MENU": {
"PERSONAL_INFO": "Personal Information",
"IAM":"IAM",
"IAM":"Administration",
"ORGANIZATION": "Organization",
"PROJECTSSECTION":"Projects",
"PROJECT": "Projects",
"GRANTEDPROJECT":"Granted Projects",
"USERSECTION":"Benutzer",
"USER": "Users",
"LOGOUT": "Log out",
"LOGOUT": "Logout all users",
"NEWORG":"New Organization",
"IAMADMIN":"You are an IAM Administrator. Note that you have enhanced permissions!",
"SHOWORGS":"Show all organizations"
@ -64,7 +66,9 @@
"LOGINNAMESDESC":"You can log into zitadel with these names",
"COPY":"Copy to clipboard",
"COPIED":"Copied to clipboard!",
"NOUSER":"No User"
"NOUSER":"No User",
"REACTIVATE":"Reactivate",
"DEACTIVATE":"Deactivate"
},
"MFA": {
"TITLE": "Multifactor Authentication",
@ -221,16 +225,18 @@
"ORGDOMAIN_VERIFICATION_SKIP":"You can skip verification for now and continue to create your organization, but in order to use your organization this step has to be completed!",
"ORGDETAILUSER_TITLE":"Configure Organization Owner",
"DOWNLOAD_FILE":"Download file",
"SELECTORGTOOLTIP":"Select this organization"
"SELECTORGTOOLTIP":"Select this organization",
"PRIMARYDOMAIN":"Primary Domain",
"STATE":"State"
},
"DOMAINS": {
"TITLE":"Domains",
"DESCRIPTION":"Configure your domains on which your users will be registered."
},
"STATE": {
"0": "nicht definiert",
"1": "aktiv",
"2": "inaktiv"
"0": "not defined",
"1": "active",
"2": "deactivated"
},
"MEMBER": {
"TITLE":"Organization Managers",
@ -331,7 +337,11 @@
"TYPE":{
"OWNED":"Owned Projects",
"GRANTED":"Granted Projects"
}
},
"PINNED":"Pinned",
"ALL": "All",
"CREATEDON":"created on",
"LASTMODIFIED":"last modified on"
},
"STATE": {
"TITLE":"State",
@ -421,7 +431,8 @@
"STATE":"Status",
"TYPE":"Type",
"CREATIONDATE":"Created At",
"CHANGEDATE":"Last Modified"
"CHANGEDATE":"Last Modified",
"RESOURCEOWNER":"Owner"
}
},
"APP": {

2
console/src/styles/table.scss
View File

@ -22,7 +22,7 @@
color: mat-color($foreground, text);
white-space: nowrap;
background-color: #8795a1;
padding: .5rem 1rem;
padding: 3px 1rem;
}
td {