andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-04 21:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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]>
This commit is contained in:
Max Peintner
2021-06-14 13:53:40 +02:00
committed by GitHub
co-authored by Livio Amstutz
parent ab78b34c6c
commit 465081ee6d
39 changed files with 111 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/accounts-card/accounts-card.component.html
+2 -2
View File
@@ -2,7 +2,7 @@
<app-avatar
*ngIf="user.human?.profile && (user.human?.profile?.displayName || (user.human?.profile?.firstName && user.human?.profile?.lastName))"
class="avatar"
[forColor]="user.preferredLoginName"
[forColor]="user.preferredLoginName" [avatarUrl]="user.human?.profile?.avatarUrl || ''"
[name]="user.human?.profile?.displayName ? user.human?.profile?.displayName : (user.human?.profile?.firstName + ' '+ user.human?.profile?.lastName)"
[size]="80">
</app-avatar>
@@ -15,7 +15,7 @@
<div class="l-accounts">
<mat-progress-bar *ngIf="loadingUsers" color="primary" mode="indeterminate"></mat-progress-bar>
<a class="row" *ngFor="let session of sessions" (click)="selectAccount(session.loginName)">
<app-avatar *ngIf="session && session.displayName" class="small-avatar" [forColor]="session.loginName" [size]="32">
<app-avatar *ngIf="session && session.displayName" class="small-avatar" [avatarUrl]="session.avatarUrl || ''" [forColor]="session.loginName" [size]="32">
</app-avatar>
<div class="col">
console/src/app/modules/accounts-card/accounts-card.component.ts
-1
View File
@@ -20,7 +20,6 @@ export class AccountsCardComponent implements OnInit {
constructor(public authService: AuthenticationService, private router: Router, private userService: GrpcAuthService) {
this.userService.listMyUserSessions().then(sessions => {
this.sessions = sessions.resultList;
console.log(sessions.resultList);
const index = this.sessions.findIndex(user => user.loginName === this.user.preferredLoginName);
if (index > -1) {
this.sessions.splice(index, 1);
console/src/app/modules/avatar/avatar.component.html
+2 -1
View File
@@ -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
+8
View File
@@ -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
+6
View File
@@ -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) {
console/src/app/modules/changes/changes.component.html
+3 -2
View File
@@ -13,7 +13,8 @@
<div class="row">
<app-avatar matTooltip="{{ dayelement.editorDisplayName }}"
*ngIf="dayelement.editorDisplayName; else spacer" class="avatar"
[name]="dayelement.editorDisplayName" [size]="32" [forColor]="dayelement?.preferredLoginName">
[name]="dayelement.editorDisplayName" [size]="32" [forColor]="dayelement?.editorPreferredLoginName"
[avatarUrl]="dayelement.editorAvatarUrl || ''">
</app-avatar>
<ng-template #spacer>
<div class="spacer"></div>
@@ -40,4 +41,4 @@
<mat-spinner *ngIf="loading | async" diameter="25"></mat-spinner>
</div>
<span class="end-container" *ngIf="bottom">{{'CHANGES.BOTTOM' | translate}}</span>
</div>
</div>
console/src/app/modules/changes/changes.component.ts
+4
View File
@@ -190,6 +190,8 @@ export class ChangesComponent implements OnInit, OnDestroy {
editor: change.editorDisplayName,
editorId: change.editorId,
editorDisplayName: change.editorDisplayName,
editorPreferredLoginName: change.editorPreferredLoginName,
editorAvatarUrl: change.editorAvatarUrl,
dates: [change.changeDate],
// data: [change.data],
@@ -211,6 +213,8 @@ export class ChangesComponent implements OnInit, OnDestroy {
editor: change.editorDisplayName,
editorId: change.editorId,
editorDisplayName: change.editorDisplayName,
editorPreferredLoginName: change.editorPreferredLoginName,
editorAvatarUrl: change.editorAvatarUrl,
dates: [change.changeDate],
// data: [change.data],
console/src/app/modules/contributors/contributors.component.html
+1 -1
View File
@@ -14,7 +14,7 @@
[ngStyle]="{'z-index': 100 - i}">
<app-avatar
*ngIf="member && member.displayName && member.firstName && member.lastName; else cog"
class="avatar dontcloseonclick" [forColor]="member?.userName"[forColor]="member?.preferredLoginName"
class="avatar dontcloseonclick" [avatarUrl]="member.avatarUrl|| ''" [forColor]="member?.userName"[forColor]="member?.preferredLoginName"
[name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
[size]="32">
</app-avatar>
console/src/app/modules/members-table/members-table.component.html
+1 -1
View File
@@ -22,7 +22,7 @@
<mat-checkbox [disabled]="!canWrite" color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
<app-avatar *ngIf="row?.displayName && row.firstName && row.lastName; else cog" class="avatar"
[name]="row.displayName" [forColor]="row?.preferredLoginName" [size]="32">
[name]="row.displayName" [avatarUrl]="row.avatarUrl || ''" [avatarUrl]="row.avatarUrl|| ''" [forColor]="row?.preferredLoginName" [size]="32">
</app-avatar>
<ng-template #cog>
<div class="sa-icon">
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
+1
View File
@@ -482,6 +482,7 @@ export class PrivateLabelingPolicyComponent implements OnDestroy {
private loadAsset(imagekey: string, url: string): Promise<any> {
return this.assetService.load(`${url}`, this.org.id).then(data => {
console.log(data);
const objectURL = URL.createObjectURL(data);
this.images[imagekey] = this.sanitizer.bypassSecurityTrustUrl(objectURL);
this.refreshPreview.emit();
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html
+1 -1
View File
@@ -57,7 +57,7 @@
<div class="circle">
<app-avatar
*ngIf="user.human && user.human.displayName && user.human?.firstName && user.human?.lastName; else cog"
class="avatar" [name]="user.human.displayName" [forColor]="user?.preferredLoginName" [size]="32">
class="avatar" [name]="user.human.displayName" [avatarUrl]="user.human?.profile?.avatarUrl || ''" [forColor]="user?.preferredLoginName" [size]="32">
</app-avatar>
<ng-template #cog>
<div class="sa-icon">
console/src/app/modules/user-grants/user-grants.component.html
+1 -1
View File
@@ -31,7 +31,7 @@
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
<app-avatar
*ngIf="context !== UserGrantContext.USER && row && row?.displayName && row.firstName && row.lastName"
class="avatar" [name]="row.displayName" [forColor]="row?.preferredLoginName" [size]="32">
class="avatar" [name]="row.displayName" [avatarUrl]="row.avatarUrl || ''" [forColor]="row?.preferredLoginName" [size]="32">
</app-avatar>
</mat-checkbox>
</td>