feat(console): add stylelint scss, app redirecturi validation, user grant api change (#531)

* add custom validator for redirect inputs * change http pattern, i18n * throw out deprecated usergrant functions * remove deprecation service * show docs in app detail * reorder data promises * show redirect desc in app detail * custom validator * grant search filters * rm animations * add validation to app detail * user grant udpate * rm grantid from update req * fix project member guard * fix hasrole directive * show validation errors, i18n * fix router link from org members * navitem padding * mobile layout * policy grid mobile layout * rm unused background * lint * add stylelinter add to pipeline * update stylelint rules * lint unknown rule * disable enable rules * lint * table style lint * table classes * fix stylelinter rule, lint * overflow fix member detail * common detail page * user create, password, project grant detail clnup * move meta styles * lint * password policy indicator * lint * fix org create * common component for complexity view * lint * user grant filter * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> Co-authored-by: Florian Forster <[email protected]>
2026-10-31 19:42:15 +00:00 · 2020-07-30 16:54:15 +02:00
parent 8d1725a81d
commit 22ba33c2ef
154 changed files with 6778 additions and 6156 deletions
@@ -1,105 +1,106 @@

 .card {
-    border-radius: .5rem;
-    z-index: 200;
-    border: 1px solid #ffffff30;
-    width: 350px;
+  border-radius: .5rem;
+  z-index: 200;
+  border: 1px solid #ffffff30;
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem 0;
+
+  .avatar {
+    font-size: 80px;
+    margin-bottom: 1rem;
+  }
+
+  .u-name {
+    font-size: 1rem;
+    line-height: 1rem;
+  }
+
+  .u-email {
+    font-size: .8rem;
+    margin-top: 0;
+  }
+
+  .iamuser {
+    font-size: 1rem;
+  }
+
+  button {
+    border-radius: 50vh;
+    margin: .5rem;
+
+    .mat-button-wrapper {
+      font-size: .8rem;
+    }
+  }
+
+  .l-accounts {
    display: flex;
    flex-direction: column;
-    align-items: center;
-    padding: 1rem 0;
+    width: 100%;
+    border-top: 1px solid #ffffff30;
+    border-bottom: 1px solid #ffffff30;
+    padding: .5rem 0;

-    .avatar {
-        font-size: 80px;
-        margin-bottom: 1rem;
-    }
+    .row {
+      padding: .5rem;
+      display: flex;
+      align-items: center;
+      color: inherit;
+      text-decoration: none;

-    .u-name {
-        font-size: 1rem;
-        line-height: 1rem;
-    }
+      &:hover {
+        cursor: pointer;
+        background-color: #ffffff10;
+      }

-    .u-email {
-        font-size: .8rem;
-        margin-top: 0;
-    }
+      .small-avatar {
+        height: 35px;
+        width: 35px;
+        line-height: 35px;
+        font-size: 35px;
+        border-radius: 50%;
+        margin: 0 1rem;
+      }

-    .iamuser {
-        font-size: 1rem;
-    }
+      .icon-wrapper {
+        height: 35px;
+        width: 35px;
+        border-radius: 50%;
+        margin: 0 1rem;
+        text-align: center;

-    button {
-        border-radius: 50vh;
-        margin: .5rem;
-
-        .mat-button-wrapper {
-            font-size: .8rem;
+        i {
+          margin: auto;
+          vertical-align: middle;
        }
-    }
+      }

-    .l-accounts {
+      .col {
+        flex: 1;
        display: flex;
        flex-direction: column;
-        width: 100%;
-        border-top: 1px solid #ffffff30;
-        border-bottom: 1px solid #ffffff30;
-        padding: .5rem 0;

-        .row {
-            padding: .5rem;
-            display: flex;
-            align-items: center;
-            color: inherit;
-            text-decoration: none;
-
-            &:hover {
-                cursor: pointer;
-                background-color: #ffffff10;
-            }
-
-            .small-avatar {
-                height: 35px;
-                width: 35px;
-                line-height: 35px;
-                font-size: 35px;
-                border-radius: 50%;
-                margin: 0 1rem;
-            }
-
-            .icon-wrapper {
-                height: 35px;
-                width: 35px;
-                border-radius: 50%;
-                margin: 0 1rem;
-                text-align: center;
-
-                i {
-                    margin: auto;
-                    vertical-align: middle;
-                }
-            }
-
-            .col {
-                flex: 1;
-                display: flex;
-                flex-direction: column;
-
-                .title {
-                    font-weight: 500;
-                    font-size: .9rem;
-                    line-height: 1rem;
-                }
-
-                .email, .loginname {
-                    color: #8795a1;
-                    font-size: .8rem;
-                    line-height: 1rem;
-                }
-            }
-
-            .fill-space {
-                flex: 1;
-            }
+        .title {
+          font-weight: 500;
+          font-size: .9rem;
+          line-height: 1rem;
        }
+
+        .email,
+        .loginname {
+          color: #8795a1;
+          font-size: .8rem;
+          line-height: 1rem;
+        }
+      }
+
+      .fill-space {
+        flex: 1;
+      }
    }
+  }
 }
@@ -1,25 +1,25 @@
 .title {
-    font-size: 1.2rem;
+  font-size: 1.2rem;
 }
-  
+
 .desc {
-    color: #8795a1;
-    font-size: .9rem;
+  color: #8795a1;
+  font-size: .9rem;
 }

 .full-width {
-    width: 100%;
+  width: 100%;
 }
-  
+
 .action {
-    display: flex;
-    justify-content: flex-end;
-  
-    .ok-button {
-      margin-left: 0.5rem;
-    }
-  
-    button {
-      border-radius: 0.5rem;
-    }
+  display: flex;
+  justify-content: flex-end;
+
+  .ok-button {
+    margin-left: .5rem;
+  }
+
+  button {
+    border-radius: .5rem;
+  }
 }
@@ -2,18 +2,18 @@
@import '~@angular/material/theming';

@mixin avatar-theme($theme) {
-    $primary: map-get($theme, primary);
-    $primary-color: mat-color($primary, 500);
+  $primary: map-get($theme, primary);
+  $primary-color: mat-color($primary, 500);

-    .avatar-circle {
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-transform: uppercase;
-        background-color: $primary-color;
-        box-sizing: border-box;
-        outline: none;
-        color: white;
-    }
-}
+  .avatar-circle {
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-transform: uppercase;
+    background-color: $primary-color;
+    box-sizing: border-box;
+    outline: none;
+    color: white;
+  }
+}
@@ -1,44 +1,46 @@

 .card {
-    margin: 1rem 0;
-    padding: 1.5rem;
-    border-radius: .5rem;
-    padding-top: 1rem;
+  margin: 1rem 0;
+  padding: 1.5rem;
+  border-radius: .5rem;
+  padding-top: 1rem;

-    .header {
-        &.bottom-margin {
-            margin-bottom: 1rem;
-        }
+  .header {
+    margin-top: 0;

-        .row {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .title {
-                margin: 0;
-                font-weight: 400;
-                font-size: 18px;
-            }
-
-            .fill-space {
-                flex: 1;
-            }
-
-            .button {
-                margin-right: -.5rem;
-            }
-        }
-        
-        .desc {
-            font-size: .9rem;
-            color: #8795a1;
-        }
+    &.bottom-margin {
+      margin-bottom: 1rem;
    }

-    .card-content {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .title {
+        margin: 0;
+        font-weight: 400;
+        font-size: 18px;
+      }
+
+      .fill-space {
+        flex: 1;
+      }
+
+      .button {
+        margin-right: -.5rem;
+      }
    }
+
+    .desc {
+      font-size: .9rem;
+      color: #8795a1;
+    }
+  }
+
+  .card-content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
 }
@@ -1,51 +1,54 @@
@import '~@angular/material/theming';

@mixin card-theme($theme) {
-    $primary: map-get($theme, primary);
-    $primary-color: mat-color($primary, 500);
-    $primary-dark: mat-color($primary, A800);
-    $border-color: mat-color($primary, A700);
-    $border-selected-color: mat-color($primary, A600);
+/* stylelint-disable */
+  $primary: map-get($theme, primary);
+  $primary-color: mat-color($primary, 500);
+  $primary-dark: mat-color($primary, A800);
+  $border-color: mat-color($primary, A700);
+  $border-selected-color: mat-color($primary, A600);
+/* stylelint-enable */

-    .card {
-        background-color: $primary-dark;
-        transition: background-color .4s ease-in-out;
-        border: 1px solid rgba($border-color, .2);
-        box-sizing: border-box;
-        border-radius: .5rem;
-        outline: none;
+  .card {
+    background-color: $primary-dark;
+    transition: background-color .4s ease-in-out;
+    border: 1px solid rgba($border-color, .2);
+    box-sizing: border-box;
+    border-radius: .5rem;
+    outline: none;

-        .selection-icon {
-            opacity: 0;
-            position: absolute;
-            top: -12px;
-            left: -12px;
-            color: $border-color;
-        }
-
-        &.selected {
-            background-color: #ffffff25;
-            border: 1px solid $border-selected-color;
-            .text-part {
-                .icons {
-                    opacity: 1;
-                }
-            }
-
-            .selection-icon {
-                color: $border-selected-color;
-                opacity: 1;
-            }
-        }
-
-        .iamuser {
-            color: $primary-color;
-        }
-
-        .edit-button {
-            &:hover {
-                color: $border-selected-color;
-            }
-        }
+    .selection-icon {
+      opacity: 0;
+      position: absolute;
+      top: -12px;
+      left: -12px;
+      color: $border-color;
    }
+
+    &.selected {
+      background-color: #ffffff25;
+      border: 1px solid $border-selected-color;
+
+      .text-part {
+        .icons {
+          opacity: 1;
+        }
+      }
+
+      .selection-icon {
+        color: $border-selected-color;
+        opacity: 1;
+      }
+    }
+
+    .iamuser {
+      color: $primary-color;
+    }
+
+    .edit-button {
+      &:hover {
+        color: $border-selected-color;
+      }
+    }
+  }
 }
@@ -1,8 +1,7 @@
 <span class="header">{{ 'CHANGES.LISTTITLE' | translate }}</span>

-<div class="scroll-container" appScrollable (scrollPosition)="scrollHandler($event)"
-    [@cardAnimation]="data && (data | async)?.length">
-    <li class="item change-item-back" *ngFor="let event of data | async" @animate>
+<div class="scroll-container" appScrollable (scrollPosition)="scrollHandler($event)">
+    <li class="item change-item-back" *ngFor="let event of data | async">
        <span class="seq">
            {{event.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
        </span>
@@ -1,60 +1,61 @@
@import '~@angular/material/theming';

-
 .header {
-    display: block;
-    margin-bottom: 1rem;
-    font-weight: 400;
-    margin-top: 1rem;
+  display: block;
+  margin-bottom: 1rem;
+  font-weight: 400;
+  margin-top: 1rem;
 }

@mixin changes-theme($theme) {
+  .scroll-container {
+    max-height: 60vh;
+    overflow-y: scroll;

-    .scroll-container {
-        max-height: 60vh;
-        overflow-y: scroll;
+    .item {
+      box-sizing: border-box;
+      padding: .5rem;
+      margin: .25rem 0;
+      border-radius: .5rem;
+      display: flex;
+      flex-direction: column;

-        .item {
-            box-sizing: border-box;
-            padding: .5rem;
-            margin: .25rem 0;
-            border-radius: .5rem;
-            display: flex;
-            flex-direction: column;
-            .editor {
-                color: #8795a1;
-                font-size: 12px;
-                align-self: flex-end;
-            }
-            .seq {
-                color: #8795a1;
-                font-size: 12px;
-                align-self: flex-end;
-            }
+      .editor {
+        color: #8795a1;
+        font-size: 12px;
+        align-self: flex-end;
+      }

-            .desc {
-                overflow-x: auto;
-                font-size: 14px;
-            }
+      .seq {
+        color: #8795a1;
+        font-size: 12px;
+        align-self: flex-end;
+      }

-            $primary: map-get($theme, primary);
-            $primary-dark: mat-color($primary, A800);
-            
-            &.change-item-back {
-                background-color: rgba($primary-dark, 0.93);
-                transition: background-color .4s ease-in-out;
-            }
-        }
+      .desc {
+        overflow-x: auto;
+        font-size: 14px;
+      }
+      /* stylelint-disable */
+      $primary: map-get($theme, primary);
+      $primary-dark: mat-color($primary, A800);
+      /* stylelint-enable */

-        .sp-wrapper {
-            padding: .5rem;
-            display: flex;
-            justify-content: center;
-        }
-
-        .end-container {
-            font-size: 12px;
-            color: #8795a1;
-        }
+      &.change-item-back {
+        background-color: rgba($primary-dark, .93);
+        transition: background-color .4s ease-in-out;
+      }
    }
-}
+
+    .sp-wrapper {
+      padding: .5rem;
+      display: flex;
+      justify-content: center;
+    }
+
+    .end-container {
+      font-size: 12px;
+      color: #8795a1;
+    }
+  }
+}
@@ -1,4 +1,3 @@
-import { animate, animateChild, keyframes, query, stagger, style, transition, trigger } from '@angular/animations';
 import { Component, Input, OnInit } from '@angular/core';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, scan, take, tap } from 'rxjs/operators';
@@ -17,22 +16,6 @@ export enum ChangeType {
    selector: 'app-changes',
    templateUrl: './changes.component.html',
    styleUrls: ['./changes.component.scss'],
-    animations: [
-        trigger('cardAnimation', [
-            transition('* => *', [
-                query('@animate', stagger('50ms', animateChild()), { optional: true }),
-            ]),
-        ]),
-        trigger('animate', [
-            transition(':enter', [
-                animate('.2s ease-in', keyframes([
-                    style({ opacity: 0 }),
-                    style({ opacity: .5, transform: 'scale(1.02)' }),
-                    style({ opacity: 1, transform: 'scale(1)' }),
-                ])),
-            ]),
-        ]),
-    ],
 })
 export class ChangesComponent implements OnInit {
    @Input() public changeType: ChangeType = ChangeType.USER;
@@ -3,7 +3,7 @@
    <span class="sub-header">{{ description }}</span>
    <div class="people">
        <div class="img-list" [@cardAnimation]="totalResult">
-            <mat-spinner diameter="20" *ngIf="loading"></mat-spinner>
+            <mat-spinner class="spinner" diameter="20" *ngIf="loading"></mat-spinner>

            <ng-container *ngIf="totalResult < 10; else compact">
                <ng-container *ngFor="let member of membersSubject | async; index as i">
@@ -1,67 +1,62 @@
 .groups {
-    padding-top: 1rem;
+  padding-top: 1rem;

-    .header {
-      display: block;
-      margin-bottom: 1rem;
-      font-weight: 400;
+  .header {
+    display: block;
+    margin-bottom: 1rem;
+    font-weight: 400;
+  }
+
+  .sub-header {
+    font-size: .8rem;
+    color: #8795a1;
+  }
+
+  .people {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+
+    .owner {
+      margin-right: 1rem;
    }

-    .sub-header {
-        font-size: .8rem;
-        color: #8795a1;
-    }
-  
-    .people {
+    .img-list {
+      width: 100%;
+      margin-top: .5rem;
+      margin-left: 1rem;
      display: flex;
      align-items: center;
-      flex-wrap: wrap;
-      margin-bottom: 1rem;
-  
-      .owner {
-        margin-right: 1rem;
+
+      .spinner {
+        margin-left: -15px;
+        margin-right: 20px;
      }
-  
-      .img-list {
-        width: 100%;
-        margin-top: 0.5rem;
-        margin-left: 1rem;
+
+      .add-img {
+        float: left;
+        margin: 0 8px 0 -15px;
+      }
+
+      .avatar-circle {
+        float: left;
+        margin: 0 8px 0 -15px;
+        height: 32px;
+        width: 32px;
+        border-radius: 50%;
+        -webkit-box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
+        -moz-box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
+        box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
+        cursor: pointer;
        display: flex;
        align-items: center;
+        justify-content: center;
+      }

-        mat-spinner {
-            margin-left: -15px;
-            margin-right: 20px;
-        }
-  
-        .avatar-circle {
-            float: left;
-            margin: 0 8px 0 -15px;
-            height: 32px;
-            width: 32px;
-            border-radius: 50%;
-            -webkit-box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
-            -moz-box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
-            box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
-        }
-
-        .add-img {
-            float: left;
-            margin: 0 8px 0 -15px;
-        }
-
-        .avatar-circle {
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: indianred;
-        }
-  
-        .margin-neg {
-          margin-left: -1rem;
-        }
+      .margin-neg {
+        margin-left: -1rem;
      }
    }
  }
-  
+}
@@ -0,0 +1,14 @@
+<div class="max-width-container detail-container">
+    <div class="detail-left">
+        <a *ngIf="backRouterLink" [routerLink]="backRouterLink" mat-icon-button>
+            <mat-icon class="icon">arrow_back</mat-icon>
+        </a>
+    </div>
+    <div class="detail-right">
+        <div class="head">
+            <h1>{{ title }}</h1>
+            <p class="desc">{{ description }}</p>
+            <ng-content></ng-content>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,58 @@
+@import '~@angular/material/theming';
+
+@mixin detail-layout-theme($theme) {
+  /* stylelint-disable */
+  $primary: map-get($theme, primary);
+  $primary-color: mat-color($primary, 500);
+  $primary-dark: mat-color($primary, A800);
+  /* stylelint-enable */
+
+  $lighter-color: rgba(mat-color($primary, 300), .5);
+
+  .detail-container {
+    display: flex;
+    padding-bottom: 3rem;
+    padding-top: 3rem;
+
+    .detail-left {
+      width: 100px;
+      display: flex;
+      padding: 1rem;
+      padding-top: 0;
+      justify-content: center;
+
+      a {
+        margin-top: 13px;
+        color: inherit;
+      }
+    }
+
+    .detail-right {
+      flex: 1;
+      position: relative;
+      padding-left: 1rem;
+
+      @media only screen and (max-width: 500px) {
+        flex-basis: 100%;
+      }
+
+      .head {
+        display: flex;
+        align-items: center;
+        margin-bottom: 2rem;
+        flex-wrap: wrap;
+
+        h1 {
+          font-size: 1.2rem;
+        }
+
+        .desc {
+          width: 100%;
+          display: block;
+          font-size: .9rem;
+          color: #8795a1;
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailLayoutComponent } from './detail-layout.component';
+
+describe('DetailLayoutComponent', () => {
+    let component: DetailLayoutComponent;
+    let fixture: ComponentFixture<DetailLayoutComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [DetailLayoutComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DetailLayoutComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+    selector: 'app-detail-layout',
+    templateUrl: './detail-layout.component.html',
+    styleUrls: ['./detail-layout.component.scss'],
+})
+export class DetailLayoutComponent {
+    @Input() backRouterLink!: RouterLink;
+    @Input() title: string | null = '';
+    @Input() description: string | null = '';
+}
@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterModule } from '@angular/router';
+
+import { DetailLayoutComponent } from './detail-layout.component';
+
+
+
+@NgModule({
+    declarations: [DetailLayoutComponent],
+    imports: [
+        CommonModule,
+        MatIconModule,
+        RouterModule,
+    ],
+    exports: [
+        DetailLayoutComponent,
+    ],
+})
+export class DetailLayoutModule { }
@@ -1,74 +1,74 @@
 .meta-wrapper {
-	display: flex;
-    height: 100%;
-    overflow-x: hidden;
-    transition: all .2s ease-in-out;
+  display: flex;
+  height: 100%;
+  overflow-x: hidden;
+  transition: all .2s ease-in-out;

-    .main-content {
-		display: relative;
-		width: 100%;
-        overflow-y: auto;
+  .main-content {
+    display: relative;
+    width: 100%;
+    overflow-y: auto;

-        &.hidden {
-            flex-basis: 100%;
-        }
+    &.hidden {
+      flex-basis: 100%;
+    }
+  }
+
+  .meta {
+    position: relative;
+    flex: 1 0 300px;
+    padding: 1rem;
+
+    @media only screen and (min-width: 1500px) {
+      flex-basis: 400px;
    }

-    .meta {
-        position: relative;
-        flex: 1 0 300px;
-        padding: 1rem;
-
-		@media only screen and (min-width: 1500px) {
-			flex-basis: 400px;
-		}
-        
-        .meta-content {
-            max-height: calc(100vh - 60px);
-            display: flex;
-            flex-direction: column;
-        }
-
-        &.hidden {
-            flex: 0 0 0 !important;
-            width: 0;
-            padding: 1px;
-
-            .hide {
-                transform: rotate(180deg);
-                visibility: visible;
-                opacity: 1;
-            }
-        }
-
-        &:after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 50%;
-        }
-
-        .hide {
-            position: absolute;
-            left: -40px;
-            top: .5rem;
-            opacity: 0;
-            transition: all .3s ease-in-out;
-
-            i {
-                font-size: 1.5rem;
-            }
-
-            &:hover {
-                visibility: visible;
-            }
-        }
-
-        &:hover {
-            .hide {
-                opacity: 1;
-            }
-        }
+    .meta-content {
+      max-height: calc(100vh - 60px);
+      display: flex;
+      flex-direction: column;
    }
-}
+
+    &.hidden {
+      flex: 0 0 0 !important;
+      width: 0;
+      padding: 1px;
+
+      .hide {
+        transform: rotate(180deg);
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 50%;
+    }
+
+    .hide {
+      position: absolute;
+      left: -40px;
+      top: .5rem;
+      opacity: 0;
+      transition: all .3s ease-in-out;
+
+      i {
+        font-size: 1.5rem;
+      }
+
+      &:hover {
+        visibility: visible;
+      }
+    }
+
+    &:hover {
+      .hide {
+        opacity: 1;
+      }
+    }
+  }
+}
@@ -0,0 +1,51 @@
+@import '~@angular/material/theming';
+
+@mixin meta-theme($theme) {
+  /* stylelint-disable */
+  $primary: map-get($theme, primary);
+  $primary-color: mat-color($primary, 500);
+  $primary-dark: mat-color($primary, A800);
+  /* stylelint-enable */
+
+  $lighter-color: rgba(mat-color($primary, 300), .5);
+
+  .meta-wrapper {
+    .meta {
+      position: relative;
+      flex: 1 0 300px;
+      background: linear-gradient(to bottom right, rgba($lighter-color, .05) 20%, transparent 50%);
+
+      &.hidden {
+        background: linear-gradient(to bottom right, rgba($lighter-color, .05), transparent 50%);
+      }
+
+      &::after {
+        border-left: 2px solid $primary-color;
+        -webkit-border-image:
+          -webkit-gradient(
+            linear,
+            left top,
+            left bottom,
+            from($primary-color),
+            to($primary-dark),
+            color-stop(
+              01,
+              $primary-dark
+            )
+          ) 50 21;
+        border-image:
+          -webkit-gradient(
+            linear,
+            left top,
+            left bottom,
+            from($primary-color),
+            to($primary-dark),
+            color-stop(
+              01,
+              $primary-dark
+            )
+          ) 50 21;
+      }
+    }
+  }
+}
@@ -0,0 +1,42 @@
+<div class="validation-col" *ngIf="this.policy">
+    <div class="val" *ngIf="this.policy.minLength">
+
+        <i *ngIf="password?.value?.length == 0; else showSpinner" class="las la-times red"></i>
+
+        <ng-template #showSpinner>
+            <div *ngIf="(password?.errors?.minlength || password?.value?.length == 0) as currentError; else trueminlength"
+                class="sp-wrapper">
+                <mat-progress-spinner class="spinner" diameter="20" [color]="currentError ? 'warn': 'valid'"
+                    mode="determinate" [value]="(password?.value?.length / policy.minLength) * 100">
+                </mat-progress-spinner>
+            </div>
+        </ng-template>
+        <ng-template #trueminlength>
+            <i class="las la-check green"></i>
+        </ng-template>
+
+        <span>{{ 'USER.PASSWORD.MINLENGTHERROR' | translate: {value: password?.value?.length} }}
+            ({{password?.value?.length}}/{{ policy.minLength}})
+        </span>
+    </div>
+    <div class="val" *ngIf="this.policy.hasSymbol">
+        <i *ngIf="password?.errors?.symbolValidator" class="las la-times red"></i>
+        <i *ngIf="!password?.errors?.symbolValidator" class="las la-check green"></i>
+        <span> {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}</span>
+    </div>
+    <div class="val" *ngIf="this.policy.hasNumber">
+        <i *ngIf="password?.errors?.numberValidator" class="las la-times red"></i>
+        <i *ngIf="!password?.errors?.numberValidator" class="las la-check green"></i>
+        <span> {{ 'USER.VALIDATION.NUMBERERROR' | translate }}</span>
+    </div>
+    <div class="val" *ngIf="this.policy.hasUppercase">
+        <i *ngIf="password?.errors?.upperCaseValidator" class="las la-times red"></i>
+        <i *ngIf="!password?.errors?.upperCaseValidator" class="las la-check green"></i>
+        <span> {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}</span>
+    </div>
+    <div class="val" *ngIf="this.policy.hasLowercase">
+        <i *ngIf="password?.errors?.lowerCaseValidator" class="las la-times red"></i>
+        <i *ngIf="!password?.errors?.lowerCaseValidator" class="las la-check green"></i>
+        <span>{{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}</span>
+    </div>
+</div>
@@ -0,0 +1,53 @@
+
+.validation-col {
+  display: flex wrap;
+  padding: 1rem 0;
+  width: 100%;
+
+  &.between {
+    margin: 0 .5rem;
+  }
+
+  .val {
+    display: flex;
+    align-items: center;
+    flex-basis: 50%;
+    padding: 2px 0;
+
+    span {
+      font-size: 14px;
+      color: #8795a1;
+    }
+
+    .sp-wrapper {
+      height: 20px;
+      width: 20px;
+      margin-right: 1rem;
+
+      i {
+        font-size: .9rem;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+      }
+
+      .spinner[color='valid'] {
+        color: #56a392;
+      }
+    }
+
+    i {
+      margin-right: 1rem;
+      font-size: 20px;
+
+      &.green {
+        color: #56a392;
+      }
+
+      &.red {
+        color: #f44336;
+      }
+    }
+  }
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasswordComplexityViewComponent } from './password-complexity-view.component';
+
+describe('PasswordComplexityViewComponent', () => {
+    let component: PasswordComplexityViewComponent;
+    let fixture: ComponentFixture<PasswordComplexityViewComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [PasswordComplexityViewComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PasswordComplexityViewComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { PasswordComplexityPolicy } from 'src/app/proto/generated/management_pb';
+
+@Component({
+    selector: 'app-password-complexity-view',
+    templateUrl: './password-complexity-view.component.html',
+    styleUrls: ['./password-complexity-view.component.scss'],
+})
+export class PasswordComplexityViewComponent implements OnInit {
+    @Input() public password!: FormControl;
+    @Input() public policy!: PasswordComplexityPolicy.AsObject;
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+}
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { PasswordComplexityViewComponent } from './password-complexity-view.component';
+
+
+@NgModule({
+    declarations: [PasswordComplexityViewComponent],
+    imports: [
+        CommonModule,
+        MatProgressSpinnerModule,
+        TranslateModule,
+        FormsModule,
+    ],
+    exports: [
+        PasswordComplexityViewComponent,
+    ],
+})
+export class PasswordComplexityViewModule { }
@@ -1,108 +1,96 @@
-<div class="container">
-    <div class="left">
-        <a *ngIf="project" [routerLink]="[ '/projects', project.projectId]" mat-icon-button>
-            <mat-icon class="icon">arrow_back</mat-icon>
-        </a>
-    </div>
-    <div class="right">
-        <div class="head">
-            <h1>{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}</h1>
-            <p class="desc">{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}</p>
+<app-detail-layout [backRouterLink]="[ '/projects', project.projectId]"
+    title="{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}"
+    description="{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}">
+    <app-refresh-table *ngIf="project" (refreshed)="changePage()" [dataSize]="dataSource.totalResult"
+        [selection]="selection" [loading]="dataSource?.loading$ | async">
+        <ng-template appHasRole actions
+            [appHasRole]="['project.member.delete:' + project.projectId, 'project.member.delete']">
+            <button (click)="removeProjectMemberSelection()" color="warn"
+                matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
+                *ngIf="selection.hasValue()">
+                <i class="las la-trash"></i>
+            </button>
+        </ng-template>
+        <ng-template appHasRole actions
+            [appHasRole]="['project.member.write:'+project.projectId,'project.member.write']">
+            <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
+                mat-raised-button>
+                <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
+            </a>
+        </ng-template>
+
+        <div class="table-wrapper">
+            <table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
+                <ng-container matColumnDef="select">
+                    <th class="selection" mat-header-cell *matHeaderCellDef>
+                        <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+                            [checked]="selection.hasValue() && isAllSelected()"
+                            [indeterminate]="selection.hasValue() && !isAllSelected()">
+                        </mat-checkbox>
+                    </th>
+                    <td class="selection" mat-cell *matCellDef="let row">
+                        <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+                        </mat-checkbox>
+                    </td>
+                </ng-container>
+
+
+                <ng-container matColumnDef="userId">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERID' | translate }} </th>
+                    <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                        {{member.userId}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="firstname">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
+                    <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                        {{member.firstName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="lastname">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
+                    <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                        {{member.lastName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="username">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
+                    <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                        {{member.userName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="email">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
+                    <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                        {{member.email}}
+                    </td>
+                </ng-container>
+
+                <ng-container matColumnDef="roles">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
+                    <td mat-cell *matCellDef="let member">
+                        <mat-form-field class="form-field" appearance="outline" *ngIf="project">
+                            <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
+                            <mat-select [(ngModel)]="member.rolesList" multiple
+                                [disabled]="([('project.member.write:' + project.projectId), 'project.member.write'] | hasRole | async) == false"
+                                (selectionChange)="updateRoles(member, $event)">
+                                <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
+                                    {{ 'ROLES.'+role | translate }}
+                                </mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+                </tr>
+            </table>
+
+            <mat-paginator *ngIf="dataSource" class="paginator background-style" #paginator [pageSize]="INITIALPAGESIZE"
+                [length]="dataSource.totalResult" [pageSizeOptions]="[25, 50, 100, 250]" (page)="changePage($event)">
+            </mat-paginator>
        </div>
-
-        <app-refresh-table *ngIf="project" (refreshed)="changePage()" [dataSize]="dataSource.totalResult"
-            [selection]="selection" [loading]="dataSource?.loading$ | async">
-            <ng-template appHasRole actions
-                [appHasRole]="['project.member.delete:' + project.projectId, 'project.member.delete']">
-                <button (click)="removeProjectMemberSelection()" color="warn"
-                    matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
-                    *ngIf="selection.hasValue()">
-                    <i class="las la-trash"></i>
-                </button>
-            </ng-template>
-            <ng-template appHasRole actions
-                [appHasRole]="['project.member.write:'+project.projectId,'project.member.write']">
-                <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
-                    mat-raised-button>
-                    <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
-                </a>
-            </ng-template>
-
-            <div class="table-wrapper">
-                <table mat-table class="background-style full-width-table" aria-label="Elements"
-                    [dataSource]="dataSource">
-                    <ng-container matColumnDef="select">
-                        <th class="selection" mat-header-cell *matHeaderCellDef>
-                            <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
-                                [checked]="selection.hasValue() && isAllSelected()"
-                                [indeterminate]="selection.hasValue() && !isAllSelected()">
-                            </mat-checkbox>
-                        </th>
-                        <td class="selection" mat-cell *matCellDef="let row">
-                            <mat-checkbox color="primary" (click)="$event.stopPropagation()"
-                                (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
-                            </mat-checkbox>
-                        </td>
-                    </ng-container>
-
-
-                    <ng-container matColumnDef="userId">
-                        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERID' | translate }} </th>
-                        <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                            {{member.userId}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="firstname">
-                        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
-                        <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                            {{member.firstName}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="lastname">
-                        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
-                        <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                            {{member.lastName}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="username">
-                        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
-                        <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                            {{member.userName}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="email">
-                        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
-                        <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                            {{member.email}}
-                        </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="roles">
-                        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
-                        <td mat-cell *matCellDef="let member">
-                            <mat-form-field class="form-field" appearance="outline" *ngIf="project">
-                                <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
-                                <mat-select [(ngModel)]="member.rolesList" multiple
-                                    [disabled]="([('project.member.write:' + project.projectId)] | hasRole | async) == false"
-                                    (selectionChange)="updateRoles(member, $event)">
-                                    <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
-                                        {{ 'ROLES.'+role | translate }}
-                                    </mat-option>
-                                </mat-select>
-                            </mat-form-field>
-                        </td>
-                    </ng-container>
-
-                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                    <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
-                    </tr>
-                </table>
-
-                <mat-paginator *ngIf="dataSource" class="background-style" #paginator [pageSize]="INITIALPAGESIZE"
-                    [length]="dataSource.totalResult" [pageSizeOptions]="[25, 50, 100, 250]"
-                    (page)="changePage($event)">
-                </mat-paginator>
-            </div>
-        </app-refresh-table>
-    </div>
-</div>
+    </app-refresh-table>
+</app-detail-layout>
@@ -1,92 +1,50 @@
-.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;
-        padding-right: 1rem;
-
-        .head {
-            display: flex;
-            align-items: center;
-            border-bottom: 1px solid #ffffff20;
-            margin-bottom: 2rem;
-            flex-wrap: wrap;
-          
-            a {
-                display: block;
-            }
-          
-            h1 {
-                font-size: 1.2rem;
-            }
-          
-            .desc {
-                width: 100%;
-                display: block;
-                font-size: .9rem;
-                color: #8795a1;
-            }
-        }
-    }
-}
-
 .icon-button {
-    margin-right: .5rem;
+  margin-right: .5rem;
 }

 .add-button {
-    border-radius: .5rem;
+  border-radius: .5rem;
 }

 .table-wrapper {
-    overflow: auto;
+  overflow-x: auto;

-    table, mat-paginator {
-        width: 100%;
+  .table,
+  .paginator {
+    width: 100%;

-        td, th {
-            padding: .5rem;
-            &:first-child {
-                padding-left: 0;
-                padding-right: 1rem;
-            }
+    td,
+    th {
+      padding: .5rem;

-            &:last-child {
-                padding-right: 0;
-            }
-        }
+      &:first-child {
+        padding-left: 0;
+        padding-right: 1rem;
+      }

-        .action {
-            width: 40px;
-        }
-
-        .data-row {
-            &:hover {
-                background-color: #ffffff05;
-            }
-        }
-
-        .selection {
-            width: 50px;
-            max-width: 50px;
-        }
+      &:last-child {
+        padding-right: 0;
+      }
    }
+
+    .action {
+      width: 40px;
+    }
+
+    .data-row {
+      &:hover {
+        background-color: #ffffff05;
+      }
+    }
+
+    .selection {
+      width: 50px;
+      max-width: 50px;
+    }
+  }
 }

 .pointer {
-    outline: none;
-    cursor: pointer;
+  outline: none;
+  cursor: pointer;
 }
@@ -16,13 +16,13 @@ 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 { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';

 import { RefreshTableModule } from '../refresh-table/refresh-table.module';
 import { ProjectMembersRoutingModule } from './project-members-routing.module';
 import { ProjectMembersComponent } from './project-members.component';

-
@NgModule({
    declarations: [ProjectMembersComponent],
    imports: [
@@ -46,6 +46,7 @@ import { ProjectMembersComponent } from './project-members.component';
        TranslateModule,
        HasRolePipeModule,
        RefreshTableModule,
+        DetailLayoutModule,
        MatDialogModule,
    ],
 })
@@ -1,25 +1,26 @@
 .title {
-    font-size: 1.2rem;
-}
-  
-.desc {
-    color: #8795a1;
-    font-size: .9rem;
+  font-size: 1.2rem;
 }

-.full-width, .formfield {
-    width: 100%;
+.desc {
+  color: #8795a1;
+  font-size: .9rem;
+}
+
+.full-width,
+.formfield {
+  width: 100%;
 }

 .action {
-    display: flex;
-    justify-content: flex-end;
-  
-    .ok-button {
-      margin-left: 0.5rem;
-    }
-  
-    button {
-      border-radius: 0.5rem;
-    }
+  display: flex;
+  justify-content: flex-end;
+
+  .ok-button {
+    margin-left: .5rem;
+  }
+
+  button {
+    border-radius: .5rem;
+  }
 }
@@ -1,6 +1,6 @@
 <app-refresh-table *ngIf="projectId" (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
    [selection]="selection" [loading]="dataSource.loading$ | async">
-    <ng-template appHasRole [appHasRole]="['project.role.delete']" actions>
+    <ng-template appHasRole [appHasRole]="['project.role.delete', 'project.role.delete:' + projectId]" actions>
        <button color="warn" class="icon-button" [disabled]="disabled"
            matTooltip="{{'PROJECT.ROLE.DELETE' | translate}}" (click)="deleteSelectedRoles()" mat-icon-button
            *ngIf="selection.hasValue() && actionsVisible">
@@ -15,7 +15,7 @@
    </ng-template>

    <div class="table-wrapper">
-        <table [dataSource]="dataSource" mat-table class="full-width-table" matSort aria-label="Elements">
+        <table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements">
            <ng-container matColumnDef="select">
                <th class="selection" mat-header-cell *matHeaderCellDef>
                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
@@ -1,57 +1,59 @@

 .rounded-button {
-      border-radius: .5rem;
+  border-radius: .5rem;
 }

 .icon-button {
-    margin-right: .5rem;
+  margin-right: .5rem;
 }

 .table-wrapper {
-    overflow: auto;
+  overflow: auto;

-    table, mat-paginator {
-        width: 100%;
-        background-color: #2d2e30;
+  .table,
+  .paginator {
+    width: 100%;
+    background-color: #2d2e30;

-        td, th {
-            &:first-child {
-                padding-left: 0;
-                padding-right: 1rem;
-            }
+    td,
+    th {
+      &:first-child {
+        padding-left: 0;
+        padding-right: 1rem;
+      }

-            &:last-child {
-                padding-right: 0;
-            }
-        }
-
-        .action {
-            width: 40px;
-        }
-
-        .data-row {
-            &:hover {
-                background-color: #ffffff05;
-            }
-        }
-
-        .selection {
-            width: 50px;
-            max-width: 50px;
-        }
-
-        .margin-neg {
-            margin-left: -1rem;
-        }
-
-        .role {
-            display: inline-block;
-            margin: .25rem;
-        }
+      &:last-child {
+        padding-right: 0;
+      }
    }
+
+    .action {
+      width: 40px;
+    }
+
+    .data-row {
+      &:hover {
+        background-color: #ffffff05;
+      }
+    }
+
+    .selection {
+      width: 50px;
+      max-width: 50px;
+    }
+
+    .margin-neg {
+      margin-left: -1rem;
+    }
+
+    .role {
+      display: inline-block;
+      margin: .25rem;
+    }
+  }
 }

 .pointer {
-    outline: none;
-    cursor: pointer;
-}
+  outline: none;
+  cursor: pointer;
+}
@@ -10,7 +10,7 @@
        </ng-container>
    </div>
    <span class="fill-space"></span>
-    <mat-spinner *ngIf="loading" diameter="20"></mat-spinner>
+    <mat-spinner class="spinner" *ngIf="loading" diameter="20"></mat-spinner>
    <button mat-icon-button (click)="emitRefresh()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
        <mat-icon>refresh</mat-icon>
    </button>
@@ -1,31 +1,32 @@

 .table-header-row {
+  display: flex;
+  align-items: center;
+
+  .col {
    display: flex;
-    align-items: center;
+    flex-direction: column;

-    .col {
-        display: flex;
-        flex-direction: column;
-
-        .desc {
-            font-size: .8rem;
-            color: #8795a1;
-        }
-        .count {
-            font-size: 2rem;
-        }
+    .desc {
+      font-size: .8rem;
+      color: #8795a1;
    }

-    mat-spinner {
-        margin-top: 2px;
-        margin-bottom: 1px;
+    .count {
+      font-size: 2rem;
    }
+  }

-    .fill-space {
-        flex: 1;
-    }
+  .spinner {
+    margin-top: 2px;
+    margin-bottom: 1px;
+  }

-    .icon-button {
-        margin-right: .5rem;
-    }
+  .fill-space {
+    flex: 1;
+  }
+
+  .icon-button {
+    margin-right: .5rem;
+  }
 }
@@ -1,3 +1,3 @@
 .full-width {
-    width: 100%;
-}
+  width: 100%;
+}
@@ -1,3 +1,3 @@
 .full-width {
-    width: 100%;
-}
+  width: 100%;
+}
@@ -29,7 +29,7 @@
    </mat-form-field>

    <div *ngIf="target == UserTarget.EXTERNAL" class="line">
-        <mat-form-field appearance="outline">
+        <mat-form-field class="form-field" appearance="outline">
            <mat-label>Global User Email</mat-label>
            <input matInput type="text" [formControl]="globalEmailControl" />
        </mat-form-field>
@@ -1,47 +1,48 @@
 .full-width {
-    width: 100%;
+  width: 100%;
 }

 .target-desc {
-    color: #8795a1;
-    font-size: .8rem;
-    margin: 0;
-    margin-bottom: 1rem;
+  color: #8795a1;
+  font-size: .8rem;
+  margin: 0;
+  margin-bottom: 1rem;

-    a {
-        color: #4072b4;
-        &:hover {
-            cursor: pointer;
-            color: #6992c9;
-            text-decoration: underline;
-        }
+  a {
+    color: #4072b4;
+
+    &:hover {
+      cursor: pointer;
+      color: #6992c9;
+      text-decoration: underline;
    }
+  }
 }

 .line {
-    width: 100%;
-    display: flex;
+  width: 100%;
+  display: flex;

-    mat-form-field {
-        flex: 1;
-    }
+  .form-field {
+    flex: 1;
+  }

-    button {
-        margin-top: 1rem;
-    }
+  button {
+    margin-top: 1rem;
+  }
 }

 .sm-dlt {
-    cursor: pointer;
-    font-size: .8rem;
+  cursor: pointer;
+  font-size: .8rem;
 }

 .found-user-row {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }

 .found-label {
-    font-size: .9rem;
-    color: #8795a1;
-}
+  font-size: .9rem;
+  color: #8795a1;
+}
@@ -2,6 +2,7 @@ import { DataSource } from '@angular/cdk/collections';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, finalize, map } from 'rxjs/operators';
 import {
+    SearchMethod,
    UserGrant,
    UserGrantSearchKey,
    UserGrantSearchQuery,
@@ -60,14 +61,40 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
            case UserGrantContext.OWNED_PROJECT:
                if (data && data.projectId) {
                    this.loadingSubject.next(true);
-                    const promise1 = this.userService.SearchProjectUserGrants(data.projectId, 10, 0, queries);
+                    const projectfilter = new UserGrantSearchQuery();
+                    projectfilter.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID);
+                    projectfilter.setValue(data.projectId);
+                    if (queries) {
+                        queries.push(projectfilter);
+                    } else {
+                        queries = [projectfilter];
+                    }
+
+                    const promise1 = this.userService.SearchUserGrants(10, 0, queries);
                    this.loadResponse(promise1);
                }
                break;
            case UserGrantContext.GRANTED_PROJECT:
-                if (data && data.grantId) {
+                if (data && data.grantId && data.projectId) {
                    this.loadingSubject.next(true);
-                    const promise2 = this.userService.SearchProjectGrantUserGrants(data.grantId, 10, 0, queries);
+
+                    const grantquery: UserGrantSearchQuery = new UserGrantSearchQuery();
+                    grantquery.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_GRANT_ID);
+                    grantquery.setMethod(SearchMethod.SEARCHMETHOD_EQUALS);
+                    grantquery.setValue(data.grantId);
+
+                    const projectfilter = new UserGrantSearchQuery();
+                    projectfilter.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID);
+                    projectfilter.setValue(data.projectId);
+
+                    if (queries) {
+                        queries.push(projectfilter);
+                        queries.push(grantquery);
+                    } else {
+                        queries = [projectfilter, grantquery];
+                    }
+
+                    const promise2 = this.userService.SearchUserGrants(10, 0, queries);
                    this.loadResponse(promise2);
                }
                break;
@@ -10,7 +10,7 @@
    </a>

    <div class="table-wrapper">
-        <table mat-table multiTemplateDataRows class="full-width-table" aria-label="Elements" [dataSource]="dataSource">
+        <table mat-table multiTemplateDataRows class="table" aria-label="Elements" [dataSource]="dataSource">
            <ng-container matColumnDef="select">
                <th class="selection" mat-header-cell *matHeaderCellDef>
                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
@@ -110,8 +110,8 @@
            </tr>
        </table>

-        <mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="50" [length]="dataSource.totalResult"
-            [pageSizeOptions]="[2, 3, 25, 50, 100, 250]" (page)="changePage($event)">
+        <mat-paginator class="paginator" #paginator [length]="dataSource.totalResult" [pageSize]="50"
+            [length]="dataSource.totalResult" [pageSizeOptions]="[2, 3, 25, 50, 100, 250]" (page)="changePage($event)">
        </mat-paginator>
    </div>
 </app-refresh-table>
@@ -1,47 +1,49 @@

 .add-button {
-    border-radius: .5rem;
+  border-radius: .5rem;
 }

 .table-wrapper {
-    overflow: auto;
+  overflow: auto;

-    table, mat-paginator {
-        width: 100%;
-        background-color: #2d2e30;
+  .table,
+  .paginator {
+    width: 100%;
+    background-color: #2d2e30;

-        td, th {
-            padding-left: .5rem;
-            padding-right: .5rem;
+    td,
+    th {
+      padding-left: .5rem;
+      padding-right: .5rem;

-            &:first-child {
-                padding-left: 0;
-                padding-right: .5rem;
-            }
+      &:first-child {
+        padding-left: 0;
+        padding-right: .5rem;
+      }

-            &:last-child {
-                padding-right: 0;
-            }
-        }
-
-        .selection {
-            width: 50px;
-            max-width: 50px;
-        }
-
-        .role {
-            display: inline-block;
-            margin: .25rem;
-        }
+      &:last-child {
+        padding-right: 0;
+      }
    }
+
+    .selection {
+      width: 50px;
+      max-width: 50px;
+    }
+
+    .role {
+      display: inline-block;
+      margin: .25rem;
+    }
+  }
 }

 .pointer {
-    outline: none;
-    cursor: pointer;
+  outline: none;
+  cursor: pointer;
 }

 .no-roles {
-    font-size: 14px;
-    color: #8795a1;
-}
+  font-size: 14px;
+  color: #8795a1;
+}
@@ -4,7 +4,14 @@ import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSelectChange } from '@angular/material/select';
 import { MatTable } from '@angular/material/table';
 import { tap } from 'rxjs/operators';
-import { ProjectRoleView, UserGrant, UserGrantView } from 'src/app/proto/generated/management_pb';
+import {
+    ProjectRoleView,
+    SearchMethod,
+    UserGrant,
+    UserGrantSearchKey,
+    UserGrantSearchQuery,
+    UserGrantView,
+} from 'src/app/proto/generated/management_pb';
 import { MgmtUserService } from 'src/app/services/mgmt-user.service';
 import { ProjectService } from 'src/app/services/project.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -137,7 +144,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
        switch (this.context) {
            case UserGrantContext.OWNED_PROJECT:
                if (grant.id && grant.projectId) {
-                    this.userService.UpdateProjectUserGrant(grant.id, grant.projectId, grant.userId, selectionChange.value)
+                    this.userService.UpdateUserGrant(grant.id, grant.userId, selectionChange.value)
                        .then(() => {
                            this.toast.showInfo('GRANTS.TOAST.UPDATED', true);
                        }).catch(error => {
@@ -147,8 +154,12 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
                break;
            case UserGrantContext.GRANTED_PROJECT:
                if (this.grantId && this.projectId) {
-                    this.userService.updateProjectGrantUserGrant(grant.id,
-                        this.grantId, grant.userId, selectionChange.value)
+                    const projectQuery: UserGrantSearchQuery = new UserGrantSearchQuery();
+                    projectQuery.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID);
+                    projectQuery.setMethod(SearchMethod.SEARCHMETHOD_EQUALS);
+                    projectQuery.setValue(this.projectId);
+                    this.userService.UpdateUserGrant(
+                        grant.id, grant.userId, selectionChange.value)
                        .then(() => {
                            this.toast.showInfo('GRANTS.TOAST.UPDATED', true);
                        }).catch(error => {
@@ -1,25 +1,25 @@
 .title {
-    font-size: 1.2rem;
-    margin-top: 0;
+  font-size: 1.2rem;
+  margin-top: 0;
 }

 .desc {
-    color: #8795a1;
-    font-size: .9rem;
+  color: #8795a1;
+  font-size: .9rem;
 }

 .action {
-    display: flex;
+  display: flex;

-    .ok-button {
-      margin-left: 0.5rem;
-    }
+  .ok-button {
+    margin-left: .5rem;
+  }

-    .fill-space {
-        flex: 1;
-    }
+  .fill-space {
+    flex: 1;
+  }

-    button {
-      border-radius: 0.5rem;
-    }
-}
+  button {
+    border-radius: .5rem;
+  }
+}