From e2434ff397afe70503f08d32376b7b82b5759b19 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Tue, 10 Sep 2024 16:26:54 -0700
Subject: [PATCH] create a LoginSecondaryContentComponent for AnonLayout use

---
 apps/desktop/src/app/app-routing.module.ts    |  2 ++
 apps/desktop/src/locales/en/messages.json     |  3 ++
 libs/auth/src/angular/index.ts                |  1 +
 .../login-secondary-content.component.ts      | 16 ++++++++++
 .../src/angular/login/login.component.html    | 32 +++++++++++++------
 .../auth/src/angular/login/login.component.ts |  2 ++
 6 files changed, 47 insertions(+), 9 deletions(-)
 create mode 100644 libs/auth/src/angular/login/login-secondary-content.component.ts

diff --git a/apps/desktop/src/app/app-routing.module.ts b/apps/desktop/src/app/app-routing.module.ts
index 6c7932c9cab..b5c06357cf0 100644
--- a/apps/desktop/src/app/app-routing.module.ts
+++ b/apps/desktop/src/app/app-routing.module.ts
@@ -15,6 +15,7 @@ import {
   AnonLayoutWrapperComponent,
   AnonLayoutWrapperData,
   LoginComponentV2,
+  LoginSecondaryContentComponent,
   RegistrationFinishComponent,
   RegistrationStartComponent,
   RegistrationStartSecondaryComponent,
@@ -130,6 +131,7 @@ const routes: Routes = [
           },
           children: [
             { path: "", component: LoginComponentV2 },
+            { path: "", component: LoginSecondaryContentComponent, outlet: "secondary" },
             {
               path: "",
               component: EnvironmentSelectorComponent,
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
index 43774a88b52..c0c44b4f0e0 100644
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -499,6 +499,9 @@
   "createAccount": {
     "message": "Create account"
   },
+  "newToBitwarden": {
+    "message": "New to Bitwarden?"
+  },
   "setAStrongPassword": {
     "message": "Set a strong password"
   },
diff --git a/libs/auth/src/angular/index.ts b/libs/auth/src/angular/index.ts
index 569e7bb59f3..3ba0b8ef71b 100644
--- a/libs/auth/src/angular/index.ts
+++ b/libs/auth/src/angular/index.ts
@@ -20,6 +20,7 @@ export * from "./input-password/password-input-result";
 
 // login
 export * from "./login/login.component";
+export * from "./login/login-secondary-content.component";
 export * from "./login/login.service";
 export * from "./login/default-login.service";
 
diff --git a/libs/auth/src/angular/login/login-secondary-content.component.ts b/libs/auth/src/angular/login/login-secondary-content.component.ts
new file mode 100644
index 00000000000..f4d32533c6e
--- /dev/null
+++ b/libs/auth/src/angular/login/login-secondary-content.component.ts
@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+
+@Component({
+  standalone: true,
+  imports: [JslibModule, RouterModule],
+  template: `
+    <div class="tw-text-center">
+      {{ "newToBitwarden" | i18n }}
+      <a class="tw-font-bold" bitLink routerLink="/register">{{ "createAccount" | i18n }}</a>
+    </div>
+  `,
+})
+export class LoginSecondaryContentComponent {}
diff --git a/libs/auth/src/angular/login/login.component.html b/libs/auth/src/angular/login/login.component.html
index 092706d18a3..b32b2831d9c 100644
--- a/libs/auth/src/angular/login/login.component.html
+++ b/libs/auth/src/angular/login/login.component.html
@@ -1,4 +1,6 @@
-<!-- Web Template -->
+<!--------------------------------->
+<!--        Web Template         -->
+<!--------------------------------->
 
 <!--
     TODO-rr-bw: Clarify this comment if necessary.
@@ -15,9 +17,9 @@
   [bitSubmit]="submit"
   [formGroup]="formGroup"
 >
-  <!-------------------------
-    UI STATE 1: Email Entry
-  -------------------------->
+  <!-----------------------------
+    Web UI State 1: Email Entry
+  ------------------------------>
   <ng-container *ngIf="!validatedEmail">
     <!-- Email Address input -->
     <div class="tw-mb-3">
@@ -83,9 +85,9 @@
     </p>
   </ng-container>
 
-  <!-----------------------------------
-    UI STATE 2: Master Password Entry
-  ------------------------------------>
+  <!---------------------------------------
+    Web UI State 2: Master Password Entry
+  ---------------------------------------->
   <!--
     Why not use <ng-container *ngIf="validatedEmail"> to display this section?
     Because we want access to the masterPasswordInput reference in the class file.
@@ -153,18 +155,26 @@
 
     <div class="tw-m-0 tw-text-sm">
       <p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ loggedEmail }}</p>
+      <!-- TODO-rr-bw: check link -->
       <a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
     </div>
   </div>
 </form>
 
-<!-- Browser Template -->
+<!--------------------------------->
+<!--      Browser Template       -->
+<!--------------------------------->
 <form *ngIf="clientType === ClientType.Browser" [bitSubmit]="submit" [formGroup]="formGroup">
   <main tabindex="-1"></main>
 </form>
 
-<!-- Desktop Template -->
+<!--------------------------------->
+<!--      Desktop Template       -->
+<!--------------------------------->
 <form *ngIf="clientType === ClientType.Desktop" [bitSubmit]="submit" [formGroup]="formGroup">
+  <!---------------------------------
+    Desktop UI State 1: Email Entry
+  ---------------------------------->
   <ng-container *ngIf="!validatedEmail">
     <!-- Email Address input -->
     <bit-form-field>
@@ -199,4 +209,8 @@
 
     <!-- TODO-rr-bw: add "New to Bitwarden? Create Account (might need to be AnonLayout secondary content)" -->
   </ng-container>
+
+  <!-------------------------------------------
+    Desktop UI State 2: Master Password Entry
+  -------------------------------------------->
 </form>
diff --git a/libs/auth/src/angular/login/login.component.ts b/libs/auth/src/angular/login/login.component.ts
index 11e6aaf5cfd..12095bc78e2 100644
--- a/libs/auth/src/angular/login/login.component.ts
+++ b/libs/auth/src/angular/login/login.component.ts
@@ -249,6 +249,8 @@ export class LoginComponentV2 implements OnInit, OnDestroy {
       }
     }
 
+    /* TODO-rr-bw: these two lines are also used at the end of the submit method for
+       Browser/Desktop. See if you can consolidate for all 3 clients. */
     this.loginEmailService.clearValues();
     await this.router.navigate(["vault"]);
   }