[PM-1935] Migrate vault lock screen to component library (#6237)

* Migrate vault lock screen to component library

* Remove unnecessary divs

* Remove card from trial

* Migrate to standalone component

* refactor to use AnonLayout

* revert login component

* migrate web component to bitSubmit

* remove class

* use inject

* update web pageTitle translation

* validate on submit, not on blur

---------

Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com>

apps/web/src/app/auth/lock.component.html

@@ -1,66 +1,27 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-  <div class="row justify-content-md-center mt-5">
-    <div class="col-5">
-      <p class="text-center mb-4">
-        <i class="bwi bwi-lock bwi-4x text-muted" aria-hidden="true"></i>
-      </p>
-      <p class="lead text-center mx-4 mb-4">{{ "yourVaultIsLocked" | i18n }}</p>
-      <div class="card d-block">
-        <div class="card-body">
-          <div class="form-group">
-            <label for="masterPassword">{{ "masterPass" | i18n }}</label>
-            <div class="d-flex">
-              <input
-                id="masterPassword"
-                type="{{ showPassword ? 'text' : 'password' }}"
-                name="MasterPassword"
-                class="text-monospace form-control"
-                [(ngModel)]="masterPassword"
-                required
-                appAutofocus
-                appInputVerbatim
-              />
-              <button
-                type="button"
-                class="ml-1 btn btn-link"
-                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-                (click)="togglePassword()"
-              >
-                <i
-                  class="bwi bwi-lg"
-                  aria-hidden="true"
-                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
-                ></i>
-              </button>
-            </div>
-            <small class="text-muted form-text">
-              {{ "loggedInAsEmailOn" | i18n: email : webVaultHostname }}
-            </small>
-          </div>
-          <hr />
-          <div class="d-flex">
-            <button
-              type="submit"
-              class="btn btn-primary btn-block btn-submit"
-              [disabled]="form.loading"
-            >
-              <span> <i class="bwi bwi-unlock" aria-hidden="true"></i> {{ "unlock" | i18n }} </span>
-              <i
-                class="bwi bwi-spinner bwi-spin"
-                title="{{ 'loading' | i18n }}"
-                aria-hidden="true"
-              ></i>
-            </button>
-            <button
-              type="button"
-              class="btn btn-outline-secondary btn-block ml-2 mt-0"
-              (click)="logOut()"
-            >
-              {{ "logOut" | i18n }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+<form [bitSubmit]="submit" [formGroup]="formGroup">
+  <bit-form-field>
+    <bit-label>{{ "masterPass" | i18n }}</bit-label>
+    <input
+      type="password"
+      formControlName="masterPassword"
+      bitInput
+      appAutofocus
+      name="masterPassword"
+      required
+    />
+    <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+    <bit-hint>{{ "loggedInAsEmailOn" | i18n: email : webVaultHostname }}</bit-hint>
+  </bit-form-field>
+
+  <hr />
+
+  <div class="tw-flex tw-gap-2">
+    <button type="submit" bitButton bitFormButton buttonType="primary" block>
+      <i class="bwi bwi-unlock" aria-hidden="true"></i>
+      {{ "unlock" | i18n }}
+    </button>
+    <button type="button" bitButton bitFormButton block (click)="logOut()">
+      {{ "logOut" | i18n }}
+    </button>
   </div>
 </form>

apps/web/src/app/auth/lock.component.ts

@@ -1,18 +1,49 @@
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
 
 import { LockComponent as BaseLockComponent } from "@bitwarden/angular/auth/components/lock.component";
 
+import { SharedModule } from "../shared";
+
 @Component({
   selector: "app-lock",
   templateUrl: "lock.component.html",
+  standalone: true,
+  imports: [SharedModule],
 })
 export class LockComponent extends BaseLockComponent {
+  formBuilder = inject(FormBuilder);
+
+  formGroup = this.formBuilder.group({
+    masterPassword: ["", { validators: Validators.required, updateOn: "submit" }],
+  });
+
+  get masterPasswordFormControl() {
+    return this.formGroup.controls.masterPassword;
+  }
+
   async ngOnInit() {
     await super.ngOnInit();
+
+    this.masterPasswordFormControl.setValue(this.masterPassword);
+
     this.onSuccessfulSubmit = async () => {
-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      this.router.navigateByUrl(this.successRoute);
+      await this.router.navigateByUrl(this.successRoute);
     };
   }
+
+  async superSubmit() {
+    await super.submit();
+  }
+
+  submit = async () => {
+    this.formGroup.markAllAsTouched();
+
+    if (this.formGroup.invalid) {
+      return;
+    }
+
+    this.masterPassword = this.masterPasswordFormControl.value;
+    await this.superSubmit();
+  };
 }

apps/web/src/app/oss-routing.module.ts

@@ -17,6 +17,7 @@ import {
   RegistrationStartComponent,
   RegistrationStartSecondaryComponent,
   RegistrationStartSecondaryComponentData,
+  LockIcon,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
@@ -113,11 +114,6 @@ const routes: Routes = [
         component: SetPasswordComponent,
         data: { titleId: "setMasterPassword" } satisfies DataProperties,
       },
-      {
-        path: "lock",
-        component: LockComponent,
-        canActivate: [deepLinkGuard(), lockGuard()],
-      },
       { path: "verify-email", component: VerifyEmailTokenComponent },
       {
         path: "accept-organization",
@@ -246,6 +242,21 @@ const routes: Routes = [
           pageTitle: "logIn",
         },
       },
+      {
+        path: "lock",
+        canActivate: [deepLinkGuard(), lockGuard()],
+        children: [
+          {
+            path: "",
+            component: LockComponent,
+          },
+        ],
+        data: {
+          pageTitle: "yourVaultIsLockedV2",
+          pageIcon: LockIcon,
+          showReadonlyHostname: true,
+        } satisfies AnonLayoutWrapperData,
+      },
       {
         path: "2fa",
         canActivate: [unauthGuardFn()],

apps/web/src/app/shared/loose-components.module.ts

@@ -22,7 +22,6 @@ import { VerifyRecoverDeleteProviderComponent } from "../admin-console/providers
 import { SponsoredFamiliesComponent } from "../admin-console/settings/sponsored-families.component";
 import { SponsoringOrgRowComponent } from "../admin-console/settings/sponsoring-org-row.component";
 import { HintComponent } from "../auth/hint.component";
-import { LockComponent } from "../auth/lock.component";
 import { RecoverDeleteComponent } from "../auth/recover-delete.component";
 import { RecoverTwoFactorComponent } from "../auth/recover-two-factor.component";
 import { RegisterFormModule } from "../auth/register-form/register-form.module";
@@ -141,7 +140,6 @@ import { SharedModule } from "./shared.module";
     FolderAddEditComponent,
     FrontendLayoutComponent,
     HintComponent,
-    LockComponent,
     OrgAddEditComponent,
     OrgAttachmentsComponent,
     OrgCollectionsComponent,
@@ -213,7 +211,6 @@ import { SharedModule } from "./shared.module";
     FolderAddEditComponent,
     FrontendLayoutComponent,
     HintComponent,
-    LockComponent,
     OrgAddEditComponent,
     OrganizationLayoutComponent,
     OrgAttachmentsComponent,

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

@@ -854,8 +854,8 @@
   "emailAddress": {
     "message": "Email address"
   },
-  "yourVaultIsLocked": {
-    "message": "Your vault is locked. Verify your master password to continue."
+  "yourVaultIsLockedV2": {
+    "message": "Your vault is locked."
   },
   "uuid":{
     "message" : "UUID"