feat(console): org managers, refactor, bugfixes (#226)

* resourceowner header, i18n

* password policy validators, roles required field

* use angular pattern instead of custom validator

* user detail fixes, mfa qr code, add org

* use mgmt for mfa list

* fetch owned projects

* search project

* seperate owned from granted projects

* lint

* fix granted project grid

* refactor project detail

* disable zitadel apps

* refactor project contributors

* changed i18n

* hide meta nav

* mobile meta layout

* refactor contributor name

* refactor org contributors

* org i18n, org member detail view

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

@@ -1,8 +1,10 @@
 <div class="meta-wrapper">
-    <div class="main-content">
+    <div class="main-content" [ngClass]="{'hidden': (hidden)}">
         <ng-content></ng-content>
     </div>
-    <div class="meta">
+    <div class="meta" [ngClass]="{'hidden': hidden}">
+        <button (click)="hidden = !hidden" color="accent" class="hide" mat-icon-button><i
+                class="las la-arrow-right"></i></button>
         <ng-content class="meta-content" select="metainfo"></ng-content>
     </div>
 </div>

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

@@ -1,19 +1,27 @@
 .meta-wrapper {
 	display: flex;
-	height: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    transition: all .2s ease-in-out;
 
     .main-content {
 		display: relative;
 		width: 100%;
         overflow-y: auto;
+
+        &.hidden {
+            flex-basis: 100%;
+        }
     }
 
     .meta {
+        position: relative;
         flex: 1 0 300px;
+        background: linear-gradient(to bottom right, #4072b410 20%,transparent 50%);
+
 		@media only screen and (min-width: 1500px) {
 			flex-basis: 400px;
 		}
-		// overflow-y: auto;
         padding: 1rem;
         
         .meta-content {
@@ -21,13 +29,58 @@
             display: flex;
             flex-direction: column;
         }
+
+        &.hidden {
+            flex: 0 0 0 !important;
+            width: 0;
+            background: linear-gradient(to bottom right, #4072b450,transparent 50%);
+
+            .hide {
+                transform: rotate(180deg);
+                visibility: visible;
+                opacity: 1;
+            }
+        }
+
+        &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 50%;
+            border-left: 2px solid #4072b4;
+            -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#4072b4), to(#212224), color-stop(01, #212224)) 50 21;
+            border-image: -webkit-gradient(linear, left top, left bottom, from(#4072b4), to(#212224), color-stop(01, #212224)) 50 21;
+        }
+
+        .hide {
+            position: absolute;
+            left: -40px;
+            top: .5rem;
+            opacity: 0;
+            transition: all .3s ease-in-out;
+
+            i {
+                font-size: 1.5rem;
+            }
+
+            &:hover {
+                visibility: visible;
+            }
+        }
+
+        &:hover {
+            .hide {
+                opacity: 1;
+            }
+        }
     }
     
 
-	@media only screen and (max-width: 700px) {
-        flex-direction: column;
-        .main-content, .meta {
-            overflow-y: visible;
-        }
-    }
+	// @media only screen and (max-width: 700px) {
+    //     flex-direction: column;
+    //     .main-content, .meta {
+    //         overflow-y: visible;
+    //     }
+    // }
 }

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

@@ -1,4 +1,7 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
 import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
     selector: 'app-meta-layout',
@@ -6,4 +9,16 @@ import { Component } from '@angular/core';
     styleUrls: ['./meta-layout.component.scss'],
 })
 export class MetaLayoutComponent {
+
+    constructor(private breakpointObserver: BreakpointObserver) {
+        this.isSmallScreen$.subscribe(small => this.hidden = small);
+    }
+    public hidden: boolean = false;
+    public isSmallScreen$: Observable<boolean> = this.breakpointObserver
+        .observe('(max-width: 899px)')
+        .pipe(map(result => {
+            return result.matches;
+        }));
+
+
 }

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

@@ -1,5 +1,7 @@
+import { LayoutModule } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 
 import { MetaLayoutComponent } from './meta-layout.component';
 
@@ -9,6 +11,8 @@ import { MetaLayoutComponent } from './meta-layout.component';
     declarations: [MetaLayoutComponent],
     imports: [
         CommonModule,
+        MatButtonModule,
+        LayoutModule,
     ],
     exports: [MetaLayoutComponent],
 })