From e255d84121b27dee5afcb45cff44d1d1d74c39e6 Mon Sep 17 00:00:00 2001 From: Jordan Aasen <166539328+jaasen-livefront@users.noreply.github.com> Date: Tue, 27 Aug 2024 10:18:02 -0700 Subject: [PATCH] [PM-4473] use anon layout for send access component (#10699) * use anon layout for send access component * fix width on explainer. * don't show creator ID until send is decrypted in send access --- apps/web/src/app/oss-routing.module.ts | 24 +++- .../src/app/tools/send/access.component.html | 127 +++++++----------- .../src/app/tools/send/access.component.ts | 11 ++ .../send/send-access-explainer.component.html | 18 +++ .../send/send-access-explainer.component.ts | 17 +++ apps/web/src/locales/en/messages.json | 4 + 6 files changed, 116 insertions(+), 85 deletions(-) create mode 100644 apps/web/src/app/tools/send/send-access-explainer.component.html create mode 100644 apps/web/src/app/tools/send/send-access-explainer.component.ts diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts index 32dcb695a8..de0e8a2da9 100644 --- a/apps/web/src/app/oss-routing.module.ts +++ b/apps/web/src/app/oss-routing.module.ts @@ -68,6 +68,7 @@ import { PreferencesComponent } from "./settings/preferences.component"; import { GeneratorComponent } from "./tools/generator.component"; import { ReportsModule } from "./tools/reports"; import { AccessComponent } from "./tools/send/access.component"; +import { SendAccessExplainerComponent } from "./tools/send/send-access-explainer.component"; import { SendComponent } from "./tools/send/send.component"; import { VaultModule } from "./vault/individual-vault/vault.module"; @@ -145,11 +146,6 @@ const routes: Routes = [ canActivate: [unauthGuardFn()], data: { titleId: "deleteAccount" } satisfies DataProperties, }, - { - path: "send/:sendId/:key", - component: AccessComponent, - data: { titleId: "Bitwarden Send" } satisfies DataProperties, - }, { path: "update-temp-password", component: UpdateTempPasswordComponent, @@ -210,6 +206,24 @@ const routes: Routes = [ }, ], }, + { + path: "send/:sendId/:key", + data: { + pageTitle: "viewSend", + showReadonlyHostname: true, + } satisfies DataProperties & AnonLayoutWrapperData, + children: [ + { + path: "", + component: AccessComponent, + }, + { + path: "", + outlet: "secondary", + component: SendAccessExplainerComponent, + }, + ], + }, { path: "set-password-jit", canActivate: [canAccessFeature(FeatureFlag.EmailVerification)], diff --git a/apps/web/src/app/tools/send/access.component.html b/apps/web/src/app/tools/send/access.component.html index d1a6f4d42d..2a7514ed85 100644 --- a/apps/web/src/app/tools/send/access.component.html +++ b/apps/web/src/app/tools/send/access.component.html @@ -1,85 +1,52 @@
-
- -
-

View Send

-
-
-

{{ "sendAccessCreatorIdentifier" | i18n: creatorIdentifier }}

-
- - {{ "viewSendHiddenEmailWarning" | i18n }} - {{ - "learnMore" | i18n - }}. - -
- - - - {{ "sendAccessUnavailable" | i18n }} - - - {{ "unexpectedErrorSend" | i18n }} - -
-

- {{ send.name }} -

-
- - - - - - - - -

- Expires: {{ expirationDate | date: "medium" }} -

-
+ + {{ "viewSendHiddenEmailWarning" | i18n }} + {{ + "learnMore" | i18n + }}. + + + + + {{ "sendAccessUnavailable" | i18n }} + + + {{ "unexpectedErrorSend" | i18n }} + +
+

+ {{ send.name }} +

+
+ + + - -
- - {{ "loading" | i18n }} -
- -
-
-

- {{ "sendAccessTaglineProductDesc" | i18n }} - {{ "sendAccessTaglineLearnMore" | i18n }} - Bitwarden Send - {{ "sendAccessTaglineOr" | i18n }} - {{ - "sendAccessTaglineSignUp" | i18n - }} - {{ "sendAccessTaglineTryToday" | i18n }} + + + + +

+ Expires: {{ expirationDate | date: "medium" }}

-
+ + +
+ + {{ "loading" | i18n }} +
+ diff --git a/apps/web/src/app/tools/send/access.component.ts b/apps/web/src/app/tools/send/access.component.ts index f553542a61..07697ee8b3 100644 --- a/apps/web/src/app/tools/send/access.component.ts +++ b/apps/web/src/app/tools/send/access.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core"; import { FormBuilder } from "@angular/forms"; import { ActivatedRoute } from "@angular/router"; +import { AnonLayoutWrapperDataService } from "@bitwarden/auth/angular"; import { RegisterRouteService } from "@bitwarden/auth/common"; import { ErrorResponse } from "@bitwarden/common/models/response/error.response"; import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; @@ -70,6 +71,7 @@ export class AccessComponent implements OnInit { private i18nService: I18nService, private configService: ConfigService, private registerRouteService: RegisterRouteService, + private layoutWrapperDataService: AnonLayoutWrapperDataService, protected formBuilder: FormBuilder, ) {} @@ -151,6 +153,15 @@ export class AccessComponent implements OnInit { !this.passwordRequired && !this.loading && !this.unavailable; + + if (this.creatorIdentifier != null) { + this.layoutWrapperDataService.setAnonLayoutWrapperData({ + pageSubtitle: { + subtitle: this.i18nService.t("sendAccessCreatorIdentifier", this.creatorIdentifier), + translate: false, + }, + }); + } }; protected setPassword(password: string) { diff --git a/apps/web/src/app/tools/send/send-access-explainer.component.html b/apps/web/src/app/tools/send/send-access-explainer.component.html new file mode 100644 index 0000000000..e8090cb850 --- /dev/null +++ b/apps/web/src/app/tools/send/send-access-explainer.component.html @@ -0,0 +1,18 @@ +
+

+ {{ "sendAccessTaglineProductDesc" | i18n }} + {{ "sendAccessTaglineLearnMore" | i18n }} + Bitwarden Send + {{ "sendAccessTaglineOr" | i18n }} + {{ + "sendAccessTaglineSignUp" | i18n + }} + {{ "sendAccessTaglineTryToday" | i18n }} +

+
diff --git a/apps/web/src/app/tools/send/send-access-explainer.component.ts b/apps/web/src/app/tools/send/send-access-explainer.component.ts new file mode 100644 index 0000000000..756a106898 --- /dev/null +++ b/apps/web/src/app/tools/send/send-access-explainer.component.ts @@ -0,0 +1,17 @@ +import { Component } from "@angular/core"; + +import { RegisterRouteService } from "@bitwarden/auth/common"; + +import { SharedModule } from "../../shared"; + +@Component({ + selector: "app-send-access-explainer", + templateUrl: "send-access-explainer.component.html", + standalone: true, + imports: [SharedModule], +}) +export class SendAccessExplainerComponent { + // TODO: remove when email verification flag is removed + registerRoute$ = this.registerRouteService.registerRoute$(); + constructor(private registerRouteService: RegisterRouteService) {} +} diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 40e4789923..29e2e39825 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -4983,6 +4983,10 @@ } } }, + "viewSend": { + "message": "View Send", + "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated." + }, "viewSendHiddenEmailWarning": { "message": "The Bitwarden user who created this Send has chosen to hide their email address. You should ensure you trust the source of this link before using or downloading its content.", "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."