PM-4978 Migrate Profile component (#8490)

* PM-4978 Migrate Profile component

* PM-4978 Addressed review comments

apps/web/src/app/auth/settings/account/profile.component.html

@@ -1,46 +1,35 @@
 <div *ngIf="loading">
   <i
-    class="bwi bwi-spinner bwi-spin text-muted"
+    class="bwi bwi-spinner bwi-spin tw-text-muted"
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </div>
-<form
+<form *ngIf="profile && !loading" [formGroup]="formGroup" [bitSubmit]="submit">
-  *ngIf="profile && !loading"
+  <div class="tw-grid tw-grid-cols-12 tw-gap-6">
-  #form
+    <div class="tw-col-span-6">
-  (ngSubmit)="submit()"
+      <bit-form-field>
-  [appApiAction]="formPromise"
+        <bit-label>{{ "name" | i18n }}</bit-label>
-  ngNativeValidate
+        <input bitInput formControlName="name" />
->
+      </bit-form-field>
-  <div class="row">
+      <bit-form-field>
-    <div class="col-6">
+        <bit-label>{{ "email" | i18n }}</bit-label>
-      <div class="form-group">
+        <input bitInput formControlName="email" readonly />
-        <label for="name">{{ "name" | i18n }}</label>
+      </bit-form-field>
-        <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="profile.name" />
     </div>
-      <div class="form-group">
+    <div class="tw-col-span-6">
-        <label for="email">{{ "email" | i18n }}</label>
+      <div class="tw-mb-3">
-        <input
-          id="email"
-          class="form-control"
-          type="text"
-          name="Email"
-          [(ngModel)]="profile.email"
-          readonly
-        />
-      </div>
-    </div>
-    <div class="col-6">
-      <div class="mb-3">
         <dynamic-avatar text="{{ profile | userName }}" [id]="profile.id" [size]="'large'">
         </dynamic-avatar>
         <button
           type="button"
-          class="btn btn-outline-secondary tw-ml-3.5"
+          buttonType="secondary"
+          bitButton
+          bitFormButton
           appStopClick
           appStopProp
-          (click)="openChangeAvatar()"
+          [bitAction]="openChangeAvatar"
         >
           <i class="bwi bwi-lg bwi-pencil-square" aria-hidden="true"></i>
           Customize
@@ -53,9 +42,6 @@
       </app-account-fingerprint>
     </div>
   </div>
-  <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+  <button bitButton bitFormButton type="submit" buttonType="primary">{{ "save" | i18n }}</button>
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-    <span>{{ "save" | i18n }}</span>
-  </button>
 </form>
 <ng-template #avatarModalTemplate></ng-template>

apps/web/src/app/auth/settings/account/profile.component.ts

@@ -1,4 +1,5 @@
 import { ViewChild, ViewContainerRef, Component, OnDestroy, OnInit } from "@angular/core";
+import { FormControl, FormGroup } from "@angular/forms";
 import { Subject, takeUntil } from "rxjs";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
@@ -6,7 +7,6 @@ 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 { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 
@@ -21,16 +21,19 @@ export class ProfileComponent implements OnInit, OnDestroy {
   profile: ProfileResponse;
   fingerprintMaterial: string;
 
-  formPromise: Promise<any>;
   @ViewChild("avatarModalTemplate", { read: ViewContainerRef, static: true })
   avatarModalRef: ViewContainerRef;
   private destroy$ = new Subject<void>();
 
+  protected formGroup = new FormGroup({
+    name: new FormControl(null),
+    email: new FormControl(null),
+  });
+
   constructor(
     private apiService: ApiService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
-    private logService: LogService,
     private stateService: StateService,
     private modalService: ModalService,
   ) {}
@@ -39,6 +42,15 @@ export class ProfileComponent implements OnInit, OnDestroy {
     this.profile = await this.apiService.getProfile();
     this.loading = false;
     this.fingerprintMaterial = await this.stateService.getUserId();
+    this.formGroup.get("name").setValue(this.profile.name);
+    this.formGroup.get("email").setValue(this.profile.email);
+
+    this.formGroup
+      .get("name")
+      .valueChanges.pipe(takeUntil(this.destroy$))
+      .subscribe((name) => {
+        this.profile.name = name;
+      });
   }
 
   async ngOnDestroy() {
@@ -46,7 +58,7 @@ export class ProfileComponent implements OnInit, OnDestroy {
     this.destroy$.complete();
   }
 
-  async openChangeAvatar() {
+  openChangeAvatar = async () => {
     const modalOpened = await this.modalService.openViewRef(
       ChangeAvatarComponent,
       this.avatarModalRef,
@@ -57,16 +69,14 @@ export class ProfileComponent implements OnInit, OnDestroy {
         });
       },
     );
-  }
+  };
 
-  async submit() {
+  submit = async () => {
-    try {
+    const request = new UpdateProfileRequest(
-      const request = new UpdateProfileRequest(this.profile.name, this.profile.masterPasswordHint);
+      this.formGroup.get("name").value,
-      this.formPromise = this.apiService.putProfile(request);
+      this.profile.masterPasswordHint,
-      await this.formPromise;
+    );
+    await this.apiService.putProfile(request);
     this.platformUtilsService.showToast("success", null, this.i18nService.t("accountUpdated"));
-    } catch (e) {
+  };
-      this.logService.error(e);
-    }
-  }
 }