[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

@@ -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)],

apps/web/src/app/tools/send/access.component.html

@@ -1,85 +1,52 @@
 <form [formGroup]="formGroup" [bitSubmit]="load">
-  <div
+  <bit-callout *ngIf="hideEmail" type="warning" title="{{ 'warning' | i18n }}">
-    class="tw-mx-auto tw-mt-5 tw-flex tw-max-w-xl tw-flex-col tw-items-center tw-justify-center tw-p-8"
+    {{ "viewSendHiddenEmailWarning" | i18n }}
-  >
+    <a bitLink href="https://bitwarden.com/help/receive-send/" target="_blank" rel="noreferrer">{{
-    <img class="logo logo-themed" alt="Bitwarden" />
+      "learnMore" | i18n
-    <div class="tw-mt-5 tw-w-full">
+    }}</a
-      <h2 bitTypography="h2" class="tw-mb-4 tw-text-center">View Send</h2>
+    >.
-    </div>
+  </bit-callout>
-    <div class="tw-w-full tw-text-center" *ngIf="creatorIdentifier != null">
+  <ng-container *ngIf="!loading; else spinner">
-      <p>{{ "sendAccessCreatorIdentifier" | i18n: creatorIdentifier }}</p>
+    <app-send-access-password
-    </div>
+      (setPasswordEvent)="setPassword($event)"
-    <bit-callout *ngIf="hideEmail" type="warning" title="{{ 'warning' | i18n }}">
+      *ngIf="passwordRequired && !error"
-      {{ "viewSendHiddenEmailWarning" | i18n }}
+    ></app-send-access-password>
-      <a bitLink href="https://bitwarden.com/help/receive-send/" target="_blank" rel="noreferrer">{{
+    <bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="unavailable">
-        "learnMore" | i18n
+      <ng-container slot="description">{{ "sendAccessUnavailable" | i18n }}</ng-container>
-      }}</a
+    </bit-no-items>
-      >.
+    <bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="error">
-    </bit-callout>
+      <ng-container slot="description">{{ "unexpectedErrorSend" | i18n }}</ng-container>
-    <div
+    </bit-no-items>
-      class="tw-mt-3 tw-w-10/12 tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-6"
+    <div *ngIf="!passwordRequired && send && !error && !unavailable">
-    >
+      <p class="tw-text-center">
-      <ng-container *ngIf="!loading; else spinner">
+        <b>{{ send.name }}</b>
-        <app-send-access-password
+      </p>
-          (setPasswordEvent)="setPassword($event)"
+      <hr />
-          *ngIf="passwordRequired && !error"
+      <!-- Text -->
-        ></app-send-access-password>
+      <ng-container *ngIf="send.type === sendType.Text">
-        <bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="unavailable">
+        <app-send-access-text [send]="send"></app-send-access-text>
-          <ng-container slot="description">{{ "sendAccessUnavailable" | i18n }}</ng-container>
-        </bit-no-items>
-        <bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="error">
-          <ng-container slot="description">{{ "unexpectedErrorSend" | i18n }}</ng-container>
-        </bit-no-items>
-        <div *ngIf="!passwordRequired && send && !error && !unavailable">
-          <p class="tw-text-center">
-            <b>{{ send.name }}</b>
-          </p>
-          <hr />
-          <!-- Text -->
-          <ng-container *ngIf="send.type === sendType.Text">
-            <app-send-access-text [send]="send"></app-send-access-text>
-          </ng-container>
-          <!-- File -->
-          <ng-container *ngIf="send.type === sendType.File">
-            <app-send-access-file
-              [send]="send"
-              [decKey]="decKey"
-              [accessRequest]="accessRequest"
-            ></app-send-access-file>
-          </ng-container>
-          <p *ngIf="expirationDate" class="tw-text-center tw-text-muted">
-            Expires: {{ expirationDate | date: "medium" }}
-          </p>
-        </div>
       </ng-container>
-      <ng-template #spinner>
+      <!-- File -->
-        <div class="tw-text-center">
+      <ng-container *ngIf="send.type === sendType.File">
-          <i
+        <app-send-access-file
-            class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
+          [send]="send"
-            title="{{ 'loading' | i18n }}"
+          [decKey]="decKey"
-            aria-hidden="true"
+          [accessRequest]="accessRequest"
-          ></i>
+        ></app-send-access-file>
-          <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+      </ng-container>
-        </div>
+      <p *ngIf="expirationDate" class="tw-text-center tw-text-muted">
-      </ng-template>
+        Expires: {{ expirationDate | date: "medium" }}
-    </div>
-    <div class="tw-mt-5 tw-w-10/12 tw-text-center tw-text-muted">
-      <p bitTypography="body2" class="tw-mb-0">
-        {{ "sendAccessTaglineProductDesc" | i18n }}
-        {{ "sendAccessTaglineLearnMore" | i18n }}
-        <a
-          bitLink
-          href="https://www.bitwarden.com/products/send?source=web-vault"
-          target="_blank"
-          rel="noreferrer"
-          >Bitwarden Send</a
-        >
-        {{ "sendAccessTaglineOr" | i18n }}
-        <a bitLink [routerLink]="registerRoute$ | async" target="_blank" rel="noreferrer">{{
-          "sendAccessTaglineSignUp" | i18n
-        }}</a>
-        {{ "sendAccessTaglineTryToday" | i18n }}
       </p>
     </div>
-  </div>
+  </ng-container>
+  <ng-template #spinner>
+    <div class="tw-text-center">
+      <i
+        class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
+        title="{{ 'loading' | i18n }}"
+        aria-hidden="true"
+      ></i>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+    </div>
+  </ng-template>
 </form>

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) {

apps/web/src/app/tools/send/send-access-explainer.component.html

@@ -0,0 +1,18 @@
+<div class="tw-text-center tw-text-muted">
+  <p bitTypography="body2" class="tw-mb-0">
+    {{ "sendAccessTaglineProductDesc" | i18n }}
+    {{ "sendAccessTaglineLearnMore" | i18n }}
+    <a
+      bitLink
+      href="https://www.bitwarden.com/products/send?source=web-vault"
+      target="_blank"
+      rel="noreferrer"
+      >Bitwarden Send</a
+    >
+    {{ "sendAccessTaglineOr" | i18n }}
+    <a bitLink [routerLink]="registerRoute$ | async" target="_blank" rel="noreferrer">{{
+      "sendAccessTaglineSignUp" | i18n
+    }}</a>
+    {{ "sendAccessTaglineTryToday" | i18n }}
+  </p>
+</div>

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) {}
+}

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