From e0697a67e99ba5dc2406be52adde17cbb8925bd1 Mon Sep 17 00:00:00 2001 From: jng Date: Fri, 22 Nov 2024 10:41:38 -0500 Subject: [PATCH 01/25] starting --- apps/web/src/app/oss-routing.module.ts | 5 +++++ .../src/utils/new-device-notification-swap.ts | 0 .../new-device-verification-notice.component.html | 5 +++++ .../new-device-verification-notice.component.ts | 13 +++++++++++++ 4 files changed, 23 insertions(+) create mode 100644 libs/angular/src/utils/new-device-notification-swap.ts create mode 100644 libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html create mode 100644 libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.ts diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts index 20361c7edc2..d1faa519ac1 100644 --- a/apps/web/src/app/oss-routing.module.ts +++ b/apps/web/src/app/oss-routing.module.ts @@ -39,6 +39,7 @@ import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; import { twofactorRefactorSwap } from "../../../../libs/angular/src/utils/two-factor-component-refactor-route-swap"; import { flagEnabled, Flags } from "../utils/flags"; +import { NewDeviceVerificationNoticeComponent } from "./../../../../libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component"; import { VerifyRecoverDeleteOrgComponent } from "./admin-console/organizations/manage/verify-recover-delete-org.component"; import { AcceptFamilySponsorshipComponent } from "./admin-console/organizations/sponsorships/accept-family-sponsorship.component"; import { FamiliesForEnterpriseSetupComponent } from "./admin-console/organizations/sponsorships/families-for-enterprise-setup.component"; @@ -628,6 +629,10 @@ const routes: Routes = [ }, ], }, + { + path: "blah", + component: NewDeviceVerificationNoticeComponent, + }, { path: "", component: UserLayoutComponent, diff --git a/libs/angular/src/utils/new-device-notification-swap.ts b/libs/angular/src/utils/new-device-notification-swap.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html new file mode 100644 index 00000000000..abb280a0894 --- /dev/null +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html @@ -0,0 +1,5 @@ + diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.ts new file mode 100644 index 00000000000..9b2e697ec72 --- /dev/null +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.ts @@ -0,0 +1,13 @@ +import { Component } from "@angular/core"; + +import { AnonLayoutComponent } from "@bitwarden/auth/angular"; + +@Component({ + standalone: true, + selector: "app-new-device-verification-notice", + templateUrl: "./new-device-verification-notice.component.html", + imports: [AnonLayoutComponent], +}) +export class NewDeviceVerificationNoticeComponent { + constructor() {} +} From 2affcdf01bf590f5ed7fb1351b1f1fea6bc1eaf3 Mon Sep 17 00:00:00 2001 From: jng Date: Fri, 22 Nov 2024 17:16:44 -0500 Subject: [PATCH 02/25] setup first page for new device verification notice --- apps/browser/src/_locales/en/messages.json | 21 ++++++++++++++++ apps/desktop/src/locales/en/messages.json | 21 ++++++++++++++++ apps/web/src/app/oss-routing.module.ts | 16 ++++++++++++- apps/web/src/locales/en/messages.json | 21 ++++++++++++++++ ...-device-verification-notice.component.html | 24 +++++++++++++++---- ...ew-device-verification-notice.component.ts | 22 +++++++++++++---- libs/vault/src/icons/exclamation-triangle.ts | 14 +++++++++++ libs/vault/src/icons/index.ts | 1 + 8 files changed, 129 insertions(+), 11 deletions(-) create mode 100644 libs/vault/src/icons/exclamation-triangle.ts diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index 5200cf81d09..a9de7e7ad99 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -4897,5 +4897,26 @@ }, "beta": { "message": "Beta" + }, + "importantNotice": { + "message": "Important notice" + }, + "newDeviceVerificationNoticeContentPage1": { + "message": "Bitwarden will soon send a code to your account email to verify logins from new devices." + }, + "newDeviceVerificationNoticePage1FormContent": { + "message": "Do you have reliable access to your email, $EMAIL$", + "placeholders": { + "email": { + "content": "$1", + "example": "your_name@email.com" + } + } + }, + "newDeviceVerificationNoticePage1OptionA": { + "message": "No, I do not" + }, + "newDeviceVerificationNoticePage1OptionB": { + "message": "Yes, I can reliably access my email" } } diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json index 837535ddb09..85f0ae57108 100644 --- a/apps/desktop/src/locales/en/messages.json +++ b/apps/desktop/src/locales/en/messages.json @@ -3376,5 +3376,26 @@ }, "fileSavedToDevice": { "message": "File saved to device. Manage from your device downloads." + }, + "importantNotice": { + "message": "Important notice" + }, + "newDeviceVerificationNoticeContentPage1": { + "message": "Bitwarden will soon send a code to your account email to verify logins from new devices." + }, + "newDeviceVerificationNoticePage1FormContent": { + "message": "Do you have reliable access to your email, $EMAIL$", + "placeholders": { + "email": { + "content": "$1", + "example": "your_name@email.com" + } + } + }, + "newDeviceVerificationNoticePage1OptionA": { + "message": "No, I do not" + }, + "newDeviceVerificationNoticePage1OptionB": { + "message": "Yes, I can reliably access my email" } } diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts index b0eca66232f..c05522855a9 100644 --- a/apps/web/src/app/oss-routing.module.ts +++ b/apps/web/src/app/oss-routing.module.ts @@ -36,6 +36,7 @@ import { LoginDecryptionOptionsComponent, } from "@bitwarden/auth/angular"; import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; +import { VaultIcons } from "@bitwarden/vault"; import { twofactorRefactorSwap } from "../../../../libs/angular/src/utils/two-factor-component-refactor-route-swap"; import { flagEnabled, Flags } from "../utils/flags"; @@ -643,7 +644,20 @@ const routes: Routes = [ }, { path: "blah", - component: NewDeviceVerificationNoticeComponent, + component: AnonLayoutWrapperComponent, + canActivate: [], + children: [ + { + path: "", + component: NewDeviceVerificationNoticeComponent, + data: { + pageIcon: VaultIcons.ExclamationTriangle, + pageTitle: { + key: "importantNotice", + }, + }, + }, + ], }, { path: "", diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 0c1558a35d9..7a3282ca43f 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -9787,5 +9787,26 @@ }, "descriptorCode": { "message": "Descriptor code" + }, + "importantNotice": { + "message": "Important notice" + }, + "newDeviceVerificationNoticeContentPage1": { + "message": "Bitwarden will soon send a code to your account email to verify logins from new devices." + }, + "newDeviceVerificationNoticePage1FormContent": { + "message": "Do you have reliable access to your email, $EMAIL$", + "placeholders": { + "email": { + "content": "$1", + "example": "your_name@email.com" + } + } + }, + "newDeviceVerificationNoticePage1OptionA": { + "message": "No, I do not" + }, + "newDeviceVerificationNoticePage1OptionB": { + "message": "Yes, I can reliably access my email" } } diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html index abb280a0894..931db7723d9 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html @@ -1,5 +1,19 @@ - +
+

{{ "newDeviceVerificationNoticeContentPage1" | i18n }}

+ +

{{ formMessage }}

+ +
+ + +
+ +
+ + +
+
diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.ts index 9b2e697ec72..ab43aba33d5 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.ts @@ -1,13 +1,25 @@ -import { Component } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { Component, OnInit } from "@angular/core"; -import { AnonLayoutComponent } from "@bitwarden/auth/angular"; +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { TypographyModule } from "@bitwarden/components"; @Component({ standalone: true, selector: "app-new-device-verification-notice", templateUrl: "./new-device-verification-notice.component.html", - imports: [AnonLayoutComponent], + imports: [CommonModule, JslibModule, TypographyModule], }) -export class NewDeviceVerificationNoticeComponent { - constructor() {} +export class NewDeviceVerificationNoticeComponent implements OnInit { + formMessage: string; + constructor(private i18nService: I18nService) {} + + ngOnInit() { + this.formMessage = this.i18nService.t( + "newDeviceVerificationNoticePage1FormContent", + "peter.parker@daily.com", + ); + } + submit = () => {}; } diff --git a/libs/vault/src/icons/exclamation-triangle.ts b/libs/vault/src/icons/exclamation-triangle.ts new file mode 100644 index 00000000000..3de992877bc --- /dev/null +++ b/libs/vault/src/icons/exclamation-triangle.ts @@ -0,0 +1,14 @@ +import { svgIcon } from "@bitwarden/components"; + +export const ExclamationTriangle = svgIcon` + + + + + + + + + + +`; diff --git a/libs/vault/src/icons/index.ts b/libs/vault/src/icons/index.ts index c1b69a31ef5..d7c2495fc2b 100644 --- a/libs/vault/src/icons/index.ts +++ b/libs/vault/src/icons/index.ts @@ -2,3 +2,4 @@ export * from "./deactivated-org"; export * from "./no-folders"; export * from "./vault"; export * from "./empty-trash"; +export * from "./exclamation-triangle"; From d20b7a5f303c61f747ce4f9d85b00855b833d34d Mon Sep 17 00:00:00 2001 From: jng Date: Tue, 26 Nov 2024 12:25:24 -0500 Subject: [PATCH 03/25] update designs for first page. rename components and files --- apps/web/src/app/oss-routing.module.ts | 4 +-- ...erification-notice-page-one.component.html | 29 +++++++++++++++++++ ...verification-notice-page-one.component.ts} | 10 +++---- ...-device-verification-notice.component.html | 19 ------------ 4 files changed, 36 insertions(+), 26 deletions(-) create mode 100644 libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html rename libs/vault/src/components/new-device-verification-notice/{new-device-verification-notice.component.ts => new-device-verification-notice-page-one.component.ts} (60%) delete mode 100644 libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts index c05522855a9..1d3f975e491 100644 --- a/apps/web/src/app/oss-routing.module.ts +++ b/apps/web/src/app/oss-routing.module.ts @@ -39,9 +39,9 @@ import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; import { VaultIcons } from "@bitwarden/vault"; import { twofactorRefactorSwap } from "../../../../libs/angular/src/utils/two-factor-component-refactor-route-swap"; +import { NewDeviceVerificationNoticePageOneComponent } from "../../../../libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component"; import { flagEnabled, Flags } from "../utils/flags"; -import { NewDeviceVerificationNoticeComponent } from "./../../../../libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component"; import { VerifyRecoverDeleteOrgComponent } from "./admin-console/organizations/manage/verify-recover-delete-org.component"; import { AcceptFamilySponsorshipComponent } from "./admin-console/organizations/sponsorships/accept-family-sponsorship.component"; import { FamiliesForEnterpriseSetupComponent } from "./admin-console/organizations/sponsorships/families-for-enterprise-setup.component"; @@ -649,7 +649,7 @@ const routes: Routes = [ children: [ { path: "", - component: NewDeviceVerificationNoticeComponent, + component: NewDeviceVerificationNoticePageOneComponent, data: { pageIcon: VaultIcons.ExclamationTriangle, pageTitle: { diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html new file mode 100644 index 00000000000..c78546c2cad --- /dev/null +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html @@ -0,0 +1,29 @@ +
+

+ {{ "newDeviceVerificationNoticeContentPage1" | i18n }} +

+ +
+

{{ formMessage }}

+ +
+ + +
+ +
+ + +
+
+ + +
diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts similarity index 60% rename from libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.ts rename to libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts index ab43aba33d5..c9b295b609b 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts @@ -3,15 +3,15 @@ import { Component, OnInit } from "@angular/core"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; -import { TypographyModule } from "@bitwarden/components"; +import { ButtonModule, TypographyModule } from "@bitwarden/components"; @Component({ standalone: true, - selector: "app-new-device-verification-notice", - templateUrl: "./new-device-verification-notice.component.html", - imports: [CommonModule, JslibModule, TypographyModule], + selector: "app-new-device-verification-notice-page-one", + templateUrl: "./new-device-verification-notice-page-one.component.html", + imports: [CommonModule, JslibModule, TypographyModule, ButtonModule], }) -export class NewDeviceVerificationNoticeComponent implements OnInit { +export class NewDeviceVerificationNoticePageOneComponent implements OnInit { formMessage: string; constructor(private i18nService: I18nService) {} diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html deleted file mode 100644 index 931db7723d9..00000000000 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html +++ /dev/null @@ -1,19 +0,0 @@ -
-

{{ "newDeviceVerificationNoticeContentPage1" | i18n }}

- -

{{ formMessage }}

- -
- - -
- -
- - -
-
From 64598a07ae99235d1653bf0f9667160a40dbebeb Mon Sep 17 00:00:00 2001 From: jng Date: Tue, 26 Nov 2024 13:54:21 -0500 Subject: [PATCH 04/25] added second page for new device verification notice --- apps/browser/src/_locales/en/messages.json | 12 +++++++++ apps/desktop/src/locales/en/messages.json | 12 +++++++++ apps/web/src/app/oss-routing.module.ts | 17 +++++++++++-- apps/web/src/locales/en/messages.json | 12 +++++++++ ...erification-notice-page-one.component.html | 2 +- ...erification-notice-page-two.component.html | 10 ++++++++ ...-verification-notice-page-two.component.ts | 25 +++++++++++++++++++ libs/vault/src/icons/index.ts | 1 + libs/vault/src/icons/user-lock.ts | 17 +++++++++++++ libs/vault/src/index.ts | 2 ++ 10 files changed, 107 insertions(+), 3 deletions(-) create mode 100644 libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.html create mode 100644 libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts create mode 100644 libs/vault/src/icons/user-lock.ts diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index 664538fcc4c..4bfd3f6ce81 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -4892,9 +4892,15 @@ "importantNotice": { "message": "Important notice" }, + "setupTwoStepLogin": { + "message": "Set up two-step login" + }, "newDeviceVerificationNoticeContentPage1": { "message": "Bitwarden will soon send a code to your account email to verify logins from new devices." }, + "newDeviceVerificationNoticeContentPage2": { + "message": "You can set up two-step login as an alternative way to protect your account or change your email to one you can access." + }, "newDeviceVerificationNoticePage1FormContent": { "message": "Do you have reliable access to your email, $EMAIL$", "placeholders": { @@ -4910,6 +4916,12 @@ "newDeviceVerificationNoticePage1OptionB": { "message": "Yes, I can reliably access my email" }, + "turnOnTwoStepLogin": { + "message": "Turn on two-step login" + }, + "changeAcctEmail": { + "message": "Change account email" + }, "extensionWidth": { "message": "Extension width" }, diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json index 85f0ae57108..cb0d774a44f 100644 --- a/apps/desktop/src/locales/en/messages.json +++ b/apps/desktop/src/locales/en/messages.json @@ -3380,9 +3380,15 @@ "importantNotice": { "message": "Important notice" }, + "setupTwoStepLogin": { + "message": "Set up two-step login" + }, "newDeviceVerificationNoticeContentPage1": { "message": "Bitwarden will soon send a code to your account email to verify logins from new devices." }, + "newDeviceVerificationNoticeContentPage2": { + "message": "You can set up two-step login as an alternative way to protect your account or change your email to one you can access." + }, "newDeviceVerificationNoticePage1FormContent": { "message": "Do you have reliable access to your email, $EMAIL$", "placeholders": { @@ -3397,5 +3403,11 @@ }, "newDeviceVerificationNoticePage1OptionB": { "message": "Yes, I can reliably access my email" + }, + "turnOnTwoStepLogin": { + "message": "Turn on two-step login" + }, + "changeAcctEmail": { + "message": "Change account email" } } diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts index 1d3f975e491..935143131a2 100644 --- a/apps/web/src/app/oss-routing.module.ts +++ b/apps/web/src/app/oss-routing.module.ts @@ -36,10 +36,13 @@ import { LoginDecryptionOptionsComponent, } from "@bitwarden/auth/angular"; import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; -import { VaultIcons } from "@bitwarden/vault"; +import { + NewDeviceVerificationNoticePageOneComponent, + NewDeviceVerificationNoticePageTwoComponent, + VaultIcons, +} from "@bitwarden/vault"; import { twofactorRefactorSwap } from "../../../../libs/angular/src/utils/two-factor-component-refactor-route-swap"; -import { NewDeviceVerificationNoticePageOneComponent } from "../../../../libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component"; import { flagEnabled, Flags } from "../utils/flags"; import { VerifyRecoverDeleteOrgComponent } from "./admin-console/organizations/manage/verify-recover-delete-org.component"; @@ -657,6 +660,16 @@ const routes: Routes = [ }, }, }, + { + path: "setup", + component: NewDeviceVerificationNoticePageTwoComponent, + data: { + pageIcon: VaultIcons.UserLock, + pageTitle: { + key: "setupTwoStepLogin", + }, + }, + }, ], }, { diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 7a3282ca43f..3989e32c6d3 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -9791,9 +9791,15 @@ "importantNotice": { "message": "Important notice" }, + "setupTwoStepLogin": { + "message": "Set up two-step login" + }, "newDeviceVerificationNoticeContentPage1": { "message": "Bitwarden will soon send a code to your account email to verify logins from new devices." }, + "newDeviceVerificationNoticeContentPage2": { + "message": "You can set up two-step login as an alternative way to protect your account or change your email to one you can access." + }, "newDeviceVerificationNoticePage1FormContent": { "message": "Do you have reliable access to your email, $EMAIL$", "placeholders": { @@ -9808,5 +9814,11 @@ }, "newDeviceVerificationNoticePage1OptionB": { "message": "Yes, I can reliably access my email" + }, + "turnOnTwoStepLogin": { + "message": "Turn on two-step login" + }, + "changeAcctEmail": { + "message": "Change account email" } } diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html index c78546c2cad..e9ac8c8a27b 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html @@ -1,6 +1,6 @@

- {{ "newDeviceVerificationNoticeContentPage1" | i18n }} + {{ "newDeviceVerificationNoticeContentPage2" | i18n }}

+ {{ "newDeviceVerificationNoticeContentPage1" | i18n }} +

+ + + diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts new file mode 100644 index 00000000000..2bbeae47ff1 --- /dev/null +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts @@ -0,0 +1,25 @@ +import { CommonModule } from "@angular/common"; +import { Component, OnInit } from "@angular/core"; + +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { ButtonModule, TypographyModule } from "@bitwarden/components"; + +@Component({ + standalone: true, + selector: "app-new-device-verification-notice-page-two", + templateUrl: "./new-device-verification-notice-page-two.component.html", + imports: [CommonModule, JslibModule, TypographyModule, ButtonModule], +}) +export class NewDeviceVerificationNoticePageTwoComponent implements OnInit { + formMessage: string; + constructor(private i18nService: I18nService) {} + + ngOnInit() { + this.formMessage = this.i18nService.t( + "newDeviceVerificationNoticePage1FormContent", + "peter.parker@daily.com", + ); + } + submit = () => {}; +} diff --git a/libs/vault/src/icons/index.ts b/libs/vault/src/icons/index.ts index d7c2495fc2b..2e106782f53 100644 --- a/libs/vault/src/icons/index.ts +++ b/libs/vault/src/icons/index.ts @@ -3,3 +3,4 @@ export * from "./no-folders"; export * from "./vault"; export * from "./empty-trash"; export * from "./exclamation-triangle"; +export * from "./user-lock"; diff --git a/libs/vault/src/icons/user-lock.ts b/libs/vault/src/icons/user-lock.ts new file mode 100644 index 00000000000..e20525ebd87 --- /dev/null +++ b/libs/vault/src/icons/user-lock.ts @@ -0,0 +1,17 @@ +import { svgIcon } from "@bitwarden/components"; + +export const UserLock = svgIcon` + + + + + + + + + + + + + +`; diff --git a/libs/vault/src/index.ts b/libs/vault/src/index.ts index f6a95281f81..8513990121c 100644 --- a/libs/vault/src/index.ts +++ b/libs/vault/src/index.ts @@ -13,5 +13,7 @@ export { export { DownloadAttachmentComponent } from "./components/download-attachment/download-attachment.component"; export { PasswordHistoryViewComponent } from "./components/password-history-view/password-history-view.component"; +export { NewDeviceVerificationNoticePageOneComponent } from "./components/new-device-verification-notice/new-device-verification-notice-page-one.component"; +export { NewDeviceVerificationNoticePageTwoComponent } from "./components/new-device-verification-notice/new-device-verification-notice-page-two.component"; export * as VaultIcons from "./icons"; From f96ef7e135fd5043a19e19949b888c87c4b2474b Mon Sep 17 00:00:00 2001 From: jng Date: Wed, 27 Nov 2024 15:43:35 -0500 Subject: [PATCH 05/25] update notice page one with bit radio buttons. routing logic. user email --- apps/browser/src/_locales/en/messages.json | 6 +-- apps/desktop/src/locales/en/messages.json | 6 +-- apps/web/src/locales/en/messages.json | 6 +-- ...erification-notice-page-one.component.html | 23 ++++---- ...-verification-notice-page-one.component.ts | 53 ++++++++++++++++--- ...-verification-notice-page-two.component.ts | 2 +- 6 files changed, 65 insertions(+), 31 deletions(-) diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index 4bfd3f6ce81..6c8f1d74c47 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -4901,7 +4901,7 @@ "newDeviceVerificationNoticeContentPage2": { "message": "You can set up two-step login as an alternative way to protect your account or change your email to one you can access." }, - "newDeviceVerificationNoticePage1FormContent": { + "newDeviceVerificationNoticePageOneFormContent": { "message": "Do you have reliable access to your email, $EMAIL$", "placeholders": { "email": { @@ -4910,10 +4910,10 @@ } } }, - "newDeviceVerificationNoticePage1OptionA": { + "newDeviceVerificationNoticePageOneEmailAccessNo": { "message": "No, I do not" }, - "newDeviceVerificationNoticePage1OptionB": { + "newDeviceVerificationNoticePageOneEmailAccessYes": { "message": "Yes, I can reliably access my email" }, "turnOnTwoStepLogin": { diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json index cb0d774a44f..8d10e941c66 100644 --- a/apps/desktop/src/locales/en/messages.json +++ b/apps/desktop/src/locales/en/messages.json @@ -3389,7 +3389,7 @@ "newDeviceVerificationNoticeContentPage2": { "message": "You can set up two-step login as an alternative way to protect your account or change your email to one you can access." }, - "newDeviceVerificationNoticePage1FormContent": { + "newDeviceVerificationNoticePageOneFormContent": { "message": "Do you have reliable access to your email, $EMAIL$", "placeholders": { "email": { @@ -3398,10 +3398,10 @@ } } }, - "newDeviceVerificationNoticePage1OptionA": { + "newDeviceVerificationNoticePageOneEmailAccessNo": { "message": "No, I do not" }, - "newDeviceVerificationNoticePage1OptionB": { + "newDeviceVerificationNoticePageOneEmailAccessYes": { "message": "Yes, I can reliably access my email" }, "turnOnTwoStepLogin": { diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 3989e32c6d3..dcb1365777a 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -9800,7 +9800,7 @@ "newDeviceVerificationNoticeContentPage2": { "message": "You can set up two-step login as an alternative way to protect your account or change your email to one you can access." }, - "newDeviceVerificationNoticePage1FormContent": { + "newDeviceVerificationNoticePageOneFormContent": { "message": "Do you have reliable access to your email, $EMAIL$", "placeholders": { "email": { @@ -9809,10 +9809,10 @@ } } }, - "newDeviceVerificationNoticePage1OptionA": { + "newDeviceVerificationNoticePageOneEmailAccessNo": { "message": "No, I do not" }, - "newDeviceVerificationNoticePage1OptionB": { + "newDeviceVerificationNoticePageOneEmailAccessYes": { "message": "Yes, I can reliably access my email" }, "turnOnTwoStepLogin": { diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html index e9ac8c8a27b..116951784f7 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html @@ -1,4 +1,4 @@ - +

{{ "newDeviceVerificationNoticeContentPage2" | i18n }}

@@ -8,19 +8,14 @@ >

{{ formMessage }}

-
- - -
- -
- - -
+ + + {{ "newDeviceVerificationNoticePageOneEmailAccessNo" | i18n }} + + + {{ "newDeviceVerificationNoticePageOneEmailAccessYes" | i18n }} + +
+ +
+ + {{ "remindMeLater" | i18n }} + +
diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts index 1d8571ba40a..4a415861bd3 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts @@ -1,25 +1,51 @@ import { CommonModule } from "@angular/common"; import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; +import { firstValueFrom, map } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; -import { ButtonModule, TypographyModule } from "@bitwarden/components"; +import { UserId } from "@bitwarden/common/types/guid"; +import { ButtonModule, LinkModule, TypographyModule } from "@bitwarden/components"; + +import { NewDeviceVerificationNoticeService } from "../../services/new-device-verification-notice.service"; @Component({ standalone: true, selector: "app-new-device-verification-notice-page-two", templateUrl: "./new-device-verification-notice-page-two.component.html", - imports: [CommonModule, JslibModule, TypographyModule, ButtonModule], + imports: [CommonModule, JslibModule, TypographyModule, ButtonModule, LinkModule], }) export class NewDeviceVerificationNoticePageTwoComponent implements OnInit { formMessage: string; - constructor(private i18nService: I18nService) {} + readonly currentAcct$ = this.accountService.activeAccount$.pipe(map((acct) => acct)); + private currentUserId: UserId; + + constructor( + private i18nService: I18nService, + private newDeviceVerificationNoticeService: NewDeviceVerificationNoticeService, + private router: Router, + private accountService: AccountService, + ) {} - ngOnInit() { + async ngOnInit() { + this.currentUserId = (await firstValueFrom(this.currentAcct$)).id; this.formMessage = this.i18nService.t( "newDeviceVerificationNoticePageOneFormContent", "peter.parker@daily.com", ); } - submit = () => {}; + remindMeLaterSelect = () => { + // eslint-disable-next-line @typescript-eslint/no-floating-promises + this.newDeviceVerificationNoticeService.updateNewDeviceVerificationNoticeState( + this.currentUserId, + { + last_dismissal: new Date(), + permanent_dismissal: null, + }, + ); + // eslint-disable-next-line @typescript-eslint/no-floating-promises + this.router.navigate(["/vault"]); + }; } From fa7098282afeec810e91699744fbc964e5077527 Mon Sep 17 00:00:00 2001 From: jng Date: Mon, 9 Dec 2024 13:34:11 -0500 Subject: [PATCH 08/25] sync the design for mobile and web --- apps/browser/src/popup/app-routing.module.ts | 35 ++++++++++++++++++- .../new-device-verification-notice.guard.ts | 2 +- ...erification-notice-page-one.component.html | 10 +++--- ...-verification-notice-page-one.component.ts | 14 ++++---- ...erification-notice-page-two.component.html | 2 ++ ...-verification-notice-page-two.component.ts | 11 +++--- 6 files changed, 53 insertions(+), 21 deletions(-) diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts index b158a83c566..d948d7f1a03 100644 --- a/apps/browser/src/popup/app-routing.module.ts +++ b/apps/browser/src/popup/app-routing.module.ts @@ -12,6 +12,7 @@ import { unauthUiRefreshSwap } from "@bitwarden/angular/auth/functions/unauth-ui import { authGuard, lockGuard, + NewDeviceVerificationNoticeGuard, redirectGuard, tdeDecryptionRequiredGuard, unauthGuardFn, @@ -42,6 +43,11 @@ import { TwoFactorTimeoutIcon, } from "@bitwarden/auth/angular"; import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; +import { + NewDeviceVerificationNoticePageOneComponent, + NewDeviceVerificationNoticePageTwoComponent, + VaultIcons, +} from "@bitwarden/vault"; import { twofactorRefactorSwap } from "../../../../libs/angular/src/utils/two-factor-component-refactor-route-swap"; import { fido2AuthGuard } from "../auth/guards/fido2-auth.guard"; @@ -676,6 +682,33 @@ const routes: Routes = [ canActivate: [authGuard], data: { elevation: 2 } satisfies RouteDataProperties, }), + { + path: "new-device-notice", + component: ExtensionAnonLayoutWrapperComponent, + canActivate: [], + children: [ + { + path: "", + component: NewDeviceVerificationNoticePageOneComponent, + data: { + pageIcon: VaultIcons.ExclamationTriangle, + pageTitle: { + key: "importantNotice", + }, + }, + }, + { + path: "setup", + component: NewDeviceVerificationNoticePageTwoComponent, + data: { + pageIcon: VaultIcons.UserLock, + pageTitle: { + key: "setupTwoStepLogin", + }, + }, + }, + ], + }, ...extensionRefreshSwap(TabsComponent, TabsV2Component, { path: "tabs", data: { elevation: 0 } satisfies RouteDataProperties, @@ -695,7 +728,7 @@ const routes: Routes = [ }, ...extensionRefreshSwap(VaultFilterComponent, VaultV2Component, { path: "vault", - canActivate: [authGuard], + canActivate: [authGuard, NewDeviceVerificationNoticeGuard], canDeactivate: [clearVaultStateGuard], data: { elevation: 0 } satisfies RouteDataProperties, }), diff --git a/libs/angular/src/auth/guards/new-device-verification-notice.guard.ts b/libs/angular/src/auth/guards/new-device-verification-notice.guard.ts index d3631bd7896..ab00c090abb 100644 --- a/libs/angular/src/auth/guards/new-device-verification-notice.guard.ts +++ b/libs/angular/src/auth/guards/new-device-verification-notice.guard.ts @@ -8,7 +8,7 @@ import { ConfigService } from "@bitwarden/common/platform/abstractions/config/co import { NewDeviceVerificationNoticeService } from "../../../../vault/src/services/new-device-verification-notice.service"; -export const NewDeviceVerificationNoticeGuard: CanActivateFn = async (override?) => { +export const NewDeviceVerificationNoticeGuard: CanActivateFn = async () => { const router = inject(Router); const configService = inject(ConfigService); const newDeviceVerificationNoticeService = inject(NewDeviceVerificationNoticeService); diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html index d795abb548f..039b97f445f 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html @@ -3,12 +3,10 @@ {{ "newDeviceVerificationNoticeContentPage1" | i18n }}

-
-

{{ formMessage }}

+ +

{{ formMessage }}

- + {{ "newDeviceVerificationNoticePageOneEmailAccessNo" | i18n }} @@ -16,7 +14,7 @@ {{ "newDeviceVerificationNoticePageOneEmailAccessYes" | i18n }} -
+
diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts index 4a415861bd3..c9f4a193b17 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts @@ -36,16 +36,15 @@ export class NewDeviceVerificationNoticePageTwoComponent implements OnInit { "peter.parker@daily.com", ); } - remindMeLaterSelect = () => { - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.newDeviceVerificationNoticeService.updateNewDeviceVerificationNoticeState( + async remindMeLaterSelect() { + await this.newDeviceVerificationNoticeService.updateNewDeviceVerificationNoticeState( this.currentUserId, { last_dismissal: new Date(), permanent_dismissal: null, }, ); - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.router.navigate(["/vault"]); - }; + + await this.router.navigate(["/vault"]); + } } From 9f4514def2646af9c123362d72382ed0254ddcd5 Mon Sep 17 00:00:00 2001 From: jng Date: Tue, 10 Dec 2024 15:45:24 -0500 Subject: [PATCH 09/25] update routes in desktop --- apps/desktop/src/app/app-routing.module.ts | 35 +++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/apps/desktop/src/app/app-routing.module.ts b/apps/desktop/src/app/app-routing.module.ts index db9ece317c8..b8cfab09312 100644 --- a/apps/desktop/src/app/app-routing.module.ts +++ b/apps/desktop/src/app/app-routing.module.ts @@ -10,6 +10,7 @@ import { unauthUiRefreshSwap } from "@bitwarden/angular/auth/functions/unauth-ui import { authGuard, lockGuard, + NewDeviceVerificationNoticeGuard, redirectGuard, tdeDecryptionRequiredGuard, unauthGuardFn, @@ -39,6 +40,11 @@ import { TwoFactorTimeoutIcon, } from "@bitwarden/auth/angular"; import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; +import { + NewDeviceVerificationNoticePageOneComponent, + NewDeviceVerificationNoticePageTwoComponent, + VaultIcons, +} from "@bitwarden/vault"; import { twofactorRefactorSwap } from "../../../../libs/angular/src/utils/two-factor-component-refactor-route-swap"; import { AccessibilityCookieComponent } from "../auth/accessibility-cookie.component"; @@ -115,10 +121,37 @@ const routes: Routes = [ } satisfies RouteDataProperties & AnonLayoutWrapperData, }, { path: "register", component: RegisterComponent }, + { + path: "new-device-notice", + component: AnonLayoutWrapperComponent, + canActivate: [], + children: [ + { + path: "", + component: NewDeviceVerificationNoticePageOneComponent, + data: { + pageIcon: VaultIcons.ExclamationTriangle, + pageTitle: { + key: "importantNotice", + }, + }, + }, + { + path: "setup", + component: NewDeviceVerificationNoticePageTwoComponent, + data: { + pageIcon: VaultIcons.UserLock, + pageTitle: { + key: "setupTwoStepLogin", + }, + }, + }, + ], + }, { path: "vault", component: VaultComponent, - canActivate: [authGuard], + canActivate: [authGuard, NewDeviceVerificationNoticeGuard], }, { path: "accessibility-cookie", component: AccessibilityCookieComponent }, { path: "set-password", component: SetPasswordComponent }, From 5c254441f7cdc40a9f7f7e2ca62cc325506639bc Mon Sep 17 00:00:00 2001 From: jng Date: Wed, 11 Dec 2024 17:29:46 -0500 Subject: [PATCH 10/25] updated styles for desktop --- apps/desktop/tailwind.config.js | 1 + ...vice-verification-notice-page-one.component.html | 8 +++++++- ...device-verification-notice-page-one.component.ts | 8 +++++++- ...vice-verification-notice-page-two.component.html | 13 +++++++++++-- ...device-verification-notice-page-two.component.ts | 8 +++++++- 5 files changed, 33 insertions(+), 5 deletions(-) diff --git a/apps/desktop/tailwind.config.js b/apps/desktop/tailwind.config.js index db1dd55694e..a561b93b21a 100644 --- a/apps/desktop/tailwind.config.js +++ b/apps/desktop/tailwind.config.js @@ -6,6 +6,7 @@ config.content = [ "../../libs/components/src/**/*.{html,ts}", "../../libs/auth/src/**/*.{html,ts}", "../../libs/angular/src/**/*.{html,ts}", + "../../libs/vault/src/**/*.{html,ts,mdx}", ]; module.exports = config; diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html index 039b97f445f..3c7d0928cc5 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html @@ -3,7 +3,13 @@ {{ "newDeviceVerificationNoticeContentPage1" | i18n }}

- +

{{ formMessage }}

diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts index 12f4fc563e1..577fed5e551 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts @@ -6,7 +6,9 @@ import { firstValueFrom, map } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; +import { ClientType } from "@bitwarden/common/enums"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { UserId } from "@bitwarden/common/types/guid"; import { AsyncActionsModule, @@ -40,6 +42,7 @@ export class NewDeviceVerificationNoticePageOneComponent implements OnInit { protected formGroup = this.formBuilder.group({ hasEmailAccess: new FormControl(0), }); + protected isDesktop: boolean; readonly currentAcct$ = this.accountService.activeAccount$.pipe(map((acct) => acct)); private currentEmail: string; private currentUserId: UserId; @@ -50,7 +53,10 @@ export class NewDeviceVerificationNoticePageOneComponent implements OnInit { private router: Router, private accountService: AccountService, private newDeviceVerificationNoticeService: NewDeviceVerificationNoticeService, - ) {} + private platformUtilsService: PlatformUtilsService, + ) { + this.isDesktop = this.platformUtilsService.getClientType() === ClientType.Desktop; + } async ngOnInit() { this.currentEmail = (await firstValueFrom(this.currentAcct$)).email; diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.html b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.html index a18ec8ecf01..6d0b806507e 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.html +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.html @@ -4,11 +4,20 @@
diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts index c9f4a193b17..4308b027f00 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts @@ -5,7 +5,9 @@ import { firstValueFrom, map } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; +import { ClientType } from "@bitwarden/common/enums"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { UserId } from "@bitwarden/common/types/guid"; import { ButtonModule, LinkModule, TypographyModule } from "@bitwarden/components"; @@ -19,6 +21,7 @@ import { NewDeviceVerificationNoticeService } from "../../services/new-device-ve }) export class NewDeviceVerificationNoticePageTwoComponent implements OnInit { formMessage: string; + protected isDesktop: boolean; readonly currentAcct$ = this.accountService.activeAccount$.pipe(map((acct) => acct)); private currentUserId: UserId; @@ -27,7 +30,10 @@ export class NewDeviceVerificationNoticePageTwoComponent implements OnInit { private newDeviceVerificationNoticeService: NewDeviceVerificationNoticeService, private router: Router, private accountService: AccountService, - ) {} + private platformUtilsService: PlatformUtilsService, + ) { + this.isDesktop = this.platformUtilsService.getClientType() === ClientType.Desktop; + } async ngOnInit() { this.currentUserId = (await firstValueFrom(this.currentAcct$)).id; From 407b5cad059a862dade4cc2ed49764f32853be6b Mon Sep 17 00:00:00 2001 From: jng Date: Wed, 11 Dec 2024 18:14:04 -0500 Subject: [PATCH 11/25] moved new device verification notice guard --- apps/browser/src/popup/app-routing.module.ts | 2 +- apps/desktop/src/app/app-routing.module.ts | 2 +- apps/web/src/app/oss-routing.module.ts | 2 +- libs/angular/src/auth/guards/index.ts | 1 - libs/angular/src/vault/guards/index.ts | 1 + .../guards/new-device-verification-notice.guard.ts | 0 6 files changed, 4 insertions(+), 4 deletions(-) create mode 100644 libs/angular/src/vault/guards/index.ts rename libs/angular/src/{auth => vault}/guards/new-device-verification-notice.guard.ts (100%) diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts index d948d7f1a03..642bd92cfde 100644 --- a/apps/browser/src/popup/app-routing.module.ts +++ b/apps/browser/src/popup/app-routing.module.ts @@ -12,7 +12,6 @@ import { unauthUiRefreshSwap } from "@bitwarden/angular/auth/functions/unauth-ui import { authGuard, lockGuard, - NewDeviceVerificationNoticeGuard, redirectGuard, tdeDecryptionRequiredGuard, unauthGuardFn, @@ -20,6 +19,7 @@ import { import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard"; import { extensionRefreshRedirect } from "@bitwarden/angular/utils/extension-refresh-redirect"; import { extensionRefreshSwap } from "@bitwarden/angular/utils/extension-refresh-swap"; +import { NewDeviceVerificationNoticeGuard } from "@bitwarden/angular/vault/guards"; import { AnonLayoutWrapperComponent, AnonLayoutWrapperData, diff --git a/apps/desktop/src/app/app-routing.module.ts b/apps/desktop/src/app/app-routing.module.ts index b8cfab09312..905e564fb67 100644 --- a/apps/desktop/src/app/app-routing.module.ts +++ b/apps/desktop/src/app/app-routing.module.ts @@ -10,13 +10,13 @@ import { unauthUiRefreshSwap } from "@bitwarden/angular/auth/functions/unauth-ui import { authGuard, lockGuard, - NewDeviceVerificationNoticeGuard, redirectGuard, tdeDecryptionRequiredGuard, unauthGuardFn, } from "@bitwarden/angular/auth/guards"; import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard"; import { extensionRefreshRedirect } from "@bitwarden/angular/utils/extension-refresh-redirect"; +import { NewDeviceVerificationNoticeGuard } from "@bitwarden/angular/vault/guards"; import { AnonLayoutWrapperComponent, AnonLayoutWrapperData, diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts index a3bbb83adbb..551691ae578 100644 --- a/apps/web/src/app/oss-routing.module.ts +++ b/apps/web/src/app/oss-routing.module.ts @@ -6,7 +6,6 @@ import { unauthUiRefreshSwap } from "@bitwarden/angular/auth/functions/unauth-ui import { authGuard, lockGuard, - NewDeviceVerificationNoticeGuard, redirectGuard, tdeDecryptionRequiredGuard, unauthGuardFn, @@ -14,6 +13,7 @@ import { import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard"; import { generatorSwap } from "@bitwarden/angular/tools/generator/generator-swap"; import { extensionRefreshSwap } from "@bitwarden/angular/utils/extension-refresh-swap"; +import { NewDeviceVerificationNoticeGuard } from "@bitwarden/angular/vault/guards"; import { AnonLayoutWrapperComponent, AnonLayoutWrapperData, diff --git a/libs/angular/src/auth/guards/index.ts b/libs/angular/src/auth/guards/index.ts index 9f2a89121c4..1760a870b3a 100644 --- a/libs/angular/src/auth/guards/index.ts +++ b/libs/angular/src/auth/guards/index.ts @@ -1,6 +1,5 @@ export * from "./auth.guard"; export * from "./lock.guard"; -export * from "./new-device-verification-notice.guard"; export * from "./redirect.guard"; export * from "./tde-decryption-required.guard"; export * from "./unauth.guard"; diff --git a/libs/angular/src/vault/guards/index.ts b/libs/angular/src/vault/guards/index.ts new file mode 100644 index 00000000000..001a4832372 --- /dev/null +++ b/libs/angular/src/vault/guards/index.ts @@ -0,0 +1 @@ +export * from "./new-device-verification-notice.guard"; diff --git a/libs/angular/src/auth/guards/new-device-verification-notice.guard.ts b/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts similarity index 100% rename from libs/angular/src/auth/guards/new-device-verification-notice.guard.ts rename to libs/angular/src/vault/guards/new-device-verification-notice.guard.ts From 83421c4a3796cfa83333fe48a07fdc51b0a9b6aa Mon Sep 17 00:00:00 2001 From: jng Date: Wed, 11 Dec 2024 18:54:18 -0500 Subject: [PATCH 12/25] update types for new device notice page one --- .../guards/new-device-verification-notice.guard.ts | 2 +- ...-device-verification-notice-page-one.component.ts | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts b/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts index ab00c090abb..d18d62c226a 100644 --- a/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts +++ b/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts @@ -29,7 +29,7 @@ export const NewDeviceVerificationNoticeGuard: CanActivateFn = async () => { if ( userItems?.last_dismissal == null && - userItems?.permanent_dismissal == null && + (userItems?.permanent_dismissal == null || !userItems?.permanent_dismissal) && (tempNoticeFlag || permNoticeFlag) ) { return router.createUrlTree(["/new-device-notice"]); diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts index 577fed5e551..11fdff2e3cd 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts @@ -38,14 +38,14 @@ import { NewDeviceVerificationNoticeService } from "./../../services/new-device- ], }) export class NewDeviceVerificationNoticePageOneComponent implements OnInit { - formMessage: string; + formMessage: string = ""; protected formGroup = this.formBuilder.group({ hasEmailAccess: new FormControl(0), }); protected isDesktop: boolean; readonly currentAcct$ = this.accountService.activeAccount$.pipe(map((acct) => acct)); - private currentEmail: string; - private currentUserId: UserId; + private currentEmail: string = ""; + private currentUserId: UserId = null; constructor( private i18nService: I18nService, @@ -59,8 +59,8 @@ export class NewDeviceVerificationNoticePageOneComponent implements OnInit { } async ngOnInit() { - this.currentEmail = (await firstValueFrom(this.currentAcct$)).email; - this.currentUserId = (await firstValueFrom(this.currentAcct$)).id; + this.currentEmail = (await firstValueFrom(this.currentAcct$))?.email; + this.currentUserId = (await firstValueFrom(this.currentAcct$))?.id; this.formMessage = this.i18nService.t( "newDeviceVerificationNoticePageOneFormContent", this.currentEmail, @@ -75,7 +75,7 @@ export class NewDeviceVerificationNoticePageOneComponent implements OnInit { this.currentUserId, { last_dismissal: new Date(), - permanent_dismissal: null, + permanent_dismissal: false, }, ); From ac87737f89452f7928b82b9f397b68bf43840d16 Mon Sep 17 00:00:00 2001 From: jng Date: Wed, 11 Dec 2024 19:08:34 -0500 Subject: [PATCH 13/25] add null check to page one --- .../new-device-verification-notice-page-one.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts index 11fdff2e3cd..bd44eb7849d 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts @@ -38,14 +38,14 @@ import { NewDeviceVerificationNoticeService } from "./../../services/new-device- ], }) export class NewDeviceVerificationNoticePageOneComponent implements OnInit { - formMessage: string = ""; + protected formMessage: string | null = ""; protected formGroup = this.formBuilder.group({ hasEmailAccess: new FormControl(0), }); protected isDesktop: boolean; readonly currentAcct$ = this.accountService.activeAccount$.pipe(map((acct) => acct)); - private currentEmail: string = ""; - private currentUserId: UserId = null; + private currentEmail: string | null = ""; + private currentUserId: UserId | null = null; constructor( private i18nService: I18nService, From 7bf186cb95f9d2e99dc97473dc51a39d439f72f2 Mon Sep 17 00:00:00 2001 From: jng Date: Wed, 11 Dec 2024 19:15:26 -0500 Subject: [PATCH 14/25] types --- .../new-device-verification-notice-page-one.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts index bd44eb7849d..fe4b1aba213 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts @@ -59,8 +59,8 @@ export class NewDeviceVerificationNoticePageOneComponent implements OnInit { } async ngOnInit() { - this.currentEmail = (await firstValueFrom(this.currentAcct$))?.email; - this.currentUserId = (await firstValueFrom(this.currentAcct$))?.id; + this.currentEmail = (await firstValueFrom(this.currentAcct$)).email; + this.currentUserId = (await firstValueFrom(this.currentAcct$)).id; this.formMessage = this.i18nService.t( "newDeviceVerificationNoticePageOneFormContent", this.currentEmail, From 4b1a2e9949ef4547abe7ea2fbbe9d2b347aefbae Mon Sep 17 00:00:00 2001 From: jng Date: Wed, 11 Dec 2024 19:25:53 -0500 Subject: [PATCH 15/25] types for page one, page two, service, and guard --- .../guards/new-device-verification-notice.guard.ts | 2 +- ...device-verification-notice-page-one.component.ts | 4 ++-- ...device-verification-notice-page-two.component.ts | 13 +++---------- .../new-device-verification-notice.service.ts | 2 +- 4 files changed, 7 insertions(+), 14 deletions(-) diff --git a/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts b/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts index d18d62c226a..f82d9344443 100644 --- a/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts +++ b/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts @@ -22,7 +22,7 @@ export const NewDeviceVerificationNoticeGuard: CanActivateFn = async () => { ); const currentAcctId = await firstValueFrom( - accountService.activeAccount$.pipe(map((acct) => acct.id)), + accountService.activeAccount$.pipe(map((acct) => acct?.id)), ); const userItems$ = newDeviceVerificationNoticeService.noticeState$(currentAcctId); const userItems = await firstValueFrom(userItems$); diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts index fe4b1aba213..d14e92f9514 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts @@ -59,8 +59,8 @@ export class NewDeviceVerificationNoticePageOneComponent implements OnInit { } async ngOnInit() { - this.currentEmail = (await firstValueFrom(this.currentAcct$)).email; - this.currentUserId = (await firstValueFrom(this.currentAcct$)).id; + this.currentEmail = (await firstValueFrom(this.currentAcct$)).email || null; + this.currentUserId = (await firstValueFrom(this.currentAcct$)).id || null; this.formMessage = this.i18nService.t( "newDeviceVerificationNoticePageOneFormContent", this.currentEmail, diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts index 4308b027f00..93379cb4626 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts @@ -6,7 +6,6 @@ import { firstValueFrom, map } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; import { ClientType } from "@bitwarden/common/enums"; -import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { UserId } from "@bitwarden/common/types/guid"; import { ButtonModule, LinkModule, TypographyModule } from "@bitwarden/components"; @@ -20,13 +19,11 @@ import { NewDeviceVerificationNoticeService } from "../../services/new-device-ve imports: [CommonModule, JslibModule, TypographyModule, ButtonModule, LinkModule], }) export class NewDeviceVerificationNoticePageTwoComponent implements OnInit { - formMessage: string; protected isDesktop: boolean; readonly currentAcct$ = this.accountService.activeAccount$.pipe(map((acct) => acct)); - private currentUserId: UserId; + private currentUserId: UserId | null = null; constructor( - private i18nService: I18nService, private newDeviceVerificationNoticeService: NewDeviceVerificationNoticeService, private router: Router, private accountService: AccountService, @@ -36,18 +33,14 @@ export class NewDeviceVerificationNoticePageTwoComponent implements OnInit { } async ngOnInit() { - this.currentUserId = (await firstValueFrom(this.currentAcct$)).id; - this.formMessage = this.i18nService.t( - "newDeviceVerificationNoticePageOneFormContent", - "peter.parker@daily.com", - ); + this.currentUserId = (await firstValueFrom(this.currentAcct$)).id || null; } async remindMeLaterSelect() { await this.newDeviceVerificationNoticeService.updateNewDeviceVerificationNoticeState( this.currentUserId, { last_dismissal: new Date(), - permanent_dismissal: null, + permanent_dismissal: false, }, ); diff --git a/libs/vault/src/services/new-device-verification-notice.service.ts b/libs/vault/src/services/new-device-verification-notice.service.ts index 6c7df590b50..bb096ff0c2c 100644 --- a/libs/vault/src/services/new-device-verification-notice.service.ts +++ b/libs/vault/src/services/new-device-verification-notice.service.ts @@ -57,7 +57,7 @@ export class NewDeviceVerificationNoticeService { } async updateNewDeviceVerificationNoticeState( - userId: UserId, + userId: UserId | null, newState: NewDeviceVerificationNotice, ): Promise { await this.noticeState(userId).update(() => { From 6e6228a68dc2bb6b9a90098bb9c751882ce3a80d Mon Sep 17 00:00:00 2001 From: jng Date: Wed, 11 Dec 2024 19:45:40 -0500 Subject: [PATCH 16/25] types --- .../guards/new-device-verification-notice.guard.ts | 3 ++- ...evice-verification-notice-page-one.component.ts | 14 ++++++++------ ...evice-verification-notice-page-two.component.ts | 10 ++++++---- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts b/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts index f82d9344443..e5c9902818d 100644 --- a/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts +++ b/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts @@ -5,6 +5,7 @@ import { firstValueFrom, map } from "rxjs"; import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; +import { UserId } from "@bitwarden/common/types/guid"; import { NewDeviceVerificationNoticeService } from "../../../../vault/src/services/new-device-verification-notice.service"; @@ -21,7 +22,7 @@ export const NewDeviceVerificationNoticeGuard: CanActivateFn = async () => { FeatureFlag.NewDeviceVerificationPermanentDismiss, ); - const currentAcctId = await firstValueFrom( + const currentAcctId: UserId = await firstValueFrom( accountService.activeAccount$.pipe(map((acct) => acct?.id)), ); const userItems$ = newDeviceVerificationNoticeService.noticeState$(currentAcctId); diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts index d14e92f9514..6f5ece0e9a0 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts @@ -2,10 +2,10 @@ import { CommonModule } from "@angular/common"; import { Component, OnInit } from "@angular/core"; import { FormBuilder, FormControl, ReactiveFormsModule } from "@angular/forms"; import { Router } from "@angular/router"; -import { firstValueFrom, map } from "rxjs"; +import { firstValueFrom, map, Observable } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; -import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; +import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service"; import { ClientType } from "@bitwarden/common/enums"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; @@ -43,8 +43,10 @@ export class NewDeviceVerificationNoticePageOneComponent implements OnInit { hasEmailAccess: new FormControl(0), }); protected isDesktop: boolean; - readonly currentAcct$ = this.accountService.activeAccount$.pipe(map((acct) => acct)); - private currentEmail: string | null = ""; + readonly currentAcct$: Observable = this.accountService.activeAccount$.pipe( + map((acct) => acct), + ); + private currentEmail: string = ""; private currentUserId: UserId | null = null; constructor( @@ -59,8 +61,8 @@ export class NewDeviceVerificationNoticePageOneComponent implements OnInit { } async ngOnInit() { - this.currentEmail = (await firstValueFrom(this.currentAcct$)).email || null; - this.currentUserId = (await firstValueFrom(this.currentAcct$)).id || null; + this.currentEmail = (await firstValueFrom(this.currentAcct$)).email; + this.currentUserId = (await firstValueFrom(this.currentAcct$)).id; this.formMessage = this.i18nService.t( "newDeviceVerificationNoticePageOneFormContent", this.currentEmail, diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts index 93379cb4626..5ea77c435d9 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts @@ -1,10 +1,10 @@ import { CommonModule } from "@angular/common"; import { Component, OnInit } from "@angular/core"; import { Router } from "@angular/router"; -import { firstValueFrom, map } from "rxjs"; +import { firstValueFrom, map, Observable } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; -import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; +import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service"; import { ClientType } from "@bitwarden/common/enums"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { UserId } from "@bitwarden/common/types/guid"; @@ -20,7 +20,9 @@ import { NewDeviceVerificationNoticeService } from "../../services/new-device-ve }) export class NewDeviceVerificationNoticePageTwoComponent implements OnInit { protected isDesktop: boolean; - readonly currentAcct$ = this.accountService.activeAccount$.pipe(map((acct) => acct)); + readonly currentAcct$: Observable = this.accountService.activeAccount$.pipe( + map((acct) => acct), + ); private currentUserId: UserId | null = null; constructor( @@ -33,7 +35,7 @@ export class NewDeviceVerificationNoticePageTwoComponent implements OnInit { } async ngOnInit() { - this.currentUserId = (await firstValueFrom(this.currentAcct$)).id || null; + this.currentUserId = (await firstValueFrom(this.currentAcct$)).id; } async remindMeLaterSelect() { await this.newDeviceVerificationNoticeService.updateNewDeviceVerificationNoticeState( From 847911c983280c62882c3b320f1a04e321d06f9c Mon Sep 17 00:00:00 2001 From: jng Date: Thu, 12 Dec 2024 11:52:13 -0500 Subject: [PATCH 17/25] update component and guard for null check --- .../new-device-verification-notice.guard.ts | 17 +++++++++++------ ...ce-verification-notice-page-one.component.ts | 8 ++++++-- ...ce-verification-notice-page-two.component.ts | 6 +++++- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts b/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts index e5c9902818d..20c022da573 100644 --- a/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts +++ b/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts @@ -1,11 +1,10 @@ import { inject } from "@angular/core"; import { CanActivateFn, Router } from "@angular/router"; -import { firstValueFrom, map } from "rxjs"; +import { Observable, firstValueFrom, map } from "rxjs"; -import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; +import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service"; import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; -import { UserId } from "@bitwarden/common/types/guid"; import { NewDeviceVerificationNoticeService } from "../../../../vault/src/services/new-device-verification-notice.service"; @@ -22,10 +21,16 @@ export const NewDeviceVerificationNoticeGuard: CanActivateFn = async () => { FeatureFlag.NewDeviceVerificationPermanentDismiss, ); - const currentAcctId: UserId = await firstValueFrom( - accountService.activeAccount$.pipe(map((acct) => acct?.id)), + const currentAcct$: Observable = accountService.activeAccount$.pipe( + map((acct) => acct), ); - const userItems$ = newDeviceVerificationNoticeService.noticeState$(currentAcctId); + const currentAcct = await firstValueFrom(currentAcct$); + + if (!currentAcct) { + return false; + } + + const userItems$ = newDeviceVerificationNoticeService.noticeState$(currentAcct.id); const userItems = await firstValueFrom(userItems$); if ( diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts index 6f5ece0e9a0..ab71de2a37c 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts @@ -61,8 +61,12 @@ export class NewDeviceVerificationNoticePageOneComponent implements OnInit { } async ngOnInit() { - this.currentEmail = (await firstValueFrom(this.currentAcct$)).email; - this.currentUserId = (await firstValueFrom(this.currentAcct$)).id; + const currentAcct = await firstValueFrom(this.currentAcct$); + if (!currentAcct) { + return; + } + this.currentEmail = currentAcct.email; + this.currentUserId = currentAcct.id; this.formMessage = this.i18nService.t( "newDeviceVerificationNoticePageOneFormContent", this.currentEmail, diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts index 5ea77c435d9..00f2889619f 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts @@ -35,7 +35,11 @@ export class NewDeviceVerificationNoticePageTwoComponent implements OnInit { } async ngOnInit() { - this.currentUserId = (await firstValueFrom(this.currentAcct$)).id; + const currentAcct = await firstValueFrom(this.currentAcct$); + if (!currentAcct) { + return; + } + this.currentUserId = currentAcct.id; } async remindMeLaterSelect() { await this.newDeviceVerificationNoticeService.updateNewDeviceVerificationNoticeState( From e44179515964407112b9969f53214b8dacb2833e Mon Sep 17 00:00:00 2001 From: jng Date: Thu, 12 Dec 2024 15:43:32 -0500 Subject: [PATCH 18/25] add navigation to two step login btn and account email btn --- .../new-device-verification-notice.guard.ts | 12 ++++-- ...erification-notice-page-two.component.html | 16 +++++++- ...-verification-notice-page-two.component.ts | 38 +++++++++++++++++++ 3 files changed, 61 insertions(+), 5 deletions(-) diff --git a/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts b/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts index 20c022da573..a37097e3583 100644 --- a/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts +++ b/libs/angular/src/vault/guards/new-device-verification-notice.guard.ts @@ -1,5 +1,5 @@ import { inject } from "@angular/core"; -import { CanActivateFn, Router } from "@angular/router"; +import { ActivatedRouteSnapshot, CanActivateFn, Router } from "@angular/router"; import { Observable, firstValueFrom, map } from "rxjs"; import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service"; @@ -8,12 +8,18 @@ import { ConfigService } from "@bitwarden/common/platform/abstractions/config/co import { NewDeviceVerificationNoticeService } from "../../../../vault/src/services/new-device-verification-notice.service"; -export const NewDeviceVerificationNoticeGuard: CanActivateFn = async () => { +export const NewDeviceVerificationNoticeGuard: CanActivateFn = async ( + route: ActivatedRouteSnapshot, +) => { const router = inject(Router); const configService = inject(ConfigService); const newDeviceVerificationNoticeService = inject(NewDeviceVerificationNoticeService); const accountService = inject(AccountService); + if (route.queryParams["fromNewDeviceVerification"]) { + return true; + } + const tempNoticeFlag = await configService.getFeatureFlag( FeatureFlag.NewDeviceVerificationTemporaryDismiss, ); @@ -27,7 +33,7 @@ export const NewDeviceVerificationNoticeGuard: CanActivateFn = async () => { const currentAcct = await firstValueFrom(currentAcct$); if (!currentAcct) { - return false; + return router.createUrlTree(["/login"]); } const userItems$ = newDeviceVerificationNoticeService.noticeState$(currentAcct.id); diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.html b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.html index 6d0b806507e..2c50a857daa 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.html +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.html @@ -2,7 +2,13 @@ {{ "newDeviceVerificationNoticeContentPage2" | i18n }}

- - - +
diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts index 34ff97b77d9..630a2fd516c 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts @@ -48,7 +48,9 @@ export class NewDeviceVerificationNoticePageTwoComponent implements OnInit { this.currentUserId = currentAcct.id; } - async navigateToTwoStepLogin() { + async navigateToTwoStepLogin(event: Event) { + event.preventDefault(); + const env = await firstValueFrom(this.env$); const url = env.getWebVaultUrl(); @@ -63,7 +65,9 @@ export class NewDeviceVerificationNoticePageTwoComponent implements OnInit { } } - async navigateToChangeAcctEmail() { + async navigateToChangeAcctEmail(event: Event) { + event.preventDefault(); + const env = await firstValueFrom(this.env$); const url = env.getWebVaultUrl(); if (this.isWeb) { From 072c58f1f0fc957ba2236251cef2a4c8c6f484af Mon Sep 17 00:00:00 2001 From: Nick Krantz Date: Wed, 18 Dec 2024 11:14:59 -0600 Subject: [PATCH 24/25] remove clip path from exclamation svg - No noticeable difference in the end result --- libs/vault/src/icons/exclamation-triangle.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/libs/vault/src/icons/exclamation-triangle.ts b/libs/vault/src/icons/exclamation-triangle.ts index 42b84f08f95..6340546d1e1 100644 --- a/libs/vault/src/icons/exclamation-triangle.ts +++ b/libs/vault/src/icons/exclamation-triangle.ts @@ -2,13 +2,6 @@ import { svgIcon } from "@bitwarden/components"; export const ExclamationTriangle = svgIcon` - - - - - - - `; From 2ac259d7604d5dc5d8ee140eed815275ff190896 Mon Sep 17 00:00:00 2001 From: Nick Krantz Date: Wed, 18 Dec 2024 11:18:34 -0600 Subject: [PATCH 25/25] inline email message into markup --- ...ew-device-verification-notice-page-one.component.html | 4 +++- .../new-device-verification-notice-page-one.component.ts | 9 +-------- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html index 3c7d0928cc5..316df3aed17 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html @@ -10,7 +10,9 @@ 'md:tw-flex md:tw-flex-col md:tw-items-center md:!tw-rounded-b-none': !isDesktop, }" > -

{{ formMessage }}

+

+ {{ "newDeviceVerificationNoticePageOneFormContent" | i18n: this.currentEmail }} +

diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts index ed9fa5cc0b0..62ae22f5b22 100644 --- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts +++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts @@ -7,7 +7,6 @@ import { firstValueFrom, Observable } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service"; import { ClientType } from "@bitwarden/common/enums"; -import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { UserId } from "@bitwarden/common/types/guid"; import { @@ -38,17 +37,15 @@ import { NewDeviceVerificationNoticeService } from "./../../services/new-device- ], }) export class NewDeviceVerificationNoticePageOneComponent implements OnInit { - protected formMessage: string | null = ""; protected formGroup = this.formBuilder.group({ hasEmailAccess: new FormControl(0), }); protected isDesktop: boolean; readonly currentAcct$: Observable = this.accountService.activeAccount$; - private currentEmail: string = ""; + protected currentEmail: string = ""; private currentUserId: UserId | null = null; constructor( - private i18nService: I18nService, private formBuilder: FormBuilder, private router: Router, private accountService: AccountService, @@ -65,10 +62,6 @@ export class NewDeviceVerificationNoticePageOneComponent implements OnInit { } this.currentEmail = currentAcct.email; this.currentUserId = currentAcct.id; - this.formMessage = this.i18nService.t( - "newDeviceVerificationNoticePageOneFormContent", - this.currentEmail, - ); } submit = async () => {