fix(console): remove cropper, set avatar url if available (#1865)

* set avatarurl if available

* lint

* force sidemargin

* dont load image via asset

* rm log

* stylelint

* add ZITADEL domain to csp img src

* sanitize url

* fix undefined link projects

* use name as fallback

* operator: rename uploadServiceURL to assetServiceURL in environment json for console

* remove data

* rm logs

* center crop image

* add avatar to changes

Co-authored-by: Livio Amstutz <[email protected]>

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

@@ -2,5 +2,6 @@
     matRippleCentered="true"
     [ngStyle]="{'height': size+'px', 'width': size+'px', 'fontSize': (fontSize-1)+'px', 'background': color}"
     [ngClass]="{'active': active}">
-    {{credentials}}
+    <img class="dontcloseonclick" *ngIf="avatarUrl; else creds" [src]="avatarUrl"/>
+    <ng-template #creds>{{credentials}}</ng-template>
 </div>

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

@@ -17,5 +17,13 @@
     outline: none;
     color: white;
     font-weight: bold;
+
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      object-fit: cover;
+      object-position: center;
+    }
   }
 }

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

@@ -13,6 +13,7 @@ export class AvatarComponent implements OnInit {
   @Input() active: boolean = false;
   @Input() color: string = '';
   @Input() forColor: string = '';
+  @Input() avatarUrl: string = '';
   constructor() { }
 
   ngOnInit(): void {
@@ -21,6 +22,11 @@ export class AvatarComponent implements OnInit {
       if (!this.color) {
         this.color = this.getColor(this.forColor || '');
       }
+    } else if (!this.credentials && this.name) {
+      this.credentials = this.getInitials(this.name);
+      if (!this.color) {
+        this.color = this.getColor(this.name || '');
+      }
     }
 
     if (this.size > 50) {