-
-
{{ "emergencyAccess" | i18n }}
-
-
-
- {{ name }}
-
-
{{ "acceptEmergencyAccess" | i18n }}
-
-
-
-
-
+
+
+ {{ name }}
+
+
{{ "acceptEmergencyAccess" | i18n }}
+
+
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 00000000000..fd65192beea
--- /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 bbcbaf6820f..6946f8b94bb 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 3a974241d5f..00000000000
--- 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 db6ab2b6588..4464824c63e 100644
--- a/apps/web/src/app/auth/settings/account/profile.component.html
+++ b/apps/web/src/app/auth/settings/account/profile.component.html
@@ -23,6 +23,7 @@