vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

PM-4978 Migrate Profile component (#8490) 

* PM-4978 Migrate Profile component

* PM-4978 Addressed review comments
This commit is contained in:
KiruthigaManivannan 2024-05-21 18:35:11 +05:30 committed by GitHub
parent c8998d0c00
commit f8c64fe8ae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 45 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
*ngIf="profile && !loading"
#form
(ngSubmit)="submit()"
[appApiAction]="formPromise"
ngNativeValidate
>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="name">{{ "name" | i18n }}</label>
<input id="name" class="form-control" type="text" name="Name" [(ngModel)]="profile.name" />
</div>
<div class="form-group">
<label for="email">{{ "email" | i18n }}</label>
<input
id="email"
class="form-control"
type="text"
name="Email"
[(ngModel)]="profile.email"
readonly
/>
</div>
<form *ngIf="profile && !loading" [formGroup]="formGroup" [bitSubmit]="submit">
<div class="tw-grid tw-grid-cols-12 tw-gap-6">
<div class="tw-col-span-6">
<bit-form-field>
<bit-label>{{ "name" | i18n }}</bit-label>
<input bitInput formControlName="name" />
</bit-form-field>
<bit-form-field>
<bit-label>{{ "email" | i18n }}</bit-label>
<input bitInput formControlName="email" readonly />
</bit-form-field>
</div>
<div class="col-6">
<div class="mb-3">
<div class="tw-col-span-6">
<div class="tw-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">
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "save" | i18n }}</span>
</button>
<button bitButton bitFormButton type="submit" buttonType="primary">{{ "save" | i18n }}</button>
</form>
<ng-template #avatarModalTemplate></ng-template>

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

@ -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() {
try {
const request = new UpdateProfileRequest(this.profile.name, this.profile.masterPasswordHint);
this.formPromise = this.apiService.putProfile(request);
await this.formPromise;
this.platformUtilsService.showToast("success", null, this.i18nService.t("accountUpdated"));
} catch (e) {
this.logService.error(e);
}
}
submit = async () => {
const request = new UpdateProfileRequest(
this.formGroup.get("name").value,
this.profile.masterPasswordHint,
);
await this.apiService.putProfile(request);
this.platformUtilsService.showToast("success", null, this.i18nService.t("accountUpdated"));
};
}