[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)

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

@@ -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>
-          {{ "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"
-            />
-            <span>{{ "lockWithMasterPassOnRestart" | i18n }}</span>
-          </label>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-submit">
-          <span>{{ "ok" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>
+<form [bitSubmit]="submit" [formGroup]="setPinForm">
+  <bit-dialog>
+    <div class="tw-font-semibold" bitDialogTitle>
+      {{ "unlockWithPin" | i18n }}
+    </div>
+    <div bitDialogContent>
+      <p>
+        {{ "setYourPinCode" | i18n }}
+      </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 bitDialogFooter>
+      <button type="submit" bitButton bitFormButton buttonType="primary">
+        <span>{{ "ok" | i18n }}</span>
+      </button>
+      <button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
+        {{ "cancel" | i18n }}
+      </button>
+    </div>
+  </bit-dialog>
+</form>

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

@@ -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);
+  }
+}

apps/browser/src/popup/app.module.ts

@@ -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,

apps/browser/src/popup/settings/settings.component.ts

@@ -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();
     }

apps/desktop/src/app/accounts/settings.component.ts

@@ -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");
   }
 

apps/desktop/src/app/app.module.ts

@@ -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,

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

@@ -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>
-          {{ "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"
-            />
-            <span>{{ "lockWithMasterPassOnRestart" | i18n }}</span>
-          </label>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-submit">
-          <span>{{ "ok" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>
+<form [bitSubmit]="submit" [formGroup]="setPinForm">
+  <bit-dialog>
+    <div class="tw-font-semibold" bitDialogTitle>
+      {{ "unlockWithPin" | i18n }}
+    </div>
+    <div bitDialogContent>
+      <p>
+        {{ "setYourPinCode" | i18n }}
+      </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 bitDialogFooter>
+      <button type="submit" bitButton bitFormButton buttonType="primary">
+        <span>{{ "ok" | i18n }}</span>
+      </button>
+      <button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
+        {{ "cancel" | i18n }}
+      </button>
+    </div>
+  </bit-dialog>
+</form>

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

@@ -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);
+  }
+}

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

@@ -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);
+  };
 }