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

* add custom validator for redirect inputs

* change http pattern, i18n

* throw out deprecated usergrant functions

* remove deprecation service

* show docs in app detail

* reorder data promises

* show redirect desc in app detail

* custom validator

* grant search filters

* rm animations

* add validation to app detail

* user grant udpate

* rm grantid from update req

* fix project member guard

* fix hasrole directive

* show validation errors, i18n

* fix router link from org members

* navitem padding

* mobile layout

* policy grid mobile layout

* rm unused background

* lint

* add stylelinter add to pipeline

* update stylelint rules

* lint unknown rule

* disable enable rules

* lint

* table style lint

* table classes

* fix stylelinter rule, lint

* overflow fix member detail

* common detail page

* user create, password, project grant detail clnup

* move meta styles

* lint

* password policy indicator

* lint

* fix org create

* common component for complexity view

* lint

* user grant filter

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

Co-authored-by: Florian Forster <[email protected]>

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

Co-authored-by: Florian Forster <[email protected]>

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

Co-authored-by: Florian Forster <[email protected]>

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

Co-authored-by: Florian Forster <[email protected]>

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

Co-authored-by: Florian Forster <[email protected]>

Co-authored-by: Florian Forster <[email protected]>

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()"
-                    color="primary" [(ngModel)]="responsetype.checked" [disabled]="responsetype.disabled">
+                <mat-checkbox class="checkbox" *ngFor="let responsetype of oidcResponseTypes"
+                    (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"
-                        [value]="authmethod.type">
+                    <mat-radio-button class="radio-button" *ngFor="let authmethod of oidcAuthMethodType"
+                        [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"
-                        [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addUri($event, 'POSTREDIRECT')">
+                    <input [matChipInputFor]="chipPostRedirectList" [formControl]="postRedirectControl"
+                        [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

@@ -1,161 +1,148 @@
 h1 {
-    font-weight: 500;
-    font-size: 1.5rem;
+  font-weight: 500;
+  font-size: 1.5rem;
 }
 
 p.desc {
-    font-size: 14px;
-    color: #8795a1;
+  font-size: 14px;
+  color: #8795a1;
 }
 
 .proswitch {
-    margin-bottom: 2rem;
-    display: block;
+  margin-bottom: 2rem;
+  display: block;
 }
 
 .container {
-    padding: 4rem 4rem 2rem 4rem;
-    
-    mat-progress-bar {
-        margin-bottom: 1rem;
+  padding: 4rem 4rem 2rem 4rem;
+
+  .progress-bar {
+    margin-bottom: 1rem;
+  }
+
+  .abort-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2rem;
+
+    .abort {
+      font-size: 1.2rem;
+      margin-left: 2rem;
     }
 
-	.abort-container {
-		display: flex;
-		align-items: center;
-		margin-bottom: 2rem;
-
-		.abort {
-			font-size: 1.2rem;
-			margin-left: 2rem;
-		}
-
-		.abort-2 {
-			font-size: 1.2rem;
-			margin-left: 2rem;
-		}
-	}
+    .abort-2 {
+      font-size: 1.2rem;
+      margin-left: 2rem;
+      white-space: nowrap;
+    }
+  }
 }
 
 .margin-right {
-	margin-right: 0.5rem;
+  margin-right: .5rem;
 }
 
 .formfield {
-    width: 400px;
-    display: block;
+  width: 400px;
+  display: block;
 }
 
 .full-width {
-    width: 100%;
+  width: 100%;
 }
 
-mat-horizontal-stepper {
-    background: inherit !important;
-    margin: 0 -1.5rem;
+.stepper {
+  background: inherit !important;
+  margin: 0 -1.5rem;
 
-    .step-title {
-        font-size: 1.2rem;
-        color: #8795a1;
-    }
+  .step-title {
+    font-size: 1.2rem;
+    color: #8795a1;
+  }
 
-    mat-chip[color='white'] {
-        background-color: #fafafa;
-    }
+  .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 {
-    display: flex;
-    flex-direction: column;
-    
-    mat-radio-button {
-        margin: .5rem 0;
-    }
+.radio-group {
+  display: flex;
+  flex-direction: column;
+
+  .radio-button {
+    margin: .5rem 0;
+  }
 }
 
 .checkbox-container {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-    mat-checkbox {
-        margin: .5rem 0;
-    }
+  .checkbox {
+    margin: .5rem 0;
+  }
 }
 
 .row {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 
-    .left, .right{
-        margin-bottom: .5rem;
-        font-size: 14px;
-        color: #8795a1;
-    }
+  .left,
+  .right {
+    margin-bottom: .5rem;
+    font-size: 14px;
+    color: #8795a1;
+  }
 }
 
 .actions {
-    button[mat-stroked-button] {
-        float: left;
-        margin-top: 1rem;
-        border-radius: .5rem;
-    }
+  button[mat-stroked-button] {
+    float: left;
+    margin-top: 1rem;
+    border-radius: .5rem;
+  }
 
-    button[mat-raised-button] {
-        float: right;
-        margin-top: 1rem;
-        border-radius: .5rem;
-        padding: .5rem 1rem;
-        min-width: 100px;
-    }
+  button[mat-raised-button] {
+    float: right;
+    margin-top: 1rem;
+    border-radius: .5rem;
+    padding: .5rem 1rem;
+    min-width: 100px;
+  }
 }
 
 .dev {
-    .column {
-        display: flex;
-        flex-direction: column;
+  .content {
+    display: flex;
+    margin: 0 -.5rem;
+    flex-wrap: wrap;
 
-        .formfield {
-            width: 400px;
-            input {
-                font-size: 1.5rem;
-            }
+    .formfield {
+      flex: 1 0 40%;
+      margin: 0 .5rem;
 
-            &.autocomplete {
-                margin-top: 1rem;
-            }
-        }
-
-        .slider {
-            margin-top: 2rem;
-            margin-bottom: 1rem;
-            font-size: 0.8rem;
-        }
-
-        .access-token {
-            width: 400px;
-        }
+      &.full-width {
+        flex-basis: 80%;
+      }
     }
+  }
 
-    .content {
-        display: flex;
-        margin: 0 -.5rem;
-        flex-wrap: wrap;
-
-        mat-form-field {
-            flex: 1 0 40%;
-            margin: 0 .5rem;
-        }
-
-        .full-width {
-            flex-basis: 80%;
-        }
-    }
-
-    .continue-button {
-        margin-top: 3rem;
-        display: block;
-        padding: 0.5rem 4rem;
-        border-radius: 0.5rem;
-        float: right;
-    }
+  .continue-button {
+    margin-top: 3rem;
+    display: block;
+    padding: .5rem 4rem;
+    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') {
+                if (input) {
+                    input.value = '';
+                }
+            } else if (target === 'POSTREDIRECT' && this.redirectControl.valid) {
                 this.oidcApp.postLogoutRedirectUrisList.push(value);
+                if (input) {
+                    input.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

@@ -1,91 +1,110 @@
 .head {
-    display: flex;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #ffffff20;
+  flex-wrap: wrap;
+
+  a {
+    display: block;
+  }
+
+  h1 {
+    font-size: 1.2rem;
+    margin: 0 1rem;
+    margin-left: 2rem;
+    font-weight: normal;
+  }
+
+  .desc {
+    width: 100%;
+    display: block;
+    font-size: .9rem;
+    color: #8795a1;
+  }
+
+  .zitadel-warning {
+    font-size: 14px;
+    color: rgb(201, 51, 71);
+  }
+}
+
+.err-container {
+  color: rgb(201, 51, 71);
+  font-size: 14px;
+}
+
+.card-actions {
+  button {
+    border-radius: .5rem;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 0 -.5rem;
+
+  &.nowrap {
+    flex-wrap: nowrap;
+  }
+
+  &.center {
     align-items: center;
-    border-bottom: 1px solid #ffffff20;
-    flex-wrap: wrap;
-  
-    a {
-        display: block;
-    }
-  
-    h1 {
-      font-size: 1.2rem;
-      margin: 0 1rem;
-      margin-left: 2rem;
-      font-weight: normal;
-    }
-  
-    .desc {
-        width: 100%;
-        display: block;
-        font-size: .9rem;
-        color: #8795a1;
-    }
+  }
 
-    .zitadel-warning {
-        font-size: 14px;
-        color: rgb(201,51,71);
+  .formfield {
+    flex: 1 1 30%;
+    margin: 0 .5rem;
+
+    &.full-width {
+      flex-basis: 100%;
     }
   }
 
-  .err-container {
-      color: rgb(201,51,71);
-        font-size: 14px;
+  .step-description {
+    font-size: .9rem;
+    color: #8795a1;
+    flex-basis: 100%;
+    margin: 0 .5rem 1rem .5rem;
   }
 
-  .card-actions {
-      button {
-          border-radius: .5rem;
-      }
+  .error {
+    font-size: 13px;
+    color: #f44336;
+    margin: 0 .5rem 1.5rem .5rem;
   }
 
-  .content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -.5rem; 
-  
-    &.nowrap{
-      flex-wrap: nowrap;
-    }
-  
-    &.center {
-      align-items: center;
-    }
-  
-    mat-form-field {
-      flex: 1 1 30%;
-      margin: 0 .5rem;
-    }  
+  .docs-line {
+    flex-basis: 100%;
+    font-size: 14px;
+    color: #8795a1;
+    margin-top: 0;
+  }
 
-    .full-width {
-        flex-basis: 100%;
-    }
+  .toggle {
+    align-self: flex-start;
+    margin-bottom: 1rem;
+    margin-right: 1rem;
+    border-radius: .5rem;
 
-    .toggle {
-      align-self: flex-start;
-      margin-bottom: 1rem;
+    i {
       margin-right: 1rem;
-      border-radius: .5rem;
-
-      i {
-          margin-right: 1rem;
-      }
-    }
-    
-  }
-  
-  .btn-container {
-    display: flex;
-    justify-content: flex-end;
-    margin: 0 -.5rem;
-  
-    button {
-      border-radius: .5rem;
-      margin: 0 .5rem;
     }
   }
+}
 
-  mat-chip[color='green'] {
-      background-color: #56a392 !important;
-  }
+.btn-container {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 -.5rem;
+
+  .submit-button {
+    border-radius: .5rem;
+    margin: 0 .5rem;
+  }
+}
+
+.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

@@ -1,37 +1,37 @@
 .title {
-    font-size: 1.2rem;
-  }
-  
-  .desc {
-      color: #8795a1;
-      font-size: .9rem;
+  font-size: 1.2rem;
+}
+
+.desc {
+  color: #8795a1;
+  font-size: .9rem;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.action {
+  display: flex;
+  justify-content: flex-end;
+
+  .ok-button {
+    margin-left: .5rem;
   }
 
- .full-width {
-     width: 100%;
- }
-  
-  .action {
-    display: flex;
-    justify-content: flex-end;
-  
-    .ok-button {
-      margin-left: 0.5rem;
-    }
-  
-    button {
-      border-radius: 0.5rem;
-    }
+  button {
+    border-radius: .5rem;
   }
+}
 
-  .flex {
-      display: flex;
-      align-items: center;
-      padding: .5rem;
-      border: 1px solid #ffffff20;
-      border-radius: .5rem;
+.flex {
+  display: flex;
+  align-items: center;
+  padding: .5rem;
+  border: 1px solid #ffffff20;
+  border-radius: .5rem;
 
-        .secret {
-        overflow: auto;
-        }
-  }
+  .secret {
+    overflow: auto;
+  }
+}

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

@@ -1,131 +1,81 @@
 .head {
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid #ffffff20;
-    flex-wrap: wrap;
-    margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #ffffff20;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
 
-    a {
-        display: block;
-    }
+  a {
+    display: block;
+  }
 
-    h1 {
-        font-size: 1.2rem;
-        margin: 0 1rem;
-        margin-left: 2rem;
-        font-weight: normal;
-    }
-
-    .full-width {
-        padding-top: 1rem;
-        width: 100%;
-        display: block;
-
-        .icon-button {
-            margin-right: 1rem;
-        }
-
-        button {
-            border-radius: .5rem;
-        }
-
-        .desc {
-            font-size: .9rem;
-            color: #8795a1;
-        }
-
-        .zitadel-warning {
-            font-size: 14px;
-            color: rgb(201,51,71);
-        }
-    }
-}
-
-.content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -.5rem; 
-
-    mat-form-field {
-        flex: 1 1 33%;
-        margin: 0 .5rem;
-    }
-}
-
-h1 {
+  .h1 {
     font-size: 1.2rem;
+    margin: 0 1rem;
+    margin-left: 2rem;
+    font-weight: normal;
+  }
+
+  .full-width {
+    padding-top: 1rem;
+    width: 100%;
+    display: block;
+
+    .desc {
+      font-size: .9rem;
+      color: #8795a1;
+    }
+
+    .zitadel-warning {
+      font-size: 14px;
+      color: rgb(201, 51, 71);
+    }
+  }
 }
 
 .desc {
-    width: 100%;
-    display: block;
-    font-size: .9rem;
-    color: #8795a1;
+  width: 100%;
+  display: block;
+  font-size: .9rem;
+  color: #8795a1;
 }
 
 .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;
-            }
+  .details {
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #81868a40;
+    padding-bottom: 1rem;
 
-            a {
-                &:hover {
-                    cursor: pointer;
-                    text-decoration: underline;
-                }
-            }
-        }
+    .row {
+      display: flex;
+      margin-bottom: .5rem;
+      align-items: center;
 
-        .side-section {
-            color: #8795a1;
-        }
-    } 
+      .first {
+        flex: 1;
+        font-size: .8rem;
+        margin-right: .5rem;
+      }
 
-    .mat-tab-label {
-        min-width: 100px !important;
+      .fill-space {
+        flex: 1;
+      }
+
+      .second {
+        font-size: .8rem;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        margin-left: 1rem;
+      }
     }
+  }
 
-    .flex-col {
-        display: flex;
-        flex-direction: column;
-    }
-}
+  .mat-tab-label {
+    min-width: 100px !important;
+  }
+
+  .flex-col {
+    display: flex;
+    flex-direction: column;
+  }
+}

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

@@ -1,20 +1,21 @@
 .view-toggle {
-    width: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: .5rem;
+  border-bottom: 1px solid #2d2e30;
+
+  .anim-list {
     display: flex;
     justify-content: flex-end;
-    padding-bottom: .5rem;
-    border-bottom: 1px solid #2d2e30;
+    align-items: center;
+  }
 
-    .anim-list {
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-    }
-    button {
-        &.left-button {
-            margin-right: 1rem;
-        }
+  button {
+    &.left-button {
+      margin-right: 1rem;
     }
+  }
 }
 
 .spinner {
@@ -22,194 +23,185 @@
 }
 
 .container {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -1rem;
+  box-sizing: border-box;
+
+  h2 {
+    padding: 0 1rem;
+    flex-basis: 100%;
+  }
+
+  .item {
+    position: relative;
+    z-index: 100;
+    margin: 1rem;
+    flex-basis: 250px;
     display: flex;
-    flex-wrap: wrap;
-    margin: 0 -1rem;
+    text-decoration: none;
+    cursor: pointer;
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: 1rem;
+    border-radius: .5rem;
+    box-sizing: border-box;
+    min-height: 166px;
+
+    &.inactive {
+      color: #8795a1;
+    }
+
+    img {
+      height: 50px;
+      width: 50px;
+      margin: 1rem;
+    }
+
+    .text-part {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 70px;
+      padding: .5rem 0;
+
+      .top {
+        font-size: .8rem;
+        margin-bottom: 0;
+        margin-top: .5rem;
+        color: #8795a1;
+      }
+
+      .name {
+        margin-top: 1rem;
+        font-size: 1.2rem;
+        margin-bottom: .5rem;
+      }
+
+      .description {
+        font-size: .8rem;
+      }
+
+      .created {
+        font-size: .8rem;
+        color: #8795a1;
+      }
+
+      .organization {
+        display: flex;
+        align-items: center;
+        margin-top: 1rem;
+
+        .org_avatar {
+          height: 25px;
+          width: 25px;
+          border-radius: 50%;
+          margin: 0;
+          margin-right: 1rem;
+        }
+      }
+
+      .fill-space {
+        flex: 1;
+      }
+
+      span {
+        margin: 2px 0;
+      }
+    }
+
+    .edit-button {
+      opacity: 0;
+      user-select: none;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      margin: 0;
+      margin-bottom: .25rem;
+      color: #8795a1;
+
+      &.selected {
+        opacity: 1;
+      }
+    }
+
+    &:hover {
+      .edit-button {
+        opacity: 1;
+      }
+
+      .text-part {
+        .icons {
+          opacity: 1;
+        }
+      }
+    }
+
+    &.selected {
+      .text-part {
+        .icons {
+          opacity: 1;
+        }
+      }
+
+      .edit-button {
+        opacity: 1;
+      }
+
+      .icon {
+        opacity: 1;
+      }
+    }
+
+    @media only screen and (max-width: 450px) {
+      flex-basis: 100%;
+    }
+  }
+
+  .add-project-button {
+    z-index: 100;
+    flex-basis: 250px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    min-height: 166px;
+    border-radius: .5rem;
+    margin: 1rem;
     box-sizing: border-box;
 
-    h2 {
-        padding: 0 1rem;
-        flex-basis: 100%;
+    .icon {
+      display: flex;
+      justify-content: center;
+      align-self: center;
+      margin-bottom: 1rem;
+      height: 2.5rem;
+      line-height: 2.5rem;
+      font-size: 2.5rem;
     }
 
-    .item {
-        position: relative;
-        z-index: 100;
-        margin: 1rem;
-        flex-basis: 250px;
-        display: flex;
-        text-decoration: none;
-        cursor: pointer;
-        padding-top: 0;
-        padding-right: 0;
-        padding-bottom: 0;
-        padding-left: 1rem;
-        border-radius: 0.5rem;
-        box-sizing: border-box;
-        min-height: 166px;
+    &:hover {
+      background-color: #ffffff25;
 
-        &.inactive {
-            color: #8795a1;
-        }
-
-        img {
-            height: 50px;
-            width: 50px;
-            margin: 1rem;
-        }
-
-        .text-part {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            min-height: 70px;
-            padding: 0.5rem 0;
-
-            .top {
-                font-size: 0.8rem;
-                margin-bottom: 0;
-                margin-top: .5rem;
-                color: #8795a1;
-            }
-
-            .name {
-                margin-top: 1rem;
-                font-size: 1.2rem;
-                margin-bottom: 0.5rem;
-            }
-
-            .description {
-                font-size: 0.8rem;
-            }
-
-            .created {
-                font-size: 0.8rem;
-                color: #8795a1;
-            }
-
-            .organization {
-                display: flex;
-                align-items: center;
-                margin-top: 1rem;
-
-                .org_avatar {
-                    height: 25px;
-                    width: 25px;
-                    border-radius: 50%;
-                    margin: 0;
-                    margin-right: 1rem;
-                }
-            }
-
-            .fill-space {
-                flex: 1;
-            }
-
-            .icons {
-                margin-top: 1rem;
-                transition: all 0.3s;
-                opacity: 0;
-
-                .icon {
-                    margin-right: 3px;
-                    font-size: 1.3rem;
-                    height: 1.4rem;
-                    color: #8795a1;
-                }
-            }
-
-            span {
-                margin: 2px 0;
-            }
-        }
-
-        .edit-button {
-            opacity: 0;
-            user-select: none;            
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            margin: 0;
-            margin-bottom: 0.25rem;
-            color: #8795a1;
-
-            &:hover {
-                color: white;
-            }
-
-            &.selected {
-                opacity: 1;
-            }
-        }
-
-        &:hover {
-            .edit-button {
-                opacity: 1;
-            }
-
-            .text-part {
-                .icons {
-                    opacity: 1;
-                }
-            }
-        }
-
-        &.selected {
-            .text-part {
-                .icons {
-                    opacity: 1;
-                }
-            }
-
-            .edit-button {
-                opacity: 1;
-            }
-
-            .icon {
-                opacity: 1;
-            }
+      .icon,
+      span {
+        &.disabled {
+          color: gray;
         }
+      }
     }
 
-    .add-project-button {
-        z-index: 100;
-        flex-basis: 250px;
-        cursor: pointer;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        min-height: 166px;
-        border-radius: 0.5rem;
-        margin: 1rem;
-        box-sizing: border-box;
-
-        .icon {
-            display: flex;
-            justify-content: center;
-            align-self: center;
-            margin-bottom: 1rem;
-            height: 2.5rem;
-            line-height: 2.5rem;
-            font-size: 2.5rem;
-        }
-
-        &:hover {
-            background-color: #ffffff25;
-
-            .icon,
-            span {
-                &.disabled {
-                    color: gray;
-                }
-            }
-        }
+    @media only screen and (max-width: 450px) {
+      flex-basis: 100%;
     }
+  }
 }
 
 .n-items {
-    flex-basis: 100%;
-    padding: 0 1rem;
-    font-size: .8rem;
-    color: #8795a1;
+  flex-basis: 100%;
+  padding: 0 1rem;
+  font-size: .8rem;
+  color: #8795a1;
 }

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]"
-            (page)="changePage($event)"></mat-paginator>
+        <mat-paginator class="paginator background-style" [length]="totalResult" [pageSize]="10"
+            [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,94 +1,88 @@
 
-.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;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
 
-    button {
-        display: block;
-        border-radius: .5rem;
-    }
+  .icon-button {
+    display: block;
+    border-radius: .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;
+  }
+
+  .action-btns {
     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;
-    }
-
-    .action-btns {
-        display: flex;
-        align-items: center;
-    }
-
-    .icon-button {
-        margin-right: .5rem;
-    }
+  .icon-button {
+    margin-right: .5rem;
+  }
 }
 
 .table-wrapper {
-    overflow: auto;
+  overflow: auto;
 
-    .spinner-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+  .spinner-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .table,
+  .paginator {
+    width: 100%;
+    background-color: #2d2e30;
+
+    td,
+    th {
+      &:first-child {
+        padding-left: 0;
+        padding-right: 1rem;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
     }
 
-    table, mat-paginator {
-        width: 100%;
-        background-color: #2d2e30;
-        td, th {
-            &:first-child {
-                padding-left: 0;
-                padding-right: 1rem;
-            }
+    .data-row {
+      cursor: pointer;
 
-            &:last-child {
-                padding-right: 0;
-            }
-        }
-
-        .data-row {
-            cursor: pointer;
-            &:hover {
-                background-color: #ffffff05;
-            }
-        }
-
-        .selection {
-            width: 50px;
-            max-width: 50px;
-          }
+      &:hover {
+        background-color: #ffffff05;
+      }
     }
+
+    .selection {
+      width: 50px;
+      max-width: 50px;
+    }
+  }
 }
 
 tr {
-    outline: none;
-}
+  outline: none;
+}

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

@@ -1,12 +1,12 @@
 h1 {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .sub {
-    color: #8795a1;
-    margin-bottom: 2rem;
+  color: #8795a1;
+  margin-bottom: 2rem;
 }
 
 .max-width-container {
-    padding-bottom: 3rem;
-}
+  padding-bottom: 3rem;
+}

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

@@ -1,78 +1,80 @@
 @import '~@angular/material/theming';
 
 @mixin application-grid-theme($theme) {
-    $primary: map-get($theme, primary);
-    $primary-dark: mat-color($primary, A900);
-    $accent: map-get($theme, accent);
-    $accent-color: mat-color($accent, 500);
+  /* 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 {
+  .app-grid-header {
+    display: flex;
+    align-items: center;
+
+    .fill-space {
+      flex: 1;
+    }
+  }
+
+  .app-container {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -1rem;
+    padding-bottom: 2rem;
+
+    .sp-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: calc(82px + 2rem);
+      height: calc(82px + 2rem);
+    }
+
+    .app-wrap {
+      outline: none;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      max-width: 150px;
+
+      .morph-card {
+        cursor: pointer;
+        animation: all .2s;
         display: flex;
+        justify-content: center;
         align-items: center;
+        font-size: 2rem;
+        height: 80px;
+        width: 80px;
+        margin: 1rem;
+        border-radius: .5rem;
+        border: 1px solid $accent-color;
+        font-weight: 800;
+        background-color: $primary-dark;
+        transition: background-color .2s ease-in-out;
+        background-image:
+          linear-gradient(transparent 11px, rgba($accent-color, .5) 12px, transparent 12px),
+          linear-gradient(90deg, transparent 11px, rgba($accent-color, .5) 12px, transparent 12px);
+        background-size: 100% 12px, 12px 100%;
 
-        .fill-space {
-            flex: 1;
+        &:hover {
+          background-color: rgba($accent-color, .2);
         }
+
+        &.add {
+          background: $accent-color;
+
+          &:hover {
+            background-color: rgba($accent-color, .8);
+          }
+        }
+      }
+
+      .name {
+        font-size: .8rem;
+        color: #8a868a;
+      }
     }
-
-    .app-container {
-        display: flex;
-        flex-wrap: wrap;
-        margin: 0 -1rem;
-        padding-bottom: 2rem;
-
-        .sp-container {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: calc(82px + 2rem);
-            height: calc(82px + 2rem);
-        }
-
-        .app-wrap {
-            outline: none;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            max-width: 150px;
-
-            .morph-card {
-                cursor: pointer;
-                animation: all .2s;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                font-size: 2rem;
-                height: 80px;
-                width: 80px;
-                margin: 1rem;
-                border-radius: .5rem;
-                border: 1px solid $accent-color;
-                font-weight: 800;
-                background-color: $primary-dark;
-                transition: background-color .2s ease-in-out;
-                background-image: 
-                    linear-gradient(transparent 11px, rgba($accent-color,.5) 12px, transparent 12px),
-                    linear-gradient(90deg, transparent 11px, rgba($accent-color,.5) 12px, transparent 12px);
-                    background-size: 100% 12px, 12px 100%;
-
-                &:hover {
-                    background-color: rgba($accent-color,.2);
-                }
-
-                &.add {
-                    background: $accent-color;
-
-                    &:hover {
-                        background-color: rgba($accent-color,.8);
-                    }
-                }
-            }
-
-            .name {
-                font-size: .8rem;
-                color: #8a868a;
-            }
-        }
-    }
-}
+  }
+}

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,46 +1,48 @@
 
-
 .table-wrapper {
-    overflow: auto;
+  overflow: auto;
 
-    table, mat-paginator {
-        width: 100%;
-        background-color: #2d2e30;
+  .table,
+  .paginator {
+    width: 100%;
+    background-color: #2d2e30;
 
-        td, th {
-            &:first-child {
-                padding-left: 0;
-                padding-right: 1rem;
-            }
+    td,
+    th {
+      &:first-child {
+        padding-left: 0;
+        padding-right: 1rem;
+      }
 
-            &:last-child {
-                padding-right: 0;
-            }
-        }
-
-        .data-row {
-            cursor: pointer;
-            &:hover {
-                background-color: #ffffff05;
-            }
-        }
-
-        .selection {
-            width: 50px;
-            max-width: 50px;
-        }
-
-        .margin-neg {
-            margin-left: -1rem;
-        }
+      &:last-child {
+        padding-right: 0;
+      }
     }
+
+    .data-row {
+      cursor: pointer;
+
+      &:hover {
+        background-color: #ffffff05;
+      }
+    }
+
+    .selection {
+      width: 50px;
+      max-width: 50px;
+    }
+
+    .margin-neg {
+      margin-left: -1rem;
+    }
+  }
 }
 
 .pointer {
-    outline: none;
-    cursor: pointer;
+  outline: none;
+  cursor: pointer;
 }
 
 tr {
-    outline: none;
+  outline: none;
 }

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)"
-                            [allowDelete]="project?.state == ProjectState.PROJECTSTATE_ACTIVE && (['user.grant.delete'] | hasRole | async)">
+                            [allowCreate]="(['user.grant.write'] | 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

@@ -1,130 +1,82 @@
 .head {
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid #ffffff20;
-    flex-wrap: wrap;
-    margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #ffffff20;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
 
-    .fill-space {
-        flex: 1;
+  .fill-space {
+    flex: 1;
+  }
+
+  .state-button {
+    border-radius: .5rem;
+  }
+
+  a {
+    display: block;
+  }
+
+  h1 {
+    font-size: 1.2rem;
+    margin: 0 1rem;
+    margin-left: 2rem;
+    font-weight: normal;
+  }
+
+  .full-width {
+    padding-top: 1rem;
+    width: 100%;
+    display: block;
+
+    .icon-button {
+      margin-right: 1rem;
     }
 
-    .state-button {
-        border-radius: .5rem;
+    .desc {
+      font-size: .9rem;
+      color: #8795a1;
     }
 
-    a {
-        display: block;
-    }
-
-    h1 {
-        font-size: 1.2rem;
-        margin: 0 1rem;
-        margin-left: 2rem;
-        font-weight: normal;
-    }
-
-    .full-width {
-        padding-top: 1rem;
-        width: 100%;
-        display: block;
-
-        .icon-button {
-            margin-right: 1rem;
-        }
-
-        button {
-            border-radius: .5rem;
-        }
-
-        .desc {
-            font-size: .9rem;
-            color: #8795a1;
-        }
-
-        .zitadel-warning {
-            font-size: 14px;
-            color: rgb(201,51,71);
-        }
+    .zitadel-warning {
+      font-size: 14px;
+      color: rgb(201, 51, 71);
     }
+  }
 }
 
-.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;
-        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;
-            }
+  .details {
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #81868a40;
+    padding-bottom: 1rem;
 
-            a {
-                &:hover {
-                    cursor: pointer;
-                    text-decoration: underline;
-                }
-            }
-        }
+    .row {
+      display: flex;
+      margin-bottom: .5rem;
+      align-items: center;
 
-        .side-section {
-            color: #8795a1;
-        }
-    } 
+      .first {
+        flex: 1;
+        font-size: .8rem;
+        margin-right: .5rem;
+      }
 
-    .mat-tab-label {
-        min-width: 100px !important;
+      .second {
+        font-size: .8rem;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        margin-left: 1rem;
+      }
     }
+  }
 
-    .flex-col {
-        display: flex;
-        flex-direction: column;
-    }
-}
+  .mat-tab-label {
+    min-width: 100px !important;
+  }
+
+  .flex-col {
+    display: flex;
+    flex-direction: column;
+  }
+}

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

@@ -1,55 +1,57 @@
 .rounded-button {
-    border-radius: .5rem;
+  border-radius: .5rem;
 }
 
 .table-wrapper {
-    overflow: auto;
+  overflow: auto;
 
-    table, mat-paginator {
-        width: 100%;
-        background-color: #2d2e30;
+  .table,
+  .paginator {
+    width: 100%;
+    background-color: #2d2e30;
 
-        td, th {
-            padding: 0 1rem; 
+    td,
+    th {
+      padding: 0 1rem;
 
-            &:first-child {
-                padding-left: 0;
-                padding-right: 1rem;
-            }
+      &:first-child {
+        padding-left: 0;
+        padding-right: 1rem;
+      }
 
-            &:last-child {
-                padding-right: 0;
-            }
+      &:last-child {
+        padding-right: 0;
+      }
 
-            .role {
-                display: inline-block;
-                border-radius: .5rem;
-                border: 1px solid #ffffff30;
-                padding: .5rem 1rem;
-                margin-top: .25rem;
-                margin-bottom: .25rem;
-                margin-left: 0;
-                margin-right: .5rem;
-                cursor: pointer;
-            }
-        }
-
-        tr {
-            outline: none;
-        }
-
-        tr.detail-row {
-            height: 0;
-        }
-
-        .selection {
-            width: 50px;
-            max-width: 50px;
-        }
+      .role {
+        display: inline-block;
+        border-radius: .5rem;
+        border: 1px solid #ffffff30;
+        padding: .5rem 1rem;
+        margin-top: .25rem;
+        margin-bottom: .25rem;
+        margin-left: 0;
+        margin-right: .5rem;
+        cursor: pointer;
+      }
     }
+
+    tr {
+      outline: none;
+    }
+
+    tr.detail-row {
+      height: 0;
+    }
+
+    .selection {
+      width: 50px;
+      max-width: 50px;
+    }
+  }
 }
 
 .pointer {
-    outline: none;
-    cursor: pointer;
-}
+  outline: none;
+  cursor: pointer;
+}

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

@@ -1,20 +1,21 @@
 .view-toggle {
-    width: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: .5rem;
+  border-bottom: 1px solid #2d2e30;
+
+  .anim-list {
     display: flex;
     justify-content: flex-end;
-    padding-bottom: .5rem;
-    border-bottom: 1px solid #2d2e30;
+    align-items: center;
+  }
 
-    .anim-list {
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-    }
-    button {
-        &.left-button {
-            margin-right: 1rem;
-        }
+  button {
+    &.left-button {
+      margin-right: 1rem;
     }
+  }
 }
 
 .spinner {
@@ -22,191 +23,185 @@
 }
 
 .container {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -1rem;
+  box-sizing: border-box;
+
+  h2 {
+    padding: 0 1rem;
+    flex-basis: 100%;
+  }
+
+  .item {
+    position: relative;
+    z-index: 100;
+    margin: 1rem;
+    flex-basis: 250px;
     display: flex;
-    flex-wrap: wrap;
-    margin: 0 -1rem;
+    text-decoration: none;
+    cursor: pointer;
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: 1rem;
+    border-radius: .5rem;
+    box-sizing: border-box;
+    min-height: 166px;
+
+    &.inactive {
+      color: #8795a1;
+    }
+
+    img {
+      height: 50px;
+      width: 50px;
+      margin: 1rem;
+    }
+
+    .text-part {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 70px;
+      padding: .5rem 0;
+
+      .top {
+        font-size: .8rem;
+        margin-bottom: 0;
+        margin-top: .5rem;
+        color: #8795a1;
+      }
+
+      .name {
+        margin-top: 1rem;
+        font-size: 1.2rem;
+        margin-bottom: .5rem;
+      }
+
+      .description {
+        font-size: .8rem;
+      }
+
+      .created {
+        font-size: .8rem;
+        color: #8795a1;
+      }
+
+      .organization {
+        display: flex;
+        align-items: center;
+        margin-top: 1rem;
+
+        .org_avatar {
+          height: 25px;
+          width: 25px;
+          border-radius: 50%;
+          margin: 0;
+          margin-right: 1rem;
+        }
+      }
+
+      .fill-space {
+        flex: 1;
+      }
+
+      span {
+        margin: 2px 0;
+      }
+    }
+
+    .edit-button {
+      opacity: 0;
+      user-select: none;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      margin: 0;
+      margin-bottom: .25rem;
+      color: #8795a1;
+
+      &.selected {
+        opacity: 1;
+      }
+    }
+
+    &:hover {
+      .edit-button {
+        opacity: 1;
+      }
+
+      .text-part {
+        .icons {
+          opacity: 1;
+        }
+      }
+    }
+
+    &.selected {
+      .text-part {
+        .icons {
+          opacity: 1;
+        }
+      }
+
+      .edit-button {
+        opacity: 1;
+      }
+
+      .icon {
+        opacity: 1;
+      }
+    }
+
+    @media only screen and (max-width: 450px) {
+      flex-basis: 100%;
+    }
+  }
+
+  .add-project-button {
+    z-index: 100;
+    flex-basis: 250px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    min-height: 166px;
+    border-radius: .5rem;
+    margin: 1rem;
     box-sizing: border-box;
 
-    h2 {
-        padding: 0 1rem;
-        flex-basis: 100%;
+    .icon {
+      display: flex;
+      justify-content: center;
+      align-self: center;
+      margin-bottom: 1rem;
+      height: 2.5rem;
+      line-height: 2.5rem;
+      font-size: 2.5rem;
     }
 
-    .item {
-        position: relative;
-        z-index: 100;
-        margin: 1rem;
-        flex-basis: 250px;
-        display: flex;
-        text-decoration: none;
-        cursor: pointer;
-        padding-top: 0;
-        padding-right: 0;
-        padding-bottom: 0;
-        padding-left: 1rem;
-        border-radius: 0.5rem;
-        box-sizing: border-box;
-        min-height: 166px;
+    &:hover {
+      background-color: #ffffff25;
 
-        &.inactive {
-            color: #8795a1;
-        }
-
-        img {
-            height: 50px;
-            width: 50px;
-            margin: 1rem;
-        }
-
-        .text-part {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            min-height: 70px;
-            padding: 0.5rem 0;
-
-            .top {
-                font-size: 0.8rem;
-                margin-bottom: 0;
-                margin-top: .5rem;
-                color: #8795a1;
-            }
-
-            .name {
-                margin-top: 1rem;
-                font-size: 1.2rem;
-                margin-bottom: 0.5rem;
-            }
-
-            .description {
-                font-size: 0.8rem;
-            }
-
-            .created {
-                font-size: 0.8rem;
-                color: #8795a1;
-            }
-
-            .organization {
-                display: flex;
-                align-items: center;
-                margin-top: 1rem;
-
-                .org_avatar {
-                    height: 25px;
-                    width: 25px;
-                    border-radius: 50%;
-                    margin: 0;
-                    margin-right: 1rem;
-                }
-            }
-
-            .fill-space {
-                flex: 1;
-            }
-
-            .icons {
-                margin-top: 1rem;
-                transition: all 0.3s;
-                opacity: 0;
-
-                .icon {
-                    margin-right: 3px;
-                    font-size: 1.3rem;
-                    height: 1.4rem;
-                    color: #8795a1;
-                }
-            }
-
-            span {
-                margin: 2px 0;
-            }
-        }
-
-        .edit-button {
-            opacity: 0;
-            user-select: none;            
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            margin: 0;
-            margin-bottom: 0.25rem;
-            color: #8795a1;
-
-            &.selected {
-                opacity: 1;
-            }
-        }
-
-
-        &:hover {
-            .edit-button {
-                opacity: 1;
-            }
-
-            .text-part {
-                .icons {
-                    opacity: 1;
-                }
-            }
-        }
-
-        &.selected {
-            .text-part {
-                .icons {
-                    opacity: 1;
-                }
-            }
-
-            .edit-button {
-                opacity: 1;
-            }
-
-            .icon {
-                opacity: 1;
-            }
+      .icon,
+      span {
+        &.disabled {
+          color: gray;
         }
+      }
     }
 
-    .add-project-button {
-        z-index: 100;
-        flex-basis: 250px;
-        cursor: pointer;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        min-height: 166px;
-        border-radius: 0.5rem;
-        margin: 1rem;
-        box-sizing: border-box;
-
-        .icon {
-            display: flex;
-            justify-content: center;
-            align-self: center;
-            margin-bottom: 1rem;
-            height: 2.5rem;
-            line-height: 2.5rem;
-            font-size: 2.5rem;
-        }
-
-        &:hover {
-            background-color: #ffffff25;
-
-            .icon,
-            span {
-                &.disabled {
-                    color: gray;
-                }
-            }
-        }
+    @media only screen and (max-width: 450px) {
+      flex-basis: 100%;
     }
+  }
 }
 
 .n-items {
-    padding: 0 1rem;
-    font-size: .8rem;
-    color: #8795a1;
-    flex-basis: 100%;
-}
+  padding: 0 1rem;
+  font-size: .8rem;
+  color: #8795a1;
+  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]"
-            (page)="changePage($event)"></mat-paginator>
+        <mat-paginator class="paginator background-style" [length]="totalResult" [pageSize]="10"
+            [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

@@ -1,106 +1,100 @@
 h1 {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .sub {
-    color: #8795a1;
-    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;
-    }
+  color: #8795a1;
+  margin-bottom: 2rem;
 }
 
 .view-toggle {
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
 
-    button {
-        display: block;
-        border-radius: .5rem;
-    }
+  .icon-button {
+    display: block;
+    border-radius: .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;
+  }
+
+  .action-btns {
     display: flex;
     align-items: center;
+  }
 
-    .col {
-        display: flex;
-        flex-direction: column;
-        .desc {
-            font-size: .8rem;
-            color: #8795a1;
-        }
-        .count {
-            font-size: 2rem;
-        }
-    }
+  .icon-button {
+    margin-right: .5rem;
+  }
 
-    .fill-space {
-        flex: 1;
-    }
-
-    .action-btns {
-        display: flex;
-        align-items: center;
-    }
-
-    .icon-button {
-        margin-right: .5rem;
-    }
-
-    .add-button {
-        border-radius: .5rem;
-    }
+  .add-button {
+    border-radius: .5rem;
+  }
 }
 
 .table-wrapper {
-    overflow: auto;
+  overflow: auto;
 
-    .spinner-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+  .spinner-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .table,
+  .paginator {
+    width: 100%;
+    background-color: #2d2e30;
+
+    td,
+    th {
+      &:first-child {
+        padding-left: 0;
+        padding-right: 1rem;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
     }
 
-    table, mat-paginator {
-        width: 100%;
-        background-color: #2d2e30;
-        td, th {
-            &:first-child {
-                padding-left: 0;
-                padding-right: 1rem;
-            }
+    .data-row {
+      cursor: pointer;
 
-            &:last-child {
-                padding-right: 0;
-            }
-        }
-
-        .data-row {
-            cursor: pointer;
-            &:hover {
-                background-color: #ffffff05;
-            }
-        }
-
-        .selection {
-            width: 50px;
-            max-width: 50px;
-          }
+      &:hover {
+        background-color: #ffffff05;
+      }
     }
+
+    .selection {
+      width: 50px;
+      max-width: 50px;
+    }
+  }
 }
 
 tr {
-    outline: none;
-}
+  outline: none;
+}

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

@@ -1,12 +1,12 @@
 h1 {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .sub {
-    color: #8795a1;
-    margin-bottom: 2rem;
+  color: #8795a1;
+  margin-bottom: 2rem;
 }
 
 .max-width-container {
-    padding-bottom: 3rem;
-}
+  padding-bottom: 3rem;
+}

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

@@ -1,58 +1,46 @@
-<div class="max-width-container">
-    <div class="container">
-        <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">
-                        <span class="first">{{'PROJECT.GRANT.DETAIL.PROJECTNAME' | translate}}</span>
-                        <span class="fill-space"></span>
-                        <span>{{grant?.projectName}}</span>
-                    </div>
-                    <div class="row">
-                        <span class="first">{{'PROJECT.GRANT.DETAIL.RESOURCEOWNER' | translate}}</span>
-                        <span class="fill-space"></span>
-                        <span>{{grant?.resourceOwnerName}}</span>
-                    </div>
-                </div>
-
+<app-detail-layout [backRouterLink]="[ '/projects', projectid]" title="{{ 'PROJECT.GRANT.DETAIL.TITLE' | translate }}"
+    description="{{ 'PROJECT.GRANT.DETAIL.DESC' | translate }}">
+    <div class="master-row">
+        <div class="left-col">
+            <div class="row">
+                <span class="first">{{'PROJECT.GRANT.DETAIL.PROJECTNAME' | translate}}</span>
                 <span class="fill-space"></span>
-
-                <div>
-                    <button mat-stroked-button color="warn"
-                        *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_ACTIVE" class="state-button"
-                        (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
-                    <button mat-stroked-button color="warn"
-                        *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE" class="state-button"
-                        (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
-                </div>
+                <span>{{grant?.projectName}}</span>
             </div>
+            <div class="row">
+                <span class="first">{{'PROJECT.GRANT.DETAIL.RESOURCEOWNER' | translate}}</span>
+                <span class="fill-space"></span>
+                <span>{{grant?.resourceOwnerName}}</span>
+            </div>
+        </div>
 
-            <mat-form-field class="form-field" 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">
-                        {{role.key}}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
+        <span class="fill-space"></span>
 
-            <div class="divider"></div>
-
-            <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"
-                [projectId]="projectid" [grantId]="grantid" [type]="projectType">
-            </app-project-grant-members>
+        <div>
+            <button mat-stroked-button color="warn" *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_ACTIVE"
+                class="state-button"
+                (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
+            <button mat-stroked-button color="warn"
+                *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE" class="state-button"
+                (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
         </div>
     </div>
-</div>
+
+    <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">
+                {{role.key}}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+
+    <div class="divider"></div>
+
+    <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" [projectId]="projectid"
+        [grantId]="grantid" [type]="projectType">
+    </app-project-grant-members>
+</app-detail-layout>

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

@@ -1,92 +1,45 @@
-.container {
+
+.master-row {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+
+  .left-col {
+    flex: 1;
     display: flex;
-    padding-bottom: 3rem;
+    flex-direction: column;
+    margin-bottom: 2rem;
 
-    h1 {
-        font-size: 1.2rem;
-    }
-  
-    .desc {
-        display: block;
+    .row {
+      max-width: 400px;
+      display: flex;
+      align-items: center;
+      padding: .5rem 0;
+
+      span {
         font-size: .9rem;
+      }
+
+      .first {
         color: #8795a1;
+      }
     }
+  }
 
-    .left {
-        width: 100px;
-        display: flex;
-        padding: 1rem;
-        justify-content: center;
+  .fill-space {
+    flex: 1;
+  }
 
-        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;
-            flex-wrap: wrap;
-            width: 100%;
-
-            .left-col {
-                flex: 1;
-                display: flex;
-                flex-direction: column;
-                margin-bottom: 2rem;
-    
-                .row {
-                    max-width: 400px;
-                    display: flex;
-                    align-items: center;
-                    padding: .5rem 0;
-    
-                    span {
-                        font-size: .9rem;
-                    }
-    
-                    .first {
-                        color: #8795a1;
-                    }
-                }
-            }
-
-            .fill-space {
-                flex: 1;
-            }
-
-            .state-button {
-                border-radius: .5rem;
-            }
-        }
-        
-        mat-form-field {
-            width: 100%;
-        }
-
-        .divider {
-            height: 1px; 
-            background-color: #ffffff20;
-        }
-    }
+  .state-button {
+    border-radius: .5rem;
+  }
+}
+
+.formfield {
+  width: 100%;
+}
+
+.divider {
+  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

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

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

@@ -24,7 +24,7 @@
     <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
         <mat-spinner diameter="50"></mat-spinner>
     </div>
-    <table mat-table class="full-width-table" aria-label="Elements"
+    <table mat-table class="table" aria-label="Elements"
         [ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" [dataSource]="dataSource">
         <ng-container matColumnDef="select">
             <th class="selection" mat-header-cell *matHeaderCellDef>
@@ -85,7 +85,7 @@
         </tr>
     </table>
 
-    <mat-paginator [ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" #paginator [pageSize]="50"
-        [pageSizeOptions]="[25, 50, 100, 250]">
+    <mat-paginator class="paginator" [ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" #paginator
+        [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
     </mat-paginator>
 </div>

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

@@ -1,78 +1,83 @@
-    
+
 .table-header-row {
   display: flex;
   align-items: center;
 
   .col {
-      display: flex;
-      flex-direction: column;
-      .desc {
-          font-size: .8rem;
-          color: #8795a1;
-      }
-      .count {
-          font-size: 2rem;
-      }
+    display: flex;
+    flex-direction: column;
+
+    .desc {
+      font-size: .8rem;
+      color: #8795a1;
+    }
+
+    .count {
+      font-size: 2rem;
+    }
   }
 
   .fill-space {
-      flex: 1;
+    flex: 1;
   }
 
   .icon-button {
-      margin-right: .5rem;
+    margin-right: .5rem;
   }
 
   .add-button {
-      border-radius: .5rem;
+    border-radius: .5rem;
   }
 }
 
 .table-wrapper {
-    overflow: auto;
-    
-    .spinner-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+  overflow: auto;
+
+  .spinner-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .table,
+  .paginator {
+    td,
+    th {
+      padding: .5rem;
+
+      &:first-child {
+        padding-left: 0;
+        padding-right: 1rem;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
     }
 
-    table, mat-paginator {
-        td, th {
-            padding: .5rem;
-            &:first-child {
-                padding-left: 0;
-                padding-right: 1rem;
-            }
-
-            &:last-child {
-                padding-right: 0;
-            }
-        }
-
-        .action {
-            width: 40px;
-        }
-
-        .data-row {
-            &:hover {
-                background-color: #ffffff05;
-            }
-        }
-
-        .selection {
-            width: 50px;
-            max-width: 50px;
-        }
-
-        .role {
-            display: inline-block;
-            margin: .25rem;
-        }
+    .action {
+      width: 40px;
     }
+
+    .data-row {
+      &:hover {
+        background-color: #ffffff05;
+      }
+    }
+
+    .selection {
+      width: 50px;
+      max-width: 50px;
+    }
+
+    .role {
+      display: inline-block;
+      margin: .25rem;
+    }
+  }
 }
 
 .pointer {
-    outline: none;
-    cursor: pointer;
-}
+  outline: none;
+  cursor: pointer;
+}

console/src/app/pages/projects/project-create/project-create-routing.module.ts

@@ -7,7 +7,7 @@ const routes: Routes = [
     {
         path: '',
         component: ProjectCreateComponent,
-        data: { animation: 'DetailPage' },
+        data: { animation: 'AddPage' },
     },
 ];
 

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

@@ -1,61 +1,66 @@
 h1 {
-    font-weight: 500;
+  font-weight: 500;
 }
 
 .container {
-	padding: 4rem 4rem 2rem 4rem;
+  padding: 4rem 4rem 2rem 4rem;
 
-	.abort-container {
-		display: flex;
-		align-items: center;
-		margin-bottom: 2rem;
+  @media only screen and (max-width: 450px) {
+    padding: 4rem 1rem 2rem 1rem;
+  }
 
-		.abort {
-			font-size: 1.2rem;
-			margin-left: 2rem;
-		}
+  .abort-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2rem;
 
-		.abort-2 {
-			font-size: 1.2rem;
-			margin-left: 2rem;
-		}
-	}
+    .abort {
+      font-size: 1.2rem;
+      margin-left: 2rem;
+    }
+
+    .abort-2 {
+      font-size: 1.2rem;
+      margin-left: 2rem;
+      white-space: nowrap;
+    }
+  }
 }
 
 .margin-right {
-	margin-right: 0.5rem;
+  margin-right: .5rem;
 }
 
 .column {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-    .formfield {
-        width: 400px;
-        input {
-            font-size: 1.5rem;
-        }
+  .formfield {
+    width: 400px;
 
-        &.autocomplete {
-            margin-top: 1rem;
-        }
+    input {
+      font-size: 1.5rem;
     }
 
-    .slider {
-        margin-top: 2rem;
-        margin-bottom: 1rem;
-        font-size: 0.8rem;
+    &.autocomplete {
+      margin-top: 1rem;
     }
+  }
 
-    .access-token {
-        width: 400px;
-    }
+  .slider {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-size: .8rem;
+  }
+
+  .access-token {
+    width: 400px;
+  }
 }
 
 .continue-button {
-    margin-top: 3rem;
-    display: block;
-    padding: 0.5rem 4rem;
-    border-radius: 0.5rem;
+  margin-top: 3rem;
+  display: block;
+  padding: .5rem 4rem;
+  border-radius: .5rem;
 }
-

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

@@ -1,108 +1,54 @@
 .container {
-	padding: 4rem 4rem 2rem 4rem;
+  padding: 4rem 4rem 2rem 4rem;
 
-	.abort-container {
-		display: flex;
-		align-items: center;
-        margin-bottom: 2rem;
-        white-space: nowrap;
+  @media only screen and (max-width: 450px) {
+    padding: 4rem 1rem 2rem 1rem;
+  }
 
-		.abort {
-			font-size: 1.2rem;
-			margin-left: 2rem;
-		}
+  .abort-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2rem;
+    white-space: nowrap;
 
-		.abort-2 {
-			font-size: 1.2rem;
-			margin-left: 2rem;
-		}
-	}
+    .abort {
+      font-size: 1.2rem;
+      margin-left: 2rem;
+    }
+
+    .abort-2 {
+      font-size: 1.2rem;
+      margin-left: 2rem;
+      white-space: nowrap;
+    }
+  }
 }
 
 .org-domain {
-    width: 400px;
-    margin-right: 1rem;
+  width: 400px;
+  margin-right: 1rem;
 }
 
 .domain-button {
-    margin-right: 1rem;
-    margin-bottom: 1rem;
-    border-radius: .5rem;
-}
-
-.org {
-    height: 120px;
-    padding: 1rem;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-
-    .name {
-        margin-top: 0;
-        font-size: 1rem;
-        margin-bottom: 1rem;
-    }
-
-    span {
-        font-size: .8rem;
-    }
-}
-
-.margin-right {
-	margin-right: 0.5rem;
-}
-
-.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 {
-        flex: 1 0 40%;
-        margin: 0 .5rem;
-    }
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+  border-radius: .5rem;
 }
 
 .btn-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 3rem;
 
-    .small-button {
-        display: block;
-        border-radius: 0.5rem;
-    }
+  .small-button {
+    display: block;
+    border-radius: .5rem;
+  }
 
-    .big-button {
-        display: block;
-        padding: 0.5rem 4rem;
-        border-radius: 0.5rem;
-    }
+  .big-button {
+    display: block;
+    padding: .5rem 4rem;
+    border-radius: .5rem;
+  }
 }

console/src/app/pages/projects/project-role-create/project-role-create.component.html

@@ -27,7 +27,7 @@
                     <mat-label>{{ 'PROJECT.ROLE.GROUP' | translate }}</mat-label>
                     <input matInput formControlName="group" />
                 </mat-form-field>
-                <button mat-icon-button (click)="removeEntry(i)" type="button" color="warn"
+                <button *ngIf="i !== 0" mat-icon-button (click)="removeEntry(i)" type="button" color="warn"
                     matTooltip="{{ 'ACTIONS.REMOVE' | translate }}">
                     <i class="las la-trash"></i>
                 </button>

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

@@ -1,47 +1,59 @@
 
 .container {
-	padding: 4rem 4rem 2rem 4rem;
+  padding: 4rem 4rem 2rem 4rem;
 
-	.abort-container {
-		display: flex;
-		align-items: center;
-		margin-bottom: 2rem;
+  @media only screen and (max-width: 450px) {
+    padding: 4rem 1rem 2rem 1rem;
+  }
 
-		.abort {
-			font-size: 1.2rem;
-			margin-left: 2rem;
-		}
+  .abort-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2rem;
 
-		.abort-2 {
-			font-size: 1.2rem;
-			margin-left: 2rem;
-		}
+    .abort {
+      font-size: 1.2rem;
+      margin-left: 2rem;
     }
-    
-    .add-line-btn {
-        margin-bottom: 1rem;
-        border-radius: .5rem;
-    }
-}
 
-.margin-right {
-	margin-right: 0.5rem;
+    .abort-2 {
+      font-size: 1.2rem;
+      margin-left: 2rem;
+      white-space: nowrap;
+    }
+  }
+
+  .add-line-btn {
+    margin-bottom: 1rem;
+    border-radius: .5rem;
+  }
 }
 
 .content {
-    display: flex;
-    margin: 0 -.5rem;
-    flex-wrap: wrap;
-    // align-items: center;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  margin: 0 -.5rem;
+  flex-wrap: wrap;
+  border-bottom: 1px solid #ffffff20;
 
-    mat-form-field {
-        margin: 0 .5rem;
+  .formfield {
+    margin: 0 .5rem;
+
+    @media only screen and (max-width: 450px) {
+      flex-basis: 100%;
     }
+  }
 }
 
 .continue-button {
-    margin-top: 3rem;
-    display: block;
-    padding: 0.5rem 4rem;
-    border-radius: 0.5rem;
+  margin-top: 3rem;
+  display: block;
+  padding: .5rem 4rem;
+  border-radius: .5rem;
+
+  @media only screen and (max-width: 450px) {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+  }
 }