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