Skip to content

Commit

Permalink
[PM-2806] Migrate send access to Component Library (#6139)
Browse files Browse the repository at this point in the history 
* Remove unneeded ApiService

* Extract SendAccess for sends of type text

* Migrate form and card-body

* Migrate callout

* Extract SendAccess for sends of type file

* Converted SendAccess component to standalone

* Migrated bottom message to CL

* Added Send Access Password Component

* Added No item component, password component and changed bootstrap classes

* Updated send texts and added layout for unexpected error

* Changed SendAccessTextComponent to standalone

* Moved AccessComponent to oss.module.ts and removed unnecessary components from app.module

* Properly set access modifiers

* Using async action on download button

* Updated links

* Using tailwind classes

* Using ng-template and ng-container

* Added validation to check if status code is from a wrong password

* Using Component Library Forms

* using subscriber to update password on send access

* Using reactive forms to show the text on send access

* Updated message.json keys for changed values

* Removed unnecessary components and changed classes to tailwind ones

* added margin bottom on send-access-password to keep consistent with other send-access layouts

* removed duplicated message key

* Added error toast message on wrong password

---------

Co-authored-by: Daniel James Smith <[email protected]>
  • Loading branch information
@aj-rosado @djsmith85
aj-rosado and djsmith85 authored Nov 17, 2023
1 parent 5b1717f commit 3952af0
Show file tree
Hide file tree
Showing 12 changed files with 365 additions and 233 deletions.
3 changes: 3 additions & 0 deletions apps/web/src/app/oss.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { AuthModule } from "./auth";
import { LoginModule } from "./auth/login/login.module";
import { TrialInitiationModule } from "./auth/trial-initiation/trial-initiation.module";
import { LooseComponentsModule, SharedModule } from "./shared";
import { AccessComponent } from "./tools/send/access.component";
import { OrganizationBadgeModule } from "./vault/individual-vault/organization-badge/organization-badge.module";
import { VaultFilterModule } from "./vault/individual-vault/vault-filter/vault-filter.module";

Expand All @@ -18,6 +19,7 @@ import { VaultFilterModule } from "./vault/individual-vault/vault-filter/vault-f
OrganizationUserModule,
LoginModule,
AuthModule,
AccessComponent,
],
exports: [
SharedModule,
Expand All @@ -26,6 +28,7 @@ import { VaultFilterModule } from "./vault/individual-vault/vault-filter/vault-f
VaultFilterModule,
OrganizationBadgeModule,
LoginModule,
AccessComponent,
],
bootstrap: [],
})
Expand Down
3 changes: 0 additions & 3 deletions apps/web/src/app/shared/loose-components.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ import { SettingsComponent } from "../settings/settings.component";
import { VaultTimeoutInputComponent } from "../settings/vault-timeout-input.component";
import { GeneratorComponent } from "../tools/generator.component";
import { PasswordGeneratorHistoryComponent } from "../tools/password-generator-history.component";
import { AccessComponent } from "../tools/send/access.component";
import { AddEditComponent as SendAddEditComponent } from "../tools/send/add-edit.component";
import { ToolsComponent } from "../tools/tools.component";
import { PremiumBadgeComponent } from "../vault/components/premium-badge.component";
Expand Down Expand Up @@ -108,7 +107,6 @@ import { SharedModule } from "./shared.module";
declarations: [
AcceptFamilySponsorshipComponent,
AcceptOrganizationComponent,
AccessComponent,
AccountComponent,
AddEditComponent,
AddEditCustomFieldsComponent,
Expand Down Expand Up @@ -191,7 +189,6 @@ import { SharedModule } from "./shared.module";
UserVerificationModule,
PremiumBadgeComponent,
AcceptOrganizationComponent,
AccessComponent,
AccountComponent,
AddEditComponent,
AddEditCustomFieldsComponent,
Expand Down
190 changes: 62 additions & 128 deletions apps/web/src/app/tools/send/access.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,150 +1,84 @@
<form #form (ngSubmit)="load()" [appApiAction]="formPromise" class="container" ngNativeValidate>
<div class="row justify-content-center mt-5">
<div class="col-12">
<h1 class="lead text-center mb-4">Bitwarden Send</h1>
<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="col-12 text-center" *ngIf="creatorIdentifier != null">
<p>{{ "sendCreatorIdentifier" | i18n : creatorIdentifier }}</p>
<div class="tw-w-full tw-text-center" *ngIf="creatorIdentifier != null">
<p>{{ "sendAccessCreatorIdentifier" | i18n : creatorIdentifier }}</p>
</div>
<div class="col-8" *ngIf="hideEmail">
<app-callout type="warning" title="{{ 'warning' | i18n }}">
{{ "viewSendHiddenEmailWarning" | i18n }}
<a href="https://bitwarden.com/help/receive-send/" target="_blank">{{
"learnMore" | i18n
}}</a
>.
</app-callout>
</div>
</div>
<div class="row justify-content-center">
<div class="col-5">
<div class="card d-block">
<div class="card-body" *ngIf="loading" class="text-center">
<i
class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
</div>
<div class="card-body" *ngIf="!loading && passwordRequired">
<p>{{ "sendProtectedPassword" | i18n }}</p>
<p>{{ "sendProtectedPasswordDontKnow" | i18n }}</p>
<div class="form-group">
<label for="password">{{ "password" | i18n }}</label>
<input
id="password"
type="password"
name="Password"
class="text-monospace form-control"
[(ngModel)]="password"
required
appInputVerbatim
appAutofocus
/>
</div>
<div class="d-flex">
<button
type="submit"
class="btn btn-primary btn-block btn-submit"
[disabled]="form.loading"
>
<span>
<i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}
</span>
<i
class="bwi bwi-spinner bwi-spin"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
</button>
</div>
</div>
<div class="card-body" *ngIf="!loading && unavailable">
{{ "sendAccessUnavailable" | i18n }}
</div>
<div class="card-body" *ngIf="!loading && error">
{{ "unexpectedError" | i18n }}
</div>
<div class="card-body" *ngIf="!loading && !passwordRequired && send">
<p class="text-center">
<bit-callout *ngIf="hideEmail" type="warning" title="{{ 'warning' | i18n }}">
{{ "viewSendHiddenEmailWarning" | i18n }}
<a
bitLink
href="https://bitwarden.com/help/receive-send/"
target="_blank"
rel="noopener 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-callout *ngIf="send.text.hidden" type="tip">{{
"sendHiddenByDefault" | i18n
}}</app-callout>
<div class="form-group">
<textarea
id="text"
rows="8"
name="Text"
[ngModel]="sendText"
class="form-control"
readonly
></textarea>
</div>
<button
class="btn btn-block btn-link"
type="button"
(click)="toggleText()"
*ngIf="send.text.hidden"
>
<i
class="bwi bwi-lg"
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showText, 'bwi-eye-slash': showText }"
></i>
{{ "toggleVisibility" | i18n }}
</button>
<button class="btn btn-block btn-link" type="button" (click)="copyText()">
<i class="bwi bwi-copy" aria-hidden="true"></i> {{ "copyValue" | i18n }}
</button>
<app-send-access-text [send]="send"></app-send-access-text>
</ng-container>
<!-- File -->
<ng-container *ngIf="send.type === sendType.File">
<p>{{ send.file.fileName }}</p>
<button
class="btn btn-primary btn-block"
type="button"
(click)="download()"
*ngIf="!downloading"
>
<i class="bwi bwi-download" aria-hidden="true"></i>
{{ "downloadFile" | i18n }} ({{ send.file.sizeName }})
</button>
<button
class="btn btn-primary btn-block"
type="button"
*ngIf="downloading"
disabled="true"
>
<i
class="bwi bwi-spinner bwi-spin"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
</button>
<app-send-access-file
[send]="send"
[decKey]="decKey"
[accessRequest]="accessRequest"
></app-send-access-file>
</ng-container>
<p *ngIf="expirationDate" class="text-center text-muted">
<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>
</div>
<div class="col-12 text-center mt-5 text-muted">
<p class="mb-0">
{{ "sendAccessTaglineProductDesc" | i18n }}<br />
<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 href="https://www.bitwarden.com/products/send?source=web-vault" target="_blank"
<a
bitLink
href="https://www.bitwarden.com/products/send?source=web-vault"
target="_blank"
rel="noopener noreferrer"
>Bitwarden Send</a
>
{{ "sendAccessTaglineOr" | i18n }}
<a href="https://vault.bitwarden.com/#/register" target="_blank">{{
"sendAccessTaglineSignUp" | i18n
}}</a>
<a bitLink routerLink="/register" target="_blank">{{ "sendAccessTaglineSignUp" | i18n }}</a>
{{ "sendAccessTaglineTryToday" | i18n }}
</p>
</div>
Expand Down
Loading

0 comments on commit 3952af0

Please sign in to comment.