create a LoginSecondaryContentComponent for AnonLayout use

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,

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"
   },

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";
 

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 {}

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>

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"]);
   }