mirror of
https://github.com/bitwarden/browser
synced 2025-12-18 17:23:37 +00:00
[SG-360] Remove the /modules/ folder (#3225)
* Move Web's SharedModule to /app/shared/ This commit relocates `SharedModule` from `/app/modules` to `/app/shared` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference `SharedModule`. * Move /modules/pipes to /shared/pipes This commit relocates `PipesModule` from `/app/modules` to `/app/shared` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference `PipesModule`. * Move LooseComponentsModule to /shared/ This commit relocates `LooseComponentsModule` from `/app/modules` to `/app/shared` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference `LooseComponentsModule`. * Move VerticalStepperModule to /shared/ This commit relocates `VerticalStepperModule` from `/app/modules` to `/app/shared` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference `VerticalStepperModule`. * Move TrialInitiationModule to /shared/ This commit relocates `TrialInitiationModule` & `RegisterFormModule` from `/app/modules` to `/app/shared` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference `TrialInitiationModule` or `RegisterFormModule`. * Move /modules/organization to /organization This commit relocates all modules in `/app/modules/organization` to `/app/organization` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference the moved modules. * Move /modules/vault/ to /vault This commit relocates the IndividualVaultModule to `/app/modules/vault`, and the OrganizationVaultModule to `/app/organization/vault` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference the moved modules. * Move VaultFiltersModule to /vault This commit relocates the `VaultFilterModule` to `/app/vault/vault-filter`, and the OrganizationVaultFilterComponent to `/app/organization/vault/vault-filter` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference the moved modules. * Remove the /modules/ folder from desktop This commit relocates the `VaultFilterModule` to `/app/vault/vault-filter`, and the OrganizationVaultFilterComponent to `/app/organization/vault/vault-filter` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference the moved modules. * Move Libs' VaultFiltersComponent to /vault/ This commit moves the lib's logic for `VaultFiltersModule` from `/modules/` to `/vault/` All other changes are just to adjust imports that reference the moved files. * Rename VaultModule -> SharedVaultModule * Rename IndividualVaultModule -> VaultModule * Rename OrganizationVaultModule -> VaultModule * Rename OrganizationVaultFilterComponent Rename OrganizationVaultFilterComponent to VaultFilterComponent * Seperate the two VaultFilterComponents This commit seperate the `OrganizationVaultFilterComponent` from the `VaultFilerModule`, which is only used by the individual vault. A `VaultFilterSharedModule` was created to declare shared components and provide shared services between the two implementations. This was done to align with best practices for NgModules. * [r] Move VerticalStepperModule to /account/ More specifically, /account/trial/ * [r] Declare PaymentComponent in LooseComponentsModule `PaymentComponent` is not reused across domains and should not be declared in `SharedModule`. I've moved it to `LooseComponentsModule` for now, but later it will need to be exported from a `SettingsModule`. * [r] Declare TaxInfoComponent in LooseComponentsModule * [r] Reloacte Pipes out of /shared/ * [r] Extract locales out of SharedModule * [r] Add documentation to shared module * [r] Cleanup imports * [r] Use an index.ts file for /shared/ * [r] Add eslint rule restricting access to /shared/ Co-authored-by: Hinton <hinton@users.noreply.github.com>
This commit is contained in:
Addison Beck
GitHub
394
apps/web/src/app/vault/vault.component.ts
Normal file
394
apps/web/src/app/vault/vault.component.ts
Normal file
@@ -0,0 +1,394 @@
|
||||
import {
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
NgZone,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
ViewChild,
|
||||
ViewContainerRef,
|
||||
} from "@angular/core";
|
||||
import { ActivatedRoute, Params, Router } from "@angular/router";
|
||||
import { first } from "rxjs/operators";
|
||||
|
||||
import { ModalService } from "@bitwarden/angular/services/modal.service";
|
||||
import { VaultFilter } from "@bitwarden/angular/vault/vault-filter/models/vault-filter.model";
|
||||
import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
|
||||
import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
|
||||
import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
|
||||
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
|
||||
import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
|
||||
import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
|
||||
import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
|
||||
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
|
||||
import { StateService } from "@bitwarden/common/abstractions/state.service";
|
||||
import { SyncService } from "@bitwarden/common/abstractions/sync.service";
|
||||
import { TokenService } from "@bitwarden/common/abstractions/token.service";
|
||||
import { CipherView } from "@bitwarden/common/models/view/cipherView";
|
||||
|
||||
import { UpdateKeyComponent } from "../settings/update-key.component";
|
||||
|
||||
import { AddEditComponent } from "./add-edit.component";
|
||||
import { AttachmentsComponent } from "./attachments.component";
|
||||
import { CiphersComponent } from "./ciphers.component";
|
||||
import { CollectionsComponent } from "./collections.component";
|
||||
import { FolderAddEditComponent } from "./folder-add-edit.component";
|
||||
import { ShareComponent } from "./share.component";
|
||||
import { VaultService } from "./shared/vault.service";
|
||||
import { VaultFilterService } from "./vault-filter/shared/vault-filter.service";
|
||||
import { VaultFilterComponent } from "./vault-filter/vault-filter.component";
|
||||
|
||||
const BroadcasterSubscriptionId = "VaultComponent";
|
||||
|
||||
@Component({
|
||||
selector: "app-vault",
|
||||
templateUrl: "vault.component.html",
|
||||
})
|
||||
export class VaultComponent implements OnInit, OnDestroy {
|
||||
@ViewChild("vaultFilter", { static: true }) filterComponent: VaultFilterComponent;
|
||||
@ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
|
||||
@ViewChild("attachments", { read: ViewContainerRef, static: true })
|
||||
attachmentsModalRef: ViewContainerRef;
|
||||
@ViewChild("folderAddEdit", { read: ViewContainerRef, static: true })
|
||||
folderAddEditModalRef: ViewContainerRef;
|
||||
@ViewChild("cipherAddEdit", { read: ViewContainerRef, static: true })
|
||||
cipherAddEditModalRef: ViewContainerRef;
|
||||
@ViewChild("share", { read: ViewContainerRef, static: true }) shareModalRef: ViewContainerRef;
|
||||
@ViewChild("collections", { read: ViewContainerRef, static: true })
|
||||
collectionsModalRef: ViewContainerRef;
|
||||
@ViewChild("updateKeyTemplate", { read: ViewContainerRef, static: true })
|
||||
updateKeyModalRef: ViewContainerRef;
|
||||
|
||||
folderId: string = null;
|
||||
myVaultOnly = false;
|
||||
showVerifyEmail = false;
|
||||
showBrowserOutdated = false;
|
||||
showUpdateKey = false;
|
||||
showPremiumCallout = false;
|
||||
trashCleanupWarning: string = null;
|
||||
activeFilter: VaultFilter = new VaultFilter();
|
||||
|
||||
constructor(
|
||||
private syncService: SyncService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private i18nService: I18nService,
|
||||
private modalService: ModalService,
|
||||
private tokenService: TokenService,
|
||||
private cryptoService: CryptoService,
|
||||
private messagingService: MessagingService,
|
||||
private platformUtilsService: PlatformUtilsService,
|
||||
private broadcasterService: BroadcasterService,
|
||||
private ngZone: NgZone,
|
||||
private stateService: StateService,
|
||||
private organizationService: OrganizationService,
|
||||
private vaultService: VaultService,
|
||||
private cipherService: CipherService,
|
||||
private passwordRepromptService: PasswordRepromptService,
|
||||
private vaultFilterService: VaultFilterService
|
||||
) {}
|
||||
|
||||
async ngOnInit() {
|
||||
this.showVerifyEmail = !(await this.tokenService.getEmailVerified());
|
||||
this.showBrowserOutdated = window.navigator.userAgent.indexOf("MSIE") !== -1;
|
||||
this.trashCleanupWarning = this.i18nService.t(
|
||||
this.platformUtilsService.isSelfHost()
|
||||
? "trashCleanupWarningSelfHosted"
|
||||
: "trashCleanupWarning"
|
||||
);
|
||||
|
||||
this.route.queryParams.pipe(first()).subscribe(async (params) => {
|
||||
await this.syncService.fullSync(false);
|
||||
const canAccessPremium = await this.stateService.getCanAccessPremium();
|
||||
this.showPremiumCallout =
|
||||
!this.showVerifyEmail && !canAccessPremium && !this.platformUtilsService.isSelfHost();
|
||||
|
||||
this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
|
||||
this.filterComponent.reloadOrganizations();
|
||||
this.showUpdateKey = !(await this.cryptoService.hasEncKey());
|
||||
|
||||
const cipherId = getCipherIdFromParams(params);
|
||||
|
||||
if (cipherId) {
|
||||
const cipherView = new CipherView();
|
||||
cipherView.id = cipherId;
|
||||
if (params.action === "clone") {
|
||||
await this.cloneCipher(cipherView);
|
||||
} else if (params.action === "edit") {
|
||||
await this.editCipher(cipherView);
|
||||
}
|
||||
}
|
||||
await this.ciphersComponent.reload();
|
||||
|
||||
this.route.queryParams.subscribe(async (params) => {
|
||||
const cipherId = getCipherIdFromParams(params);
|
||||
if (cipherId) {
|
||||
if ((await this.cipherService.get(cipherId)) != null) {
|
||||
this.editCipherId(cipherId);
|
||||
} else {
|
||||
this.platformUtilsService.showToast(
|
||||
"error",
|
||||
this.i18nService.t("errorOccurred"),
|
||||
this.i18nService.t("unknownCipher")
|
||||
);
|
||||
this.router.navigate([], {
|
||||
queryParams: { itemId: null, cipherId: null },
|
||||
queryParamsHandling: "merge",
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
|
||||
this.ngZone.run(async () => {
|
||||
switch (message.command) {
|
||||
case "syncCompleted":
|
||||
if (message.successfully) {
|
||||
await Promise.all([
|
||||
this.filterComponent.reloadCollectionsAndFolders(this.activeFilter),
|
||||
this.filterComponent.reloadOrganizations(),
|
||||
this.ciphersComponent.load(this.ciphersComponent.filter),
|
||||
]);
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
get isShowingCards() {
|
||||
return (
|
||||
this.showBrowserOutdated ||
|
||||
this.showPremiumCallout ||
|
||||
this.showUpdateKey ||
|
||||
this.showVerifyEmail
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
|
||||
}
|
||||
|
||||
async applyVaultFilter(vaultFilter: VaultFilter) {
|
||||
this.ciphersComponent.showAddNew = vaultFilter.status !== "trash";
|
||||
this.activeFilter = vaultFilter;
|
||||
await this.ciphersComponent.reload(
|
||||
this.activeFilter.buildFilter(),
|
||||
vaultFilter.status === "trash"
|
||||
);
|
||||
this.filterComponent.searchPlaceholder = this.vaultService.calculateSearchBarLocalizationString(
|
||||
this.activeFilter
|
||||
);
|
||||
this.go();
|
||||
}
|
||||
|
||||
async applyOrganizationFilter(orgId: string) {
|
||||
if (orgId == null) {
|
||||
this.activeFilter.resetOrganization();
|
||||
this.activeFilter.myVaultOnly = true;
|
||||
} else {
|
||||
this.activeFilter.selectedOrganizationId = orgId;
|
||||
}
|
||||
await this.vaultFilterService.ensureVaultFiltersAreExpanded();
|
||||
await this.applyVaultFilter(this.activeFilter);
|
||||
}
|
||||
|
||||
filterSearchText(searchText: string) {
|
||||
this.ciphersComponent.searchText = searchText;
|
||||
this.ciphersComponent.search(200);
|
||||
}
|
||||
|
||||
async editCipherAttachments(cipher: CipherView) {
|
||||
const canAccessPremium = await this.stateService.getCanAccessPremium();
|
||||
if (cipher.organizationId == null && !canAccessPremium) {
|
||||
this.messagingService.send("premiumRequired");
|
||||
return;
|
||||
} else if (cipher.organizationId != null) {
|
||||
const org = await this.organizationService.get(cipher.organizationId);
|
||||
if (org != null && (org.maxStorageGb == null || org.maxStorageGb === 0)) {
|
||||
this.messagingService.send("upgradeOrganization", {
|
||||
organizationId: cipher.organizationId,
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
let madeAttachmentChanges = false;
|
||||
const [modal] = await this.modalService.openViewRef(
|
||||
AttachmentsComponent,
|
||||
this.attachmentsModalRef,
|
||||
(comp) => {
|
||||
comp.cipherId = cipher.id;
|
||||
comp.onUploadedAttachment.subscribe(() => (madeAttachmentChanges = true));
|
||||
comp.onDeletedAttachment.subscribe(() => (madeAttachmentChanges = true));
|
||||
comp.onReuploadedAttachment.subscribe(() => (madeAttachmentChanges = true));
|
||||
}
|
||||
);
|
||||
|
||||
modal.onClosed.subscribe(async () => {
|
||||
if (madeAttachmentChanges) {
|
||||
await this.ciphersComponent.refresh();
|
||||
}
|
||||
madeAttachmentChanges = false;
|
||||
});
|
||||
}
|
||||
|
||||
async shareCipher(cipher: CipherView) {
|
||||
const [modal] = await this.modalService.openViewRef(
|
||||
ShareComponent,
|
||||
this.shareModalRef,
|
||||
(comp) => {
|
||||
comp.cipherId = cipher.id;
|
||||
comp.onSharedCipher.subscribe(async () => {
|
||||
modal.close();
|
||||
await this.ciphersComponent.refresh();
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async editCipherCollections(cipher: CipherView) {
|
||||
const [modal] = await this.modalService.openViewRef(
|
||||
CollectionsComponent,
|
||||
this.collectionsModalRef,
|
||||
(comp) => {
|
||||
comp.cipherId = cipher.id;
|
||||
comp.onSavedCollections.subscribe(async () => {
|
||||
modal.close();
|
||||
await this.ciphersComponent.refresh();
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async addFolder() {
|
||||
const [modal] = await this.modalService.openViewRef(
|
||||
FolderAddEditComponent,
|
||||
this.folderAddEditModalRef,
|
||||
(comp) => {
|
||||
comp.folderId = null;
|
||||
comp.onSavedFolder.subscribe(async () => {
|
||||
modal.close();
|
||||
await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async editFolder(folderId: string) {
|
||||
const [modal] = await this.modalService.openViewRef(
|
||||
FolderAddEditComponent,
|
||||
this.folderAddEditModalRef,
|
||||
(comp) => {
|
||||
comp.folderId = folderId;
|
||||
comp.onSavedFolder.subscribe(async () => {
|
||||
modal.close();
|
||||
await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
|
||||
});
|
||||
comp.onDeletedFolder.subscribe(async () => {
|
||||
modal.close();
|
||||
await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async addCipher() {
|
||||
const component = await this.editCipher(null);
|
||||
component.type = this.activeFilter.cipherType;
|
||||
component.folderId = this.folderId === "none" ? null : this.folderId;
|
||||
if (this.activeFilter.selectedCollectionId != null) {
|
||||
const collection = this.filterComponent.collections.fullList.filter(
|
||||
(c) => c.id === this.activeFilter.selectedCollectionId
|
||||
);
|
||||
if (collection.length > 0) {
|
||||
component.organizationId = collection[0].organizationId;
|
||||
component.collectionIds = [this.activeFilter.selectedCollectionId];
|
||||
}
|
||||
}
|
||||
if (this.activeFilter.selectedFolderId && this.activeFilter.selectedFolder) {
|
||||
component.folderId = this.activeFilter.selectedFolderId;
|
||||
}
|
||||
if (this.activeFilter.selectedOrganizationId) {
|
||||
component.organizationId = this.activeFilter.selectedOrganizationId;
|
||||
}
|
||||
}
|
||||
|
||||
async editCipher(cipher: CipherView) {
|
||||
return this.editCipherId(cipher?.id);
|
||||
}
|
||||
|
||||
async editCipherId(id: string) {
|
||||
const cipher = await this.cipherService.get(id);
|
||||
if (cipher != null && cipher.reprompt != 0) {
|
||||
if (!(await this.passwordRepromptService.showPasswordPrompt())) {
|
||||
this.go({ cipherId: null, itemId: null });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const [modal, childComponent] = await this.modalService.openViewRef(
|
||||
AddEditComponent,
|
||||
this.cipherAddEditModalRef,
|
||||
(comp) => {
|
||||
comp.cipherId = id;
|
||||
comp.onSavedCipher.subscribe(async () => {
|
||||
modal.close();
|
||||
await this.ciphersComponent.refresh();
|
||||
});
|
||||
comp.onDeletedCipher.subscribe(async () => {
|
||||
modal.close();
|
||||
await this.ciphersComponent.refresh();
|
||||
});
|
||||
comp.onRestoredCipher.subscribe(async () => {
|
||||
modal.close();
|
||||
await this.ciphersComponent.refresh();
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
modal.onClosedPromise().then(() => {
|
||||
this.go({ cipherId: null, itemId: null });
|
||||
});
|
||||
|
||||
return childComponent;
|
||||
}
|
||||
|
||||
async cloneCipher(cipher: CipherView) {
|
||||
const component = await this.editCipher(cipher);
|
||||
component.cloneMode = true;
|
||||
}
|
||||
|
||||
async updateKey() {
|
||||
await this.modalService.openViewRef(UpdateKeyComponent, this.updateKeyModalRef);
|
||||
}
|
||||
|
||||
private go(queryParams: any = null) {
|
||||
if (queryParams == null) {
|
||||
queryParams = {
|
||||
favorites: this.activeFilter.status === "favorites" ? true : null,
|
||||
type: this.activeFilter.cipherType,
|
||||
folderId: this.activeFilter.selectedFolderId,
|
||||
collectionId: this.activeFilter.selectedCollectionId,
|
||||
deleted: this.activeFilter.status === "trash" ? true : null,
|
||||
};
|
||||
}
|
||||
|
||||
this.router.navigate([], {
|
||||
relativeTo: this.route,
|
||||
queryParams: queryParams,
|
||||
queryParamsHandling: "merge",
|
||||
replaceUrl: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows backwards compatibility with
|
||||
* old links that used the original `cipherId` param
|
||||
*/
|
||||
const getCipherIdFromParams = (params: Params): string => {
|
||||
return params["itemId"] || params["cipherId"];
|
||||
};
|
||||
Reference in New Issue
Block a user