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 <florian@caos.ch>

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

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

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

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

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

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

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

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

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

console/.stylelintrc

@@ -0,0 +1,48 @@
+{
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "at-rule-no-unknown": null,
+    "no-descending-specificity": null,
+    "at-rule-empty-line-before": [
+      "always",
+      {
+        "except": [
+          "blockless-after-same-name-blockless",
+          "first-nested"
+        ],
+        "ignore": [
+          "after-comment"
+        ],
+        "ignoreAtRules": [
+          "else"
+        ]
+      }
+    ],
+    "block-closing-brace-newline-after": [
+      "always",
+      {
+        "ignoreAtRules": [
+          "if",
+          "else"
+        ]
+      }
+    ],
+    "max-line-length": 125,
+    "no-empty-source": null,
+    "number-leading-zero": "never",
+    "scss/at-rule-no-unknown": null,
+    "scss/at-else-if-parentheses-space-before": "always",
+    "scss/at-function-parentheses-space-before": "never",
+    "scss/at-if-closing-brace-newline-after": "always-last-in-chain",
+    "scss/at-import-no-partial-leading-underscore": true,
+    "scss/at-mixin-argumentless-call-parentheses": "always",
+    "scss/at-mixin-parentheses-space-before": "never",
+    "scss/dollar-variable-colon-newline-after": "always-multi-line",
+    "scss/dollar-variable-colon-space-after": "always-single-line",
+    "scss/double-slash-comment-whitespace-inside": "always",
+    "scss/no-duplicate-dollar-variables": true
+  }
+}

console/package.json

@@ -6,7 +6,7 @@
     "start": "ng serve",
     "build": "ng build",
     "prodbuild": "ng build --prod",
-    "lint": "ng lint && stylelint './projects/**/*.scss' --syntax scss",
+    "lint": "ng lint && stylelint './src/**/*.scss' --syntax scss",
     "postinstall": "../build/console/generate-grpc.sh"
   },
   "private": true,
@@ -44,8 +44,8 @@
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular/cli": "~10.0.4",
     "@angular-devkit/build-angular": "~0.1000.4",
+    "@angular/cli": "~10.0.4",
     "@angular/compiler-cli": "~10.0.2",
     "@angular/language-service": "~10.0.5",
     "@types/jasmine": "~3.5.11",
@@ -61,6 +61,9 @@
     "karma-jasmine-html-reporter": "^1.5.0",
     "prettier": "^2.0.5",
     "protractor": "~7.0.0",
+    "stylelint": "^13.6.1",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-scss": "^3.18.0",
     "ts-node": "~8.10.2",
     "tslint": "~6.1.0",
     "typescript": "^3.9.7"

console/src/app/animations.ts

@@ -79,10 +79,12 @@ export const navAnimations: Array<AnimationTriggerMetadata> = [
 
 export const routeAnimations: AnimationTriggerMetadata = trigger('routeAnimations', [
     transition('HomePage => AddPage', [
-        style({ transform: 'translateX(100%)' }),
+        style({ transform: 'translateX(100%)', opacity: 0.5 }),
-        animate('250ms ease-in-out', style({ transform: 'translateX(0%)' })),
+        animate('250ms ease-out', style({ transform: 'translateX(0%)', opacity: 1 })),
     ]),
-    transition('AddPage => HomePage', [animate('250ms', style({ transform: 'translateX(100%)' }))]),
+    transition('AddPage => HomePage',
+        [animate('250ms', style({ transform: 'translateX(100%)', opacity: 0.5 }))],
+    ),
     transition('HomePage => DetailPage', [
         query(':enter, :leave', style({ position: 'absolute', left: 0, right: 0 }), {
             optional: true,

console/src/app/app.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="(authService.user | async) || {} as user">
     <ng-container *ngIf="((['iam.read','iam.write'] | hasRole)) as iamuser$">
-        <mat-toolbar @toolbar class="root-header">
+        <mat-toolbar class="root-header">
             <button aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
                 <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
             </button>

console/src/app/app.component.scss

@@ -22,7 +22,6 @@
     font-weight: 400;
     margin-left: 1rem;
     line-height: 1.2rem;
-        font-family: 'Lato';
     margin-right: 1rem;
   }
 
@@ -111,12 +110,11 @@
           align-items: center;
           text-decoration: none;
           cursor: pointer;
-                    padding: 0.2rem 1rem;
+          padding: .2rem 1rem;
-                    margin-right: 0.5rem;
+          margin-right: .5rem;
-                    padding-right: 2rem;
 
           .icon {
-                        margin: 0.5rem 1rem;
+            margin: .5rem 1rem;
           }
 
           .label {
@@ -194,7 +192,7 @@
       width: 30px;
       margin: .5rem;
       cursor: pointer;
-            background: linear-gradient(315deg, #e6e6e6, #ffffff);
+      background: linear-gradient(315deg, #e6e6e6, #fff);
     }
 
     .round-dark {
@@ -204,7 +202,7 @@
       width: 30px;
       margin: .5rem;
       cursor: pointer;
-            background: linear-gradient(315deg, #000000, #000000);
+      background: linear-gradient(315deg, #000, #000);
     }
   }
 }
@@ -222,6 +220,7 @@
     color: #8795a1;
     font-size: 12px;
   }
+
   .line {
     display: block;
     background-color: #ffffff10;

console/src/app/modules/accounts-card/accounts-card.component.scss

@@ -90,7 +90,8 @@
           line-height: 1rem;
         }
 
-                .email, .loginname {
+        .email,
+        .loginname {
           color: #8795a1;
           font-size: .8rem;
           line-height: 1rem;

console/src/app/modules/add-member-dialog/member-create-dialog.component.scss

@@ -16,10 +16,10 @@
   justify-content: flex-end;
 
   .ok-button {
-      margin-left: 0.5rem;
+    margin-left: .5rem;
   }
 
   button {
-      border-radius: 0.5rem;
+    border-radius: .5rem;
   }
 }

console/src/app/modules/card/card.component.scss

@@ -6,6 +6,8 @@
   padding-top: 1rem;
 
   .header {
+    margin-top: 0;
+
     &.bottom-margin {
       margin-bottom: 1rem;
     }

console/src/app/modules/card/card.scss

@@ -1,11 +1,13 @@
 @import '~@angular/material/theming';
 
 @mixin card-theme($theme) {
+/* 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;
@@ -26,6 +28,7 @@
     &.selected {
       background-color: #ffffff25;
       border: 1px solid $border-selected-color;
+
       .text-part {
         .icons {
           opacity: 1;

console/src/app/modules/changes/changes.component.html

@@ -1,8 +1,7 @@
 <span class="header">{{ 'CHANGES.LISTTITLE' | translate }}</span>
 
-<div class="scroll-container" appScrollable (scrollPosition)="scrollHandler($event)"
+<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">
-    <li class="item change-item-back" *ngFor="let event of data | async" @animate>
         <span class="seq">
             {{event.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
         </span>

console/src/app/modules/changes/changes.component.scss

@@ -1,6 +1,5 @@
 @import '~@angular/material/theming';
 
-
 .header {
   display: block;
   margin-bottom: 1rem;
@@ -9,7 +8,6 @@
 }
 
 @mixin changes-theme($theme) {
-
   .scroll-container {
     max-height: 60vh;
     overflow-y: scroll;
@@ -21,11 +19,13 @@
       border-radius: .5rem;
       display: flex;
       flex-direction: column;
+
       .editor {
         color: #8795a1;
         font-size: 12px;
         align-self: flex-end;
       }
+
       .seq {
         color: #8795a1;
         font-size: 12px;
@@ -36,12 +36,13 @@
         overflow-x: auto;
         font-size: 14px;
       }
-
+      /* stylelint-disable */
       $primary: map-get($theme, primary);
       $primary-dark: mat-color($primary, A800);
+      /* stylelint-enable */
 
       &.change-item-back {
-                background-color: rgba($primary-dark, 0.93);
+        background-color: rgba($primary-dark, .93);
         transition: background-color .4s ease-in-out;
       }
     }

console/src/app/modules/changes/changes.component.ts

@@ -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;

console/src/app/modules/contributors/contributors.component.html

@@ -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">

console/src/app/modules/contributors/contributors.component.scss

@@ -24,38 +24,34 @@
 
     .img-list {
       width: 100%;
-        margin-top: 0.5rem;
+      margin-top: .5rem;
       margin-left: 1rem;
       display: flex;
       align-items: center;
 
-        mat-spinner {
+      .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 {
+        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;
-            background-color: indianred;
       }
 
       .margin-neg {
@@ -64,4 +60,3 @@
     }
   }
 }
-  

console/src/app/modules/detail-layout/detail-layout.component.html

@@ -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>

console/src/app/modules/detail-layout/detail-layout.component.scss

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

console/src/app/modules/detail-layout/detail-layout.component.spec.ts

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

console/src/app/modules/detail-layout/detail-layout.component.ts

@@ -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 = '';
+}

console/src/app/modules/detail-layout/detail-layout.module.ts

@@ -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 { }

console/src/app/modules/meta-layout/meta-layout.component.scss

@@ -41,7 +41,7 @@
       }
     }
 
-        &:after {
+    &::after {
       content: '';
       position: absolute;
       top: 0;

console/src/app/modules/meta-layout/meta.scss

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

console/src/app/modules/password-complexity-view/password-complexity-view.component.html

@@ -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>

console/src/app/modules/password-complexity-view/password-complexity-view.component.scss

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

console/src/app/modules/password-complexity-view/password-complexity-view.component.spec.ts

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

console/src/app/modules/password-complexity-view/password-complexity-view.component.ts

@@ -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 {
+    }
+
+}

console/src/app/modules/password-complexity-view/password-complexity-view.module.ts

@@ -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 { }

console/src/app/modules/project-members/project-members.component.html

@@ -1,15 +1,6 @@
-<div class="container">
+<app-detail-layout [backRouterLink]="[ '/projects', project.projectId]"
-    <div class="left">
+    title="{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}"
-        <a *ngIf="project" [routerLink]="[ '/projects', project.projectId]" mat-icon-button>
+    description="{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}">
-            <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>
-        </div>
-
     <app-refresh-table *ngIf="project" (refreshed)="changePage()" [dataSize]="dataSource.totalResult"
         [selection]="selection" [loading]="dataSource?.loading$ | async">
         <ng-template appHasRole actions
@@ -29,8 +20,7 @@
         </ng-template>
 
         <div class="table-wrapper">
-                <table mat-table class="background-style full-width-table" aria-label="Elements"
+            <table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
-                    [dataSource]="dataSource">
                 <ng-container matColumnDef="select">
                     <th class="selection" mat-header-cell *matHeaderCellDef>
                         <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
@@ -83,7 +73,7 @@
                         <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"
+                                [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 }}
@@ -98,11 +88,9 @@
                 </tr>
             </table>
 
-                <mat-paginator *ngIf="dataSource" class="background-style" #paginator [pageSize]="INITIALPAGESIZE"
+            <mat-paginator *ngIf="dataSource" class="paginator background-style" #paginator [pageSize]="INITIALPAGESIZE"
-                    [length]="dataSource.totalResult" [pageSizeOptions]="[25, 50, 100, 250]"
+                [length]="dataSource.totalResult" [pageSizeOptions]="[25, 50, 100, 250]" (page)="changePage($event)">
-                    (page)="changePage($event)">
             </mat-paginator>
         </div>
     </app-refresh-table>
-    </div>
+</app-detail-layout>
-</div>

console/src/app/modules/project-members/project-members.component.scss

@@ -1,48 +1,3 @@
-.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;
 }
@@ -52,13 +7,16 @@
 }
 
 .table-wrapper {
-    overflow: auto;
+  overflow-x: auto;
 
-    table, mat-paginator {
+  .table,
+  .paginator {
     width: 100%;
 
-        td, th {
+    td,
+    th {
       padding: .5rem;
+
       &:first-child {
         padding-left: 0;
         padding-right: 1rem;

console/src/app/modules/project-members/project-members.module.ts

@@ -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,
     ],
 })

console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.scss

@@ -7,7 +7,8 @@
   font-size: .9rem;
 }
 
-.full-width, .formfield {
+.full-width,
+.formfield {
   width: 100%;
 }
 
@@ -16,10 +17,10 @@
   justify-content: flex-end;
 
   .ok-button {
-      margin-left: 0.5rem;
+    margin-left: .5rem;
   }
 
   button {
-      border-radius: 0.5rem;
+    border-radius: .5rem;
   }
 }

console/src/app/modules/project-roles/project-roles.component.html

@@ -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"

console/src/app/modules/project-roles/project-roles.component.scss

@@ -10,11 +10,13 @@
 .table-wrapper {
   overflow: auto;
 
-    table, mat-paginator {
+  .table,
+  .paginator {
     width: 100%;
     background-color: #2d2e30;
 
-        td, th {
+    td,
+    th {
       &:first-child {
         padding-left: 0;
         padding-right: 1rem;

console/src/app/modules/refresh-table/refresh-table.component.html

@@ -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>

console/src/app/modules/refresh-table/refresh-table.component.scss

@@ -11,12 +11,13 @@
       font-size: .8rem;
       color: #8795a1;
     }
+
     .count {
       font-size: 2rem;
     }
   }
 
-    mat-spinner {
+  .spinner {
     margin-top: 2px;
     margin-bottom: 1px;
   }

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

@@ -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>

console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss

@@ -10,6 +10,7 @@
 
   a {
     color: #4072b4;
+
     &:hover {
       cursor: pointer;
       color: #6992c9;
@@ -22,7 +23,7 @@
   width: 100%;
   display: flex;
 
-    mat-form-field {
+  .form-field {
     flex: 1;
   }
 

console/src/app/modules/user-grants/user-grants-datasource.ts

@@ -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;

console/src/app/modules/user-grants/user-grants.component.html

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

console/src/app/modules/user-grants/user-grants.component.scss

@@ -6,11 +6,13 @@
 .table-wrapper {
   overflow: auto;
 
-    table, mat-paginator {
+  .table,
+  .paginator {
     width: 100%;
     background-color: #2d2e30;
 
-        td, th {
+    td,
+    th {
       padding-left: .5rem;
       padding-right: .5rem;
 

console/src/app/modules/user-grants/user-grants.component.ts

@@ -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,
+                    const projectQuery: UserGrantSearchQuery = new UserGrantSearchQuery();
-                        this.grantId, grant.userId, selectionChange.value)
+                    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 => {

console/src/app/modules/warn-dialog/warn-dialog.component.scss

@@ -12,7 +12,7 @@
   display: flex;
 
   .ok-button {
-      margin-left: 0.5rem;
+    margin-left: .5rem;
   }
 
   .fill-space {
@@ -20,6 +20,6 @@
   }
 
   button {
-      border-radius: 0.5rem;
+    border-radius: .5rem;
   }
 }

console/src/app/pages/home/home.component.html

@@ -79,13 +79,14 @@
             <app-card class="item">
                 <div class="top">
                     <h2>
-                        <i class="las la-crosshairs"></i>
+                        <i class="las la-users"></i>
                         {{'HOME.USERS'| translate}}</h2>
                     <p>{{'HOME.USERS_DESC'| translate}}</p>
                 </div>
                 <span class="fill-space"></span>
                 <div class="footer">
-                    <a color="primary" mat-button [routerLink]="['/users/all']">{{'HOME.USERS_BUTTON' | translate}}</a>
+                    <a color="primary" mat-stroked-button
+                        [routerLink]="['/users/all']">{{'HOME.USERS_BUTTON' | translate}}</a>
                 </div>
             </app-card>
         </ng-template>

console/src/app/pages/home/home.component.scss

@@ -1,6 +1,7 @@
 
 .wrapper {
   padding-bottom: 100px;
+
   .header {
     display: flex;
     flex-direction: column;
@@ -10,6 +11,7 @@
     h3 {
       font-size: 24px;
       margin-bottom: 1rem;
+      text-align: center;
     }
 
     .wlc_stnce {

console/src/app/pages/iam/iam-members/iam-members.component.html

@@ -1,16 +1,5 @@
-<div class="max-width-container">
+<app-detail-layout [backRouterLink]="[ '/iam']" title="{{ 'IAM.MEMBER.TITLE' | translate }}"
-    <div class="container">
+    description="{{ 'IAM.MEMBER.DESCRIPTION' | translate }}">
-        <div class="left">
-            <a [routerLink]="[ '/iam']" mat-icon-button>
-                <mat-icon class="icon">arrow_back</mat-icon>
-            </a>
-        </div>
-        <div class="right">
-            <div class="head">
-                <h1>{{ 'IAM.MEMBER.TITLE' | translate }}</h1>
-                <p class="desc">{{ 'IAM.MEMBER.DESCRIPTION' | translate }}</p>
-            </div>
-
     <div class="table-header-row">
         <div class="col">
             <ng-container *ngIf="!selection.hasValue()">
@@ -30,9 +19,9 @@
                 <i class="las la-trash"></i>
             </button>
         </ng-template>
-                <ng-template appHasRole [appHasRole]="['org.member.write']">
+        <ng-template appHasRole [appHasRole]="['iam.member.write']">
-                    <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()"
+            <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
-                        color="primary" mat-raised-button>
+                mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
@@ -42,8 +31,7 @@
         <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
             <mat-spinner diameter="50"></mat-spinner>
         </div>
-                <table mat-table class="background-style full-width-table" aria-label="Elements"
+        <table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
-                    [dataSource]="dataSource">
             <ng-container matColumnDef="select">
                 <th class="selection" mat-header-cell *matHeaderCellDef>
                     <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
@@ -96,10 +84,8 @@
             </tr>
         </table>
 
-                <mat-paginator class="background-style" #paginator [pageSize]="50"
+        <mat-paginator class="background-style paginator" #paginator [pageSize]="50"
             [pageSizeOptions]="[25, 50, 100, 250]">
         </mat-paginator>
     </div>
-        </div>
+</app-detail-layout>
-    </div>
-</div>

console/src/app/pages/iam/iam-members/iam-members.component.scss

@@ -1,58 +1,18 @@
-.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: 1.2rem;
-            }
-          
-            .desc {
-                width: 100%;
-                display: block;
-                font-size: .9rem;
-                color: #8795a1;
-            }
-        }
-    }
-}
 
 .table-header-row {
   display: flex;
   align-items: center;
+  width: 100%;
 
   .col {
     display: flex;
     flex-direction: column;
+
     .desc {
       font-size: .8rem;
       color: #8795a1;
     }
+
     .count {
       font-size: 2rem;
     }
@@ -73,6 +33,7 @@
 
 .table-wrapper {
   overflow: auto;
+  width: 100%;
 
   .spinner-container {
     display: flex;
@@ -80,11 +41,14 @@
     justify-content: center;
   }
 
-    table, mat-paginator {
+  .table,
+  .paginator {
     width: 100%;
 
-        td, th {
+    td,
+    th {
       padding: .5rem;
+
       &:first-child {
         padding-left: 0;
         padding-right: 1rem;

console/src/app/pages/iam/iam-members/iam-members.module.ts

@@ -13,6 +13,7 @@ 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 { IamMembersRoutingModule } from './iam-members-routing.module';
 import { IamMembersComponent } from './iam-members.component';
@@ -22,6 +23,7 @@ import { IamMembersComponent } from './iam-members.component';
     declarations: [IamMembersComponent],
     imports: [
         IamMembersRoutingModule,
+        DetailLayoutModule,
         CommonModule,
         MatAutocompleteModule,
         MatChipsModule,

console/src/app/pages/iam/iam-views/iam-views.component.html

@@ -11,7 +11,7 @@
         <mat-spinner diameter="50"></mat-spinner>
     </div>
 
-    <table *ngIf="dataSource" [dataSource]="dataSource" mat-table class="full-width-table background-style" matSort
+    <table *ngIf="dataSource" [dataSource]="dataSource" mat-table class="table background-style" matSort
         aria-label="Elements">
         <ng-container matColumnDef="viewName">
             <th mat-header-cell mat-sort-header *matHeaderCellDef> {{ 'IAM.VIEWS.VIEWNAME' | translate }} </th>
@@ -50,6 +50,6 @@
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-    <mat-paginator class="background-style" #paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 100, 250]">
+    <mat-paginator class="paginator background-style" #paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 100, 250]">
     </mat-paginator>
 </div>

console/src/app/pages/iam/iam-views/iam-views.component.scss

@@ -6,10 +6,12 @@
   .col {
     display: flex;
     flex-direction: column;
+
     .desc {
       font-size: .8rem;
       color: #8795a1;
     }
+
     .count {
       font-size: 2rem;
     }
@@ -33,10 +35,12 @@
     justify-content: center;
   }
 
-    table, mat-paginator {
+  .table,
+  .paginator {
     width: 100%;
 
-        td, th {
+    td,
+    th {
       padding: 0 1rem;
 
       &:first-child {

console/src/app/pages/iam/iam.component.html

@@ -1,6 +1,6 @@
 <app-meta-layout>
     <div class="enlarged-container">
-        <h1>{{'IAM.DETAIL.TITLE' | translate}}</h1>
+        <h1 class="h1">{{'IAM.DETAIL.TITLE' | translate}}</h1>
         <p class="sub">{{'IAM.DETAIL.DESCRIPTION' | translate}} </p>
 
         <app-card title="{{ 'IAM.VIEWS.TITLE' | translate }}" description="{{ 'IAM.VIEWS.DESCRIPTION' | translate }}">

console/src/app/pages/iam/iam.component.scss

@@ -1,4 +1,4 @@
-h1 {
+.h1 {
   margin-top: 0;
 }
 
@@ -7,144 +7,10 @@ h1 {
   margin-bottom: 2rem;
 }
 
-.state-label {
-    font-size: .9rem;
-    color: #8795a1;
-    margin-bottom: .5rem;
-}
-  
-.content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -.5rem; 
-
-    mat-form-field {
-        flex: 1 1 33%;
-        margin: 0 .5rem;
-    }
-}
-
-.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;
-    }
-}
-
-.domain {
-    display: flex;
-    align-items: center;
-    padding: .5rem 0;
-    flex-wrap: wrap;
-
-
-    .title {
-        font-size: 16px;
-        margin-right: 1rem;
-    }
-
-    .verified, .primary{
-        color: #5282c1;
-        margin-right: 1rem;
-    }
-
-    .fill-space {
-        flex: 1;
-    }
-}
-
-.new-desc {
-    font-size: 14px;
-    color: #818a8a;
-}
-
-.new-row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-
-    mat-form-field {
-        flex: 1;
-    }
-}
-
 .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;
-            }
-    
-            .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;
-        }
   }
 }

console/src/app/pages/orgs/org-create/org-create.component.html

@@ -51,38 +51,38 @@
         <h1>{{'ORG.PAGES.ORGDETAILUSER_TITLE' | translate}}</h1>
 
         <div class="user">
-            <form [formGroup]="userForm" (ngSubmit)="finish()" class="form">
+            <form [formGroup]="userForm" class="form">
                 <div class="content">
                     <p class="section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
-                    <mat-form-field class="formfield">
+                    <mat-form-field class="formfield" appearance="outline">
                         <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-form-field>
-                    <mat-form-field class="formfield">
+                    <mat-form-field class="formfield" appearance="outline">
                         <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-form-field class="formfield" appearance="outline">
                         <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-form-field class="formfield" appearance="outline">
                         <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-form-field class="formfield" appearance="outline">
                         <mat-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</mat-label>
                         <input matInput formControlName="nickName" />
                         <mat-error *ngIf="nickName?.invalid && nickName?.errors?.required">
@@ -92,7 +92,7 @@
 
                     <p class="section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
 
-                    <mat-form-field class="formfield">
+                    <mat-form-field class="formfield" appearance="outline">
                         <mat-label>{{ 'USER.PROFILE.GENDER' | translate }}</mat-label>
                         <mat-select formControlName="gender">
                             <mat-option *ngFor="let gender of genders" [value]="gender">
@@ -103,7 +103,7 @@
                             {{ 'USER.VALIDATION.REQUIRED' | translate }}
                         </mat-error>
                     </mat-form-field>
-                    <mat-form-field class="formfield">
+                    <mat-form-field class="formfield" appearance="outline">
                         <mat-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</mat-label>
                         <mat-select formControlName="preferredLanguage">
                             <mat-option *ngFor="let language of languages" [value]="language">
@@ -115,14 +115,18 @@
                         </mat-select>
                     </mat-form-field>
 
-                    <mat-checkbox [(ngModel)]="usePassword" [ngModelOptions]="{standalone: true}"
+                    <mat-checkbox class="checkbox" [(ngModel)]="usePassword" [ngModelOptions]="{standalone: true}"
                         (change)="initPwdValidators()">
                         {{'ORG.PAGES.USEPASSWORD' | translate}}</mat-checkbox>
 
-                    <ng-container *ngIf="usePassword">
+                    <ng-container *ngIf="usePassword && pwdForm">
                         <p class="section">{{ 'USER.CREATE.PASSWORDSECTION' | translate }}</p>
 
-                        <mat-form-field class="formfield" *ngIf="password">
+                        <app-password-complexity-view [policy]="this.policy" [password]="password">
+                        </app-password-complexity-view>
+
+                        <form [formGroup]="pwdForm" class="form">
+                            <mat-form-field class="formfield" *ngIf="password" appearance="outline">
                                 <mat-label>{{ 'USER.PASSWORD.NEW' | translate }}</mat-label>
                                 <input autocomplete="off" name="firstpassword" matInput formControlName="password"
                                     type="password" />
@@ -130,58 +134,30 @@
                                 <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" *ngIf="confirmPassword">
-                            <mat-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</mat-label>
-                            <input autocomplete="off" name="confirmPassword" matInput formControlName="confirmPassword"
-                                type="password" />
 
+                            </mat-form-field>
+                            <mat-form-field class="formfield" *ngIf="confirmPassword" appearance="outline">
+                                <mat-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</mat-label>
+                                <input autocomplete="off" name="confirmPassword" 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>
+                        </form>
                     </ng-container>
                 </div>
                 <div class="btn-container">
                     <button color="primary" class="small-button" type="button" (click)="previous()"
                         mat-stroked-button>{{ 'ACTIONS.BACK' | translate }}</button>
                     <span class="fill-space"></span>
-                    <button color="primary" class="big-button" [disabled]="orgForm.invalid || userForm.invalid"
+                    <button color="primary" class="big-button" (click)="finish()"
-                        type="submit" mat-raised-button>{{ 'ACTIONS.FINISH' | translate }}</button>
+                        [disabled]="orgForm.invalid || userForm.invalid || ((usePassword && pwdForm) ? pwdForm?.invalid : false)"
+                        mat-raised-button>{{ 'ACTIONS.FINISH' | translate }}</button>
                 </div>
             </form>
         </div>

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

@@ -5,6 +5,10 @@ h1 {
 .container {
   padding: 4rem 4rem 2rem 4rem;
 
+  @media only screen and (max-width: 450px) {
+    padding: 4rem 1rem 2rem 1rem;
+  }
+
   .abort-container {
     display: flex;
     align-items: center;
@@ -18,17 +22,17 @@ h1 {
     .abort-2 {
       font-size: 1.2rem;
       margin-left: 2rem;
+      white-space: nowrap;
     }
   }
 
-
   .content {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     margin: 0 -.5rem;
 
-        mat-form-field {
+    .formfield {
       flex: 1 1 33%;
       margin: 0 .5rem;
     }
@@ -42,11 +46,12 @@ h1 {
 }
 
 .margin-right {
-	margin-right: 0.5rem;
+  margin-right: .5rem;
 }
 
 .user {
   flex: 1;
+
   .head {
     display: flex;
     align-items: center;
@@ -68,17 +73,19 @@ h1 {
       color: #8795a1;
     }
   }
+
   .form {
     padding-top: 1rem;
 
     .btn-container {
       display: flex;
       justify-content: flex-end;
+
       .continue-button {
         margin-top: 3rem;
         display: block;
-                padding: 0.5rem 4rem;
+        padding: .5rem 4rem;
-                border-radius: 0.5rem;
+        border-radius: .5rem;
       }
     }
 
@@ -99,7 +106,7 @@ h1 {
         flex-wrap: nowrap;
       }
 
-            mat-form-field {
+      .formfield {
         flex: 1 0 33%;
         margin: 0 .5rem;
       }
@@ -113,6 +120,7 @@ h1 {
 
   .formfield {
     width: 400px;
+
     input {
       font-size: 1.5rem;
     }
@@ -130,7 +138,7 @@ h1 {
 
   .small-button {
     display: block;
-        border-radius: 0.5rem;
+    border-radius: .5rem;
   }
 
   .fill-space {
@@ -139,12 +147,12 @@ h1 {
 
   .big-button {
     display: block;
-        padding: 0.5rem 4rem;
+    padding: .5rem 4rem;
-        border-radius: 0.5rem;
+    border-radius: .5rem;
   }
 }
 
-mat-checkbox {
+.checkbox {
   flex-basis: 100%;
   margin: .5rem;
 }

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

@@ -1,7 +1,7 @@
 import { animate, style, transition, trigger } from '@angular/animations';
 import { Location } from '@angular/common';
 import { Component } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from 'src/app/pages/validators';
 import { CreateOrgRequest, CreateUserRequest, Gender, OrgSetUpResponse } from 'src/app/proto/generated/admin_pb';
@@ -49,6 +49,7 @@ function passwordConfirmValidator(c: AbstractControl): any {
 export class OrgCreateComponent {
     public orgForm!: FormGroup;
     public userForm!: FormGroup;
+    public pwdForm!: FormGroup;
 
     public genders: Gender[] = [Gender.GENDER_FEMALE, Gender.GENDER_MALE, Gender.GENDER_UNSPECIFIED];
     public languages: string[] = ['de', 'en'];
@@ -90,7 +91,6 @@ export class OrgCreateComponent {
         registerUserRequest.setGender(this.gender?.value);
         registerUserRequest.setPassword(this.password?.value);
         registerUserRequest.setPreferredLanguage(this.preferredLanguage?.value);
-
         this.adminService
             .SetUpOrg(createOrgRequest, registerUserRequest)
             .then((data: OrgSetUpResponse) => {
@@ -109,22 +109,7 @@ export class OrgCreateComponent {
         this.currentCreateStep--;
     }
 
-    private initForm(pwdValidators?: Validators[]): void {
+    private initForm(): void {
-        if (pwdValidators) {
-            console.log('init with pwd');
-            this.userForm = this.fb.group({
-                userName: ['', [Validators.required]],
-                firstName: ['', [Validators.required]],
-                lastName: ['', [Validators.required]],
-                email: ['', [Validators.required]],
-                gender: [''],
-                nickName: [''],
-                preferredLanguage: [''],
-                password: ['', [...pwdValidators]],
-                confirmPassword: ['', [...pwdValidators, passwordConfirmValidator]],
-            });
-        } else {
-            console.log('init without pwd');
         this.userForm = this.fb.group({
             userName: ['', [Validators.required]],
             firstName: ['', [Validators.required]],
@@ -135,16 +120,13 @@ export class OrgCreateComponent {
             preferredLanguage: [''],
         });
     }
-    }
 
     public initPwdValidators(): void {
         const validators: Validators[] = [Validators.required];
 
-        console.log(this.usePassword);
         if (this.usePassword) {
             this.orgService.GetDefaultPasswordComplexityPolicy().then(data => {
                 this.policy = data.toObject();
-                console.log(this.policy);
 
                 if (this.policy.minLength) {
                     validators.push(Validators.minLength(this.policy.minLength));
@@ -162,10 +144,20 @@ export class OrgCreateComponent {
                     validators.push(symbolValidator);
                 }
 
-                this.initForm(validators);
+                // this.initForm(validators);
+                const pwdValidators = [...validators] as ValidatorFn[];
+                const confirmPwdValidators = [...validators, passwordConfirmValidator] as ValidatorFn[];
+                this.pwdForm = this.fb.group({
+                    password: ['', pwdValidators],
+                    confirmPassword: ['', confirmPwdValidators],
+                });
+
             });
         } else {
-            this.initForm();
+            this.pwdForm = this.fb.group({
+                password: ['', []],
+                confirmPassword: ['', []],
+            });
         }
     }
 
@@ -206,11 +198,11 @@ export class OrgCreateComponent {
     }
 
     public get password(): AbstractControl | null {
-        return this.userForm.get('password');
+        return this.pwdForm.get('password');
     }
 
     public get confirmPassword(): AbstractControl | null {
-        return this.userForm.get('confirmPassword');
+        return this.pwdForm.get('confirmPassword');
     }
 
     public close(): void {

console/src/app/pages/orgs/org-create/org-create.module.ts

@@ -8,6 +8,7 @@ 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 { PasswordComplexityViewModule } from 'src/app/modules/password-complexity-view/password-complexity-view.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
 
 import { OrgCreateRoutingModule } from './org-create-routing.module';
@@ -28,6 +29,7 @@ import { OrgCreateComponent } from './org-create.component';
         HasRolePipeModule,
         TranslateModule,
         MatCheckboxModule,
+        PasswordComplexityViewModule,
     ],
 })
 export class OrgCreateModule { }

console/src/app/pages/orgs/org-detail/add-domain-dialog/add-domain-dialog.component.html

@@ -2,7 +2,7 @@
 <div mat-dialog-content>
     <p class="desc"> {{'ORG.DOMAINS.ADD.DESCRIPTION' | translate}}</p>
 
-    <mat-form-field label="Domain" required="true">
+    <mat-form-field label="Domain" required="true" class="form-field">
         <mat-label>Domain</mat-label>
         <input matInput [(ngModel)]="newdomain" />
     </mat-form-field>

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

@@ -8,7 +8,7 @@
   font-size: .9rem;
 }
 
-mat-form-field {
+.form-field {
   width: 100%;
 }
 
@@ -17,10 +17,10 @@ mat-form-field {
   justify-content: flex-end;
 
   .ok-button {
-      margin-left: 0.5rem;
+    margin-left: .5rem;
   }
 
   button {
-      border-radius: 0.5rem;
+    border-radius: .5rem;
   }
 }

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

@@ -1,8 +1,7 @@
 <app-meta-layout>
     <div class="enlarged-container">
-        <h1>{{org?.name}}</h1>
+        <h1 class="h1">{{org?.name}}</h1>
-        <p class="sub">{{'ORG_DETAIL.DESCRIPTION' | translate}}
+        <p class="sub">{{'ORG_DETAIL.DESCRIPTION' | translate}}</p>
-        </p>
         <app-card title="{{ 'ORG.DOMAINS.TITLE' | translate }}"
             description="{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}">
             <div *ngFor="let domain of domains" class="domain">

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

@@ -1,4 +1,4 @@
-h1 {
+.h1 {
   margin-top: 0;
 }
 
@@ -7,66 +7,19 @@ h1 {
   margin-bottom: 2rem;
 }
 
-.state-label {
-    font-size: .9rem;
-    color: #8795a1;
-    margin-bottom: .5rem;
-}
-  
-.content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -.5rem; 
-
-    mat-form-field {
-        flex: 1 1 33%;
-        margin: 0 .5rem;
-    }
-}
-
-.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;
-    }
-}
-
 .domain {
   display: flex;
   align-items: center;
   padding: .5rem 0;
   flex-wrap: wrap;
 
-
   .title {
     font-size: 16px;
     margin-right: 1rem;
   }
 
-    .verified, .primary{
+  .verified,
+  .primary {
     color: #5282c1;
     margin-right: 1rem;
   }
@@ -89,52 +42,22 @@ h1 {
 
     .row {
       display: flex;
-            margin-bottom: 0.5rem;
+      margin-bottom: .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;
+        font-size: .8rem;
-                margin-right: 0.5rem;
+        margin-right: .5rem;
-            }
-    
-            .fill-space {
-                flex: 1;
       }
 
       .second {
-                font-size: 0.8rem;
+        font-size: .8rem;
         text-overflow: ellipsis;
         overflow: hidden;
         margin-left: 1rem;
         text-align: right;
       }
-
-            a {
-                &:hover {
-                    cursor: pointer;
-                    text-decoration: underline;
-                }
-            }
-        }
-
-        .side-section {
-            color: #8795a1;
     }
   }
 }

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

@@ -18,6 +18,7 @@ h1 {
     justify-content: flex-end;
     align-items: center;
   }
+
   button {
     &.left-button {
       margin-right: 1rem;
@@ -44,7 +45,7 @@ h1 {
     padding-right: 0;
     padding-bottom: 0;
     padding-left: 1rem;
-        border-radius: 0.5rem;
+    border-radius: .5rem;
     box-sizing: border-box;
     min-height: 130px;
 
@@ -76,10 +77,10 @@ h1 {
       flex-direction: column;
       // justify-content: center;
       min-height: 70px;
-            padding: 0.5rem 0;
+      padding: .5rem 0;
 
       .top {
-                font-size: 0.8rem;
+        font-size: .8rem;
         margin-bottom: 0;
         margin-top: .5rem;
       }
@@ -87,16 +88,16 @@ h1 {
       .name {
         margin-top: 1rem;
         font-size: 1.2rem;
-                margin-bottom: 0.5rem;
+        margin-bottom: .5rem;
       }
 
       .description {
-                font-size: 0.8rem;
+        font-size: .8rem;
         margin-top: .5rem;
       }
 
       .created {
-                font-size: 0.8rem;
+        font-size: .8rem;
       }
 
       .organization {
@@ -119,7 +120,7 @@ h1 {
 
       .icons {
         margin-top: 1rem;
-                transition: all 0.3s;
+        transition: all .3s;
         display: flex;
         align-items: center;
 
@@ -158,7 +159,7 @@ h1 {
       bottom: 0;
       right: 0;
       margin: 0;
-            margin-bottom: 0.25rem;
+      margin-bottom: .25rem;
       color: #8795a1;
 
       &:hover {
@@ -171,7 +172,6 @@ h1 {
       }
     }
 
-
     &:hover {
       .edit-button {
         opacity: 1;
@@ -197,6 +197,10 @@ h1 {
         opacity: 1;
       }
     }
+
+    @media only screen and (max-width: 450px) {
+      flex-basis: 100%;
+    }
   }
 
   .add-org-button {
@@ -208,7 +212,7 @@ h1 {
     align-items: center;
     flex-direction: column;
     min-height: 130px;
-        border-radius: 0.5rem;
+    border-radius: .5rem;
     margin: 1rem;
     box-sizing: border-box;
 
@@ -232,6 +236,10 @@ h1 {
         }
       }
     }
+
+    @media only screen and (max-width: 450px) {
+      flex-basis: 100%;
+    }
   }
 }
 

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

@@ -1,15 +1,5 @@
-<div class="max-width-container">
+<app-detail-layout [backRouterLink]="[ '/org']" title="{{org?.name}} {{ 'ORG.MEMBER.TITLE' | translate }}"
-    <div class="container">
+    description="{{ 'ORG.MEMBER.DESCRIPTION' | translate }}">
-        <div class="left">
-            <a *ngIf="org" [routerLink]="[ '/org']" mat-icon-button>
-                <mat-icon class="icon">arrow_back</mat-icon>
-            </a>
-        </div>
-        <div class="right">
-            <div class="head">
-                <h1>{{org?.name}} {{ 'ORG.MEMBER.TITLE' | translate }}</h1>
-                <p class="desc">{{ 'ORG.MEMBER.DESCRIPTION' | translate }}</p>
-            </div>
 
     <div class="table-header-row" *ngIf="org">
         <div class="col">
@@ -24,15 +14,14 @@
         </div>
         <span class="fill-space"></span>
         <ng-template appHasRole [appHasRole]="['org.member.delete:'+org.id,'org.member.delete']">
-                    <button (click)="removeProjectMemberSelection()"
+            <button (click)="removeProjectMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
-                        matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
+                class="icon-button" mat-icon-button *ngIf="selection.hasValue()" color="warn">
-                        *ngIf="selection.hasValue()" color="warn">
                 <i class="las la-trash"></i>
             </button>
         </ng-template>
         <ng-template appHasRole [appHasRole]="['org.member.write:'+org.id,'org.member.write']">
-                    <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()"
+            <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
-                        color="primary" mat-raised-button>
+                mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
@@ -42,8 +31,7 @@
         <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
             <mat-spinner diameter="50"></mat-spinner>
         </div>
-                <table mat-table class="background-style full-width-table" aria-label="Elements"
+        <table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
-                    [dataSource]="dataSource">
             <ng-container matColumnDef="select">
                 <th class="selection" mat-header-cell *matHeaderCellDef>
                     <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
@@ -60,32 +48,32 @@
 
             <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">
+                <td class="pointer" [routerLink]="['/users', 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">
+                <td class="pointer" [routerLink]="['/users', 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">
+                <td class="pointer" [routerLink]="['/users', 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">
+                <td class="pointer" [routerLink]="['/users', 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 class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                <td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
                     <span class="role app-label" *ngFor="let role of member.rolesList; index as i">
                         {{ 'ROLES.'+role | translate }}</span>
                 </td>
@@ -96,10 +84,8 @@
             </tr>
         </table>
 
-                <mat-paginator class="background-style" #paginator [pageSize]="50"
+        <mat-paginator class="paginator background-style" #paginator [pageSize]="50"
             [pageSizeOptions]="[25, 50, 100, 250]">
         </mat-paginator>
     </div>
-        </div>
+</app-detail-layout>
-    </div>
-</div>

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

@@ -1,58 +1,18 @@
-.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: 1.2rem;
-            }
-          
-            .desc {
-                width: 100%;
-                display: block;
-                font-size: .9rem;
-                color: #8795a1;
-            }
-        }
-    }
-}
 
 .table-header-row {
   display: flex;
   align-items: center;
+  width: 100%;
 
   .col {
     display: flex;
     flex-direction: column;
+
     .desc {
       font-size: .8rem;
       color: #8795a1;
     }
+
     .count {
       font-size: 2rem;
     }
@@ -72,6 +32,7 @@
 }
 
 .table-wrapper {
+  width: 100%;
   overflow: auto;
 
   .spinner-container {
@@ -80,11 +41,14 @@
     justify-content: center;
   }
 
-    table, mat-paginator {
+  .table,
+  .paginator {
     width: 100%;
 
-        td, th {
+    td,
+    th {
       padding: .5rem;
+
       &:first-child {
         padding-left: 0;
         padding-right: 1rem;

console/src/app/pages/orgs/org-members/org-members.component.spec.ts

@@ -4,15 +4,15 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { ProjectMembersComponent } from './project-members.component';
+import { OrgMembersComponent } from './org-members.component';
 
-describe('ProjectMembersComponent', () => {
+describe('OrgMembersComponent', () => {
-  let component: ProjectMembersComponent;
+    let component: OrgMembersComponent;
-  let fixture: ComponentFixture<ProjectMembersComponent>;
+    let fixture: ComponentFixture<OrgMembersComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-      declarations: [ProjectMembersComponent],
+            declarations: [OrgMembersComponent],
             imports: [
                 NoopAnimationsModule,
                 MatPaginatorModule,
@@ -23,7 +23,7 @@ describe('ProjectMembersComponent', () => {
     }));
 
     beforeEach(() => {
-    fixture = TestBed.createComponent(ProjectMembersComponent);
+        fixture = TestBed.createComponent(OrgMembersComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

console/src/app/pages/orgs/org-members/org-members.module.ts

@@ -13,6 +13,7 @@ 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 { OrgMembersRoutingModule } from './org-members-routing.module';
 import { OrgMembersComponent } from './org-members.component';
@@ -37,6 +38,7 @@ import { OrgMembersComponent } from './org-members.component';
         MatProgressSpinnerModule,
         FormsModule,
         TranslateModule,
+        DetailLayoutModule,
     ],
 })
 export class OrgMembersModule { }

console/src/app/pages/orgs/password-policy/password-policy.component.html

@@ -1,31 +1,16 @@
-<div class="max-width-container">
+<app-detail-layout [backRouterLink]="[ '/org']" [title]="title ? (title | translate) : ''"
-    <div class="container">
+    [description]="desc ? (desc | translate) : ''">
-        <div class="left">
-            <a [routerLink]="[ '/org']" mat-icon-button>
-                <mat-icon class="icon">arrow_back</mat-icon>
-            </a>
-        </div>
-        <div class="right">
-            <div class="head">
-                <h1 *ngIf="(titleSub | async) || '' as titletrans">{{ titletrans | translate }}</h1>
-
-                <p class="desc" *ngIf="(descSub | async) || '' as desctrans">{{ desctrans | translate }}</p>
-
-                <span class="fill-space"></span>
     <ng-template appHasRole [appHasRole]="['iam.policy.write']">
         <button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn" (click)="deletePolicy()"
             mat-stroked-button>
             {{'ORG.POLICY.DELETE' | translate}}
         </button>
     </ng-template>
-            </div>
 
-            <div>
     <div class="content" *ngIf="policyType === PolicyComponentType?.LOCKOUT && lockoutData">
         <mat-form-field class="description-formfield" appearance="outline">
             <mat-label>{{ 'ORG.POLICY.DATA.DESCRIPTION' | translate }}</mat-label>
-                        <input matInput name="description" ngDefaultControl [(ngModel)]="lockoutData.description"
+            <input matInput name="description" ngDefaultControl [(ngModel)]="lockoutData.description" required />
-                            required />
         </mat-form-field>
         <div class="row">
             <span class="left-desc">{{'ORG.POLICY.DATA.MAXATTEMPTS' | translate}}</span>
@@ -52,8 +37,7 @@
     <div *ngIf="policyType === PolicyComponentType?.COMPLEXITY && complexityData" class="content">
         <mat-form-field class="description-formfield" appearance="outline">
             <mat-label>{{ 'ORG.POLICY.DATA.DESCRIPTION' | translate }}</mat-label>
-                        <input matInput name="description" ngDefaultControl [(ngModel)]="complexityData.description"
+            <input matInput name="description" ngDefaultControl [(ngModel)]="complexityData.description" required />
-                            required />
         </mat-form-field>
         <div class="row">
             <span class="left-desc">{{'ORG.POLICY.DATA.MINLENGTH' | translate}}</span>
@@ -71,15 +55,13 @@
         <div class="row">
             <span class="left-desc">{{'ORG.POLICY.DATA.HASNUMBER' | translate}}</span>
             <span class="fill-space"></span>
-                        <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
+            <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="complexityData.hasNumber">
-                            [(ngModel)]="complexityData.hasNumber">
             </mat-slide-toggle>
         </div>
         <div class="row">
             <span class="left-desc">{{'ORG.POLICY.DATA.HASSYMBOL' | translate}}</span>
             <span class="fill-space"></span>
-                        <mat-slide-toggle color="primary" name="hasSymbol" ngDefaultControl
+            <mat-slide-toggle color="primary" name="hasSymbol" ngDefaultControl [(ngModel)]="complexityData.hasSymbol">
-                            [(ngModel)]="complexityData.hasSymbol">
             </mat-slide-toggle>
         </div>
         <div class="row">
@@ -101,8 +83,7 @@
     <div class="content" *ngIf="policyType === PolicyComponentType?.AGE && ageData">
         <mat-form-field class="description-formfield" appearance="outline">
             <mat-label>{{ 'ORG.POLICY.DATA.DESCRIPTION' | translate }}</mat-label>
-                        <input matInput name="description" ngDefaultControl [(ngModel)]="ageData.description"
+            <input matInput name="description" ngDefaultControl [(ngModel)]="ageData.description" required />
-                            required />
         </mat-form-field>
         <div class="row">
             <span class="left-desc">{{'ORG.POLICY.DATA.EXPIREWARNDAYS' | translate}}</span>
@@ -136,8 +117,7 @@
     <div class="content" *ngIf="policyType === PolicyComponentType?.IAM_POLICY && iamData">
         <mat-form-field class="description-formfield" appearance="outline">
             <mat-label>{{ 'ORG.POLICY.DATA.DESCRIPTION' | translate }}</mat-label>
-                        <input matInput name="description" ngDefaultControl [(ngModel)]="iamData.description"
+            <input matInput name="description" ngDefaultControl [(ngModel)]="iamData.description" required />
-                            required />
         </mat-form-field>
         <div class="row">
             <span class="left-desc">{{'ORG.POLICY.DATA.USERLOGINMUSTBEDOMAIN' | translate}}</span>
@@ -152,7 +132,4 @@
         <button (click)="savePolicy()" color="primary" type="submit"
             mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
     </div>
-            </div>
+</app-detail-layout>
-        </div>
-    </div>
-</div>

console/src/app/pages/orgs/password-policy/password-policy.component.scss

@@ -1,56 +1,13 @@
 
-.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;
-            }
-
-            .fill-space {
-                flex: 1;
-            }
-          
-            .desc {
-                width: 100%;
-                display: block;
-                font-size: .9rem;
-                color: #8795a1;
-            }
-
 button {
   border-radius: .5rem;
-                margin-bottom: .5rem;
-            }
 }
 
 .content {
   padding-top: 1rem;
   display: flex;
   flex-direction: column;
+  width: 100%;
 
   .row {
     display: flex;
@@ -76,15 +33,12 @@
 .btn-container {
   display: flex;
   justify-content: flex-end;
+  width: 100%;
+
   button {
     margin-top: 3rem;
     display: block;
-                padding: 0.5rem 4rem;
+    padding: .5rem 4rem;
-                border-radius: 0.5rem;
+    border-radius: .5rem;
   }
 }
-    }
-}
-
-
-

console/src/app/pages/orgs/password-policy/password-policy.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { BehaviorSubject, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import {
     OrgIamPolicy,
@@ -32,8 +32,8 @@ export enum PolicyComponentType {
     styleUrls: ['./password-policy.component.scss'],
 })
 export class PasswordPolicyComponent implements OnInit, OnDestroy {
-    titleSub: BehaviorSubject<string> = new BehaviorSubject('');
+    public title: string = '';
-    descSub: BehaviorSubject<string> = new BehaviorSubject('');
+    public desc: string = '';
 
     componentAction: PolicyComponentAction = PolicyComponentAction.CREATE;
 
@@ -68,20 +68,20 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
 
             switch (params.policytype) {
                 case PolicyComponentType.LOCKOUT:
-                    this.titleSub.next('ORG.POLICY.PWD_LOCKOUT.TITLECREATE');
+                    this.title = 'ORG.POLICY.PWD_LOCKOUT.TITLECREATE';
-                    this.descSub.next('ORG.POLICY.PWD_LOCKOUT.DESCRIPTIONCREATE');
+                    this.desc = 'ORG.POLICY.PWD_LOCKOUT.DESCRIPTIONCREATE';
                     break;
                 case PolicyComponentType.AGE:
-                    this.titleSub.next('ORG.POLICY.PWD_AGE.TITLECREATE');
+                    this.title = 'ORG.POLICY.PWD_AGE.TITLECREATE';
-                    this.descSub.next('ORG.POLICY.PWD_AGE.DESCRIPTIONCREATE');
+                    this.desc = 'ORG.POLICY.PWD_AGE.DESCRIPTIONCREATE';
                     break;
                 case PolicyComponentType.COMPLEXITY:
-                    this.titleSub.next('ORG.POLICY.PWD_COMPLEXITY.TITLECREATE');
+                    this.title = 'ORG.POLICY.PWD_COMPLEXITY.TITLECREATE';
-                    this.descSub.next('ORG.POLICY.PWD_COMPLEXITY.DESCRIPTIONCREATE');
+                    this.desc = 'ORG.POLICY.PWD_COMPLEXITY.DESCRIPTIONCREATE';
                     break;
                 case PolicyComponentType.IAM_POLICY:
-                    this.titleSub.next('ORG.POLICY.IAM_POLICY.TITLECREATE');
+                    this.title = 'ORG.POLICY.IAM_POLICY.TITLECREATE';
-                    this.descSub.next('ORG.POLICY.IAM_POLICY.DESCRIPTIONCREATE');
+                    this.desc = 'ORG.POLICY.IAM_POLICY.DESCRIPTIONCREATE';
                     break;
             }
 
@@ -119,20 +119,20 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
         Promise<PasswordLockoutPolicy | PasswordAgePolicy | PasswordComplexityPolicy | OrgIamPolicy | undefined> {
         switch (params.policytype) {
             case PolicyComponentType.LOCKOUT:
-                this.titleSub.next('ORG.POLICY.PWD_LOCKOUT.TITLE');
+                this.title = 'ORG.POLICY.PWD_LOCKOUT.TITLE';
-                this.descSub.next('ORG.POLICY.PWD_LOCKOUT.DESCRIPTION');
+                this.desc = 'ORG.POLICY.PWD_LOCKOUT.DESCRIPTION';
                 return this.orgService.GetPasswordLockoutPolicy();
             case PolicyComponentType.AGE:
-                this.titleSub.next('ORG.POLICY.PWD_AGE.TITLE');
+                this.title = 'ORG.POLICY.PWD_AGE.TITLE';
-                this.descSub.next('ORG.POLICY.PWD_AGE.DESCRIPTION');
+                this.desc = 'ORG.POLICY.PWD_AGE.DESCRIPTION';
                 return this.orgService.GetPasswordAgePolicy();
             case PolicyComponentType.COMPLEXITY:
-                this.titleSub.next('ORG.POLICY.PWD_COMPLEXITY.TITLE');
+                this.title = 'ORG.POLICY.PWD_COMPLEXITY.TITLE';
-                this.descSub.next('ORG.POLICY.PWD_COMPLEXITY.DESCRIPTION');
+                this.desc = 'ORG.POLICY.PWD_COMPLEXITY.DESCRIPTION';
                 return this.orgService.GetPasswordComplexityPolicy();
             case PolicyComponentType.IAM_POLICY:
-                this.titleSub.next('ORG.POLICY.IAM_POLICY.TITLECREATE');
+                this.title = 'ORG.POLICY.IAM_POLICY.TITLECREATE';
-                this.descSub.next('ORG.POLICY.IAM_POLICY.DESCRIPTIONCREATE');
+                this.desc = 'ORG.POLICY.IAM_POLICY.DESCRIPTIONCREATE';
                 return this.orgService.GetMyOrgIamPolicy();
         }
     }

console/src/app/pages/orgs/password-policy/password-policy.module.ts

@@ -9,6 +9,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 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 { PasswordPolicyRoutingModule } from './password-policy-routing.module';
 import { PasswordPolicyComponent } from './password-policy.component';
@@ -27,6 +28,7 @@ import { PasswordPolicyComponent } from './password-policy.component';
         HasRoleModule,
         MatTooltipModule,
         TranslateModule,
+        DetailLayoutModule,
     ],
 })
 export class PasswordPolicyModule { }

console/src/app/pages/orgs/policy-grid/policy-grid.component.html

@@ -5,7 +5,7 @@
 <div class="row-lyt">
     <div class="p-item card">
         <div class="avatar">
-            <mat-icon svgIcon="mdi_textbox_password"></mat-icon>
+            <mat-icon class="icon" svgIcon="mdi_textbox_password"></mat-icon>
         </div>
         <div class="title">
             <span>{{'ORG.POLICY.PWD_COMPLEXITY.TITLE' | translate}}</span>
@@ -32,7 +32,8 @@
 
     <ng-template appHasRole [appHasRole]="['iam.policy.read']">
         <div class="p-item card">
-            <div class="avatar"><i class="icon las la-gem"></i>
+            <div class="avatar">
+                <i class="icon las la-gem"></i>
             </div>
             <div class="title">
                 <span>{{'ORG.POLICY.IAM_POLICY.TITLE' | translate}}</span>

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

@@ -19,18 +19,22 @@ h1 {
     min-height: 250px;
     padding: 1rem;
 
+    @media only screen and (max-width: 450px) {
+      flex-basis: 100%;
+    }
 
     .avatar {
       height: 60px;
       width: 60px;
       border-radius: 50%;
-            background: linear-gradient(40deg,rgb(129, 85, 185) 30%, #8983F7);
+      background: linear-gradient(40deg, rgb(129, 85, 185) 30%, #8983f7);
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: .5rem;
 
-            mat-icon, i {
+      .icon,
+      i {
         font-size: 2.5rem;
         height: 2.5rem;
         line-height: 2.5rem;

console/src/app/pages/projects/apps/app-create/app-create.component.html

@@ -9,13 +9,13 @@
     <h1>{{'APP.PAGES.CREATE_OIDC_DESC_TITLE' | translate}}</h1>
     <p class="desc">{{'APP.PAGES.CREATE_OIDC_DESC_SUB' | translate}}</p>
 
-    <mat-progress-bar color="accent" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
+    <mat-progress-bar class="progress-bar" color="accent" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
 
     <mat-checkbox class="proswitch" color="primary" [(ngModel)]="devmode">
         {{'APP.OIDC.PROSWITCH' | translate}}
     </mat-checkbox>
 
-    <mat-horizontal-stepper *ngIf="!devmode" linear #stepper labelPosition="bottom">
+    <mat-horizontal-stepper class="stepper" *ngIf="!devmode" linear #stepper labelPosition="bottom">
         <mat-step [stepControl]="firstFormGroup" [editable]="true">
             <form [formGroup]="firstFormGroup">
                 <ng-template matStepLabel>{{'APP.OIDC.NAMEANDTYPESECTION' | translate}}</ng-template>
@@ -28,9 +28,10 @@
                 </mat-form-field>
 
                 <p class="step-title">{{'APP.OIDC.TYPETITLE' | translate}}</p>
-                <mat-radio-group color="primary" aria-labelledby="example-radio-group-label" class="example-radio-group"
+                <mat-radio-group color="primary" aria-labelledby="radio-group-label" class="radio-group"
                     formControlName="applicationType">
-                    <mat-radio-button *ngFor="let type of oidcAppTypes | keyvalue" [value]="type.value">
+                    <mat-radio-button class="radio-button" *ngFor="let type of oidcAppTypes | keyvalue"
+                        [value]="type.value">
                         <div>{{'APP.OIDC.APPTYPE'+type.key | translate}}</div>
                     </mat-radio-button>
                 </mat-radio-group>
@@ -45,8 +46,9 @@
             *ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
             <ng-template matStepLabel>{{'APP.OIDC.RESPONSESECTION' | translate}}</ng-template>
             <div class="checkbox-container">
-                <mat-checkbox *ngFor="let responsetype of oidcResponseTypes" (change)="changeResponseType()"
+                <mat-checkbox class="checkbox" *ngFor="let responsetype of oidcResponseTypes"
-                    color="primary" [(ngModel)]="responsetype.checked" [disabled]="responsetype.disabled">
+                    (change)="changeResponseType()" color="primary" [(ngModel)]="responsetype.checked"
+                    [disabled]="responsetype.disabled">
                     {{'APP.OIDC.RESPONSE'+responsetype.type | translate}}
                 </mat-checkbox>
             </div>
@@ -61,10 +63,10 @@
             <form [formGroup]="secondFormGroup">
                 <ng-template matStepLabel>{{'APP.OIDC.AUTHMETHODSECTION' | translate}}</ng-template>
 
-                <mat-radio-group color="primary" aria-labelledby="example-radio-group-label" class="example-radio-group"
+                <mat-radio-group color="primary" aria-labelledby="example-radio-group-label" class="radio-group"
                     formControlName="authMethodType">
-                    <mat-radio-button *ngFor="let authmethod of oidcAuthMethodType" [disabled]="authmethod.disabled"
+                    <mat-radio-button class="radio-button" *ngFor="let authmethod of oidcAuthMethodType"
-                        [value]="authmethod.type">
+                        [disabled]="authmethod.disabled" [value]="authmethod.type">
                         {{'APP.OIDC.AUTHMETHOD'+authmethod.type | translate}}
                     </mat-radio-button>
                 </mat-radio-group>
@@ -81,35 +83,50 @@
             <ng-template matStepLabel>{{'APP.OIDC.REDIRECTSECTION' | translate}}</ng-template>
 
             <p class="step-title">{{'APP.OIDC.REDIRECTTITLE' | translate}}</p>
+            <p class="step-description"
+                *ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
+                {{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
+            <p class="step-description" *ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB">
+                {{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
 
             <mat-form-field appearance="outline" class="full-width">
                 <mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
                 <mat-chip-list #chipRedirectList aria-label="uri selection">
-                    <mat-chip *ngFor="let uri of oidcApp.redirectUrisList" selected removable
+                    <mat-chip class="chip" *ngFor="let uri of oidcApp.redirectUrisList" selected removable
                         [matTooltip]="!uri.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
                         [color]="!uri.startsWith('https://') ? 'warn': 'white'" (removed)="removeUri(uri, 'REDIRECT')">
                         {{uri}} <mat-icon matChipRemove>cancel</mat-icon>
                     </mat-chip>
                     <input [matChipInputFor]="chipRedirectList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                        [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addUri($event, 'REDIRECT')">
+                        [matChipInputAddOnBlur]="true" [formControl]="redirectControl"
+                        (matChipInputTokenEnd)="addUri($event, 'REDIRECT')">
                 </mat-chip-list>
             </mat-form-field>
+            <p *ngIf="redirectControl.invalid" class="error">{{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>
 
             <p class="step-title">{{'APP.OIDC.POSTREDIRECTTITLE' | translate}}</p>
+            <p class="step-description"
+                *ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
+                {{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
+            <p class="step-description"
+                *ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB || oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
+                {{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
 
             <mat-form-field appearance="outline" class="full-width">
                 <mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
                 <mat-chip-list #chipPostRedirectList aria-label="uri selection">
-                    <mat-chip *ngFor="let uri of oidcApp.postLogoutRedirectUrisList"
+                    <mat-chip class="chip" *ngFor="let uri of oidcApp.postLogoutRedirectUrisList"
                         [matTooltip]="!uri.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
                         removable (removed)="removeUri(uri, 'POSTREDIRECT')" selected
                         [color]="!uri.startsWith('https://') ? 'warn': 'white'">
                         {{uri}} <mat-icon matChipRemove>cancel</mat-icon>
                     </mat-chip>
-                    <input [matChipInputFor]="chipPostRedirectList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                    <input [matChipInputFor]="chipPostRedirectList" [formControl]="postRedirectControl"
-                        [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addUri($event, 'POSTREDIRECT')">
+                        [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
+                        (matChipInputTokenEnd)="addUri($event, 'POSTREDIRECT')">
                 </mat-chip-list>
             </mat-form-field>
+            <p *ngIf="postRedirectControl.invalid" class="error">{{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>
 
             <div class="actions">
                 <button mat-stroked-button color="primary" matStepperPrevious>{{'ACTIONS.BACK' | translate}}</button>
@@ -220,7 +237,7 @@
                     </mat-select>
                 </mat-form-field>
 
-                <mat-form-field appearance="outline">
+                <mat-form-field appearance="outline" class="formfield">
                     <mat-label>{{ 'APP.OIDC.GRANT' | translate }}</mat-label>
                     <mat-select formControlName="grantTypesList" multiple>
                         <mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant.type">
@@ -229,7 +246,7 @@
                     </mat-select>
                 </mat-form-field>
 
-                <mat-form-field appearance="outline">
+                <mat-form-field appearance="outline" class="formfield">
                     <mat-label>{{ 'APP.OIDC.RESPONSE' | translate }}</mat-label>
                     <mat-select formControlName="responseTypesList" multiple>
                         <mat-option *ngFor="let type of oidcResponseTypes" [value]="type.type">
@@ -247,10 +264,10 @@
                     </mat-select>
                 </mat-form-field>
 
-                <mat-form-field appearance="outline" class="full-width">
+                <mat-form-field appearance="outline" class="formfield full-width">
                     <mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
                     <mat-chip-list #chipRedirectList aria-label="uri selection">
-                        <mat-chip *ngFor="let uri of oidcApp.redirectUrisList" removable
+                        <mat-chip class="chip" *ngFor="let uri of oidcApp.redirectUrisList" removable
                             (removed)="removeUri(uri, 'REDIRECT')">
                             {{uri}} <mat-icon matChipRemove>cancel</mat-icon>
                         </mat-chip>
@@ -259,10 +276,10 @@
                     </mat-chip-list>
                 </mat-form-field>
 
-                <mat-form-field appearance="outline" class="full-width">
+                <mat-form-field appearance="outline" class="formfield full-width">
                     <mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
                     <mat-chip-list #chipPostRedirectList aria-label="uri selection">
-                        <mat-chip *ngFor="let uri of oidcApp.postLogoutRedirectUrisList" removable
+                        <mat-chip class="chip" *ngFor="let uri of oidcApp.postLogoutRedirectUrisList" removable
                             (removed)="removeUri(uri, 'POSTREDIRECT')">
                             {{uri}} <mat-icon matChipRemove>cancel</mat-icon>
                         </mat-chip>

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

@@ -16,7 +16,7 @@ p.desc {
 .container {
   padding: 4rem 4rem 2rem 4rem;
 
-    mat-progress-bar {
+  .progress-bar {
     margin-bottom: 1rem;
   }
 
@@ -33,12 +33,13 @@ p.desc {
     .abort-2 {
       font-size: 1.2rem;
       margin-left: 2rem;
+      white-space: nowrap;
     }
   }
 }
 
 .margin-right {
-	margin-right: 0.5rem;
+  margin-right: .5rem;
 }
 
 .formfield {
@@ -50,7 +51,7 @@ p.desc {
   width: 100%;
 }
 
-mat-horizontal-stepper {
+.stepper {
   background: inherit !important;
   margin: 0 -1.5rem;
 
@@ -59,16 +60,27 @@ mat-horizontal-stepper {
     color: #8795a1;
   }
 
-    mat-chip[color='white'] {
+  .step-description {
+    font-size: .9rem;
+    color: #8795a1;
+  }
+
+  .error {
+    font-size: 13px;
+    color: #f44336;
+    margin-top: 0;
+  }
+
+  .chip[color='white'] {
     background-color: #fafafa;
   }
 }
 
-mat-radio-group {
+.radio-group {
   display: flex;
   flex-direction: column;
 
-    mat-radio-button {
+  .radio-button {
     margin: .5rem 0;
   }
 }
@@ -77,7 +89,7 @@ mat-radio-group {
   display: flex;
   flex-direction: column;
 
-    mat-checkbox {
+  .checkbox {
     margin: .5rem 0;
   }
 }
@@ -86,7 +98,8 @@ mat-radio-group {
   display: flex;
   justify-content: space-between;
 
-    .left, .right{
+  .left,
+  .right {
     margin-bottom: .5rem;
     font-size: 14px;
     color: #8795a1;
@@ -110,52 +123,26 @@ mat-radio-group {
 }
 
 .dev {
-    .column {
-        display: flex;
-        flex-direction: column;
-
-        .formfield {
-            width: 400px;
-            input {
-                font-size: 1.5rem;
-            }
-
-            &.autocomplete {
-                margin-top: 1rem;
-            }
-        }
-
-        .slider {
-            margin-top: 2rem;
-            margin-bottom: 1rem;
-            font-size: 0.8rem;
-        }
-
-        .access-token {
-            width: 400px;
-        }
-    }
-
   .content {
     display: flex;
     margin: 0 -.5rem;
     flex-wrap: wrap;
 
-        mat-form-field {
+    .formfield {
       flex: 1 0 40%;
       margin: 0 .5rem;
-        }
 
-        .full-width {
+      &.full-width {
         flex-basis: 80%;
       }
     }
+  }
 
   .continue-button {
     margin-top: 3rem;
     display: block;
-        padding: 0.5rem 4rem;
+    padding: .5rem 4rem;
-        border-radius: 0.5rem;
+    border-radius: .5rem;
     float: right;
   }
 }

console/src/app/pages/projects/apps/app-create/app-create.component.ts

@@ -1,7 +1,7 @@
 import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { Location } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
@@ -19,6 +19,7 @@ import { ProjectService } from 'src/app/services/project.service';
 import { ToastService } from 'src/app/services/toast.service';
 
 import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
+import { nativeValidator, webValidator } from '../appTypeValidator';
 
 @Component({
     selector: 'app-app-create',
@@ -73,6 +74,9 @@ export class AppCreateComponent implements OnInit, OnDestroy {
             // TODO show when implemented
         ];
 
+    public redirectControl: FormControl = new FormControl('');
+    public postRedirectControl: FormControl = new FormControl('');
+
     public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
 
     constructor(
@@ -119,6 +123,9 @@ export class AppCreateComponent implements OnInit, OnDestroy {
                         this.oidcApp.grantTypesList =
                             [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE];
                         this.oidcApp.authMethodType = OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
+
+                        this.redirectControl = new FormControl('', [nativeValidator as ValidatorFn]);
+                        this.postRedirectControl = new FormControl('', [nativeValidator as ValidatorFn]);
                         break;
                     case OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB:
                         console.log('WEB');
@@ -136,6 +143,8 @@ export class AppCreateComponent implements OnInit, OnDestroy {
                         this.oidcApp.grantTypesList =
                             [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE];
 
+                        this.redirectControl = new FormControl('', [webValidator as ValidatorFn]);
+                        this.postRedirectControl = new FormControl('', [webValidator as ValidatorFn]);
                         break;
                     case OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT:
                         console.log('USERAGENT');
@@ -147,6 +156,9 @@ export class AppCreateComponent implements OnInit, OnDestroy {
                             [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE, OIDCGrantType.OIDCGRANTTYPE_IMPLICIT];
 
                         this.oidcApp.authMethodType = OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
+
+                        this.redirectControl = new FormControl('', [webValidator as ValidatorFn]);
+                        this.postRedirectControl = new FormControl('', [webValidator as ValidatorFn]);
                         break;
                 }
 
@@ -213,16 +225,18 @@ export class AppCreateComponent implements OnInit, OnDestroy {
         const value = event.value.trim();
 
         if (value !== '') {
-            if (target === 'REDIRECT') {
+            if (target === 'REDIRECT' && this.redirectControl.valid) {
                 this.oidcApp.redirectUrisList.push(value);
-            } else if (target === 'POSTREDIRECT') {
-                this.oidcApp.postLogoutRedirectUrisList.push(value);
-            }
-        }
-
                 if (input) {
                     input.value = '';
                 }
+            } else if (target === 'POSTREDIRECT' && this.redirectControl.valid) {
+                this.oidcApp.postLogoutRedirectUrisList.push(value);
+                if (input) {
+                    input.value = '';
+                }
+            }
+        }
     }
 
     public removeUri(uri: string, target: string): void {

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

@@ -27,6 +27,9 @@
                     <mat-label>{{ 'APP.NAME' | translate }}</mat-label>
                     <input matInput formControlName="name" />
                 </mat-form-field>
+
+                <p class="docs-line" *ngIf="docs?.discoveryEndpoint">Discovery Endpoint: {{docs.discoveryEndpoint}}</p>
+                <p class="docs-line" *ngIf="docs?.issuer">Issuer: {{docs.issuer}}</p>
             </div>
             <div class="btn-container">
                 <button type="submit" color="primary" [disabled]="appNameForm.invalid || name?.disabled"
@@ -42,12 +45,12 @@
         </div>
         <form *ngIf="appForm" [formGroup]="appForm" (ngSubmit)="saveOIDCApp()">
             <div class="content">
-                <mat-form-field appearance="outline">
+                <mat-form-field class="formfield" appearance="outline">
                     <mat-label>{{ 'APP.OIDC.CLIENTID' | translate }}</mat-label>
                     <input matInput formControlName="clientId" />
                 </mat-form-field>
 
-                <mat-form-field appearance="outline">
+                <mat-form-field class="formfield" appearance="outline">
                     <mat-label>{{ 'APP.OIDC.RESPONSE' | translate }}</mat-label>
                     <mat-select formControlName="responseTypesList" multiple>
                         <mat-option *ngFor="let type of oidcResponseTypes" [value]="type">
@@ -56,7 +59,7 @@
                     </mat-select>
                 </mat-form-field>
 
-                <mat-form-field appearance="outline">
+                <mat-form-field class="formfield" appearance="outline">
                     <mat-label>{{ 'APP.OIDC.GRANT' | translate }}</mat-label>
                     <mat-select formControlName="grantTypesList" multiple>
                         <mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant">
@@ -82,11 +85,17 @@
                         </mat-option>
                     </mat-select>
                 </mat-form-field>
+                <p class="step-description"
+                    *ngIf="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
+                    {{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
+                <p class="step-description"
+                    *ngIf="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB || applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
+                    {{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
 
-                <mat-form-field class="full-width" appearance="outline">
+                <mat-form-field class="formfield full-width" appearance="outline">
                     <mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
                     <mat-chip-list #chipRedirectList>
-                        <mat-chip *ngFor="let redirect of redirectUrisList" selected
+                        <mat-chip class="chip" *ngFor="let redirect of redirectUrisList" selected
                             [matTooltip]="!redirect.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
                             [color]="!redirect.startsWith('https://') ? 'warn': 'green'"
                             (removed)="remove(redirect, RedirectType.REDIRECT)">
@@ -94,15 +103,18 @@
                             <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                         </mat-chip>
                         <input [matChipInputFor]="chipRedirectList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                            [matChipInputAddOnBlur]="addOnBlur"
+                            [matChipInputAddOnBlur]="addOnBlur" [formControl]="redirectControl"
                             (matChipInputTokenEnd)="add($event, RedirectType.REDIRECT)">
                     </mat-chip-list>
                 </mat-form-field>
 
-                <mat-form-field class="full-width" appearance="outline">
+                <p *ngIf="redirectControl.value && redirectControl.invalid" class="error">
+                    {{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>
+
+                <mat-form-field class="formfield full-width" appearance="outline">
                     <mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
                     <mat-chip-list #chipPostRedirectList>
-                        <mat-chip *ngFor="let redirect of postLogoutRedirectUrisList" selected
+                        <mat-chip class="chip" *ngFor="let redirect of postLogoutRedirectUrisList" selected
                             (removed)="remove(redirect, RedirectType.POSTREDIRECT)"
                             [matTooltip]="!redirect.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
                             [color]="!redirect.startsWith('https://') ? 'warn': 'green'">
@@ -111,13 +123,17 @@
                         </mat-chip>
                         <input [matChipInputFor]="chipPostRedirectList"
                             [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
-                            (matChipInputTokenEnd)="add($event, RedirectType.POSTREDIRECT)">
+                            (matChipInputTokenEnd)="add($event, RedirectType.POSTREDIRECT)"
+                            [formControl]="postRedirectControl">
                     </mat-chip-list>
                 </mat-form-field>
+
+                <p *ngIf="postRedirectControl.value && postRedirectControl.invalid" class="error">
+                    {{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>
             </div>
             <div class="btn-container">
 
-                <button type="submit" color="primary" [disabled]="appForm.invalid"
+                <button class="submit-button" type="submit" color="primary" [disabled]="appForm.invalid"
                     mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
             </div>
         </form>

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

@@ -53,13 +53,33 @@
     align-items: center;
   }
 
-    mat-form-field {
+  .formfield {
     flex: 1 1 30%;
     margin: 0 .5rem;
+
+    &.full-width {
+      flex-basis: 100%;
+    }
   }
 
-    .full-width {
+  .step-description {
+    font-size: .9rem;
+    color: #8795a1;
     flex-basis: 100%;
+    margin: 0 .5rem 1rem .5rem;
+  }
+
+  .error {
+    font-size: 13px;
+    color: #f44336;
+    margin: 0 .5rem 1.5rem .5rem;
+  }
+
+  .docs-line {
+    flex-basis: 100%;
+    font-size: 14px;
+    color: #8795a1;
+    margin-top: 0;
   }
 
   .toggle {
@@ -72,7 +92,6 @@
       margin-right: 1rem;
     }
   }
-    
 }
 
 .btn-container {
@@ -80,12 +99,12 @@
   justify-content: flex-end;
   margin: 0 -.5rem;
 
-    button {
+  .submit-button {
     border-radius: .5rem;
     margin: 0 .5rem;
   }
 }
 
-  mat-chip[color='green'] {
+.chip[color='green'] {
   background-color: #56a392 !important;
 }

console/src/app/pages/projects/apps/app-detail/app-detail.component.ts

@@ -1,7 +1,7 @@
 import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { Location } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { MatButtonToggleChange } from '@angular/material/button-toggle';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { MatDialog } from '@angular/material/dialog';
@@ -16,12 +16,14 @@ import {
     OIDCConfig,
     OIDCGrantType,
     OIDCResponseType,
+    ZitadelDocs,
 } from 'src/app/proto/generated/management_pb';
 import { OrgService } from 'src/app/services/org.service';
 import { ProjectService } from 'src/app/services/project.service';
 import { ToastService } from 'src/app/services/toast.service';
 
 import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
+import { nativeValidator } from '../appTypeValidator';
 
 enum RedirectType {
     REDIRECT = 'redirect',
@@ -73,6 +75,13 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     public RedirectType: any = RedirectType;
 
     public isZitadel: boolean = false;
+    public docs!: ZitadelDocs.AsObject;
+
+    public OIDCApplicationType: any = OIDCApplicationType;
+
+    public redirectControl: FormControl = new FormControl('');
+    public postRedirectControl: FormControl = new FormControl('');
+
 
     constructor(
         public translate: TranslateService,
@@ -111,7 +120,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
             this.isZitadel = iam.toObject().iamProjectId === this.projectId;
         });
 
-
         this.projectService.GetApplicationById(projectid, id).then(app => {
             this.app = app.toObject();
             this.appNameForm.patchValue(this.app);
@@ -125,9 +133,12 @@ export class AppDetailComponent implements OnInit, OnDestroy {
             }
             if (this.app.oidcConfig?.redirectUrisList) {
                 this.redirectUrisList = this.app.oidcConfig.redirectUrisList;
+
+                this.redirectControl = new FormControl('', [nativeValidator as ValidatorFn]);
             }
             if (this.app.oidcConfig?.postLogoutRedirectUrisList) {
                 this.postLogoutRedirectUrisList = this.app.oidcConfig.postLogoutRedirectUrisList;
+                this.postRedirectControl = new FormControl('', [nativeValidator as ValidatorFn]);
             }
             if (this.app.oidcConfig) {
                 this.appForm.patchValue(this.app.oidcConfig);
@@ -137,6 +148,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
             this.toast.showError(error);
             this.errorMessage = error.message;
         });
+
+        this.docs = (await this.projectService.GetZitadelDocs()).toObject();
     }
 
     public changeState(event: MatButtonToggleChange): void {
@@ -165,7 +178,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     }
 
     public add(event: MatChipInputEvent, target: RedirectType): void {
-        if (target === RedirectType.POSTREDIRECT) {
+        if (target === RedirectType.POSTREDIRECT && this.postRedirectControl.valid) {
             const input = event.input;
             if (event.value !== '' && event.value !== ' ' && event.value !== '/') {
                 this.postLogoutRedirectUrisList.push(event.value);
@@ -173,7 +186,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
             if (input) {
                 input.value = '';
             }
-        } else if (target === RedirectType.REDIRECT) {
+        } else if (target === RedirectType.REDIRECT && this.redirectControl.valid) {
             const input = event.input;
             if (event.value !== '' && event.value !== ' ' && event.value !== '/') {
                 this.redirectUrisList.push(event.value);

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

@@ -16,11 +16,11 @@
   justify-content: flex-end;
 
   .ok-button {
-      margin-left: 0.5rem;
+    margin-left: .5rem;
   }
 
   button {
-      border-radius: 0.5rem;
+    border-radius: .5rem;
   }
 }
 

console/src/app/pages/projects/apps/appTypeValidator.ts

@@ -0,0 +1,32 @@
+import { FormControl } from '@angular/forms';
+
+export function nativeValidator(c: FormControl): any {
+    const REGEXP = /([a-zA-Z0-9]*:\/\/)\w+/g;
+
+    if (c.value.startsWith('http://localhost')) {
+        return null;
+    } else if (c.value.startsWith('https://') || c.value.startsWith('http://')) {
+        return {
+            invalid: true,
+            nativeValidator: {
+                valid: false,
+            },
+        };
+    } else if (REGEXP.test(c.value)) {
+        return null;
+    }
+}
+
+export function webValidator(c: FormControl): any {
+    if (c.value.startsWith('https://')) {
+        return null;
+    } else if (c.value.startsWith('http://')) {
+        return {
+            invalid: false,
+            webValidator: {
+                valid: true,
+                error: 'LOCALHOSTALLOWEDFORTESTING',
+            },
+        };
+    }
+}

console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.html

@@ -4,7 +4,7 @@
             <a [routerLink]="[ '/granted-projects' ]" mat-icon-button>
                 <mat-icon class="icon">arrow_back</mat-icon>
             </a>
-            <h1>{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.projectName}}</h1>
+            <h1 class="h1">{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.projectName}}</h1>
 
             <div class="full-width">
                 <p class="desc">{{ 'PROJECT.PAGES.DESCRIPTION' | translate }}</p>
@@ -12,11 +12,12 @@
             </div>
         </div>
 
-        <ng-template appHasRole [appHasRole]="['project.grant.user.grant.read']">
+        <ng-template appHasRole
+            [appHasRole]="['project.grant.user.grant.read', 'project.grant.user.grant.read:'+grantId]">
             <app-card *ngIf="project?.projectId" title="{{ 'GRANTS.PROJECT.TITLE' | translate }}"
                 description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
                 <app-user-grants [context]="userGrantContext" [projectId]="projectId" [grantId]="grantId"
-                    [displayedColumns]="['select', 'projectId', 'creationDate', 'changeDate', 'roleNamesList']"
+                    [displayedColumns]="['select','user', 'projectId', 'creationDate', 'changeDate', 'roleNamesList']"
                     [allowCreate]="['project.grant.user.grant.write'] | hasRole | async"
                     [allowDelete]="['project.grant.user.grant.delete'] | hasRole | async">
                 </app-user-grants>

console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.scss

@@ -9,7 +9,7 @@
     display: block;
   }
 
-    h1 {
+  .h1 {
     font-size: 1.2rem;
     margin: 0 1rem;
     margin-left: 2rem;
@@ -21,14 +21,6 @@
     width: 100%;
     display: block;
 
-        .icon-button {
-            margin-right: 1rem;
-        }
-
-        button {
-            border-radius: .5rem;
-        }
-
     .desc {
       font-size: .9rem;
       color: #8795a1;
@@ -41,22 +33,6 @@
   }
 }
 
-.content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -.5rem; 
-
-    mat-form-field {
-        flex: 1 1 33%;
-        margin: 0 .5rem;
-    }
-}
-
-h1 {
-    font-size: 1.2rem;
-}
-
 .desc {
   width: 100%;
   display: block;
@@ -72,28 +48,13 @@ h1 {
 
     .row {
       display: flex;
-            margin-bottom: 0.5rem;
+      margin-bottom: .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;
+        font-size: .8rem;
-                margin-right: 0.5rem;
+        margin-right: .5rem;
       }
 
       .fill-space {
@@ -101,22 +62,11 @@ h1 {
       }
 
       .second {
-                font-size: 0.8rem;
+        font-size: .8rem;
         text-overflow: ellipsis;
         overflow: hidden;
         margin-left: 1rem;
       }
-
-            a {
-                &:hover {
-                    cursor: pointer;
-                    text-decoration: underline;
-                }
-            }
-        }
-
-        .side-section {
-            color: #8795a1;
     }
   }
 

console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.html

@@ -21,8 +21,6 @@
             <span *ngIf="item.changeDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
                 {{ item.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
             <span class="fill-space"></span>
-            <div class="icons">
-            </div>
         </div>
         <button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
             mat-icon-button>
@@ -48,8 +46,6 @@
             <span *ngIf="item.changeDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
                 {{ item.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
             <span class="fill-space"></span>
-            <div class="icons">
-            </div>
         </div>
         <button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
             mat-icon-button>

console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.scss

@@ -10,6 +10,7 @@
     justify-content: flex-end;
     align-items: center;
   }
+
   button {
     &.left-button {
       margin-right: 1rem;
@@ -44,7 +45,7 @@
     padding-right: 0;
     padding-bottom: 0;
     padding-left: 1rem;
-        border-radius: 0.5rem;
+    border-radius: .5rem;
     box-sizing: border-box;
     min-height: 166px;
 
@@ -63,10 +64,10 @@
       display: flex;
       flex-direction: column;
       min-height: 70px;
-            padding: 0.5rem 0;
+      padding: .5rem 0;
 
       .top {
-                font-size: 0.8rem;
+        font-size: .8rem;
         margin-bottom: 0;
         margin-top: .5rem;
         color: #8795a1;
@@ -75,15 +76,15 @@
       .name {
         margin-top: 1rem;
         font-size: 1.2rem;
-                margin-bottom: 0.5rem;
+        margin-bottom: .5rem;
       }
 
       .description {
-                font-size: 0.8rem;
+        font-size: .8rem;
       }
 
       .created {
-                font-size: 0.8rem;
+        font-size: .8rem;
         color: #8795a1;
       }
 
@@ -105,19 +106,6 @@
         flex: 1;
       }
 
-            .icons {
-                margin-top: 1rem;
-                transition: all 0.3s;
-                opacity: 0;
-
-                .icon {
-                    margin-right: 3px;
-                    font-size: 1.3rem;
-                    height: 1.4rem;
-                    color: #8795a1;
-                }
-            }
-
       span {
         margin: 2px 0;
       }
@@ -130,13 +118,9 @@
       bottom: 0;
       right: 0;
       margin: 0;
-            margin-bottom: 0.25rem;
+      margin-bottom: .25rem;
       color: #8795a1;
 
-            &:hover {
-                color: white;
-            }
-
       &.selected {
         opacity: 1;
       }
@@ -169,6 +153,10 @@
         opacity: 1;
       }
     }
+
+    @media only screen and (max-width: 450px) {
+      flex-basis: 100%;
+    }
   }
 
   .add-project-button {
@@ -180,7 +168,7 @@
     align-items: center;
     flex-direction: column;
     min-height: 166px;
-        border-radius: 0.5rem;
+    border-radius: .5rem;
     margin: 1rem;
     box-sizing: border-box;
 
@@ -204,6 +192,10 @@
         }
       }
     }
+
+    @media only screen and (max-width: 450px) {
+      flex-basis: 100%;
+    }
   }
 }
 

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

@@ -3,7 +3,7 @@
 </app-granted-project-grid>
 
 <div *ngIf="!grid" class="view-toggle">
-    <button (click)="grid = true" mat-icon-button>
+    <button class="icon-button" (click)="grid = true" mat-icon-button>
         <i matTooltip="show grid view" class="las la-th-large"></i>
     </button>
 </div>
@@ -36,7 +36,7 @@
         <div class="spinner-container" *ngIf="(loading$ | async) || (loading$ | async)">
             <mat-spinner diameter="50"></mat-spinner>
         </div>
-        <table class="background-style" mat-table [dataSource]="dataSource">
+        <table class="table background-style" mat-table [dataSource]="dataSource">
             <ng-container matColumnDef="select">
                 <th class="selection" mat-header-cell *matHeaderCellDef>
                     <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
@@ -87,10 +87,10 @@
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
-                [routerLink]="['/granted-projects', row.id]"></tr>
+                [routerLink]="['/granted-projects', row.projectId, 'grant', row.id]"></tr>
 
         </table>
-        <mat-paginator class="background-style" [length]="totalResult" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"
+        <mat-paginator class="paginator background-style" [length]="totalResult" [pageSize]="10"
-            (page)="changePage($event)"></mat-paginator>
+            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
     </div>
 </div>

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

@@ -1,22 +1,10 @@
 
-.content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -.5rem; 
-
-    mat-form-field {
-        flex: 1 1 33%;
-        margin: 0 .5rem;
-    }
-}
-
 .view-toggle {
   width: 100%;
   display: flex;
   justify-content: flex-end;
 
-    button {
+  .icon-button {
     display: block;
     border-radius: .5rem;
   }
@@ -29,10 +17,12 @@
   .col {
     display: flex;
     flex-direction: column;
+
     .desc {
       font-size: .8rem;
       color: #8795a1;
     }
+
     .count {
       font-size: 2rem;
     }
@@ -61,10 +51,13 @@
     justify-content: center;
   }
 
-    table, mat-paginator {
+  .table,
+  .paginator {
     width: 100%;
     background-color: #2d2e30;
-        td, th {
+
+    td,
+    th {
       &:first-child {
         padding-left: 0;
         padding-right: 1rem;
@@ -77,6 +70,7 @@
 
     .data-row {
       cursor: pointer;
+
       &:hover {
         background-color: #ffffff05;
       }

console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.scss

@@ -1,10 +1,12 @@
 @import '~@angular/material/theming';
 
 @mixin application-grid-theme($theme) {
+  /* stylelint-disable */
   $primary: map-get($theme, primary);
   $primary-dark: mat-color($primary, A900);
   $accent: map-get($theme, accent);
   $accent-color: mat-color($accent, 500);
+  /* stylelint-enable */
 
   .app-grid-header {
     display: flex;

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

@@ -8,7 +8,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"
@@ -34,7 +34,7 @@
             <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
 
-        <mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="25"
+        <mat-paginator class="paginator" #paginator [length]="dataSource.totalResult" [pageSize]="25"
             [pageSizeOptions]="[25, 50, 100, 250]">
         </mat-paginator>
     </div>

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

@@ -1,13 +1,14 @@
 
-
 .table-wrapper {
   overflow: auto;
 
-    table, mat-paginator {
+  .table,
+  .paginator {
     width: 100%;
     background-color: #2d2e30;
 
-        td, th {
+    td,
+    th {
       &:first-child {
         padding-left: 0;
         padding-right: 1rem;
@@ -20,6 +21,7 @@
 
     .data-row {
       cursor: pointer;
+
       &:hover {
         background-color: #ffffff05;
       }

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

@@ -82,8 +82,8 @@
                         description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
                         <app-user-grants [context]="userGrantContext" [projectId]="projectId"
                             [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
-                            [allowCreate]="project?.state == ProjectState.PROJECTSTATE_ACTIVE && (['user.grant.write'] | hasRole | async)"
+                            [allowCreate]="(['user.grant.write'] | hasRole) | async"
-                            [allowDelete]="project?.state == ProjectState.PROJECTSTATE_ACTIVE && (['user.grant.delete'] | hasRole | async)">
+                            [allowDelete]="(['user.grant.delete'] | hasRole) | async">
                         </app-user-grants>
                     </app-card>
                 </ng-template>

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

@@ -33,10 +33,6 @@
       margin-right: 1rem;
     }
 
-        button {
-            border-radius: .5rem;
-        }
-
     .desc {
       font-size: .9rem;
       color: #8795a1;
@@ -49,20 +45,6 @@
   }
 }
 
-.content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -.5rem; 
-
-    mat-form-field {
-        flex: 1 1 33%;
-        margin: 0 .5rem;
-    }
-}
-
-
-
 .side {
   .details {
     margin-bottom: 1rem;
@@ -71,51 +53,21 @@
 
     .row {
       display: flex;
-            margin-bottom: 0.5rem;
+      margin-bottom: .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;
+        font-size: .8rem;
-                margin-right: 0.5rem;
+        margin-right: .5rem;
-            }
-    
-            .fill-space {
-                flex: 1;
       }
 
       .second {
-                font-size: 0.8rem;
+        font-size: .8rem;
         text-overflow: ellipsis;
         overflow: hidden;
         margin-left: 1rem;
       }
-
-            a {
-                &:hover {
-                    cursor: pointer;
-                    text-decoration: underline;
-                }
-            }
-        }
-
-        .side-section {
-            color: #8795a1;
     }
   }
 

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

@@ -16,7 +16,7 @@
     </ng-template>
 
     <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>
@@ -74,7 +74,7 @@
             </tr>
         </table>
 
-        <mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]"
+        <mat-paginator class="paginator" #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]"
             [length]="dataSource.totalResult" (page)="loadGrantsPage($event.pageIndex, $event.pageSize)">
         </mat-paginator>
     </div>

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

@@ -5,11 +5,13 @@
 .table-wrapper {
   overflow: auto;
 
-    table, mat-paginator {
+  .table,
+  .paginator {
     width: 100%;
     background-color: #2d2e30;
 
-        td, th {
+    td,
+    th {
       padding: 0 1rem;
 
       &:first-child {

console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.html

@@ -24,8 +24,6 @@
                         item.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
             }}</span>
             <span class="fill-space"></span>
-            <div class="icons">
-            </div>
         </div>
         <button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
             mat-icon-button>
@@ -53,8 +51,6 @@
                         item.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
             }}</span>
             <span class="fill-space"></span>
-            <div class="icons">
-            </div>
         </div>
         <button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
             mat-icon-button>

console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.scss

@@ -10,6 +10,7 @@
     justify-content: flex-end;
     align-items: center;
   }
+
   button {
     &.left-button {
       margin-right: 1rem;
@@ -44,7 +45,7 @@
     padding-right: 0;
     padding-bottom: 0;
     padding-left: 1rem;
-        border-radius: 0.5rem;
+    border-radius: .5rem;
     box-sizing: border-box;
     min-height: 166px;
 
@@ -63,10 +64,10 @@
       display: flex;
       flex-direction: column;
       min-height: 70px;
-            padding: 0.5rem 0;
+      padding: .5rem 0;
 
       .top {
-                font-size: 0.8rem;
+        font-size: .8rem;
         margin-bottom: 0;
         margin-top: .5rem;
         color: #8795a1;
@@ -75,15 +76,15 @@
       .name {
         margin-top: 1rem;
         font-size: 1.2rem;
-                margin-bottom: 0.5rem;
+        margin-bottom: .5rem;
       }
 
       .description {
-                font-size: 0.8rem;
+        font-size: .8rem;
       }
 
       .created {
-                font-size: 0.8rem;
+        font-size: .8rem;
         color: #8795a1;
       }
 
@@ -105,19 +106,6 @@
         flex: 1;
       }
 
-            .icons {
-                margin-top: 1rem;
-                transition: all 0.3s;
-                opacity: 0;
-
-                .icon {
-                    margin-right: 3px;
-                    font-size: 1.3rem;
-                    height: 1.4rem;
-                    color: #8795a1;
-                }
-            }
-
       span {
         margin: 2px 0;
       }
@@ -130,7 +118,7 @@
       bottom: 0;
       right: 0;
       margin: 0;
-            margin-bottom: 0.25rem;
+      margin-bottom: .25rem;
       color: #8795a1;
 
       &.selected {
@@ -138,7 +126,6 @@
       }
     }
 
-
     &:hover {
       .edit-button {
         opacity: 1;
@@ -166,6 +153,10 @@
         opacity: 1;
       }
     }
+
+    @media only screen and (max-width: 450px) {
+      flex-basis: 100%;
+    }
   }
 
   .add-project-button {
@@ -177,7 +168,7 @@
     align-items: center;
     flex-direction: column;
     min-height: 166px;
-        border-radius: 0.5rem;
+    border-radius: .5rem;
     margin: 1rem;
     box-sizing: border-box;
 
@@ -201,6 +192,10 @@
         }
       }
     }
+
+    @media only screen and (max-width: 450px) {
+      flex-basis: 100%;
+    }
   }
 }
 

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

@@ -3,7 +3,7 @@
 </app-owned-project-grid>
 
 <div *ngIf="!grid" class="view-toggle">
-    <button (click)="grid = true" mat-icon-button>
+    <button (click)="grid = true" mat-icon-button class="icon-button">
         <i matTooltip="show grid view" class="las la-th-large"></i>
     </button>
 </div>
@@ -30,7 +30,7 @@
         <div class="spinner-container" *ngIf="(loading$ | async) || (loading$ | async)">
             <mat-spinner diameter="50"></mat-spinner>
         </div>
-        <table class="background-style" mat-table [dataSource]="dataSource">
+        <table class="table background-style" mat-table [dataSource]="dataSource">
             <ng-container matColumnDef="select">
                 <th class="selection" mat-header-cell *matHeaderCellDef>
                     <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
@@ -79,7 +79,7 @@
                 [routerLink]="['/projects', row.projectId]"></tr>
 
         </table>
-        <mat-paginator class="background-style" [length]="totalResult" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"
+        <mat-paginator class="paginator background-style" [length]="totalResult" [pageSize]="10"
-            (page)="changePage($event)"></mat-paginator>
+            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
     </div>
 </div>

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

@@ -7,24 +7,12 @@ h1 {
   margin-bottom: 2rem;
 }
 
-.content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -.5rem; 
-
-    mat-form-field {
-        flex: 1 1 33%;
-        margin: 0 .5rem;
-    }
-}
-
 .view-toggle {
   width: 100%;
   display: flex;
   justify-content: flex-end;
 
-    button {
+  .icon-button {
     display: block;
     border-radius: .5rem;
   }
@@ -37,10 +25,12 @@ h1 {
   .col {
     display: flex;
     flex-direction: column;
+
     .desc {
       font-size: .8rem;
       color: #8795a1;
     }
+
     .count {
       font-size: 2rem;
     }
@@ -73,10 +63,13 @@ h1 {
     justify-content: center;
   }
 
-    table, mat-paginator {
+  .table,
+  .paginator {
     width: 100%;
     background-color: #2d2e30;
-        td, th {
+
+    td,
+    th {
       &:first-child {
         padding-left: 0;
         padding-right: 1rem;
@@ -89,6 +82,7 @@ h1 {
 
     .data-row {
       cursor: pointer;
+
       &:hover {
         background-color: #ffffff05;
       }

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

@@ -1,15 +1,5 @@
-<div class="max-width-container">
+<app-detail-layout [backRouterLink]="[ '/projects', projectid]" title="{{ 'PROJECT.GRANT.DETAIL.TITLE' | translate }}"
-    <div class="container">
+    description="{{ 'PROJECT.GRANT.DETAIL.DESC' | translate }}">
-        <div class="left">
-            <a *ngIf="projectid" [routerLink]="[ '/projects', projectid]" mat-icon-button>
-                <mat-icon class="icon">arrow_back</mat-icon>
-            </a>
-        </div>
-        <div class="right">
-            <div class="head">
-                <h1>{{ 'PROJECT.GRANT.DETAIL.TITLE' | translate }}</h1>
-                <p class="desc">{{ 'PROJECT.GRANT.DETAIL.DESC' | translate }}</p>
-            </div>
     <div class="master-row">
         <div class="left-col">
             <div class="row">
@@ -27,8 +17,8 @@
         <span class="fill-space"></span>
 
         <div>
-                    <button mat-stroked-button color="warn"
+            <button mat-stroked-button color="warn" *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_ACTIVE"
-                        *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_ACTIVE" class="state-button"
+                class="state-button"
                 (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
             <button mat-stroked-button color="warn"
                 *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE" class="state-button"
@@ -36,7 +26,7 @@
         </div>
     </div>
 
-            <mat-form-field class="form-field" appearance="outline" *ngIf="grant && grant.roleKeysList">
+    <mat-form-field class="formfield" appearance="outline" *ngIf="grant && grant.roleKeysList">
         <mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
         <mat-select [(ngModel)]="grant.roleKeysList" multiple (selectionChange)="updateRoles($event)">
             <mat-option *ngFor="let role of memberRoleOptions" [value]="role.key">
@@ -47,12 +37,10 @@
 
     <div class="divider"></div>
 
-            <h1>{{ 'PROJECT.GRANT.DETAIL.MEMBERTITLE' | translate }}</h1>
+    <h1 class="h1">{{ 'PROJECT.GRANT.DETAIL.MEMBERTITLE' | translate }}</h1>
     <p class="desc">{{ 'PROJECT.GRANT.DETAIL.MEMBERDESC' | translate }}</p>
 
-            <app-project-grant-members *ngIf="this.projectid && this.grantid" [disabled]="isZitadel"
+    <app-project-grant-members *ngIf="this.projectid && this.grantid" [disabled]="isZitadel" [projectId]="projectid"
-                [projectId]="projectid" [grantId]="grantid" [type]="projectType">
+        [grantId]="grantid" [type]="projectType">
     </app-project-grant-members>
-        </div>
+</app-detail-layout>
-    </div>
-</div>

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

@@ -1,48 +1,3 @@
-.container {
-    display: flex;
-    padding-bottom: 3rem;
-
-    h1 {
-        font-size: 1.2rem;
-    }
-  
-    .desc {
-        display: block;
-        font-size: .9rem;
-        color: #8795a1;
-    }
-
-    .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 {
-                margin-top: 0.2rem;
-                font-size: 2rem;
-            }
-        }
 
 .master-row {
   display: flex;
@@ -80,7 +35,7 @@
   }
 }
 
-        mat-form-field {
+.formfield {
   width: 100%;
 }
 
@@ -88,5 +43,3 @@
   height: 1px;
   background-color: #ffffff20;
 }
-    }
-}

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.ts

@@ -73,7 +73,6 @@ export class ProjectGrantDetailComponent {
     public getRoleOptions(projectId: string): void {
         this.projectService.SearchProjectRoles(projectId, 100, 0).then(resp => {
             this.memberRoleOptions = resp.toObject().resultList;
-            console.log(resp.toObject());
         });
     }
 

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.module.ts

@@ -14,6 +14,7 @@ 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 { ProjectGrantDetailRoutingModule } from './project-grant-detail-routing.module';
 import { ProjectGrantDetailComponent } from './project-grant-detail.component';
@@ -41,6 +42,7 @@ import { ProjectGrantMembersModule } from './project-grant-members/project-grant
         FormsModule,
         TranslateModule,
         MatSelectModule,
+        DetailLayoutModule,
     ],
 })
 export class ProjectGrantDetailModule { }

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

@@ -7,10 +7,10 @@
   justify-content: flex-end;
 
   .ok-button {
-      margin-left: 0.5rem;
+    margin-left: .5rem;
   }
 
   button {
-      border-radius: 0.5rem;
+    border-radius: .5rem;
   }
 }