[SG-58] Avatar color selector

apps/browser/src/background/main.background.ts

@@ -1,3 +1,4 @@
+import { AvatarUpdateService as AvatarUpdateServiceAbstraction } from "@bitwarden/common/abstractions/account/avatar-update.service";
 import { ApiService as ApiServiceAbstraction } from "@bitwarden/common/abstractions/api.service";
 import { AppIdService as AppIdServiceAbstraction } from "@bitwarden/common/abstractions/appId.service";
 import { AuditService as AuditServiceAbstraction } from "@bitwarden/common/abstractions/audit.service";
@@ -45,6 +46,7 @@ import { CipherType } from "@bitwarden/common/enums/cipherType";
 import { StateFactory } from "@bitwarden/common/factories/stateFactory";
 import { GlobalState } from "@bitwarden/common/models/domain/global-state";
 import { CipherView } from "@bitwarden/common/models/view/cipher.view";
+import { AvatarUpdateService } from "@bitwarden/common/services/account/avatar-update.service";
 import { ApiService } from "@bitwarden/common/services/api.service";
 import { AppIdService } from "@bitwarden/common/services/appId.service";
 import { AuditService } from "@bitwarden/common/services/audit.service";
@@ -168,6 +170,7 @@ export default class MainBackground {
   policyApiService: PolicyApiServiceAbstraction;
   userVerificationApiService: UserVerificationApiServiceAbstraction;
   syncNotifierService: SyncNotifierServiceAbstraction;
+  avatarUpdateService: AvatarUpdateServiceAbstraction;
 
   // Passed to the popup for Safari to workaround issues with theming, downloading, etc.
   backgroundWindow = window;
@@ -565,6 +568,8 @@ export default class MainBackground {
       this.stateService,
       this.apiService
     );
+
+    this.avatarUpdateService = new AvatarUpdateService(this.apiService, this.stateService);
   }
 
   async bootstrap() {

apps/browser/src/background/runtime.background.ts

@@ -97,6 +97,7 @@ export default class RuntimeBackground {
             await this.main.refreshBadge();
             await this.main.refreshMenu();
           }, 2000);
+          this.main.avatarUpdateService.loadColorFromState();
         }
         break;
       case "openPopup":

apps/desktop/src/app/layout/account-switcher.component.html

@@ -12,6 +12,7 @@
     <app-avatar
       [text]="activeAccount.name"
       [id]="activeAccount.id"
+      [color]="activeAccount.avatarColor"
       [size]="25"
       [circle]="true"
       [fontSize]="14"
@@ -65,6 +66,7 @@
           [circle]="true"
           [fontSize]="14"
           [dynamic]="true"
+          [color]="a.value.avatarColor"
           *ngIf="a.value.profile.email != null"
           aria-hidden="true"
         ></app-avatar>

apps/desktop/src/app/layout/account-switcher.component.ts

@@ -16,6 +16,7 @@ type ActiveAccount = {
   id: string;
   name: string;
   email: string;
+  avatarColor: string;
 };
 
 export class SwitcherAccount extends Account {
@@ -27,6 +28,8 @@ export class SwitcherAccount extends Account {
     );
   }
 
+  avatarColor: string;
+
   private removeWebProtocolFromString(urlString: string) {
     const regex = /http(s)?(:)?(\/\/)?|(\/\/)?(www\.)?/g;
     return urlString.replace(regex, "");
@@ -112,6 +115,7 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
               id: await this.tokenService.getUserId(),
               name: (await this.tokenService.getName()) ?? (await this.tokenService.getEmail()),
               email: await this.tokenService.getEmail(),
+              avatarColor: await this.stateService.getAvatarColor(),
             };
           } catch {
             this.activeAccount = undefined;
@@ -162,6 +166,9 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
         userId: userId,
       });
       switcherAccounts[userId] = new SwitcherAccount(baseAccounts[userId]);
+      switcherAccounts[userId].avatarColor = await this.stateService.getAvatarColor({
+        userId: userId,
+      });
     }
     return switcherAccounts;
   }

apps/web/src/app/components/dynamic-avatar.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnDestroy } from "@angular/core";
+import { Observable, Subject } from "rxjs";
+
+import { AvatarUpdateService } from "@bitwarden/common/abstractions/account/avatar-update.service";
+type SizeTypes = "xlarge" | "large" | "default" | "small" | "xsmall";
+@Component({
+  selector: "dynamic-avatar",
+  template: `<span [title]="title">
+    <bit-avatar
+      appStopClick
+      [text]="text"
+      [size]="size"
+      [color]="color$ | async"
+      [border]="border"
+      [id]="id"
+      [title]="title"
+    >
+    </bit-avatar>
+  </span>`,
+})
+export class DynamicAvatarComponent implements OnDestroy {
+  @Input() border = false;
+  @Input() id: string;
+  @Input() text: string;
+  @Input() title: string;
+  @Input() size: SizeTypes = "default";
+  color$: Observable<string | null>;
+  private destroy$ = new Subject<void>();
+
+  constructor(private accountUpdateService: AvatarUpdateService) {
+    if (this.text) {
+      this.text = this.text.toUpperCase();
+    }
+    this.color$ = this.accountUpdateService.avatarUpdate$;
+  }
+
+  async ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

apps/web/src/app/components/selectable-avatar.component.ts

@@ -0,0 +1,54 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+
+@Component({
+  selector: "selectable-avatar",
+  template: `<span
+    [title]="title"
+    (click)="onFire()"
+    (keyup.enter)="onFire()"
+    tabindex="0"
+    [ngClass]="classList"
+  >
+    <bit-avatar
+      appStopClick
+      [text]="text"
+      size="xlarge"
+      [text]="text"
+      [color]="color"
+      [border]="false"
+      [id]="id"
+      [border]="border"
+      [title]="title"
+    >
+    </bit-avatar>
+  </span>`,
+})
+export class SelectableAvatarComponent {
+  @Input() id: string;
+  @Input() text: string;
+  @Input() title: string;
+  @Input() color: string;
+  @Input() border = false;
+  @Input() selected = false;
+  @Output() select = new EventEmitter<string>();
+
+  onFire() {
+    this.select.emit(this.color);
+  }
+
+  get classList() {
+    return ["tw-rounded-full tw-inline-block"]
+      .concat(["tw-cursor-pointer", "tw-outline", "tw-outline-solid", "tw-outline-offset-1"])
+      .concat(
+        this.selected
+          ? ["tw-outline-[3px]", "tw-outline-primary-500"]
+          : [
+              "tw-outline-0",
+              "hover:tw-outline-1",
+              "hover:tw-outline-primary-300",
+              "focus:tw-outline-2",
+              "focus:tw-outline-primary-500",
+            ]
+      );
+  }
+}

apps/web/src/app/layouts/navbar.component.html

@@ -45,7 +45,7 @@
           [bitMenuTriggerFor]="accountMenu"
           class="tw-border-0 tw-bg-transparent tw-text-alt2 tw-opacity-70 hover:tw-opacity-90"
         >
-          <i class="bwi bwi-user-circle bwi-lg" aria-hidden="true"></i>
+          <dynamic-avatar [text]="name" size="xsmall" aria-hidden="true"></dynamic-avatar>
           <i class="bwi bwi-caret-down bwi-sm" aria-hidden="true"></i>
         </button>
         <bit-menu class="dropdown-menu" #accountMenu>
@@ -55,7 +55,7 @@
               *ngIf="name"
               appStopProp
             >
-              <bit-avatar [text]="name" [id]="userId" size="small"></bit-avatar>
+              <dynamic-avatar [text]="name" size="small"></dynamic-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">{{

apps/web/src/app/settings/change-avatar.component.html

@@ -0,0 +1,82 @@
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="customizeTitle">
+  <div class="modal-dialog modal-dialog-scrollable tw-w-[600px] tw-max-w-none" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 class="modal-title" id="customizeTitle">{{ "customizeAvatar" | i18n }}</h2>
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          appA11yTitle="{{ 'close' | i18n }}"
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="card-body text-center" *ngIf="loading">
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          {{ "loading" | i18n }}
+        </div>
+        <app-callout type="error" *ngIf="error">
+          {{ error }}
+        </app-callout>
+        <p class="tw-text-lg">{{ "pickAnAvatarColor" | i18n }}</p>
+        <div class="tw-flex tw-flex-wrap tw-justify-center tw-gap-8 tw-gap-y-8">
+          <ng-container *ngFor="let c of defaultColorPalette">
+            <selectable-avatar
+              appStopClick
+              (select)="setSelection(c.color)"
+              [selected]="c.selected"
+              [title]="c.name"
+              text="{{ profile | userName }}"
+              [color]="c.color"
+              [border]="true"
+            >
+            </selectable-avatar>
+          </ng-container>
+          <span>
+            <span
+              [tabIndex]="0"
+              (keyup.enter)="showCustomPicker()"
+              (click)="showCustomPicker()"
+              title="{{ 'customColor' | i18n }}"
+              [ngClass]="{
+                '!tw-outline-[3px] tw-outline-primary-500 hover:tw-outline-[3px] hover:tw-outline-primary-500':
+                  customColorSelected
+              }"
+              class="tw-outline-solid tw-bg-white tw-relative tw-inline-block tw-flex tw-h-24 tw-w-24 tw-cursor-pointer tw-place-content-center tw-content-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-border-secondary-500 tw-outline tw-outline-0 tw-outline-offset-1 hover:tw-outline-1 hover:tw-outline-primary-300 focus:tw-outline-2 focus:tw-outline-primary-500"
+              [style.background-color]="customColor$ | async"
+            >
+              <i
+                [style.color]="customTextColor$ | async"
+                class="bwi bwi-pencil tw-m-auto tw-text-3xl"
+              ></i>
+              <input
+                tabindex="-1"
+                class="tw-absolute tw-right-0 tw-bottom-0 tw-h-px tw-w-px tw-border-none tw-bg-transparent tw-opacity-0"
+                #colorPicker
+                type="color"
+                [ngModel]="customColor$ | async"
+                (ngModelChange)="customColor$.next($event)"
+              />
+            </span>
+          </span>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button
+          type="submit"
+          class="btn btn-primary btn-submit"
+          [disabled]="loading"
+          (click)="submit()"
+        >
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <span>{{ "save" | i18n }}</span>
+        </button>
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+          {{ "close" | i18n }}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>