TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-12 01:37:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: split users into human and machine (#470)

Browse Source 
* feat(management): service accounts

* chore: current go version

* init

* refactor: apis

* feat(internal): start impl of service account

* chore: start impl of machine/human users

* code compiles

* fix: tests

* fix: tests

* fix: add new event types to switches

* chore: add cases to event types

* fix(management): definitive proto messages

* fix: machine/human

* fix: add missing tables as todos

* fix: remove unused permissions

* fix: refactoring

* fix: refactor

* fix: human registered

* fix: user id

* fix: logid

* fix: proto remove //equal

* chore(management): remove no comment

* fix: human mfas

* fix: user subobjects

* chore: rename existing to better name

* fix: username in user (#634)

* fix: username in user

* fix: username

* fix remove unused code

* fix add validations

* fix: use new user in all apis

* fix: regexp for username in api

* fix: fill user data for human and machine (#638)

* fix: fill Display name grant/member handlers
fix: add description to grant/member objects in api
fix: check if user is human in login

* fix: remove description from member and grant

* chore: remove todos

* feat: machine keys

* fix: implement missing parts

* feat: machine key management view

* fix: remove keys from machine view

* fix: set default expiration date

* fix: get key by ids

* feat: add machine keys in proto

* feat: machine keys

* fix: add migration

* fix: mig

* fix: correct method name

* feat: user search

* feat: user search

* fix: log ids

* fix partial authconfig prompt, domain c perm

* membership read check

* contributor refresh trigger, observe org write

* fix: migrations

* fix(console): machine build (#660)

* frontend 1

* fix html bindings

* trailing comma

* user permissions, project deactivate

* fix(console): human view (#661)

* fix search user view, user detail form

* rm log

* feat(console): user services list and create (#663)

* fix search user view, user detail form

* rm log

* machine list

* generic table component

* create user service

* proove table for undefined values

* tmp disable user link if machine

* lint

* lint styles

* user table lint

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

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

* feat(console): service user detail view, keys cr_d, fix search user autocomplete (#664)

* service users for sidenav, routing

* i18n

* back routes

* machine detail form

* update machine detail, fix svc user grants

* keys table

* add key dialog, timestamp creation

* check permission on create, delete, fix selection

* lint ts, scss

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

* Apply suggestions from code review

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

* allow user grants for project.write

* management service

* fix mgmt service

* feat: Machine keys (#655)

* fix: memberships (#633)

* feat: add iam members to memberships

* fix: search project grants

* fix: rename

* feat: idp and login policy configurations (#619)

* feat: oidc config

* fix: oidc configurations

* feat: oidc idp config

* feat: add oidc config test

* fix: tests

* fix: tests

* feat: translate new events

* feat: idp eventstore

* feat: idp eventstore

* fix: tests

* feat: command side idp

* feat: query side idp

* feat: idp config on org

* fix: tests

* feat: authz idp on org

* feat: org idps

* feat: login policy

* feat: login policy

* feat: login policy

* feat: add idp func on login policy

* feat: add validation to loginpolicy and idp provider

* feat: add default login policy

* feat: login policy on org

* feat: login policy on org

* fix: id config handlers

* fix: id config handlers

* fix: create idp on org

* fix: create idp on org

* fix: not existing idp config

* fix: default login policy

* fix: add login policy on org

* fix: idp provider search on org

* fix: test

* fix: remove idp on org

* fix: test

* fix: test

* fix: remove admin idp

* fix: logo src as byte

* fix: migration

* fix: tests

* Update internal/iam/repository/eventsourcing/iam.go

Co-authored-by: Silvan <silvan.reusser@gmail.com>

* Update internal/iam/repository/eventsourcing/iam_test.go

Co-authored-by: Silvan <silvan.reusser@gmail.com>

* Update internal/iam/repository/eventsourcing/iam_test.go

Co-authored-by: Silvan <silvan.reusser@gmail.com>

* Update internal/iam/repository/eventsourcing/model/login_policy.go

Co-authored-by: Silvan <silvan.reusser@gmail.com>

* Update internal/iam/repository/eventsourcing/model/login_policy.go

Co-authored-by: Silvan <silvan.reusser@gmail.com>

* Update internal/org/repository/eventsourcing/org_test.go

Co-authored-by: Silvan <silvan.reusser@gmail.com>

* Update internal/iam/repository/eventsourcing/model/login_policy_test.go

Co-authored-by: Silvan <silvan.reusser@gmail.com>

* Update internal/iam/repository/eventsourcing/model/login_policy_test.go

Co-authored-by: Silvan <silvan.reusser@gmail.com>

* fix: pr comments

* fix: tests

* Update types.go

* fix: merge request changes

* fix: reduce optimization

Co-authored-by: Silvan <silvan.reusser@gmail.com>
Co-authored-by: Livio Amstutz <livio.a@gmail.com>

* fix: reread user mfas, preferred loginname as otp account name (#636)

* fix: reread user mfas

* fix: use preferred login name as otp account name

* fix: tests

* fix: reduce (#635)

* fix: management reduce optimization

* fix: reduce optimization

* fix: reduce optimization

* fix: merge master

* chore(deps): bump github.com/gorilla/schema from 1.1.0 to 1.2.0 (#627)

Bumps [github.com/gorilla/schema](https://github.com/gorilla/schema) from 1.1.0 to 1.2.0.
- [Release notes](https://github.com/gorilla/schema/releases)
- [Commits](https://github.com/gorilla/schema/compare/v1.1.0...v1.2.0)

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

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

* chore(deps): bump github.com/gorilla/mux from 1.7.4 to 1.8.0 (#624)

Bumps [github.com/gorilla/mux](https://github.com/gorilla/mux) from 1.7.4 to 1.8.0.
- [Release notes](https://github.com/gorilla/mux/releases)
- [Commits](https://github.com/gorilla/mux/compare/v1.7.4...v1.8.0)

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

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

* chore(deps): bump github.com/DATA-DOG/go-sqlmock from 1.4.1 to 1.5.0 (#591)

Bumps [github.com/DATA-DOG/go-sqlmock](https://github.com/DATA-DOG/go-sqlmock) from 1.4.1 to 1.5.0.
- [Release notes](https://github.com/DATA-DOG/go-sqlmock/releases)
- [Commits](https://github.com/DATA-DOG/go-sqlmock/compare/v1.4.1...v1.5.0)

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

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

* chore: auto assign issues and PR to ZTIADEL project board (#643)

* Create main.yml

* Update main.yml

Co-authored-by: Livio Amstutz <livio.a@gmail.com>

* fix(console): project grant members, update deps (#645)

* fix: searchprojectgrantmembers

* chore(deps-dev): bump @angular/cli from 10.0.6 to 10.0.7 in /console (#622)

Bumps [@angular/cli](https://github.com/angular/angular-cli) from 10.0.6 to 10.0.7.
- [Release notes](https://github.com/angular/angular-cli/releases)
- [Commits](https://github.com/angular/angular-cli/compare/v10.0.6...v10.0.7)

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 (#626)

Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1000.6 to 0.1000.7.
- [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 @types/jasmine from 3.5.12 to 3.5.13 in /console (#623)

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

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

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

* chore(deps-dev): bump ts-node from 8.10.2 to 9.0.0 in /console (#629)

Bumps [ts-node](https://github.com/TypeStrong/ts-node) from 8.10.2 to 9.0.0.
- [Release notes](https://github.com/TypeStrong/ts-node/releases)
- [Commits](https://github.com/TypeStrong/ts-node/compare/v8.10.2...v9.0.0)

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

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

* update packlock

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

* chore: delete main.yml (#648)

* fix: usergrant (#650)

* fix(console): mfa refresh after verification, member eventemitter (#651)

* refresh mfa

* fix: detail link from contributors

* lint

* feat: add domain verification notification (#649)

* fix: dont (re)generate client secret with auth type none

* fix(cors): allow Origin from request

* feat: add origin allow list and fix some core issues

* rename migration

* fix UserIDsByDomain

* feat: send email to users after domain claim

* username

* check origin on userinfo

* update oidc pkg

* fix: add migration 1.6

* change username

* change username

* remove unique email aggregate

* change username in mgmt

* search global user by login name

* fix test

* change user search in angular

* fix tests

* merge

* userview in angular

* fix merge

* Update pkg/grpc/management/proto/management.proto

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>

* Update internal/notification/static/i18n/de.yaml

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>

* fix

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>

* fix: translation (#647)

* fix: translation

* fix: translation

* fix: translation

* fix: remove unused code

* fix: log err

* fix: migration numbers (#652)

* chore: issue / feature templates (#642)

* feat: machine keys

* fix: implement missing parts

* feat: machine key management view

* fix: remove keys from machine view

* feat: global org read (#657)

* fix: set default expiration date

* fix: get key by ids

* feat: add machine keys in proto

* feat: machine keys

* fix: add migration

* fix: mig

* fix: correct method name

* feat: user search

* feat: user search

* fix: log ids

* fix: migrations

* fix(console): machine build (#660)

* frontend 1

* fix html bindings

* trailing comma

* fix(console): human view (#661)

* fix search user view, user detail form

* rm log

* feat(console): user services list and create (#663)

* fix search user view, user detail form

* rm log

* machine list

* generic table component

* create user service

* proove table for undefined values

* tmp disable user link if machine

* lint

* lint styles

* user table lint

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

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

* feat(console): service user detail view, keys cr_d, fix search user autocomplete (#664)

* service users for sidenav, routing

* i18n

* back routes

* machine detail form

* update machine detail, fix svc user grants

* keys table

* add key dialog, timestamp creation

* check permission on create, delete, fix selection

* lint ts, scss

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

* Apply suggestions from code review

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

* refactor: protos

* fix(management): key expiration date

* fix: check if user is human

* fix: marshal key details

* fix: correct generate login names

* fix: logid

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Livio Amstutz <livio.a@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Max Peintner <max@caos.ch>
Co-authored-by: Fabiennne <fabienne.gerschwiler@gmail.com>
Co-authored-by: Florian Forster <florian@caos.ch>

* fix: naming

* refactor: findings

* fix: username

* fix: mfa upper case

* fix: tests

* fix: add translations

* reactivatemyorg req typeö

* fix: projectType for console

* fix: user changes

* fix: translate events

* fix: event type translation

* fix: remove unused types

Co-authored-by: Fabiennne <fabienne.gerschwiler@gmail.com>
Co-authored-by: Max Peintner <max@caos.ch>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Livio Amstutz <livio.a@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
This commit is contained in:
Silvan
2020-08-31 17:48:01 +02:00
committed by GitHub
parent c1c85e632b
commit 5abd5b0505
207 changed files with 52837 additions and 26745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
console/src/app/app-routing.module.ts
View File

@@ -34,7 +34,7 @@ const routes: Routes = [
canActivate: [AuthGuard],
children: [
{
path: 'all',
path: 'list',
loadChildren: () => import('src/app/pages/users/user-list/user-list.module')
.then(m => m.UserListModule),
canActivate: [RoleGuard],

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

@@ -117,9 +117,16 @@
</div>
<a @navitem class="nav-item" [routerLinkActive]="['active']"
[routerLink]="[ '/users/all']" [routerLinkActiveOptions]="{ exact: true }">
<i class="icon las la-users"></i>
<span class="label">{{ 'MENU.USER' | translate }}</span>
[routerLink]="[ '/users/list/humans']" [routerLinkActiveOptions]="{ exact: true }">
<i class="icon las la-user-friends"></i>
<span class="label">{{ 'MENU.HUMANUSERS' | translate }}</span>
</a>
<a @navitem class="nav-item" [routerLinkActive]="['active']"
[routerLink]="[ '/users/list/machines']"
[routerLinkActiveOptions]="{ exact: true }">
<i class="icon las la-users-cog"></i>
<span class="label">{{ 'MENU.MACHINEUSERS' | translate }}</span>
</a>
</ng-template>
</div>

2
console/src/app/app.module.ts
View File

@@ -5,6 +5,7 @@ import localeDe from '@angular/common/locales/de';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
@@ -90,6 +91,7 @@ const authConfig: AuthConfig = {
deps: [HttpClient],
},
}),
MatNativeDateModule,
QuicklinkModule,
AccountsCardModule,
HasRoleModule,

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

@@ -3,7 +3,7 @@
[name]="profile.displayName ? profile.displayName : (profile.firstName + ' '+ profile.lastName)" [size]="80">
</app-avatar>
<span class="u-name">{{profile.displayName ? profile.displayName : profile.userName}}</span>
<span class="u-name">{{profile.displayName ? profile.displayName : profile.preferredLoginName}}</span>
<span class="u-email">{{profile?.preferredLoginName}}</span>
<span class="iamuser" *ngIf="iamuser">IAM USER</span>

8
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html
View File

@@ -8,7 +8,9 @@
<mat-chip-list *ngIf="!singleOutput" #chipList aria-label="loginname selection">
<mat-chip class="chip" *ngFor="let selecteduser of users" [selectable]="selectable" [removable]="removable"
(removed)="remove(selecteduser)">
{{ selecteduser?.firstName }} {{selecteduser.lastName}} | <small> {{selecteduser.preferredLoginName}}</small>
{{ selecteduser?.human ? (selecteduser.human.firstName + ' ' + selecteduser.human.lastName) : selecteduser?.machine?.name}}
| <small>
{{selecteduser.preferredLoginName}}</small>
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="{{'ORG_DETAIL.MEMBER.LOGINNAME' | translate}}" #usernameInput [formControl]="myControl"
@@ -22,7 +24,7 @@
<mat-spinner diameter="30"></mat-spinner>
</mat-option>
<mat-option *ngFor="let user of filteredUsers" [value]="user">
{{user.firstName}} {{user.lastName}}
{{user.human? user.human.firstName : user.machine?.name}}
<small>{{user.preferredLoginName}}</small>
</mat-option>
</mat-autocomplete>
@@ -52,4 +54,4 @@
<p class="target-desc">{{(target == UserTarget.SELF ? 'USER.TARGET.SELF' : 'USER.TARGET.EXTERNAL') | translate}}
<a (click)="changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
</p>
</form>
</form>

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

@@ -84,6 +84,9 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
default:
this.routerLink = ['/grant-create'];
}
console.log(this.routerLink);
this.dataSource.loadGrants(this.context, 0, 25, {
projectId: this.projectId,
grantId: this.grantId,

2
console/src/app/pages/home/home.component.html
View File

@@ -86,7 +86,7 @@
<span class="fill-space"></span>
<div class="footer">
<a color="primary" mat-stroked-button
[routerLink]="['/users/all']">{{'HOME.USERS_BUTTON' | translate}}</a>
[routerLink]="['/users/list/humans']">{{'HOME.USERS_BUTTON' | translate}}</a>
</div>
</app-card>
</ng-template>

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

@@ -7,7 +7,7 @@ import { MatTable } from '@angular/material/table';
import { tap } from 'rxjs/operators';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { IamMember, IamMemberView } from 'src/app/proto/generated/admin_pb';
import { ProjectMember, ProjectType, User } from 'src/app/proto/generated/management_pb';
import { ProjectMember, ProjectType, UserView } from 'src/app/proto/generated/management_pb';
import { AdminService } from 'src/app/services/admin.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -112,7 +112,7 @@ export class IamMembersComponent implements AfterViewInit {
dialogRef.afterClosed().subscribe(resp => {
if (resp) {
const users: User.AsObject[] = resp.users;
const users: UserView.AsObject[] = resp.users;
const roles: string[] = resp.roles;
if (users && users.length && roles && roles.length) {

4
console/src/app/pages/iam/iam.component.ts
View File

@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { OrgMemberView, User } from 'src/app/proto/generated/management_pb';
import { OrgMemberView, UserView } from 'src/app/proto/generated/management_pb';
import { AdminService } from 'src/app/services/admin.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -49,7 +49,7 @@ export class IamComponent {
dialogRef.afterClosed().subscribe(resp => {
if (resp) {
const users: User.AsObject[] = resp.users;
const users: UserView.AsObject[] = resp.users;
const roles: string[] = resp.roles;
if (users && users.length && roles && roles.length) {

21
console/src/app/pages/orgs/org-create/org-create.component.ts
View File

@@ -6,7 +6,7 @@ import { MatSlideToggleChange } from '@angular/material/slide-toggle';
import { Router } from '@angular/router';
import { take } from 'rxjs/operators';
import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from 'src/app/pages/validators';
import { CreateOrgRequest, CreateUserRequest, Gender, OrgSetUpResponse } from 'src/app/proto/generated/admin_pb';
import { CreateHumanRequest, CreateOrgRequest, Gender, OrgSetUpResponse } from 'src/app/proto/generated/admin_pb';
import { PasswordComplexityPolicy } from 'src/app/proto/generated/auth_pb';
import { AdminService } from 'src/app/services/admin.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
@@ -92,21 +92,20 @@ export class OrgCreateComponent {
createOrgRequest.setName(this.name?.value);
createOrgRequest.setDomain(this.domain?.value);
const registerUserRequest: CreateUserRequest = new CreateUserRequest();
registerUserRequest.setUserName(this.userName?.value);
registerUserRequest.setEmail(this.email?.value);
registerUserRequest.setFirstName(this.firstName?.value);
registerUserRequest.setLastName(this.lastName?.value);
registerUserRequest.setNickName(this.nickName?.value);
registerUserRequest.setGender(this.gender?.value);
registerUserRequest.setPreferredLanguage(this.preferredLanguage?.value);
const humanRequest: CreateHumanRequest = new CreateHumanRequest();
humanRequest.setEmail(this.email?.value);
humanRequest.setFirstName(this.firstName?.value);
humanRequest.setLastName(this.lastName?.value);
humanRequest.setNickName(this.nickName?.value);
humanRequest.setGender(this.gender?.value);
humanRequest.setPreferredLanguage(this.preferredLanguage?.value);
if (this.usePassword && this.password) {
registerUserRequest.setPassword(this.password?.value);
humanRequest.setPassword(this.password?.value);
}
this.adminService
.SetUpOrg(createOrgRequest, registerUserRequest)
.SetUpOrg(createOrgRequest, humanRequest)
.then((data: OrgSetUpResponse) => {
this.router.navigate(['orgs', data.toObject().org?.id]);
})

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

@@ -17,7 +17,7 @@ import {
OrgMemberSearchResponse,
OrgMemberView,
OrgState,
User,
UserView,
} from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -163,7 +163,7 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
dialogRef.afterClosed().subscribe(resp => {
if (resp) {
const users: User.AsObject[] = resp.users;
const users: UserView.AsObject[] = resp.users;
const roles: string[] = resp.roles;
if (users && users.length && roles && roles.length) {

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

@@ -5,7 +5,7 @@ import { MatPaginator } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { tap } from 'rxjs/operators';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { Org, OrgMemberView, ProjectType, User } from 'src/app/proto/generated/management_pb';
import { Org, OrgMemberView, ProjectType, UserView } from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -107,7 +107,7 @@ export class OrgMembersComponent implements AfterViewInit {
dialogRef.afterClosed().subscribe(resp => {
if (resp) {
const users: User.AsObject[] = resp.users;
const users: UserView.AsObject[] = resp.users;
const roles: string[] = resp.roles;
if (users && users.length && roles && roles.length) {

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

@@ -21,8 +21,8 @@ import {
ProjectRoleSearchResponse,
ProjectState,
ProjectType,
User,
UserGrantSearchKey,
UserView,
} from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -140,7 +140,7 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
dialogRef.afterClosed().subscribe(resp => {
if (resp) {
const users: User.AsObject[] = resp.users;
const users: UserView.AsObject[] = resp.users;
const roles: string[] = resp.roles;
if (users && users.length && roles && roles.length) {

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

@@ -21,10 +21,12 @@
<span class="fill-space"></span>
<button mat-stroked-button color="warn" [disabled]="isZitadel"
<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"
(click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
<button mat-stroked-button color="warn" [disabled]="isZitadel"
<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"
(click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
@@ -87,7 +89,7 @@
<app-card *ngIf="project?.projectId" title="{{ 'GRANTS.PROJECT.TITLE' | translate }}"
description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
<app-user-grants [context]="userGrantContext" [projectId]="projectId"
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE || (['project.write', 'project.write'+ project.projectId]| hasRole | async) == false"
[allowCreate]="(['user.grant.write'] | hasRole) | async"
[allowDelete]="(['user.grant.delete'] | hasRole) | async">
</app-user-grants>

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.ts
View File

@@ -1,7 +1,7 @@
import { Component, Inject } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { User } from 'src/app/proto/generated/management_pb';
import { UserView } from 'src/app/proto/generated/management_pb';
export interface ProjectGrantMembersCreateDialogExportType {
userIds: string[];
@@ -22,7 +22,7 @@ export class ProjectGrantMembersCreateDialogComponent {
@Inject(MAT_DIALOG_DATA) public data: any,
) { }
public selectUsers(users: User.AsObject[]): void {
public selectUsers(users: UserView.AsObject[]): void {
this.userIds = users.map(user => user.id);
}

10
console/src/app/pages/user-grant-create/user-grant-create.component.ts
View File

@@ -4,7 +4,7 @@ import { ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs';
import { UserGrantContext } from 'src/app/modules/user-grants/user-grants-datasource';
import { Org } from 'src/app/proto/generated/auth_pb';
import { ProjectGrantView, ProjectRole, ProjectView, User, UserGrant } from 'src/app/proto/generated/management_pb';
import { ProjectGrantView, ProjectRole, ProjectView, UserGrant, UserView } from 'src/app/proto/generated/management_pb';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -55,7 +55,7 @@ export class UserGrantCreateComponent implements OnDestroy {
this.context = UserGrantContext.GRANTED_PROJECT;
this.mgmtService.GetGrantedProjectByID(this.projectId, this.grantId).then(resp => {
this.grantRolesKeyList = resp.toObject().roleKeysList;
}).catch(error => {
}).catch((error: any) => {
this.toast.showError(error);
});
}
@@ -80,7 +80,7 @@ export class UserGrantCreateComponent implements OnDestroy {
).then((data: UserGrant) => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTADDED', true);
this.close();
}).catch(error => {
}).catch((error: any) => {
this.toast.showError(error);
});
break;
@@ -93,7 +93,7 @@ export class UserGrantCreateComponent implements OnDestroy {
).then((data: UserGrant) => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTUSERGRANTADDED', true);
this.close();
}).catch(error => {
}).catch((error: any) => {
this.toast.showError(error);
});
break;
@@ -105,7 +105,7 @@ export class UserGrantCreateComponent implements OnDestroy {
this.projectId = project.projectId;
}
public selectUser(user: User.AsObject): void {
public selectUser(user: UserView.AsObject): void {
this.userId = user.id;
}

18
console/src/app/pages/users/user-create-machine/user-create-machine-routing.module.ts Normal file
View File

@@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserCreateMachineComponent } from './user-create-machine.component';
const routes: Routes = [
{
path: '',
component: UserCreateMachineComponent,
data: { animation: 'DetailPage' },
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class UserCreateMachineRoutingModule { }

34
console/src/app/pages/users/user-create-machine/user-create-machine.component.html Normal file
View File

@@ -0,0 +1,34 @@
<app-detail-layout [backRouterLink]="[ '/users/list/machines']" title="{{ 'USER.CREATE.TITLE' | translate }}"
description="{{ 'USER.CREATE.DESCRIPTION' | translate }}">
<mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
<form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="form">
<div class="content">
<mat-form-field class="formfield">
<mat-label>{{ 'USER.MACHINE.USERNAME' | translate }}</mat-label>
<input matInput formControlName="userName" required />
<mat-error *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
<mat-error *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
{{ 'USER.VALIDATION.NOEMAIL' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="formfield">
<mat-label>{{ 'USER.MACHINE.NAME' | translate }}</mat-label>
<input matInput formControlName="name" required />
<mat-error *ngIf="name?.invalid && name?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="formfield">
<mat-label>{{ 'USER.MACHINE.DESCRIPTION' | translate }}</mat-label>
<input matInput formControlName="description" />
</mat-form-field>
</div>
<div class="btn-container">
<button color="primary" [disabled]="userForm.invalid" type="submit"
mat-raised-button>{{ 'ACTIONS.CREATE' | translate }}</button>
</div>
</form>
</app-detail-layout>

33
console/src/app/pages/users/user-create-machine/user-create-machine.component.scss Normal file
View File

@@ -0,0 +1,33 @@
.form {
width: 100%;
padding-top: 1rem;
.btn-container {
button {
margin-top: 3rem;
display: block;
padding: .5rem 4rem;
border-radius: .5rem;
}
}
}
.content {
width: 100%;
display: flex wrap;
flex-direction: row;
margin: 0 -.5rem;
.section {
padding: .5rem;
flex-basis: 100%;
color: #8795a1;
font-size: .9rem;
}
.formfield {
flex: 1 0 33%;
margin: 0 .5rem;
}
}

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

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

100
console/src/app/pages/users/user-create-machine/user-create-machine.component.ts Normal file
View File

@@ -0,0 +1,100 @@
import { Component, OnDestroy } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { CreateMachineRequest } from 'src/app/proto/generated/admin_pb';
import { UserResponse } from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
function noEmailValidator(c: AbstractControl): any {
const EMAIL_REGEXP: RegExp = /^((?!@).)*$/gm;
if (!c.parent || !c) {
return;
}
const username = c.parent.get('userName');
if (!username) {
return;
}
return EMAIL_REGEXP.test(username.value) ? null : {
noEmailValidator: {
valid: false,
},
};
}
@Component({
selector: 'app-user-create-machine',
templateUrl: './user-create-machine.component.html',
styleUrls: ['./user-create-machine.component.scss'],
})
export class UserCreateMachineComponent implements OnDestroy {
public user: CreateMachineRequest.AsObject = new CreateMachineRequest().toObject();
public userForm!: FormGroup;
private sub: Subscription = new Subscription();
public loading: boolean = false;
constructor(
private router: Router,
private toast: ToastService,
public userService: ManagementService,
private fb: FormBuilder,
) {
this.initForm();
}
private initForm(): void {
this.userForm = this.fb.group({
userName: ['',
[
Validators.required,
Validators.minLength(2),
],
],
name: ['', [Validators.required]],
description: ['', []],
});
}
public createUser(): void {
this.user = this.userForm.value;
this.loading = true;
const machineReq = new CreateMachineRequest();
machineReq.setDescription(this.description?.value);
machineReq.setName(this.name?.value);
this.userService
.CreateUserMachine(this.userName?.value, machineReq)
.then((data: UserResponse) => {
this.loading = false;
this.toast.showInfo('USER.TOAST.CREATED', true);
const id = data.getId();
if (id) {
this.router.navigate(['users', id]);
}
})
.catch((error: any) => {
this.loading = false;
this.toast.showError(error);
});
}
ngOnDestroy(): void {
this.sub.unsubscribe();
}
public get name(): AbstractControl | null {
return this.userForm.get('name');
}
public get description(): AbstractControl | null {
return this.userForm.get('description');
}
public get userName(): AbstractControl | null {
return this.userForm.get('userName');
}
}

41
console/src/app/pages/users/user-create-machine/user-create-machine.module.ts Normal file
View File

@@ -0,0 +1,41 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { UserCreateMachineRoutingModule } from './user-create-machine-routing.module';
import { UserCreateMachineComponent } from './user-create-machine.component';
@NgModule({
declarations: [UserCreateMachineComponent],
imports: [
UserCreateMachineRoutingModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatButtonModule,
MatIconModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatCheckboxModule,
MatTooltipModule,
TranslateModule,
DetailLayoutModule,
],
})
export class UserCreateMachineModule { }

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

@@ -1,4 +1,4 @@
<app-detail-layout [backRouterLink]="[ '/users/all']" title="{{ 'USER.CREATE.TITLE' | translate }}"
<app-detail-layout [backRouterLink]="[ '/users/list/humans']" title="{{ 'USER.CREATE.TITLE' | translate }}"
description="{{ 'USER.CREATE.DESCRIPTION' | translate }}">
<mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>

22
console/src/app/pages/users/user-create/user-create.component.ts
View File

@@ -2,7 +2,7 @@ import { Component, OnDestroy } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { CreateUserRequest, Gender, User } from 'src/app/proto/generated/management_pb';
import { CreateHumanRequest, CreateUserRequest, Gender, UserResponse } from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -75,11 +75,6 @@ export class UserCreateComponent implements OnDestroy {
gender: [Gender.GENDER_UNSPECIFIED],
preferredLanguage: [''],
phone: [''],
streetAddress: [''],
postalCode: [''],
locality: [''],
region: [''],
country: [''],
});
}
@@ -87,9 +82,20 @@ export class UserCreateComponent implements OnDestroy {
this.user = this.userForm.value;
this.loading = true;
const humanReq = new CreateHumanRequest();
humanReq.setFirstName(this.firstName?.value);
humanReq.setLastName(this.lastName?.value);
humanReq.setNickName(this.nickName?.value);
humanReq.setPreferredLanguage(this.preferredLanguage?.value);
humanReq.setEmail(this.email?.value);
humanReq.setPhone(this.phone?.value);
humanReq.setGender(this.gender?.value);
humanReq.setCountry(this.country?.value);
this.userService
.CreateUser(this.user)
.then((data: User) => {
.CreateUserHuman(this.userName?.value, humanReq)
.then((data: UserResponse) => {
this.loading = false;
this.toast.showInfo('USER.TOAST.CREATED', true);
this.router.navigate(['users', data.getId()]);

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

@@ -22,8 +22,8 @@
<div class="col" *ngIf="user">
<app-card class="app-card" title="{{ 'USER.PROFILE.TITLE' | translate }}">
<app-detail-form [genders]="genders" [languages]="languages" [profile]="user"
(changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
<app-detail-form [genders]="genders" [languages]="languages" [username]="user.userName"
[user]="user.human" (changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
</app-detail-form>
</app-card>
@@ -51,11 +51,11 @@
<ng-container *ngIf="!emailEditState; else emailEdit">
<div class="actions">
<span class="name">{{user?.email}}</span>
<mat-icon class="icon" *ngIf="user?.isEmailVerified" color="primary" aria-hidden="false"
aria-label="verified icon">
<span class="name">{{user?.human?.email}}</span>
<mat-icon class="icon" *ngIf="user?.human?.isEmailVerified" color="primary"
aria-hidden="false" aria-label="verified icon">
check_circle_outline</mat-icon>
<ng-container *ngIf="user?.email && !user?.isEmailVerified">
<ng-container *ngIf="user?.human?.email && !user?.human?.isEmailVerified">
<mat-icon class="icon" color="warn" aria-hidden="false" aria-label="not verified icon">
highlight_off
</mat-icon>
@@ -73,13 +73,14 @@
<ng-template #emailEdit>
<mat-form-field class="name">
<mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>
<input matInput [(ngModel)]="user.email" />
<input *ngIf="user.human && user.human.email" matInput [(ngModel)]="user.human.email" />
</mat-form-field>
<button (click)="emailEditState = false" mat-icon-button>
<mat-icon class="icon">close</mat-icon>
</button>
<button [disabled]="!user.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" class="submit-button" type="button"
color="primary" (click)="saveEmail()"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</ng-template>
</div>
@@ -88,11 +89,11 @@
<ng-container *ngIf="!phoneEditState; else phoneEdit">
<div class="actions">
<span class="name">{{user?.phone}}</span>
<mat-icon class="icon" *ngIf="user?.isPhoneVerified" color="primary" aria-hidden="false"
aria-label="verified icon">
<span class="name">{{user?.human?.phone}}</span>
<mat-icon class="icon" *ngIf="user?.human?.isPhoneVerified" color="primary"
aria-hidden="false" aria-label="verified icon">
check_circle_outline</mat-icon>
<ng-container *ngIf="user?.phone && !user?.isPhoneVerified">
<ng-container *ngIf="user?.human?.phone && !user?.human?.isPhoneVerified">
<mat-icon class="icon" color="warn" aria-hidden="false" aria-label="not verified icon">
highlight_off
</mat-icon>
@@ -113,16 +114,17 @@
<ng-template #phoneEdit>
<mat-form-field class="name">
<mat-label>{{ 'USER.PHONE' | translate }}</mat-label>
<input matInput [(ngModel)]="user.phone" />
<input *ngIf="user.human && user.human.phone" matInput [(ngModel)]="user.human.phone" />
</mat-form-field>
<button (click)="phoneEditState = false" mat-icon-button>
<mat-icon class="icon">close</mat-icon>
</button>
<button *ngIf="user.phone" color="warn" (click)="deletePhone()" mat-icon-button>
<button *ngIf="user.human && user.human.phone" color="warn" (click)="deletePhone()"
mat-icon-button>
<i class="las la-trash"></i>
</button>
<button [disabled]="!user.phone" type="button" color="primary" (click)="savePhone()"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
<button *ngIf="user.human" [disabled]="!user.human.phone" type="button" color="primary"
(click)="savePhone()" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</ng-template>
</div>
</div>

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

@@ -53,60 +53,69 @@ export class AuthUserDetailComponent implements OnDestroy {
}
public saveProfile(profileData: UserProfile.AsObject): void {
this.user.firstName = profileData.firstName;
this.user.lastName = profileData.lastName;
this.user.nickName = profileData.nickName;
this.user.displayName = profileData.displayName;
this.user.gender = profileData.gender;
this.user.preferredLanguage = profileData.preferredLanguage;
this.userService
.SaveMyUserProfile(
this.user.firstName,
this.user.lastName,
this.user.nickName,
this.user.preferredLanguage,
this.user.gender,
)
.then((data: UserProfile) => {
this.toast.showInfo('USER.TOAST.SAVED', true);
this.user = Object.assign(this.user, data.toObject());
})
.catch(error => {
this.toast.showError(error);
});
if (this.user.human) {
this.user.human.firstName = profileData.firstName;
this.user.human.lastName = profileData.lastName;
this.user.human.nickName = profileData.nickName;
this.user.human.displayName = profileData.displayName;
this.user.human.gender = profileData.gender;
this.user.human.preferredLanguage = profileData.preferredLanguage;
this.userService
.SaveMyUserProfile(
this.user.human.firstName,
this.user.human.lastName,
this.user.human.nickName,
this.user.human.preferredLanguage,
this.user.human.gender,
)
.then((data: UserProfile) => {
this.toast.showInfo('USER.TOAST.SAVED', true);
this.user = Object.assign(this.user, data.toObject());
})
.catch(error => {
this.toast.showError(error);
});
}
}
public saveEmail(): void {
this.emailEditState = false;
this.userService
.SaveMyUserEmail(this.user.email).then((data: UserEmail) => {
this.toast.showInfo('USER.TOAST.EMAILSAVED', true);
this.user.email = data.toObject().email;
this.emailEditState = false;
}).catch(error => {
this.toast.showError(error);
this.emailEditState = false;
});
if (this.user.human) {
this.userService
.SaveMyUserEmail(this.user.human.email).then((data: UserEmail) => {
this.toast.showInfo('USER.TOAST.EMAILSAVED', true);
if (this.user.human) {
this.user.human.email = data.toObject().email;
}
this.emailEditState = false;
}).catch(error => {
this.toast.showError(error);
this.emailEditState = false;
});
}
}
public enterCode(): void {
const dialogRef = this.dialog.open(CodeDialogComponent, {
data: {
number: this.user.phone,
},
width: '400px',
});
if (this.user.human) {
const dialogRef = this.dialog.open(CodeDialogComponent, {
data: {
number: this.user.human.phone,
},
width: '400px',
});
dialogRef.afterClosed().subscribe(code => {
if (code) {
this.userService.VerifyMyUserPhone(code).then(() => {
this.toast.showInfo('USER.TOAST.PHONESAVED', true);
}).catch(error => {
this.toast.showError(error);
});
}
});
dialogRef.afterClosed().subscribe(code => {
if (code) {
this.userService.VerifyMyUserPhone(code).then(() => {
this.toast.showInfo('USER.TOAST.PHONESAVED', true);
}).catch(error => {
this.toast.showError(error);
});
}
});
}
}
public changedLanguage(language: string): void {
@@ -130,25 +139,33 @@ export class AuthUserDetailComponent implements OnDestroy {
}
public deletePhone(): void {
this.userService.RemoveMyUserPhone().then(() => {
this.toast.showInfo('USER.TOAST.PHONEREMOVED', true);
this.user.phone = '';
this.phoneEditState = false;
}).catch(error => {
this.toast.showError(error);
});
if (this.user.human) {
this.userService.RemoveMyUserPhone().then(() => {
this.toast.showInfo('USER.TOAST.PHONEREMOVED', true);
if (this.user.human) {
this.user.human.phone = '';
}
this.phoneEditState = false;
}).catch(error => {
this.toast.showError(error);
});
}
}
public savePhone(): void {
this.phoneEditState = false;
this.userService
.SaveMyUserPhone(this.user.phone).then((data: UserPhone) => {
this.toast.showInfo('USER.TOAST.PHONESAVED', true);
this.user.phone = data.toObject().phone;
this.phoneEditState = false;
}).catch(error => {
this.toast.showError(error);
this.phoneEditState = false;
});
if (this.user.human) {
this.userService
.SaveMyUserPhone(this.user.human.phone).then((data: UserPhone) => {
this.toast.showInfo('USER.TOAST.PHONESAVED', true);
if (this.user.human) {
this.user.human.phone = data.toObject().phone;
}
this.phoneEditState = false;
}).catch(error => {
this.toast.showError(error);
this.phoneEditState = false;
});
}
}
}

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

@@ -0,0 +1,29 @@
<form [formGroup]="machineForm" *ngIf="machineForm" (ngSubmit)="submitForm()">
<div class="content">
<mat-form-field class="formfield">
<mat-label>{{ 'USER.MACHINE.USERNAME' | translate }}</mat-label>
<input matInput formControlName="userName" required />
<mat-error *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
<mat-error *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
{{ 'USER.VALIDATION.NOEMAIL' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="formfield">
<mat-label>{{ 'USER.MACHINE.NAME' | translate }}</mat-label>
<input matInput formControlName="name" required />
<mat-error *ngIf="name?.invalid && name?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="formfield">
<mat-label>{{ 'USER.MACHINE.DESCRIPTION' | translate }}</mat-label>
<input matInput formControlName="description" />
</mat-form-field>
</div>
<div class="btn-container">
<button class="submit-button" type="submit" color="primary"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</div>
</form>

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

@@ -0,0 +1,21 @@
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
.formfield {
flex: 1 1 33%;
margin: 0 .5rem;
}
}
.btn-container {
display: flex;
justify-content: flex-end;
.submit-button {
border-radius: .5rem;
}
}

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

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

55
console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.ts Normal file
View File

@@ -0,0 +1,55 @@
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { UserView } from '../../../../proto/generated/management_pb';
@Component({
selector: 'app-detail-form-machine',
templateUrl: './detail-form-machine.component.html',
styleUrls: ['./detail-form-machine.component.scss'],
})
export class DetailFormMachineComponent implements OnInit, OnDestroy {
@Input() public username!: string;
@Input() public user!: UserView;
@Input() public disabled: boolean = false;
@Output() public submitData: EventEmitter<any> = new EventEmitter<any>();
public machineForm!: FormGroup;
private sub: Subscription = new Subscription();
constructor(private fb: FormBuilder) {
this.machineForm = this.fb.group({
userName: [{ value: '', disabled: true }, [
Validators.required,
]],
name: [{ value: '', disabled: true }, Validators.required],
description: [{ value: '', disabled: this.disabled }],
});
}
public ngOnInit(): void {
this.machineForm.patchValue({ userName: this.username, ...this.user });
}
public ngOnDestroy(): void {
this.sub.unsubscribe();
}
public submitForm(): void {
this.submitData.emit(this.machineForm.value);
}
public get name(): AbstractControl | null {
return this.machineForm.get('name');
}
public get description(): AbstractControl | null {
return this.machineForm.get('description');
}
public get userName(): AbstractControl | null {
return this.machineForm.get('userName');
}
}

34
console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.module.ts Normal file
View File

@@ -0,0 +1,34 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } 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 { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
import { DetailFormMachineComponent } from './detail-form-machine.component';
@NgModule({
declarations: [
DetailFormMachineComponent,
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatButtonModule,
MatIconModule,
TranslateModule,
],
exports: [
DetailFormMachineComponent,
],
})
export class DetailFormMachineModule { }

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

@@ -1,8 +1,8 @@
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { Gender as authGender, UserProfile as authUP } from 'src/app/proto/generated/auth_pb';
import { Gender as mgmtGender, UserProfile as mgmtUP } from 'src/app/proto/generated/management_pb';
import { Gender as authGender, UserProfile as authUP, UserView as authUV } from 'src/app/proto/generated/auth_pb';
import { Gender as mgmtGender, UserProfile as mgmtUP, UserView as mgmtUV } from 'src/app/proto/generated/management_pb';
@Component({
@@ -11,11 +11,12 @@ import { Gender as mgmtGender, UserProfile as mgmtUP } from 'src/app/proto/gener
styleUrls: ['./detail-form.component.scss'],
})
export class DetailFormComponent implements OnInit, OnDestroy {
@Input() public profile!: mgmtUP | authUP;
@Input() public username!: string;
@Input() public user!: mgmtUV | authUV;
@Input() public disabled: boolean = false;
@Input() public genders: mgmtGender[] | authGender[] = [];
@Input() public languages: string[] = ['de', 'en'];
@Output() public submitData: EventEmitter<any> = new EventEmitter<any>();
@Output() public submitData: EventEmitter<mgmtUP | authUP> = new EventEmitter<mgmtUP | authUP>();
@Output() public changedLanguage: EventEmitter<string> = new EventEmitter<string>();
public profileForm!: FormGroup;
@@ -36,7 +37,7 @@ export class DetailFormComponent implements OnInit, OnDestroy {
}
public ngOnInit(): void {
this.profileForm.patchValue(this.profile);
this.profileForm.patchValue({ userName: this.username, ...this.user });
if (this.preferredLanguage) {
this.sub = this.preferredLanguage.valueChanges.subscribe(value => {
@@ -52,9 +53,11 @@ export class DetailFormComponent implements OnInit, OnDestroy {
public submitForm(): void {
this.submitData.emit(this.profileForm.value);
}
public get userName(): AbstractControl | null {
return this.profileForm.get('userName');
}
public get firstName(): AbstractControl | null {
return this.profileForm.get('firstName');
}

30
console/src/app/pages/users/user-detail/machine-keys/add-key-dialog/add-key-dialog.component.html Normal file
View File

@@ -0,0 +1,30 @@
<span class="title" mat-dialog-title>{{'USER.MACHINE.ADD.TITLE' | translate}}</span>
<div mat-dialog-content>
<p class="desc"> {{'USER.MACHINE.ADD.DESCRIPTION' | translate}}</p>
<mat-form-field class="form-field" appearance="outline">
<mat-label>{{'USER.MACHINE.TYPE' | translate}}</mat-label>
<mat-select [(ngModel)]="type">
<mat-option *ngFor="let t of types" [value]="t">
{{'USER.MACHINE.KEYTYPES.'+t | translate}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field" appearance="outline">
<mat-label>{{'USER.MACHINE.CHOOSEEXPIRY' | translate}}</mat-label>
<input matInput [matDatepicker]="picker" [(ngModel)]="date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<div mat-dialog-actions class="action">
<button mat-button (click)="closeDialog()">
{{'ACTIONS.CANCEL' | translate}}
</button>
<button color="primary" mat-raised-button class="ok-button" [disabled]="type == undefined"
(click)="closeDialogWithSuccess()">
{{'ACTIONS.ADD' | translate}}
</button>
</div>

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

@@ -0,0 +1,26 @@
.title {
font-size: 1.2rem;
margin-top: 0;
}
.desc {
color: #8795a1;
font-size: .9rem;
}
.form-field {
width: 100%;
}
.action {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: .5rem;
}
button {
border-radius: .5rem;
}
}

25
console/src/app/pages/users/user-detail/machine-keys/add-key-dialog/add-key-dialog.component.spec.ts Normal file
View File

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

32
console/src/app/pages/users/user-detail/machine-keys/add-key-dialog/add-key-dialog.component.ts Normal file
View File

@@ -0,0 +1,32 @@
import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { MachineKeyType } from 'src/app/proto/generated/management_pb';
@Component({
selector: 'app-add-key-dialog',
templateUrl: './add-key-dialog.component.html',
styleUrls: ['./add-key-dialog.component.scss'],
})
export class AddKeyDialogComponent implements OnInit {
types: MachineKeyType[] = [
MachineKeyType.MACHINEKEY_JSON,
];
date: any;
public type: MachineKeyType = MachineKeyType.MACHINEKEY_JSON;
constructor(
public dialogRef: MatDialogRef<AddKeyDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
) { }
ngOnInit(): void {
}
public closeDialog(): void {
this.dialogRef.close(false);
}
public closeDialogWithSuccess(): void {
this.dialogRef.close({ type: this.type, date: this.date });
}
}

28
console/src/app/pages/users/user-detail/machine-keys/add-key-dialog/add-key-dialog.module.ts Normal file
View File

@@ -0,0 +1,28 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
import { AddKeyDialogComponent } from './add-key-dialog.component';
@NgModule({
declarations: [AddKeyDialogComponent],
imports: [
CommonModule,
TranslateModule,
MatButtonModule,
MatFormFieldModule,
MatSelectModule,
MatInputModule,
MatIconModule,
FormsModule,
MatDatepickerModule,
],
})
export class AddKeyDialogModule { }

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

@@ -0,0 +1,65 @@
<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
[timestamp]="keyResult?.viewTimestamp" [selection]="selection">
<ng-template appHasRole [appHasRole]="['user.write']" actions>
<button color="warn" [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false"
(click)="deleteSelectedKeys()" matTooltip="{{'ACTIONS.DELETE' | translate}}" class="icon-button"
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()">
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
<div class="table-wrapper">
<table class="table background-style" 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 key">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(key) : null" [checked]="selection.isSelected(key)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.ID' | translate }} </th>
<td mat-cell *matCellDef="let key"> {{key?.id}} </td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.TYPE' | translate }} </th>
<td mat-cell *matCellDef="let key"> {{'USER.MACHINE.KEYTYPES.'+key?.type | translate}} </td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.CREATIONDATE' | translate }} </th>
<td mat-cell *matCellDef="let key">
{{key.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
</td>
</ng-container>
<ng-container matColumnDef="expirationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.EXPIRYDATE' | translate }} </th>
<td mat-cell *matCellDef="let key">
{{key.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="row.id ? ['/users', row.id ]: null">
</tr>
</table>
<mat-paginator #paginator class="paginator background-style" [length]="keyResult?.totalResult || 0"
[pageSize]="10" [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</div>
</app-refresh-table>

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

@@ -0,0 +1,39 @@
.table-wrapper {
overflow: auto;
.table,
.paginator {
width: 100%;
td,
th {
padding: 0 1rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
}
}
}
tr {
outline: none;
}
.add-button {
border-radius: .5rem;
}

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

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

124
console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.ts Normal file
View File

@@ -0,0 +1,124 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { TranslateService } from '@ngx-translate/core';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, Observable } from 'rxjs';
import { MachineKeySearchResponse, MachineKeyType, MachineKeyView } from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { AddKeyDialogComponent } from './add-key-dialog/add-key-dialog.component';
@Component({
selector: 'app-machine-keys',
templateUrl: './machine-keys.component.html',
styleUrls: ['./machine-keys.component.scss'],
})
export class MachineKeysComponent implements OnInit {
@Input() userId!: string;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
public dataSource: MatTableDataSource<MachineKeyView.AsObject> = new MatTableDataSource<MachineKeyView.AsObject>();
public selection: SelectionModel<MachineKeyView.AsObject> = new SelectionModel<MachineKeyView.AsObject>(true, []);
public keyResult!: MachineKeySearchResponse.AsObject;
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@Input() public displayedColumns: string[] = ['select', 'id', 'type', 'creationDate', 'expirationDate'];
@Output() public changedSelection: EventEmitter<Array<MachineKeyView.AsObject>> = new EventEmitter();
constructor(public translate: TranslateService, private userService: ManagementService, private dialog: MatDialog,
private toast: ToastService) {
this.selection.changed.subscribe(() => {
this.changedSelection.emit(this.selection.selected);
});
}
public 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 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 deleteSelectedKeys(): void {
Promise.all(this.selection.selected.map(value => {
return this.userService.DeleteMachineKey(value.id, this.userId);
})).then(() => {
this.selection.clear();
this.toast.showInfo('USER.TOAST.SELECTEDKEYSDELETED', true);
this.getData(10, 0);
});
}
public openAddKey(): void {
const dialogRef = this.dialog.open(AddKeyDialogComponent, {
data: {},
width: '400px',
});
dialogRef.afterClosed().subscribe(resp => {
if (resp) {
const type: MachineKeyType = resp.type;
let date: Timestamp | undefined;
if (resp.date as Date) {
const ts = new Timestamp();
const milliseconds = resp.date.getTime();
const seconds = Math.abs(milliseconds / 1000);
const nanos = (milliseconds - seconds * 1000) * 1000 * 1000;
ts.setSeconds(seconds);
ts.setNanos(nanos);
date = ts;
console.log(date.toObject());
}
if (type) {
console.log(this.userId, type, date);
return this.userService.AddMachineKey(this.userId, type, date).then(() => {
this.toast.showInfo('ORG.TOAST.MEMBERADDED', true);
}).catch((error: any) => {
this.toast.showError(error);
});
}
}
});
}
private async getData(limit: number, offset: number): Promise<void> {
this.loadingSubject.next(true);
this.userService.SearchMachineKeys(this.userId, limit, offset).then(resp => {
this.keyResult = resp.toObject();
this.dataSource.data = this.keyResult.resultList;
console.log(this.keyResult.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);
}
}

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

@@ -1,14 +1,9 @@
<app-detail-layout [backRouterLink]="[ '/users', user?.id]"
title="{{user?.displayName}} {{ 'USER.MEMBERSHIPS.TITLE' | translate }}"
title="{{user?.human?.displayName}} {{ 'USER.MEMBERSHIPS.TITLE' | translate }}"
description="{{ 'USER.MEMBERSHIPS.DESCRIPTION' | translate }}">
<app-refresh-table class="refresh-table" (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult"
[timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
<!-- <button actions (click)="removeSelectedMemberships()" matTooltip="{{'USER.MEMBERSHIPS.REMOVE' | translate}}"
class="icon-button" mat-icon-button *ngIf="selection.hasValue()" color="warn">
<i class="las la-trash"></i>
</button> -->
<a actions color="primary" class="add-button" (click)="addMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>

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

@@ -6,7 +6,7 @@ import { MatTable } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { tap } from 'rxjs/operators';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { User, UserMembershipSearchResponse, UserMembershipView, UserView } from 'src/app/proto/generated/management_pb';
import { UserMembershipSearchResponse, UserMembershipView, UserView } from 'src/app/proto/generated/management_pb';
import { AdminService } from 'src/app/services/admin.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -124,7 +124,7 @@ export class MembershipDetailComponent implements AfterViewInit {
}
public createIamMember(response: any): void {
const users: User.AsObject[] = response.users;
const users: UserView.AsObject[] = response.users;
const roles: string[] = response.roles;
if (users && users.length && roles && roles.length) {
@@ -139,7 +139,7 @@ export class MembershipDetailComponent implements AfterViewInit {
}
private createOrgMember(response: any): void {
const users: User.AsObject[] = response.users;
const users: UserView.AsObject[] = response.users;
const roles: string[] = response.roles;
if (users && users.length && roles && roles.length) {
@@ -154,7 +154,7 @@ export class MembershipDetailComponent implements AfterViewInit {
}
private createGrantedProjectMember(response: any): void {
const users: User.AsObject[] = response.users;
const users: UserView.AsObject[] = response.users;
const roles: string[] = response.roles;
if (users && users.length && roles && roles.length) {
@@ -174,7 +174,7 @@ export class MembershipDetailComponent implements AfterViewInit {
}
private createOwnedProjectMember(response: any): void {
const users: User.AsObject[] = response.users;
const users: UserView.AsObject[] = response.users;
const roles: string[] = response.roles;
if (users && users.length && roles && roles.length) {

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

@@ -16,6 +16,14 @@ const routes: Routes = [
roles: ['user.write'],
},
},
{
path: 'create-machine',
loadChildren: () => import('../user-create-machine/user-create-machine.module').then(m => m.UserCreateMachineModule),
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['user.write'],
},
},
{
path: 'me',
component: AuthUserDetailComponent,

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

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
@@ -25,13 +26,18 @@ import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.
import { SharedModule } from 'src/app/modules/shared/shared.module';
import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe.module';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe.module';
import { AuthUserDetailComponent } from './auth-user-detail/auth-user-detail.component';
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 { ThemeSettingComponent } from './auth-user-detail/theme-setting/theme-setting.component';
import { DetailFormMachineModule } from './detail-form-machine/detail-form-machine.module';
import { DetailFormModule } from './detail-form/detail-form.module';
import { AddKeyDialogModule } from './machine-keys/add-key-dialog/add-key-dialog.module';
import { MachineKeysComponent } from './machine-keys/machine-keys.component';
import { MembershipsComponent } from './memberships/memberships.component';
import { PasswordComponent } from './password/password.component';
import { UserDetailRoutingModule } from './user-detail-routing.module';
@@ -49,6 +55,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
PasswordComponent,
CodeDialogComponent,
MembershipsComponent,
MachineKeysComponent,
],
imports: [
UserDetailRoutingModule,
@@ -57,9 +64,12 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
FormsModule,
ReactiveFormsModule,
DetailFormModule,
DetailFormMachineModule,
MatDialogModule,
QRCodeModule,
MetaLayoutModule,
AddKeyDialogModule,
MatCheckboxModule,
HasRolePipeModule,
MatFormFieldModule,
UserGrantsModule,
@@ -80,6 +90,8 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
DetailLayoutModule,
PasswordComplexityViewModule,
MemberCreateDialogModule,
TimestampToDatePipeModule,
LocalizedDatePipeModule,
],
})
export class UserDetailModule { }

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

@@ -4,7 +4,7 @@
<a (click)="navigateBack()" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
<h1>{{user?.displayName}}</h1>
<h1>{{user.human ? user.human?.displayName : user.machine?.name}}</h1>
<span class="fill-space"></span>
@@ -37,14 +37,27 @@
</app-card>
<ng-template appHasRole [appHasRole]="['user.read', 'user.read:'+user?.id]">
<app-card title="{{ 'USER.PROFILE.TITLE' | translate }}">
<app-card *ngIf="user.human" title="{{ 'USER.PROFILE.TITLE' | translate }}">
<app-detail-form [disabled]="(['user.write:' + user?.id, 'user.write'] | hasRole | async) == false"
[genders]="genders" [languages]="languages" [profile]="user" (submitData)="saveProfile($event)">
[genders]="genders" [languages]="languages" [username]="user.userName" [user]="user.human"
(submitData)="saveProfile($event)">
</app-detail-form>
</app-card>
<app-card *ngIf="user.machine" title="{{ 'USER.MACHINE.TITLE' | translate }}">
<app-detail-form-machine
[disabled]="(['user.write:' + user?.id, 'user.write'] | hasRole | async) == false"
[username]="user.userName" [user]="user.machine" (submitData)="saveMachine($event)">
</app-detail-form-machine>
</app-card>
<app-card *ngIf="user.id" title="{{ 'USER.MACHINE.KEYSTITLE' | translate }}"
description="{{ 'USER.MACHINE.KEYSDESC' | translate }}">
<app-machine-keys [userId]="user.id"></app-machine-keys>
</app-card>
</ng-template>
<app-card title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
<app-card *ngIf="user.human" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
<div class="method-col">
<div class="method-row">
@@ -65,11 +78,11 @@
<ng-container *ngIf="!emailEditState; else emailEdit">
<div class="actions">
<span class="name">{{user?.email}}</span>
<mat-icon class="icon" *ngIf="user?.isEmailVerified" color="primary" aria-hidden="false"
aria-label="verified icon">
<span class="name">{{user?.human?.email}}</span>
<mat-icon class="icon" *ngIf="user?.human?.isEmailVerified" color="primary"
aria-hidden="false" aria-label="verified icon">
check_circle_outline</mat-icon>
<ng-container *ngIf="user?.email && !user?.isEmailVerified">
<ng-container *ngIf="user?.human?.email && !user?.human?.isEmailVerified">
<mat-icon class="icon" color="warn" aria-hidden="false" aria-label="not verified icon">
highlight_off
</mat-icon>
@@ -87,13 +100,15 @@
<ng-template #emailEdit>
<mat-form-field class="name">
<mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>
<input matInput [(ngModel)]="user.email" />
<input matInput *ngIf="user.human && user.human.email" [(ngModel)]="user.human.email" />
</mat-form-field>
<button (click)="emailEditState = false" mat-icon-button>
<mat-icon class="icon">close</mat-icon>
</button>
<button [disabled]="!user.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 || (['user.write','user.write' + user.id] | hasRole | async) == false"
class="submit-button" type="button" color="primary" (click)="saveEmail()"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</ng-template>
</div>
@@ -102,11 +117,11 @@
<ng-container *ngIf="!phoneEditState; else phoneEdit">
<div class="actions">
<span class="name">{{user?.phone}}</span>
<mat-icon class="icon" *ngIf="user?.isPhoneVerified" color="primary" aria-hidden="false"
aria-label="verified icon">
<span class="name">{{user?.human?.phone}}</span>
<mat-icon class="icon" *ngIf="user?.human?.isPhoneVerified" color="primary"
aria-hidden="false" aria-label="verified icon">
check_circle_outline</mat-icon>
<ng-container *ngIf="user?.phone && !user?.isPhoneVerified">
<ng-container *ngIf="user?.human?.phone && !user?.human?.isPhoneVerified">
<mat-icon class="icon" color="warn" aria-hidden="false" aria-label="not verified icon">
highlight_off
</mat-icon>
@@ -125,22 +140,24 @@
<ng-template #phoneEdit>
<mat-form-field class="name">
<mat-label>{{ 'USER.PHONE' | translate }}</mat-label>
<input matInput [(ngModel)]="user.phone" />
<input *ngIf="user.human && user.human.phone" matInput [(ngModel)]="user.human.phone" />
</mat-form-field>
<button (click)="phoneEditState = false" mat-icon-button>
<mat-icon class="icon">close</mat-icon>
</button>
<button *ngIf="user.phone" color="warn" (click)="deletePhone()" mat-icon-button>
<button *ngIf="user.human?.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>
<button *ngIf="user.human"
[disabled]="!user.human.phone || (['user.write', 'user.write'+ user.id]| hasRole | async) == false"
type="button" color="primary" (click)="savePhone()" mat-raised-button>
{{ 'ACTIONS.SAVE' | translate }}</button>
</ng-template>
</div>
</div>
</app-card>
<app-user-mfa *ngIf="user" [user]="user"></app-user-mfa>
<app-user-mfa *ngIf="user && user.human" [user]="user"></app-user-mfa>
<app-card *ngIf="user?.id" title="{{ 'GRANTS.USER.TITLE' | translate }}"
description="{{'GRANTS.USER.DESCRIPTION' | translate }}">

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

@@ -6,6 +6,8 @@ import { Subscription } from 'rxjs';
import { ChangeType } from 'src/app/modules/changes/changes.component';
import {
Gender,
MachineResponse,
MachineView,
NotificationType,
UserEmail,
UserPhone,
@@ -79,27 +81,48 @@ export class UserDetailComponent implements OnInit, OnDestroy {
}
public saveProfile(profileData: UserProfile.AsObject): void {
this.user.firstName = profileData.firstName;
this.user.lastName = profileData.lastName;
this.user.nickName = profileData.nickName;
this.user.displayName = profileData.displayName;
this.user.gender = profileData.gender;
this.user.preferredLanguage = profileData.preferredLanguage;
this.mgmtUserService
.SaveUserProfile(
this.user.id,
this.user.firstName,
this.user.lastName,
this.user.nickName,
this.user.preferredLanguage,
this.user.gender)
.then((data: UserProfile) => {
this.toast.showInfo('USER.TOAST.SAVED', true);
this.user = Object.assign(this.user, data.toObject());
})
.catch(error => {
this.toast.showError(error);
});
if (this.user.human) {
this.user.human.firstName = profileData.firstName;
this.user.human.lastName = profileData.lastName;
this.user.human.nickName = profileData.nickName;
this.user.human.displayName = profileData.displayName;
this.user.human.gender = profileData.gender;
this.user.human.preferredLanguage = profileData.preferredLanguage;
this.mgmtUserService
.SaveUserProfile(
this.user.id,
this.user.human.firstName,
this.user.human.lastName,
this.user.human.nickName,
this.user.human.preferredLanguage,
this.user.human.gender)
.then((data: UserProfile) => {
this.toast.showInfo('USER.TOAST.SAVED', true);
this.user = Object.assign(this.user, data.toObject());
})
.catch(error => {
this.toast.showError(error);
});
}
}
public saveMachine(machineData: MachineView.AsObject): void {
if (this.user.machine) {
this.user.machine.name = machineData.name;
this.user.machine.description = machineData.description;
this.mgmtUserService
.UpdateUserMachine(
this.user.id,
this.user.machine.description)
.then((data: MachineResponse) => {
this.toast.showInfo('USER.TOAST.SAVED', true);
this.user = Object.assign(this.user, data.toObject());
})
.catch(error => {
this.toast.showError(error);
});
}
}
public resendVerification(): void {
@@ -121,7 +144,9 @@ export class UserDetailComponent implements OnInit, OnDestroy {
public deletePhone(): void {
this.mgmtUserService.RemoveUserPhone(this.user.id).then(() => {
this.toast.showInfo('USER.TOAST.PHONEREMOVED', true);
this.user.phone = '';
if (this.user.human) {
this.user.human.phone = '';
}
this.phoneEditState = false;
}).catch(error => {
this.toast.showError(error);
@@ -130,25 +155,33 @@ export class UserDetailComponent implements OnInit, OnDestroy {
public saveEmail(): void {
this.emailEditState = false;
this.mgmtUserService
.SaveUserEmail(this.user.id, this.user.email).then((data: UserEmail) => {
this.toast.showInfo('USER.TOAST.EMAILSENT', true);
this.user.email = data.toObject().email;
}).catch(error => {
this.toast.showError(error);
});
if (this.user && this.user.human?.phone) {
this.mgmtUserService
.SaveUserEmail(this.user.id, this.user.human.email).then((data: UserEmail) => {
this.toast.showInfo('USER.TOAST.EMAILSENT', true);
if (this.user.human) {
this.user.human.email = data.toObject().email;
}
}).catch(error => {
this.toast.showError(error);
});
}
}
public savePhone(): void {
this.phoneEditState = false;
this.mgmtUserService
.SaveUserPhone(this.user.id, this.user.phone).then((data: UserPhone) => {
this.toast.showInfo('USER.TOAST.PHONESAVED', true);
this.user.phone = data.toObject().phone;
this.phoneEditState = false;
}).catch(error => {
this.toast.showError(error);
});
if (this.user && this.user.human?.phone) {
this.mgmtUserService
.SaveUserPhone(this.user.id, this.user.human.phone).then((data: UserPhone) => {
this.toast.showInfo('USER.TOAST.PHONESAVED', true);
if (this.user.human) {
this.user.human.phone = data.toObject().phone;
}
this.phoneEditState = false;
}).catch(error => {
this.toast.showError(error);
});
}
}
public navigateBack(): void {

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

@@ -1,14 +1,25 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserListComponent } from './user-list.component';
import { UserListComponent, UserType } from './user-list.component';
const routes: Routes = [
{
path: '',
path: 'humans',
component: UserListComponent,
data: { animation: 'HomePage' },
data: {
animation: 'HomePage',
type: UserType.HUMAN,
},
},
{
path: 'machines',
component: UserListComponent,
data: {
animation: 'HomePage',
type: UserType.MACHINE,
},
},
];

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

@@ -1,74 +1,17 @@
<div class="max-width-container">
<h1>{{ 'USER.PAGES.LIST' | translate }}</h1>
<p class="sub">{{ 'USER.PAGES.DESCRIPTION' | translate }}</p>
<div class="max-width-container" [ngSwitch]="type">
<ng-container *ngSwitchCase="UserType.HUMAN">
<h1>{{ 'USER.PAGES.LIST' | translate }}</h1>
<p class="sub">{{ 'USER.PAGES.DESCRIPTION' | translate }}</p>
<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
[timestamp]="userResult?.viewTimestamp">
<ng-template appHasRole [appHasRole]="['user.write']" actions>
<button (click)="deactivateSelectedUsers()" matTooltip="{{'ORG_DETAIL.TABLE.DEACTIVATE' | translate}}"
class="icon-button" mat-icon-button *ngIf="selection.hasValue()">
<mat-icon svgIcon="mdi_account_cancel"></mat-icon>
</button>
<button (click)="reactivateSelectedUsers()" matTooltip="{{'ORG_DETAIL.TABLE.ACTIVATE' | translate}}"
class="icon-button" mat-icon-button *ngIf="selection.hasValue()">
<mat-icon svgIcon="mdi_account_check_outline"></mat-icon>
</button>
<a class="add-button" [routerLink]="[ '/users', 'create']" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
<app-user-table [userType]="UserType.HUMAN"></app-user-table>
</ng-container>
<div class="table-wrapper">
<table class="table background-style" 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 user">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(user) : null" [checked]="selection.isSelected(user)">
<app-avatar *ngIf="user && user.displayName" class="avatar" [name]="user.displayName"
[size]="32">
</app-avatar>
</mat-checkbox>
</td>
</ng-container>
<ng-container *ngSwitchCase="UserType.MACHINE">
<h1>{{ 'USER.PAGES.LISTMACHINE' | translate }}</h1>
<p class="sub">{{ 'USER.PAGES.DESCRIPTIONMACHINE' | translate }}</p>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.FIRSTNAME' | translate }} </th>
<td mat-cell *matCellDef="let user"> {{user.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.LASTNAME' | translate }} </th>
<td mat-cell *matCellDef="let user"> {{user.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.USERNAME' | translate }} </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>
<td mat-cell *matCellDef="let user"> {{user.email}} </td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.DATA.STATE' | translate }} </th>
<td mat-cell *matCellDef="let user"> {{ 'USER.DATA.STATE'+user.state | translate }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/users', row.id]">
</tr>
</table>
<mat-paginator #paginator class="paginator background-style" [length]="userResult?.totalResult || 0"
[pageSize]="10" [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</div>
</app-refresh-table>
<app-user-table [userType]="UserType.MACHINE"
[displayedColumns]="['select','name', 'username', 'description','state']">
</app-user-table>
</ng-container>
</div>

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

@@ -6,42 +6,3 @@ h1 {
color: #8795a1;
margin-bottom: 2rem;
}
.add-button {
border-radius: .5rem;
}
.table-wrapper {
overflow: auto;
.table,
.paginator {
width: 100%;
td,
th {
padding: 0 1rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
}
}
}
tr {
outline: none;
}

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

@@ -1,91 +1,24 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { User, UserSearchResponse } from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { take } from 'rxjs/operators';
export enum UserType {
HUMAN = 'human',
MACHINE = 'machine',
}
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.scss'],
})
export class UserListComponent implements OnDestroy {
@ViewChild(MatPaginator) public paginator!: MatPaginator;
public dataSource: MatTableDataSource<User.AsObject> = new MatTableDataSource<User.AsObject>();
public userResult!: UserSearchResponse.AsObject;
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'state'];
public selection: SelectionModel<User.AsObject> = new SelectionModel<User.AsObject>(true, []);
@Output() public changedSelection: EventEmitter<Array<User.AsObject>> = new EventEmitter();
private subscription?: Subscription;
constructor(public translate: TranslateService, private route: ActivatedRoute, private userService: ManagementService,
private toast: ToastService) {
this.subscription = this.route.params.subscribe(() => this.getData(10, 0));
this.selection.changed.subscribe(() => {
this.changedSelection.emit(this.selection.selected);
export class UserListComponent {
public UserType: any = UserType;
public type: UserType = UserType.HUMAN;
constructor(public translate: TranslateService, activatedRoute: ActivatedRoute) {
activatedRoute.data.pipe(take(1)).subscribe(params => {
const { type } = params;
this.type = type;
});
}
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 ngOnDestroy(): void {
this.subscription?.unsubscribe();
}
public changePage(event: PageEvent): void {
this.getData(event.pageSize, event.pageIndex * event.pageSize);
}
public deactivateSelectedUsers(): void {
Promise.all(this.selection.selected.map(value => {
return this.userService.DeactivateUser(value.id);
})).then(() => {
this.toast.showInfo('USER.TOAST.SELECTEDDEACTIVATED', true);
this.getData(10, 0);
});
}
public reactivateSelectedUsers(): void {
Promise.all(this.selection.selected.map(value => {
return this.userService.ReactivateUser(value.id);
})).then(() => {
this.toast.showInfo('USER.TOAST.SELECTEDREACTIVATED', true);
this.getData(10, 0);
});
}
private async getData(limit: number, offset: number): Promise<void> {
this.loadingSubject.next(true);
this.userService.SearchUsers(limit, offset).then(resp => {
this.userResult = resp.toObject();
this.dataSource.data = this.userResult.resultList;
this.loadingSubject.next(false);
}).catch(error => {
this.toast.showError(error);
this.loadingSubject.next(false);
});
}
public refreshPage(): void {
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
}
}

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

@@ -18,11 +18,13 @@ import { SharedModule } from 'src/app/modules/shared/shared.module';
import { UserListRoutingModule } from './user-list-routing.module';
import { UserListComponent } from './user-list.component';
import { UserTableComponent } from './user-table/user-table.component';
@NgModule({
declarations: [
UserListComponent,
UserTableComponent,
],
imports: [
AvatarModule,

80
console/src/app/pages/users/user-list/user-table/user-table.component.html Normal file
View File

@@ -0,0 +1,80 @@
<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
[timestamp]="userResult?.viewTimestamp" [selection]="selection">
<ng-template appHasRole [appHasRole]="['user.write']" actions>
<button (click)="deactivateSelectedUsers()" matTooltip="{{'ORG_DETAIL.TABLE.DEACTIVATE' | translate}}"
class="icon-button" mat-icon-button *ngIf="selection.hasValue()">
<mat-icon svgIcon="mdi_account_cancel"></mat-icon>
</button>
<button (click)="reactivateSelectedUsers()" matTooltip="{{'ORG_DETAIL.TABLE.ACTIVATE' | translate}}"
class="icon-button" mat-icon-button *ngIf="selection.hasValue()">
<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>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
<div class="table-wrapper">
<table class="table background-style" 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 user">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(user) : null" [checked]="selection.isSelected(user)">
<app-avatar *ngIf="user[userType] && user[userType].displayName" class="avatar"
[name]="user[userType].displayName" [size]="32">
</app-avatar>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.FIRSTNAME' | translate }} </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>
<td mat-cell *matCellDef="let user"> {{user[userType]?.lastName}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.NAME' | translate }} </th>
<td mat-cell *matCellDef="let user"> {{user[userType]?.name}} </td>
</ng-container>
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.DESCRIPTION' | translate }} </th>
<td mat-cell *matCellDef="let user"> {{user[userType]?.description}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.USERNAME' | translate }} </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>
<td mat-cell *matCellDef="let user"> {{user[userType]?.email}} </td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.DATA.STATE' | translate }} </th>
<td mat-cell *matCellDef="let user"> {{ 'USER.DATA.STATE'+user.state | translate }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="row.id ? ['/users', row.id ]: null">
</tr>
</table>
<mat-paginator #paginator class="paginator background-style" [length]="userResult?.totalResult || 0"
[pageSize]="10" [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</div>
</app-refresh-table>

39
console/src/app/pages/users/user-list/user-table/user-table.component.scss Normal file
View File

@@ -0,0 +1,39 @@
.table-wrapper {
overflow: auto;
.table,
.paginator {
width: 100%;
td,
th {
padding: 0 1rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
}
}
}
tr {
outline: none;
}
.add-button {
border-radius: .5rem;
}

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

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

98
console/src/app/pages/users/user-list/user-table/user-table.component.ts Normal file
View File

@@ -0,0 +1,98 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
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 { UserView } from 'src/app/proto/generated/auth_pb';
import { UserSearchKey, UserSearchQuery, UserSearchResponse } from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { UserType } from '../user-list.component';
@Component({
selector: 'app-user-table',
templateUrl: './user-table.component.html',
styleUrls: ['./user-table.component.scss'],
})
export class UserTableComponent implements OnInit {
public UserType: any = UserType;
@Input() userType: UserType = UserType.HUMAN;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
public dataSource: MatTableDataSource<UserView.AsObject> = new MatTableDataSource<UserView.AsObject>();
public selection: SelectionModel<UserView.AsObject> = new SelectionModel<UserView.AsObject>(true, []);
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'];
@Output() public changedSelection: EventEmitter<Array<UserView.AsObject>> = new EventEmitter();
constructor(public translate: TranslateService, private userService: ManagementService,
private toast: ToastService) {
this.selection.changed.subscribe(() => {
this.changedSelection.emit(this.selection.selected);
});
}
ngOnInit(): void {
this.getData(10, 0, this.userType);
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
public changePage(event: PageEvent): void {
this.getData(event.pageSize, event.pageIndex * event.pageSize, this.userType);
}
public deactivateSelectedUsers(): void {
Promise.all(this.selection.selected.map(value => {
return this.userService.DeactivateUser(value.id);
})).then(() => {
this.toast.showInfo('USER.TOAST.SELECTEDDEACTIVATED', true);
this.getData(10, 0, this.userType);
});
}
public reactivateSelectedUsers(): void {
Promise.all(this.selection.selected.map(value => {
return this.userService.ReactivateUser(value.id);
})).then(() => {
this.toast.showInfo('USER.TOAST.SELECTEDREACTIVATED', true);
this.getData(10, 0, this.userType);
});
}
private async getData(limit: number, offset: number, filterTypeValue: UserType): Promise<void> {
this.loadingSubject.next(true);
const query = new UserSearchQuery();
query.setKey(UserSearchKey.USERSEARCHKEY_TYPE);
query.setValue(filterTypeValue);
this.userService.SearchUsers(limit, offset).then(resp => {
this.userResult = resp.toObject();
this.dataSource.data = this.userResult.resultList;
console.log(this.userResult.resultList);
this.loadingSubject.next(false);
}).catch(error => {
this.toast.showError(error);
this.loadingSubject.next(false);
});
}
public refreshPage(): void {
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize, this.userType);
}
}

8
console/src/app/services/admin.service.ts
View File

@@ -4,6 +4,7 @@ import { Empty } from 'google-protobuf/google/protobuf/empty_pb';
import {
AddIamMemberRequest,
ChangeIamMemberRequest,
CreateHumanRequest,
CreateOrgRequest,
CreateUserRequest,
FailedEventID,
@@ -32,12 +33,15 @@ export class AdminService {
public async SetUpOrg(
createOrgRequest: CreateOrgRequest,
registerUserRequest: CreateUserRequest,
humanRequest: CreateHumanRequest,
): Promise<OrgSetUpResponse> {
const req: OrgSetUpRequest = new OrgSetUpRequest();
const userReq: CreateUserRequest = new CreateUserRequest();
userReq.setHuman(humanRequest);
req.setOrg(createOrgRequest);
req.setUser(registerUserRequest);
req.setUser(userReq);
return this.grpcService.admin.setUpOrg(req);
}

111
console/src/app/services/mgmt.service.ts
View File

@@ -1,7 +1,10 @@
import { Injectable } from '@angular/core';
import { Empty } from 'google-protobuf/google/protobuf/empty_pb';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import {
AddMachineKeyRequest,
AddMachineKeyResponse,
AddOrgDomainRequest,
AddOrgMemberRequest,
Application,
@@ -14,12 +17,19 @@ import {
ChangeOrgMemberRequest,
ChangeRequest,
Changes,
CreateHumanRequest,
CreateMachineRequest,
CreateUserRequest,
Domain,
Gender,
GrantedProjectSearchRequest,
Iam,
LoginName,
MachineKeyIDRequest,
MachineKeySearchRequest,
MachineKeySearchResponse,
MachineKeyType,
MachineResponse,
MultiFactors,
NotificationType,
OIDCApplicationCreate,
@@ -35,7 +45,6 @@ import {
OrgDomainValidationResponse,
OrgDomainValidationType,
OrgIamPolicy,
OrgID,
OrgMember,
OrgMemberRoles,
OrgMemberSearchRequest,
@@ -95,11 +104,11 @@ import {
RemoveOrgDomainRequest,
RemoveOrgMemberRequest,
SetPasswordNotificationRequest,
UpdateMachineRequest,
UpdateUserAddressRequest,
UpdateUserEmailRequest,
UpdateUserPhoneRequest,
UpdateUserProfileRequest,
User,
UserAddress,
UserEmail,
UserGrant,
@@ -117,6 +126,7 @@ import {
UserMembershipSearchResponse,
UserPhone,
UserProfile,
UserResponse,
UserSearchQuery,
UserSearchRequest,
UserSearchResponse,
@@ -134,6 +144,77 @@ export type ResponseMapper<TResp, TMappedResp> = (resp: TResp) => TMappedResp;
export class ManagementService {
constructor(private readonly grpcService: GrpcService) { }
public async CreateUserHuman(username: string, user: CreateHumanRequest): Promise<UserResponse> {
const req = new CreateUserRequest();
req.setUserName(username);
req.setHuman(user);
return this.grpcService.mgmt.createUser(req);
}
public async CreateUserMachine(username: string, user: CreateMachineRequest): Promise<UserResponse> {
const req = new CreateUserRequest();
req.setUserName(username);
req.setMachine(user);
return this.grpcService.mgmt.createUser(req);
}
public async UpdateUserMachine(
id: string,
description?: string,
): Promise<MachineResponse> {
const req = new UpdateMachineRequest();
req.setId(id);
if (description) {
req.setDescription(description);
}
return this.grpcService.mgmt.updateUserMachine(req);
}
public async AddMachineKey(
userId: string,
type: MachineKeyType,
date?: Timestamp,
): Promise<AddMachineKeyResponse> {
const req = new AddMachineKeyRequest();
req.setType(type);
req.setUserId(userId);
if (date) {
req.setExpirationDate(date);
}
return this.grpcService.mgmt.addMachineKey(req);
}
public async DeleteMachineKey(
keyId: string,
userId: string,
): Promise<Empty> {
const req = new MachineKeyIDRequest();
req.setKeyId(keyId);
req.setUserId(userId);
return this.grpcService.mgmt.deleteMachineKey(req);
}
public async SearchMachineKeys(
userId: string,
limit: number,
offset: number,
asc?: boolean,
): Promise<MachineKeySearchResponse> {
const req = new MachineKeySearchRequest();
req.setUserId(userId);
req.setLimit(limit);
req.setOffset(offset);
if (asc) {
req.setAsc(asc);
}
return this.grpcService.mgmt.searchMachineKeys(req);
}
public async GetIam(): Promise<Iam> {
const req = new Empty();
return this.grpcService.mgmt.getIam(req);
@@ -238,7 +319,7 @@ export class ManagementService {
}
public async ReactivateMyOrg(): Promise<Org> {
const req = new OrgID();
const req = new Empty();
return this.grpcService.mgmt.reactivateMyOrg(req);
}
@@ -400,25 +481,6 @@ export class ManagementService {
}
}
public async CreateUser(user: CreateUserRequest.AsObject): Promise<User> {
const req = new CreateUserRequest();
req.setEmail(user.email);
req.setUserName(user.userName);
req.setFirstName(user.firstName);
req.setLastName(user.lastName);
req.setNickName(user.nickName);
req.setPassword(user.password);
req.setPreferredLanguage(user.preferredLanguage);
req.setGender(user.gender);
req.setPhone(user.phone);
req.setStreetAddress(user.streetAddress);
req.setPostalCode(user.postalCode);
req.setLocality(user.locality);
req.setRegion(user.region);
req.setCountry(user.country);
return this.grpcService.mgmt.createUser(req);
}
public async GetUserByID(id: string): Promise<UserView> {
const req = new UserID();
req.setId(id);
@@ -525,7 +587,7 @@ export class ManagementService {
return this.grpcService.mgmt.removeUserPhone(req);
}
public async DeactivateUser(id: string): Promise<UserPhone> {
public async DeactivateUser(id: string): Promise<UserResponse> {
const req = new UserID();
req.setId(id);
return this.grpcService.mgmt.deactivateUser(req);
@@ -545,7 +607,8 @@ export class ManagementService {
return this.grpcService.mgmt.createUserGrant(req);
}
public async ReactivateUser(id: string): Promise<UserPhone> {
public async ReactivateUser(id: string): Promise<UserResponse> {
const req = new UserID();
req.setId(id);
return this.grpcService.mgmt.reactivateUser(req);

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

@@ -30,7 +30,8 @@
"PROJECT": "Projekte",
"GRANTEDPROJECT":"Berechtigte Projekte",
"USERSECTION":"Benutzersektion",
"USER": "Benutzer",
"HUMANUSERS": "Benutzer",
"MACHINEUSERS":"Service Benutzer",
"LOGOUT": "Alle Benutzer abmelden",
"NEWORG":"Neue Organisation",
"IAMADMIN":"Du bist ein IAM Administrator. Achtung du hast erhöhte Rechte!",
@@ -73,6 +74,8 @@
"LIST": "Benutzer",
"TITLE": "Benutzer",
"DESCRIPTION": "Erfasse und verwalte die Benutzer in deiner Organisation",
"LISTMACHINE": "Service Benutzer",
"DESCRIPTIONMACHINE": "Erfassen und verwalten Sie die Service Benutzer Ihrer Organisation",
"DETAIL": "Detail",
"CREATE": "Erstellen",
"MY": "Meine Informationen",
@@ -143,6 +146,26 @@
"GENDER": "Geschlecht",
"PASSWORD":"Passwort"
},
"MACHINE": {
"TITLE":"Service Benutzer Details",
"USERNAME":"Benutzername",
"NAME":"Name",
"DESCRIPTION":"Beschreibung",
"KEYSTITLE":"Schlüssel",
"KEYSDESC":"Definieren Sie Ihre Schlüssel mit einem optionalen Ablaufdatum",
"ID":"Schlüssel Id",
"TYPE":"Typ",
"EXPIRYDATE":"Ablaufdatum",
"CHOOSEEXPIRY":"Definieren Sie ein Ablaufdatum",
"CREATIONDATE":"Erstelldatum",
"ADD": {
"TITLE":"Schlüssel hinzufügen",
"DESCRIPTION":"Wählen Sie den Typ und selektieren Sie ein optionales Ablaufdatum."
},
"KEYTYPES": {
"1":"JSON"
}
},
"PASSWORD": {
"TITLE": "Passwort",
"DESCRIPTION": "Gib das neue Password unter Einhaltung der Richtlinie für die Komplexität ein.",
@@ -226,7 +249,8 @@
"REACTIVATED":"User reaktiviert!",
"DEACTIVATED":"User deaktiviert!",
"SELECTEDREACTIVATED":"Selektierte User reaktiviert!",
"SELECTEDDEACTIVATED":"Selektierte User deaktiviert!"
"SELECTEDDEACTIVATED":"Selektierte Benutzer deaktiviert!",
"SELECTEDKEYSDELETED":"Selektierte Schlüssel gelöscht!"
},
"MEMBERSHIPS": {
"TITLE":"Zitadel Manager Rollen",

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

@@ -30,7 +30,8 @@
"PROJECT": "Projects",
"GRANTEDPROJECT":"Granted Projects",
"USERSECTION":"user section",
"USER": "Users",
"HUMANUSERS": "Users",
"MACHINEUSERS":"Service Users",
"LOGOUT": "Logout all users",
"NEWORG":"New Organisation",
"IAMADMIN":"You are an IAM Administrator. Note that you have extended permissions!",
@@ -73,6 +74,8 @@
"LIST": "Users",
"TITLE": "User",
"DESCRIPTION": "Create new user in your organisation and manage existing ones.",
"LISTMACHINE": "Service Users",
"DESCRIPTIONMACHINE": "Create and manage Service Users of your organisation",
"DETAIL": "Detail",
"CREATE": "Create",
"MY": "My Informations",
@@ -143,6 +146,26 @@
"GENDER": "Gender",
"PASSWORD":"Password"
},
"MACHINE": {
"TITLE":"Service User Details",
"USERNAME":"Username",
"NAME":"Name",
"DESCRIPTION":"Description",
"KEYSTITLE":"Keys",
"KEYSDESC":"Define your keys and add an optional expiration date.",
"ID":"Key Id",
"TYPE":"Type",
"EXPIRYDATE":"Expiration date",
"CHOOSEEXPIRY":"Select an expiration Date",
"CREATIONDATE":"Creation Date",
"ADD": {
"TITLE":"Add Key",
"DESCRIPTION":"Select your key type and choose an optional expiry date."
},
"KEYTYPES": {
"1":"JSON"
}
},
"PASSWORD": {
"TITLE": "Password",
"DESCRIPTION": "Enter the new password according to the policy below.",
@@ -226,7 +249,8 @@
"REACTIVATED":"User reactivated",
"DEACTIVATED":"User deactivated",
"SELECTEDREACTIVATED":"Selected Users reactivated",
"SELECTEDDEACTIVATED":"Selected Users deactivated"
"SELECTEDDEACTIVATED":"Selected Users deactivated",
"SELECTEDKEYSDELETED":"Selected Keys deleted!"
},
"MEMBERSHIPS": {
"TITLE":"Zitadel Manager Roles",