feat(auth): [PM-9723] Refresh LoginViaAuthRequestComponent (#11545)

Creates a refreshed and consolidated LoginViaAuthRequestComponent for use on all visual clients, which will be used when the UnauthenticatedExtensionUIRefresh feature flag is on.

apps/web/src/app/auth/login/login-via-auth-request-v1.component.html

@@ -45,6 +45,7 @@
         </div>
       </div>
     </ng-container>
+
     <ng-container *ngIf="state == StateEnum.AdminAuthRequest">
       <div
         class="tw-mt-3 tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-6"

apps/web/src/app/auth/login/login-via-auth-request-v1.component.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+import { LoginViaAuthRequestComponentV1 as BaseLoginViaAuthRequestComponentV1 } from "@bitwarden/angular/auth/components/login-via-auth-request-v1.component";
+
+@Component({
+  selector: "app-login-via-auth-request",
+  templateUrl: "login-via-auth-request-v1.component.html",
+})
+export class LoginViaAuthRequestComponentV1 extends BaseLoginViaAuthRequestComponentV1 {}

apps/web/src/app/auth/login/login-via-auth-request.component.ts

@@ -1,9 +0,0 @@
-import { Component } from "@angular/core";
-
-import { LoginViaAuthRequestComponent as BaseLoginWithDeviceComponent } from "@bitwarden/angular/auth/components/login-via-auth-request.component";
-
-@Component({
-  selector: "app-login-via-auth-request",
-  templateUrl: "login-via-auth-request.component.html",
-})
-export class LoginViaAuthRequestComponent extends BaseLoginWithDeviceComponent {}

apps/web/src/app/auth/login/login.module.ts

@@ -6,20 +6,20 @@ import { SharedModule } from "../../../app/shared";
 
 import { LoginDecryptionOptionsComponent } from "./login-decryption-options/login-decryption-options.component";
 import { LoginComponentV1 } from "./login-v1.component";
-import { LoginViaAuthRequestComponent } from "./login-via-auth-request.component";
+import { LoginViaAuthRequestComponentV1 } from "./login-via-auth-request-v1.component";
 import { LoginViaWebAuthnComponent } from "./login-via-webauthn/login-via-webauthn.component";
 
 @NgModule({
   imports: [SharedModule, CheckboxModule],
   declarations: [
     LoginComponentV1,
-    LoginViaAuthRequestComponent,
+    LoginViaAuthRequestComponentV1,
     LoginDecryptionOptionsComponent,
     LoginViaWebAuthnComponent,
   ],
   exports: [
     LoginComponentV1,
-    LoginViaAuthRequestComponent,
+    LoginViaAuthRequestComponentV1,
     LoginDecryptionOptionsComponent,
     LoginViaWebAuthnComponent,
   ],

apps/web/src/app/oss-routing.module.ts

@@ -27,6 +27,8 @@ import {
   LockV2Component,
   LockIcon,
   UserLockIcon,
+  LoginViaAuthRequestComponent,
+  DevicesIcon,
   RegistrationUserAddIcon,
   RegistrationLockAltIcon,
   RegistrationExpiredLinkIcon,
@@ -46,7 +48,7 @@ import { HintComponent } from "./auth/hint.component";
 import { LockComponent } from "./auth/lock.component";
 import { LoginDecryptionOptionsComponent } from "./auth/login/login-decryption-options/login-decryption-options.component";
 import { LoginComponentV1 } from "./auth/login/login-v1.component";
-import { LoginViaAuthRequestComponent } from "./auth/login/login-via-auth-request.component";
+import { LoginViaAuthRequestComponentV1 } from "./auth/login/login-via-auth-request-v1.component";
 import { LoginViaWebAuthnComponent } from "./auth/login/login-via-webauthn/login-via-webauthn.component";
 import { AcceptOrganizationComponent } from "./auth/organization-invite/accept-organization.component";
 import { RecoverDeleteComponent } from "./auth/recover-delete.component";
@@ -96,21 +98,11 @@ const routes: Routes = [
         children: [], // Children lets us have an empty component.
         canActivate: [redirectGuard()], // Redirects either to vault, login, or lock page.
       },
-      {
-        path: "login-with-device",
-        component: LoginViaAuthRequestComponent,
-        data: { titleId: "loginWithDevice" } satisfies RouteDataProperties,
-      },
       {
         path: "login-with-passkey",
         component: LoginViaWebAuthnComponent,
         data: { titleId: "logInWithPasskey" } satisfies RouteDataProperties,
       },
-      {
-        path: "admin-approval-requested",
-        component: LoginViaAuthRequestComponent,
-        data: { titleId: "adminApprovalRequested" } satisfies RouteDataProperties,
-      },
       {
         path: "login-initiated",
         component: LoginDecryptionOptionsComponent,
@@ -179,6 +171,57 @@ const routes: Routes = [
       },
     ],
   },
+  ...unauthUiRefreshSwap(
+    LoginViaAuthRequestComponentV1,
+    AnonLayoutWrapperComponent,
+    {
+      path: "login-with-device",
+      data: { titleId: "loginWithDevice" } satisfies RouteDataProperties,
+    },
+    {
+      path: "login-with-device",
+      data: {
+        pageIcon: DevicesIcon,
+        pageTitle: {
+          key: "loginInitiated",
+        },
+        pageSubtitle: {
+          key: "aNotificationWasSentToYourDevice",
+        },
+        titleId: "loginInitiated",
+      } satisfies RouteDataProperties & AnonLayoutWrapperData,
+      children: [
+        { path: "", component: LoginViaAuthRequestComponent },
+        {
+          path: "",
+          component: EnvironmentSelectorComponent,
+          outlet: "environment-selector",
+        },
+      ],
+    },
+  ),
+  ...unauthUiRefreshSwap(
+    LoginViaAuthRequestComponentV1,
+    AnonLayoutWrapperComponent,
+    {
+      path: "admin-approval-requested",
+      data: { titleId: "adminApprovalRequested" } satisfies RouteDataProperties,
+    },
+    {
+      path: "admin-approval-requested",
+      data: {
+        pageIcon: DevicesIcon,
+        pageTitle: {
+          key: "adminApprovalRequested",
+        },
+        pageSubtitle: {
+          key: "adminApprovalRequestSentToAdmins",
+        },
+        titleId: "adminApprovalRequested",
+      } satisfies RouteDataProperties & AnonLayoutWrapperData,
+      children: [{ path: "", component: LoginViaAuthRequestComponent }],
+    },
+  ),
   ...unauthUiRefreshSwap(
     AnonLayoutWrapperComponent,
     AnonLayoutWrapperComponent,

apps/web/src/locales/en/messages.json

@@ -984,6 +984,9 @@
   "loginWithDeviceEnabledNote": {
     "message": "Log in with device must be set up in the settings of the Bitwarden app. Need another option?"
   },
+  "needAnotherOptionV1": {
+    "message": "Need another option?"
+  },
   "loginWithMasterPassword": {
     "message": "Log in with master password"
   },
@@ -1302,6 +1305,12 @@
   "notificationSentDevice": {
     "message": "A notification has been sent to your device."
   },
+  "aNotificationWasSentToYourDevice": {
+    "message": "A notification was sent to your device"
+  },
+  "makeSureYourAccountIsUnlockedAndTheFingerprintEtc": {
+    "message": "Make sure your account is unlocked and the fingerprint phrase matches on the other device"
+  },
   "versionNumber": {
     "message": "Version $VERSION_NUMBER$",
     "placeholders": {
@@ -3387,6 +3396,9 @@
       }
     }
   },
+  "viewAllLogInOptions": {
+    "message": "View all log in options"
+  },
   "viewAllLoginOptions": {
     "message": "View all log in options"
   },
@@ -4443,6 +4455,9 @@
     "message": "Never prompt to verify fingerprint phrases for invited users (not recommended)",
     "description": "A 'fingerprint phrase' is a unique word phrase (similar to a passphrase) that a user can use to authenticate their public key with another user, for the purposes of sharing."
   },
+  "youWillBeNotifiedOnceTheRequestIsApproved": {
+    "message": "You will be notified once the request is approved"
+  },
   "free": {
     "message": "Free",
     "description": "Free, as in 'Free beer'"