From 5f6f4bad82928822f3cd7184902af93bdfc74d0a Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Thu, 27 Oct 2022 14:38:34 +0200
Subject: [PATCH] [SM-251] Migrate to new avatar component (#3600)

---
 .../src/app/components/avatar.component.ts    | 128 ++++++++++++++++++
 .../layout/account-switcher.component.html    |  14 +-
 .../app/layout/account-switcher.component.ts  |  59 +++++---
 apps/desktop/src/app/shared/shared.module.ts  |   3 +
 .../organization-switcher.component.html      |   7 +-
 .../web/src/app/layouts/navbar.component.html |   8 +-
 apps/web/src/app/layouts/navbar.component.ts  |   2 +
 .../manage/bulk/bulk-confirm.component.html   |  27 +---
 .../manage/bulk/bulk-remove.component.html    |  18 +--
 .../bulk/bulk-restore-revoke.component.html   |  18 +--
 .../manage/bulk/bulk-status.component.html    |  12 +-
 .../manage/entity-users.component.html        |   9 +-
 .../manage/people.component.html              |   9 +-
 .../settings/account.component.html           |   2 +-
 .../app/providers/providers.component.html    |   2 +-
 .../settings/emergency-access.component.html  |  18 +--
 .../app/settings/preferences.component.html   |  23 ----
 .../src/app/settings/preferences.component.ts |   3 -
 .../src/app/settings/profile.component.html   |   9 +-
 apps/web/src/app/shared/shared.module.ts      |   7 +-
 apps/web/src/locales/en/messages.json         |   7 -
 apps/web/webpack.config.js                    |   1 -
 .../clients/add-organization.component.html   |   2 +-
 .../providers/clients/clients.component.html  |   7 +-
 .../providers/manage/people.component.html    |   9 +-
 .../providers/providers-layout.component.html |   2 +-
 .../providers/settings/account.component.html |   2 +-
 .../src/components/avatar.component.ts        | 127 -----------------
 libs/angular/src/jslib.module.ts              |   3 -
 .../logInStrategies/logIn.strategy.spec.ts    |   3 +
 libs/common/src/abstractions/state.service.ts |   2 -
 .../misc/logInStrategies/logIn.strategy.ts    |   1 +
 libs/common/src/models/domain/account.ts      |   2 +-
 libs/common/src/services/state.service.ts     |  21 ---
 .../src/services/stateMigration.service.ts    |   4 -
 .../components/src/avatar/avatar.component.ts |  12 +-
 libs/components/src/index.ts                  |   7 +-
 37 files changed, 230 insertions(+), 360 deletions(-)
 create mode 100644 apps/desktop/src/app/components/avatar.component.ts
 delete mode 100644 libs/angular/src/components/avatar.component.ts

diff --git a/apps/desktop/src/app/components/avatar.component.ts b/apps/desktop/src/app/components/avatar.component.ts
new file mode 100644
index 0000000000..b837c541eb
--- /dev/null
+++ b/apps/desktop/src/app/components/avatar.component.ts
@@ -0,0 +1,128 @@
+import { Component, Input, OnChanges, OnInit } from "@angular/core";
+import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
+
+import { Utils } from "@bitwarden/common/misc/utils";
+
+@Component({
+  selector: "app-avatar",
+  template: `<img
+    *ngIf="src"
+    [src]="src"
+    title="{{ data }}"
+    [ngClass]="{ 'rounded-circle': circle }"
+  />`,
+})
+export class AvatarComponent implements OnChanges, OnInit {
+  @Input() size = 45;
+  @Input() charCount = 2;
+  @Input() fontSize = 20;
+  @Input() dynamic = false;
+  @Input() circle = false;
+
+  @Input() color?: string;
+  @Input() id?: number;
+  @Input() text?: string;
+
+  private svgCharCount = 2;
+  private svgFontWeight = 300;
+  src: SafeResourceUrl;
+
+  constructor(public sanitizer: DomSanitizer) {}
+
+  ngOnInit() {
+    if (!this.dynamic) {
+      this.generate();
+    }
+  }
+
+  ngOnChanges() {
+    if (this.dynamic) {
+      this.generate();
+    }
+  }
+
+  private async generate() {
+    let chars: string = null;
+    const upperCaseText = this.text?.toUpperCase() ?? "";
+
+    chars = this.getFirstLetters(upperCaseText, this.svgCharCount);
+
+    if (chars == null) {
+      chars = this.unicodeSafeSubstring(upperCaseText, this.svgCharCount);
+    }
+
+    // If the chars contain an emoji, only show it.
+    if (chars.match(Utils.regexpEmojiPresentation)) {
+      chars = chars.match(Utils.regexpEmojiPresentation)[0];
+    }
+
+    let svg: HTMLElement;
+    let hexColor = this.color;
+
+    if (this.color != null) {
+      svg = this.createSvgElement(this.size, hexColor);
+    } else if (this.id != null) {
+      hexColor = Utils.stringToColor(this.id.toString());
+      svg = this.createSvgElement(this.size, hexColor);
+    } else {
+      hexColor = Utils.stringToColor(upperCaseText);
+      svg = this.createSvgElement(this.size, hexColor);
+    }
+
+    const charObj = this.createTextElement(chars, hexColor);
+    svg.appendChild(charObj);
+    const html = window.document.createElement("div").appendChild(svg).outerHTML;
+    const svgHtml = window.btoa(unescape(encodeURIComponent(html)));
+    this.src = this.sanitizer.bypassSecurityTrustResourceUrl(
+      "data:image/svg+xml;base64," + svgHtml
+    );
+  }
+
+  private getFirstLetters(data: string, count: number): string {
+    const parts = data.split(" ");
+    if (parts.length > 1) {
+      let text = "";
+      for (let i = 0; i < count; i++) {
+        text += this.unicodeSafeSubstring(parts[i], 1);
+      }
+      return text;
+    }
+    return null;
+  }
+
+  private createSvgElement(size: number, color: string): HTMLElement {
+    const svgTag = window.document.createElement("svg");
+    svgTag.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgTag.setAttribute("pointer-events", "none");
+    svgTag.setAttribute("width", size.toString());
+    svgTag.setAttribute("height", size.toString());
+    svgTag.style.backgroundColor = color;
+    svgTag.style.width = size + "px";
+    svgTag.style.height = size + "px";
+    return svgTag;
+  }
+
+  private createTextElement(character: string, color: string): HTMLElement {
+    const textTag = window.document.createElement("text");
+    textTag.setAttribute("text-anchor", "middle");
+    textTag.setAttribute("y", "50%");
+    textTag.setAttribute("x", "50%");
+    textTag.setAttribute("dy", "0.35em");
+    textTag.setAttribute("pointer-events", "auto");
+    textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true));
+    textTag.setAttribute(
+      "font-family",
+      '"Open Sans","Helvetica Neue",Helvetica,Arial,' +
+        'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
+    );
+    textTag.textContent = character;
+    textTag.style.fontWeight = this.svgFontWeight.toString();
+    textTag.style.fontSize = this.fontSize + "px";
+    return textTag;
+  }
+
+  private unicodeSafeSubstring(str: string, count: number) {
+    const characters = str.match(/./gu);
+    return characters != null ? characters.slice(0, count).join("") : "";
+  }
+}
diff --git a/apps/desktop/src/app/layout/account-switcher.component.html b/apps/desktop/src/app/layout/account-switcher.component.html
index ecf4bba78c..9b77638a6c 100644
--- a/apps/desktop/src/app/layout/account-switcher.component.html
+++ b/apps/desktop/src/app/layout/account-switcher.component.html
@@ -8,17 +8,18 @@
   aria-controls="cdk-overlay-container"
   [attr.aria-expanded]="isOpen"
 >
-  <ng-container *ngIf="activeAccountEmail != null; else noActiveAccount">
+  <ng-container *ngIf="activeAccount?.email != null; else noActiveAccount">
     <app-avatar
-      [data]="activeAccountEmail"
+      [text]="activeAccount.name"
+      [id]="activeAccount.id"
       size="25"
       [circle]="true"
       [fontSize]="14"
       [dynamic]="true"
-      *ngIf="activeAccountEmail != null"
+      *ngIf="activeAccount.email != null"
       aria-hidden="true"
     ></app-avatar>
-    <span>{{ activeAccountEmail }}</span>
+    <span>{{ activeAccount.email }}</span>
   </ng-container>
   <ng-template #noActiveAccount>
     <span>{{ "switchAccount" | i18n }}</span>
@@ -58,7 +59,8 @@
         attr.aria-label="{{ 'switchAccount' | i18n }}"
       >
         <app-avatar
-          [data]="a.value.profile.email"
+          [text]="a.value.profile.name ?? a.value.profile.email"
+          [id]="a.value.profile.userId"
           size="25"
           [circle]="true"
           [fontSize]="14"
@@ -85,7 +87,7 @@
         ></i>
       </button>
     </div>
-    <ng-container *ngIf="activeAccountEmail != null">
+    <ng-container *ngIf="activeAccount?.email != null">
       <div class="border" *ngIf="numberOfAccounts > 0"></div>
       <ng-container *ngIf="numberOfAccounts < 4">
         <button type="button" class="add" routerLink="/login" (click)="addAccount()">
diff --git a/apps/desktop/src/app/layout/account-switcher.component.ts b/apps/desktop/src/app/layout/account-switcher.component.ts
index 08ae7026b8..0f03464acb 100644
--- a/apps/desktop/src/app/layout/account-switcher.component.ts
+++ b/apps/desktop/src/app/layout/account-switcher.component.ts
@@ -1,14 +1,22 @@
 import { animate, state, style, transition, trigger } from "@angular/animations";
 import { ConnectedPosition } from "@angular/cdk/overlay";
-import { Component, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { concatMap, Subject, takeUntil } from "rxjs";
 
 import { AuthService } from "@bitwarden/common/abstractions/auth.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
+import { TokenService } from "@bitwarden/common/abstractions/token.service";
 import { AuthenticationStatus } from "@bitwarden/common/enums/authenticationStatus";
 import { Utils } from "@bitwarden/common/misc/utils";
 import { Account } from "@bitwarden/common/models/domain/account";
 
+type ActiveAccount = {
+  id: string;
+  name: string;
+  email: string;
+};
+
 export class SwitcherAccount extends Account {
   get serverUrl() {
     return this.removeWebProtocolFromString(
@@ -48,11 +56,12 @@ export class SwitcherAccount extends Account {
     ]),
   ],
 })
-// eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class AccountSwitcherComponent implements OnInit {
+export class AccountSwitcherComponent implements OnInit, OnDestroy {
+  private destroy$ = new Subject<void>();
+
   isOpen = false;
   accounts: { [userId: string]: SwitcherAccount } = {};
-  activeAccountEmail: string;
+  activeAccount?: ActiveAccount;
   serverUrl: string;
   authStatus = AuthenticationStatus;
   overlayPostition: ConnectedPosition[] = [
@@ -65,7 +74,7 @@ export class AccountSwitcherComponent implements OnInit {
   ];
 
   get showSwitcher() {
-    const userIsInAVault = !Utils.isNullOrWhitespace(this.activeAccountEmail);
+    const userIsInAVault = !Utils.isNullOrWhitespace(this.activeAccount?.email);
     const userIsAddingAnAdditionalAccount = Object.keys(this.accounts).length > 0;
     return userIsInAVault || userIsAddingAnAdditionalAccount;
   }
@@ -81,21 +90,39 @@ export class AccountSwitcherComponent implements OnInit {
   constructor(
     private stateService: StateService,
     private authService: AuthService,
-    private messagingService: MessagingService
+    private messagingService: MessagingService,
+    private tokenService: TokenService
   ) {}
 
   async ngOnInit(): Promise<void> {
-    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
-    this.stateService.accounts.subscribe(async (accounts: { [userId: string]: Account }) => {
-      for (const userId in accounts) {
-        accounts[userId].profile.authenticationStatus = await this.authService.getAuthStatus(
-          userId
-        );
-      }
+    this.stateService.accounts
+      .pipe(
+        concatMap(async (accounts: { [userId: string]: Account }) => {
+          for (const userId in accounts) {
+            accounts[userId].profile.authenticationStatus = await this.authService.getAuthStatus(
+              userId
+            );
+          }
 
-      this.accounts = await this.createSwitcherAccounts(accounts);
-      this.activeAccountEmail = await this.stateService.getEmail();
-    });
+          this.accounts = await this.createSwitcherAccounts(accounts);
+          try {
+            this.activeAccount = {
+              id: await this.tokenService.getUserId(),
+              name: (await this.tokenService.getName()) ?? (await this.tokenService.getEmail()),
+              email: await this.tokenService.getEmail(),
+            };
+          } catch {
+            this.activeAccount = undefined;
+          }
+        }),
+        takeUntil(this.destroy$)
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   toggle() {
diff --git a/apps/desktop/src/app/shared/shared.module.ts b/apps/desktop/src/app/shared/shared.module.ts
index 849880435a..e08d29c4d1 100644
--- a/apps/desktop/src/app/shared/shared.module.ts
+++ b/apps/desktop/src/app/shared/shared.module.ts
@@ -10,6 +10,7 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 
+import { AvatarComponent } from "../components/avatar.component";
 import { ServicesModule } from "../services/services.module";
 
 @NgModule({
@@ -25,6 +26,7 @@ import { ServicesModule } from "../services/services.module";
     ScrollingModule,
     ServicesModule,
   ],
+  declarations: [AvatarComponent],
   exports: [
     A11yModule,
     BrowserAnimationsModule,
@@ -37,6 +39,7 @@ import { ServicesModule } from "../services/services.module";
     ReactiveFormsModule,
     ScrollingModule,
     ServicesModule,
+    AvatarComponent,
   ],
   providers: [DatePipe],
 })
diff --git a/apps/web/src/app/components/organization-switcher.component.html b/apps/web/src/app/components/organization-switcher.component.html
index 1cd9c090d5..ca3995bf46 100644
--- a/apps/web/src/app/components/organization-switcher.component.html
+++ b/apps/web/src/app/components/organization-switcher.component.html
@@ -6,12 +6,7 @@
     [appA11yTitle]="'organizationPicker' | i18n"
     [bitMenuTriggerFor]="orgPickerMenu"
   >
-    <app-avatar
-      [data]="activeOrganization.name"
-      size="45"
-      [circle]="true"
-      [dynamic]="true"
-    ></app-avatar>
+    <bit-avatar [text]="activeOrganization.name" [id]="activeOrganization.id"></bit-avatar>
     <div class="tw-flex">
       <div class="org-name tw-ml-3">
         <span>{{ activeOrganization.name }}</span>
diff --git a/apps/web/src/app/layouts/navbar.component.html b/apps/web/src/app/layouts/navbar.component.html
index 97b045b975..b7e5a69fb6 100644
--- a/apps/web/src/app/layouts/navbar.component.html
+++ b/apps/web/src/app/layouts/navbar.component.html
@@ -54,13 +54,7 @@
               *ngIf="name"
               appStopProp
             >
-              <app-avatar
-                [data]="name"
-                [email]="email"
-                size="25"
-                fontSize="14"
-                [circle]="true"
-              ></app-avatar>
+              <bit-avatar [text]="name" [id]="userId" size="small"></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">{{
diff --git a/apps/web/src/app/layouts/navbar.component.ts b/apps/web/src/app/layouts/navbar.component.ts
index 573adfacca..8696f6eb32 100644
--- a/apps/web/src/app/layouts/navbar.component.ts
+++ b/apps/web/src/app/layouts/navbar.component.ts
@@ -24,6 +24,7 @@ export class NavbarComponent implements OnInit {
   name: string;
   email: string;
   providers: Provider[] = [];
+  userId: string;
   organizations$: Observable<Organization[]>;
 
   constructor(
@@ -41,6 +42,7 @@ export class NavbarComponent implements OnInit {
   async ngOnInit() {
     this.name = await this.tokenService.getName();
     this.email = await this.tokenService.getEmail();
+    this.userId = await this.tokenService.getUserId();
     if (this.name == null || this.name.trim() === "") {
       this.name = this.email;
     }
diff --git a/apps/web/src/app/organizations/manage/bulk/bulk-confirm.component.html b/apps/web/src/app/organizations/manage/bulk/bulk-confirm.component.html
index 595f9d767e..27bb77df17 100644
--- a/apps/web/src/app/organizations/manage/bulk/bulk-confirm.component.html
+++ b/apps/web/src/app/organizations/manage/bulk/bulk-confirm.component.html
@@ -41,14 +41,7 @@
             </thead>
             <tr *ngFor="let user of filteredUsers">
               <td width="30">
-                <app-avatar
-                  [data]="user | userName"
-                  [email]="user.email"
-                  size="25"
-                  [circle]="true"
-                  [fontSize]="14"
-                >
-                </app-avatar>
+                <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
               </td>
               <td>
                 {{ user.email }}
@@ -60,14 +53,7 @@
             </tr>
             <tr *ngFor="let user of excludedUsers">
               <td width="30">
-                <app-avatar
-                  [data]="user | userName"
-                  [email]="user.email"
-                  size="25"
-                  [circle]="true"
-                  [fontSize]="14"
-                >
-                </app-avatar>
+                <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
               </td>
               <td>
                 {{ user.email }}
@@ -89,14 +75,7 @@
             </thead>
             <tr *ngFor="let user of filteredUsers">
               <td width="30">
-                <app-avatar
-                  [data]="user | userName"
-                  [email]="user.email"
-                  size="25"
-                  [circle]="true"
-                  [fontSize]="14"
-                >
-                </app-avatar>
+                <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
               </td>
               <td>
                 {{ user.email }}
diff --git a/apps/web/src/app/organizations/manage/bulk/bulk-remove.component.html b/apps/web/src/app/organizations/manage/bulk/bulk-remove.component.html
index d17b52e89a..65230f6c05 100644
--- a/apps/web/src/app/organizations/manage/bulk/bulk-remove.component.html
+++ b/apps/web/src/app/organizations/manage/bulk/bulk-remove.component.html
@@ -33,14 +33,7 @@
             </thead>
             <tr *ngFor="let user of users">
               <td width="30">
-                <app-avatar
-                  [data]="user | userName"
-                  [email]="user.email"
-                  size="25"
-                  [circle]="true"
-                  [fontSize]="14"
-                >
-                </app-avatar>
+                <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
               </td>
               <td>
                 {{ user.email }}
@@ -59,14 +52,7 @@
             </thead>
             <tr *ngFor="let user of users">
               <td width="30">
-                <app-avatar
-                  [data]="user | userName"
-                  [email]="user.email"
-                  size="25"
-                  [circle]="true"
-                  [fontSize]="14"
-                >
-                </app-avatar>
+                <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
               </td>
               <td>
                 {{ user.email }}
diff --git a/apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html b/apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html
index 87b7af791e..9d29121037 100644
--- a/apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html
+++ b/apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html
@@ -33,14 +33,7 @@
             </thead>
             <tr *ngFor="let user of users">
               <td width="30">
-                <app-avatar
-                  [data]="user | userName"
-                  [email]="user.email"
-                  size="25"
-                  [circle]="true"
-                  [fontSize]="14"
-                >
-                </app-avatar>
+                <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
               </td>
               <td>
                 {{ user.email }}
@@ -59,14 +52,7 @@
             </thead>
             <tr *ngFor="let user of users">
               <td width="30">
-                <app-avatar
-                  [data]="user | userName"
-                  [email]="user.email"
-                  size="25"
-                  [circle]="true"
-                  [fontSize]="14"
-                >
-                </app-avatar>
+                <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
               </td>
               <td>
                 {{ user.email }}
diff --git a/apps/web/src/app/organizations/manage/bulk/bulk-status.component.html b/apps/web/src/app/organizations/manage/bulk/bulk-status.component.html
index 86bacda38c..004bb21389 100644
--- a/apps/web/src/app/organizations/manage/bulk/bulk-status.component.html
+++ b/apps/web/src/app/organizations/manage/bulk/bulk-status.component.html
@@ -28,13 +28,11 @@
           </thead>
           <tr *ngFor="let item of users">
             <td width="30">
-              <app-avatar
-                [data]="item.user | userName"
-                [email]="item.user.email"
-                size="25"
-                [circle]="true"
-                [fontSize]="14"
-              ></app-avatar>
+              <bit-avatar
+                [text]="item.user | userName"
+                [id]="item.user.id"
+                size="small"
+              ></bit-avatar>
             </td>
             <td>
               {{ item.user.email }}
diff --git a/apps/web/src/app/organizations/manage/entity-users.component.html b/apps/web/src/app/organizations/manage/entity-users.component.html
index 0f95fafc41..e9296973a7 100644
--- a/apps/web/src/app/organizations/manage/entity-users.component.html
+++ b/apps/web/src/app/organizations/manage/entity-users.component.html
@@ -101,14 +101,7 @@
                   />
                 </td>
                 <td width="30" (click)="check(u)">
-                  <app-avatar
-                    [data]="u | userName"
-                    [email]="u.email"
-                    size="25"
-                    [circle]="true"
-                    [fontSize]="14"
-                  >
-                  </app-avatar>
+                  <bit-avatar [text]="u | userName" [id]="u.id" size="small"></bit-avatar>
                 </td>
                 <td>
                   {{ u.email }}
diff --git a/apps/web/src/app/organizations/manage/people.component.html b/apps/web/src/app/organizations/manage/people.component.html
index ff583bcf36..58ce6043b1 100644
--- a/apps/web/src/app/organizations/manage/people.component.html
+++ b/apps/web/src/app/organizations/manage/people.component.html
@@ -141,14 +141,7 @@
             <input type="checkbox" [(ngModel)]="u.checked" appStopProp />
           </td>
           <td width="30">
-            <app-avatar
-              [data]="u | userName"
-              [email]="u.email"
-              size="25"
-              [circle]="true"
-              [fontSize]="14"
-            >
-            </app-avatar>
+            <bit-avatar [text]="u | userName" [id]="u.userId" size="small"></bit-avatar>
           </td>
           <td>
             <a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>
diff --git a/apps/web/src/app/organizations/settings/account.component.html b/apps/web/src/app/organizations/settings/account.component.html
index 1f2e145ae7..8955c65155 100644
--- a/apps/web/src/app/organizations/settings/account.component.html
+++ b/apps/web/src/app/organizations/settings/account.component.html
@@ -63,7 +63,7 @@
       </div>
     </div>
     <div class="col-6">
-      <app-avatar data="{{ org.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
+      <bit-avatar [text]="org.name" [id]="org.id" size="large"></bit-avatar>
     </div>
   </div>
   <button type="submit" buttonType="primary" bitButton [loading]="form.loading">
diff --git a/apps/web/src/app/providers/providers.component.html b/apps/web/src/app/providers/providers.component.html
index e91b7cb44e..967ef54ce8 100644
--- a/apps/web/src/app/providers/providers.component.html
+++ b/apps/web/src/app/providers/providers.component.html
@@ -12,7 +12,7 @@
       <tbody>
         <tr *ngFor="let p of providers">
           <td width="30">
-            <app-avatar [data]="p.name" size="25" [circle]="true" [fontSize]="14"></app-avatar>
+            <bit-avatar [text]="p.name" [id]="p.id" size="small"></bit-avatar>
           </td>
           <td>
             <a href="#" [routerLink]="['/providers', p.id]">{{ p.name }}</a>
diff --git a/apps/web/src/app/settings/emergency-access.component.html b/apps/web/src/app/settings/emergency-access.component.html
index 8d79d1aa02..fbf646d566 100644
--- a/apps/web/src/app/settings/emergency-access.component.html
+++ b/apps/web/src/app/settings/emergency-access.component.html
@@ -34,14 +34,7 @@
   <tbody>
     <tr *ngFor="let c of trustedContacts; let i = index">
       <td width="30">
-        <app-avatar
-          [data]="c | userName"
-          [email]="c.email"
-          size="25"
-          [circle]="true"
-          [fontSize]="14"
-        >
-        </app-avatar>
+        <bit-avatar [text]="c | userName" [id]="c.granteeId" size="small"></bit-avatar>
       </td>
       <td>
         <a href="#" appStopClick (click)="edit(c)">{{ c.email }}</a>
@@ -149,14 +142,7 @@
   <tbody>
     <tr *ngFor="let c of grantedContacts; let i = index">
       <td width="30">
-        <app-avatar
-          [data]="c | userName"
-          [email]="c.email"
-          size="25"
-          [circle]="true"
-          [fontSize]="14"
-        >
-        </app-avatar>
+        <bit-avatar [text]="c | userName" [id]="c.grantorId" size="small"></bit-avatar>
       </td>
       <td>
         <span>{{ c.email }}</span>
diff --git a/apps/web/src/app/settings/preferences.component.html b/apps/web/src/app/settings/preferences.component.html
index b1eb635d19..fc2ede374c 100644
--- a/apps/web/src/app/settings/preferences.component.html
+++ b/apps/web/src/app/settings/preferences.component.html
@@ -90,29 +90,6 @@
     </div>
     <small class="form-text text-muted">{{ "faviconDesc" | i18n }}</small>
   </div>
-  <div class="form-group">
-    <div class="form-check">
-      <input
-        class="form-check-input"
-        type="checkbox"
-        id="enableGravatars"
-        name="enableGravatars"
-        [(ngModel)]="enableGravatars"
-      />
-      <label class="form-check-label" for="enableGravatars">
-        {{ "enableGravatars" | i18n }}
-      </label>
-      <a
-        href="https://gravatar.com/"
-        target="_blank"
-        rel="noopener"
-        appA11yTitle="{{ 'learnMore' | i18n }}"
-      >
-        <i class="bwi bwi-question-circle" aria-hidden="true"></i>
-      </a>
-    </div>
-    <small class="form-text text-muted">{{ "enableGravatarsDesc" | i18n }}</small>
-  </div>
   <div class="form-group">
     <div class="form-check">
       <input
diff --git a/apps/web/src/app/settings/preferences.component.ts b/apps/web/src/app/settings/preferences.component.ts
index c96a1368fe..f8282d7453 100644
--- a/apps/web/src/app/settings/preferences.component.ts
+++ b/apps/web/src/app/settings/preferences.component.ts
@@ -17,7 +17,6 @@ import { Utils } from "@bitwarden/common/misc/utils";
 export class PreferencesComponent implements OnInit {
   vaultTimeoutAction = "lock";
   enableFavicons: boolean;
-  enableGravatars: boolean;
   enableFullWidth: boolean;
   theme: ThemeType;
   locale: string;
@@ -73,7 +72,6 @@ export class PreferencesComponent implements OnInit {
     this.vaultTimeout.setValue(await this.vaultTimeoutSettingsService.getVaultTimeout());
     this.vaultTimeoutAction = await this.stateService.getVaultTimeoutAction();
     this.enableFavicons = !(await this.stateService.getDisableFavicon());
-    this.enableGravatars = await this.stateService.getEnableGravitars();
     this.enableFullWidth = await this.stateService.getEnableFullWidth();
 
     this.locale = (await this.stateService.getLocale()) ?? null;
@@ -98,7 +96,6 @@ export class PreferencesComponent implements OnInit {
       this.vaultTimeoutAction
     );
     await this.stateService.setDisableFavicon(!this.enableFavicons);
-    await this.stateService.setEnableGravitars(this.enableGravatars);
     await this.stateService.setEnableFullWidth(this.enableFullWidth);
     this.messagingService.send("setFullWidth");
     if (this.theme !== this.startingTheme) {
diff --git a/apps/web/src/app/settings/profile.component.html b/apps/web/src/app/settings/profile.component.html
index c7184985df..d6c5dea6fa 100644
--- a/apps/web/src/app/settings/profile.component.html
+++ b/apps/web/src/app/settings/profile.component.html
@@ -33,14 +33,7 @@
     </div>
     <div class="col-6">
       <div class="mb-3">
-        <app-avatar
-          data="{{ profile | userName }}"
-          [email]="profile.email"
-          dynamic="true"
-          size="75"
-          fontSize="35"
-        >
-        </app-avatar>
+        <bit-avatar [text]="profile | userName" [id]="profile.id" size="large"></bit-avatar>
       </div>
       <hr />
       <p *ngIf="fingerprint">
diff --git a/apps/web/src/app/shared/shared.module.ts b/apps/web/src/app/shared/shared.module.ts
index f8c79ebb5e..e64f3e70b5 100644
--- a/apps/web/src/app/shared/shared.module.ts
+++ b/apps/web/src/app/shared/shared.module.ts
@@ -8,13 +8,14 @@ import { ToastrModule } from "ngx-toastr";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import {
+  AsyncActionsModule,
+  AvatarModule,
   BadgeModule,
   ButtonModule,
   CalloutModule,
   FormFieldModule,
-  MenuModule,
   IconModule,
-  AsyncActionsModule,
+  MenuModule,
 } from "@bitwarden/components";
 
 // Register the locales for the application
@@ -45,6 +46,7 @@ import "./locales";
     MenuModule,
     FormFieldModule,
     IconModule,
+    AvatarModule,
   ],
   exports: [
     CommonModule,
@@ -64,6 +66,7 @@ import "./locales";
     MenuModule,
     FormFieldModule,
     IconModule,
+    AvatarModule,
   ],
   providers: [DatePipe],
   bootstrap: [],
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 2a5646424f..ab1fe4f8cf 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -1235,13 +1235,6 @@
   "faviconDesc": {
     "message": "Show a recognizable image next to each login."
   },
-  "enableGravatars": {
-    "message": "Show Gravatars",
-    "description": "Use avatar images loaded from gravatar.com."
-  },
-  "enableGravatarsDesc": {
-    "message": "Use avatar images loaded from gravatar.com."
-  },
   "enableFullWidth": {
     "message": "Display full width layout",
     "description": "Allows scaling the web vault UI's width"
diff --git a/apps/web/webpack.config.js b/apps/web/webpack.config.js
index a7a75b0d5d..cecfbea399 100644
--- a/apps/web/webpack.config.js
+++ b/apps/web/webpack.config.js
@@ -243,7 +243,6 @@ const devServer =
                   https://www.paypalobjects.com
                   https://q.stripe.com
                   https://haveibeenpwned.com
-                  https://www.gravatar.com
                 ;child-src
                   'self'
                   https://js.stripe.com
diff --git a/bitwarden_license/bit-web/src/app/providers/clients/add-organization.component.html b/bitwarden_license/bit-web/src/app/providers/clients/add-organization.component.html
index 1b87269006..1b54194c4c 100644
--- a/bitwarden_license/bit-web/src/app/providers/clients/add-organization.component.html
+++ b/bitwarden_license/bit-web/src/app/providers/clients/add-organization.component.html
@@ -23,7 +23,7 @@
           <table class="table table-hover table-list">
             <tr *ngFor="let o of organizations">
               <td width="30">
-                <app-avatar [data]="o.name" size="25" [circle]="true" [fontSize]="14"></app-avatar>
+                <bit-avatar [text]="o.name" [id]="o.id" size="small"></bit-avatar>
               </td>
               <td>
                 {{ o.name }}
diff --git a/bitwarden_license/bit-web/src/app/providers/clients/clients.component.html b/bitwarden_license/bit-web/src/app/providers/clients/clients.component.html
index 7e48c1b288..fdde32316a 100644
--- a/bitwarden_license/bit-web/src/app/providers/clients/clients.component.html
+++ b/bitwarden_license/bit-web/src/app/providers/clients/clients.component.html
@@ -59,12 +59,7 @@
       <tbody>
         <tr *ngFor="let o of searchedClients">
           <td width="30">
-            <app-avatar
-              [data]="o.organizationName"
-              size="25"
-              [circle]="true"
-              [fontSize]="14"
-            ></app-avatar>
+            <bit-avatar [text]="o.organizationName" [id]="o.id" size="small"></bit-avatar>
           </td>
           <td>
             <a [routerLink]="['/organizations', o.organizationId]">{{ o.organizationName }}</a>
diff --git a/bitwarden_license/bit-web/src/app/providers/manage/people.component.html b/bitwarden_license/bit-web/src/app/providers/manage/people.component.html
index 0171948e5b..5eaa94303c 100644
--- a/bitwarden_license/bit-web/src/app/providers/manage/people.component.html
+++ b/bitwarden_license/bit-web/src/app/providers/manage/people.component.html
@@ -124,14 +124,7 @@
             <input type="checkbox" [(ngModel)]="u.checked" appStopProp />
           </td>
           <td width="30">
-            <app-avatar
-              [data]="u | userName"
-              [email]="u.email"
-              size="25"
-              [circle]="true"
-              [fontSize]="14"
-            >
-            </app-avatar>
+            <bit-avatar [text]="u | userName" [id]="u.userId" size="small"></bit-avatar>
           </td>
           <td>
             <a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>
diff --git a/bitwarden_license/bit-web/src/app/providers/providers-layout.component.html b/bitwarden_license/bit-web/src/app/providers/providers-layout.component.html
index f5546f909e..8204b0b6f4 100644
--- a/bitwarden_license/bit-web/src/app/providers/providers-layout.component.html
+++ b/bitwarden_license/bit-web/src/app/providers/providers-layout.component.html
@@ -3,7 +3,7 @@
   <div class="container d-flex">
     <div class="d-flex flex-column">
       <div class="my-auto d-flex align-items-center pl-1">
-        <app-avatar [data]="provider.name" size="45" [circle]="true"></app-avatar>
+        <bit-avatar [text]="provider.name" [id]="provider.id"></bit-avatar>
         <div class="org-name ml-3">
           <span>{{ provider.name }}</span>
           <small class="text-muted">{{ "provider" | i18n }}</small>
diff --git a/bitwarden_license/bit-web/src/app/providers/settings/account.component.html b/bitwarden_license/bit-web/src/app/providers/settings/account.component.html
index f58e712ce3..dcb3952143 100644
--- a/bitwarden_license/bit-web/src/app/providers/settings/account.component.html
+++ b/bitwarden_license/bit-web/src/app/providers/settings/account.component.html
@@ -42,7 +42,7 @@
       </div>
     </div>
     <div class="col-6">
-      <app-avatar data="{{ provider.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
+      <bit-avatar [text]="provider.name" [id]="provider.id" size="large"></bit-avatar>
     </div>
   </div>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
diff --git a/libs/angular/src/components/avatar.component.ts b/libs/angular/src/components/avatar.component.ts
deleted file mode 100644
index 14b61c2351..0000000000
--- a/libs/angular/src/components/avatar.component.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import { Component, Input, OnChanges, OnInit } from "@angular/core";
-import { DomSanitizer } from "@angular/platform-browser";
-
-import { CryptoFunctionService } from "@bitwarden/common/abstractions/cryptoFunction.service";
-import { StateService } from "@bitwarden/common/abstractions/state.service";
-import { Utils } from "@bitwarden/common/misc/utils";
-
-@Component({
-  selector: "app-avatar",
-  template:
-    '<img *ngIf="src" [src]="sanitizer.bypassSecurityTrustResourceUrl(src)" title="{{data}}" ' +
-    "[ngClass]=\"{'rounded-circle': circle}\">",
-})
-export class AvatarComponent implements OnChanges, OnInit {
-  @Input() data: string;
-  @Input() email: string;
-  @Input() size = 45;
-  @Input() charCount = 2;
-  @Input() textColor = "#ffffff";
-  @Input() fontSize = 20;
-  @Input() fontWeight = 300;
-  @Input() dynamic = false;
-  @Input() circle = false;
-
-  src: string;
-
-  constructor(
-    public sanitizer: DomSanitizer,
-    private cryptoFunctionService: CryptoFunctionService,
-    private stateService: StateService
-  ) {}
-
-  ngOnInit() {
-    if (!this.dynamic) {
-      this.generate();
-    }
-  }
-
-  ngOnChanges() {
-    if (this.dynamic) {
-      this.generate();
-    }
-  }
-
-  private async generate() {
-    const enableGravatars = await this.stateService.getEnableGravitars();
-    if (enableGravatars && this.email != null) {
-      const hashBytes = await this.cryptoFunctionService.hash(
-        this.email.toLowerCase().trim(),
-        "md5"
-      );
-      const hash = Utils.fromBufferToHex(hashBytes).toLowerCase();
-      this.src = "https://www.gravatar.com/avatar/" + hash + "?s=" + this.size + "&r=pg&d=retro";
-    } else {
-      let chars: string = null;
-      const upperData = this.data.toUpperCase();
-
-      if (this.charCount > 1) {
-        chars = this.getFirstLetters(upperData, this.charCount);
-      }
-      if (chars == null) {
-        chars = this.unicodeSafeSubstring(upperData, this.charCount);
-      }
-
-      // If the chars contain an emoji, only show it.
-      if (chars.match(Utils.regexpEmojiPresentation)) {
-        chars = chars.match(Utils.regexpEmojiPresentation)[0];
-      }
-
-      const charObj = this.getCharText(chars);
-      const color = Utils.stringToColor(upperData);
-      const svg = this.getSvg(this.size, color);
-      svg.appendChild(charObj);
-      const html = window.document.createElement("div").appendChild(svg).outerHTML;
-      const svgHtml = window.btoa(unescape(encodeURIComponent(html)));
-      this.src = "data:image/svg+xml;base64," + svgHtml;
-    }
-  }
-
-  private getFirstLetters(data: string, count: number): string {
-    const parts = data.split(" ");
-    if (parts.length > 1) {
-      let text = "";
-      for (let i = 0; i < count; i++) {
-        text += this.unicodeSafeSubstring(parts[i], 1);
-      }
-      return text;
-    }
-    return null;
-  }
-
-  private getSvg(size: number, color: string): HTMLElement {
-    const svgTag = window.document.createElement("svg");
-    svgTag.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    svgTag.setAttribute("pointer-events", "none");
-    svgTag.setAttribute("width", size.toString());
-    svgTag.setAttribute("height", size.toString());
-    svgTag.style.backgroundColor = color;
-    svgTag.style.width = size + "px";
-    svgTag.style.height = size + "px";
-    return svgTag;
-  }
-
-  private getCharText(character: string): HTMLElement {
-    const textTag = window.document.createElement("text");
-    textTag.setAttribute("text-anchor", "middle");
-    textTag.setAttribute("y", "50%");
-    textTag.setAttribute("x", "50%");
-    textTag.setAttribute("dy", "0.35em");
-    textTag.setAttribute("pointer-events", "auto");
-    textTag.setAttribute("fill", this.textColor);
-    textTag.setAttribute(
-      "font-family",
-      '"Open Sans","Helvetica Neue",Helvetica,Arial,' +
-        'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
-    );
-    textTag.textContent = character;
-    textTag.style.fontWeight = this.fontWeight.toString();
-    textTag.style.fontSize = this.fontSize + "px";
-    return textTag;
-  }
-
-  private unicodeSafeSubstring(str: string, count: number) {
-    const characters = str.match(/./gu);
-    return characters != null ? characters.slice(0, count).join("") : "";
-  }
-}
diff --git a/libs/angular/src/jslib.module.ts b/libs/angular/src/jslib.module.ts
index 1bd05be4d7..0d6cb64f0e 100644
--- a/libs/angular/src/jslib.module.ts
+++ b/libs/angular/src/jslib.module.ts
@@ -2,7 +2,6 @@ import { CommonModule, DatePipe } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 
-import { AvatarComponent } from "./components/avatar.component";
 import { CalloutComponent } from "./components/callout.component";
 import { ExportScopeCalloutComponent } from "./components/export-scope-callout.component";
 import { IconComponent } from "./components/icon.component";
@@ -46,7 +45,6 @@ import { PasswordStrengthComponent } from "./shared/components/password-strength
     A11yTitleDirective,
     ApiActionDirective,
     AutofocusDirective,
-    AvatarComponent,
     BoxRowDirective,
     CalloutComponent,
     ColorPasswordCountPipe,
@@ -74,7 +72,6 @@ import { PasswordStrengthComponent } from "./shared/components/password-strength
     A11yTitleDirective,
     ApiActionDirective,
     AutofocusDirective,
-    AvatarComponent,
     BitwardenToastModule,
     BoxRowDirective,
     CalloutComponent,
diff --git a/libs/common/spec/misc/logInStrategies/logIn.strategy.spec.ts b/libs/common/spec/misc/logInStrategies/logIn.strategy.spec.ts
index c71d0a13af..fc10cf1f0c 100644
--- a/libs/common/spec/misc/logInStrategies/logIn.strategy.spec.ts
+++ b/libs/common/spec/misc/logInStrategies/logIn.strategy.spec.ts
@@ -37,9 +37,11 @@ const kdf = 0;
 const kdfIterations = 10000;
 const userId = Utils.newGuid();
 const masterPasswordHash = "MASTER_PASSWORD_HASH";
+const name = "NAME";
 
 const decodedToken = {
   sub: userId,
+  name: name,
   email: email,
   premium: false,
 };
@@ -122,6 +124,7 @@ describe("LogInStrategy", () => {
             ...new AccountProfile(),
             ...{
               userId: userId,
+              name: name,
               email: email,
               hasPremiumPersonally: false,
               kdfIterations: kdfIterations,
diff --git a/libs/common/src/abstractions/state.service.ts b/libs/common/src/abstractions/state.service.ts
index bcc744fba0..ccd9be514f 100644
--- a/libs/common/src/abstractions/state.service.ts
+++ b/libs/common/src/abstractions/state.service.ts
@@ -173,8 +173,6 @@ export abstract class StateService<T extends Account = Account> {
   ) => Promise<void>;
   getEnableFullWidth: (options?: StorageOptions) => Promise<boolean>;
   setEnableFullWidth: (value: boolean, options?: StorageOptions) => Promise<void>;
-  getEnableGravitars: (options?: StorageOptions) => Promise<boolean>;
-  setEnableGravitars: (value: boolean, options?: StorageOptions) => Promise<void>;
   getEnableMinimizeToTray: (options?: StorageOptions) => Promise<boolean>;
   setEnableMinimizeToTray: (value: boolean, options?: StorageOptions) => Promise<void>;
   getEnableStartToTray: (options?: StorageOptions) => Promise<boolean>;
diff --git a/libs/common/src/misc/logInStrategies/logIn.strategy.ts b/libs/common/src/misc/logInStrategies/logIn.strategy.ts
index 34f3115f65..8ac3ea2b55 100644
--- a/libs/common/src/misc/logInStrategies/logIn.strategy.ts
+++ b/libs/common/src/misc/logInStrategies/logIn.strategy.ts
@@ -105,6 +105,7 @@ export abstract class LogInStrategy {
           ...new AccountProfile(),
           ...{
             userId: accountInformation.sub,
+            name: accountInformation.name,
             email: accountInformation.email,
             hasPremiumPersonally: accountInformation.premium,
             kdfIterations: tokenResponse.kdfIterations,
diff --git a/libs/common/src/models/domain/account.ts b/libs/common/src/models/domain/account.ts
index 49bb55d938..75a1eebfeb 100644
--- a/libs/common/src/models/domain/account.ts
+++ b/libs/common/src/models/domain/account.ts
@@ -175,6 +175,7 @@ export class AccountProfile {
   apiKeyClientId?: string;
   authenticationStatus?: AuthenticationStatus;
   convertAccountToKeyConnector?: boolean;
+  name?: string;
   email?: string;
   emailVerified?: boolean;
   entityId?: string;
@@ -219,7 +220,6 @@ export class AccountSettings {
   enableAutoFillOnPageLoad?: boolean;
   enableBiometric?: boolean;
   enableFullWidth?: boolean;
-  enableGravitars?: boolean;
   environmentUrls: EnvironmentUrls = new EnvironmentUrls();
   equivalentDomains?: any;
   minimizeOnCopyToClipboard?: boolean;
diff --git a/libs/common/src/services/state.service.ts b/libs/common/src/services/state.service.ts
index ff21e440ca..11751b9ec8 100644
--- a/libs/common/src/services/state.service.ts
+++ b/libs/common/src/services/state.service.ts
@@ -1228,27 +1228,6 @@ export class StateService<
     );
   }
 
-  async getEnableGravitars(options?: StorageOptions): Promise<boolean> {
-    return (
-      (
-        await this.getAccount(
-          this.reconcileOptions(options, await this.defaultOnDiskLocalOptions())
-        )
-      )?.settings?.enableGravitars ?? false
-    );
-  }
-
-  async setEnableGravitars(value: boolean, options?: StorageOptions): Promise<void> {
-    const account = await this.getAccount(
-      this.reconcileOptions(options, await this.defaultOnDiskLocalOptions())
-    );
-    account.settings.enableGravitars = value;
-    await this.saveAccount(
-      account,
-      this.reconcileOptions(options, await this.defaultOnDiskLocalOptions())
-    );
-  }
-
   async getEnableMinimizeToTray(options?: StorageOptions): Promise<boolean> {
     return (
       (await this.getGlobals(this.reconcileOptions(options, await this.defaultOnDiskOptions())))
diff --git a/libs/common/src/services/stateMigration.service.ts b/libs/common/src/services/stateMigration.service.ts
index 1ad874cb0f..4d948c600a 100644
--- a/libs/common/src/services/stateMigration.service.ts
+++ b/libs/common/src/services/stateMigration.service.ts
@@ -61,7 +61,6 @@ const v1Keys: { [key: string]: string } = {
   enableBrowserIntegrationFingerprint: "enableBrowserIntegrationFingerprint",
   enableCloseToTray: "enableCloseToTray",
   enableFullWidth: "enableFullWidth",
-  enableGravatars: "enableGravatars",
   enableMinimizeToTray: "enableMinimizeToTray",
   enableStartToTray: "enableStartToTrayKey",
   enableTray: "enableTray",
@@ -305,9 +304,6 @@ export class StateMigrationService<
       enableFullWidth:
         (await this.get<boolean>(v1Keys.enableFullWidth)) ??
         defaultAccount.settings.enableFullWidth,
-      enableGravitars:
-        (await this.get<boolean>(v1Keys.enableGravatars)) ??
-        defaultAccount.settings.enableGravitars,
       environmentUrls: globals.environmentUrls ?? defaultAccount.settings.environmentUrls,
       equivalentDomains:
         (await this.get<any>(v1Keys.equivalentDomains)) ??
diff --git a/libs/components/src/avatar/avatar.component.ts b/libs/components/src/avatar/avatar.component.ts
index 2a287ea7fd..9db2192c5b 100644
--- a/libs/components/src/avatar/avatar.component.ts
+++ b/libs/components/src/avatar/avatar.component.ts
@@ -17,9 +17,9 @@ const SizeClasses: Record<SizeTypes, string[]> = {
 })
 export class AvatarComponent implements OnChanges {
   @Input() border = false;
-  @Input() color: string;
-  @Input() id: number;
-  @Input() text: string;
+  @Input() color?: string;
+  @Input() id?: string;
+  @Input() text?: string;
   @Input() size: SizeTypes = "default";
 
   private svgCharCount = 2;
@@ -42,7 +42,7 @@ export class AvatarComponent implements OnChanges {
 
   private generate() {
     let chars: string = null;
-    const upperCaseText = this.text.toUpperCase();
+    const upperCaseText = this.text?.toUpperCase() ?? "";
 
     chars = this.getFirstLetters(upperCaseText, this.svgCharCount);
 
@@ -58,9 +58,9 @@ export class AvatarComponent implements OnChanges {
     let svg: HTMLElement;
     let hexColor = this.color;
 
-    if (this.color != null) {
+    if (!Utils.isNullOrWhitespace(this.color)) {
       svg = this.createSvgElement(this.svgSize, hexColor);
-    } else if (this.id != null) {
+    } else if (!Utils.isNullOrWhitespace(this.id)) {
       hexColor = Utils.stringToColor(this.id.toString());
       svg = this.createSvgElement(this.svgSize, hexColor);
     } else {
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index be1f5dcc5e..300334b3d5 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -1,15 +1,16 @@
 export * from "./async-actions";
+export * from "./avatar";
 export * from "./badge";
 export * from "./banner";
 export * from "./button";
 export * from "./callout";
+export * from "./dialog";
 export * from "./form-field";
-export * from "./icon";
 export * from "./icon-button";
+export * from "./icon";
+export * from "./link";
 export * from "./menu";
 export * from "./multi-select";
-export * from "./dialog";
-export * from "./link";
 export * from "./tabs";
 export * from "./toggle-group";
 export * from "./utils/i18n-mock.service";