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."