setup new LoginComponent files in libs/auth

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

@@ -45,6 +45,7 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
   enforcedPasswordPolicyOptions: MasterPasswordPolicyOptions;
   policies: Policy[];
   showPasswordless = false;
+
   constructor(
     private acceptOrganizationInviteService: AcceptOrganizationInviteService,
     devicesApiService: DevicesApiServiceAbstraction,
@@ -95,6 +96,7 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
     this.onSuccessfulLoginNavigate = this.goAfterLogIn;
     this.showPasswordless = flagEnabled("showPasswordless");
   }
+
   submitForm = async (showToast = true) => {
     return await this.submitFormHelper(showToast);
   };
@@ -102,6 +104,7 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
   private async submitFormHelper(showToast: boolean) {
     await super.submit(showToast);
   }
+
   async ngOnInit() {
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
@@ -202,10 +205,12 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
     if (this.policies == null) {
       return;
     }
+
     const resetPasswordPolicy = this.policyService.getResetPasswordPolicyOptions(
       this.policies,
       invite.organizationId,
     );
+
     // Set to true if policy enabled and auto-enroll enabled
     this.showResetPasswordAutoEnrollWarning =
       resetPasswordPolicy[1] && resetPasswordPolicy[0].autoEnrollEnabled;

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

@@ -19,6 +19,7 @@ import {
   SetPasswordJitComponent,
   LockIcon,
   RegistrationLinkExpiredComponent,
+  LoginComponentV2,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
@@ -260,7 +261,7 @@ const routes: Routes = [
         children: [
           {
             path: "",
-            component: LoginComponent,
+            component: LoginComponentV2,
           },
           {
             path: "",

libs/angular/src/auth/components/login.component.ts

@@ -266,6 +266,7 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
   async validateEmail() {
     this.formGroup.controls.email.markAsTouched();
     const emailValid = this.formGroup.get("email").valid;
+
     if (emailValid) {
       this.toggleValidateEmail(true);
       await this.getLoginWithDevice(this.loggedEmail);
@@ -299,6 +300,7 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
     // Try to load from memory first
     const email = this.loginEmailService.getEmail();
     const rememberEmail = this.loginEmailService.getRememberEmail();
+
     if (email) {
       this.formGroup.controls.email.setValue(email);
       this.formGroup.controls.rememberEmail.setValue(rememberEmail);

libs/auth/src/angular/index.ts

@@ -2,9 +2,6 @@
  * This barrel file should only contain Angular exports
  */
 
-// icons
-export * from "./icons";
-
 // anon layout
 export * from "./anon-layout/anon-layout.component";
 export * from "./anon-layout/anon-layout-wrapper.component";
@@ -14,14 +11,28 @@ export * from "./anon-layout/default-anon-layout-wrapper-data.service";
 // fingerprint dialog
 export * from "./fingerprint-dialog/fingerprint-dialog.component";
 
-// password callout
-export * from "./password-callout/password-callout.component";
-export * from "./vault-timeout-input/vault-timeout-input.component";
+// icons
+export * from "./icons";
 
 // input password
 export * from "./input-password/input-password.component";
 export * from "./input-password/password-input-result";
 
+// login
+export * from "./login/login.component";
+
+// password callout
+export * from "./password-callout/password-callout.component";
+
+// registration
+export * from "./registration/registration-start/registration-start.component";
+export * from "./registration/registration-finish/registration-finish.component";
+export * from "./registration/registration-link-expired/registration-link-expired.component";
+export * from "./registration/registration-start/registration-start-secondary.component";
+export * from "./registration/registration-env-selector/registration-env-selector.component";
+export * from "./registration/registration-finish/registration-finish.service";
+export * from "./registration/registration-finish/default-registration-finish.service";
+
 // set password (JIT user)
 export * from "./set-password-jit/set-password-jit.component";
 export * from "./set-password-jit/set-password-jit.service.abstraction";
@@ -32,11 +43,5 @@ export * from "./user-verification/user-verification-dialog.component";
 export * from "./user-verification/user-verification-dialog.types";
 export * from "./user-verification/user-verification-form-input.component";
 
-// registration
-export * from "./registration/registration-start/registration-start.component";
-export * from "./registration/registration-finish/registration-finish.component";
-export * from "./registration/registration-link-expired/registration-link-expired.component";
-export * from "./registration/registration-start/registration-start-secondary.component";
-export * from "./registration/registration-env-selector/registration-env-selector.component";
-export * from "./registration/registration-finish/registration-finish.service";
-export * from "./registration/registration-finish/default-registration-finish.service";
+// vault timeout input
+export * from "./vault-timeout-input/vault-timeout-input.component";

libs/auth/src/angular/login/login.component.html

@@ -0,0 +1,55 @@
+<form [bitSubmit]="submit" [formGroup]="formGroup">
+  <!-------------------------
+    UI STATE 1: Email Entry
+  -------------------------->
+  <ng-container *ngIf="true">
+    <!-- Email Address input -->
+    <div class="tw-mb-3">
+      <bit-form-field>
+        <bit-label>{{ "emailAddress" | i18n }}</bit-label>
+        <input type="email" bitInput formControlName="email" appAutofocus />
+      </bit-form-field>
+    </div>
+
+    <!-- Remember Email input -->
+    <div class="tw-mb-3 tw-flex tw-items-start">
+      <bit-form-control class="tw-mb-0">
+        <input type="checkbox" bitCheckbox formControlName="rememberEmail" />
+        <bit-label>{{ "rememberEmail" | i18n }}</bit-label>
+      </bit-form-control>
+    </div>
+
+    <!-- Continue button -->
+    <div class="tw-mb-3">
+      <button
+        bitButton
+        type="submit"
+        buttonType="primary"
+        class="tw-w-full"
+        (click)="validateEmail()"
+      >
+        <span> {{ "continue" | i18n }} </span>
+      </button>
+    </div>
+
+    <!-- Login with Passkey link -->
+    <div class="tw-mb-3 tw-flex tw-flex-col tw-items-center tw-justify-center">
+      <p class="tw-mb-3">{{ "or" | i18n }}</p>
+      <a
+        bitLink
+        block
+        linkType="primary"
+        routerLink="/login-with-passkey"
+        (mousedown)="$event.preventDefault()"
+      >
+        <span><i class="bwi bwi-passkey"></i> {{ "loginWithPasskey" | i18n }}</span>
+      </a>
+    </div>
+
+    <hr />
+  </ng-container>
+
+  <!-----------------------------------
+    UI STATE 2: Master Password Entry
+  ------------------------------------>
+</form>

libs/auth/src/angular/login/login.component.ts

@@ -0,0 +1,69 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";
+import { ActivatedRoute, RouterModule } from "@angular/router";
+import { Subject, takeUntil } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import {
+  AsyncActionsModule,
+  ButtonModule,
+  CheckboxModule,
+  FormFieldModule,
+} from "@bitwarden/components";
+
+@Component({
+  standalone: true,
+  templateUrl: "./login.component.html",
+  imports: [
+    AsyncActionsModule,
+    ButtonModule,
+    CheckboxModule,
+    CommonModule,
+    FormFieldModule,
+    JslibModule,
+    ReactiveFormsModule,
+    RouterModule,
+  ],
+})
+export class LoginComponentV2 implements OnInit {
+  protected paramEmailSet = false;
+
+  protected formGroup = this.formBuilder.group({
+    email: ["", [Validators.required, Validators.email]],
+    rememberEmail: [false],
+  });
+
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private formBuilder: FormBuilder,
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    this.activatedRoute.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
+      if (!params) {
+        return;
+      }
+
+      const qParamsEmail = params.email;
+
+      if (qParamsEmail?.indexOf("@") > -1) {
+        this.formGroup.controls.email.setValue(qParamsEmail);
+
+        this.paramEmailSet = true;
+      }
+    });
+
+    if (!this.paramEmailSet) {
+      await this.loadEmailSettings();
+    }
+  }
+
+  submit = async () => {};
+
+  async validateEmail() {}
+
+  private async loadEmailSettings() {}
+}