[PM-12694] Modify logo on AnonLayout to direct to base route on click (#11263)

* Add "back" functionality for Desktop.

* Return user to email field when logo is clicked in Web.

* Update function name.

* Move hideLogo to anchor wrapper.

* Use "/" route for logo back link.

apps/desktop/src/auth/login/login.component.html

@@ -8,7 +8,9 @@
     attr.aria-hidden="{{ showingModal }}"
   >
     <div id="content" class="content" style="padding-top: 50px">
-      <img class="logo-image" alt="Bitwarden" />
+      <a (click)="invalidateEmail()" class="tw-cursor-pointer">
+        <img class="logo-image" alt="Bitwarden" />
+      </a>
       <p class="lead">{{ "loginOrCreateNewAccount" | i18n }}</p>
       <!-- start email -->
       <ng-container *ngIf="!validatedEmail; else loginPage">

apps/desktop/src/auth/login/login.component.ts

@@ -227,4 +227,11 @@ export class LoginComponent extends BaseLoginComponent implements OnInit, OnDest
       );
     }
   }
+
+  /**
+   * Force the validatedEmail flag to false, which will show the login page.
+   */
+  invalidateEmail() {
+    this.validatedEmail = false;
+  }
 }

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

@@ -1,6 +1,6 @@
 import { Directive, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
-import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRoute, NavigationSkipped, Router } from "@angular/router";
 import { Subject, firstValueFrom, of } from "rxjs";
 import { switchMap, take, takeUntil } from "rxjs/operators";
 
@@ -121,6 +121,14 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
       )
       .subscribe();
 
+    // If the user navigates to /login from /login, reset the validatedEmail flag
+    // This should bring the user back to the login screen with the email field
+    this.router.events.pipe(takeUntil(this.destroy$)).subscribe((event) => {
+      if (event instanceof NavigationSkipped && event.url === "/login") {
+        this.validatedEmail = false;
+      }
+    });
+
     // Backup check to handle unknown case where activatedRoute is not available
     // This shouldn't happen under normal circumstances
     if (!this.route) {

libs/auth/src/angular/anon-layout/anon-layout.component.html

@@ -9,7 +9,9 @@
     'tw-min-h-[calc(100vh-54px)]': clientType === 'desktop',
   }"
 >
-  <bit-icon *ngIf="!hideLogo" [icon]="logo" class="tw-w-[128px] [&>*]:tw-align-top"></bit-icon>
+  <a *ngIf="!hideLogo" [routerLink]="['/']" class="tw-w-[128px] [&>*]:tw-align-top">
+    <bit-icon [icon]="logo"></bit-icon>
+  </a>
 
   <div class="tw-text-center">
     <div class="tw-mx-auto tw-max-w-28 sm:tw-max-w-32">

libs/auth/src/angular/anon-layout/anon-layout.component.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from "@angular/common";
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
+import { RouterModule } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
 import { ClientType } from "@bitwarden/common/enums";
@@ -15,7 +16,7 @@ import { BitwardenLogo, BitwardenShield } from "../icons";
   standalone: true,
   selector: "auth-anon-layout",
   templateUrl: "./anon-layout.component.html",
-  imports: [IconModule, CommonModule, TypographyModule, SharedModule],
+  imports: [IconModule, CommonModule, TypographyModule, SharedModule, RouterModule],
 })
 export class AnonLayoutComponent implements OnInit, OnChanges {
   @Input() title: string;