[PM-8943] Update QRious script initialization in Authenticator two-factor provider (#9926)

* create onload() for qrious as well as error messaging if QR code cannot be displayed

* button and message updates and formpromise removal

* load QR script async

* rename and reorder methods

apps/web/src/app/auth/settings/two-factor-authenticator.component.html

@@ -72,7 +72,14 @@
       </ng-container>
       <hr *ngIf="enabled" />
       <p class="tw-text-center tw-mb-0">
-        <canvas id="qr"></canvas><br />
+        <ng-container *ngIf="qrScriptError" class="tw-mt-2">
+          <i class="bwi bwi-error tw-text-3xl tw-text-danger" aria-hidden="true"></i>
+          <p>
+            {{ "twoStepAuthenticatorQRCanvasError" | i18n }}
+          </p>
+        </ng-container>
+        <canvas *ngIf="!qrScriptError" id="qr"></canvas>
+        <br />
         <code appA11yTitle="{{ 'key' | i18n }}">{{ key }}</code>
       </p>
       <bit-form-field *ngIf="!enabled" [disableMargin]="true">
@@ -90,7 +97,7 @@
       >
         {{ (enabled ? "disable" : "enable") | i18n }}
       </button>
-      <button bitButton bitFormButton type="button" buttonType="secondary" [bitAction]="close">
+      <button bitButton bitFormButton type="button" buttonType="secondary" bitDialogClose>
         {{ "close" | i18n }}
       </button>
     </ng-container>

apps/web/src/app/auth/settings/two-factor-authenticator.component.ts

@@ -43,9 +43,9 @@ export class TwoFactorAuthenticatorComponent
   @Output() onChangeStatus = new EventEmitter<boolean>();
   type = TwoFactorProviderType.Authenticator;
   key: string;
-  formPromise: Promise<TwoFactorAuthenticatorResponse>;
 
   override componentName = "app-two-factor-authenticator";
+  qrScriptError = false;
   private qrScript: HTMLScriptElement;
 
   formGroup = this.formBuilder.group({
@@ -90,7 +90,7 @@ export class TwoFactorAuthenticatorComponent
     this.formGroup.controls.token.markAsTouched();
   }
 
-  auth(authResponse: AuthResponse<TwoFactorAuthenticatorResponse>) {
+  async auth(authResponse: AuthResponse<TwoFactorAuthenticatorResponse>) {
     super.auth(authResponse);
     return this.processResponse(authResponse.response);
   }
@@ -100,56 +100,69 @@ export class TwoFactorAuthenticatorComponent
       return;
     }
     if (this.enabled) {
-      await this.disableAuthentication(this.formPromise);
+      await this.disableMethod();
-      this.onChangeStatus.emit(this.enabled);
+      this.dialogRef.close(this.enabled);
-      this.close();
     } else {
       await this.enable();
-      this.onChangeStatus.emit(this.enabled);
     }
+    this.onChangeStatus.emit(this.enabled);
   };
 
-  private async disableAuthentication(promise: Promise<unknown>) {
-    return super.disable(promise);
-  }
-
   protected async enable() {
     const request = await this.buildRequestModel(UpdateTwoFactorAuthenticatorRequest);
     request.token = this.formGroup.value.token;
     request.key = this.key;
 
-    return super.enable(async () => {
+    const response = await this.apiService.putTwoFactorAuthenticator(request);
-      this.formPromise = this.apiService.putTwoFactorAuthenticator(request);
+    await this.processResponse(response);
-      const response = await this.formPromise;
+    this.onUpdated.emit(true);
-      await this.processResponse(response);
-    });
   }
 
   private async processResponse(response: TwoFactorAuthenticatorResponse) {
     this.formGroup.get("token").setValue(null);
     this.enabled = response.enabled;
     this.key = response.key;
+
+    await this.waitForQRiousToLoadOrError().catch((error) => {
+      this.logService.error(error);
+      this.qrScriptError = true;
+    });
+
+    await this.createQRCode();
+  }
+
+  private async waitForQRiousToLoadOrError(): Promise<void> {
+    // Check if QRious is already loaded or if there was an error loading it either way don't wait for it to try and load again
+    if (typeof window.QRious !== "undefined" || this.qrScriptError) {
+      return Promise.resolve();
+    }
+
+    return new Promise((resolve, reject) => {
+      this.qrScript.onload = () => resolve();
+      this.qrScript.onerror = () =>
+        reject(new Error(this.i18nService.t("twoStepAuthenticatorQRCanvasError")));
+    });
+  }
+
+  private async createQRCode() {
+    if (this.qrScriptError) {
+      return;
+    }
     const email = await firstValueFrom(
       this.accountService.activeAccount$.pipe(map((a) => a?.email)),
     );
-    window.setTimeout(() => {
+    new window.QRious({
-      new window.QRious({
+      element: document.getElementById("qr"),
-        element: document.getElementById("qr"),
+      value:
-        value:
+        "otpauth://totp/Bitwarden:" +
-          "otpauth://totp/Bitwarden:" +
+        Utils.encodeRFC3986URIComponent(email) +
-          Utils.encodeRFC3986URIComponent(email) +
+        "?secret=" +
-          "?secret=" +
+        encodeURIComponent(this.key) +
-          encodeURIComponent(this.key) +
+        "&issuer=Bitwarden",
-          "&issuer=Bitwarden",
+      size: 160,
-        size: 160,
+    });
-      });
-    }, 100);
   }
 
-  close = () => {
-    this.dialogRef.close(this.enabled);
-  };
-
   static open(
     dialogService: DialogService,
     config: DialogConfig<AuthResponse<TwoFactorAuthenticatorResponse>>,

apps/web/src/locales/en/messages.json

@@ -1691,6 +1691,9 @@
   "twoStepAuthenticatorScanCodeV2": {
     "message": "Scan the QR code below with your authenticator app or enter the key."
   },
+  "twoStepAuthenticatorQRCanvasError": {
+    "message": "Could not load QR code. Try again or use the key below."
+  },
   "key": {
     "message": "Key"
   },