[PS-1341] Add folder to item view (#3347)

* Initial - add folder id to popup item view

* Add folder service to view component

* Move folder info higher in the item view as proper box

* Add folder name handling to component

* Add folder field to browser view

* Add folder field to desktop view

* Make folder field draggable

following the merging of https://github.com/bitwarden/clients/pull/3321 also make the folder field draggable

* Use `<label>` and readonly `<input>`

In anticipation of https://github.com/bitwarden/clients/pull/3485 being merged

* Changes from review

- change input name to `folderName`, match it in the `for` attribute on the `<label>`
- add an `if` check before querying folder names

* Match `name` to `id`

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
This commit is contained in:
Patrick H. Lauke 2022-10-20 00:12:19 +01:00 committed by GitHub
parent 02ae7ad9b3
commit 7aada169a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 0 deletions

View File

@ -475,6 +475,20 @@
</div>
</div>
</div>
<div class="box" *ngIf="cipher.folderId">
<div class="box-content">
<div class="box-content-row">
<label
for="folderName"
class="draggable"
draggable="true"
(dragstart)="setTextDataOnDrag($event, folder.name)"
>{{ "folder" | i18n }}</label
>
<input id="folderName" type="text" name="folderName" [value]="folder.name" readonly />
</div>
</div>
</div>
<div class="box" *ngIf="cipher.notes">
<h2 class="box-header">
<label

View File

@ -11,6 +11,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
import { EventService } from "@bitwarden/common/abstractions/event.service";
import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/abstractions/log.service";
import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
@ -43,6 +44,7 @@ export class ViewComponent extends BaseViewComponent {
constructor(
cipherService: CipherService,
folderService: FolderService,
totpService: TotpService,
tokenService: TokenService,
i18nService: I18nService,
@ -67,6 +69,7 @@ export class ViewComponent extends BaseViewComponent {
) {
super(
cipherService,
folderService,
totpService,
tokenService,
i18nService,

View File

@ -422,6 +422,20 @@
</div>
</div>
</div>
<div class="box" *ngIf="cipher.folderId">
<div class="box-content">
<div class="box-content-row">
<label
for="folderName"
class="draggable"
draggable="true"
(dragstart)="setTextDataOnDrag($event, folder.name)"
>{{ "folder" | i18n }}</label
>
<input id="folderName" type="text" name="folderName" [value]="folder.name" readonly />
</div>
</div>
</div>
<div class="box" *ngIf="cipher.notes">
<h2 class="box-header">
<span

View File

@ -15,6 +15,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
import { EventService } from "@bitwarden/common/abstractions/event.service";
import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/abstractions/log.service";
import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
@ -36,6 +37,7 @@ export class ViewComponent extends BaseViewComponent implements OnChanges {
constructor(
cipherService: CipherService,
folderService: FolderService,
totpService: TotpService,
tokenService: TokenService,
i18nService: I18nService,
@ -55,6 +57,7 @@ export class ViewComponent extends BaseViewComponent implements OnChanges {
) {
super(
cipherService,
folderService,
totpService,
tokenService,
i18nService,

View File

@ -8,6 +8,7 @@ import {
OnInit,
Output,
} from "@angular/core";
import { firstValueFrom } from "rxjs";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { AuditService } from "@bitwarden/common/abstractions/audit.service";
@ -16,6 +17,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
import { EventService } from "@bitwarden/common/abstractions/event.service";
import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/abstractions/log.service";
import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
@ -31,6 +33,7 @@ import { EncArrayBuffer } from "@bitwarden/common/models/domain/enc-array-buffer
import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
import { AttachmentView } from "@bitwarden/common/models/view/attachment.view";
import { CipherView } from "@bitwarden/common/models/view/cipher.view";
import { FolderView } from "@bitwarden/common/models/view/folder.view";
import { LoginUriView } from "@bitwarden/common/models/view/login-uri.view";
const BroadcasterSubscriptionId = "ViewComponent";
@ -58,6 +61,7 @@ export class ViewComponent implements OnDestroy, OnInit {
totpLow: boolean;
fieldType = FieldType;
checkPasswordPromise: Promise<number>;
folder: FolderView;
private totpInterval: any;
private previousCipherId: string;
@ -65,6 +69,7 @@ export class ViewComponent implements OnDestroy, OnInit {
constructor(
protected cipherService: CipherService,
protected folderService: FolderService,
protected totpService: TotpService,
protected tokenService: TokenService,
protected i18nService: I18nService,
@ -112,6 +117,12 @@ export class ViewComponent implements OnDestroy, OnInit {
this.showPremiumRequiredTotp =
this.cipher.login.totp && !this.canAccessPremium && !this.cipher.organizationUseTotp;
if (this.cipher.folderId) {
this.folder = await (
await firstValueFrom(this.folderService.folderViews$)
).find((f) => f.id == this.cipher.folderId);
}
if (
this.cipher.type === CipherType.Login &&
this.cipher.login.totp &&