From a1442194ae188fa8351e5b2862db41ebf68a380a Mon Sep 17 00:00:00 2001 From: KiruthigaManivannan <162679756+KiruthigaManivannan@users.noreply.github.com> Date: Thu, 6 Jun 2024 19:23:02 +0530 Subject: [PATCH] PM-2047 Migrated Change Avatar component (#8522) * PM-2047 Migrated Change Avatar component * PM-2047 Addressed the review comments * PM-2047 Changed the file name * PM-2047 Removed form promise --- .../change-avatar-dialog.component.html | 61 ++++++++++++++ ...t.ts => change-avatar-dialog.component.ts} | 51 +++++------ .../account/change-avatar.component.html | 84 ------------------- .../settings/account/profile.component.html | 1 - .../settings/account/profile.component.ts | 32 +++---- .../src/app/shared/loose-components.module.ts | 6 +- 6 files changed, 101 insertions(+), 134 deletions(-) create mode 100644 apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html rename apps/web/src/app/auth/settings/account/{change-avatar.component.ts => change-avatar-dialog.component.ts} (78%) delete mode 100644 apps/web/src/app/auth/settings/account/change-avatar.component.html diff --git a/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html new file mode 100644 index 0000000000..fd65192bee --- /dev/null +++ b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html @@ -0,0 +1,61 @@ + + +
+ + {{ "loading" | i18n }} +
+ + {{ error }} + +

{{ "pickAnAvatarColor" | i18n }}

+
+ + + + + + + + + + +
+ + + + + + diff --git a/apps/web/src/app/auth/settings/account/change-avatar.component.ts b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts similarity index 78% rename from apps/web/src/app/auth/settings/account/change-avatar.component.ts rename to apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts index bbcbaf6820..6946f8b94b 100644 --- a/apps/web/src/app/auth/settings/account/change-avatar.component.ts +++ b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts @@ -1,11 +1,10 @@ +import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog"; import { Component, ElementRef, - EventEmitter, - Input, + Inject, OnDestroy, OnInit, - Output, ViewChild, ViewEncapsulation, } from "@angular/core"; @@ -14,20 +13,20 @@ import { BehaviorSubject, debounceTime, firstValueFrom, Subject, takeUntil } fro import { AvatarService } from "@bitwarden/common/auth/abstractions/avatar.service"; import { ProfileResponse } from "@bitwarden/common/models/response/profile.response"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; -import { LogService } from "@bitwarden/common/platform/abstractions/log.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { Utils } from "@bitwarden/common/platform/misc/utils"; +import { DialogService } from "@bitwarden/components"; + +type ChangeAvatarDialogData = { + profile: ProfileResponse; +}; @Component({ - selector: "app-change-avatar", - templateUrl: "change-avatar.component.html", + templateUrl: "change-avatar-dialog.component.html", encapsulation: ViewEncapsulation.None, }) -export class ChangeAvatarComponent implements OnInit, OnDestroy { - @Input() profile: ProfileResponse; - - @Output() changeColor: EventEmitter = new EventEmitter(); - @Output() onSaved = new EventEmitter(); +export class ChangeAvatarDialogComponent implements OnInit, OnDestroy { + profile: ProfileResponse; @ViewChild("colorPicker") colorPickerElement: ElementRef; @@ -52,11 +51,14 @@ export class ChangeAvatarComponent implements OnInit, OnDestroy { private destroy$ = new Subject(); constructor( + @Inject(DIALOG_DATA) protected data: ChangeAvatarDialogData, private i18nService: I18nService, private platformUtilsService: PlatformUtilsService, - private logService: LogService, private avatarService: AvatarService, - ) {} + private dialogRef: DialogRef, + ) { + this.profile = data.profile; + } async ngOnInit() { //localize the default colors @@ -88,20 +90,15 @@ export class ChangeAvatarComponent implements OnInit, OnDestroy { Utils.stringToColor(this.profile.name.toString()); } - async submit() { - try { - if (Utils.validateHexColor(this.currentSelection) || this.currentSelection == null) { - await this.avatarService.setAvatarColor(this.currentSelection); - this.changeColor.emit(this.currentSelection); - this.platformUtilsService.showToast("success", null, this.i18nService.t("avatarUpdated")); - } else { - this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred")); - } - } catch (e) { - this.logService.error(e); + submit = async () => { + if (Utils.validateHexColor(this.currentSelection) || this.currentSelection == null) { + await this.avatarService.setAvatarColor(this.currentSelection); + this.dialogRef.close(); + this.platformUtilsService.showToast("success", null, this.i18nService.t("avatarUpdated")); + } else { this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred")); } - } + }; async ngOnDestroy() { this.destroy$.next(); @@ -131,6 +128,10 @@ export class ChangeAvatarComponent implements OnInit, OnDestroy { } } } + + static open(dialogService: DialogService, config: DialogConfig) { + return dialogService.open(ChangeAvatarDialogComponent, config); + } } export class NamedAvatarColor { diff --git a/apps/web/src/app/auth/settings/account/change-avatar.component.html b/apps/web/src/app/auth/settings/account/change-avatar.component.html deleted file mode 100644 index 3a974241d5..0000000000 --- a/apps/web/src/app/auth/settings/account/change-avatar.component.html +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/apps/web/src/app/auth/settings/account/profile.component.html b/apps/web/src/app/auth/settings/account/profile.component.html index 88f73945f2..4464824c63 100644 --- a/apps/web/src/app/auth/settings/account/profile.component.html +++ b/apps/web/src/app/auth/settings/account/profile.component.html @@ -45,4 +45,3 @@ - diff --git a/apps/web/src/app/auth/settings/account/profile.component.ts b/apps/web/src/app/auth/settings/account/profile.component.ts index 64c5687c0b..33463b689c 100644 --- a/apps/web/src/app/auth/settings/account/profile.component.ts +++ b/apps/web/src/app/auth/settings/account/profile.component.ts @@ -1,28 +1,25 @@ -import { ViewChild, ViewContainerRef, Component, OnDestroy, OnInit } from "@angular/core"; +import { Component, OnInit } from "@angular/core"; import { FormControl, FormGroup } from "@angular/forms"; import { Subject, takeUntil } from "rxjs"; -import { ModalService } from "@bitwarden/angular/services/modal.service"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; import { UpdateProfileRequest } from "@bitwarden/common/auth/models/request/update-profile.request"; import { ProfileResponse } from "@bitwarden/common/models/response/profile.response"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { StateService } from "@bitwarden/common/platform/abstractions/state.service"; +import { DialogService } from "@bitwarden/components"; -import { ChangeAvatarComponent } from "./change-avatar.component"; +import { ChangeAvatarDialogComponent } from "./change-avatar-dialog.component"; @Component({ selector: "app-profile", templateUrl: "profile.component.html", }) -export class ProfileComponent implements OnInit, OnDestroy { +export class ProfileComponent implements OnInit { loading = true; profile: ProfileResponse; fingerprintMaterial: string; - - @ViewChild("avatarModalTemplate", { read: ViewContainerRef, static: true }) - avatarModalRef: ViewContainerRef; private destroy$ = new Subject(); protected formGroup = new FormGroup({ @@ -35,7 +32,7 @@ export class ProfileComponent implements OnInit, OnDestroy { private i18nService: I18nService, private platformUtilsService: PlatformUtilsService, private stateService: StateService, - private modalService: ModalService, + private dialogService: DialogService, ) {} async ngOnInit() { @@ -53,24 +50,17 @@ export class ProfileComponent implements OnInit, OnDestroy { }); } + openChangeAvatar = async () => { + ChangeAvatarDialogComponent.open(this.dialogService, { + data: { profile: this.profile }, + }); + }; + async ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } - openChangeAvatar = async () => { - const modalOpened = await this.modalService.openViewRef( - ChangeAvatarComponent, - this.avatarModalRef, - (modal) => { - modal.profile = this.profile; - modal.changeColor.pipe(takeUntil(this.destroy$)).subscribe(() => { - modalOpened[0].close(); - }); - }, - ); - }; - submit = async () => { const request = new UpdateProfileRequest( this.formGroup.get("name").value, diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts index 79478d0cae..b8cfbd3401 100644 --- a/apps/web/src/app/shared/loose-components.module.ts +++ b/apps/web/src/app/shared/loose-components.module.ts @@ -28,7 +28,7 @@ import { RegisterFormModule } from "../auth/register-form/register-form.module"; import { RemovePasswordComponent } from "../auth/remove-password.component"; import { SetPasswordComponent } from "../auth/set-password.component"; import { AccountComponent } from "../auth/settings/account/account.component"; -import { ChangeAvatarComponent } from "../auth/settings/account/change-avatar.component"; +import { ChangeAvatarDialogComponent } from "../auth/settings/account/change-avatar-dialog.component"; import { ChangeEmailComponent } from "../auth/settings/account/change-email.component"; import { DangerZoneComponent } from "../auth/settings/account/danger-zone.component"; import { DeauthorizeSessionsComponent } from "../auth/settings/account/deauthorize-sessions.component"; @@ -156,7 +156,7 @@ import { SharedModule } from "./shared.module"; PreferencesComponent, PremiumBadgeComponent, ProfileComponent, - ChangeAvatarComponent, + ChangeAvatarDialogComponent, ProvidersComponent, PurgeVaultComponent, RecoverDeleteComponent, @@ -230,7 +230,7 @@ import { SharedModule } from "./shared.module"; PreferencesComponent, PremiumBadgeComponent, ProfileComponent, - ChangeAvatarComponent, + ChangeAvatarDialogComponent, ProvidersComponent, PurgeVaultComponent, RecoverDeleteComponent,