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

[PM-2414] Angular 16 Upgrade - SetPinComponent (#7214) 

* migrate to DialogService

* use static method

* add reactive form dependencies

* begin migrating to reactive forms

* migrate template inputs to use CL

* update set-pin.component.ts file to work with reactive forms

* migrate desktop template and class file to Dialog and ReactiveForms

* update settings page

* remove old properties

* update settings form upon dialog close

* refactor ngOnInit()

* remove duplicate validator (already have a validator in class file)
This commit is contained in:
rr-bw 2023-12-27 10:48:06 -08:00 committed by GitHub
parent 3d30823d2a
commit 00bb814fbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 146 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
apps/browser/src/auth/popup/components/set-pin.component.html
View File

@ -1,64 +1,29 @@
<div class="modal fade" role="dialog" aria-modal="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<form class="modal-content" #form (ngSubmit)="submit()">
<div class="modal-body">
<div>
<form [bitSubmit]="submit" [formGroup]="setPinForm">
<bit-dialog>
<div class="tw-font-semibold" bitDialogTitle>
{{ "unlockWithPin" | i18n }}
</div>
<div bitDialogContent>
<p>
{{ "setYourPinCode" | i18n }}
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-flex no-hover no-bg" appBoxRow>
<div class="row-main">
<label for="pin">{{ "pin" | i18n }}</label>
<input
id="pin"
type="{{ showPin ? 'text' : 'password' }}"
name="Pin"
class="monospaced"
[(ngModel)]="pin"
required
appInputVerbatim
/>
</div>
<div class="action-buttons">
<button
type="button"
class="row-btn"
appStopClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
(click)="toggleVisibility()"
[attr.aria-pressed]="showPin"
>
<i
class="bwi bwi-lg"
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPin, 'bwi-eye-slash': showPin }"
></i>
</button>
</div>
</div>
</div>
</div>
<div class="checkbox" *ngIf="showMasterPassOnRestart">
<label for="masterPasswordOnRestart">
<input
type="checkbox"
id="masterPasswordOnRestart"
name="MasterPasswordOnRestart"
[(ngModel)]="masterPassOnRestart"
/>
</p>
<bit-form-field>
<bit-label>{{ "pin" | i18n }}</bit-label>
<input class="tw-font-mono" bitInput type="password" formControlName="pin" />
<button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
</bit-form-field>
<label class="tw-flex tw-items-start tw-gap-2" *ngIf="showMasterPassOnRestart">
<input class="tw-mt-1" type="checkbox" bitCheckbox formControlName="masterPassOnRestart" />
<span>{{ "lockWithMasterPassOnRestart" | i18n }}</span>
</label>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-submit">
<div bitDialogFooter>
<button type="submit" bitButton bitFormButton buttonType="primary">
<span>{{ "ok" | i18n }}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
<button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
{{ "cancel" | i18n }}
</button>
</div>
</bit-dialog>
</form>
</div>
</div>

28
apps/browser/src/auth/popup/components/set-pin.component.ts
View File

@ -1,8 +1,34 @@
import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
import { SetPinComponent as BaseSetPinComponent } from "@bitwarden/angular/auth/components/set-pin.component";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import {
AsyncActionsModule,
ButtonModule,
DialogModule,
DialogService,
FormFieldModule,
IconButtonModule,
} from "@bitwarden/components";
@Component({
standalone: true,
templateUrl: "set-pin.component.html",
imports: [
DialogModule,
CommonModule,
JslibModule,
ButtonModule,
IconButtonModule,
ReactiveFormsModule,
AsyncActionsModule,
FormFieldModule,
],
})
export class SetPinComponent extends BaseSetPinComponent {}
export class SetPinComponent extends BaseSetPinComponent {
static open(dialogService: DialogService) {
return dialogService.open<boolean>(SetPinComponent);
}
}

2
apps/browser/src/popup/app.module.ts
View File

@ -20,7 +20,6 @@ import { AvatarModule } from "@bitwarden/components";
import { AccountSwitcherComponent } from "../auth/popup/account-switching/account-switcher.component";
import { AccountComponent } from "../auth/popup/account-switching/account.component";
import { CurrentAccountComponent } from "../auth/popup/account-switching/current-account.component";
import { SetPinComponent } from "../auth/popup/components/set-pin.component";
import { EnvironmentComponent } from "../auth/popup/environment.component";
import { HintComponent } from "../auth/popup/hint.component";
import { HomeComponent } from "../auth/popup/home.component";
@ -148,7 +147,6 @@ import "../platform/popup/locales";
SendListComponent,
SendTypeComponent,
SetPasswordComponent,
SetPinComponent,
SettingsComponent,
ShareComponent,
SsoComponent,

7
apps/browser/src/popup/settings/settings.component.ts
View File

@ -316,14 +316,15 @@ export class SettingsComponent implements OnInit {
async updatePin(value: boolean) {
if (value) {
const ref = this.modalService.open(SetPinComponent, { allowMultipleModals: true });
const dialogRef = SetPinComponent.open(this.dialogService);
if (ref == null) {
if (dialogRef == null) {
this.form.controls.pin.setValue(false, { emitEvent: false });
return;
}
this.form.controls.pin.setValue(await ref.onClosedPromise(), { emitEvent: false });
const userHasPinSet = await firstValueFrom(dialogRef.closed);
this.form.controls.pin.setValue(userHasPinSet, { emitEvent: false });
} else {
await this.vaultTimeoutSettingsService.clear();
}

8
apps/desktop/src/app/accounts/settings.component.ts
View File

@ -409,16 +409,17 @@ export class SettingsComponent implements OnInit {
async updatePin(value: boolean) {
if (value) {
const ref = this.modalService.open(SetPinComponent, { allowMultipleModals: true });
const dialogRef = SetPinComponent.open(this.dialogService);
if (ref == null) {
if (dialogRef == null) {
this.form.controls.pin.setValue(false, { emitEvent: false });
return;
}
this.userHasPinSet = await ref.onClosedPromise();
this.userHasPinSet = await firstValueFrom(dialogRef.closed);
this.form.controls.pin.setValue(this.userHasPinSet, { emitEvent: false });
}
if (!value) {
// If user turned off PIN without having a MP and has biometric + require MP/PIN on restart enabled
if (this.form.value.requirePasswordOnStart && !this.userHasMasterPassword) {
@ -429,6 +430,7 @@ export class SettingsComponent implements OnInit {
await this.vaultTimeoutSettingsService.clear();
}
this.messagingService.send("redrawMenu");
}

2
apps/desktop/src/app/app.module.ts
View File

@ -10,7 +10,6 @@ import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe"
import { DialogModule } from "@bitwarden/components";
import { AccessibilityCookieComponent } from "../auth/accessibility-cookie.component";
import { SetPinComponent } from "../auth/components/set-pin.component";
import { DeleteAccountComponent } from "../auth/delete-account.component";
import { EnvironmentComponent } from "../auth/environment.component";
import { HintComponent } from "../auth/hint.component";
@ -92,7 +91,6 @@ import { SendComponent } from "./tools/send/send.component";
SendAddEditComponent,
SendComponent,
SetPasswordComponent,
SetPinComponent,
SettingsComponent,
ShareComponent,
SsoComponent,

74
apps/desktop/src/auth/components/set-pin.component.html
View File

@ -1,65 +1,29 @@
<div class="modal fade" role="dialog" aria-modal="true">
<div class="modal-dialog modal-dialog-scrollable set-pin-modal" role="document">
<form class="modal-content" #form (ngSubmit)="submit()">
<div class="modal-body">
<div>
<form [bitSubmit]="submit" [formGroup]="setPinForm">
<bit-dialog>
<div class="tw-font-semibold" bitDialogTitle>
{{ "unlockWithPin" | i18n }}
</div>
<div bitDialogContent>
<p>
{{ "setYourPinCode" | i18n }}
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main">
<label for="pin">{{ "pin" | i18n }}</label>
<input
id="pin"
type="{{ showPin ? 'text' : 'password' }}"
name="Pin"
class="monospaced"
[(ngModel)]="pin"
required
appInputVerbatim
appAutofocus
/>
</div>
<div class="action-buttons">
<button
type="button"
class="row-btn"
appStopClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPin"
(click)="toggleVisibility()"
>
<i
class="bwi bwi-lg"
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPin, 'bwi-eye-slash': showPin }"
></i>
</button>
</div>
</div>
</div>
</div>
<div class="checkbox" *ngIf="showMasterPassOnRestart">
<label for="masterPasswordOnRestart">
<input
type="checkbox"
id="masterPasswordOnRestart"
name="MasterPasswordOnRestart"
[(ngModel)]="masterPassOnRestart"
/>
</p>
<bit-form-field>
<bit-label>{{ "pin" | i18n }}</bit-label>
<input class="tw-font-mono" bitInput type="password" formControlName="pin" />
<button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
</bit-form-field>
<label class="tw-flex tw-items-start tw-gap-2" *ngIf="showMasterPassOnRestart">
<input class="tw-mt-1" type="checkbox" bitCheckbox formControlName="masterPassOnRestart" />
<span>{{ "lockWithMasterPassOnRestart" | i18n }}</span>
</label>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-submit">
<div bitDialogFooter>
<button type="submit" bitButton bitFormButton buttonType="primary">
<span>{{ "ok" | i18n }}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
<button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
{{ "cancel" | i18n }}
</button>
</div>
</bit-dialog>
</form>
</div>
</div>

29
apps/desktop/src/auth/components/set-pin.component.ts
View File

@ -1,8 +1,33 @@
import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
import { SetPinComponent as BaseSetPinComponent } from "@bitwarden/angular/auth/components/set-pin.component";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import {
AsyncActionsModule,
ButtonModule,
DialogModule,
DialogService,
FormFieldModule,
IconButtonModule,
} from "@bitwarden/components";
@Component({
standalone: true,
templateUrl: "set-pin.component.html",
imports: [
DialogModule,
CommonModule,
JslibModule,
ButtonModule,
IconButtonModule,
ReactiveFormsModule,
AsyncActionsModule,
FormFieldModule,
],
})
export class SetPinComponent extends BaseSetPinComponent {}
export class SetPinComponent extends BaseSetPinComponent {
static open(dialogService: DialogService) {
return dialogService.open<boolean>(SetPinComponent);
}
}

44
libs/angular/src/auth/components/set-pin.component.ts
View File

@ -1,57 +1,63 @@
import { DialogRef } from "@angular/cdk/dialog";
import { Directive, OnInit } from "@angular/core";
import { FormBuilder, Validators } from "@angular/forms";
import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
import { Utils } from "@bitwarden/common/platform/misc/utils";
import { ModalRef } from "../../components/modal/modal.ref";
@Directive()
export class SetPinComponent implements OnInit {
pin = "";
showPin = false;
masterPassOnRestart = true;
showMasterPassOnRestart = true;
setPinForm = this.formBuilder.group({
pin: ["", [Validators.required]],
masterPassOnRestart: true,
});
constructor(
private modalRef: ModalRef,
private dialogRef: DialogRef,
private cryptoService: CryptoService,
private userVerificationService: UserVerificationService,
private stateService: StateService,
private formBuilder: FormBuilder,
) {}
async ngOnInit() {
this.showMasterPassOnRestart = this.masterPassOnRestart =
await this.userVerificationService.hasMasterPassword();
const hasMasterPassword = await this.userVerificationService.hasMasterPassword();
this.setPinForm.controls.masterPassOnRestart.setValue(hasMasterPassword);
this.showMasterPassOnRestart = hasMasterPassword;
}
toggleVisibility() {
this.showPin = !this.showPin;
}
submit = async () => {
const pin = this.setPinForm.get("pin").value;
const masterPassOnRestart = this.setPinForm.get("masterPassOnRestart").value;
async submit() {
if (Utils.isNullOrWhitespace(this.pin)) {
this.modalRef.close(false);
if (Utils.isNullOrWhitespace(pin)) {
this.dialogRef.close(false);
return;
}
const pinKey = await this.cryptoService.makePinKey(
this.pin,
pin,
await this.stateService.getEmail(),
await this.stateService.getKdfType(),
await this.stateService.getKdfConfig(),
);
const userKey = await this.cryptoService.getUserKey();
const pinProtectedKey = await this.cryptoService.encrypt(userKey.key, pinKey);
const encPin = await this.cryptoService.encrypt(this.pin, userKey);
const encPin = await this.cryptoService.encrypt(pin, userKey);
await this.stateService.setProtectedPin(encPin.encryptedString);
if (this.masterPassOnRestart) {
if (masterPassOnRestart) {
await this.stateService.setPinKeyEncryptedUserKeyEphemeral(pinProtectedKey);
} else {
await this.stateService.setPinKeyEncryptedUserKey(pinProtectedKey);
}
this.modalRef.close(true);
}
this.dialogRef.close(true);
};
}