[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
This commit is contained in:
Jordan Aasen 2024-08-27 10:18:02 -07:00 committed by GitHub
parent a7da5bb40f
commit e255d84121
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 116 additions and 85 deletions

View File

@ -68,6 +68,7 @@ import { PreferencesComponent } from "./settings/preferences.component";
import { GeneratorComponent } from "./tools/generator.component"; import { GeneratorComponent } from "./tools/generator.component";
import { ReportsModule } from "./tools/reports"; import { ReportsModule } from "./tools/reports";
import { AccessComponent } from "./tools/send/access.component"; import { AccessComponent } from "./tools/send/access.component";
import { SendAccessExplainerComponent } from "./tools/send/send-access-explainer.component";
import { SendComponent } from "./tools/send/send.component"; import { SendComponent } from "./tools/send/send.component";
import { VaultModule } from "./vault/individual-vault/vault.module"; import { VaultModule } from "./vault/individual-vault/vault.module";
@ -145,11 +146,6 @@ const routes: Routes = [
canActivate: [unauthGuardFn()], canActivate: [unauthGuardFn()],
data: { titleId: "deleteAccount" } satisfies DataProperties, data: { titleId: "deleteAccount" } satisfies DataProperties,
}, },
{
path: "send/:sendId/:key",
component: AccessComponent,
data: { titleId: "Bitwarden Send" } satisfies DataProperties,
},
{ {
path: "update-temp-password", path: "update-temp-password",
component: UpdateTempPasswordComponent, 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", path: "set-password-jit",
canActivate: [canAccessFeature(FeatureFlag.EmailVerification)], canActivate: [canAccessFeature(FeatureFlag.EmailVerification)],

View File

@ -1,85 +1,52 @@
<form [formGroup]="formGroup" [bitSubmit]="load"> <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-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> </p>
</div> </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> </form>

View File

@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
import { FormBuilder } from "@angular/forms"; import { FormBuilder } from "@angular/forms";
import { ActivatedRoute } from "@angular/router"; import { ActivatedRoute } from "@angular/router";
import { AnonLayoutWrapperDataService } from "@bitwarden/auth/angular";
import { RegisterRouteService } from "@bitwarden/auth/common"; import { RegisterRouteService } from "@bitwarden/auth/common";
import { ErrorResponse } from "@bitwarden/common/models/response/error.response"; import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
@ -70,6 +71,7 @@ export class AccessComponent implements OnInit {
private i18nService: I18nService, private i18nService: I18nService,
private configService: ConfigService, private configService: ConfigService,
private registerRouteService: RegisterRouteService, private registerRouteService: RegisterRouteService,
private layoutWrapperDataService: AnonLayoutWrapperDataService,
protected formBuilder: FormBuilder, protected formBuilder: FormBuilder,
) {} ) {}
@ -151,6 +153,15 @@ export class AccessComponent implements OnInit {
!this.passwordRequired && !this.passwordRequired &&
!this.loading && !this.loading &&
!this.unavailable; !this.unavailable;
if (this.creatorIdentifier != null) {
this.layoutWrapperDataService.setAnonLayoutWrapperData({
pageSubtitle: {
subtitle: this.i18nService.t("sendAccessCreatorIdentifier", this.creatorIdentifier),
translate: false,
},
});
}
}; };
protected setPassword(password: string) { protected setPassword(password: string) {

View File

@ -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>

View File

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

View File

@ -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": { "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.", "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." "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."