Use UserNamePipe (#1085)

src/app/organizations/manage/bulk/bulk-confirm.component.html

@@ -35,7 +35,7 @@
                         </thead>
                         <tr *ngFor="let user of filteredUsers">
                             <td width="30">
-                                <app-avatar [data]="user.name || user.email" [email]="user.email" size="25" [circle]="true"
+                                <app-avatar [data]="user | userName" [email]="user.email" size="25" [circle]="true"
                                     [fontSize]="14"></app-avatar>
                             </td>
                             <td>
@@ -48,7 +48,7 @@
                         </tr>
                         <tr *ngFor="let user of excludedUsers">
                             <td width="30">
-                                <app-avatar [data]="user.name || user.email" [email]="user.email" size="25" [circle]="true"
+                                <app-avatar [data]="user | userName" [email]="user.email" size="25" [circle]="true"
                                     [fontSize]="14"></app-avatar>
                             </td>
                             <td>
@@ -71,7 +71,7 @@
                         </thead>
                         <tr *ngFor="let user of filteredUsers">
                             <td width="30">
-                                <app-avatar [data]="user.name || user.email" [email]="user.email" size="25" [circle]="true"
+                                <app-avatar [data]="user | userName" [email]="user.email" size="25" [circle]="true"
                                     [fontSize]="14"></app-avatar>
                             </td>
                             <td>

src/app/organizations/manage/bulk/bulk-remove.component.html

@@ -32,7 +32,7 @@
                         </thead>
                         <tr *ngFor="let user of users">
                             <td width="30">
-                                <app-avatar [data]="user.name || user.email" [email]="user.email" size="25" [circle]="true"
+                                <app-avatar [data]="user | userName" [email]="user.email" size="25" [circle]="true"
                                     [fontSize]="14"></app-avatar>
                             </td>
                             <td>
@@ -52,7 +52,7 @@
                         </thead>
                         <tr *ngFor="let user of users">
                             <td width="30">
-                                <app-avatar [data]="user.name || user.email" [email]="user.email" size="25" [circle]="true"
+                                <app-avatar [data]="user | userName" [email]="user.email" size="25" [circle]="true"
                                     [fontSize]="14"></app-avatar>
                             </td>
                             <td>

src/app/organizations/manage/bulk/bulk-status.component.html

@@ -23,7 +23,7 @@
                     </thead>
                     <tr *ngFor="let item of users">
                         <td width="30">
-                            <app-avatar [data]="item.user.name || item.user.email" [email]="item.user.email" size="25" [circle]="true"
+                            <app-avatar [data]="item.user | userName" [email]="item.user.email" size="25" [circle]="true"
                                 [fontSize]="14"></app-avatar>
                         </td>
                         <td>

src/app/organizations/manage/entity-events.component.ts

@@ -11,6 +11,8 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
 
 import { EventService } from '../../services/event.service';
 
+import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
+
 import { EventResponse } from 'jslib-common/models/response/eventResponse';
 import { ListResponse } from 'jslib-common/models/response/listResponse';
 
@@ -38,7 +40,8 @@ export class EntityEventsComponent implements OnInit {
     private orgUsersIdMap = new Map<string, any>();
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private eventService: EventService, private toasterService: ToasterService) { }
+        private eventService: EventService, private toasterService: ToasterService,
+        private userNamePipe: UserNamePipe) { }
 
     async ngOnInit() {
         const defaultDates = this.eventService.getDefaultDateFilters();
@@ -51,7 +54,7 @@ export class EntityEventsComponent implements OnInit {
         if (this.showUser) {
             const response = await this.apiService.getOrganizationUsers(this.organizationId);
             response.data.forEach(u => {
-                const name = u.name == null || u.name.trim() === '' ? u.email : u.name;
+                const name = this.userNamePipe.transform(u);
                 this.orgUsersIdMap.set(u.id, { name: name, email: u.email });
                 this.orgUsersUserIdMap.set(u.userId, { name: name, email: u.email });
             });

src/app/organizations/manage/entity-users.component.html

@@ -61,7 +61,7 @@
                                         (change)="selectedChanged(u)" appStopProp>
                                 </td>
                                 <td width="30" (click)="check(u)">
-                                    <app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true"
+                                    <app-avatar [data]="u | userName" [email]="u.email" size="25" [circle]="true"
                                         [fontSize]="14"></app-avatar>
                                 </td>
                                 <td>

src/app/organizations/manage/events.component.ts

@@ -6,14 +6,14 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { ToasterService } from 'angular2-toaster';
 
+import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { ExportService } from 'jslib-common/abstractions/export.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
-import { EventResponse } from 'jslib-common/models/response/eventResponse';
-import { ListResponse } from 'jslib-common/models/response/listResponse';
 import { EventView } from 'jslib-common/models/view/eventView';
 
 import { EventService } from '../../services/event.service';
@@ -41,7 +41,7 @@ export class EventsComponent implements OnInit {
     constructor(private apiService: ApiService, private route: ActivatedRoute, private eventService: EventService,
         private i18nService: I18nService, private toasterService: ToasterService, private userService: UserService,
         private exportService: ExportService, private platformUtilsService: PlatformUtilsService,
-        private router: Router) { }
+        private router: Router, private userNamePipe: UserNamePipe) { }
 
     async ngOnInit() {
         this.route.parent.parent.params.subscribe(async params => {
@@ -61,7 +61,7 @@ export class EventsComponent implements OnInit {
     async load() {
         const response = await this.apiService.getOrganizationUsers(this.organizationId);
         response.data.forEach(u => {
-            const name = u.name == null || u.name.trim() === '' ? u.email : u.name;
+            const name = this.userNamePipe.transform(u);
             this.orgUsersIdMap.set(u.id, { name: name, email: u.email });
             this.orgUsersUserIdMap.set(u.userId, { name: name, email: u.email });
         });

src/app/organizations/manage/people.component.html

@@ -80,7 +80,7 @@
                         <input type="checkbox" [(ngModel)]="u.checked" appStopProp>
                     </td>
                     <td width="30">
-                        <app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true"
+                        <app-avatar [data]="u | userName" [email]="u.email" size="25" [circle]="true"
                             [fontSize]="14"></app-avatar>
                     </td>
                     <td>

src/app/organizations/manage/people.component.ts

@@ -39,6 +39,7 @@ import { OrganizationUserType } from 'jslib-common/enums/organizationUserType';
 import { PolicyType } from 'jslib-common/enums/policyType';
 
 import { SearchPipe } from 'jslib-angular/pipes/search.pipe';
+import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
 
 import { Utils } from 'jslib-common/misc/utils';
 
@@ -99,7 +100,7 @@ export class PeopleComponent implements OnInit {
         private cryptoService: CryptoService, private userService: UserService, private router: Router,
         private storageService: StorageService, private searchService: SearchService,
         private validationService: ValidationService, private policyService: PolicyService,
-        private searchPipe: SearchPipe, private syncService: SyncService) { }
+        private searchPipe: SearchPipe, private userNamePipe: UserNamePipe, private syncService: SyncService) { }
 
     async ngOnInit() {
         this.route.parent.parent.params.subscribe(async params => {
@@ -258,7 +259,7 @@ export class PeopleComponent implements OnInit {
         const childComponent = this.modal.show<UserAddEditComponent>(
             UserAddEditComponent, this.addEditModalRef);
 
-        childComponent.name = user != null ? user.name || user.email : null;
+        childComponent.name = this.userNamePipe.transform(user);
         childComponent.organizationId = this.organizationId;
         childComponent.organizationUserId = user != null ? user.id : null;
         childComponent.onSavedUser.subscribe(() => {
@@ -289,7 +290,7 @@ export class PeopleComponent implements OnInit {
         const childComponent = this.modal.show<UserGroupsComponent>(
             UserGroupsComponent, this.groupsModalRef);
 
-        childComponent.name = user != null ? user.name || user.email : null;
+        childComponent.name = this.userNamePipe.transform(user);
         childComponent.organizationId = this.organizationId;
         childComponent.organizationUserId = user != null ? user.id : null;
         childComponent.onSavedUser.subscribe(() => {
@@ -303,7 +304,7 @@ export class PeopleComponent implements OnInit {
 
     async remove(user: OrganizationUserUserDetailsResponse) {
         const confirmed = await this.platformUtilsService.showDialog(
-            this.i18nService.t('removeUserConfirmation'), user.name || user.email,
+            this.i18nService.t('removeUserConfirmation'), this.userNamePipe.transform(user),
             this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
         if (!confirmed) {
             return false;
@@ -312,7 +313,7 @@ export class PeopleComponent implements OnInit {
         this.actionPromise = this.apiService.deleteOrganizationUser(this.organizationId, user.id);
         try {
             await this.actionPromise;
-            this.toasterService.popAsync('success', null, this.i18nService.t('removedUserId', user.name || user.email));
+            this.toasterService.popAsync('success', null, this.i18nService.t('removedUserId', this.userNamePipe.transform(user)));
             this.removeUser(user);
         } catch (e) {
             this.validationService.showError(e);
@@ -328,7 +329,7 @@ export class PeopleComponent implements OnInit {
         this.actionPromise = this.apiService.postOrganizationUserReinvite(this.organizationId, user.id);
         try {
             await this.actionPromise;
-            this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenReinvited', user.name || user.email));
+            this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenReinvited', this.userNamePipe.transform(user)));
         } catch (e) {
             this.validationService.showError(e);
         }
@@ -419,7 +420,7 @@ export class PeopleComponent implements OnInit {
                 this.actionPromise = this.doConfirmation(user, publicKey);
                 await this.actionPromise;
                 updateUser(this);
-                this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', user.name || user.email));
+                this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', this.userNamePipe.transform(user)));
             } catch (e) {
                 this.validationService.showError(e);
                 throw e;
@@ -443,7 +444,7 @@ export class PeopleComponent implements OnInit {
             const childComponent = this.modal.show<UserConfirmComponent>(
                 UserConfirmComponent, this.confirmModalRef);
 
-            childComponent.name = user != null ? user.name || user.email : null;
+            childComponent.name = this.userNamePipe.transform(user);
             childComponent.organizationId = this.organizationId;
             childComponent.organizationUserId = user != null ? user.id : null;
             childComponent.userId = user != null ? user.userId : null;
@@ -488,7 +489,7 @@ export class PeopleComponent implements OnInit {
         const childComponent = this.modal.show<EntityEventsComponent>(
             EntityEventsComponent, this.eventsModalRef);
 
-        childComponent.name = user.name || user.email;
+        childComponent.name = this.userNamePipe.transform(user);
         childComponent.organizationId = this.organizationId;
         childComponent.entityId = user.id;
         childComponent.showUser = false;
@@ -526,7 +527,7 @@ export class PeopleComponent implements OnInit {
         const childComponent = this.modal.show<ResetPasswordComponent>(
             ResetPasswordComponent, this.resetPasswordModalRef);
 
-        childComponent.name = user != null ? user.name || user.email : null;
+        childComponent.name = this.userNamePipe.transform(user);
         childComponent.email = user != null ? user.email : null;
         childComponent.organizationId = this.organizationId;
         childComponent.id = user != null ? user.id : null;

src/app/oss.module.ts

@@ -190,6 +190,7 @@ import { ColorPasswordPipe } from 'jslib-angular/pipes/color-password.pipe';
 import { I18nPipe } from 'jslib-angular/pipes/i18n.pipe';
 import { SearchCiphersPipe } from 'jslib-angular/pipes/search-ciphers.pipe';
 import { SearchPipe } from 'jslib-angular/pipes/search.pipe';
+import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
 
 import localeAz from '@angular/common/locales/az';
 import localeBg from '@angular/common/locales/bg';
@@ -426,13 +427,14 @@ registerLocaleData(localeZhTw, 'zh-TW');
         UserBillingComponent,
         UserLayoutComponent,
         UserSubscriptionComponent,
+        UserNamePipe,
         VaultComponent,
         VerifyEmailComponent,
         VerifyEmailTokenComponent,
         VerifyRecoverDeleteComponent,
         WeakPasswordsReportComponent,
     ],
-    providers: [DatePipe, SearchPipe],
+    providers: [DatePipe, SearchPipe, UserNamePipe],
     bootstrap: [],
 })
 export class OssModule { }

src/app/settings/emergency-access.component.html

@@ -31,7 +31,7 @@
     <tbody>
         <tr *ngFor="let c of trustedContacts; let i = index">
             <td width="30">
-                <app-avatar [data]="c.name || c.email" [email]="c.email" size="25" [circle]="true"
+                <app-avatar [data]="c | userName" [email]="c.email" size="25" [circle]="true"
                     [fontSize]="14"></app-avatar>
             </td>
             <td>
@@ -101,7 +101,7 @@
     <tbody>
         <tr *ngFor="let c of grantedContacts; let i = index">
             <td width="30">
-                <app-avatar [data]="c.name || c.email" [email]="c.email" size="25" [circle]="true"
+                <app-avatar [data]="c | userName" [email]="c.email" size="25" [circle]="true"
                     [fontSize]="14"></app-avatar>
             </td>
             <td>

src/app/settings/emergency-access.component.ts

@@ -16,6 +16,8 @@ import { EmergencyAccessConfirmRequest } from 'jslib-common/models/request/emerg
 import { EmergencyAccessGranteeDetailsResponse, EmergencyAccessGrantorDetailsResponse } from 'jslib-common/models/response/emergencyAccessResponse';
 import { ConstantsService } from 'jslib-common/services/constants.service';
 
+import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
+
 import { ModalComponent } from '../modal.component';
 import { EmergencyAccessAddEditComponent } from './emergency-access-add-edit.component';
 import { EmergencyAccessConfirmComponent } from './emergency-access-confirm.component';
@@ -45,7 +47,7 @@ export class EmergencyAccessComponent implements OnInit {
         private platformUtilsService: PlatformUtilsService,
         private toasterService: ToasterService, private cryptoService: CryptoService,
         private storageService: StorageService, private userService: UserService,
-        private messagingService: MessagingService) { }
+        private messagingService: MessagingService, private userNamePipe: UserNamePipe) { }
 
     async ngOnInit() {
         this.canAccessPremium = await this.userService.canAccessPremium();
@@ -76,7 +78,7 @@ export class EmergencyAccessComponent implements OnInit {
         const childComponent = this.modal.show<EmergencyAccessAddEditComponent>(
             EmergencyAccessAddEditComponent, this.addEditModalRef);
 
-        childComponent.name = details?.name ?? details?.email;
+        childComponent.name = this.userNamePipe.transform(details);
         childComponent.emergencyAccessId = details?.id;
         childComponent.readOnly = !this.canAccessPremium;
         childComponent.onSaved.subscribe(() => {
@@ -127,7 +129,7 @@ export class EmergencyAccessComponent implements OnInit {
             const childComponent = this.modal.show<EmergencyAccessConfirmComponent>(
                 EmergencyAccessConfirmComponent, this.confirmModalRef);
 
-            childComponent.name = contact?.name ?? contact?.email;
+            childComponent.name = this.userNamePipe.transform(contact);
             childComponent.emergencyAccessId = contact.id;
             childComponent.userId = contact?.granteeId;
             childComponent.onConfirmed.subscribe(async () => {
@@ -137,7 +139,7 @@ export class EmergencyAccessComponent implements OnInit {
                 await childComponent.formPromise;
 
                 updateUser();
-                this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', contact.name || contact.email));
+                this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', this.userNamePipe.transform(contact)));
             });
 
             this.modal.onClosed.subscribe(() => {
@@ -150,13 +152,13 @@ export class EmergencyAccessComponent implements OnInit {
         await this.actionPromise;
         updateUser();
 
-        this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', contact.name || contact.email));
+        this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', this.userNamePipe.transform(contact)));
         this.actionPromise = null;
     }
 
     async remove(details: EmergencyAccessGranteeDetailsResponse | EmergencyAccessGrantorDetailsResponse) {
         const confirmed = await this.platformUtilsService.showDialog(
-            this.i18nService.t('removeUserConfirmation'), details.name || details.email,
+            this.i18nService.t('removeUserConfirmation'), this.userNamePipe.transform(details),
             this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
         if (!confirmed) {
             return false;
@@ -164,7 +166,7 @@ export class EmergencyAccessComponent implements OnInit {
 
         try {
             await this.apiService.deleteEmergencyAccess(details.id);
-            this.toasterService.popAsync('success', null, this.i18nService.t('removedUserId', details.name || details.email));
+            this.toasterService.popAsync('success', null, this.i18nService.t('removedUserId', this.userNamePipe.transform(details)));
 
             if (details instanceof EmergencyAccessGranteeDetailsResponse) {
                 this.removeGrantee(details);
@@ -177,7 +179,7 @@ export class EmergencyAccessComponent implements OnInit {
     async requestAccess(details: EmergencyAccessGrantorDetailsResponse) {
         const confirmed = await this.platformUtilsService.showDialog(
             this.i18nService.t('requestAccessConfirmation', details.waitTimeDays.toString()),
-            details.name || details.email,
+            this.userNamePipe.transform(details),
             this.i18nService.t('requestAccess'),
             this.i18nService.t('no'),
             'warning',
@@ -190,15 +192,15 @@ export class EmergencyAccessComponent implements OnInit {
         await this.apiService.postEmergencyAccessInitiate(details.id);
 
         details.status = EmergencyAccessStatusType.RecoveryInitiated;
-        this.toasterService.popAsync('success', null, this.i18nService.t('requestSent', details.name || details.email));
+        this.toasterService.popAsync('success', null, this.i18nService.t('requestSent', this.userNamePipe.transform(details)));
     }
 
     async approve(details: EmergencyAccessGranteeDetailsResponse) {
         const type = this.i18nService.t(details.type === EmergencyAccessType.View ? 'view' : 'takeover');
 
         const confirmed = await this.platformUtilsService.showDialog(
-            this.i18nService.t('approveAccessConfirmation', details.name || details.email, type),
+            this.i18nService.t('approveAccessConfirmation', this.userNamePipe.transform(details), type),
-            details.name || details.email,
+            this.userNamePipe.transform(details),
             this.i18nService.t('approve'),
             this.i18nService.t('no'),
             'warning',
@@ -211,14 +213,14 @@ export class EmergencyAccessComponent implements OnInit {
         await this.apiService.postEmergencyAccessApprove(details.id);
         details.status = EmergencyAccessStatusType.RecoveryApproved;
 
-        this.toasterService.popAsync('success', null, this.i18nService.t('emergencyApproved', details.name || details.email));
+        this.toasterService.popAsync('success', null, this.i18nService.t('emergencyApproved', this.userNamePipe.transform(details)));
     }
 
     async reject(details: EmergencyAccessGranteeDetailsResponse) {
         await this.apiService.postEmergencyAccessReject(details.id);
         details.status = EmergencyAccessStatusType.Confirmed;
 
-        this.toasterService.popAsync('success', null, this.i18nService.t('emergencyRejected', details.name || details.email));
+        this.toasterService.popAsync('success', null, this.i18nService.t('emergencyRejected', this.userNamePipe.transform(details)));
     }
 
     async takeover(details: EmergencyAccessGrantorDetailsResponse) {
@@ -231,13 +233,13 @@ export class EmergencyAccessComponent implements OnInit {
         const childComponent = this.modal.show<EmergencyAccessTakeoverComponent>(
             EmergencyAccessTakeoverComponent, this.takeoverModalRef);
 
-        childComponent.name = details != null ? details.name || details.email : null;
+        childComponent.name = this.userNamePipe.transform(details);
         childComponent.email = details.email;
         childComponent.emergencyAccessId = details != null ? details.id : null;
 
         childComponent.onDone.subscribe(() => {
             this.modal.close();
-            this.toasterService.popAsync('success', null, this.i18nService.t('passwordResetFor', details.name || details.email));
+            this.toasterService.popAsync('success', null, this.i18nService.t('passwordResetFor', this.userNamePipe.transform(details)));
         });
 
         this.modal.onClosed.subscribe(() => {

src/app/settings/profile.component.html

@@ -21,7 +21,7 @@
         </div>
         <div class="col-6">
             <div class="mb-3">
-                <app-avatar data="{{profile.name || profile.email}}" [email]="profile.email" dynamic="true" size="75"
+                <app-avatar data="{{profile | userName}}" [email]="profile.email" dynamic="true" size="75"
                     fontSize="35"></app-avatar>
             </div>
             <hr>