TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-14 09:22:09 +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
57 changed files with 1299 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>