fix(console): project member grants, user grants (#329)

* checkbox color

* project grant preview

* project grante expandable row

* add grant detail component

* proto regen

* project grant members shared module

* fix project grant members dialog

* fix create dialog

* lint

* add avatar colors, meta component styling

* light theme

* dl report

* styles

* move grants out of user context, grant detail

* i18n grant pipe

* lint

* user grants

* clear expandable view project grants

* fix project member routing

* fix granted members routing

* fix group label

* rename project grant

* disable zitadel grant members

* fix routing user grant creation

* rest member writes

* ignore case searches

* forkjoin observables for project search

* fix grant creation with users

* fix projectid reference

* formfield table style, user grant dynamic load

* show key if no displayvalue is set

* Delete report.20200630.163913.44081.0.001.json

Co-authored-by: Silvan <[email protected]>

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

@@ -1,4 +1,5 @@
 <div class="avatar-circle dontcloseonclick"
-    [ngStyle]="{'height': size+'px', 'width': size+'px', 'fontSize': fontSize+'px'}" [ngClass]="{'active': active}">
+    [ngStyle]="{'height': size+'px', 'width': size+'px', 'fontSize': fontSize+'px', 'background-color': color}"
+    [ngClass]="{'active': active}">
     {{credentials}}
 </div>

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

@@ -10,6 +10,6 @@
     text-transform: uppercase;
 
     &.active:hover  {
-        border: 2px solid #81868a;
+        border: 2px solid #8795a1;
     }
 }

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

@@ -11,16 +11,54 @@ export class AvatarComponent implements OnInit {
     @Input() size: number = 24;
     @Input() fontSize: number = 16;
     @Input() active: boolean = false;
+    @Input() color: string = '';
     constructor() { }
 
     ngOnInit(): void {
         if (!this.credentials) {
             const split: string[] = this.name.split(' ');
             this.credentials = split[0].charAt(0) + (split[1] ? split[1].charAt(0) : '');
+            if (!this.color) {
+                this.color = this.getColor(this.name);
+            }
         }
 
         if (this.size > 50) {
             this.fontSize = 32;
         }
     }
+
+    getColor(userName: string): string {
+        const colors = [
+            '#e51c23',
+            '#e91e63',
+            '#9c27b0',
+            '#673ab7',
+            '#3f51b5',
+            '#5677fc',
+            '#03a9f4',
+            '#00bcd4',
+            '#009688',
+            '#259b24',
+            '#8bc34a',
+            '#afb42b',
+            '#ff9800',
+            '#ff5722',
+            '#795548',
+            '#607d8b',
+        ];
+
+        let hash = 0;
+        if (userName.length === 0) {
+            return colors[hash];
+        }
+        for (let i = 0; i < userName.length; i++) {
+            // tslint:disable-next-line: no-bitwise
+            hash = userName.charCodeAt(i) + ((hash << 5) - hash);
+            // tslint:disable-next-line: no-bitwise
+            hash = hash & hash;
+        }
+        hash = ((hash % colors.length) + colors.length) % colors.length;
+        return colors[hash];
+    }
 }