From acd47c2b795615d8bbb20112398bb9c3b96eda46 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <127791530+alec-livefront@users.noreply.github.com>
Date: Wed, 2 Oct 2024 08:00:37 -0500
Subject: [PATCH] [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       |  4 +++-
 apps/desktop/src/auth/login/login.component.ts         |  7 +++++++
 libs/angular/src/auth/components/login.component.ts    | 10 +++++++++-
 .../src/angular/anon-layout/anon-layout.component.html |  4 +++-
 .../src/angular/anon-layout/anon-layout.component.ts   |  3 ++-
 5 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/auth/login/login.component.html b/apps/desktop/src/auth/login/login.component.html
index 8a8611ad03..efec43ffa8 100644
--- a/apps/desktop/src/auth/login/login.component.html
+++ b/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">
diff --git a/apps/desktop/src/auth/login/login.component.ts b/apps/desktop/src/auth/login/login.component.ts
index 2b5910baa9..b43e5bc84f 100644
--- a/apps/desktop/src/auth/login/login.component.ts
+++ b/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;
+  }
 }
diff --git a/libs/angular/src/auth/components/login.component.ts b/libs/angular/src/auth/components/login.component.ts
index 831d505a38..1c8f4f656e 100644
--- a/libs/angular/src/auth/components/login.component.ts
+++ b/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) {
diff --git a/libs/auth/src/angular/anon-layout/anon-layout.component.html b/libs/auth/src/angular/anon-layout/anon-layout.component.html
index 9e6c27f601..aa5ff02965 100644
--- a/libs/auth/src/angular/anon-layout/anon-layout.component.html
+++ b/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">
diff --git a/libs/auth/src/angular/anon-layout/anon-layout.component.ts b/libs/auth/src/angular/anon-layout/anon-layout.component.ts
index a40fafc5db..ff28f24a93 100644
--- a/libs/auth/src/angular/anon-layout/anon-layout.component.ts
+++ b/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;