[PM-3953] Generalize copy for login with device (clients)

apps/browser/src/_locales/en/messages.json

@@ -3105,12 +3105,18 @@
   "notificationSentDevice": {
     "message": "A notification has been sent to your device."
   },
+  "notificationSentDevicePart1": {
+    "message": "Unlock Bitwarden on your device or on the "
+  },
+  "notificationSentDeviceAnchor": {
+    "message": "web app"
+  },
+  "notificationSentDevicePart2": {
+    "message": ". Make sure the Fingerprint phrase matches the one below before approving"
+  },
   "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"
   },
@@ -3120,6 +3126,9 @@
   "loginInitiated": {
     "message": "Login initiated"
   },
+  "logInRequestSent": {
+    "message": "Request sent"
+  },
   "exposedMasterPassword": {
     "message": "Exposed Master Password"
   },

apps/browser/src/auth/popup/login-via-auth-request-v1.component.html

@@ -7,13 +7,15 @@ <h1 class="login-center">
   <div class="content login-page">
     <ng-container *ngIf="state == StateEnum.StandardAuthRequest">
       <div>
-        <p class="lead">{{ "loginInitiated" | i18n }}</p>
+        <p class="lead">{{ "logInRequestSent" | i18n }}</p>
 
         <div>
-          <p>{{ "notificationSentDevice" | i18n }}</p>
-
           <p>
-            {{ "fingerprintMatchInfo" | i18n }}
+            {{ "notificationSentDevicePart1" | i18n }}
+            <a routerLink="/settings/security/device-management">{{
+              "notificationSentDeviceAnchor" | i18n
+            }}</a>
+            {{ "notificationSentDevicePart2" | i18n }}
           </p>
         </div>
 

apps/browser/src/popup/app-routing.module.ts

@@ -411,7 +411,7 @@ const routes: Routes = [
       data: {
         pageIcon: DevicesIcon,
         pageTitle: {
-          key: "loginInitiated",
+          key: "logInRequestSent",
         },
         pageSubtitle: {
           key: "aNotificationWasSentToYourDevice",

apps/desktop/src/app/app-routing.module.ts

@@ -200,7 +200,7 @@ const routes: Routes = [
       data: {
         pageIcon: DevicesIcon,
         pageTitle: {
-          key: "loginInitiated",
+          key: "logInRequestSent",
         },
         pageSubtitle: {
           key: "aNotificationWasSentToYourDevice",

apps/desktop/src/auth/login/desktop-login-approval-component.service.spec.ts

@@ -51,15 +51,15 @@ describe("DesktopLoginApprovalComponentService", () => {
   it("calls ipc.auth.loginRequest with correct parameters when window is not visible", async () => {
     const title = "Log in requested";
     const email = "[email protected]";
-    const message = `Confirm login attempt for ${email}`;
+    const message = `Account access requested, confirm access attempt for ${email}`;
     const closeText = "Close";
 
     const loginApprovalComponent = { email } as LoginApprovalComponent;
     i18nService.t.mockImplementation((key: string) => {
       switch (key) {
-        case "logInRequested":
+        case "accountAccessRequested":
           return title;
-        case "confirmLoginAtemptForMail":
+        case "accountAccessRequestedConfirmAccessAttempt":
           return message;
         case "close":
           return closeText;

apps/desktop/src/auth/login/desktop-login-approval-component.service.ts

@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { Injectable } from "@angular/core";
 
 import { DefaultLoginApprovalComponentService } from "@bitwarden/auth/angular";
@@ -15,12 +13,12 @@ export class DesktopLoginApprovalComponentService
     super();
   }
 
-  async showLoginRequestedAlertIfWindowNotVisible(email: string): Promise<void> {
+  async showLoginRequestedAlertIfWindowNotVisible(email?: string): Promise<void> {
     const isVisible = await ipc.platform.isWindowVisible();
     if (!isVisible) {
       await ipc.auth.loginRequest(
-        this.i18nService.t("logInRequested"),
-        this.i18nService.t("confirmLoginAtemptForMail", email),
+        this.i18nService.t("accountAccessRequested"),
+        this.i18nService.t("accountAccessRequestedConfirmAccessAttempt", email),
         this.i18nService.t("close"),
       );
     }

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

@@ -3,15 +3,18 @@
     <img class="logo-image" alt="Bitwarden" />
 
     <ng-container *ngIf="state == StateEnum.StandardAuthRequest">
-      <p class="lead text-center">{{ "loginInitiated" | i18n }}</p>
+      <p class="lead text-center">{{ "logInRequestSent" | i18n }}</p>
 
       <div class="box last">
         <div class="box-content">
           <div class="box-content-row" appBoxRow>
             <div class="section">
-              <p class="section">{{ "notificationSentDevice" | i18n }}</p>
-              <p>
-                {{ "fingerprintMatchInfo" | i18n }}
+              <p class="section">
+                {{ "notificationSentDevicePart1" | i18n }}
+                <a routerLink="/settings/security/device-management">{{
+                  "notificationSentDeviceAnchor" | i18n
+                }}</a>
+                {{ "notificationSentDevicePart2" | i18n }}
               </p>
             </div>
 

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

@@ -2736,14 +2736,23 @@
   "loginInitiated": {
     "message": "Login initiated"
   },
+  "logInRequestSent": {
+    "message": "Request sent"
+  },
   "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"
+  "notificationSentDevicePart1": {
+    "message": "Unlock Bitwarden on your device or on the "
+  },
+  "notificationSentDeviceAnchor": {
+    "message": "web app"
+  },
+  "notificationSentDevicePart2": {
+    "message": ". Make sure the Fingerprint phrase matches the one below before approving"
   },
   "needAnotherOptionV1": {
     "message": "Need another option?"
@@ -2773,11 +2782,11 @@
     "message": "Toggle character count",
     "description": "'Character count' describes a feature that displays a number next to each character of the password."
   },
-  "areYouTryingtoLogin": {
-    "message": "Are you trying to log in?"
+  "areYouTryingToAccessYourAccount": {
+    "message": "Are you trying to access your account?"
   },
-  "logInAttemptBy": {
-    "message": "Login attempt by $EMAIL$",
+  "accessAttemptBy": {
+    "message": "Access attempt by $EMAIL$",
     "placeholders": {
       "email": {
         "content": "$1",
@@ -2794,11 +2803,11 @@
   "time": {
     "message": "Time"
   },
-  "confirmLogIn": {
-    "message": "Confirm login"
+  "confirmAccess": {
+    "message": "Confirm access"
   },
-  "denyLogIn": {
-    "message": "Deny login"
+  "denyAccess": {
+    "message": "Deny access"
   },
   "logInConfirmedForEmailOnDevice": {
     "message": "Login confirmed for $EMAIL$ on $DEVICE$",
@@ -2834,8 +2843,8 @@
   "thisRequestIsNoLongerValid": {
     "message": "This request is no longer valid."
   },
-  "confirmLoginAtemptForMail": {
-    "message": "Confirm login attempt for $EMAIL$",
+  "accountAccessRequestedConfirmAccessAttempt": {
+    "message": "Account access requested, confirm access attempt for $EMAIL$",
     "placeholders": {
       "email": {
         "content": "$1",
@@ -2846,6 +2855,9 @@
   "logInRequested": {
     "message": "Log in requested"
   },
+  "accountAccessRequested": {
+    "message": "Account access requested"
+  },
   "creatingAccountOn": {
     "message": "Creating account on"
   },

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

@@ -1,5 +1,3 @@
-<!-- Please remove this disable statement when editing this file! -->
-<!-- eslint-disable tailwindcss/no-custom-classname -->
 <div
   class="tw-mx-auto tw-mt-5 tw-flex tw-max-w-lg tw-flex-col tw-items-center tw-justify-center tw-p-8"
 >
@@ -14,15 +12,15 @@
       <div
         class="tw-mt-3 tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-6"
       >
-        <h2 class="tw-mb-6 tw-text-xl tw-font-semibold">{{ "loginInitiated" | i18n }}</h2>
+        <h2 class="tw-mb-6 tw-text-xl tw-font-semibold">{{ "logInRequestSent" | i18n }}</h2>
 
-        <div class="tw-text-light">
-          <p class="tw-mb-6">{{ "notificationSentDevice" | i18n }}</p>
-
-          <p class="tw-mb-6">
-            {{ "fingerprintMatchInfo" | i18n }}
-          </p>
-        </div>
+        <p class="tw-mb-6">
+          {{ "notificationSentDevicePart1" | i18n }}
+          <a routerLink="/settings/security/device-management">{{
+            "notificationSentDeviceAnchor" | i18n
+          }}</a>
+          {{ "notificationSentDevicePart2" | i18n }}
+        </p>
 
         <div class="tw-mb-6">
           <h4 class="tw-font-semibold">{{ "fingerprintPhraseHeader" | i18n }}</h4>
@@ -39,7 +37,7 @@ <h4 class="tw-font-semibold">{{ "fingerprintPhraseHeader" | i18n }}</h4>
 
         <hr />
 
-        <div class="tw-text-light tw-mt-3">
+        <div class="tw-mt-3">
           {{ "loginWithDeviceEnabledNote" | i18n }}
           <a routerLink="/login">{{ "viewAllLoginOptions" | i18n }}</a>
         </div>
@@ -52,7 +50,7 @@ <h4 class="tw-font-semibold">{{ "fingerprintPhraseHeader" | i18n }}</h4>
       >
         <h2 class="tw-mb-6 tw-text-xl tw-font-semibold">{{ "adminApprovalRequested" | i18n }}</h2>
 
-        <div class="tw-text-light">
+        <div>
           <p class="tw-mb-6">{{ "adminApprovalRequestSentToAdmins" | i18n }}</p>
           <p class="tw-mb-6">{{ "youWillBeNotifiedOnceApproved" | i18n }}</p>
         </div>
@@ -66,7 +64,7 @@ <h4 class="tw-font-semibold">{{ "fingerprintPhraseHeader" | i18n }}</h4>
 
         <hr />
 
-        <div class="tw-text-light tw-mt-3">
+        <div class="tw-mt-3">
           {{ "troubleLoggingIn" | i18n }}
           <a routerLink="/login-initiated">{{ "viewAllLoginOptions" | i18n }}</a>
         </div>

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

@@ -182,7 +182,7 @@ const routes: Routes = [
       data: {
         pageIcon: DevicesIcon,
         pageTitle: {
-          key: "loginInitiated",
+          key: "logInRequestSent",
         },
         pageSubtitle: {
           key: "aNotificationWasSentToYourDevice",

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

@@ -1191,6 +1191,9 @@
   "logInInitiated": {
     "message": "Log in initiated"
   },
+  "logInRequestSent": {
+    "message": "Request sent"
+  },
   "submit": {
     "message": "Submit"
   },
@@ -1380,12 +1383,18 @@
   "notificationSentDevice": {
     "message": "A notification has been sent to your device."
   },
+  "notificationSentDevicePart1": {
+    "message": "Unlock Bitwarden on your device or on the "
+  },
+  "notificationSentDeviceAnchor": {
+    "message": "web app"
+  },
+  "notificationSentDevicePart2": {
+    "message": ". Make sure the Fingerprint phrase matches the one below before approving"
+  },
   "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": {

libs/auth/src/angular/login-approval/login-approval.component.html

@@ -1,5 +1,5 @@
 <bit-dialog>
-  <span bitDialogTitle>{{ "areYouTryingtoLogin" | i18n }}</span>
+  <span bitDialogTitle>{{ "areYouTryingToAccessYourAccount" | i18n }}</span>
   <ng-container bitDialogContent>
     <ng-container *ngIf="loading">
       <div class="tw-flex tw-items-center tw-justify-center" *ngIf="loading">
@@ -8,7 +8,7 @@
     </ng-container>
 
     <ng-container *ngIf="!loading">
-      <h4 class="tw-mb-3">{{ "logInAttemptBy" | i18n: email }}</h4>
+      <h4 class="tw-mb-3">{{ "accessAttemptBy" | i18n: email }}</h4>
       <div>
         <b>{{ "fingerprintPhraseHeader" | i18n }}</b>
         <p class="tw-text-code">{{ fingerprintPhrase }}</p>
@@ -35,7 +35,7 @@ <h4 class="tw-mb-3">{{ "logInAttemptBy" | i18n: email }}</h4>
       [bitAction]="approveLogin"
       [disabled]="loading"
     >
-      {{ "confirmLogIn" | i18n }}
+      {{ "confirmAccess" | i18n }}
     </button>
     <button
       bitButton
@@ -44,7 +44,7 @@ <h4 class="tw-mb-3">{{ "logInAttemptBy" | i18n: email }}</h4>
       [bitAction]="denyLogin"
       [disabled]="loading"
     >
-      {{ "denyLogIn" | i18n }}
+      {{ "denyAccess" | i18n }}
     </button>
   </ng-container>
 </bit-dialog>

libs/auth/src/angular/login-approval/login-approval.component.ts

@@ -85,7 +85,7 @@ export class LoginApprovalComponent implements OnInit, OnDestroy {
       }
 
       const publicKey = Utils.fromB64ToArray(this.authRequestResponse.publicKey);
-      this.email = await await firstValueFrom(
+      this.email = await firstValueFrom(
         this.accountService.activeAccount$.pipe(map((a) => a?.email)),
       );
       this.fingerprintPhrase = await this.authRequestService.getFingerprintPhrase(

libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.html

@@ -1,6 +1,12 @@
 <div class="tw-text-center">
   <ng-container *ngIf="flow === Flow.StandardAuthRequest">
-    <p>{{ "makeSureYourAccountIsUnlockedAndTheFingerprintEtc" | i18n }}</p>
+    <p>
+      {{ "notificationSentDevicePart1" | i18n }}
+      <a routerLink="/settings/security/device-management">{{
+        "notificationSentDeviceAnchor" | i18n
+      }}</a>
+      {{ "notificationSentDevicePart2" | i18n }}
+    </p>
 
     <div class="tw-font-semibold">{{ "fingerprintPhraseHeader" | i18n }}</div>
     <code class="tw-text-code">{{ fingerprintPhrase }}</code>