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

feat(console): organization overview table, table, org context filtering, fix grpc error log, cleanup pipes (#796)

Browse Source 
* chore(deps-dev): bump @angular/cli from 10.0.8 to 10.1.3 in /console (#785)

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

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

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

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

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

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

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

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

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

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

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump stylelint from 13.7.1 to 13.7.2 in /console (#782)

Bumps [stylelint](https://github.com/stylelint/stylelint) from 13.7.1 to 13.7.2.
- [Release notes](https://github.com/stylelint/stylelint/releases)
- [Changelog](https://github.com/stylelint/stylelint/blob/master/CHANGELOG.md)
- [Commits](https://github.com/stylelint/stylelint/compare/13.7.1...13.7.2)

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

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump karma from 5.2.1 to 5.2.3 in /console (#781)

Bumps [karma](https://github.com/karma-runner/karma) from 5.2.1 to 5.2.3.
- [Release notes](https://github.com/karma-runner/karma/releases)
- [Changelog](https://github.com/karma-runner/karma/blob/master/CHANGELOG.md)
- [Commits](https://github.com/karma-runner/karma/compare/v5.2.1...v5.2.3)

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

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump moment from 2.27.0 to 2.29.0 in /console (#780)

Bumps [moment](https://github.com/moment/moment) from 2.27.0 to 2.29.0.
- [Release notes](https://github.com/moment/moment/releases)
- [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md)
- [Commits](https://github.com/moment/moment/compare/2.27.0...2.29.0)

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

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @types/node from 14.6.4 to 14.11.2 in /console (#778)

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 14.6.4 to 14.11.2.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

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

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump prettier from 2.1.1 to 2.1.2 in /console (#757)

Bumps [prettier](https://github.com/prettier/prettier) from 2.1.1 to 2.1.2.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/master/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/2.1.1...2.1.2)

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

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump ts-protoc-gen from 0.12.0 to 0.13.0 in /console (#737)

Bumps [ts-protoc-gen](https://github.com/improbable-eng/ts-protoc-gen) from 0.12.0 to 0.13.0.
- [Release notes](https://github.com/improbable-eng/ts-protoc-gen/releases)
- [Changelog](https://github.com/improbable-eng/ts-protoc-gen/blob/master/CHANGELOG.md)
- [Commits](https://github.com/improbable-eng/ts-protoc-gen/compare/0.12.0...0.13.0)

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

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump jasmine-spec-reporter in /console (#762)

Bumps [jasmine-spec-reporter](https://github.com/bcaudan/jasmine-spec-reporter) from 5.0.2 to 6.0.0.
- [Release notes](https://github.com/bcaudan/jasmine-spec-reporter/releases)
- [Changelog](https://github.com/bcaudan/jasmine-spec-reporter/blob/master/CHANGELOG.md)
- [Commits](https://github.com/bcaudan/jasmine-spec-reporter/compare/v5.0.2...v6.0.0)

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

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

* fix: package

* change html lang to translation lang

* disable detail view org idp

* catch errorcode 16 in auth response interceptor

* new icons

* refactor pipes, idp table config

* fix router guard

* lint

* allowed commonjs deps

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

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

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

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

* clear table warning

* org overview table, header filter

* toolbar filter

* user table filter

* fix org filter themed color, reject error

* org context filter

* button cleanup

* commonjs deps, remove a11y module

* replace progressbar with spinner

* dynamic user, org filter

* ts lint, scss lint

* cleanup table, row highlighting

* lint

* fix i18n description, refresh idp list in login p

* remove async from grpc services, fix external idp

* remove external idp

* fix theme toggle

* change iam policy header i18n

* sticky action columns

* lint

* add i18n filter to user, remove unused org code

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
This commit is contained in:
Max Peintner
2020-10-01 15:53:43 +02:00
committed by GitHub
parent bdcf9fcc5c
commit 124988e2d2
119 changed files with 1361 additions and 1451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
console/src/app/pages/iam/failed-events/failed-events.component.html
View File

@@ -34,9 +34,9 @@
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> {{ 'IAM.FAILEDEVENTS.ACTIONS' | translate }} </th>
<td mat-cell *matCellDef="let event">
<ng-container matColumnDef="actions" stickyEnd>
<th mat-header-cell *matHeaderCellDef></th>
<td class="back" mat-cell *matCellDef="let event">
<button color="warn" mat-icon-button matTooltip="{{'IAM.FAILEDEVENTS.DELETE' | translate}}"
(click)="cancelEvent(event.viewName, event.database, event.failedSequence)">
<i class="las la-minus-circle"></i>
@@ -45,7 +45,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="eventDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: eventDisplayedColumns;"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: eventDisplayedColumns;"></tr>
</table>
<mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
</mat-paginator>

12
console/src/app/pages/iam/failed-events/failed-events.component.scss
View File

@@ -27,6 +27,18 @@
}
}
tr {
button {
visibility: hidden;
}
&:hover {
button {
visibility: visible;
}
}
}
.pointer {
outline: none;
cursor: pointer;

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

@@ -12,8 +12,7 @@
</button>
</ng-template>
<ng-template appHasRole actions [appHasRole]="['iam.member.write']">
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
mat-raised-button>
<a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
@@ -76,7 +75,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>

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

@@ -1,7 +1,3 @@
.add-button {
border-radius: .5rem;
}
.table-wrapper {
overflow: auto;
width: 100%;
@@ -28,12 +24,6 @@
width: 40px;
}
.data-row {
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;

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

@@ -1,6 +1,6 @@
<h1>{{'ORG.POLICY.TITLE' | translate}}</h1>
<h1>{{'IAM.POLICY.TITLE' | translate}}</h1>
<p class="top-desc">{{'ORG.POLICY.DESCRIPTION' | translate}}</p>
<p class="top-desc">{{'IAM.POLICY.DESCRIPTION' | translate}}</p>
<div class="row-lyt">
<ng-template appHasRole [appHasRole]="['policy.read']">

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

@@ -70,7 +70,6 @@ h1 {
button {
margin-right: 1rem;
border-radius: .5rem;
}
}
}

16
console/src/app/pages/iam/iam-views/iam-views.component.html
View File

@@ -2,22 +2,20 @@
<app-refresh-table *ngIf="dataSource" (refreshed)="loadViews()" [dataSize]="dataSource.data.length"
[loading]="loading$ | async">
<table [dataSource]="dataSource" mat-table class="table" aria-label="Elements">
<table [dataSource]="dataSource" mat-table class="table" aria-label="Elements" matSort>
<ng-container matColumnDef="viewName">
<th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.VIEWNAME' | translate }} </th>
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'IAM.VIEWS.VIEWNAME' | translate }} </th>
<td mat-cell *matCellDef="let view"> {{view.viewName}} </td>
</ng-container>
<ng-container matColumnDef="database">
<th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.DATABASE' | translate }} </th>
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'IAM.VIEWS.DATABASE' | translate }} </th>
<td mat-cell *matCellDef="let view"> {{view.database}} </td>
</ng-container>
<ng-container matColumnDef="sequence">
<th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.SEQUENCE' | translate }} </th>
<td mat-cell *matCellDef="let view">
<span>{{view?.processedSequence}}</span>
</td>
<td mat-cell *matCellDef="let view"> {{view.processedSequence}} </td>
</ng-container>
<ng-container matColumnDef="timestamp">
@@ -27,8 +25,8 @@
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.ACTIONS' | translate }} </th>
<ng-container matColumnDef="actions" stickyEnd>
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let view">
<button mat-icon-button matTooltip="{{'IAM.VIEWS.CLEAR' | translate}}"
(click)="cancelView(view.viewName, view.database)">
@@ -38,7 +36,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
</mat-paginator>

12
console/src/app/pages/iam/iam-views/iam-views.component.scss
View File

@@ -27,6 +27,18 @@
}
}
tr {
button {
visibility: hidden;
}
&:hover {
button {
visibility: visible;
}
}
}
.pointer {
outline: none;
cursor: pointer;

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

@@ -1,10 +1,14 @@
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { View } from 'src/app/proto/generated/admin_pb';
import { AdminService } from 'src/app/services/admin.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-iam-views',
@@ -12,6 +16,8 @@ import { AdminService } from 'src/app/services/admin.service';
styleUrls: ['./iam-views.component.scss'],
})
export class IamViewsComponent implements AfterViewInit {
@ViewChild(MatSort) sort!: MatSort;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
public dataSource!: MatTableDataSource<View.AsObject>;
@@ -19,7 +25,7 @@ export class IamViewsComponent implements AfterViewInit {
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
constructor(private adminService: AdminService) {
constructor(private adminService: AdminService, private dialog: MatDialog, private toast: ToastService) {
this.loadViews();
}
@@ -38,10 +44,31 @@ export class IamViewsComponent implements AfterViewInit {
).subscribe(views => {
this.dataSource = new MatTableDataSource(views);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}
public cancelView(viewname: string, db: string): void {
this.adminService.ClearView(viewname, db);
const dialogRef = this.dialog.open(WarnDialogComponent, {
data: {
confirmKey: 'ACTIONS.CLEAR',
cancelKey: 'ACTIONS.CANCEL',
titleKey: 'IAM.VIEWS.DIALOG.VIEW_CLEAR_TITLE',
descriptionKey: 'IAM.VIEWS.DIALOG.VIEW_CLEAR_DESCRIPTION',
},
width: '400px',
});
dialogRef.afterClosed().subscribe(resp => {
if (resp) {
this.adminService.ClearView(viewname, db).then(() => {
this.toast.showInfo('IAM.VIEWS.CLEARED', true);
this.loadViews();
}).catch(error => {
this.toast.showError(error);
});
}
});
}
}

1
console/src/app/pages/iam/iam.module.ts
View File

@@ -63,6 +63,7 @@ import { IamComponent } from './iam.component';
SharedModule,
RefreshTableModule,
HasRolePipeModule,
MatSortModule,
],
})
export class IamModule { }

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

@@ -85,7 +85,6 @@ h1 {
margin-top: 3rem;
display: block;
padding: .5rem 4rem;
border-radius: .5rem;
}
}
@@ -138,7 +137,6 @@ h1 {
.small-button {
display: block;
border-radius: .5rem;
}
.fill-space {
@@ -148,7 +146,6 @@ h1 {
.big-button {
display: block;
padding: .5rem 4rem;
border-radius: .5rem;
}
}

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

@@ -19,8 +19,4 @@
.ok-button {
margin-left: .5rem;
}
button {
border-radius: .5rem;
}
}

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

@@ -4,7 +4,6 @@
button {
margin: 1rem .5rem;
border-radius: .5rem;
display: block;
}
}
@@ -34,8 +33,4 @@
.ok-button {
margin-left: .5rem;
}
button {
border-radius: .5rem;
}
}

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

@@ -21,8 +21,8 @@
mat-icon-button (click)="removeDomain(domain.domain)"><i class="las la-trash"></i></button>
</div>
<p class="new-desc">{{'ORG.PAGES.ORGDOMAIN_VERIFICATION' | translate}}</p>
<button [disabled]="(canwrite$ | async) == false" class="add-button" matTooltip="Add domain"
mat-raised-button color="primary" (click)="addNewDomain()">{{'ORG.DOMAINS.NEW' | translate}}
<button [disabled]="(canwrite$ | async) == false" matTooltip="Add domain" mat-raised-button
color="primary" (click)="addNewDomain()">{{'ORG.DOMAINS.NEW' | translate}}
</button>
</app-card>
</ng-container>
@@ -58,4 +58,4 @@
</mat-tab>
</mat-tab-group>
</div>
</app-meta-layout>
</app-meta-layout>

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

@@ -41,7 +41,6 @@
}
.verify-btn {
border-radius: .5rem;
font-size: 13px;
}
@@ -50,10 +49,6 @@
}
}
.add-button {
border-radius: .5rem;
}
.new-desc {
font-size: 14px;
color: #818a8a;

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

@@ -1,62 +0,0 @@
<div class="max-width-container">
<h1>{{ 'ORG.PAGES.LIST' | translate }}</h1>
<p class="top-desc">{{'ORG.PAGES.LISTDESCRIPTION' | translate}}</p>
<div class="view-toggle">
<div class="anim-list" *ngIf="selection.selected.length > 0">
</div>
<button disabled mat-icon-button>
<mat-icon></mat-icon>
</button>
</div>
<div class="container">
<p class="n-items" *ngIf="!loading && selection.selected.length > 0">{{'PROJECT.PAGES.PINNED' | translate}}</p>
<div matTooltip="{{'ORG.PAGES.SELECTORGTOOLTIP' | translate}}" class="item card"
*ngFor="let org of selection.selected; index as i" (click)="selectOrg(org, $event)"
[ngClass]="{ active: activeOrg?.id === org?.id }">
<div class="text-part">
<span class="description">{{org.id}}</span>
<span class="name" *ngIf="org.name">{{ org.name }}</span>
<span class="name" *ngIf="!org.name">No Name</span>
<span class="fill-space"></span>
<div class="icons">
</div>
</div>
<button [ngClass]="{ selected: selection.isSelected(org)}" (click)="selection.toggle(org)"
class="edit-button" mat-icon-button>
<mat-icon>push_pin_outline</mat-icon>
</button>
</div>
</div>
<div class="container">
<p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>
<div matTooltip="{{'ORG.PAGES.SELECTORGTOOLTIP' | translate}}" class="item card"
*ngFor="let org of notPinned; index as i" (click)="selectOrg(org, $event)"
[ngClass]="{ active: activeOrg?.id === org?.id }">
<div class="text-part">
<span class="description">{{org.id}}</span>
<span class="name" *ngIf="org.name">{{ org.name }}</span>
<span class="name" *ngIf="!org.name">No Name</span>
<span class="fill-space"></span>
<div class="icons">
</div>
</div>
<button [ngClass]="{ selected: selection.isSelected(org)}" (click)="selection.toggle(org)"
class="edit-button" mat-icon-button>
<mat-icon>push_pin_outline</mat-icon>
</button>
</div>
<ng-template appHasRole [appHasRole]="['iam.write']">
<div class="card add-org-button" [routerLink]="[ '/org/create' ]">
<mat-icon class="icon">add</mat-icon>
<span>Add new organization</span>
</div>
</ng-template>
</div>
</div>

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

@@ -1,251 +0,0 @@
h1 {
margin-top: 0;
}
.top-desc {
color: #8795a1;
}
.view-toggle {
width: 100%;
display: flex;
justify-content: flex-end;
padding-bottom: .5rem;
border-bottom: 1px solid #2d2e30;
.anim-list {
display: flex;
justify-content: flex-end;
align-items: center;
}
button {
&.left-button {
margin-right: 1rem;
}
}
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
box-sizing: border-box;
.item {
position: relative;
z-index: 100;
margin: 1rem;
flex-basis: 230px;
display: flex;
text-decoration: none;
overflow: hidden;
cursor: pointer;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 1rem;
border-radius: .5rem;
box-sizing: border-box;
min-height: 130px;
* {
box-sizing: border-box;
}
&.active {
border: 2px solid #38649d;
}
.selection-icon {
opacity: 0;
position: absolute;
top: -12px;
left: -12px;
}
img {
height: 50px;
width: 50px;
margin: 1rem;
}
.text-part {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
// justify-content: center;
min-height: 70px;
padding: .5rem 0;
.top {
font-size: .8rem;
margin-bottom: 0;
margin-top: .5rem;
}
.name {
margin-top: 1rem;
font-size: 1.2rem;
margin-bottom: .5rem;
}
.description {
font-size: .8rem;
margin-top: .5rem;
}
.created {
font-size: .8rem;
}
.organization {
display: flex;
align-items: center;
margin-top: 1rem;
.org_avatar {
height: 25px;
width: 25px;
border-radius: 50%;
margin: 0;
margin-right: 1rem;
}
}
.fill-space {
flex: 1;
}
.icons {
margin-top: 1rem;
transition: all .3s;
display: flex;
align-items: center;
.current {
height: 10px;
font-size: 14px;
width: 10px;
border-radius: 50%;
background-color: rgb(144, 212, 210);
display: flex;
margin: .5rem 0;
align-items: center;
box-sizing: border-box;
span {
margin-left: 1.5rem;
text-transform: uppercase;
color: rgb(144, 212, 210);
}
}
.icon {
opacity: 0;
margin-right: 3px;
font-size: 1.3rem;
height: 1.4rem;
color: #8795a1;
}
}
}
.edit-button {
opacity: 0;
user-select: none;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
margin-bottom: .25rem;
color: #8795a1;
&:hover {
opacity: 1;
color: white;
}
&.selected {
opacity: 1;
}
}
&:hover {
.edit-button {
opacity: 1;
}
.text-part {
.icons {
.icon {
opacity: 1;
}
}
}
}
&.selected {
.text-part {
.icons {
opacity: 1;
}
}
.edit-button {
opacity: 1;
}
}
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
}
.add-org-button {
z-index: 100;
flex-basis: 230px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 130px;
border-radius: .5rem;
margin: 1rem;
box-sizing: border-box;
.icon {
display: flex;
justify-content: center;
align-self: center;
margin-bottom: 1rem;
height: 2.5rem;
line-height: 2.5rem;
font-size: 2.5rem;
}
&:hover {
background-color: #ffffff25;
.icon,
span {
&.disabled {
color: gray;
}
}
}
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
}
}
.n-items {
padding: 0 1rem;
font-size: .8rem;
color: #8795a1;
flex-basis: 100%;
}

112
console/src/app/pages/orgs/org-grid/org-grid.component.ts
View File

@@ -1,112 +0,0 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Observable, of } from 'rxjs';
import { switchMap, take } from 'rxjs/operators';
import { Org } from 'src/app/proto/generated/auth_pb';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-org-grid',
templateUrl: './org-grid.component.html',
styleUrls: ['./org-grid.component.scss'],
})
export class OrgGridComponent {
public activeOrg!: Org.AsObject;
public orgList: Org.AsObject[] = [];
public selection: SelectionModel<Org.AsObject> = new SelectionModel<Org.AsObject>(true, []);
public selectedIndex: number = -1;
public loading: boolean = false;
public notPinned: Array<Org.AsObject> = [];
constructor(
private userService: GrpcAuthService,
private toast: ToastService,
private router: Router,
) {
this.loading = true;
this.getData(10, 0);
this.userService.GetActiveOrg().then(org => this.activeOrg = org);
this.selection.changed.subscribe(selection => {
this.setPrefixedItem('pinned-orgs', JSON.stringify(
this.selection.selected.map(item => item.id),
)).pipe(take(1)).subscribe(() => {
selection.added.forEach(element => {
const index = this.notPinned.findIndex(item => item.id === element.id);
this.notPinned.splice(index, 1);
});
this.notPinned.push(...selection.removed);
});
});
}
public reorganizeItems(): void {
this.getPrefixedItem('pinned-orgs').pipe(take(1)).subscribe(storageEntry => {
if (storageEntry) {
const array: string[] = JSON.parse(storageEntry);
const toSelect: Org.AsObject[] = this.orgList.filter((item, index) => {
if (array.includes(item.id)) {
// this.notPinned.splice(index, 1);
return true;
}
});
this.selection.select(...toSelect);
const toNotPinned: Org.AsObject[] = this.orgList.filter((item, index) => {
if (!array.includes(item.id)) {
return true;
}
});
this.notPinned = toNotPinned;
}
});
}
private getPrefixedItem(key: string): Observable<string | null> {
return this.userService.user.pipe(
take(1),
switchMap(user => {
return of(localStorage.getItem(`${user.id}:${key}`));
}),
);
}
private setPrefixedItem(key: string, value: any): Observable<void> {
return this.userService.user.pipe(
take(1),
switchMap(user => {
return of(localStorage.setItem(`${user.id}:${key}`, value));
}),
);
}
private getData(limit: number, offset: number): void {
this.userService.SearchMyProjectOrgs(limit, offset).then(res => {
this.orgList = res.toObject().resultList;
this.notPinned = Object.assign([], this.orgList);
this.reorganizeItems();
this.loading = false;
}).catch(error => {
this.toast.showError(error);
this.loading = false;
});
}
public selectOrg(item: Org.AsObject, event?: any): void {
if (event && !event.target.classList.contains('mat-icon')) {
this.userService.setActiveOrg(item);
this.routeToOrg(item);
}
}
public routeToOrg(item: Org.AsObject): void {
this.router.navigate(['/orgs', item.id]);
}
}

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

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

56
console/src/app/pages/orgs/org-list/org-list.component.html Normal file
View File

@@ -0,0 +1,56 @@
<div class="max-width-container">
<h1>{{ 'ORG.PAGES.LIST' | translate }}</h1>
<p class="top-desc">{{'ORG.PAGES.LISTDESCRIPTION' | translate}}</p>
<app-refresh-table *ngIf="dataSource" (refreshed)="refresh()" [dataSize]="dataSource.data.length"
[loading]="loading$ | async">
<mat-form-field @appearfade *ngIf="orgSearchKey != undefined" actions class="filter">
<mat-label>{{'ORG.PAGES.FILTER' | translate}}</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}"
#input>
</mat-form-field>
<table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
{{'ORG.PAGES.ACTIVE' | translate}}
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-radio-button (change)="selectOrg(row)" color="primary" (click)="$event.stopPropagation()"
[checked]="row.id == activeOrg.id">
</mat-radio-button>
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'ORG.PAGES.ID' | translate }} </th>
<td mat-cell *matCellDef="let org"> {{org.id}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header
[ngClass]="{'search-active': this.orgSearchKey == MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME}">
{{ 'ORG.PAGES.NAME' | translate }}
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{key: MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME}"></template>
</th>
<td mat-cell *matCellDef="let org"> {{org.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
</mat-paginator>
</app-refresh-table>
</div>
<ng-template #templateRef let-key="key">
<button class="search-button" mat-icon-button
(click)="this.orgSearchKey != key ? this.orgSearchKey = key : this.orgSearchKey = undefined">
<mat-icon *ngIf="this.orgSearchKey != key">search</mat-icon>
<mat-icon *ngIf="this.orgSearchKey == key">search_off</mat-icon>
</button>
</ng-template>

53
console/src/app/pages/orgs/org-list/org-list.component.scss Normal file
View File

@@ -0,0 +1,53 @@
h1 {
margin-top: 0;
}
.top-desc {
color: #8795a1;
}
.table,
.paginator {
width: 100%;
td,
th {
padding: 0 1rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.selection {
width: 50px;
max-width: 50px;
}
}
.pointer {
outline: none;
cursor: pointer;
}
.filter {
margin-left: 1rem;
}
th {
.search-button {
visibility: hidden;
}
&:hover,
&.search-active {
.search-button {
visibility: visible;
}
}
}

12
console/src/app/pages/orgs/org-grid/org-grid.component.spec.ts → console/src/app/pages/orgs/org-list/org-list.component.spec.ts
View File

@@ -1,20 +1,20 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { OrgGridComponent } from './org-grid.component';
import { OrgListComponent } from './org-list.component';
describe('OrgGridComponent', () => {
let component: OrgGridComponent;
let fixture: ComponentFixture<OrgGridComponent>;
describe('OrgListComponent', () => {
let component: OrgListComponent;
let fixture: ComponentFixture<OrgListComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [OrgGridComponent],
declarations: [OrgListComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(OrgGridComponent);
fixture = TestBed.createComponent(OrgListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

83
console/src/app/pages/orgs/org-list/org-list.component.ts Normal file
View File

@@ -0,0 +1,83 @@
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { enterAnimations } from 'src/app/animations';
import { MyProjectOrgSearchKey, MyProjectOrgSearchQuery, Org, SearchMethod } from 'src/app/proto/generated/auth_pb';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
@Component({
selector: 'app-org-list',
templateUrl: './org-list.component.html',
styleUrls: ['./org-list.component.scss'],
animations: [
enterAnimations,
],
})
export class OrgListComponent implements AfterViewInit {
public orgSearchKey: MyProjectOrgSearchKey | undefined = undefined;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;
public dataSource!: MatTableDataSource<Org.AsObject>;
public displayedColumns: string[] = ['select', 'id', 'name'];
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public activeOrg!: Org.AsObject;
public MyProjectOrgSearchKey: any = MyProjectOrgSearchKey;
constructor(
private authService: GrpcAuthService,
) {
this.loadOrgs(10, 0);
this.authService.GetActiveOrg().then(org => this.activeOrg = org);
}
public ngAfterViewInit(): void {
this.loadOrgs(10, 0);
}
public loadOrgs(limit: number, offset: number, filter?: string): void {
this.loadingSubject.next(true);
let query;
if (filter) {
query = new MyProjectOrgSearchQuery();
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
query.setKey(MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME);
query.setValue(filter);
}
from(this.authService.SearchMyProjectOrgs(limit, offset, query ? [query] : undefined)).pipe(
map(resp => {
return resp.toObject().resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(views => {
this.dataSource = new MatTableDataSource(views);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}
public selectOrg(item: Org.AsObject, event?: any): void {
this.authService.setActiveOrg(item);
}
public refresh(): void {
this.loadOrgs(this.paginator.length, this.paginator.pageSize * this.paginator.pageIndex);
}
public applyFilter(event: Event): void {
const filterValue = (event.target as HTMLInputElement).value;
this.loadOrgs(
this.paginator.pageSize,
this.paginator.pageIndex * this.paginator.pageSize,
filterValue.trim().toLowerCase(),
);
}
}

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

@@ -0,0 +1,42 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatRadioModule } from '@angular/material/radio';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
import { OrgListRoutingModule } from './org-list-routing.module';
import { OrgListComponent } from './org-list.component';
@NgModule({
declarations: [OrgListComponent],
imports: [
CommonModule,
OrgListRoutingModule,
MatTableModule,
TranslateModule,
RefreshTableModule,
TimestampToDatePipeModule,
LocalizedDatePipeModule,
MatPaginatorModule,
MatSortModule,
MatIconModule,
MatButtonModule,
MatTooltipModule,
MatRadioModule,
MatFormFieldModule,
MatInputModule,
FormsModule,
],
})
export class OrgListModule { }

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

@@ -9,8 +9,7 @@
</button>
</ng-template>
<ng-template appHasRole actions [appHasRole]="['org.member.write:'+org?.id,'org.member.write']">
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
mat-raised-button>
<a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
@@ -73,7 +72,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>

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

@@ -24,12 +24,6 @@
width: 40px;
}
.data-row {
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
@@ -37,10 +31,6 @@
}
}
.add-button {
border-radius: .5rem;
}
.pointer {
outline: none;
cursor: pointer;

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

@@ -5,7 +5,6 @@ import { PolicyComponentServiceType, PolicyComponentType } from 'src/app/modules
import { OrgCreateComponent } from './org-create/org-create.component';
import { OrgDetailComponent } from './org-detail/org-detail.component';
import { OrgGridComponent } from './org-grid/org-grid.component';
const routes: Routes = [
{
@@ -82,7 +81,7 @@ const routes: Routes = [
},
{
path: 'overview',
component: OrgGridComponent,
loadChildren: () => import('./org-list/org-list.module').then(m => m.OrgListModule),
},
];

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

@@ -25,12 +25,11 @@ import { ChangesModule } from '../../modules/changes/changes.module';
import { AddDomainDialogModule } from './org-detail/add-domain-dialog/add-domain-dialog.module';
import { DomainVerificationComponent } from './org-detail/domain-verification/domain-verification.component';
import { OrgDetailComponent } from './org-detail/org-detail.component';
import { OrgGridComponent } from './org-grid/org-grid.component';
import { OrgsRoutingModule } from './orgs-routing.module';
import { PolicyGridComponent } from './policy-grid/policy-grid.component';
@NgModule({
declarations: [OrgDetailComponent, OrgGridComponent, PolicyGridComponent, DomainVerificationComponent],
declarations: [OrgDetailComponent, PolicyGridComponent, DomainVerificationComponent],
imports: [
CommonModule,
HasRolePipeModule,

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

@@ -70,7 +70,6 @@ h1 {
button {
margin-right: 1rem;
border-radius: .5rem;
}
}
}

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

@@ -142,7 +142,6 @@ p.desc {
margin-top: 3rem;
display: block;
padding: .5rem 4rem;
border-radius: .5rem;
float: right;
}
}

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

@@ -42,8 +42,7 @@
</app-card>
<app-card title="{{ 'APP.OIDC.TITLE' | translate }}" *ngIf="app && app.oidcConfig">
<div class="card-actions" card-actions
*ngIf="app?.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE">
<div card-actions *ngIf="app?.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE">
<button mat-stroked-button
(click)="regenerateOIDCClientSecret()">{{'APP.OIDC.REGENERATESECRET' | translate}}</button>
</div>

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

@@ -33,12 +33,6 @@
font-size: 14px;
}
.card-actions {
button {
border-radius: .5rem;
}
}
.compliance .problem {
font-size: 14px;
}
@@ -109,7 +103,6 @@
margin: 0 -.5rem;
.submit-button {
border-radius: .5rem;
margin: 0 .5rem;
}
}

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

@@ -18,10 +18,6 @@
.ok-button {
margin-left: .5rem;
}
button {
border-radius: .5rem;
}
}
.flex {

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

@@ -63,7 +63,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/granted-projects', row.projectId, 'grant', row.id]"></tr>
</table>

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

@@ -6,7 +6,6 @@
.icon-button {
display: block;
border-radius: .5rem;
}
}
@@ -33,14 +32,6 @@
}
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;

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

@@ -1,8 +1,8 @@
<app-refresh-table [loading]="dataSource.loading$ | async" [selection]="selection" (refreshed)="refreshPage()"
[dataSize]="dataSource.totalResult" [timestamp]="dataSource?.viewTimestamp">
<ng-template appHasRole [appHasRole]="['project.app.write']" actions>
<a [disabled]="disabled" class="add-button" [routerLink]="[ '/projects', projectId, 'apps', 'create']"
color="primary" mat-raised-button>
<a [disabled]="disabled" [routerLink]="[ '/projects', projectId, 'apps', 'create']" color="primary"
mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
@@ -31,7 +31,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator class="paginator" #paginator [length]="dataSource.totalResult" [pageSize]="25"

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

@@ -19,14 +19,6 @@
}
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;

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

@@ -23,11 +23,11 @@
<button mat-stroked-button color="warn"
[disabled]="isZitadel || (['project.write', 'project.write:'+ project.projectId]| hasRole | async) == false"
*ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="state-button"
*ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE"
(click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
<button mat-stroked-button color="warn"
[disabled]="isZitadel || (['project.write', 'project.write:'+ project.projectId]| hasRole | async) == false"
*ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="state-button"
*ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE"
(click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
<div class="full-width">

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

@@ -9,10 +9,6 @@
flex: 1;
}
.state-button {
border-radius: .5rem;
}
a {
display: block;
}

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

@@ -10,7 +10,7 @@
</ng-template>
<ng-template appHasRole [appHasRole]="['project.grant.member.write:'+projectId,'project.grant.member.write']"
actions>
<a [disabled]="disabled" color="primary" class="rounded-button" color="primary" mat-raised-button
<a [disabled]="disabled" color="primary" color="primary" mat-raised-button
[routerLink]="[ '/projects', projectId, 'grants', 'create']">
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
@@ -71,7 +71,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
<tr class="highlight" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
</tr>
</table>

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

@@ -1,7 +1,3 @@
.rounded-button {
border-radius: .5rem;
}
.table-wrapper {
overflow: auto;

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

@@ -12,7 +12,7 @@
[selection]="selection" [loading]="loading$ | async">
<ng-template actions appHasRole [appHasRole]="['project.create']">
<a class="add-button" [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
<a [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
@@ -62,7 +62,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/projects', row.projectId]"></tr>
</table>

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

@@ -41,14 +41,6 @@ h1 {
}
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;

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

@@ -18,10 +18,9 @@
<div>
<button mat-stroked-button color="warn" *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_ACTIVE"
class="state-button"
(click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
<button mat-stroked-button color="warn"
*ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE" class="state-button"
*ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE"
(click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
</div>
</div>

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

@@ -29,10 +29,6 @@
.fill-space {
flex: 1;
}
.state-button {
border-radius: .5rem;
}
}
.formfield {

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

@@ -9,8 +9,4 @@
.ok-button {
margin-left: .5rem;
}
button {
border-radius: .5rem;
}
}

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

@@ -8,7 +8,7 @@
</button>
<a color="primary"
[disabled]="(['project.grant.member.write','project.grant.member.write:' + grantId] | hasRole | async) == false"
class="add-button" (click)="openAddMember()" color="primary" mat-raised-button>
(click)="openAddMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
@@ -73,7 +73,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>

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

@@ -22,12 +22,6 @@
width: 40px;
}
.data-row {
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;

3
console/src/app/pages/projects/project-grant-create/project-grant-create.component.scss
View File

@@ -32,7 +32,6 @@
.domain-button {
margin-right: 1rem;
margin-bottom: 1rem;
border-radius: .5rem;
}
.btn-container {
@@ -43,12 +42,10 @@
.small-button {
display: block;
border-radius: .5rem;
}
.big-button {
display: block;
padding: .5rem 4rem;
border-radius: .5rem;
}
}

1
console/src/app/pages/projects/project-role-create/project-role-create.component.scss
View File

@@ -50,7 +50,6 @@
margin-top: 3rem;
display: block;
padding: .5rem 4rem;
border-radius: .5rem;
@media only screen and (max-width: 450px) {
margin-top: 1rem;

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

@@ -28,7 +28,6 @@
}
button {
border-radius: .5rem;
display: block;
padding: .5rem 4rem;
}

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

@@ -57,12 +57,10 @@
.small-button {
display: block;
border-radius: .5rem;
}
.big-button {
display: block;
padding: .5rem 4rem;
border-radius: .5rem;
}
}

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

@@ -1,8 +1,15 @@
<app-meta-layout>
<div class="max-width-container">
<h1 class="h1">{{ 'USER.TITLE' | translate }}</h1>
<p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
<div class="header-row">
<div>
<h1 class="h1">{{ 'USER.TITLE' | translate }}</h1>
<p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
</div>
<div class="theme">
<app-theme-setting></app-theme-setting>
</div>
</div>
<mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
<span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
@@ -20,21 +27,21 @@
</div>
</app-card>
<div class="col" *ngIf="user">
<app-card class="app-card" title="{{ 'USER.PROFILE.TITLE' | translate }}">
<app-detail-form [genders]="genders" [languages]="languages" [username]="user.userName"
[user]="user.human" (changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
</app-detail-form>
</app-card>
<!-- <div class="col" *ngIf="user"> -->
<app-card *ngIf="user" class="app-card" title="{{ 'USER.PROFILE.TITLE' | translate }}">
<app-detail-form [genders]="genders" [languages]="languages" [username]="user.userName" [user]="user.human"
(changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
</app-detail-form>
</app-card>
<app-card title="Theme" class="app-card theme-card">
<!-- <app-card title="Theme" class="app-card theme-card">
<app-theme-setting></app-theme-setting>
</app-card>
</div>
</app-card> -->
<!-- </div> -->
<app-card *ngIf="user && user.human && user.id" title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}"
description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
<app-external-idps [userId]="user.id" [service]="userService"></app-external-idps>
description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
<app-external-idps [userId]="user.id" [service]="userService"></app-external-idps>
</app-card>
<app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
@@ -44,7 +51,7 @@
<span class="label">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
<span>*********</span>
<div class="actions">
<div>
<a [routerLink]="['password']" mat-icon-button>
<mat-icon class="icon">chevron_right</mat-icon>
</a>
@@ -69,7 +76,7 @@
</ng-container>
</div>
<div class="actions">
<div>
<button (click)="emailEditState = true" mat-icon-button>
<mat-icon class="icon">edit</mat-icon>
</button>
@@ -84,9 +91,8 @@
<button (click)="emailEditState = false" mat-icon-button>
<mat-icon class="icon">close</mat-icon>
</button>
<button *ngIf="user.human" [disabled]="!user.human.email" class="submit-button" type="button"
color="primary" (click)="saveEmail()"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
<button *ngIf="user.human" [disabled]="!user.human.email" type="button" color="primary"
(click)="saveEmail()" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</ng-template>
</div>
@@ -110,7 +116,7 @@
</ng-container>
</div>
<div class="actions">
<div>
<button (click)="phoneEditState = true" mat-icon-button>
<mat-icon class="icon">edit</mat-icon>
</button>
@@ -153,4 +159,4 @@
<app-changes class="changes" [changeType]="ChangeType.MYUSER" [id]="user.id"></app-changes>
</div>
</app-meta-layout>
</app-meta-layout>

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

@@ -1,10 +1,21 @@
.h1 {
margin-top: 0;
}
.sub {
color: #8795a1;
.header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
flex-wrap: wrap;
.h1 {
margin-top: 0;
}
.sub {
color: #8795a1;
}
.theme {
min-width: 250px;
}
}
.login-name-row {
@@ -50,7 +61,7 @@
.method-row {
display: flex;
align-items: center;
justify-content: space-evenly;
justify-content: space-between;
padding: .5rem;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
@@ -65,20 +76,16 @@
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
}
.label {
flex: 1;
font-size: .9rem;
color: #8795a1;
}
.icon {
margin-right: .5rem;
}
.submit-button {
border-radius: .5rem;
margin: .5rem;
}
.verify {
@@ -110,13 +117,13 @@
margin: .5rem;
}
.theme-card {
max-width: 300px;
// .theme-card {
// max-width: 300px;
@media only screen and (max-width: 450px) {
max-width: none;
}
}
// @media only screen and (max-width: 450px) {
// max-width: none;
// }
// }
}
.side {

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

@@ -27,7 +27,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</app-refresh-table>
<div class="add-row">

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

@@ -4,7 +4,6 @@
margin: -.5rem;
.button {
border-radius: .5rem;
margin: .5rem;
margin-top: 1rem;

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

@@ -3,7 +3,7 @@
@mixin theme-card($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-dark: mat-color($primary, A800);
$primary-dark: mat-color($primary, A900);
/* stylelint-enable */
.theme-conent,

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

@@ -1,17 +1,13 @@
<input type="checkbox" id="switch" (change)="change($event.target.checked)" [(checked)]="isDarkTheme">
<div class="theme-app">
<div class="theme-content">
<div class="circle">
<div class="crescent"></div>
</div>
<p class="heading">Choose a style</p>
<p class="desc">Pop or subtle. Day or night.<br>
Customize your interface
</p>
<label for="switch">
<div class="toggle"></div>
<div class="names">
<p class="light">Light</p>
<div class="circle">
<div class="crescent"></div>
</div>
<p class="dark">Dark</p>
</div>
</label>

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

@@ -1,5 +1,5 @@
$dark-background: #2d2e30;
$light-background: #fafafa;
$dark-background: #212224;
$light-background: rgb(220, 220, 220);
:root {
transition: none;
@@ -16,12 +16,12 @@ $light-background: #fafafa;
}
.circle {
z-index: 1;
position: relative;
border-radius: 100%;
width: 6rem;
height: 6rem;
width: 60px;
height: 60px;
background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
margin: auto;
box-shadow: 0 30px 60px rgba(0, 0, 0, .12);
}
@@ -29,8 +29,8 @@ $light-background: #fafafa;
position: absolute;
border-radius: 100%;
right: 0;
width: 4rem;
height: 4rem;
width: 40px;
height: 40px;
background: $light-background;
transform: scale(0);
transform-origin: top right;
@@ -41,20 +41,9 @@ p {
font-size: 90%;
}
.heading {
font-size: 100%;
font-weight: bolder;
margin: 2rem 0 .2rem 0;
}
.desc {
font-size: 14px;
color: #8795a1;
}
label,
.toggle {
height: 2.8rem;
height: 45px;
border-radius: 100px;
}
@@ -63,7 +52,6 @@ label {
background-color: rgba(0, 0, 0, .1);
border-radius: 100px;
position: relative;
margin: 1rem 0 1rem 0;
cursor: pointer;
}
@@ -78,33 +66,37 @@ label {
font-weight: bolder;
width: 65%;
margin-left: 17.5%;
margin-top: .5%;
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
height: 60px;
transform: translateY(-7.5px);
}
[type="checkbox"] {
display: none;
}
[type="checkbox"]:checked + .theme-app .toggle {
transform: translateX(100%);
background-color: $dark-background;
}
[type="checkbox"]:checked {
.toggle {
transform: translateX(100%);
background-color: $dark-background;
}
[type="checkbox"]:checked + .theme-app .dark {
opacity: 1;
}
.light {
opacity: .5;
}
[type="checkbox"]:checked + .theme-app .light {
opacity: .5;
}
.dark {
opacity: 1;
}
[type="checkbox"]:checked + .theme-app {
background-color: inherit;
color: inherit;
.theme-app {
background-color: inherit;
color: inherit;
}
}
[type="checkbox"]:checked + .theme-app .crescent {
@@ -119,3 +111,8 @@ label {
[type="checkbox"]:checked + .theme-app .main-circle {
background: linear-gradient(40deg, #8983f7, #a3dafb 70%);
}
[type="checkbox"]:checked + .app .toggle {
transform: translateX(100%);
background-color: #34323d;
}

3
console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.html
View File

@@ -23,7 +23,6 @@
</mat-form-field>
</div>
<div class="btn-container">
<button class="submit-button" type="submit" color="primary"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
<button type="submit" color="primary" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</div>
</form>

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

@@ -14,8 +14,4 @@
.btn-container {
display: flex;
justify-content: flex-end;
.submit-button {
border-radius: .5rem;
}
}

74
console/src/app/pages/users/user-detail/external-idps/external-idps.component.html
View File

@@ -1,49 +1,49 @@
<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
[timestamp]="externalIdpResult?.viewTimestamp" [selection]="selection">
[timestamp]="externalIdpResult?.viewTimestamp" [selection]="selection">
<div class="table-wrapper">
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
<div class="table-wrapper">
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let idp">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let idp">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
</mat-checkbox>
</td>
</ng-container>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="idpConfigId">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.idpConfigId}} </td>
</ng-container>
<ng-container matColumnDef="idpConfigId">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.idpConfigId}} </td>
</ng-container>
<ng-container matColumnDef="idpName">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPNAME' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.idpName}} </td>
</ng-container>
<ng-container matColumnDef="idpName">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPNAME' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.idpName}} </td>
</ng-container>
<ng-container matColumnDef="externalUserDisplayName">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.externalUserDisplayName}} </td>
</ng-container>
<ng-container matColumnDef="externalUserDisplayName">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.externalUserDisplayName}} </td>
</ng-container>
<ng-container matColumnDef="externalUserId">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.externalUserId}} </td>
</ng-container>
<ng-container matColumnDef="externalUserId">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.externalUserId}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator #paginator class="paginator" [length]="externalIdpResult?.totalResult || 0" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</div>
</table>
<mat-paginator #paginator class="paginator" [length]="externalIdpResult?.totalResult || 0" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</div>
</app-refresh-table>
</app-refresh-table>

12
console/src/app/pages/users/user-detail/external-idps/external-idps.component.scss
View File

@@ -19,21 +19,9 @@
padding-right: 0;
}
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
}
}
}
tr {
outline: none;
}
.add-button {
border-radius: .5rem;
}

144
console/src/app/pages/users/user-detail/external-idps/external-idps.component.ts
View File

@@ -1,75 +1,99 @@
import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, PageEvent} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import { SelectionModel } from '@angular/cdk/collections';
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { BehaviorSubject, Observable } from 'rxjs';
import { ExternalIDPView as AuthExternalIDPView } from '../../../../proto/generated/auth_pb';
import {
ExternalIDPSearchResponse,
ExternalIDPView as MgmtExternalIDPView,
IdpView as MgmtIdpView,
ExternalIDPSearchResponse,
ExternalIDPView as MgmtExternalIDPView,
} from '../../../../proto/generated/management_pb';
import {
ExternalIDPView as AuthExternalIDPView,
} from '../../../../proto/generated/auth_pb';
import {BehaviorSubject, Observable} from 'rxjs';
import {ManagementService} from '../../../../services/mgmt.service';
import {ToastService} from '../../../../services/toast.service';
import {SelectionModel} from '@angular/cdk/collections';
import {GrpcAuthService} from '../../../../services/grpc-auth.service';
import { GrpcAuthService } from '../../../../services/grpc-auth.service';
import { ManagementService } from '../../../../services/mgmt.service';
import { ToastService } from '../../../../services/toast.service';
@Component({
selector: 'app-external-idps',
templateUrl: './external-idps.component.html',
styleUrls: ['./external-idps.component.scss'],
selector: 'app-external-idps',
templateUrl: './external-idps.component.html',
styleUrls: ['./external-idps.component.scss'],
})
export class ExternalIdpsComponent implements OnInit {
@Input() service!: GrpcAuthService | ManagementService;
@Input() userId!: string;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
public externalIdpResult!: ExternalIDPSearchResponse.AsObject;
public dataSource: MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
= new MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>();
public selection: SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
= new SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>(true, []);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@Input() public displayedColumns: string[] = [ 'idpConfigId', 'idpName', 'externalUserId', 'externalUserDisplayName'];
@Input() service!: GrpcAuthService | ManagementService;
@Input() userId!: string;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
public externalIdpResult!: ExternalIDPSearchResponse.AsObject;
public dataSource: MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
= new MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>();
public selection: SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
= new SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>(true, []);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@Input() public displayedColumns: string[] = ['idpConfigId', 'idpName', 'externalUserId', 'externalUserDisplayName'];
constructor(private toast: ToastService) { }
constructor(private toast: ToastService) { }
ngOnInit(): void {
this.getData(10, 0);
}
ngOnInit(): void {
this.getData(10, 0);
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
public changePage(event: PageEvent): void {
this.getData(event.pageSize, event.pageIndex * event.pageSize);
}
public changePage(event: PageEvent): void {
this.getData(event.pageSize, event.pageIndex * event.pageSize);
}
private async getData(limit: number, offset: number): Promise<void> {
this.loadingSubject.next(true);
private async getData(limit: number, offset: number): Promise<void> {
this.loadingSubject.next(true);
this.service.SearchExternalIdps(this.userId, limit, offset).then(resp => {
this.externalIdpResult = resp.toObject();
this.dataSource.data = this.externalIdpResult.resultList;
console.log(this.externalIdpResult.resultList);
this.loadingSubject.next(false);
}).catch((error: any) => {
this.toast.showError(error);
this.loadingSubject.next(false);
});
}
let promise;
if (this.service instanceof ManagementService) {
promise = (this.service as ManagementService).SearchUserExternalIDPs(limit, offset, this.userId);
} else if (this.service instanceof GrpcAuthService) {
promise = (this.service as GrpcAuthService).SearchMyExternalIdps(limit, offset);
}
public refreshPage(): void {
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
}
if (promise) {
promise.then(resp => {
this.externalIdpResult = resp.toObject();
this.dataSource.data = this.externalIdpResult.resultList;
console.log(this.externalIdpResult.resultList);
this.loadingSubject.next(false);
}).catch((error: any) => {
this.toast.showError(error);
this.loadingSubject.next(false);
});
}
}
public refreshPage(): void {
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
}
public removeExternalIdp(idp: AuthExternalIDPView.AsObject | MgmtExternalIDPView.AsObject): void {
let promise;
if (this.service instanceof ManagementService) {
promise = (this.service as ManagementService).RemoveExternalIDP(idp.externalUserId, idp.idpConfigId, idp.userId);
} else if (this.service instanceof GrpcAuthService) {
promise = (this.service as GrpcAuthService).RemoveExternalIDP(idp.externalUserId, idp.idpConfigId);
}
if (promise) {
promise.then(_ => {
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
}).catch((error: any) => {
this.toast.showError(error);
});
}
}
}

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

@@ -19,8 +19,4 @@
.ok-button {
margin-left: .5rem;
}
button {
border-radius: .5rem;
}
}

6
console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.html
View File

@@ -6,8 +6,8 @@
mat-icon-button *ngIf="selection.hasValue()">
<i class="las la-trash"></i>
</button>
<a class="add-button" [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false"
color="primary" mat-raised-button (click)="openAddKey()">
<a [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false" color="primary"
mat-raised-button (click)="openAddKey()">
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
@@ -54,7 +54,7 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="row.id ? ['/users', row.id ]: null">
</tr>

12
console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.scss
View File

@@ -19,21 +19,9 @@
padding-right: 0;
}
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
}
}
}
tr {
outline: none;
}
.add-button {
border-radius: .5rem;
}

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

@@ -19,10 +19,6 @@
.ok-button {
margin-left: .5rem;
}
button {
border-radius: .5rem;
}
}
.row {
@@ -52,5 +48,4 @@
.download-button {
margin-bottom: 1rem;
border-radius: .5rem;
}

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

@@ -4,7 +4,7 @@
<app-refresh-table class="refresh-table" (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult"
[timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
<a actions color="primary" class="add-button" (click)="addMember()" color="primary" mat-raised-button>
<a actions color="primary" (click)="addMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
@@ -57,7 +57,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>

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

@@ -1,7 +1,3 @@
.add-button {
border-radius: .5rem;
}
.refresh-table {
width: 100%;
}
@@ -32,12 +28,6 @@
width: 40px;
}
.data-row {
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;

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

@@ -26,7 +26,6 @@
margin-top: 100px;
display: block;
padding: .5rem 4rem;
border-radius: .5rem;
}
.mat-error {

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

@@ -10,10 +10,8 @@
<ng-template appHasRole [appHasRole]="['user.write', 'user.write:'+user?.id]">
<button mat-stroked-button color="warn" *ngIf="user?.state === UserState.USERSTATE_ACTIVE"
class="state-button"
(click)="changeState(UserState.USERSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
<button mat-stroked-button color="warn" *ngIf="user?.state === UserState.USERSTATE_INACTIVE"
class="state-button"
(click)="changeState(UserState.USERSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
</ng-template>
</div>
@@ -43,10 +41,10 @@
</app-detail-form>
</app-card>
<app-card *ngIf="user && user.human && user.id" title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}"
description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
<app-external-idps [userId]="user.id" [service]="mgmtService" ></app-external-idps>
</app-card>
<app-card *ngIf="user && user.human && user.id" title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}"
description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
<app-external-idps [userId]="user.id" [service]="mgmtUserService"></app-external-idps>
</app-card>
<app-card *ngIf="user.machine" title="{{ 'USER.MACHINE.TITLE' | translate }}">
<app-detail-form-machine
@@ -67,9 +65,9 @@
<div class="method-row">
<span class="label">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
<span>******</span>
<div class="actions">
<button [disabled]="(canWrite$ | async) == false" class="notify-change-pwd"
(click)="sendSetPasswordNotification()" mat-stroked-button color="primary"
<div>
<button [disabled]="(canWrite$ | async) == false" (click)="sendSetPasswordNotification()"
mat-stroked-button color="primary"
*ngIf="user.state === UserState.USERSTATE_INITIAL">{{ 'USER.PASSWORD.RESENDNOTIFICATION' | translate }}</button>
<a [disabled]="(canWrite$ | async) == false" [routerLink]="['password']" mat-icon-button>
<mat-icon class="icon">chevron_right</mat-icon>
@@ -96,7 +94,7 @@
</ng-container>
</div>
<div class="actions">
<div>
<button [disabled]="(canWrite$ | async) == false" (click)="emailEditState = true"
mat-icon-button>
<mat-icon class="icon">edit</mat-icon>
@@ -114,7 +112,7 @@
<mat-icon class="icon">close</mat-icon>
</button>
<button *ngIf="user.human" [disabled]="!user.human.email || (canWrite$ | async) == false"
class="submit-button" type="button" color="primary" (click)="saveEmail()"
type="button" color="primary" (click)="saveEmail()"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</ng-template>
</div>
@@ -139,7 +137,7 @@
</ng-container>
</div>
<div class="actions">
<div>
<button [disabled]="(canWrite$ | async) == false" (click)="phoneEditState = true"
mat-icon-button>
<mat-icon class="icon">edit</mat-icon>
@@ -196,4 +194,4 @@
<app-changes class="changes" [changeType]="ChangeType.USER" [id]="user.id"></app-changes>
</div>
</app-meta-layout>
</app-meta-layout>

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

@@ -17,16 +17,6 @@
.fill-space {
flex: 1;
}
.state-button {
border-radius: .5rem;
}
}
.card-actions {
button {
border-radius: .5rem;
}
}
.method-col {
@@ -37,7 +27,7 @@
.method-row {
display: flex;
align-items: center;
justify-content: space-evenly;
justify-content: space-between;
padding: .5rem;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
@@ -52,24 +42,16 @@
display: flex;
justify-content: flex-end;
align-items: center;
.notify-change-pwd {
border-radius: .5rem;
}
flex-direction: column;
}
.label {
flex: 1;
font-size: .9rem;
color: #818a8a;
}
.icon {
margin-right: .5rem;
}
.submit-button {
border-radius: .5rem;
margin: .5rem;
}
.verify {

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

@@ -1,22 +1,22 @@
import {Location} from '@angular/common';
import {Component, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {TranslateService} from '@ngx-translate/core';
import {Subscription} from 'rxjs';
import {ChangeType} from 'src/app/modules/changes/changes.component';
import { Location } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Subscription } from 'rxjs';
import { ChangeType } from 'src/app/modules/changes/changes.component';
import {
Gender,
MachineResponse,
MachineView,
NotificationType,
UserEmail,
UserPhone,
UserProfile,
UserState,
UserView,
Gender,
MachineResponse,
MachineView,
NotificationType,
UserEmail,
UserPhone,
UserProfile,
UserState,
UserView,
} from 'src/app/proto/generated/management_pb';
import {ManagementService} from 'src/app/services/mgmt.service';
import {ToastService} from 'src/app/services/toast.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-user-detail',
@@ -42,9 +42,8 @@ export class UserDetailComponent implements OnInit, OnDestroy {
public translate: TranslateService,
private route: ActivatedRoute,
private toast: ToastService,
private mgmtUserService: ManagementService,
public mgmtUserService: ManagementService,
private _location: Location,
public mgmtService: ManagementService,
) { }
public ngOnInit(): void {

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

@@ -18,7 +18,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
</app-refresh-table>

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

@@ -4,7 +4,9 @@ import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTableModule } from '@angular/material/table';
@@ -46,6 +48,8 @@ import { UserTableComponent } from './user-table/user-table.component';
TranslateModule,
SharedModule,
RefreshTableModule,
MatFormFieldModule,
MatInputModule,
],
exports: [
UserListComponent,

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

@@ -2,16 +2,22 @@
[timestamp]="userResult?.viewTimestamp" [selection]="selection"
[emitRefreshOnPreviousRoute]="refreshOnPreviousRoute">
<ng-template appHasRole [appHasRole]="['user.write']" actions>
<button (click)="deactivateSelectedUsers()" matTooltip="{{'ORG_DETAIL.TABLE.DEACTIVATE' | translate}}"
<mat-form-field @appearfade *ngIf="userSearchKey != undefined" actions class="filtername">
<mat-label>{{'USER.PAGES.FILTER' | translate}}</mat-label>
<input matInput (keyup)="applyFilter($event)"
[placeholder]="('USER.TABLE.FILTER.' + userSearchKey.toString()) | translate" #input>
</mat-form-field>
<button (click)="deactivateSelectedUsers()" matTooltip="{{'USER.TABLE.DEACTIVATE' | translate}}"
class="icon-button" mat-icon-button *ngIf="selection.hasValue()" [disabled]="disabled">
<mat-icon svgIcon="mdi_account_cancel"></mat-icon>
</button>
<button (click)="reactivateSelectedUsers()" matTooltip="{{'ORG_DETAIL.TABLE.ACTIVATE' | translate}}"
<button (click)="reactivateSelectedUsers()" matTooltip="{{'USER.TABLE.ACTIVATE' | translate}}"
class="icon-button" mat-icon-button *ngIf="selection.hasValue()" [disabled]="disabled">
<mat-icon svgIcon="mdi_account_check_outline"></mat-icon>
</button>
<a class="add-button" [routerLink]="[ '/users',userType == UserType.HUMAN ? 'create' : 'create-machine']"
color="primary" mat-raised-button [disabled]="disabled">
<a [routerLink]="[ '/users',userType == UserType.HUMAN ? 'create' : 'create-machine']" color="primary"
mat-raised-button [disabled]="disabled">
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
@@ -36,17 +42,39 @@
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.FIRSTNAME' | translate }} </th>
<th mat-header-cell *matHeaderCellDef
[ngClass]="{'search-active': this.userSearchKey == UserSearchKey.USERSEARCHKEY_FIRST_NAME}">
{{ 'USER.PROFILE.FIRSTNAME' | translate }}
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{key: UserSearchKey.USERSEARCHKEY_FIRST_NAME}"></template>
</th>
<td mat-cell *matCellDef="let user"> {{user[userType]?.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.LASTNAME' | translate }} </th>
<th mat-header-cell *matHeaderCellDef
[ngClass]="{'search-active': this.userSearchKey == UserSearchKey.USERSEARCHKEY_LAST_NAME}">
{{ 'USER.PROFILE.LASTNAME' | translate }}
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{key: UserSearchKey.USERSEARCHKEY_LAST_NAME}"></template>
</th>
<td mat-cell *matCellDef="let user"> {{user[userType]?.lastName}} </td>
</ng-container>
<ng-container matColumnDef="displayName">
<th mat-header-cell *matHeaderCellDef
[ngClass]="{'search-active': this.userSearchKey == UserSearchKey.USERSEARCHKEY_DISPLAY_NAME}">
{{ 'USER.PROFILE.DISPLAYNAME' | translate }}
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{key: UserSearchKey.USERSEARCHKEY_DISPLAY_NAME}"></template>
</th>
<td mat-cell *matCellDef="let user"> {{user[userType]?.displayName}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.NAME' | translate }} </th>
<th mat-header-cell *matHeaderCellDef>
{{ 'USER.MACHINE.NAME' | translate }}
</th>
<td mat-cell *matCellDef="let user"> {{user[userType]?.name}} </td>
</ng-container>
@@ -56,12 +84,22 @@
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.USERNAME' | translate }} </th>
<th mat-header-cell *matHeaderCellDef
[ngClass]="{'search-active': this.userSearchKey == UserSearchKey.USERSEARCHKEY_USER_NAME}">
{{ 'USER.PROFILE.USERNAME' | translate }}
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{key: UserSearchKey.USERSEARCHKEY_USER_NAME}"></template>
</th>
<td mat-cell *matCellDef="let user"> {{user.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EMAIL' | translate }} </th>
<th mat-header-cell *matHeaderCellDef
[ngClass]="{'search-active': this.userSearchKey == UserSearchKey.USERSEARCHKEY_EMAIL}">
{{ 'USER.EMAIL' | translate }}
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{key: UserSearchKey.USERSEARCHKEY_EMAIL}"></template>
</th>
<td mat-cell *matCellDef="let user"> {{user[userType]?.email}} </td>
</ng-container>
<ng-container matColumnDef="state">
@@ -70,7 +108,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="row.id ? ['/users', row.id ]: null">
</tr>
@@ -78,4 +116,11 @@
<mat-paginator #paginator class="paginator" [length]="userResult?.totalResult || 0" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</div>
</app-refresh-table>
</app-refresh-table>
<ng-template #templateRef let-key="key">
<button class="search-button" mat-icon-button (click)="setFilter(key)">
<mat-icon *ngIf="this.userSearchKey != key">search</mat-icon>
<mat-icon *ngIf="this.userSearchKey == key">search_off</mat-icon>
</button>
</ng-template>

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

@@ -19,14 +19,6 @@
padding-right: 0;
}
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
}
}
}
@@ -34,6 +26,19 @@ tr {
outline: none;
}
.add-button {
border-radius: .5rem;
th {
.search-button {
visibility: hidden;
}
&:hover,
&.search-active {
.search-button {
visibility: visible;
}
}
}
.filtername {
margin: 0 1rem;
}

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

@@ -4,6 +4,7 @@ import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { TranslateService } from '@ngx-translate/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { enterAnimations } from 'src/app/animations';
import { UserView } from 'src/app/proto/generated/auth_pb';
import { SearchMethod, UserSearchKey, UserSearchQuery, UserSearchResponse } from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
@@ -15,8 +16,12 @@ import { UserType } from '../user-list.component';
selector: 'app-user-table',
templateUrl: './user-table.component.html',
styleUrls: ['./user-table.component.scss'],
animations: [
enterAnimations,
],
})
export class UserTableComponent implements OnInit {
public userSearchKey: UserSearchKey | undefined = undefined;
public UserType: any = UserType;
@Input() userType: UserType = UserType.HUMAN;
@Input() refreshOnPreviousRoute: string = '';
@@ -27,10 +32,10 @@ export class UserTableComponent implements OnInit {
public userResult!: UserSearchResponse.AsObject;
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@Input() public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'state'];
@Input() public displayedColumns: string[] = ['select', /*'firstname', 'lastname' ,*/ 'displayName', 'username', 'email', 'state'];
@Output() public changedSelection: EventEmitter<Array<UserView.AsObject>> = new EventEmitter();
UserSearchKey: any = UserSearchKey;
constructor(public translate: TranslateService, private userService: ManagementService,
private toast: ToastService) {
this.selection.changed.subscribe(() => {
@@ -77,14 +82,22 @@ export class UserTableComponent implements OnInit {
});
}
private async getData(limit: number, offset: number, filterTypeValue: UserType): Promise<void> {
private async getData(limit: number, offset: number, filterTypeValue: UserType, filterName?: string): Promise<void> {
this.loadingSubject.next(true);
const query = new UserSearchQuery();
query.setKey(UserSearchKey.USERSEARCHKEY_TYPE);
query.setMethod(SearchMethod.SEARCHMETHOD_EQUALS);
query.setValue(filterTypeValue);
this.userService.SearchUsers(limit, offset, [query]).then(resp => {
let namequery;
if (filterName && this.userSearchKey !== undefined) {
namequery = new UserSearchQuery();
namequery.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
namequery.setKey(this.userSearchKey);
namequery.setValue(filterName.toLowerCase());
}
this.userService.SearchUsers(limit, offset, namequery ? [query, namequery] : [query]).then(resp => {
this.userResult = resp.toObject();
this.dataSource.data = this.userResult.resultList;
this.loadingSubject.next(false);
@@ -97,4 +110,23 @@ export class UserTableComponent implements OnInit {
public refreshPage(): void {
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize, this.userType);
}
public applyFilter(event: Event): void {
const filterValue = (event.target as HTMLInputElement).value;
this.getData(
this.paginator.pageSize,
this.paginator.pageIndex * this.paginator.pageSize,
this.userType,
filterValue,
);
}
public setFilter(key: UserSearchKey): void {
if (this.userSearchKey !== key) {
this.userSearchKey = key;
} else {
this.userSearchKey = undefined;
this.refreshPage();
}
}
}