diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts index 32dcb695a8f..de0e8a2da93 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 d1a6f4d42d2..2a7514ed854 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 f553542a619..07697ee8b37 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 00000000000..e8090cb850c --- /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 00000000000..756a1068985 --- /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 40e4789923e..29e2e398254 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."