Pm 29917 split the send access component in the web project into multiple components (#18142)

* PM 29917 implemented refactor of send access component

* PM-29917 refactored to new angular switch syntax

* PM-29917 added mark for check

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

@@ -1,52 +1,14 @@
-<form [formGroup]="formGroup" [bitSubmit]="load">
-  <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>
-    <div class="tw-text-main tw-text-center" *ngIf="unavailable">
-      <p bitTypography="body1">{{ "sendAccessUnavailable" | i18n }}</p>
-    </div>
-    <div class="tw-text-main tw-text-center" *ngIf="error">
-      <p bitTypography="body1">{{ "unexpectedErrorSend" | i18n }}</p>
-    </div>
-    <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>
-    <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>
+@switch (viewState) {
+  @case ("auth") {
+    <app-send-auth [id]="id" [key]="key" (accessGranted)="onAccessGranted($event)"></app-send-auth>
+  }
+  @case ("view") {
+    <app-send-view
+      [id]="id"
+      [key]="key"
+      [sendResponse]="sendAccessResponse"
+      [accessRequest]="sendAccessRequest"
+      (authRequired)="onAuthRequired()"
+    ></app-send-view>
+  }
+}

apps/web/src/app/tools/send/send-access/access.component.ts

@@ -1,161 +1,60 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 
-import { CryptoFunctionService } from "@bitwarden/common/key-management/crypto/abstractions/crypto-function.service";
-import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
-import { SendAccess } from "@bitwarden/common/tools/send/models/domain/send-access";
 import { SendAccessRequest } from "@bitwarden/common/tools/send/models/request/send-access.request";
 import { SendAccessResponse } from "@bitwarden/common/tools/send/models/response/send-access.response";
-import { SendAccessView } from "@bitwarden/common/tools/send/models/view/send-access.view";
-import { SEND_KDF_ITERATIONS } from "@bitwarden/common/tools/send/send-kdf";
-import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
-import { AnonLayoutWrapperDataService, ToastService } from "@bitwarden/components";
-import { KeyService } from "@bitwarden/key-management";
 
 import { SharedModule } from "../../../shared";
 
-import { SendAccessFileComponent } from "./send-access-file.component";
-import { SendAccessPasswordComponent } from "./send-access-password.component";
-import { SendAccessTextComponent } from "./send-access-text.component";
+import { SendAuthComponent } from "./send-auth.component";
+import { SendViewComponent } from "./send-view.component";
+
+const SendViewState = Object.freeze({
+  View: "view",
+  Auth: "auth",
+} as const);
+type SendViewState = (typeof SendViewState)[keyof typeof SendViewState];
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "app-send-access",
   templateUrl: "access.component.html",
-  imports: [
-    SendAccessFileComponent,
-    SendAccessTextComponent,
-    SendAccessPasswordComponent,
-    SharedModule,
-  ],
+  imports: [SendAuthComponent, SendViewComponent, SharedModule],
 })
 export class AccessComponent implements OnInit {
-  protected send: SendAccessView;
-  protected sendType = SendType;
-  protected loading = true;
-  protected passwordRequired = false;
-  protected formPromise: Promise<SendAccessResponse>;
-  protected password: string;
-  protected unavailable = false;
-  protected error = false;
-  protected hideEmail = false;
-  protected decKey: SymmetricCryptoKey;
-  protected accessRequest: SendAccessRequest;
+  viewState: SendViewState = SendViewState.View;
+  id: string;
+  key: string;
 
-  protected formGroup = this.formBuilder.group({});
+  sendAccessResponse: SendAccessResponse | null = null;
+  sendAccessRequest: SendAccessRequest = new SendAccessRequest();
 
-  private id: string;
-  private key: string;
-
-  constructor(
-    private cryptoFunctionService: CryptoFunctionService,
-    private route: ActivatedRoute,
-    private keyService: KeyService,
-    private sendApiService: SendApiService,
-    private toastService: ToastService,
-    private i18nService: I18nService,
-    private layoutWrapperDataService: AnonLayoutWrapperDataService,
-    protected formBuilder: FormBuilder,
-  ) {}
-
-  protected get expirationDate() {
-    if (this.send == null || this.send.expirationDate == null) {
-      return null;
-    }
-    return this.send.expirationDate;
-  }
-
-  protected get creatorIdentifier() {
-    if (this.send == null || this.send.creatorIdentifier == null) {
-      return null;
-    }
-    return this.send.creatorIdentifier;
-  }
+  constructor(private route: ActivatedRoute) {}
 
   async ngOnInit() {
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.params.subscribe(async (params) => {
       this.id = params.sendId;
       this.key = params.key;
-      if (this.key == null || this.id == null) {
-        return;
+
+      if (this.id && this.key) {
+        this.viewState = SendViewState.View;
+        this.sendAccessResponse = null;
+        this.sendAccessRequest = new SendAccessRequest();
       }
-      await this.load();
     });
   }
 
-  protected load = async () => {
-    this.unavailable = false;
-    this.error = false;
-    this.hideEmail = false;
-    try {
-      const keyArray = Utils.fromUrlB64ToArray(this.key);
-      this.accessRequest = new SendAccessRequest();
-      if (this.password != null) {
-        const passwordHash = await this.cryptoFunctionService.pbkdf2(
-          this.password,
-          keyArray,
-          "sha256",
-          SEND_KDF_ITERATIONS,
-        );
-        this.accessRequest.password = Utils.fromBufferToB64(passwordHash);
-      }
-      let sendResponse: SendAccessResponse = null;
-      if (this.loading) {
-        sendResponse = await this.sendApiService.postSendAccess(this.id, this.accessRequest);
-      } else {
-        this.formPromise = this.sendApiService.postSendAccess(this.id, this.accessRequest);
-        sendResponse = await this.formPromise;
-      }
-      this.passwordRequired = false;
-      const sendAccess = new SendAccess(sendResponse);
-      this.decKey = await this.keyService.makeSendKey(keyArray);
-      this.send = await sendAccess.decrypt(this.decKey);
-    } catch (e) {
-      if (e instanceof ErrorResponse) {
-        if (e.statusCode === 401) {
-          this.passwordRequired = true;
-        } else if (e.statusCode === 404) {
-          this.unavailable = true;
-        } else if (e.statusCode === 400) {
-          this.toastService.showToast({
-            variant: "error",
-            title: this.i18nService.t("errorOccurred"),
-            message: e.message,
-          });
-        } else {
-          this.error = true;
-        }
-      } else {
-        this.error = true;
-      }
-    }
-    this.loading = false;
-    this.hideEmail =
-      this.creatorIdentifier == null &&
-      !this.passwordRequired &&
-      !this.loading &&
-      !this.unavailable;
+  onAuthRequired() {
+    this.viewState = SendViewState.Auth;
+  }
 
-    if (this.creatorIdentifier != null) {
-      this.layoutWrapperDataService.setAnonLayoutWrapperData({
-        pageSubtitle: {
-          key: "sendAccessCreatorIdentifier",
-          placeholders: [this.creatorIdentifier],
-        },
-      });
-    }
-  };
-
-  protected setPassword(password: string) {
-    this.password = password;
+  onAccessGranted(event: { response: SendAccessResponse; request: SendAccessRequest }) {
+    this.sendAccessResponse = event.response;
+    this.sendAccessRequest = event.request;
+    this.viewState = SendViewState.View;
   }
 }

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

@@ -0,0 +1,14 @@
+<form (ngSubmit)="onSubmit(password)">
+  <div class="tw-text-main tw-text-center" *ngIf="unavailable">
+    <p bitTypography="body1">{{ "sendAccessUnavailable" | i18n }}</p>
+  </div>
+  <div class="tw-text-main tw-text-center" *ngIf="error">
+    <p bitTypography="body1">{{ "unexpectedErrorSend" | i18n }}</p>
+  </div>
+
+  <app-send-access-password
+    *ngIf="!unavailable"
+    (setPasswordEvent)="password = $event"
+    [loading]="loading"
+  ></app-send-access-password>
+</form>

apps/web/src/app/tools/send/send-access/send-auth.component.ts

@@ -0,0 +1,86 @@
+import { ChangeDetectionStrategy, Component, input, output } from "@angular/core";
+
+import { CryptoFunctionService } from "@bitwarden/common/key-management/crypto/abstractions/crypto-function.service";
+import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { SendAccessRequest } from "@bitwarden/common/tools/send/models/request/send-access.request";
+import { SendAccessResponse } from "@bitwarden/common/tools/send/models/response/send-access.response";
+import { SEND_KDF_ITERATIONS } from "@bitwarden/common/tools/send/send-kdf";
+import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
+import { ToastService } from "@bitwarden/components";
+
+import { SharedModule } from "../../../shared";
+
+import { SendAccessPasswordComponent } from "./send-access-password.component";
+
+@Component({
+  selector: "app-send-auth",
+  templateUrl: "send-auth.component.html",
+  imports: [SendAccessPasswordComponent, SharedModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SendAuthComponent {
+  readonly id = input.required<string>();
+  readonly key = input.required<string>();
+
+  accessGranted = output<{
+    response: SendAccessResponse;
+    request: SendAccessRequest;
+  }>();
+
+  loading = false;
+  error = false;
+  unavailable = false;
+  password?: string;
+
+  private accessRequest!: SendAccessRequest;
+
+  constructor(
+    private cryptoFunctionService: CryptoFunctionService,
+    private sendApiService: SendApiService,
+    private toastService: ToastService,
+    private i18nService: I18nService,
+  ) {}
+
+  async onSubmit(password: string) {
+    this.password = password;
+    this.loading = true;
+    this.error = false;
+    this.unavailable = false;
+
+    try {
+      const keyArray = Utils.fromUrlB64ToArray(this.key());
+      this.accessRequest = new SendAccessRequest();
+
+      const passwordHash = await this.cryptoFunctionService.pbkdf2(
+        this.password,
+        keyArray,
+        "sha256",
+        SEND_KDF_ITERATIONS,
+      );
+      this.accessRequest.password = Utils.fromBufferToB64(passwordHash);
+
+      const sendResponse = await this.sendApiService.postSendAccess(this.id(), this.accessRequest);
+      this.accessGranted.emit({ response: sendResponse, request: this.accessRequest });
+    } catch (e) {
+      if (e instanceof ErrorResponse) {
+        if (e.statusCode === 404) {
+          this.unavailable = true;
+        } else if (e.statusCode === 400) {
+          this.toastService.showToast({
+            variant: "error",
+            title: this.i18nService.t("errorOccurred"),
+            message: e.message,
+          });
+        } else {
+          this.error = true;
+        }
+      } else {
+        this.error = true;
+      }
+    } finally {
+      this.loading = false;
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+<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">
+  <div class="tw-text-main tw-text-center" *ngIf="unavailable">
+    <p bitTypography="body1">{{ "sendAccessUnavailable" | i18n }}</p>
+  </div>
+  <div class="tw-text-main tw-text-center" *ngIf="error">
+    <p bitTypography="body1">{{ "unexpectedErrorSend" | i18n }}</p>
+  </div>
+  <div *ngIf="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>
+  <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>

apps/web/src/app/tools/send/send-access/send-view.component.ts

@@ -0,0 +1,131 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  input,
+  OnInit,
+  output,
+} from "@angular/core";
+
+import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
+import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { SendAccess } from "@bitwarden/common/tools/send/models/domain/send-access";
+import { SendAccessRequest } from "@bitwarden/common/tools/send/models/request/send-access.request";
+import { SendAccessResponse } from "@bitwarden/common/tools/send/models/response/send-access.response";
+import { SendAccessView } from "@bitwarden/common/tools/send/models/view/send-access.view";
+import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
+import { AnonLayoutWrapperDataService, ToastService } from "@bitwarden/components";
+import { KeyService } from "@bitwarden/key-management";
+
+import { SharedModule } from "../../../shared";
+
+import { SendAccessFileComponent } from "./send-access-file.component";
+import { SendAccessTextComponent } from "./send-access-text.component";
+
+@Component({
+  selector: "app-send-view",
+  templateUrl: "send-view.component.html",
+  imports: [SendAccessFileComponent, SendAccessTextComponent, SharedModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SendViewComponent implements OnInit {
+  readonly id = input.required<string>();
+  readonly key = input.required<string>();
+  readonly sendResponse = input<SendAccessResponse | null>(null);
+  readonly accessRequest = input<SendAccessRequest>(new SendAccessRequest());
+
+  authRequired = output<void>();
+
+  send: SendAccessView | null = null;
+  sendType = SendType;
+  loading = true;
+  unavailable = false;
+  error = false;
+  hideEmail = false;
+  decKey!: SymmetricCryptoKey;
+
+  constructor(
+    private keyService: KeyService,
+    private sendApiService: SendApiService,
+    private toastService: ToastService,
+    private i18nService: I18nService,
+    private layoutWrapperDataService: AnonLayoutWrapperDataService,
+    private cdRef: ChangeDetectorRef,
+  ) {}
+
+  get expirationDate() {
+    if (this.send == null || this.send.expirationDate == null) {
+      return null;
+    }
+    return this.send.expirationDate;
+  }
+
+  get creatorIdentifier() {
+    if (this.send == null || this.send.creatorIdentifier == null) {
+      return null;
+    }
+    return this.send.creatorIdentifier;
+  }
+
+  async ngOnInit() {
+    await this.load();
+  }
+
+  private async load() {
+    this.unavailable = false;
+    this.error = false;
+    this.hideEmail = false;
+    this.loading = true;
+
+    let response = this.sendResponse();
+
+    try {
+      if (!response) {
+        response = await this.sendApiService.postSendAccess(this.id(), this.accessRequest());
+      }
+
+      const keyArray = Utils.fromUrlB64ToArray(this.key());
+      const sendAccess = new SendAccess(response);
+      this.decKey = await this.keyService.makeSendKey(keyArray);
+      this.send = await sendAccess.decrypt(this.decKey);
+    } catch (e) {
+      if (e instanceof ErrorResponse) {
+        if (e.statusCode === 401) {
+          this.authRequired.emit();
+        } else if (e.statusCode === 404) {
+          this.unavailable = true;
+        } else if (e.statusCode === 400) {
+          this.toastService.showToast({
+            variant: "error",
+            title: this.i18nService.t("errorOccurred"),
+            message: e.message,
+          });
+        } else {
+          this.error = true;
+        }
+      } else {
+        this.error = true;
+      }
+    }
+
+    this.loading = false;
+    this.hideEmail =
+      this.creatorIdentifier == null && !this.loading && !this.unavailable && !response;
+
+    this.hideEmail = this.send != null && this.creatorIdentifier == null;
+
+    if (this.creatorIdentifier != null) {
+      this.layoutWrapperDataService.setAnonLayoutWrapperData({
+        pageSubtitle: {
+          key: "sendAccessCreatorIdentifier",
+          placeholders: [this.creatorIdentifier],
+        },
+      });
+    }
+
+    this.cdRef.markForCheck();
+  }
+}