[SM-590] show email as fallback name in SM header (#4957)

* show email if name is falsy

* update and use user-name pipe

bitwarden_license/bit-web/src/app/secrets-manager/shared/header.component.html

@@ -33,7 +33,7 @@
             [bitMenuTriggerFor]="accountMenu"
             class="tw-border-0 tw-bg-transparent tw-p-0"
           >
-            <bit-avatar [id]="account.userId" [text]="account.name || account.email"></bit-avatar>
+            <bit-avatar [id]="account.userId" [text]="account | userName"></bit-avatar>
           </button>
 
           <bit-menu #accountMenu>
@@ -42,14 +42,11 @@
                 class="tw-flex tw-items-center tw-py-1 tw-px-4 tw-leading-tight tw-text-info"
                 appStopProp
               >
-                <bit-avatar
-                  [text]="account.name || account.email"
-                  [id]="account.userId"
-                ></bit-avatar>
+                <bit-avatar [text]="account | userName" [id]="account.userId"></bit-avatar>
                 <div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
                   <span>{{ "loggedInAs" | i18n }}</span>
                   <small class="tw-block tw-overflow-hidden tw-whitespace-nowrap tw-text-muted">
-                    {{ account.name }}
+                    {{ account | userName }}
                   </small>
                 </div>
               </div>

libs/angular/src/pipes/user-name.pipe.ts

@@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from "@angular/core";
 
 interface User {
   name?: string;
-  email: string;
+  email?: string;
 }
 
 @Pipe({
@@ -14,6 +14,10 @@ export class UserNamePipe implements PipeTransform {
       return null;
     }
 
+    if (user.name == null && user.email == null) {
+      return null;
+    }
+
     return user.name == null || user.name.trim() === "" ? user.email : user.name;
   }
 }