WIP remove validated email& display extension back button

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
+    );
   }
 }