fix(console): user create loading state and i18n, improved app create stepper, invalid token dialog, cleanup, new home (#509)

* 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

* 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/de.json

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

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

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

@@ -3,6 +3,8 @@
     <span class="sub-header">{{ description }}</span>
     <div class="people">
         <div class="img-list">
+            <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"

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

@@ -28,10 +28,13 @@
         margin-left: 1rem;
         display: flex;
         align-items: center;
-        transition: all .15s ease-in-out;
+
+        mat-spinner {
+            margin-left: -15px;
+            margin-right: 20px;
+        }
   
         .avatar-circle {
-            transition: all .3s ease-in-out;
             float: left;
             margin: 0 8px 0 -15px;
             height: 32px;

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

@@ -1,3 +1,4 @@
+import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
@@ -5,12 +6,28 @@ import { BehaviorSubject } from 'rxjs';
     selector: 'app-contributors',
     templateUrl: './contributors.component.html',
     styleUrls: ['./contributors.component.scss'],
+    animations: [
+        trigger('list', [
+            transition(':enter', [
+                query('@animate',
+                    stagger(80, animateChild()),
+                ),
+            ]),
+        ]),
+        trigger('animate', [
+            transition(':enter', [
+                style({ opacity: 0, transform: 'translateX(100%)' }),
+                animate('100ms', style({ opacity: 1, transform: 'translateX(0)' })),
+            ]),
+        ]),
+    ],
 })
 export class ContributorsComponent {
     @Input() title: string = '';
     @Input() description: string = '';
     @Input() disabled: boolean = false;
     @Input() totalResult: number = 0;
+    @Input() loading: boolean = false;
     @Input() membersSubject!: BehaviorSubject<any[]>;
     @Output() addClicked: EventEmitter<void> = new EventEmitter();
     @Output() showDetailClicked: EventEmitter<void> = new EventEmitter();

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

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { AvatarModule } from '../avatar/avatar.module';
@@ -17,6 +18,7 @@ import { ContributorsComponent } from './contributors.component';
         MatIconModule,
         MatTooltipModule,
         MatButtonModule,
+        MatProgressSpinnerModule,
     ],
     exports: [
         ContributorsComponent,