feat(console): pinned org list, project grant detail view, state change, i18n, domain dialog, policy refactor, theme fixes, refactor user and projects (#449)

* pinned organisations

* project grant detail, state update, user-list pad

* rm entry components

* members nav, i18n, disable actions on non active

* add org domain dialog

* mv password policy rm to detail view

* prefix pinned orgs for userid, fix collapsed pad

* fix app back navigation

* rem pwd required validator

* fix org item overflow

* routing

* move users modules to users page

* reorganize projects

* remove child init of translate

* hide same preferred loginname

console/src/app/pages/users/user-create/user-create-routing.module.ts

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

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

@@ -0,0 +1,136 @@
+<div class="max-width-container">
+    <div class="container">
+        <div class="left">
+            <a [routerLink]="[ '/users']" mat-icon-button>
+                <mat-icon class="icon">arrow_back</mat-icon>
+            </a>
+        </div>
+        <div class="right">
+            <div class="head">
+
+                <h1>{{ 'USER.CREATE.TITLE' | translate }}</h1>
+
+                <p class="desc">{{ 'USER.CREATE.DESCRIPTION' | translate }}</p>
+            </div>
+
+            <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="form">
+                <!-- <h2>{{ 'USER.PAGES.CREATE' | translate}}</h2> -->
+                <div class="content">
+                    <p class="section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.PROFILE.EMAIL' | translate }}</mat-label>
+                        <input matInput formControlName="email" required />
+                        <mat-error *ngIf="email?.invalid && email?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.PROFILE.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.PROFILE.FIRSTNAME' | translate }}</mat-label>
+                        <input matInput formControlName="firstName" required />
+                        <mat-error *ngIf="firstName?.invalid && firstName?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</mat-label>
+                        <input matInput formControlName="lastName" required />
+                        <mat-error *ngIf="lastName?.invalid && lastName?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</mat-label>
+                        <input matInput formControlName="nickName" />
+                        <mat-error *ngIf="nickName?.invalid && nickName?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                    </mat-form-field>
+
+                    <p class="section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
+
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.PROFILE.GENDER' | translate }}</mat-label>
+                        <mat-select formControlName="gender">
+                            <mat-option *ngFor="let gender of genders" [value]="gender">
+                                {{ 'GENDERS.'+gender | translate }}
+                            </mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="gender?.invalid && gender?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</mat-label>
+                        <mat-select formControlName="preferredLanguage">
+                            <mat-option *ngFor="let language of languages" [value]="language">
+                                {{ 'LANGUAGES.'+language | translate }}
+                            </mat-option>
+                            <mat-error *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
+                                {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                            </mat-error>
+                        </mat-select>
+                    </mat-form-field>
+
+                    <p class="section">{{ 'USER.CREATE.ADDRESSANDPHONESECTION' | translate }}</p>
+
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.PROFILE.PHONE' | translate }}</mat-label>
+                        <input matInput formControlName="phone" />
+                        <mat-error *ngIf="phone?.invalid && phone?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                    </mat-form-field>
+                    <!-- <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.ADDRESS.STREET' | translate }}</mat-label>
+                        <input matInput formControlName="streetAddress" />
+                        <mat-error *ngIf="streetAddress?.invalid && streetAddress?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.ADDRESS.POSTAL_CODE' | translate }}</mat-label>
+                        <input matInput formControlName="postalCode" />
+                        <mat-error *ngIf="postalCode?.invalid && postalCode?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.ADDRESS.LOCALITY' | translate }}</mat-label>
+                        <input matInput formControlName="locality" />
+                        <mat-error *ngIf="locality?.invalid && locality?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.ADDRESS.REGION' | translate }}</mat-label>
+                        <input matInput formControlName="region" />
+                        <mat-error *ngIf="region?.invalid && region?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.ADDRESS.COUNTRY' | translate }}</mat-label>
+                        <input matInput formControlName="country" />
+                        <mat-error *ngIf="country?.invalid && country?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                    </mat-form-field> -->
+                </div>
+                <div class="btn-container">
+                    <button color="accent" [disabled]="userForm.invalid" type="submit"
+                        mat-raised-button>{{ 'ACTIONS.CREATE' | translate }}</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

console/src/app/pages/users/user-create/user-create.component.scss

@@ -0,0 +1,82 @@
+
+.container {
+    display: flex;
+    padding-bottom: 3rem;
+
+    .left {
+        width: 100px;
+        display: flex;
+        padding: 1rem;
+        justify-content: center;
+
+        a {
+            margin-top: .2rem;
+        }
+    }
+
+    .right {
+        flex: 1;
+        .head {
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #ffffff20;
+            flex-wrap: wrap;
+          
+            a {
+                display: block;
+            }
+          
+            h1 {
+                font-size: 1.2rem;
+            }
+          
+            .desc {
+                width: 100%;
+                display: block;
+                font-size: .9rem;
+                color: #8795a1;
+            }
+        }
+
+        .form {
+            padding-top: 1rem;
+
+            .btn-container {
+                display: flex;
+                justify-content: flex-end;
+                button {
+                    margin-top: 3rem;
+                    display: block;
+                    padding: 0.5rem 4rem;
+                    border-radius: 0.5rem;
+                }
+            }
+        }
+          
+        .content {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            margin: 0 -.5rem; 
+
+            .section {
+                padding: .5rem;
+                flex-basis: 100%;
+                color: #8795a1;
+                font-size: .9rem;
+            }
+        
+            &.nowrap{
+                flex-wrap: nowrap;
+            }
+        
+            mat-form-field {
+                flex: 1 0 33%;
+                margin: 0 .5rem;
+            }
+        }
+    }
+}
+
+
+

console/src/app/pages/users/user-create/user-create.component.spec.ts

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

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

@@ -0,0 +1,141 @@
+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 { MgmtUserService } from 'src/app/services/mgmt-user.service';
+import { OrgService } from 'src/app/services/org.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',
+    templateUrl: './user-create.component.html',
+    styleUrls: ['./user-create.component.scss'],
+})
+export class UserCreateComponent implements OnDestroy {
+    public user: CreateUserRequest.AsObject = new CreateUserRequest().toObject();
+    public genders: Gender[] = [Gender.GENDER_FEMALE, Gender.GENDER_MALE, Gender.GENDER_UNSPECIFIED];
+    public languages: string[] = ['de', 'en'];
+    public userForm!: FormGroup;
+
+    private sub: Subscription = new Subscription();
+
+    public userLoginMustBeDomain: boolean = false;
+
+    constructor(
+        private router: Router,
+        private toast: ToastService,
+        public userService: MgmtUserService,
+        private fb: FormBuilder,
+        private orgService: OrgService,
+    ) {
+        this.orgService.GetMyOrgIamPolicy().then((iampolicy) => {
+            this.userLoginMustBeDomain = iampolicy.toObject().userLoginMustBeDomain;
+            this.initForm();
+        }).catch(error => {
+            console.error(error);
+            this.initForm();
+        });
+    }
+
+    private initForm(): void {
+        this.userForm = this.fb.group({
+            email: ['', [Validators.required, Validators.email]],
+            userName: ['',
+                [
+                    Validators.required,
+                    Validators.minLength(2),
+                    this.userLoginMustBeDomain ? noEmailValidator : Validators.email,
+                ],
+            ],
+            firstName: ['', Validators.required],
+            lastName: ['', Validators.required],
+            nickName: [''],
+            gender: [Gender.GENDER_UNSPECIFIED],
+            preferredLanguage: [''],
+            phone: [''],
+            streetAddress: [''],
+            postalCode: [''],
+            locality: [''],
+            region: [''],
+            country: [''],
+        });
+    }
+
+    public createUser(): void {
+        this.user = this.userForm.value;
+
+        this.userService
+            .CreateUser(this.user)
+            .then((data: User) => {
+                this.toast.showInfo('USER.TOAST.CREATED', true);
+                this.router.navigate(['users', data.getId()]);
+            })
+            .catch(data => {
+                this.toast.showError(data.message);
+            });
+    }
+
+    ngOnDestroy(): void {
+
+        this.sub.unsubscribe();
+    }
+
+    public get email(): AbstractControl | null {
+        return this.userForm.get('email');
+    }
+    public get userName(): AbstractControl | null {
+        return this.userForm.get('userName');
+    }
+    public get firstName(): AbstractControl | null {
+        return this.userForm.get('firstName');
+    }
+    public get lastName(): AbstractControl | null {
+        return this.userForm.get('lastName');
+    }
+    public get nickName(): AbstractControl | null {
+        return this.userForm.get('nickName');
+    }
+    public get gender(): AbstractControl | null {
+        return this.userForm.get('gender');
+    }
+    public get preferredLanguage(): AbstractControl | null {
+        return this.userForm.get('preferredLanguage');
+    }
+    public get phone(): AbstractControl | null {
+        return this.userForm.get('phone');
+    }
+    public get streetAddress(): AbstractControl | null {
+        return this.userForm.get('streetAddress');
+    }
+    public get postalCode(): AbstractControl | null {
+        return this.userForm.get('postalCode');
+    }
+    public get locality(): AbstractControl | null {
+        return this.userForm.get('locality');
+    }
+    public get region(): AbstractControl | null {
+        return this.userForm.get('region');
+    }
+    public get country(): AbstractControl | null {
+        return this.userForm.get('country');
+    }
+}

console/src/app/pages/users/user-create/user-create.module.ts

@@ -0,0 +1,37 @@
+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 { 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 { UserCreateRoutingModule } from './user-create-routing.module';
+import { UserCreateComponent } from './user-create.component';
+
+
+
+@NgModule({
+    declarations: [UserCreateComponent],
+    imports: [
+        UserCreateRoutingModule,
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatButtonModule,
+        MatIconModule,
+        MatProgressSpinnerModule,
+        MatCheckboxModule,
+        MatTooltipModule,
+        TranslateModule,
+    ],
+})
+export class UserCreateModule { }

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

@@ -0,0 +1,142 @@
+<app-meta-layout>
+    <div class="max-width-container">
+        <h1>{{ 'USER.TITLE' | translate }}</h1>
+        <p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
+
+        <mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
+
+        <span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
+
+        <app-card title="{{ 'USER.PAGES.LOGINNAMES' | translate }}"
+            description="{{ 'USER.PAGES.LOGINNAMESDESC' | translate }}" *ngIf="user">
+            <div class="login-name-row" *ngFor="let login of user?.loginNamesList">
+                <span>{{login}}</span>
+                <button color="primary" [disabled]="copied == login"
+                    [matTooltip]="(copied != login ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
+                    (click)="copytoclipboard(login)" mat-icon-button>
+                    <i *ngIf="copied != login" class="las la-clipboard"></i>
+                    <i *ngIf="copied == login" class="las la-clipboard-check"></i>
+                </button>
+            </div>
+        </app-card>
+
+        <div class="col" *ngIf="user">
+            <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>
+            </app-card>
+
+            <app-card title="Theme" class="theme-card">
+                <app-theme-setting></app-theme-setting>
+            </app-card>
+        </div>
+
+        <app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
+            description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
+            <div class="method-col">
+                <div class="method-row">
+                    <span class="label">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
+
+                    <span>*********</span>
+                    <div class="actions">
+                        <a [routerLink]="['password']" mat-icon-button>
+                            <mat-icon>chevron_right</mat-icon>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="method-row">
+                    <span class="label">{{ 'USER.EMAIL' | translate }}</span>
+
+                    <ng-container *ngIf="!emailEditState; else emailEdit">
+                        <div class="actions">
+                            <span class="name">{{user?.email}}</span>
+                            <mat-icon *ngIf="user?.isEmailVerified" color="primary" aria-hidden="false"
+                                aria-label="verified icon">
+                                check_circle_outline</mat-icon>
+                            <ng-container *ngIf="user?.email && !user?.isEmailVerified">
+                                <mat-icon color="warn" aria-hidden="false" aria-label="not verified icon">highlight_off
+                                </mat-icon>
+                                <a class="verify" matTooltip="{{'USER.LOGINMETHODS.EMAIL.RESEND' | translate}}"
+                                    (click)="resendVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
+                            </ng-container>
+                        </div>
+
+                        <div class="actions">
+                            <button (click)="emailEditState = true" mat-icon-button>
+                                <mat-icon>edit</mat-icon>
+                            </button>
+                        </div>
+                    </ng-container>
+                    <ng-template #emailEdit>
+                        <mat-form-field class="name">
+                            <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>
+                            <input matInput [(ngModel)]="user.email" />
+                        </mat-form-field>
+                        <button (click)="emailEditState = false" mat-icon-button>
+                            <mat-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>
+                    </ng-template>
+                </div>
+
+                <div class="method-row">
+                    <span class="label">{{ 'USER.PHONE' | translate }}</span>
+
+                    <ng-container *ngIf="!phoneEditState; else phoneEdit">
+                        <div class="actions">
+                            <span class="name">{{user?.phone}}</span>
+                            <mat-icon *ngIf="user?.isPhoneVerified" color="primary" aria-hidden="false"
+                                aria-label="verified icon">
+                                check_circle_outline</mat-icon>
+                            <ng-container *ngIf="user?.phone && !user?.isPhoneVerified">
+                                <mat-icon color="warn" aria-hidden="false" aria-label="not verified icon">highlight_off
+                                </mat-icon>
+                                <a class="verify" matTooltip="{{'USER.LOGINMETHODS.ENTERCODE_DESC' | translate}}"
+                                    (click)="enterCode()">{{'USER.LOGINMETHODS.ENTERCODE' | translate}}</a>
+                                <a class="verify" matTooltip="{{'USER.LOGINMETHODS.PHONE.RESEND' | translate}}"
+                                    (click)="resendPhoneVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
+                            </ng-container>
+                        </div>
+
+                        <div class="actions">
+                            <button (click)="phoneEditState = true" mat-icon-button>
+                                <mat-icon>edit</mat-icon>
+                            </button>
+                        </div>
+                    </ng-container>
+
+                    <ng-template #phoneEdit>
+                        <mat-form-field class="name">
+                            <mat-label>{{ 'USER.PHONE' | translate }}</mat-label>
+                            <input matInput [(ngModel)]="user.phone" />
+                        </mat-form-field>
+                        <button (click)="phoneEditState = false" mat-icon-button>
+                            <mat-icon>close</mat-icon>
+                        </button>
+                        <button *ngIf="user.phone" color="warn" (click)="deletePhone()" mat-icon-button>
+                            <i class="las la-trash"></i>
+                        </button>
+                        <button [disabled]="!user.phone" type="button" color="primary" (click)="savePhone()"
+                            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+                    </ng-template>
+                </div>
+            </div>
+        </app-card>
+
+        <app-auth-user-mfa *ngIf="user"></app-auth-user-mfa>
+    </div>
+
+    <metainfo *ngIf="user" class="side">
+        <div class="details">
+            <div class="row" *ngIf="user?.preferredLoginName">
+                <span class="first">Preferred Loginname:</span>
+                <span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
+            </div>
+        </div>
+
+        <app-changes [changeType]="ChangeType.MYUSER" [id]="user.id"></app-changes>
+    </metainfo>
+</app-meta-layout>

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

@@ -0,0 +1,286 @@
+h1 {
+  margin-top: 0;
+}
+
+.avatar-section {
+  display: flex;
+  align-items: center;
+
+  span {
+    color: #8795a1;
+    text-transform: uppercase;
+    margin-right: 3rem;
+    font-size: .9rem;
+  }
+  img {
+    height: 80px;
+    width: 80px;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 50%;
+    margin: .5rem;
+    border: 2px solid #8795a1;
+  }
+}
+  
+  .sub {
+    color: #8795a1;
+    margin-bottom: 2rem;
+  }
+
+  .login-name-row {
+        display: flex;
+        align-items: center;
+
+        button {
+            transition: opacity .15s ease-in-out;
+            visibility: hidden;
+            opacity: 0;
+
+            &[disabled] {
+                visibility: visible;
+                color: white;
+                opacity: 1;
+            }
+        }
+
+        &:hover {
+            button {
+                visibility: visible;
+                opacity: 1;
+            }
+        }
+  }
+  
+  .content {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0 -.5rem; 
+  
+    &.nowrap{
+      flex-wrap: nowrap;
+    }
+  
+    mat-form-field {
+      flex: 1;
+      margin: 0 .5rem;
+    }
+  }
+
+.btn-container {
+    display: flex;
+    justify-content: flex-end;
+    margin: 0 -.5rem;
+  
+    button {
+      border-radius: .5rem;
+      margin: 0 .5rem;
+    }
+  }
+  
+.method-col {
+    display: flex;
+    flex-direction: column;
+    margin: -.5rem;
+
+    .method-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        padding: .5rem;
+        border-bottom: 1px solid #ffffff20;
+        flex-wrap: wrap;
+
+        .label, .name {
+            margin-right: 1rem;
+        }
+
+        .actions {
+            flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        }
+
+        .label {
+            flex: 1;
+            font-size: .9rem;
+            color: #8795a1;
+        }
+
+        mat-icon {
+            margin-right: .5rem;
+        }
+
+        .submit-button {
+            border-radius: .5rem;
+        }
+
+        .verify {
+            text-decoration: none;
+            font-size: .8rem;
+            color: #8795a1;
+            border-radius: .5rem;
+            cursor: pointer;
+            word-wrap: none;
+            white-space: nowrap;
+            margin-right: 1rem;
+
+            &:hover {
+                color: white;
+                text-decoration: underline;
+            }
+        }
+    }
+}
+
+.col {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    margin: -.5rem;
+
+    app-card {
+        flex: 1;
+        margin: .5rem
+    }
+
+    .theme-card {
+        max-width: 300px;
+    }
+
+    .pwd-row {
+        display: flex;
+        align-items: center;
+
+        span {
+            flex: 1;
+        }
+
+        .title {
+            color: #8795a1;
+            font-size: 0.9rem;
+        }
+    }
+}
+
+.side {
+    .details {
+        margin-bottom: 1rem;
+        border-bottom: 1px solid #81868a40;
+        padding-bottom: 1rem;
+    
+        .row {
+            display: flex;
+            margin-bottom: 0.5rem;
+            align-items: center;
+    
+            button {
+                display: none;
+                visibility: hidden;
+            }
+    
+            &:hover {
+                button {
+                    display: inline-block;
+                    visibility: visible;
+                    mat-icon {
+                        font-size: 1.2rem;
+                    }
+                }
+            }
+    
+            .first {
+                flex: 1;
+                font-size: 0.8rem;
+                margin-right: 0.5rem;
+                white-space: nowrap;
+            }
+    
+            .fill-space {
+                flex: 1;
+            }
+    
+            .second {
+                font-size: 0.8rem;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                margin-left: 1rem;
+                text-align: right;
+            }
+
+            a {
+                &:hover {
+                    cursor: pointer;
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        .side-section {
+            color: #8795a1;
+        }
+    }  
+
+    .details {
+        margin-bottom: 1rem;
+        border-bottom: 1px solid #81868a40;
+        padding-bottom: 1rem;
+    
+        .row {
+            display: flex;
+            margin-bottom: 0.5rem;
+            align-items: center;
+    
+            button {
+                display: none;
+                visibility: hidden;
+            }
+    
+            &:hover {
+                button {
+                    display: inline-block;
+                    visibility: visible;
+                    mat-icon {
+                        font-size: 1.2rem;
+                    }
+                }
+            }
+    
+            .first {
+                flex: 1;
+                font-size: 0.8rem;
+                margin-right: 0.5rem;
+            }
+    
+            .fill-space {
+                flex: 1;
+            }
+    
+            .second {
+                font-size: 0.8rem;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                margin-left: 1rem;
+            }
+
+            a {
+                &:hover {
+                    cursor: pointer;
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        .side-section {
+            color: #8795a1;
+        }
+    }    
+
+    app-changes {
+        flex: 1;
+        min-height: 0;
+    }
+}

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.spec.ts

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

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

@@ -0,0 +1,178 @@
+import { Component, OnDestroy } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { TranslateService } from '@ngx-translate/core';
+import { Subscription } from 'rxjs';
+import { ChangeType } from 'src/app/modules/changes/changes.component';
+import { Gender, UserAddress, UserEmail, UserPhone, UserProfile, UserView } from 'src/app/proto/generated/auth_pb';
+import { AuthUserService } from 'src/app/services/auth-user.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { CodeDialogComponent } from './code-dialog/code-dialog.component';
+
+@Component({
+    selector: 'app-auth-user-detail',
+    templateUrl: './auth-user-detail.component.html',
+    styleUrls: ['./auth-user-detail.component.scss'],
+})
+export class AuthUserDetailComponent implements OnDestroy {
+    public user!: UserView.AsObject;
+    public address: UserAddress.AsObject = { id: '' } as any;
+    public genders: Gender[] = [Gender.GENDER_MALE, Gender.GENDER_FEMALE, Gender.GENDER_DIVERSE];
+    public languages: string[] = ['de', 'en'];
+
+    private subscription: Subscription = new Subscription();
+
+    public emailEditState: boolean = false;
+    public phoneEditState: boolean = false;
+
+    public loading: boolean = false;
+
+    public copied: string = '';
+
+    public ChangeType: any = ChangeType;
+    public userLoginMustBeDomain: boolean = false;
+
+    constructor(
+        public translate: TranslateService,
+        private toast: ToastService,
+        private userService: AuthUserService,
+        private dialog: MatDialog,
+    ) {
+        this.loading = true;
+        this.getData().then(() => {
+            this.loading = false;
+        }).catch(error => {
+            this.loading = false;
+        });
+    }
+
+    public ngOnDestroy(): void {
+        this.subscription.unsubscribe();
+    }
+
+    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(data => {
+                this.toast.showError(data.message);
+            });
+    }
+
+    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;
+            });
+    }
+
+    public enterCode(): void {
+        const dialogRef = this.dialog.open(CodeDialogComponent, {
+            data: {
+                number: this.user.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);
+                });
+            }
+        });
+    }
+
+    public changedLanguage(language: string): void {
+        this.translate.use(language);
+    }
+
+    public resendVerification(): void {
+        this.userService.ResendEmailVerification().then(() => {
+            this.toast.showInfo('USER.TOAST.EMAILSAVED', true);
+        }).catch(error => {
+            this.toast.showError(error);
+        });
+    }
+
+    public resendPhoneVerification(): void {
+        this.userService.ResendPhoneVerification().then(() => {
+            this.toast.showInfo('USER.TOAST.PHONEVERIFICATIONSENT', true);
+        }).catch(error => {
+            this.toast.showError(error);
+        });
+    }
+
+    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);
+        });
+    }
+
+    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(data => {
+                this.toast.showError(data);
+                this.phoneEditState = false;
+            });
+    }
+
+    private async getData(): Promise<void> {
+        this.userService.GetMyUser().then(user => {
+            this.user = user.toObject();
+        }).catch(err => {
+            this.toast.showError(err);
+        });
+    }
+
+    public copytoclipboard(value: string): void {
+        const selBox = document.createElement('textarea');
+        selBox.style.position = 'fixed';
+        selBox.style.left = '0';
+        selBox.style.top = '0';
+        selBox.style.opacity = '0';
+        selBox.value = value;
+        document.body.appendChild(selBox);
+        selBox.focus();
+        selBox.select();
+        document.execCommand('copy');
+        document.body.removeChild(selBox);
+        this.copied = value;
+        setTimeout(() => {
+            this.copied = '';
+        }, 3000);
+    }
+}

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

@@ -0,0 +1,27 @@
+<app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}">
+    <div class="col">
+        <div class="row" *ngFor="let mfa of mfaSubject | async">
+            <span>{{'USER.MFA.TYPE.'+ mfa.type | translate}}</span>
+            <i matTooltip="{{'USER.MFA.STATE.'+ mfa.state | translate}}" *ngIf="mfa.state === MFAState.MFASTATE_READY"
+                class="verified las la-check-circle"></i>
+            <i matTooltip="{{'USER.MFA.STATE.'+ mfa.state | translate}}"
+                *ngIf="mfa.state === MFAState.MFASTATE_NOT_READY || mfa.state === MFAState.MFASTATE_REMOVED"
+                class="primary las la-ban"></i>
+            <button mat-icon-button (click)="deleteMFA(mfa.type)" color="warn"
+                matTooltip="{{'ACTIONS.DELETE' | translate}}">
+                <i class="las la-trash"></i>
+            </button>
+        </div>
+        <p class="row" *ngIf="error">{{error}}</p>
+    </div>
+    <div class="add-row">
+        <button (click)="addOTP()" mat-stroked-button color="primary" matTooltip="{{'ACTIONS.NEW' | translate}}">
+            <mat-icon svgIcon="mdi_radar"></mat-icon>{{'USER.MFA.OTP' | translate}}
+        </button>
+    </div>
+    <div class="table-wrapper">
+        <div class="spinner-container" *ngIf="loading$ | async">
+            <mat-spinner diameter="50"></mat-spinner>
+        </div>
+    </div>
+</app-card>

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

@@ -0,0 +1,32 @@
+
+.col {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #ffffff20;
+    margin-bottom: 1rem;
+
+    .row {
+        display: flex;
+        justify-content: space-between;
+        padding: .5rem 0;
+        align-items: center;
+
+        span {
+            flex: 1;
+        }
+    }
+}
+
+  .add-row {
+      display: flex;
+      margin: -.5rem;
+
+      button {
+          border-radius: .5rem;
+          margin: .5rem;
+
+          mat-icon {
+              margin-right: .5rem;
+          }
+      }
+  }

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.spec.ts

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

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.ts

@@ -0,0 +1,81 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { MfaOtpResponse, MFAState, MfaType, MultiFactor } from 'src/app/proto/generated/auth_pb';
+import { AuthUserService } from 'src/app/services/auth-user.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { DialogOtpComponent } from '../dialog-otp/dialog-otp.component';
+
+@Component({
+    selector: 'app-auth-user-mfa',
+    templateUrl: './auth-user-mfa.component.html',
+    styleUrls: ['./auth-user-mfa.component.scss'],
+})
+export class AuthUserMfaComponent implements OnInit, OnDestroy {
+    public mfaSubject: BehaviorSubject<MultiFactor.AsObject[]> = new BehaviorSubject<MultiFactor.AsObject[]>([]);
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+
+    public MfaType: any = MfaType;
+    public MFAState: any = MFAState;
+
+    public error: string = '';
+    constructor(private userService: AuthUserService, private toast: ToastService, private dialog: MatDialog) { }
+
+    public ngOnInit(): void {
+        this.getOTP();
+    }
+
+    public ngOnDestroy(): void {
+        this.mfaSubject.complete();
+        this.loadingSubject.complete();
+    }
+
+    public addOTP(): void {
+        this.userService.AddMfaOTP().then((otpresp) => {
+            const otp: MfaOtpResponse.AsObject = otpresp.toObject();
+            const dialogRef = this.dialog.open(DialogOtpComponent, {
+                data: otp.url,
+                width: '400px',
+            });
+
+            dialogRef.afterClosed().subscribe((code) => {
+                if (code) {
+                    this.userService.VerifyMfaOTP(code).then((res) => {
+                        // TODO: show state
+                    });
+                }
+            });
+        }, error => {
+            this.toast.showError(error);
+        });
+    }
+
+    public getOTP(): void {
+        this.userService.GetMyMfas().then(mfas => {
+            this.mfaSubject.next(mfas.toObject().mfasList);
+        }).catch(error => {
+            console.error(error);
+            this.error = error.message;
+        });
+    }
+
+    public deleteMFA(type: MfaType): void {
+        if (type === MfaType.MFATYPE_OTP) {
+            this.userService.RemoveMfaOTP().then(() => {
+                this.toast.showInfo('USER.TOAST.OTPREMOVED', true);
+
+                const index = this.mfaSubject.value.findIndex(mfa => mfa.type === type);
+                if (index > -1) {
+                    const newValues = this.mfaSubject.value;
+                    newValues.splice(index, 1);
+                    this.mfaSubject.next(newValues);
+                }
+
+            }).catch(error => {
+                this.toast.showError(error);
+            });
+        }
+    }
+}

console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.html

@@ -0,0 +1,20 @@
+<h1 mat-dialog-title>
+    <span class="title">{{'USER.CODEDIALOG.TITLE' | translate}} {{data?.number}}</span>
+</h1>
+<p class="desc">{{'USER.CODEDIALOG.DESCRIPTION' | translate}}</p>
+<div mat-dialog-content>
+    <mat-form-field class="formfield">
+        <mat-label>{{ 'USER.CODEDIALOG.CODE' | translate }}</mat-label>
+        <input matInput [(ngModel)]="code" />
+    </mat-form-field>
+</div>
+<div mat-dialog-actions class="action">
+    <button cdkFocusInitial color="primary" mat-button class="ok-button" (click)="closeDialog()">
+        {{'ACTIONS.CLOSE' | translate}}
+    </button>
+
+    <button [disabled]="!code" cdkFocusInitial color="primary" mat-raised-button class="ok-button"
+        (click)="closeDialog(code)">
+        {{'ACTIONS.OK' | translate}}
+    </button>
+</div>

console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.scss

@@ -0,0 +1,16 @@
+.formfield {
+    width: 100%;
+}
+
+.action {
+    display: flex;
+    justify-content: flex-end;
+  
+    .ok-button {
+      margin-left: 0.5rem;
+    }
+  
+    button {
+      border-radius: 0.5rem;
+    }
+}

console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.spec.ts

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

console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.ts

@@ -0,0 +1,18 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+    selector: 'app-code-dialog',
+    templateUrl: './code-dialog.component.html',
+    styleUrls: ['./code-dialog.component.scss'],
+})
+export class CodeDialogComponent {
+    public code: string = '';
+    constructor(public dialogRef: MatDialogRef<CodeDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any) { }
+
+    closeDialog(code: string = ''): void {
+        this.dialogRef.close(code);
+    }
+
+}

console/src/app/pages/users/user-detail/auth-user-detail/dialog-otp/dialog-otp.component.html

@@ -0,0 +1,18 @@
+<h1 mat-dialog-title>{{'USER.MFA.OTP_DIALOG_TITLE' | translate}}</h1>
+<div mat-dialog-content>
+    <p translate>{{'USER.MFA.OTP_DIALOG_DESCRIPTION' | translate}}</p>
+    <div class="qrcode-wrapper">
+        <qrcode *ngIf="data" class="qrcode" [qrdata]="data" [width]="150" [errorCorrectionLevel]="'M'"></qrcode>
+    </div>
+
+    <mat-form-field label="Access Code" required="true">
+        <mat-label>Code</mat-label>
+        <input matInput [(ngModel)]="code" />
+    </mat-form-field>
+</div>
+<div mat-dialog-actions class="action">
+    <button mat-button (click)="closeDialog()"><span translate>ACTIONS.CLOSE</span></button>
+    <button mat-raised-button class="ok-button" color="primary" (click)="closeDialogWithCode()"><span
+            translate>ACTIONS.OK</span>
+    </button>
+</div>

console/src/app/pages/users/user-detail/auth-user-detail/dialog-otp/dialog-otp.component.scss

@@ -0,0 +1,22 @@
+.qrcode-wrapper {
+  display: flex;
+  align-content: center;
+
+  .qrcode {
+    margin: 1rem auto;
+  }
+}
+
+mat-form-field {
+    width: 100%;
+}
+
+.action {
+  display: flex;
+  justify-content: flex-end;
+
+  button {
+    margin-left: .5rem;
+    border-radius: .5rem;
+  }
+}

console/src/app/pages/users/user-detail/auth-user-detail/dialog-otp/dialog-otp.component.ts

@@ -0,0 +1,21 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+    selector: 'app-dialog-otp',
+    templateUrl: './dialog-otp.component.html',
+    styleUrls: ['./dialog-otp.component.scss'],
+})
+export class DialogOtpComponent {
+    public code: string = '';
+    constructor(public dialogRef: MatDialogRef<DialogOtpComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: string) { }
+
+    public closeDialog(): void {
+        this.dialogRef.close();
+    }
+
+    public closeDialogWithCode(): void {
+        this.dialogRef.close(this.code);
+    }
+}

console/src/app/pages/users/user-detail/detail-form/detail-form.component.html

@@ -0,0 +1,39 @@
+<form [formGroup]="profileForm" *ngIf="profileForm" (ngSubmit)="submitForm()">
+    <div class="content">
+        <mat-form-field class="formfield">
+            <mat-label>{{ 'USER.PROFILE.USERNAME' | translate }}</mat-label>
+            <input matInput formControlName="userName" />
+        </mat-form-field>
+        <mat-form-field class="formfield">
+            <mat-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</mat-label>
+            <input matInput formControlName="firstName" />
+        </mat-form-field>
+        <mat-form-field class="formfield">
+            <mat-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</mat-label>
+            <input matInput formControlName="lastName" />
+        </mat-form-field>
+        <mat-form-field class="formfield">
+            <mat-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</mat-label>
+            <input matInput formControlName="nickName" />
+        </mat-form-field>
+        <mat-form-field class="formfield">
+            <mat-label>{{ 'USER.PROFILE.GENDER' | translate }}</mat-label>
+            <mat-select formControlName="gender">
+                <mat-option *ngFor="let gender of genders" [value]="gender">
+                    {{ 'GENDERS.'+gender | translate }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+        <mat-form-field class="formfield">
+            <mat-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</mat-label>
+            <mat-select formControlName="preferredLanguage">
+                <mat-option *ngFor="let language of languages" [value]="language">
+                    {{ 'LANGUAGES.'+language | translate }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+    </div>
+    <div class="btn-container">
+        <button type="submit" color="primary" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+    </div>
+</form>

console/src/app/pages/users/user-detail/detail-form/detail-form.component.scss

@@ -0,0 +1,25 @@
+
+.content {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0 -.5rem; 
+  
+    &.nowrap{
+      flex-wrap: nowrap;
+    }
+  
+    mat-form-field {
+      flex: 1 1 33%;
+      margin: 0 .5rem;
+    }
+  }
+
+.btn-container {
+    display: flex;
+    justify-content: flex-end;
+    
+    button {
+        border-radius: .5rem;
+    }
+}

console/src/app/pages/users/user-detail/detail-form/detail-form.component.spec.ts

@@ -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();
+  });
+});

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

@@ -0,0 +1,74 @@
+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';
+
+
+@Component({
+    selector: 'app-detail-form',
+    templateUrl: './detail-form.component.html',
+    styleUrls: ['./detail-form.component.scss'],
+})
+export class DetailFormComponent implements OnInit, OnDestroy {
+    @Input() public profile!: mgmtUP | authUP;
+    @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 changedLanguage: EventEmitter<string> = new EventEmitter<string>();
+
+    public profileForm!: FormGroup;
+
+    private sub: Subscription = new Subscription();
+
+    constructor(private fb: FormBuilder) {
+        this.profileForm = this.fb.group({
+            userName: [{ value: '', disabled: true }, [
+                Validators.required,
+            ]],
+            firstName: [{ value: '', disabled: this.disabled }, Validators.required],
+            lastName: [{ value: '', disabled: this.disabled }, Validators.required],
+            nickName: [{ value: '', disabled: this.disabled }],
+            gender: [{ value: 0 }, { disabled: this.disabled }],
+            preferredLanguage: [{ value: '', disabled: this.disabled }],
+        });
+    }
+
+    public ngOnInit(): void {
+        this.profileForm.patchValue(this.profile);
+
+        if (this.preferredLanguage) {
+            this.sub = this.preferredLanguage.valueChanges.subscribe(value => {
+                this.changedLanguage.emit(value);
+            });
+        }
+    }
+
+    public ngOnDestroy(): void {
+        this.sub.unsubscribe();
+    }
+
+    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');
+    }
+    public get lastName(): AbstractControl | null {
+        return this.profileForm.get('lastName');
+    }
+    public get nickName(): AbstractControl | null {
+        return this.profileForm.get('nickName');
+    }
+    public get gender(): AbstractControl | null {
+        return this.profileForm.get('gender');
+    }
+    public get preferredLanguage(): AbstractControl | null {
+        return this.profileForm.get('preferredLanguage');
+    }
+
+}

console/src/app/pages/users/user-detail/detail-form/detail-form.module.ts

@@ -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 { DetailFormComponent } from './detail-form.component';
+
+
+@NgModule({
+    declarations: [
+        DetailFormComponent,
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TranslateModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatButtonModule,
+        MatIconModule,
+        TranslateModule,
+    ],
+    exports: [
+        DetailFormComponent,
+    ],
+})
+export class DetailFormModule { }

console/src/app/pages/users/user-detail/password/password.component.html

@@ -0,0 +1,151 @@
+<div class="max-width-container">
+    <div class="container">
+        <div class="left">
+            <a *ngIf="userId" [routerLink]="[ '/user',userId]" mat-icon-button>
+                <mat-icon class="icon">arrow_back</mat-icon>
+            </a>
+            <a *ngIf="!userId" [routerLink]="[ '/users/me']" mat-icon-button>
+                <mat-icon class="icon">arrow_back</mat-icon>
+            </a>
+        </div>
+        <div class="right">
+            <div class="head">
+                <h1>{{ 'USER.PASSWORD.TITLE' | translate }}</h1>
+                <p class="desc">{{ 'USER.PASSWORD.DESCRIPTION' | translate }}</p>
+            </div>
+
+            <ng-container *ngIf="userId; else authUser">
+                <form *ngIf="passwordForm" autocomplete="new-password" [formGroup]="passwordForm"
+                    (ngSubmit)="setInitialPassword(userId)">
+                    <div class="content center">
+                        <mat-form-field class="formfield" appearance="outline">
+                            <mat-label>{{ 'USER.PASSWORD.NEW' | translate }}</mat-label>
+                            <input autocomplete="off" name="password" matInput formControlName="password"
+                                type="password" />
+
+                            <mat-error *ngIf="password?.errors?.required">
+                                {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="password?.errors?.symbolValidator">
+                                {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="password?.errors?.numberValidator">
+                                {{ 'USER.VALIDATION.NUMBERERROR' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="password?.errors?.upperCaseValidator">
+                                {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="password?.errors?.lowerCaseValidator">
+                                {{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="password?.errors?.minlength">
+                                {{ 'USER.VALIDATION.MINLENGTH' | translate:password?.errors?.minlength }}
+                            </mat-error>
+                        </mat-form-field>
+                        <mat-form-field class="formfield" appearance="outline">
+                            <mat-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</mat-label>
+                            <input autocomplete="off" name="passwordRepeat" matInput formControlName="confirmPassword"
+                                type="password" />
+
+                            <mat-error *ngIf="confirmPassword?.errors?.required">
+                                {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="confirmPassword?.errors?.symbolValidator">
+                                {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="confirmPassword?.errors?.numberValidator">
+                                {{ 'USER.VALIDATION.NUMBERERROR' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="confirmPassword?.errors?.notequal">
+                                {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="confirmPassword?.errors?.upperCaseValidator">
+                                {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="confirmPassword?.errors?.lowerCaseValidator">
+                                {{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="confirmPassword?.errors?.minlength">
+                                {{ 'USER.VALIDATION.MINLENGTH' | translate:confirmPassword?.errors?.minlength }}
+                            </mat-error>
+                        </mat-form-field>
+                    </div>
+                    <div class="btn-container">
+                        <button class="submit-button" [disabled]="passwordForm.invalid" mat-raised-button
+                            color="primary">{{ 'USER.PASSWORD.SET' | translate }}</button>
+                    </div>
+                </form>
+            </ng-container>
+
+            <ng-template #authUser>
+                <form *ngIf="passwordForm" [formGroup]="passwordForm" (ngSubmit)="setPassword()">
+                    <div class="content">
+                        <mat-form-field class="formfield" appearance="outline">
+                            <mat-label>{{ 'USER.PASSWORD.OLD' | translate }}</mat-label>
+                            <input autocomplete="off" name="password" type="password" matInput
+                                formControlName="currentPassword" />
+                            <mat-error *ngIf="currentPassword?.errors?.required">
+                                {{ 'USER.PASSWORD.REQUIRED' | translate }}
+                            </mat-error>
+                        </mat-form-field>
+                        <mat-form-field class="formfield" appearance="outline">
+                            <mat-label>{{ 'USER.PASSWORD.NEW' | translate }}</mat-label>
+                            <input autocomplete="off" name="new password" type="password" matInput
+                                formControlName="newPassword" />
+
+                            <mat-error *ngIf="newPassword?.errors?.required">
+                                {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="newPassword?.errors?.symbolValidator">
+                                {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="newPassword?.errors?.numberValidator">
+                                {{ 'USER.VALIDATION.NUMBERERROR' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="newPassword?.errors?.upperCaseValidator">
+                                {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="newPassword?.errors?.lowerCaseValidator">
+                                {{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="newPassword?.errors?.minlength">
+                                {{ 'USER.VALIDATION.MINLENGTH' | translate:newPassword?.errors?.minlength }}
+                            </mat-error>
+
+                        </mat-form-field>
+                        <mat-form-field class="formfield" appearance="outline">
+                            <mat-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</mat-label>
+                            <input autocomplete="off" name="password repeating" type="password" matInput
+                                formControlName="confirmPassword" />
+
+                            <mat-error *ngIf="confirmPassword?.errors?.required">
+                                {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="confirmPassword?.errors?.symbolValidator">
+                                {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="confirmPassword?.errors?.numberValidator">
+                                {{ 'USER.VALIDATION.NUMBERERROR' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="confirmPassword?.errors?.notequal">
+                                {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="confirmPassword?.errors?.upperCaseValidator">
+                                {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="confirmPassword?.errors?.lowerCaseValidator">
+                                {{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
+                            </mat-error>
+                            <mat-error *ngIf="confirmPassword?.errors?.minlength">
+                                {{ 'USER.VALIDATION.MINLENGTH' | translate:confirmPassword?.errors?.minlength }}
+                            </mat-error>
+                        </mat-form-field>
+                    </div>
+                    <button class="submit-button" [disabled]="passwordForm.invalid" mat-raised-button
+                        color="primary">{{ 'USER.PASSWORD.RESET' | translate }}</button>
+                </form>
+            </ng-template>
+
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,66 @@
+.container {
+    display: flex;
+    padding-bottom: 3rem;
+
+    .left {
+        width: 100px;
+        display: flex;
+        padding: 1rem;
+        justify-content: center;
+
+        a {
+            margin-top: .2rem;
+        }
+    }
+
+    .right {
+        flex: 1;
+        padding-top: 1rem;
+
+        .head {
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #ffffff20;
+            margin-bottom: 2rem;
+            flex-wrap: wrap;
+          
+            a {
+                display: block;
+            }
+          
+            h1 {
+                font-size: 2rem;
+                margin-top: 0.2rem;
+            }
+          
+            .desc {
+                width: 100%;
+                display: block;
+                font-size: .9rem;
+                color: #8795a1;
+            }
+        }
+    }
+}
+
+.content {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0 -.5rem;
+
+    mat-form-field {
+        margin: 0 .5rem;
+    }
+  
+    &.center {
+      align-items: center;
+    }
+}
+
+.submit-button {
+    margin-top: 100px;
+    display: block;
+    padding: 0.5rem 4rem;
+    border-radius: 0.5rem;
+}

console/src/app/pages/users/user-detail/password/password.component.spec.ts

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

console/src/app/pages/users/user-detail/password/password.component.ts

@@ -0,0 +1,134 @@
+import { Component, OnInit } from '@angular/core';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from 'src/app/pages/validators';
+import { PasswordComplexityPolicy } from 'src/app/proto/generated/auth_pb';
+import { AuthUserService } from 'src/app/services/auth-user.service';
+import { MgmtUserService } from 'src/app/services/mgmt-user.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+function passwordConfirmValidator(c: AbstractControl): any {
+    if (!c.parent || !c) {
+        return;
+    }
+    const pwd = c.parent.get('password');
+    const cpwd = c.parent.get('confirmPassword');
+
+    if (!pwd || !cpwd) {
+        return;
+    }
+    if (pwd.value !== cpwd.value) {
+        return { invalid: true, notequal: 'Password is not equal' };
+    }
+}
+
+@Component({
+    selector: 'app-password',
+    templateUrl: './password.component.html',
+    styleUrls: ['./password.component.scss'],
+})
+export class PasswordComponent implements OnInit {
+    userId: string = '';
+
+    public policy!: PasswordComplexityPolicy.AsObject;
+    public passwordForm!: FormGroup;
+
+    constructor(
+        activatedRoute: ActivatedRoute,
+        private fb: FormBuilder,
+        private userService: AuthUserService,
+        private mgmtUserService: MgmtUserService,
+        private toast: ToastService,
+    ) {
+
+        activatedRoute.params.subscribe(data => {
+            const { id } = data;
+            if (id) {
+                this.userId = id;
+            }
+
+            const validators: Validators[] = [Validators.required];
+            this.userService.GetMyPasswordComplexityPolicy().then(complexity => {
+                this.policy = complexity.toObject();
+                if (this.policy.minLength) {
+                    validators.push(Validators.minLength(this.policy.minLength));
+                }
+                if (this.policy.hasLowercase) {
+                    validators.push(lowerCaseValidator);
+                }
+                if (this.policy.hasUppercase) {
+                    validators.push(upperCaseValidator);
+                }
+                if (this.policy.hasNumber) {
+                    validators.push(numberValidator);
+                }
+                if (this.policy.hasSymbol) {
+                    validators.push(symbolValidator);
+                }
+
+                this.setupForm(validators);
+            }).catch(error => {
+                this.setupForm(validators);
+            });
+        });
+    }
+
+    ngOnInit(): void {
+    }
+
+    setupForm(validators: Validators[]): void {
+        if (this.userId) {
+            this.passwordForm = this.fb.group({
+                password: ['', validators],
+                confirmPassword: ['', [...validators, passwordConfirmValidator]],
+            });
+        } else {
+            this.passwordForm = this.fb.group({
+                currentPassword: ['', validators],
+                newPassword: ['', validators],
+                confirmPassword: ['', [...validators, passwordConfirmValidator]],
+            });
+        }
+    }
+
+    public setInitialPassword(userId: string): void {
+        if (this.passwordForm.valid && this.password && this.password.value) {
+            this.mgmtUserService.SetInitialPassword(userId, this.password.value).then((data: any) => {
+                this.toast.showInfo('USER.TOAST.INITIALPASSWORDSET', true);
+                window.history.back();
+            }).catch(data => {
+                this.toast.showError(data.message);
+            });
+        }
+    }
+
+    public setPassword(): void {
+        if (this.passwordForm.valid && this.currentPassword &&
+            this.currentPassword.value &&
+            this.newPassword && this.newPassword.value && this.newPassword.valid) {
+            this.userService
+                .ChangeMyPassword(this.currentPassword.value, this.newPassword.value).then((data: any) => {
+                    this.toast.showInfo('USER.TOAST.PASSWORDCHANGED', true);
+                    window.history.back();
+                }).catch(data => {
+                    this.toast.showError(data.message);
+                });
+        }
+    }
+
+    public get password(): AbstractControl | null {
+        return this.passwordForm.get('password');
+    }
+
+    public get newPassword(): AbstractControl | null {
+        return this.passwordForm.get('newPassword');
+    }
+
+    public get currentPassword(): AbstractControl | null {
+        return this.passwordForm.get('newPassword');
+    }
+
+    public get confirmPassword(): AbstractControl | null {
+        return this.passwordForm.get('confirmPassword');
+    }
+}

console/src/app/pages/users/user-detail/theme-setting/theme-setting.component.html

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

console/src/app/pages/users/user-detail/theme-setting/theme-setting.component.scss

@@ -0,0 +1,118 @@
+$dark-background: #2d2e30;
+
+:root {
+    transition: none;
+}
+
+.theme-app {
+    position: relative;
+}
+
+.theme-content {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+.circle {
+  position: relative;
+  border-radius: 100%;
+  width: 6rem;
+  height: 6rem;
+  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
+  margin: auto;
+}
+
+.crescent {
+  position: absolute;
+  border-radius: 100%;
+  right: 0;
+  width: 4rem;
+  height: 4rem;
+  background: #fafafa;
+  transform: scale(0);
+  transform-origin: top right;
+  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+p { 
+  font-size: 90%;
+}
+
+.heading {
+  font-size: 100%;
+  font-weight: bolder;
+  margin: 2rem 0 .2rem 0;
+}
+
+.desc {
+    font-size: 14px;
+    color: #8795a1;
+}
+
+label, .toggle {
+  height: 2.8rem;
+  border-radius: 100px;
+}
+
+label {
+  width: 100%;
+  background-color: rgba(0,0,0,.1);
+  border-radius: 100px;
+  position: relative;
+  margin: 1rem 0 1rem 0; 
+  cursor: pointer;
+}
+
+.toggle {
+  position: absolute;
+  background-color: #fafafa;
+  box-shadow: 0 2px 15px rgba(0,0,0,.15);
+}
+
+.names {
+  font-size: 90%;
+  font-weight: bolder;
+  width: 65%;
+  margin-left: 17.5%;
+  margin-top: .5%;
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  user-select: none;
+}
+
+[type="checkbox"] {
+  display: none;
+}
+
+[type="checkbox"]:checked + .theme-app .toggle{
+  transform: translateX(100%);
+  background-color: $dark-background;
+}
+
+[type="checkbox"]:checked + .theme-app .dark{
+  opacity: 1;
+}
+
+[type="checkbox"]:checked + .theme-app .light{
+  opacity: .5;
+}
+
+[type="checkbox"]:checked + .theme-app{
+  background-color:  $dark-background;
+  color: #fafafa;
+}
+
+[type="checkbox"]:checked + .theme-app .crescent{
+  transform: scale(1);
+  background: $dark-background;
+}
+
+[type="checkbox"]:checked + .theme-app .circle{
+  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
+}
+
+[type="checkbox"]:checked + .theme-app .main-circle{
+  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
+}

console/src/app/pages/users/user-detail/theme-setting/theme-setting.component.spec.ts

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

console/src/app/pages/users/user-detail/theme-setting/theme-setting.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ThemeService } from 'src/app/services/theme.service';
+
+@Component({
+    selector: 'app-theme-setting',
+    templateUrl: './theme-setting.component.html',
+    styleUrls: ['./theme-setting.component.scss'],
+})
+export class ThemeSettingComponent implements OnInit, OnDestroy {
+    public isDarkTheme: boolean = true;
+    private sub: Subscription = new Subscription();
+    constructor(private themeService: ThemeService) {
+        const theme = localStorage.getItem('theme');
+        this.isDarkTheme = theme === 'dark-theme' ? true : theme === 'light-theme' ? false : true;
+    }
+
+    ngOnInit(): void {
+        this.sub = this.themeService.isDarkTheme.subscribe(d => this.isDarkTheme = d);
+    }
+
+    ngOnDestroy(): void {
+        this.sub.unsubscribe();
+    }
+
+    public change(checked: boolean): void {
+        this.themeService.setDarkTheme(checked);
+    }
+}

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

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { RoleGuard } from 'src/app/guards/role.guard';
+
+import { AuthUserDetailComponent } from './auth-user-detail/auth-user-detail.component';
+import { PasswordComponent } from './password/password.component';
+import { UserDetailComponent } from './user-detail/user-detail.component';
+
+const routes: Routes = [
+    {
+        path: 'me',
+        component: AuthUserDetailComponent,
+    },
+    {
+        path: 'me/password',
+        component: PasswordComponent,
+    },
+    {
+        path: ':id',
+        component: UserDetailComponent,
+        canActivate: [RoleGuard],
+        data: {
+            roles: ['user.read'],
+        },
+    },
+    {
+        path: ':id/password',
+        component: PasswordComponent,
+        canActivate: [RoleGuard],
+        data: {
+            roles: ['user.write'],
+        },
+    },
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class UserDetailRoutingModule { }

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

@@ -0,0 +1,66 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { QRCodeModule } from 'angularx-qrcode';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { CardModule } from 'src/app/modules/card/card.module';
+import { ChangesModule } from 'src/app/modules/changes/changes.module';
+import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
+import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
+import { PipesModule } from 'src/app/pipes/pipes.module';
+
+import { AuthUserDetailComponent } from './auth-user-detail/auth-user-detail.component';
+import { AuthUserMfaComponent } from './auth-user-detail/auth-user-mfa/auth-user-mfa.component';
+import { CodeDialogComponent } from './auth-user-detail/code-dialog/code-dialog.component';
+import { DialogOtpComponent } from './auth-user-detail/dialog-otp/dialog-otp.component';
+import { DetailFormModule } from './detail-form/detail-form.module';
+import { PasswordComponent } from './password/password.component';
+import { ThemeSettingComponent } from './theme-setting/theme-setting.component';
+import { UserDetailRoutingModule } from './user-detail-routing.module';
+import { UserDetailComponent } from './user-detail/user-detail.component';
+import { UserMfaComponent } from './user-mfa/user-mfa.component';
+
+@NgModule({
+    declarations: [
+        AuthUserDetailComponent,
+        UserDetailComponent,
+        DialogOtpComponent,
+        AuthUserMfaComponent,
+        UserMfaComponent,
+        ThemeSettingComponent,
+        PasswordComponent,
+        CodeDialogComponent,
+    ],
+    imports: [
+        UserDetailRoutingModule,
+        ChangesModule,
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        DetailFormModule,
+        MatDialogModule,
+        QRCodeModule,
+        MetaLayoutModule,
+        PipesModule,
+        MatFormFieldModule,
+        UserGrantsModule,
+        MatInputModule,
+        MatButtonModule,
+        MatIconModule,
+        CardModule,
+        MatProgressBarModule,
+        MatTooltipModule,
+        HasRoleModule,
+        TranslateModule,
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+})
+export class UserDetailModule { }

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

@@ -0,0 +1,162 @@
+<app-meta-layout>
+    <div *ngIf="user" class="max-width-container">
+        <div class="head">
+            <a (click)="navigateBack()" mat-icon-button>
+                <mat-icon class="icon">arrow_back</mat-icon>
+            </a>
+            <h1>{{ 'USER.PROFILE.TITLE' | translate }} {{user?.displayName}}</h1>
+
+            <span class="fill-space"></span>
+
+            <ng-template appHasRole [appHasRole]="['user.write', 'user.write:'+user?.id]">
+                <button mat-stroked-button color="accent" *ngIf="user?.state === UserState.USERSTATE_ACTIVE"
+                    class="state-button"
+                    (click)="changeState(UserState.USERSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
+                <button mat-stroked-button color="accent" *ngIf="user?.state === UserState.USERSTATE_INACTIVE"
+                    class="state-button"
+                    (click)="changeState(UserState.USERSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
+            </ng-template>
+        </div>
+
+        <mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
+
+        <span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
+
+        <app-card title="{{ 'USER.PAGES.LOGINNAMES' | translate }}"
+            description="{{ 'USER.PAGES.LOGINNAMESDESC' | translate }}" *ngIf="user">
+            <div class="login-name-row" *ngFor="let login of user?.loginNamesList">
+                <span>{{login}}</span>
+                <button color="primary" [disabled]="copied == login"
+                    [matTooltip]="(copied != login ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
+                    (click)="copytoclipboard(login)" mat-icon-button>
+                    <i *ngIf="copied != login" class="las la-clipboard"></i>
+                    <i *ngIf="copied == login" class="las la-clipboard-check"></i>
+                </button>
+            </div>
+        </app-card>
+
+        <ng-template appHasRole [appHasRole]="['user.read', 'user.read:'+user?.id]">
+            <app-card title="{{ 'USER.PROFILE.TITLE' | translate }}"
+                description="{{'USER.PROFILE.DESCRIPTION' | translate}}">
+                <app-detail-form
+                    *ngIf="((authUserService.isAllowed(['user.write:' + user?.id, 'user.write']) | async) || false) as canwrite"
+                    [disabled]="canwrite" [genders]="genders" [languages]="languages" [profile]="user"
+                    (submitData)="saveProfile($event)">
+                </app-detail-form>
+            </app-card>
+        </ng-template>
+
+        <app-card title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
+            description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
+            <div class="method-col">
+                <div class="method-row">
+                    <span class="label">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
+
+                    <span>*********</span>
+                    <div class="actions">
+                        <button class="notify-change-pwd" (click)="sendSetPasswordNotification()" mat-stroked-button
+                            color="primary"
+                            *ngIf="user.state === UserState.USERSTATE_INITIAL">{{ 'USER.PASSWORD.RESENDNOTIFICATION' | translate }}</button>
+                        <a [routerLink]="['password']" mat-icon-button>
+                            <mat-icon>chevron_right</mat-icon>
+                        </a>
+                    </div>
+                </div>
+                <div class="method-row">
+                    <span class="label">{{ 'USER.EMAIL' | translate }}</span>
+
+                    <ng-container *ngIf="!emailEditState; else emailEdit">
+                        <div class="actions">
+                            <span class="name">{{user?.email}}</span>
+                            <mat-icon *ngIf="user?.isEmailVerified" color="primary" aria-hidden="false"
+                                aria-label="verified icon">
+                                check_circle_outline</mat-icon>
+                            <ng-container *ngIf="user?.email && !user?.isEmailVerified">
+                                <mat-icon color="warn" aria-hidden="false" aria-label="not verified icon">highlight_off
+                                </mat-icon>
+                                <a class="verify" matTooltip="{{'USER.LOGINMETHODS.EMAIL.RESEND' | translate}}"
+                                    (click)="resendVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
+                            </ng-container>
+                        </div>
+
+                        <div class="actions">
+                            <button (click)="emailEditState = true" mat-icon-button>
+                                <mat-icon>edit</mat-icon>
+                            </button>
+                        </div>
+                    </ng-container>
+                    <ng-template #emailEdit>
+                        <mat-form-field class="name">
+                            <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>
+                            <input matInput [(ngModel)]="user.email" />
+                        </mat-form-field>
+                        <button (click)="emailEditState = false" mat-icon-button>
+                            <mat-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>
+                    </ng-template>
+                </div>
+
+                <div class="method-row">
+                    <span class="label">{{ 'USER.PHONE' | translate }}</span>
+
+                    <ng-container *ngIf="!phoneEditState; else phoneEdit">
+                        <div class="actions">
+                            <span class="name">{{user?.phone}}</span>
+                            <mat-icon *ngIf="user?.isPhoneVerified" color="primary" aria-hidden="false"
+                                aria-label="verified icon">
+                                check_circle_outline</mat-icon>
+                            <ng-container *ngIf="user?.phone && !user?.isPhoneVerified">
+                                <mat-icon color="warn" aria-hidden="false" aria-label="not verified icon">highlight_off
+                                </mat-icon>
+                                <a class="verify" matTooltip="{{'USER.LOGINMETHODS.PHONE.RESEND' | translate}}"
+                                    (click)="resendPhoneVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
+                            </ng-container>
+                        </div>
+
+                        <div class="actions">
+                            <button (click)="phoneEditState = true" mat-icon-button>
+                                <mat-icon>edit</mat-icon>
+                            </button>
+                        </div>
+                    </ng-container>
+
+                    <ng-template #phoneEdit>
+                        <mat-form-field class="name">
+                            <mat-label>{{ 'USER.PHONE' | translate }}</mat-label>
+                            <input matInput [(ngModel)]="user.phone" />
+                        </mat-form-field>
+                        <button (click)="phoneEditState = false" mat-icon-button>
+                            <mat-icon>close</mat-icon>
+                        </button>
+                        <button *ngIf="user.phone" color="warn" (click)="deletePhone()" mat-icon-button>
+                            <i class="las la-trash"></i>
+                        </button>
+                        <button [disabled]="!user.phone" type="button" color="primary" (click)="savePhone()"
+                            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+                    </ng-template>
+                </div>
+            </div>
+        </app-card>
+
+        <app-user-mfa *ngIf="user" [user]="user"></app-user-mfa>
+
+        <app-card *ngIf="user?.id" title="{{ 'GRANTS.USER.TITLE' | translate }}"
+            description="{{'GRANTS.USER.DESCRIPTION' | translate }}">
+            <app-user-grants [userId]="user.id" [allowCreate]="['user.grant.write'] | hasRole"
+                [allowDelete]="['user.grant.delete'] | hasRole"></app-user-grants>
+        </app-card>
+    </div>
+
+    <metainfo *ngIf="user" class="side">
+        <div class="details">
+            <div class="row" *ngIf="user?.preferredLoginName">
+                <span class="first">Preferred Loginname:</span>
+                <span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
+            </div>
+        </div>
+
+        <app-changes [changeType]="ChangeType.USER" [id]="user.id"></app-changes>
+    </metainfo>
+</app-meta-layout>

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

@@ -0,0 +1,247 @@
+.head {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #ffffff20;
+  flex-wrap: wrap;
+  padding-bottom: .5rem;
+
+  a {
+      display: block;
+      margin-right: 2rem;
+  }
+
+  h1 {
+      font-size: 2rem;
+      margin: 0;
+      font-weight: normal;
+      margin-right: 1rem;
+  }
+
+  .fill-space {
+      flex: 1;
+  }
+
+  .state-button {
+      border-radius: .5rem;
+  }
+}
+
+.card-actions {
+    button {
+        border-radius: .5rem;
+    }
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 0 -.5rem; 
+
+  &.nowrap{
+    flex-wrap: nowrap;
+  }
+
+  &.center {
+    align-items: center;
+  }
+
+  mat-form-field {
+    flex: 1 1 33%;
+    margin: 0 .5rem;
+  }  
+}
+
+.btn-container {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 -.5rem;
+
+  button {
+    border-radius: .5rem;
+    margin: 0 .5rem;
+  }
+}
+
+.method-col {
+    display: flex;
+    flex-direction: column;
+    margin: -.5rem;
+  
+    .method-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        padding: .5rem;
+        border-bottom: 1px solid #ffffff20;
+        flex-wrap: wrap;
+    
+        .label, .name {
+            margin-right: 1rem;
+        }
+    
+        .actions {
+            flex: 1;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+
+            .notify-change-pwd {
+                border-radius: .5rem;
+            }
+        }
+    
+        .label {
+            flex: 1;
+            font-size: .9rem;
+            color: #818a8a;
+        }
+    
+        mat-icon {
+          margin-right: .5rem;
+        }
+    
+        .submit-button {
+          border-radius: .5rem;
+        }
+    
+        .verify {
+          text-decoration: none;
+          font-size: .8rem;
+          color: #8795a1;
+          border-radius: .5rem;
+          cursor: pointer;
+          word-wrap: none;
+          white-space: nowrap;
+          margin-right: 1rem;
+    
+          &:hover {
+              color: white;
+              text-decoration: underline;
+          }
+        }
+      }
+}
+
+.img-phone-email {
+  width: 300px;
+}
+
+.side {
+    .details {
+        margin-bottom: 1rem;
+        border-bottom: 1px solid #81868a40;
+        padding-bottom: 1rem;
+    
+        .row {
+            display: flex;
+            margin-bottom: 0.5rem;
+            align-items: center;
+    
+            button {
+                display: none;
+                visibility: hidden;
+            }
+    
+            &:hover {
+                button {
+                    display: inline-block;
+                    visibility: visible;
+                    mat-icon {
+                        font-size: 1.2rem;
+                    }
+                }
+            }
+    
+            .first {
+                flex: 1;
+                font-size: 0.8rem;
+                margin-right: 0.5rem;
+                white-space: nowrap;
+            }
+    
+            .fill-space {
+                flex: 1;
+            }
+    
+            .second {
+                font-size: 0.8rem;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                margin-left: 1rem;
+                text-align: right;
+            }
+
+            a {
+                &:hover {
+                    cursor: pointer;
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        .side-section {
+            color: #8795a1;
+        }
+    }  
+
+    .details {
+        margin-bottom: 1rem;
+        border-bottom: 1px solid #81868a40;
+        padding-bottom: 1rem;
+    
+        .row {
+            display: flex;
+            margin-bottom: 0.5rem;
+            align-items: center;
+    
+            button {
+                display: none;
+                visibility: hidden;
+            }
+    
+            &:hover {
+                button {
+                    display: inline-block;
+                    visibility: visible;
+                    mat-icon {
+                        font-size: 1.2rem;
+                    }
+                }
+            }
+    
+            .first {
+                flex: 1;
+                font-size: 0.8rem;
+                margin-right: 0.5rem;
+            }
+    
+            .fill-space {
+                flex: 1;
+            }
+    
+            .second {
+                font-size: 0.8rem;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                margin-left: 1rem;
+            }
+
+            a {
+                &:hover {
+                    cursor: pointer;
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        .side-section {
+            color: #8795a1;
+        }
+    }    
+
+    app-changes {
+        flex: 1;
+        min-height: 0;
+    }
+}

console/src/app/pages/users/user-detail/user-detail/user-detail.component.spec.ts

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

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

@@ -0,0 +1,195 @@
+import { Location } from '@angular/common';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { Subscription } from 'rxjs';
+import { ChangeType } from 'src/app/modules/changes/changes.component';
+import {
+    Gender,
+    NotificationType,
+    UserEmail,
+    UserPhone,
+    UserProfile,
+    UserState,
+    UserView,
+} from 'src/app/proto/generated/management_pb';
+import { AuthUserService } from 'src/app/services/auth-user.service';
+import { MgmtUserService } from 'src/app/services/mgmt-user.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+@Component({
+    selector: 'app-user-detail',
+    templateUrl: './user-detail.component.html',
+    styleUrls: ['./user-detail.component.scss'],
+})
+export class UserDetailComponent implements OnInit, OnDestroy {
+    public user!: UserView.AsObject;
+    public genders: Gender[] = [Gender.GENDER_MALE, Gender.GENDER_FEMALE, Gender.GENDER_DIVERSE];
+    public languages: string[] = ['de', 'en'];
+
+    public isMgmt: boolean = false;
+    private subscription: Subscription = new Subscription();
+    public emailEditState: boolean = false;
+    public phoneEditState: boolean = false;
+
+    public ChangeType: any = ChangeType;
+    public loading: boolean = false;
+
+    public UserState: any = UserState;
+    public copied: string = '';
+
+    constructor(
+        public translate: TranslateService,
+        private route: ActivatedRoute,
+        private toast: ToastService,
+        private mgmtUserService: MgmtUserService,
+        private _location: Location,
+        public authUserService: AuthUserService,
+    ) { }
+
+    public ngOnInit(): void {
+        this.subscription = this.route.params.subscribe(params => {
+            this.loading = true;
+            this.getData(params).then(() => {
+                this.loading = false;
+            }).catch(error => {
+                this.loading = false;
+            });
+        });
+    }
+
+    public ngOnDestroy(): void {
+        this.subscription.unsubscribe();
+    }
+
+    public changeState(newState: UserState): void {
+        if (newState === UserState.USERSTATE_ACTIVE) {
+            this.mgmtUserService.ReactivateUser(this.user.id).then(() => {
+                this.toast.showInfo('USER.TOAST.REACTIVATED', true);
+                this.user.state = newState;
+            }).catch(error => {
+                this.toast.showError(error);
+            });
+        } else if (newState === UserState.USERSTATE_INACTIVE) {
+            this.mgmtUserService.DeactivateUser(this.user.id).then(() => {
+                this.toast.showInfo('USER.TOAST.DEACTIVATED', true);
+                this.user.state = newState;
+            }).catch(error => {
+                this.toast.showError(error);
+            });
+        }
+    }
+
+    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);
+            });
+    }
+
+    public resendVerification(): void {
+        this.mgmtUserService.ResendEmailVerification(this.user.id).then(() => {
+            this.toast.showInfo('USER.TOAST.EMAILVERIFICATIONSENT', true);
+        }).catch(error => {
+            this.toast.showError(error);
+        });
+    }
+
+    public resendPhoneVerification(): void {
+        this.mgmtUserService.ResendPhoneVerification(this.user.id).then(() => {
+            this.toast.showInfo('USER.TOAST.PHONEVERIFICATIONSENT', true);
+        }).catch(error => {
+            this.toast.showError(error);
+        });
+    }
+
+    public deletePhone(): void {
+        this.mgmtUserService.RemoveUserPhone(this.user.id).then(() => {
+            this.toast.showInfo('USER.TOAST.PHONEREMOVED', true);
+            this.user.phone = '';
+            this.phoneEditState = false;
+        }).catch(error => {
+            this.toast.showError(error);
+        });
+    }
+
+    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);
+            });
+    }
+
+    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);
+            });
+    }
+
+    public navigateBack(): void {
+        this._location.back();
+    }
+
+    private async getData({ id }: Params): Promise<void> {
+        this.isMgmt = true;
+        this.mgmtUserService.GetUserByID(id).then(user => {
+            this.user = user.toObject();
+        }).catch(err => {
+            console.error(err);
+        });
+    }
+
+    public sendSetPasswordNotification(): void {
+        this.mgmtUserService.SendSetPasswordNotification(this.user.id, NotificationType.NOTIFICATIONTYPE_EMAIL)
+            .then(() => {
+                this.toast.showInfo('USER.TOAST.PASSWORDNOTIFICATIONSENT', true);
+            }).catch(error => {
+                this.toast.showError(error);
+            });
+    }
+
+    public copytoclipboard(value: string): void {
+        const selBox = document.createElement('textarea');
+        selBox.style.position = 'fixed';
+        selBox.style.left = '0';
+        selBox.style.top = '0';
+        selBox.style.opacity = '0';
+        selBox.value = value;
+        document.body.appendChild(selBox);
+        selBox.focus();
+        selBox.select();
+        document.execCommand('copy');
+        document.body.removeChild(selBox);
+        this.copied = value;
+        setTimeout(() => {
+            this.copied = '';
+        }, 3000);
+    }
+}

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

@@ -0,0 +1,15 @@
+<app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}"
+    *ngIf="mfaSubject && (mfaSubject | async)?.length > 0">
+    <div class="col">
+        <div class="row" *ngFor="let mfa of mfaSubject | async">
+            <span>{{'USER.MFA.TYPE.'+ mfa.type | translate}}</span>
+            <span>{{'USER.MFA.STATE.'+ mfa.state | translate}}</span>
+        </div>
+        <p class="row" *ngIf="error">{{error}}</p>
+    </div>
+    <div class="table-wrapper">
+        <div class="spinner-container" *ngIf="loading$ | async">
+            <mat-spinner diameter="50"></mat-spinner>
+        </div>
+    </div>
+</app-card>

console/src/app/pages/users/user-detail/user-mfa/user-mfa.component.scss

@@ -0,0 +1,18 @@
+
+.col {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #ffffff20;
+    margin-bottom: 1rem;
+
+    .row {
+        display: flex;
+        justify-content: space-between;
+        padding: .5rem 0;
+        align-items: center;
+
+        span {
+            flex: 1;
+        }
+    }
+}

console/src/app/pages/users/user-detail/user-mfa/user-mfa.component.spec.ts

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

console/src/app/pages/users/user-detail/user-mfa/user-mfa.component.ts

@@ -0,0 +1,47 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { MFAState, MfaType, MultiFactor, UserView } from 'src/app/proto/generated/management_pb';
+import { MgmtUserService } from 'src/app/services/mgmt-user.service';
+
+
+export interface MFAItem {
+    name: string;
+    verified: boolean;
+}
+
+@Component({
+    selector: 'app-user-mfa',
+    templateUrl: './user-mfa.component.html',
+    styleUrls: ['./user-mfa.component.scss'],
+})
+export class UserMfaComponent implements OnInit, OnDestroy {
+    @Input() private user!: UserView.AsObject;
+    public mfaSubject: BehaviorSubject<MultiFactor.AsObject[]> = new BehaviorSubject<MultiFactor.AsObject[]>([]);
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+
+    public MfaType: any = MfaType;
+    public MFAState: any = MFAState;
+
+    public error: string = '';
+    constructor(private mgmtUserService: MgmtUserService) { }
+
+    public ngOnInit(): void {
+        this.getOTP();
+    }
+
+    public ngOnDestroy(): void {
+        this.mfaSubject.complete();
+        this.loadingSubject.complete();
+    }
+
+    public getOTP(): void {
+        this.mgmtUserService.getUserMfas(this.user.id).then(mfas => {
+            this.mfaSubject.next(mfas.toObject().mfasList);
+            this.error = '';
+        }).catch(error => {
+            console.error(error);
+            this.error = error.message;
+        });
+    }
+}

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

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from 'src/app/guards/auth.guard';
+import { RoleGuard } from 'src/app/guards/role.guard';
+
+import { UserListComponent } from './user-list.component';
+
+
+const routes: Routes = [
+    {
+        path: '',
+        component: UserListComponent,
+        data: { animation: 'HomePage' },
+    },
+    {
+        path: 'create',
+        loadChildren: () => import('../user-create/user-create.module').then(m => m.UserCreateModule),
+        canActivate: [AuthGuard, RoleGuard],
+        data: {
+            roles: ['user.write'],
+        },
+    },
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class UserListRoutingModule { }

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

@@ -0,0 +1,88 @@
+<div class="max-width-container">
+    <h1>{{ 'USER.PAGES.LIST' | translate }}</h1>
+    <p class="sub">{{ 'USER.PAGES.DESCRIPTION' | translate }}</p>
+
+    <div class="table-header-row">
+        <div class="col">
+            <ng-container *ngIf="!selection.hasValue()">
+                <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
+                <span class="count">{{dataSource?.data?.length}}</span>
+            </ng-container>
+            <ng-container *ngIf="selection.hasValue()">
+                <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
+                <span class="count">{{selection?.selected?.length}}</span>
+            </ng-container>
+        </div>
+        <span class="fill-space"></span>
+        <ng-template appHasRole [appHasRole]="['user.write']">
+            <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>
+    </div>
+    <div class="table-wrapper">
+        <div class="spinner-container" *ngIf="loading$ | async">
+            <mat-spinner diameter="50"></mat-spinner>
+        </div>
+        <table class="background-style" mat-table [dataSource]="dataSource">
+            <ng-container matColumnDef="select">
+                <th 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 || (user.firstName && user.lastName))"
+                            class="avatar"
+                            [name]="user.displayName ? user.displayName : (user.firstName + ' '+ user.lastName)"
+                            [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.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 class="background-style" [length]="userResult?.totalResult || 0" [pageSize]="10"
+            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
+    </div>
+</div>

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

@@ -0,0 +1,76 @@
+h1 {
+    margin-top: 0;
+}
+
+.sub {
+    color: #8795a1;
+    margin-bottom: 2rem;
+}
+
+.table-header-row {
+    display: flex;
+    align-items: center;
+
+    .col {
+        display: flex;
+        flex-direction: column;
+
+        .desc {
+            font-size: .8rem;
+            color: #8795a1;
+        }
+        .count {
+            font-size: 2rem;
+        }
+    }
+
+    .fill-space {
+        flex: 1;
+    }
+
+    .icon-button {
+        margin-right: .5rem;
+    }
+
+    .add-button {
+        border-radius: .5rem;
+    }
+}
+
+.table-wrapper {
+    overflow: auto;
+
+    .spinner-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    table, mat-paginator {
+        width: 100%;
+
+        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;
+}

console/src/app/pages/users/user-list/user-list.component.spec.ts

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

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

@@ -0,0 +1,86 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter, OnDestroy, Output } from '@angular/core';
+import { PageEvent } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+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 { MgmtUserService } from 'src/app/services/mgmt-user.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+@Component({
+    selector: 'app-user-list',
+    templateUrl: './user-list.component.html',
+    styleUrls: ['./user-list.component.scss'],
+})
+export class UserListComponent implements OnDestroy {
+    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: MgmtUserService,
+        private toast: ToastService) {
+        this.subscription = this.route.params.subscribe(() => this.getData(10, 0));
+
+        this.selection.changed.subscribe(() => {
+            this.changedSelection.emit(this.selection.selected);
+        });
+    }
+
+    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);
+    }
+
+    public deactivateSelectedUsers(): void {
+        Promise.all(this.selection.selected.map(value => {
+            return this.userService.DeactivateUser(value.id);
+        })).then(() => {
+            this.toast.showInfo('Selected Users deactivated');
+            this.getData(10, 0);
+        });
+    }
+
+    public reactivateSelectedUsers(): void {
+        Promise.all(this.selection.selected.map(value => {
+            return this.userService.ReactivateUser(value.id);
+        })).then(() => {
+            this.toast.showInfo('Selected Users reactivated');
+            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 = resp.toObject().resultList;
+            this.loadingSubject.next(false);
+        }).catch(error => {
+            this.toast.showError(error);
+            this.loadingSubject.next(false);
+        });
+    }
+}

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

@@ -0,0 +1,47 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
+import { CardModule } from 'src/app/modules/card/card.module';
+
+import { UserListRoutingModule } from './user-list-routing.module';
+import { UserListComponent } from './user-list.component';
+
+
+
+@NgModule({
+    declarations: [
+        UserListComponent,
+    ],
+    imports: [
+        AvatarModule,
+        UserListRoutingModule,
+        CommonModule,
+        FormsModule,
+        MatButtonModule,
+        MatDialogModule,
+        HasRoleModule,
+        CardModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatIconModule,
+        MatProgressSpinnerModule,
+        MatCheckboxModule,
+        MatTooltipModule,
+        TranslateModule,
+    ],
+    exports: [
+        UserListComponent,
+    ],
+})
+export class UserListModule { }

console/src/app/pages/users/users-routing.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { RoleGuard } from 'src/app/guards/role.guard';
+
+import { AuthGuard } from '../../guards/auth.guard';
+
+const routes: Routes = [
+    {
+        path: 'all',
+        loadChildren: () => import('src/app/pages/users/user-list/user-list.module').then(m => m.UserListModule),
+        canActivate: [AuthGuard, RoleGuard],
+        data: {
+            roles: ['user.read'],
+        },
+    },
+    {
+        path: '',
+        loadChildren: () => import('src/app/pages/users/user-detail/user-detail.module').then(m => m.UserDetailModule),
+        canActivate: [AuthGuard],
+    },
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class UsersRoutingModule { }

console/src/app/pages/users/users.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { UsersRoutingModule } from './users-routing.module';
+
+@NgModule({
+    declarations: [],
+    imports: [
+        CommonModule,
+        UsersRoutingModule,
+    ],
+})
+export class UsersModule { }