WIP remove validated email& display extension back button

apps/browser/src/auth/popup/login/extension-login-component.service.spec.ts

@@ -10,6 +10,7 @@ import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legac
 
 import { flagEnabled } from "../../../platform/flags";
 import { BrowserPlatformUtilsService } from "../../../platform/services/platform-utils/browser-platform-utils.service";
+import { ExtensionAnonLayoutWrapperDataService } from "../extension-anon-layout-wrapper/extension-anon-layout-wrapper-data.service";
 
 import { ExtensionLoginComponentService } from "./extension-login-component.service";
 
@@ -24,14 +25,14 @@ describe("ExtensionLoginComponentService", () => {
   let passwordGenerationService: MockProxy<PasswordGenerationServiceAbstraction>;
   let platformUtilsService: MockProxy<BrowserPlatformUtilsService>;
   let ssoLoginService: MockProxy<SsoLoginServiceAbstraction>;
-
+  let extensionAnonLayoutWrapperDataService: MockProxy<ExtensionAnonLayoutWrapperDataService>;
   beforeEach(() => {
     cryptoFunctionService = mock<CryptoFunctionService>();
     environmentService = mock<EnvironmentService>();
     passwordGenerationService = mock<PasswordGenerationServiceAbstraction>();
     platformUtilsService = mock<BrowserPlatformUtilsService>();
     ssoLoginService = mock<SsoLoginServiceAbstraction>();
-
+    extensionAnonLayoutWrapperDataService = mock<ExtensionAnonLayoutWrapperDataService>();
     TestBed.configureTestingModule({
       providers: [
         {
@@ -43,6 +44,7 @@ describe("ExtensionLoginComponentService", () => {
               passwordGenerationService,
               platformUtilsService,
               ssoLoginService,
+              extensionAnonLayoutWrapperDataService,
             ),
         },
         { provide: DefaultLoginComponentService, useExisting: ExtensionLoginComponentService },

apps/browser/src/auth/popup/login/extension-login-component.service.ts

@@ -8,6 +8,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { flagEnabled } from "../../../platform/flags";
+import { ExtensionAnonLayoutWrapperDataService } from "../extension-anon-layout-wrapper/extension-anon-layout-wrapper-data.service";
 
 @Injectable()
 export class ExtensionLoginComponentService
@@ -20,6 +21,7 @@ export class ExtensionLoginComponentService
     passwordGenerationService: PasswordGenerationServiceAbstraction,
     platformUtilsService: PlatformUtilsService,
     ssoLoginService: SsoLoginServiceAbstraction,
+    private extensionAnonLayoutWrapperDataService: ExtensionAnonLayoutWrapperDataService,
   ) {
     super(
       cryptoFunctionService,
@@ -34,4 +36,8 @@ export class ExtensionLoginComponentService
   isLoginViaAuthRequestSupported(): boolean {
     return flagEnabled("showPasswordless");
   }
+
+  showBackButton(): void {
+    this.extensionAnonLayoutWrapperDataService.setAnonLayoutWrapperData({ showBackButton: true });
+  }
 }

apps/browser/src/popup/services/services.module.ts

@@ -602,6 +602,7 @@ const safeProviders: SafeProvider[] = [
       PasswordGenerationServiceAbstraction,
       PlatformUtilsServiceAbstraction,
       SsoLoginServiceAbstraction,
+      ExtensionAnonLayoutWrapperDataService,
     ],
   }),
   safeProvider({
@@ -619,6 +620,11 @@ const safeProviders: SafeProvider[] = [
     useClass: LoginEmailService,
     deps: [AccountService, AuthService, StateProvider],
   }),
+  safeProvider({
+    provide: ExtensionAnonLayoutWrapperDataService,
+    useClass: ExtensionAnonLayoutWrapperDataService,
+    deps: [],
+  }),
 ];
 
 @NgModule({

libs/auth/src/angular/login/default-login-component.service.ts

@@ -89,4 +89,11 @@ export class DefaultLoginComponentService implements LoginComponentService {
         encodeURIComponent(email),
     );
   }
+
+  /**
+   * No-op implementation of showBackButton
+   */
+  showBackButton(): void {
+    return;
+  }
 }

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

@@ -38,4 +38,9 @@ export abstract class LoginComponentService {
    * - Used by: Browser, Desktop
    */
   launchSsoBrowserWindow: (email: string, clientId: "browser" | "desktop") => Promise<void>;
+
+  /**
+   * Shows the back button.
+   */
+  showBackButton: () => void;
 }

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

@@ -11,7 +11,7 @@
 -->
 
 <form [bitSubmit]="submit" [formGroup]="formGroup">
-  <ng-container *ngIf="uiState === LoginUiState.EMAIL_ENTRY">
+  <ng-container *ngIf="loginUiState === LoginUiState.EMAIL_ENTRY">
     <!-- Email Address input -->
     <bit-form-field class="!tw-mb-4">
       <bit-label>{{ "emailAddress" | i18n }}</bit-label>
@@ -84,7 +84,7 @@
     </div>
   </ng-container>
 
-  <ng-container *ngIf="uiState === LoginUiState.MASTER_PASSWORD_ENTRY">
+  <ng-container *ngIf="loginUiState === LoginUiState.MASTER_PASSWORD_ENTRY">
     <!-- Master Password input -->
     <bit-form-field class="!tw-mb-1">
       <bit-label>{{ "masterPass" | i18n }}</bit-label>
@@ -132,13 +132,13 @@
       </ng-container>
 
       <!-- Back button -->
-      <ng-container *ngIf="showBackButton()">
+      <ng-container *ngIf="shouldShowBackButton()">
         <button
           type="button"
           bitButton
           block
           buttonType="secondary"
-          (click)="toggleValidateEmail(false)"
+          (click)="toggleLoginUiState(LoginUiState.EMAIL_ENTRY)"
         >
           {{ "back" | i18n }}
         </button>

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

@@ -80,7 +80,7 @@ export class LoginComponent implements OnInit, OnDestroy {
   LoginUiState = LoginUiState;
   registerRoute$ = this.registerRouteService.registerRoute$(); // TODO: remove when email verification flag is removed
   isKnownDevice = false;
-  validatedEmail = false;
+  loginUiState: LoginUiState = LoginUiState.EMAIL_ENTRY;
 
   formGroup = this.formBuilder.group(
     {
@@ -98,10 +98,6 @@ export class LoginComponent implements OnInit, OnDestroy {
     return this.formGroup.controls.email;
   }
 
-  get uiState(): LoginUiState {
-    return this.validatedEmail ? LoginUiState.MASTER_PASSWORD_ENTRY : LoginUiState.EMAIL_ENTRY;
-  }
-
   // Web properties
   enforcedPasswordPolicyOptions: MasterPasswordPolicyOptions;
   policies: Policy[];
@@ -164,7 +160,7 @@ export class LoginComponent implements OnInit, OnDestroy {
 
   submit = async (): Promise<void> => {
     if (this.clientType === ClientType.Desktop) {
-      if (!this.validatedEmail) {
+      if (this.loginUiState !== LoginUiState.MASTER_PASSWORD_ENTRY) {
         return;
       }
     }
@@ -323,7 +319,7 @@ export class LoginComponent implements OnInit, OnDestroy {
     const emailValid = this.formGroup.controls.email.valid;
 
     if (emailValid) {
-      this.toggleValidateEmail(true);
+      this.toggleLoginUiState(LoginUiState.MASTER_PASSWORD_ENTRY);
       await this.getLoginWithDevice(this.emailFormControl.value);
 
       this.anonLayoutWrapperDataService.setAnonLayoutWrapperData({
@@ -334,10 +330,10 @@ export class LoginComponent implements OnInit, OnDestroy {
     }
   }
 
-  protected toggleValidateEmail(value: boolean): void {
-    this.validatedEmail = value;
+  protected toggleLoginUiState(value: LoginUiState): void {
+    this.loginUiState = value;
 
-    if (!this.validatedEmail) {
+    if (this.loginUiState !== LoginUiState.MASTER_PASSWORD_ENTRY) {
       // Reset master password only when going from validated to not validated so that autofill can work properly
       this.formGroup.controls.masterPassword.reset();
     } else {
@@ -352,6 +348,8 @@ export class LoginComponent implements OnInit, OnDestroy {
           this.masterPasswordInputRef?.nativeElement?.focus();
         });
       }
+
+      this.loginComponentService.showBackButton();
     }
   }
 
@@ -551,7 +549,10 @@ export class LoginComponent implements OnInit, OnDestroy {
    * Helper function to determine if the back button should be shown.
    * @returns true if the back button should be shown.
    */
-  protected showBackButton(): boolean {
-    return this.validatedEmail && this.clientType !== ClientType.Browser;
+  protected shouldShowBackButton(): boolean {
+    return (
+      this.loginUiState === LoginUiState.MASTER_PASSWORD_ENTRY &&
+      this.clientType !== ClientType.Browser
+    );
   }
 }