[PM-4956] two factor component migration (#9204)

* two factor component migration * two factor component migration * two factor component migration * two factor component migration * two factor component migration
2024-06-11 23:25:58 +05:30 · 2024-06-11 23:25:58 +05:30 · 19d863c9ef
parent 832abcd955
commit 19d863c9ef
4 changed files with 172 additions and 170 deletions
--- a/apps/web/src/app/auth/two-factor.component.html
+++ b/apps/web/src/app/auth/two-factor.component.html
@ -1,97 +1,72 @@
-<form
-  #form
-  (ngSubmit)="submit()"
-  [appApiAction]="formPromise"
-  class="container"
-  ngNativeValidate
-  autocomplete="off"
->
-  <div class="row justify-content-md-center mt-5">
-    <div
-      class="col-5"
-      [ngClass]="{
-        'col-9': !duoFrameless && isDuoProvider
-      }"
-    >
-      <p class="lead text-center mb-4">{{ title }}</p>
-      <div class="card d-block">
-        <div class="card-body">
+<form [bitSubmit]="submitForm" [formGroup]="formGroup" autocomplete="off">
+  <div class="tw-min-w-96">
    <ng-container
      *ngIf="
        selectedProviderType === providerType.Email ||
        selectedProviderType === providerType.Authenticator
      "
    >
-            <p *ngIf="selectedProviderType === providerType.Authenticator">
+      <p bitTypography="body1" *ngIf="selectedProviderType === providerType.Authenticator">
        {{ "enterVerificationCodeApp" | i18n }}
      </p>
-            <p *ngIf="selectedProviderType === providerType.Email">
+      <p bitTypography="body1" *ngIf="selectedProviderType === providerType.Email">
        {{ "enterVerificationCodeEmail" | i18n: twoFactorEmail }}
      </p>
-            <div class="form-group">
-              <label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label>
-              <input
-                id="code"
-                type="text"
-                name="Code"
-                class="form-control"
-                [(ngModel)]="token"
-                required
-                appAutofocus
-                inputmode="tel"
-                appInputVerbatim
-              />
-              <small class="form-text" *ngIf="selectedProviderType === providerType.Email">
+      <bit-form-field>
+        <bit-label>{{ "verificationCode" | i18n }}</bit-label>
+        <input bitInput type="text" formControlName="token" appAutofocus appInputVerbatim />
+        <bit-hint *ngIf="selectedProviderType === providerType.Email">
          <a
+            bitLink
            href="#"
            appStopClick
            (click)="sendEmail(true)"
-                  [appApiAction]="emailPromise"
            *ngIf="selectedProviderType === providerType.Email"
          >
            {{ "sendVerificationCodeEmailAgain" | i18n }}
-                </a>
-              </small>
-            </div>
+          </a></bit-hint
+        >
+      </bit-form-field>
    </ng-container>
    <ng-container *ngIf="selectedProviderType === providerType.Yubikey">
-            <p class="text-center">{{ "insertYubiKey" | i18n }}</p>
+      <p bitTypography="body1" class="tw-text-center">{{ "insertYubiKey" | i18n }}</p>
      <picture>
        <source srcset="../../images/yubikey.avif" type="image/avif" />
        <source srcset="../../images/yubikey.webp" type="image/webp" />
-              <img src="../../images/yubikey.jpg" class="rounded img-fluid mb-3" alt="" />
+        <img src="../../images/yubikey.jpg" class="tw-rounded img-fluid tw-mb-3" alt="" />
      </picture>
-            <div class="form-group">
-              <label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label>
+      <bit-form-field>
+        <bit-label class="tw-sr-only">{{ "verificationCode" | i18n }}</bit-label>
        <input
-                id="code"
-                type="password"
-                name="Code"
-                class="form-control"
-                [(ngModel)]="token"
-                required
+          type="text"
+          bitInput
+          formControlName="token"
          appAutofocus
          appInputVerbatim
          autocomplete="new-password"
        />
-            </div>
+      </bit-form-field>
    </ng-container>
    <ng-container *ngIf="selectedProviderType === providerType.WebAuthn">
-            <div id="web-authn-frame" class="mb-3">
+      <div id="web-authn-frame" class="tw-mb-3">
        <iframe id="webauthn_iframe" sandbox="allow-scripts allow-same-origin"></iframe>
      </div>
    </ng-container>
    <!-- Duo -->
    <ng-container *ngIf="isDuoProvider">
      <ng-container *ngIf="duoFrameless">
-              <p *ngIf="selectedProviderType === providerType.OrganizationDuo" class="tw-mb-0">
+        <p
+          bitTypography="body1"
+          *ngIf="selectedProviderType === providerType.OrganizationDuo"
+          class="tw-mb-0"
+        >
          {{ "duoRequiredByOrgForAccount" | i18n }}
        </p>
-              <p>{{ "launchDuoAndFollowStepsToFinishLoggingIn" | i18n }}</p>
+        <p bitTypography="body1">{{ "launchDuoAndFollowStepsToFinishLoggingIn" | i18n }}</p>
      </ng-container>

      <ng-container *ngIf="!duoFrameless">
-              <div id="duo-frame" class="mb-3">
+        <div id="duo-frame" class="tw-mb-3">
          <iframe
            id="duo_iframe"
            sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"
@ -99,75 +74,51 @@
        </div>
      </ng-container>
    </ng-container>
-          <i
-            class="bwi bwi-spinner text-muted bwi-spin pull-right"
-            title="{{ 'loading' | i18n }}"
-            *ngIf="form.loading && selectedProviderType === providerType.WebAuthn"
-            aria-hidden="true"
-          ></i>
-          <div class="form-check" *ngIf="selectedProviderType != null">
-            <input
-              id="remember"
-              type="checkbox"
-              name="Remember"
-              class="form-check-input"
-              [(ngModel)]="remember"
-            />
-            <label for="remember" class="form-check-label">{{ "rememberMe" | i18n }}</label>
-          </div>
+    <bit-form-control *ngIf="selectedProviderType != null">
+      <bit-label>{{ "rememberMe" | i18n }}</bit-label>
+      <input type="checkbox" bitCheckbox formControlName="remember" />
+    </bit-form-control>
    <ng-container *ngIf="selectedProviderType == null">
-            <p>{{ "noTwoStepProviders" | i18n }}</p>
-            <p>{{ "noTwoStepProviders2" | i18n }}</p>
+      <p bitTypography="body1">{{ "noTwoStepProviders" | i18n }}</p>
+      <p bitTypography="body1">{{ "noTwoStepProviders2" | i18n }}</p>
    </ng-container>
    <hr />
    <div [hidden]="!showCaptcha()">
-            <iframe
-              id="hcaptcha_iframe"
-              height="80"
-              sandbox="allow-scripts allow-same-origin"
-            ></iframe>
+      <iframe id="hcaptcha_iframe" height="80" sandbox="allow-scripts allow-same-origin"></iframe>
    </div>
    <!-- Buttons -->
-          <div class="tw-flex tw-flex-col tw-mb-3">
+    <div class="tw-flex tw-flex-col tw-space-y-2.5 tw-mb-3">
      <button
        type="submit"
-              class="btn btn-primary btn-block btn-submit"
-              [disabled]="form.loading"
+        buttonType="primary"
+        bitButton
+        bitFormButton
        *ngIf="
          selectedProviderType != null &&
          !isDuoProvider &&
          selectedProviderType !== providerType.WebAuthn
        "
      >
-              <span>
-                <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}
-              </span>
-              <i
-                class="bwi bwi-spinner bwi-spin"
-                title="{{ 'loading' | i18n }}"
-                aria-hidden="true"
-              ></i>
+        <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }} </span>
      </button>
      <button
        (click)="launchDuoFrameless()"
        type="button"
-              class="btn btn-primary btn-block"
-              [disabled]="form.loading"
+        buttonType="primary"
+        bitButton
+        bitFormButton
        *ngIf="duoFrameless && isDuoProvider"
      >
        <span> {{ "launchDuo" | i18n }} </span>
      </button>
-            <a routerLink="/login" class="btn btn-outline-secondary btn-block">
+      <a routerLink="/login" bitButton buttonType="secondary">
        {{ "cancel" | i18n }}
      </a>
    </div>
    <div class="text-center">
-            <a href="#" appStopClick (click)="anotherMethod()">{{
+      <a bitLink href="#" appStopClick (click)="anotherMethod()">{{
        "useAnotherTwoStepMethod" | i18n
      }}</a>
    </div>
  </div>
-      </div>
-    </div>
-  </div>
 </form>
--- a/apps/web/src/app/auth/two-factor.component.ts
+++ b/apps/web/src/app/auth/two-factor.component.ts
@ -1,6 +1,7 @@
 import { Component, Inject, OnDestroy, ViewChild, ViewContainerRef } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
-import { lastValueFrom } from "rxjs";
+import { Subject, takeUntil, lastValueFrom } from "rxjs";

 import { TwoFactorComponent as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor.component";
 import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
@ -38,7 +39,17 @@ import {
 export class TwoFactorComponent extends BaseTwoFactorComponent implements OnDestroy {
  @ViewChild("twoFactorOptions", { read: ViewContainerRef, static: true })
  twoFactorOptionsModal: ViewContainerRef;
-
+  formGroup = this.formBuilder.group({
+    token: [
+      "",
+      {
+        validators: [Validators.required],
+        updateOn: "submit",
+      },
+    ],
+    remember: [false],
+  });
+  private destroy$ = new Subject<void>();
  constructor(
    loginStrategyService: LoginStrategyServiceAbstraction,
    router: Router,
@ -58,6 +69,7 @@ export class TwoFactorComponent extends BaseTwoFactorComponent implements OnDest
    configService: ConfigService,
    masterPasswordService: InternalMasterPasswordServiceAbstraction,
    accountService: AccountService,
+    private formBuilder: FormBuilder,
    @Inject(WINDOW) protected win: Window,
  ) {
    super(
@ -82,6 +94,16 @@ export class TwoFactorComponent extends BaseTwoFactorComponent implements OnDest
    );
    this.onSuccessfulLoginNavigate = this.goAfterLogIn;
  }
+  async ngOnInit() {
+    await super.ngOnInit();
+    this.formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+      this.token = value.token;
+      this.remember = value.remember;
+    });
+  }
+  submitForm = async () => {
+    await this.submit();
+  };

  async anotherMethod() {
    const dialogRef = TwoFactorOptionsComponent.open(this.dialogService);
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@ -82,7 +82,6 @@ const routes: Routes = [
        component: LoginViaAuthRequestComponent,
        data: { titleId: "adminApprovalRequested" } satisfies DataProperties,
      },
-      { path: "2fa", component: TwoFactorComponent, canActivate: [UnauthGuard] },
      {
        path: "login-initiated",
        component: LoginDecryptionOptionsComponent,
@ -189,6 +188,33 @@ const routes: Routes = [
    path: "",
    component: AnonLayoutWrapperComponent,
    children: [
+      {
+        path: "2fa",
+        component: TwoFactorComponent,
+        canActivate: [unauthGuardFn()],
+        data: {
+          pageTitle: "verifyIdentity",
+        },
+      },
+      {
+        path: "recover-2fa",
+        canActivate: [unauthGuardFn()],
+        children: [
+          {
+            path: "",
+            component: RecoverTwoFactorComponent,
+          },
+          {
+            path: "",
+            component: EnvironmentSelectorComponent,
+            outlet: "environment-selector",
+          },
+        ],
+        data: {
+          pageTitle: "recoverAccountTwoStep",
+          titleId: "recoverAccountTwoStep",
+        } satisfies DataProperties & AnonLayoutWrapperData,
+      },
      {
        path: "accept-emergency",
        canActivate: [deepLinkGuard()],
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@ -722,6 +722,9 @@
  "logIn": {
    "message": "Log in"
  },
+  "verifyIdentity": {
+    "message": "Verify your Identity"
+  },
  "logInInitiated": {
    "message": "Log in initiated"
  },