[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
-    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"
-  >
-    <img class="logo logo-themed" alt="Bitwarden" />
-    <div class="tw-mt-5 tw-w-full">
-      <h2 bitTypography="h2" class="tw-mb-4 tw-text-center">View Send</h2>
-    </div>
-    <div class="tw-w-full tw-text-center" *ngIf="creatorIdentifier != null">
-      <p>{{ "sendAccessCreatorIdentifier" | i18n: creatorIdentifier }}</p>
-    </div>
-    <bit-callout *ngIf="hideEmail" type="warning" title="{{ 'warning' | i18n }}">
-      {{ "viewSendHiddenEmailWarning" | i18n }}
-      <a bitLink href="https://bitwarden.com/help/receive-send/" target="_blank" rel="noreferrer">{{
-        "learnMore" | i18n
-      }}</a
-      >.
-    </bit-callout>
-    <div
-      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"
-    >
-      <ng-container *ngIf="!loading; else spinner">
-        <app-send-access-password
-          (setPasswordEvent)="setPassword($event)"
-          *ngIf="passwordRequired && !error"
-        ></app-send-access-password>
-        <bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="unavailable">
-          <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>
+  <bit-callout *ngIf="hideEmail" type="warning" title="{{ 'warning' | i18n }}">
+    {{ "viewSendHiddenEmailWarning" | i18n }}
+    <a bitLink href="https://bitwarden.com/help/receive-send/" target="_blank" rel="noreferrer">{{
+      "learnMore" | i18n
+    }}</a
+    >.
+  </bit-callout>
+  <ng-container *ngIf="!loading; else spinner">
+    <app-send-access-password
+      (setPasswordEvent)="setPassword($event)"
+      *ngIf="passwordRequired && !error"
+    ></app-send-access-password>
+    <bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="unavailable">
+      <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>
-      <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>
-    </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 }}
+      <!-- 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>
-  </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) {}
+}