fix(console): hide granted project navigation if none, cache zitadel permissions, emit refresh on org change, cleanup contributors, styling (#511)

* fix iam member model

* fix org member model

* fix auth user loading

* copytoclipboard directive

* directive logs, load bar on init, create user

* typo

* welcome section, contributor spinner

* fix home link

* fix stepper flow

* show dialog on invalid token

* fix app table refresh, pin icons light theme

* cleanup contributor

* inherit parent color, animations

* use localized date pipe everywhere

* cmp styles refactor, dont show granted p if none

* fix navitem desc, fixed header

* change permissions, caching

* roles on org emit, use prom instead of hot obs

* dont calc 100vh

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

@@ -2,12 +2,12 @@
     <span class="header">{{ title }}</span>
     <span class="sub-header">{{ description }}</span>
     <div class="people">
-        <div class="img-list">
+        <div class="img-list" [@cardAnimation]="totalResult">
             <mat-spinner diameter="20" *ngIf="loading"></mat-spinner>
 
             <ng-container *ngIf="totalResult < 10; else compact">
                 <ng-container *ngFor="let member of membersSubject | async; index as i">
-                    <div (click)="emitShowDetail()" class="avatar-circle"
+                    <div @animate (click)="emitShowDetail()" class="avatar-circle"
                         matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}"
                         [ngStyle]="{'z-index': 100 - i}">
                         <app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"

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

@@ -1,4 +1,4 @@
-import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
+import { animate, animateChild, keyframes, query, stagger, style, transition, trigger } from '@angular/animations';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
@@ -7,17 +7,18 @@ import { BehaviorSubject } from 'rxjs';
     templateUrl: './contributors.component.html',
     styleUrls: ['./contributors.component.scss'],
     animations: [
-        trigger('list', [
-            transition(':enter', [
-                query('@animate',
-                    stagger(80, animateChild()),
-                ),
+        trigger('cardAnimation', [
+            transition('* => *', [
+                query('@animate', stagger('40ms', animateChild()), { optional: true }),
             ]),
         ]),
         trigger('animate', [
             transition(':enter', [
-                style({ opacity: 0, transform: 'translateX(100%)' }),
-                animate('100ms', style({ opacity: 1, transform: 'translateX(0)' })),
+                animate('.2s ease-in', keyframes([
+                    style({ opacity: 0, offset: 0 }),
+                    style({ opacity: .5, transform: 'scale(1.05)', offset: 0.3 }),
+                    style({ opacity: 1, transform: 'scale(1)', offset: 1 }),
+                ])),
             ]),
         ]),
     ],