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.
bitwarden · Nov 19, 2024 · 9429ae1 · 9429ae1
1 parent 2df8643
commit 9429ae1
Show file tree

Hide file tree

Showing 32 changed files with 1,025 additions and 69 deletions.
diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
@@ -3170,12 +3170,27 @@
   "resendNotification": {
     "message": "Resend notification"
   },
+  "viewAllLogInOptions": {
+    "message": "View all log in options"
+  },
   "viewAllLoginOptions": {
     "message": "View all log in options"
   },
   "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"
+  },
+  "youWillBeNotifiedOnceTheRequestIsApproved": {
+    "message": "You will be notified once the request is approved"
+  },
+  "needAnotherOptionV1": {
+    "message": "Need another option?"
+  },
   "loginInitiated": {
     "message": "Login initiated"
   },

diff --git a/...pup/login-via-auth-request.component.html → .../login-via-auth-request-v1.component.html b/...pup/login-via-auth-request.component.html → .../login-via-auth-request-v1.component.html
diff --git a/...popup/login-via-auth-request.component.ts → ...up/login-via-auth-request-v1.component.ts b/...popup/login-via-auth-request.component.ts → ...up/login-via-auth-request-v1.component.ts
@@ -2,7 +2,7 @@ import { Location } from "@angular/common";
 import { Component } from "@angular/core";
 import { Router } from "@angular/router";
 
-import { LoginViaAuthRequestComponent as BaseLoginWithDeviceComponent } from "@bitwarden/angular/auth/components/login-via-auth-request.component";
+import { LoginViaAuthRequestComponentV1 as BaseLoginViaAuthRequestComponentV1 } from "@bitwarden/angular/auth/components/login-via-auth-request-v1.component";
 import {
   AuthRequestServiceAbstraction,
   LoginStrategyServiceAbstraction,
@@ -27,9 +27,9 @@ import { KeyService } from "@bitwarden/key-management";
 
 @Component({
   selector: "app-login-via-auth-request",
-  templateUrl: "login-via-auth-request.component.html",
+  templateUrl: "login-via-auth-request-v1.component.html",
 })
-export class LoginViaAuthRequestComponent extends BaseLoginWithDeviceComponent {
+export class LoginViaAuthRequestComponentV1 extends BaseLoginViaAuthRequestComponentV1 {
   constructor(
     router: Router,
     keyService: KeyService,

diff --git a/apps/browser/src/popup/app-routing.animations.ts b/apps/browser/src/popup/app-routing.animations.ts
@@ -132,6 +132,9 @@ export const routerTransition = trigger("routerTransition", [
   transition("login-with-device => tabs, login-with-device => 2fa", inSlideLeft),
   transition("login-with-device => login", outSlideRight),
 
+  transition("admin-approval-requested => tabs, admin-approval-requested => 2fa", inSlideLeft),
+  transition("admin-approval-requested => login", outSlideRight),
+
   transition(tabsToCiphers, inSlideLeft),
   transition(ciphersToTabs, outSlideRight),
 

diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
@@ -21,10 +21,12 @@ import { extensionRefreshSwap } from "@bitwarden/angular/utils/extension-refresh
 import {
   AnonLayoutWrapperComponent,
   AnonLayoutWrapperData,
+  DevicesIcon,
   LoginComponent,
   LoginSecondaryContentComponent,
   LockIcon,
   LockV2Component,
+  LoginViaAuthRequestComponent,
   PasswordHintComponent,
   RegistrationFinishComponent,
   RegistrationLockAltIcon,
@@ -51,7 +53,7 @@ import { HomeComponent } from "../auth/popup/home.component";
 import { LockComponent } from "../auth/popup/lock.component";
 import { LoginDecryptionOptionsComponent } from "../auth/popup/login-decryption-options/login-decryption-options.component";
 import { LoginComponentV1 } from "../auth/popup/login-v1.component";
-import { LoginViaAuthRequestComponent } from "../auth/popup/login-via-auth-request.component";
+import { LoginViaAuthRequestComponentV1 } from "../auth/popup/login-via-auth-request-v1.component";
 import { RegisterComponent } from "../auth/popup/register.component";
 import { RemovePasswordComponent } from "../auth/popup/remove-password.component";
 import { SetPasswordComponent } from "../auth/popup/set-password.component";
@@ -171,18 +173,6 @@ const routes: Routes = [
     canActivate: [fido2AuthGuard],
     data: { state: "fido2" } satisfies RouteDataProperties,
   }),
-  {
-    path: "login-with-device",
-    component: LoginViaAuthRequestComponent,
-    canActivate: [],
-    data: { state: "login-with-device" } satisfies RouteDataProperties,
-  },
-  {
-    path: "admin-approval-requested",
-    component: LoginViaAuthRequestComponent,
-    canActivate: [],
-    data: { state: "login-with-device" } satisfies RouteDataProperties,
-  },
   {
     path: "lock",
     component: LockComponent,
@@ -409,6 +399,61 @@ const routes: Routes = [
     canActivate: [authGuard],
     data: { state: "update-temp-password" } satisfies RouteDataProperties,
   },
+  ...unauthUiRefreshSwap(
+    LoginViaAuthRequestComponentV1,
+    ExtensionAnonLayoutWrapperComponent,
+    {
+      path: "login-with-device",
+      data: { state: "login-with-device" } satisfies RouteDataProperties,
+    },
+    {
+      path: "login-with-device",
+      data: {
+        pageIcon: DevicesIcon,
+        pageTitle: {
+          key: "loginInitiated",
+        },
+        pageSubtitle: {
+          key: "aNotificationWasSentToYourDevice",
+        },
+        showLogo: false,
+        showBackButton: true,
+        state: "login-with-device",
+      } satisfies RouteDataProperties & ExtensionAnonLayoutWrapperData,
+      children: [
+        { path: "", component: LoginViaAuthRequestComponent },
+        {
+          path: "",
+          component: EnvironmentSelectorComponent,
+          outlet: "environment-selector",
+        },
+      ],
+    },
+  ),
+  ...unauthUiRefreshSwap(
+    LoginViaAuthRequestComponentV1,
+    ExtensionAnonLayoutWrapperComponent,
+    {
+      path: "admin-approval-requested",
+      data: { state: "admin-approval-requested" } satisfies RouteDataProperties,
+    },
+    {
+      path: "admin-approval-requested",
+      data: {
+        pageIcon: DevicesIcon,
+        pageTitle: {
+          key: "adminApprovalRequested",
+        },
+        pageSubtitle: {
+          key: "adminApprovalRequestSentToAdmins",
+        },
+        showLogo: false,
+        showBackButton: true,
+        state: "admin-approval-requested",
+      } satisfies RouteDataProperties & ExtensionAnonLayoutWrapperData,
+      children: [{ path: "", component: LoginViaAuthRequestComponent }],
+    },
+  ),
   ...unauthUiRefreshSwap(
     HintComponent,
     ExtensionAnonLayoutWrapperComponent,

diff --git a/apps/browser/src/popup/app.module.ts b/apps/browser/src/popup/app.module.ts
@@ -26,7 +26,7 @@ import { HomeComponent } from "../auth/popup/home.component";
 import { LockComponent } from "../auth/popup/lock.component";
 import { LoginDecryptionOptionsComponent } from "../auth/popup/login-decryption-options/login-decryption-options.component";
 import { LoginComponentV1 } from "../auth/popup/login-v1.component";
-import { LoginViaAuthRequestComponent } from "../auth/popup/login-via-auth-request.component";
+import { LoginViaAuthRequestComponentV1 } from "../auth/popup/login-via-auth-request-v1.component";
 import { RegisterComponent } from "../auth/popup/register.component";
 import { RemovePasswordComponent } from "../auth/popup/remove-password.component";
 import { SetPasswordComponent } from "../auth/popup/set-password.component";
@@ -159,8 +159,8 @@ import "../platform/popup/locales";
     HintComponent,
     HomeComponent,
     LockComponent,
+    LoginViaAuthRequestComponentV1,
     LoginComponentV1,
-    LoginViaAuthRequestComponent,
     LoginDecryptionOptionsComponent,
     NotificationsSettingsV1Component,
     AppearanceComponent,

diff --git a/apps/desktop/src/app/app-routing.module.ts b/apps/desktop/src/app/app-routing.module.ts
@@ -18,10 +18,12 @@ import { extensionRefreshRedirect } from "@bitwarden/angular/utils/extension-ref
 import {
   AnonLayoutWrapperComponent,
   AnonLayoutWrapperData,
+  DevicesIcon,
   LoginComponent,
   LoginSecondaryContentComponent,
   LockIcon,
   LockV2Component,
+  LoginViaAuthRequestComponent,
   PasswordHintComponent,
   RegistrationFinishComponent,
   RegistrationLockAltIcon,
@@ -42,7 +44,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 { RegisterComponent } from "../auth/register.component";
 import { RemovePasswordComponent } from "../auth/remove-password.component";
 import { SetPasswordComponent } from "../auth/set-password.component";
@@ -75,14 +77,6 @@ const routes: Routes = [
     canActivate: [lockGuard()],
     canMatch: [extensionRefreshRedirect("/lockV2")],
   },
-  {
-    path: "login-with-device",
-    component: LoginViaAuthRequestComponent,
-  },
-  {
-    path: "admin-approval-requested",
-    component: LoginViaAuthRequestComponent,
-  },
   ...twofactorRefactorSwap(
     TwoFactorComponent,
     AnonLayoutWrapperComponent,
@@ -130,6 +124,53 @@ const routes: Routes = [
     component: RemovePasswordComponent,
     canActivate: [authGuard],
   },
+  ...unauthUiRefreshSwap(
+    LoginViaAuthRequestComponentV1,
+    AnonLayoutWrapperComponent,
+    {
+      path: "login-with-device",
+    },
+    {
+      path: "login-with-device",
+      data: {
+        pageIcon: DevicesIcon,
+        pageTitle: {
+          key: "loginInitiated",
+        },
+        pageSubtitle: {
+          key: "aNotificationWasSentToYourDevice",
+        },
+      } satisfies AnonLayoutWrapperData,
+      children: [
+        { path: "", component: LoginViaAuthRequestComponent },
+        {
+          path: "",
+          component: EnvironmentSelectorComponent,
+          outlet: "environment-selector",
+        },
+      ],
+    },
+  ),
+  ...unauthUiRefreshSwap(
+    LoginViaAuthRequestComponentV1,
+    AnonLayoutWrapperComponent,
+    {
+      path: "admin-approval-requested",
+    },
+    {
+      path: "admin-approval-requested",
+      data: {
+        pageIcon: DevicesIcon,
+        pageTitle: {
+          key: "adminApprovalRequested",
+        },
+        pageSubtitle: {
+          key: "adminApprovalRequestSentToAdmins",
+        },
+      } satisfies AnonLayoutWrapperData,
+      children: [{ path: "", component: LoginViaAuthRequestComponent }],
+    },
+  ),
   ...unauthUiRefreshSwap(
     HintComponent,
     AnonLayoutWrapperComponent,

diff --git a/...gin/login-via-auth-request.component.html → .../login-via-auth-request-v1.component.html b/...gin/login-via-auth-request.component.html → .../login-via-auth-request-v1.component.html
diff --git a/...login/login-via-auth-request.component.ts → ...in/login-via-auth-request-v1.component.ts b/...login/login-via-auth-request.component.ts → ...in/login-via-auth-request-v1.component.ts
@@ -2,7 +2,7 @@ import { Location } from "@angular/common";
 import { Component, ViewChild, ViewContainerRef } from "@angular/core";
 import { Router } from "@angular/router";
 
-import { LoginViaAuthRequestComponent as BaseLoginWithDeviceComponent } from "@bitwarden/angular/auth/components/login-via-auth-request.component";
+import { LoginViaAuthRequestComponentV1 as BaseLoginViaAuthRequestComponentV1 } from "@bitwarden/angular/auth/components/login-via-auth-request-v1.component";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import {
   AuthRequestServiceAbstraction,
@@ -30,9 +30,9 @@ import { EnvironmentComponent } from "../environment.component";
 
 @Component({
   selector: "app-login-via-auth-request",
-  templateUrl: "login-via-auth-request.component.html",
+  templateUrl: "login-via-auth-request-v1.component.html",
 })
-export class LoginViaAuthRequestComponent extends BaseLoginWithDeviceComponent {
+export class LoginViaAuthRequestComponentV1 extends BaseLoginViaAuthRequestComponentV1 {
   @ViewChild("environment", { read: ViewContainerRef, static: true })
   environmentModal: ViewContainerRef;
   showingModal = false;

diff --git a/apps/desktop/src/auth/login/login.module.ts b/apps/desktop/src/auth/login/login.module.ts
@@ -7,16 +7,16 @@ import { SharedModule } from "../../app/shared/shared.module";
 
 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";
 
 @NgModule({
   imports: [SharedModule, RouterModule],
   declarations: [
     LoginComponentV1,
-    LoginViaAuthRequestComponent,
+    LoginViaAuthRequestComponentV1,
     EnvironmentSelectorComponent,
     LoginDecryptionOptionsComponent,
   ],
-  exports: [LoginComponentV1, LoginViaAuthRequestComponent],
+  exports: [LoginComponentV1, LoginViaAuthRequestComponentV1],
 })
 export class LoginModule {}
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
@@ -2689,15 +2689,30 @@
   "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"
+  },
+  "needAnotherOptionV1": {
+    "message": "Need another option?"
+  },
   "fingerprintMatchInfo": {
     "message": "Please make sure your vault is unlocked and Fingerprint phrase matches the other device."
   },
   "fingerprintPhraseHeader": {
     "message": "Fingerprint phrase"
   },
+  "youWillBeNotifiedOnceTheRequestIsApproved": {
+    "message": "You will be notified once the request is approved"
+  },
   "needAnotherOption": {
     "message": "Log in with device must be set up in the settings of the Bitwarden app. Need another option?"
   },
+  "viewAllLogInOptions": {
+    "message": "View all log in options"
+  },
   "viewAllLoginOptions": {
     "message": "View all login options"
   },

diff --git a/...gin/login-via-auth-request.component.html → .../login-via-auth-request-v1.component.html b/...gin/login-via-auth-request.component.html → .../login-via-auth-request-v1.component.html
@@ -45,6 +45,7 @@ <h4 class="tw-font-semibold">{{ "fingerprintPhraseHeader" | i18n }}</h4>
         </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"

diff --git a/apps/web/src/app/auth/login/login-via-auth-request-v1.component.ts b/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 {}
diff --git a/apps/web/src/app/auth/login/login-via-auth-request.component.ts b/apps/web/src/app/auth/login/login-via-auth-request.component.ts
diff --git a/apps/web/src/app/auth/login/login.module.ts b/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,
   ],