[Feature] End User Vault Refresh (#2545)
* Initial org filter work * update jslib * Move filter to below cipher length check * don't show vault filter in personal or org folder * Use family icon for families org * jslib and auth guard updates * lint fixes * rename GroupingsComponent to VaultFilterComponent * fix no folder showing all items * Add checks for PersonalOwnership policy * update css class names * lint fixes * cleanup * Some final cleanup * import order lint fix * remove unused import * Use smaller icon for chevron * Update src/popup/vault/organization-filter.component.ts Co-authored-by: Addison Beck <addisonbeck1@gmail.com> * Update src/popup/vault/organization-filter.component.ts Co-authored-by: Addison Beck <addisonbeck1@gmail.com> * fix lint error * remove extra localizations * rename orgFilter -> vaultSelect * Rename orgFilterService to VaultSelectService * lint fixes * combine vault select service with vault filter service * Use base vault filter service methods * Use VaultFilter model and other small fixes * lint fixes * Final restructuring pass * Update jslib and remove extra function * Remove extra imports * remove space * Remove vaultFilterService from background services * Update jslib to latest on feature branch * merge fix * update jslib * [feat] Implement EUVR for desktop Should contain only https://github.com/bitwarden/desktop/pull/1487, with merge resolutions and style fixes * [fix] Delete unused GroupingsComponentTemplate * [dep] Update jslib Co-authored-by: Addison Beck <addisonbeck1@gmail.com>
This commit is contained in:
parent
fd434dfed8
commit
8c12ba20cb
|
@ -1 +1 @@
|
||||||
Subproject commit 9d411fd37d61e5829d26062edab940f2b4578334
|
Subproject commit 141ade3c381cb9ec8e89f15061b92330cb32d403
|
|
@ -55,6 +55,9 @@
|
||||||
"myVault": {
|
"myVault": {
|
||||||
"message": "My Vault"
|
"message": "My Vault"
|
||||||
},
|
},
|
||||||
|
"allVaults": {
|
||||||
|
"message": "All Vaults"
|
||||||
|
},
|
||||||
"tools": {
|
"tools": {
|
||||||
"message": "Tools"
|
"message": "Tools"
|
||||||
},
|
},
|
||||||
|
|
|
@ -85,6 +85,7 @@ import BrowserPlatformUtilsService from "../services/browserPlatformUtils.servic
|
||||||
import BrowserStorageService from "../services/browserStorage.service";
|
import BrowserStorageService from "../services/browserStorage.service";
|
||||||
import I18nService from "../services/i18n.service";
|
import I18nService from "../services/i18n.service";
|
||||||
import { StateService } from "../services/state.service";
|
import { StateService } from "../services/state.service";
|
||||||
|
import { VaultFilterService } from "../services/vaultFilter.service";
|
||||||
import VaultTimeoutService from "../services/vaultTimeout.service";
|
import VaultTimeoutService from "../services/vaultTimeout.service";
|
||||||
|
|
||||||
import CommandsBackground from "./commands.background";
|
import CommandsBackground from "./commands.background";
|
||||||
|
@ -138,6 +139,7 @@ export default class MainBackground {
|
||||||
keyConnectorService: KeyConnectorServiceAbstraction;
|
keyConnectorService: KeyConnectorServiceAbstraction;
|
||||||
userVerificationService: UserVerificationServiceAbstraction;
|
userVerificationService: UserVerificationServiceAbstraction;
|
||||||
twoFactorService: TwoFactorServiceAbstraction;
|
twoFactorService: TwoFactorServiceAbstraction;
|
||||||
|
vaultFilterService: VaultFilterService;
|
||||||
usernameGenerationService: UsernameGenerationServiceAbstraction;
|
usernameGenerationService: UsernameGenerationServiceAbstraction;
|
||||||
|
|
||||||
onUpdatedRan: boolean;
|
onUpdatedRan: boolean;
|
||||||
|
@ -267,6 +269,14 @@ export default class MainBackground {
|
||||||
this.organizationService,
|
this.organizationService,
|
||||||
this.cryptoFunctionService
|
this.cryptoFunctionService
|
||||||
);
|
);
|
||||||
|
this.vaultFilterService = new VaultFilterService(
|
||||||
|
this.stateService,
|
||||||
|
this.organizationService,
|
||||||
|
this.folderService,
|
||||||
|
this.cipherService,
|
||||||
|
this.collectionService,
|
||||||
|
this.policyService
|
||||||
|
);
|
||||||
|
|
||||||
this.twoFactorService = new TwoFactorService(this.i18nService, this.platformUtilsService);
|
this.twoFactorService = new TwoFactorService(this.i18nService, this.platformUtilsService);
|
||||||
|
|
||||||
|
@ -589,6 +599,7 @@ export default class MainBackground {
|
||||||
this.passwordGenerationService.clear(userId),
|
this.passwordGenerationService.clear(userId),
|
||||||
this.vaultTimeoutService.clear(userId),
|
this.vaultTimeoutService.clear(userId),
|
||||||
this.keyConnectorService.clear(),
|
this.keyConnectorService.clear(),
|
||||||
|
this.vaultFilterService.clear(),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
await this.stateService.clean({ userId: userId });
|
await this.stateService.clean({ userId: userId });
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import { Injectable, NgModule } from "@angular/core";
|
import { Injectable, NgModule } from "@angular/core";
|
||||||
import { ActivatedRouteSnapshot, RouteReuseStrategy, RouterModule, Routes } from "@angular/router";
|
import { ActivatedRouteSnapshot, RouteReuseStrategy, RouterModule, Routes } from "@angular/router";
|
||||||
|
|
||||||
import { AuthGuardService } from "jslib-angular/services/auth-guard.service";
|
import { AuthGuard } from "jslib-angular/guards/auth.guard";
|
||||||
import { LockGuardService } from "jslib-angular/services/lock-guard.service";
|
import { LockGuard } from "jslib-angular/guards/lock.guard";
|
||||||
import { UnauthGuardService } from "jslib-angular/services/unauth-guard.service";
|
import { UnauthGuard } from "jslib-angular/guards/unauth.guard";
|
||||||
|
|
||||||
import { EnvironmentComponent } from "./accounts/environment.component";
|
import { EnvironmentComponent } from "./accounts/environment.component";
|
||||||
import { HintComponent } from "./accounts/hint.component";
|
import { HintComponent } from "./accounts/hint.component";
|
||||||
|
@ -37,9 +37,9 @@ import { AttachmentsComponent } from "./vault/attachments.component";
|
||||||
import { CiphersComponent } from "./vault/ciphers.component";
|
import { CiphersComponent } from "./vault/ciphers.component";
|
||||||
import { CollectionsComponent } from "./vault/collections.component";
|
import { CollectionsComponent } from "./vault/collections.component";
|
||||||
import { CurrentTabComponent } from "./vault/current-tab.component";
|
import { CurrentTabComponent } from "./vault/current-tab.component";
|
||||||
import { GroupingsComponent } from "./vault/groupings.component";
|
|
||||||
import { PasswordHistoryComponent } from "./vault/password-history.component";
|
import { PasswordHistoryComponent } from "./vault/password-history.component";
|
||||||
import { ShareComponent } from "./vault/share.component";
|
import { ShareComponent } from "./vault/share.component";
|
||||||
|
import { VaultFilterComponent } from "./vault/vault-filter.component";
|
||||||
import { ViewComponent } from "./vault/view.component";
|
import { ViewComponent } from "./vault/view.component";
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
|
@ -56,37 +56,37 @@ const routes: Routes = [
|
||||||
{
|
{
|
||||||
path: "home",
|
path: "home",
|
||||||
component: HomeComponent,
|
component: HomeComponent,
|
||||||
canActivate: [UnauthGuardService],
|
canActivate: [UnauthGuard],
|
||||||
data: { state: "home" },
|
data: { state: "home" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "login",
|
path: "login",
|
||||||
component: LoginComponent,
|
component: LoginComponent,
|
||||||
canActivate: [UnauthGuardService],
|
canActivate: [UnauthGuard],
|
||||||
data: { state: "login" },
|
data: { state: "login" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "lock",
|
path: "lock",
|
||||||
component: LockComponent,
|
component: LockComponent,
|
||||||
canActivate: [LockGuardService],
|
canActivate: [LockGuard],
|
||||||
data: { state: "lock" },
|
data: { state: "lock" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "2fa",
|
path: "2fa",
|
||||||
component: TwoFactorComponent,
|
component: TwoFactorComponent,
|
||||||
canActivate: [UnauthGuardService],
|
canActivate: [UnauthGuard],
|
||||||
data: { state: "2fa" },
|
data: { state: "2fa" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "2fa-options",
|
path: "2fa-options",
|
||||||
component: TwoFactorOptionsComponent,
|
component: TwoFactorOptionsComponent,
|
||||||
canActivate: [UnauthGuardService],
|
canActivate: [UnauthGuard],
|
||||||
data: { state: "2fa-options" },
|
data: { state: "2fa-options" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "sso",
|
path: "sso",
|
||||||
component: SsoComponent,
|
component: SsoComponent,
|
||||||
canActivate: [UnauthGuardService],
|
canActivate: [UnauthGuard],
|
||||||
data: { state: "sso" },
|
data: { state: "sso" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -97,165 +97,165 @@ const routes: Routes = [
|
||||||
{
|
{
|
||||||
path: "remove-password",
|
path: "remove-password",
|
||||||
component: RemovePasswordComponent,
|
component: RemovePasswordComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "remove-password" },
|
data: { state: "remove-password" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "register",
|
path: "register",
|
||||||
component: RegisterComponent,
|
component: RegisterComponent,
|
||||||
canActivate: [UnauthGuardService],
|
canActivate: [UnauthGuard],
|
||||||
data: { state: "register" },
|
data: { state: "register" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "hint",
|
path: "hint",
|
||||||
component: HintComponent,
|
component: HintComponent,
|
||||||
canActivate: [UnauthGuardService],
|
canActivate: [UnauthGuard],
|
||||||
data: { state: "hint" },
|
data: { state: "hint" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "environment",
|
path: "environment",
|
||||||
component: EnvironmentComponent,
|
component: EnvironmentComponent,
|
||||||
canActivate: [UnauthGuardService],
|
canActivate: [UnauthGuard],
|
||||||
data: { state: "environment" },
|
data: { state: "environment" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "ciphers",
|
path: "ciphers",
|
||||||
component: CiphersComponent,
|
component: CiphersComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "ciphers" },
|
data: { state: "ciphers" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "view-cipher",
|
path: "view-cipher",
|
||||||
component: ViewComponent,
|
component: ViewComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "view-cipher" },
|
data: { state: "view-cipher" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "cipher-password-history",
|
path: "cipher-password-history",
|
||||||
component: PasswordHistoryComponent,
|
component: PasswordHistoryComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "cipher-password-history" },
|
data: { state: "cipher-password-history" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "add-cipher",
|
path: "add-cipher",
|
||||||
component: AddEditComponent,
|
component: AddEditComponent,
|
||||||
canActivate: [AuthGuardService, DebounceNavigationService],
|
canActivate: [AuthGuard, DebounceNavigationService],
|
||||||
data: { state: "add-cipher" },
|
data: { state: "add-cipher" },
|
||||||
runGuardsAndResolvers: "always",
|
runGuardsAndResolvers: "always",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "edit-cipher",
|
path: "edit-cipher",
|
||||||
component: AddEditComponent,
|
component: AddEditComponent,
|
||||||
canActivate: [AuthGuardService, DebounceNavigationService],
|
canActivate: [AuthGuard, DebounceNavigationService],
|
||||||
data: { state: "edit-cipher" },
|
data: { state: "edit-cipher" },
|
||||||
runGuardsAndResolvers: "always",
|
runGuardsAndResolvers: "always",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "share-cipher",
|
path: "share-cipher",
|
||||||
component: ShareComponent,
|
component: ShareComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "share-cipher" },
|
data: { state: "share-cipher" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "collections",
|
path: "collections",
|
||||||
component: CollectionsComponent,
|
component: CollectionsComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "collections" },
|
data: { state: "collections" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "attachments",
|
path: "attachments",
|
||||||
component: AttachmentsComponent,
|
component: AttachmentsComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "attachments" },
|
data: { state: "attachments" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "generator",
|
path: "generator",
|
||||||
component: GeneratorComponent,
|
component: GeneratorComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "generator" },
|
data: { state: "generator" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "generator-history",
|
path: "generator-history",
|
||||||
component: PasswordGeneratorHistoryComponent,
|
component: PasswordGeneratorHistoryComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "generator-history" },
|
data: { state: "generator-history" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "export",
|
path: "export",
|
||||||
component: ExportComponent,
|
component: ExportComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "export" },
|
data: { state: "export" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "folders",
|
path: "folders",
|
||||||
component: FoldersComponent,
|
component: FoldersComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "folders" },
|
data: { state: "folders" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "add-folder",
|
path: "add-folder",
|
||||||
component: FolderAddEditComponent,
|
component: FolderAddEditComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "add-folder" },
|
data: { state: "add-folder" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "edit-folder",
|
path: "edit-folder",
|
||||||
component: FolderAddEditComponent,
|
component: FolderAddEditComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "edit-folder" },
|
data: { state: "edit-folder" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "sync",
|
path: "sync",
|
||||||
component: SyncComponent,
|
component: SyncComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "sync" },
|
data: { state: "sync" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "excluded-domains",
|
path: "excluded-domains",
|
||||||
component: ExcludedDomainsComponent,
|
component: ExcludedDomainsComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "excluded-domains" },
|
data: { state: "excluded-domains" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "premium",
|
path: "premium",
|
||||||
component: PremiumComponent,
|
component: PremiumComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "premium" },
|
data: { state: "premium" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "options",
|
path: "options",
|
||||||
component: OptionsComponent,
|
component: OptionsComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "options" },
|
data: { state: "options" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "clone-cipher",
|
path: "clone-cipher",
|
||||||
component: AddEditComponent,
|
component: AddEditComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "clone-cipher" },
|
data: { state: "clone-cipher" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "send-type",
|
path: "send-type",
|
||||||
component: SendTypeComponent,
|
component: SendTypeComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "send-type" },
|
data: { state: "send-type" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "add-send",
|
path: "add-send",
|
||||||
component: SendAddEditComponent,
|
component: SendAddEditComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "add-send" },
|
data: { state: "add-send" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "edit-send",
|
path: "edit-send",
|
||||||
component: SendAddEditComponent,
|
component: SendAddEditComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "edit-send" },
|
data: { state: "edit-send" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "update-temp-password",
|
path: "update-temp-password",
|
||||||
component: UpdateTempPasswordComponent,
|
component: UpdateTempPasswordComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "update-temp-password" },
|
data: { state: "update-temp-password" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -271,32 +271,32 @@ const routes: Routes = [
|
||||||
{
|
{
|
||||||
path: "current",
|
path: "current",
|
||||||
component: CurrentTabComponent,
|
component: CurrentTabComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "tabs_current" },
|
data: { state: "tabs_current" },
|
||||||
runGuardsAndResolvers: "always",
|
runGuardsAndResolvers: "always",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "vault",
|
path: "vault",
|
||||||
component: GroupingsComponent,
|
component: VaultFilterComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "tabs_vault" },
|
data: { state: "tabs_vault" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "generator",
|
path: "generator",
|
||||||
component: GeneratorComponent,
|
component: GeneratorComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "tabs_generator" },
|
data: { state: "tabs_generator" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "settings",
|
path: "settings",
|
||||||
component: SettingsComponent,
|
component: SettingsComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "tabs_settings" },
|
data: { state: "tabs_settings" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "send",
|
path: "send",
|
||||||
component: SendGroupingsComponent,
|
component: SendGroupingsComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { state: "tabs_send" },
|
data: { state: "tabs_send" },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { A11yModule } from "@angular/cdk/a11y";
|
import { A11yModule } from "@angular/cdk/a11y";
|
||||||
import { DragDropModule } from "@angular/cdk/drag-drop";
|
import { DragDropModule } from "@angular/cdk/drag-drop";
|
||||||
|
import { OverlayModule } from "@angular/cdk/overlay";
|
||||||
import { ScrollingModule } from "@angular/cdk/scrolling";
|
import { ScrollingModule } from "@angular/cdk/scrolling";
|
||||||
import { CurrencyPipe, DatePipe, registerLocaleData } from "@angular/common";
|
import { CurrencyPipe, DatePipe, registerLocaleData } from "@angular/common";
|
||||||
import localeAz from "@angular/common/locales/az";
|
import localeAz from "@angular/common/locales/az";
|
||||||
|
@ -106,9 +107,10 @@ import { AttachmentsComponent } from "./vault/attachments.component";
|
||||||
import { CiphersComponent } from "./vault/ciphers.component";
|
import { CiphersComponent } from "./vault/ciphers.component";
|
||||||
import { CollectionsComponent } from "./vault/collections.component";
|
import { CollectionsComponent } from "./vault/collections.component";
|
||||||
import { CurrentTabComponent } from "./vault/current-tab.component";
|
import { CurrentTabComponent } from "./vault/current-tab.component";
|
||||||
import { GroupingsComponent } from "./vault/groupings.component";
|
|
||||||
import { PasswordHistoryComponent } from "./vault/password-history.component";
|
import { PasswordHistoryComponent } from "./vault/password-history.component";
|
||||||
import { ShareComponent } from "./vault/share.component";
|
import { ShareComponent } from "./vault/share.component";
|
||||||
|
import { VaultFilterComponent } from "./vault/vault-filter.component";
|
||||||
|
import { VaultSelectComponent } from "./vault/vault-select.component";
|
||||||
import { ViewCustomFieldsComponent } from "./vault/view-custom-fields.component";
|
import { ViewCustomFieldsComponent } from "./vault/view-custom-fields.component";
|
||||||
import { ViewComponent } from "./vault/view.component";
|
import { ViewComponent } from "./vault/view.component";
|
||||||
|
|
||||||
|
@ -179,6 +181,7 @@ registerLocaleData(localeZhTw, "zh-TW");
|
||||||
DragDropModule,
|
DragDropModule,
|
||||||
FormsModule,
|
FormsModule,
|
||||||
JslibModule,
|
JslibModule,
|
||||||
|
OverlayModule,
|
||||||
ReactiveFormsModule,
|
ReactiveFormsModule,
|
||||||
ScrollingModule,
|
ScrollingModule,
|
||||||
ServicesModule,
|
ServicesModule,
|
||||||
|
@ -198,7 +201,7 @@ registerLocaleData(localeZhTw, "zh-TW");
|
||||||
ExportComponent,
|
ExportComponent,
|
||||||
FolderAddEditComponent,
|
FolderAddEditComponent,
|
||||||
FoldersComponent,
|
FoldersComponent,
|
||||||
GroupingsComponent,
|
VaultFilterComponent,
|
||||||
HintComponent,
|
HintComponent,
|
||||||
HomeComponent,
|
HomeComponent,
|
||||||
LockComponent,
|
LockComponent,
|
||||||
|
@ -232,6 +235,7 @@ registerLocaleData(localeZhTw, "zh-TW");
|
||||||
ViewComponent,
|
ViewComponent,
|
||||||
ViewCustomFieldsComponent,
|
ViewCustomFieldsComponent,
|
||||||
RemovePasswordComponent,
|
RemovePasswordComponent,
|
||||||
|
VaultSelectComponent,
|
||||||
],
|
],
|
||||||
entryComponents: [],
|
entryComponents: [],
|
||||||
providers: [CurrencyPipe, DatePipe],
|
providers: [CurrencyPipe, DatePipe],
|
||||||
|
|
|
@ -465,3 +465,59 @@ main {
|
||||||
.cdk-virtual-scroll-content-wrapper {
|
.cdk-virtual-scroll-content-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.org-filter-content {
|
||||||
|
padding-bottom: 5px;
|
||||||
|
padding-left: 7px;
|
||||||
|
.org-filter {
|
||||||
|
@include themify($themes) {
|
||||||
|
background-color: themed("backgroundColor");
|
||||||
|
}
|
||||||
|
border: 1px solid;
|
||||||
|
padding: 7px;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.vault-select {
|
||||||
|
@include themify($themes) {
|
||||||
|
background-color: themed("boxBackgroundColor");
|
||||||
|
}
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-top: 1px;
|
||||||
|
width: 160px;
|
||||||
|
@include themify($themes) {
|
||||||
|
border: 1px solid themed("borderColor");
|
||||||
|
}
|
||||||
|
border-radius: $border-radius;
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px 10px;
|
||||||
|
text-align: start;
|
||||||
|
@include themify($themes) {
|
||||||
|
color: themed("textColor");
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
@include themify($themes) {
|
||||||
|
color: themed("textColor");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@include themify($themes) {
|
||||||
|
background-color: themed("boxBackgroundHoverColor");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.border {
|
||||||
|
@include themify($themes) {
|
||||||
|
background: themed("borderColor");
|
||||||
|
}
|
||||||
|
left: 10px;
|
||||||
|
width: calc(100% - 20px);
|
||||||
|
height: 1px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -11,3 +11,4 @@
|
||||||
@import "plugins.scss";
|
@import "plugins.scss";
|
||||||
@import "environment.scss";
|
@import "environment.scss";
|
||||||
@import "pages.scss";
|
@import "pages.scss";
|
||||||
|
@import "~@angular/cdk/overlay-prebuilt.css";
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { Injectable } from "@angular/core";
|
import { Injectable } from "@angular/core";
|
||||||
|
|
||||||
import { LockGuardService as BaseLockGuardService } from "jslib-angular/services/lock-guard.service";
|
import { LockGuard as BaseLockGuardService } from "jslib-angular/guards/lock.guard";
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class LockGuardService extends BaseLockGuardService {
|
export class LockGuardService extends BaseLockGuardService {
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { APP_INITIALIZER, LOCALE_ID, NgModule } from "@angular/core";
|
import { APP_INITIALIZER, LOCALE_ID, NgModule } from "@angular/core";
|
||||||
|
|
||||||
|
import { LockGuard as BaseLockGuardService } from "jslib-angular/guards/lock.guard";
|
||||||
|
import { UnauthGuard as BaseUnauthGuardService } from "jslib-angular/guards/unauth.guard";
|
||||||
import { JslibServicesModule, SECURE_STORAGE } from "jslib-angular/services/jslib-services.module";
|
import { JslibServicesModule, SECURE_STORAGE } from "jslib-angular/services/jslib-services.module";
|
||||||
import { LockGuardService as BaseLockGuardService } from "jslib-angular/services/lock-guard.service";
|
|
||||||
import { UnauthGuardService as BaseUnauthGuardService } from "jslib-angular/services/unauth-guard.service";
|
|
||||||
import { ApiService } from "jslib-common/abstractions/api.service";
|
import { ApiService } from "jslib-common/abstractions/api.service";
|
||||||
import { AppIdService } from "jslib-common/abstractions/appId.service";
|
import { AppIdService } from "jslib-common/abstractions/appId.service";
|
||||||
import { AuditService } from "jslib-common/abstractions/audit.service";
|
import { AuditService } from "jslib-common/abstractions/audit.service";
|
||||||
|
@ -49,6 +49,7 @@ import { AutofillService } from "../../services/abstractions/autofill.service";
|
||||||
import { StateService as StateServiceAbstraction } from "../../services/abstractions/state.service";
|
import { StateService as StateServiceAbstraction } from "../../services/abstractions/state.service";
|
||||||
import BrowserMessagingService from "../../services/browserMessaging.service";
|
import BrowserMessagingService from "../../services/browserMessaging.service";
|
||||||
import BrowserMessagingPrivateModePopupService from "../../services/browserMessagingPrivateModePopup.service";
|
import BrowserMessagingPrivateModePopupService from "../../services/browserMessagingPrivateModePopup.service";
|
||||||
|
import { VaultFilterService } from "../../services/vaultFilter.service";
|
||||||
|
|
||||||
import { DebounceNavigationService } from "./debounceNavigationService";
|
import { DebounceNavigationService } from "./debounceNavigationService";
|
||||||
import { InitService } from "./init.service";
|
import { InitService } from "./init.service";
|
||||||
|
@ -224,6 +225,20 @@ function getBgService<T>(service: keyof MainBackground) {
|
||||||
useFactory: getBgService<OrganizationService>("organizationService"),
|
useFactory: getBgService<OrganizationService>("organizationService"),
|
||||||
deps: [],
|
deps: [],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
provide: VaultFilterService,
|
||||||
|
useFactory: () => {
|
||||||
|
return new VaultFilterService(
|
||||||
|
getBgService<StateServiceAbstraction>("stateService")(),
|
||||||
|
getBgService<OrganizationService>("organizationService")(),
|
||||||
|
getBgService<FolderService>("folderService")(),
|
||||||
|
getBgService<CipherService>("cipherService")(),
|
||||||
|
getBgService<CollectionService>("collectionService")(),
|
||||||
|
getBgService<PolicyService>("policyService")()
|
||||||
|
);
|
||||||
|
},
|
||||||
|
deps: [],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
provide: ProviderService,
|
provide: ProviderService,
|
||||||
useFactory: getBgService<ProviderService>("providerService"),
|
useFactory: getBgService<ProviderService>("providerService"),
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { Injectable } from "@angular/core";
|
import { Injectable } from "@angular/core";
|
||||||
|
|
||||||
import { UnauthGuardService as BaseUnauthGuardService } from "jslib-angular/services/unauth-guard.service";
|
import { UnauthGuard as BaseUnauthGuardService } from "jslib-angular/guards/unauth.guard";
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class UnauthGuardService extends BaseUnauthGuardService {
|
export class UnauthGuardService extends BaseUnauthGuardService {
|
||||||
|
|
|
@ -26,6 +26,10 @@
|
||||||
</header>
|
</header>
|
||||||
<main tabindex="-1" [ngClass]="{ 'stacked-boxes': showGroupings() }">
|
<main tabindex="-1" [ngClass]="{ 'stacked-boxes': showGroupings() }">
|
||||||
<ng-container *ngIf="showGroupings()">
|
<ng-container *ngIf="showGroupings()">
|
||||||
|
<app-vault-select
|
||||||
|
*ngIf="showVaultFilter"
|
||||||
|
(onVaultSelectionChanged)="changeVaultSelection()"
|
||||||
|
></app-vault-select>
|
||||||
<div class="box list" *ngIf="nestedFolders && nestedFolders.length">
|
<div class="box list" *ngIf="nestedFolders && nestedFolders.length">
|
||||||
<h2 class="box-header">
|
<h2 class="box-header">
|
||||||
{{ "folders" | i18n }}
|
{{ "folders" | i18n }}
|
||||||
|
@ -89,7 +93,10 @@
|
||||||
maxBufferPx="600"
|
maxBufferPx="600"
|
||||||
*ngIf="ciphers.length"
|
*ngIf="ciphers.length"
|
||||||
#virtualScrollViewport
|
#virtualScrollViewport
|
||||||
>
|
><app-vault-select
|
||||||
|
*ngIf="showVaultFilter && !showGroupings()"
|
||||||
|
(onVaultSelectionChanged)="changeVaultSelection()"
|
||||||
|
></app-vault-select>
|
||||||
<div class="box list only-list">
|
<div class="box list only-list">
|
||||||
<h2 class="box-header">
|
<h2 class="box-header">
|
||||||
{{ groupingTitle }}
|
{{ groupingTitle }}
|
||||||
|
|
|
@ -4,11 +4,13 @@ import { ActivatedRoute, Router } from "@angular/router";
|
||||||
import { first } from "rxjs/operators";
|
import { first } from "rxjs/operators";
|
||||||
|
|
||||||
import { CiphersComponent as BaseCiphersComponent } from "jslib-angular/components/ciphers.component";
|
import { CiphersComponent as BaseCiphersComponent } from "jslib-angular/components/ciphers.component";
|
||||||
|
import { VaultFilter } from "jslib-angular/modules/vault-filter/models/vault-filter.model";
|
||||||
import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
|
import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
|
||||||
import { CipherService } from "jslib-common/abstractions/cipher.service";
|
import { CipherService } from "jslib-common/abstractions/cipher.service";
|
||||||
import { CollectionService } from "jslib-common/abstractions/collection.service";
|
import { CollectionService } from "jslib-common/abstractions/collection.service";
|
||||||
import { FolderService } from "jslib-common/abstractions/folder.service";
|
import { FolderService } from "jslib-common/abstractions/folder.service";
|
||||||
import { I18nService } from "jslib-common/abstractions/i18n.service";
|
import { I18nService } from "jslib-common/abstractions/i18n.service";
|
||||||
|
import { OrganizationService } from "jslib-common/abstractions/organization.service";
|
||||||
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
|
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
|
||||||
import { SearchService } from "jslib-common/abstractions/search.service";
|
import { SearchService } from "jslib-common/abstractions/search.service";
|
||||||
import { CipherType } from "jslib-common/enums/cipherType";
|
import { CipherType } from "jslib-common/enums/cipherType";
|
||||||
|
@ -21,6 +23,7 @@ import { BrowserComponentState } from "src/models/browserComponentState";
|
||||||
|
|
||||||
import { BrowserApi } from "../../browser/browserApi";
|
import { BrowserApi } from "../../browser/browserApi";
|
||||||
import { StateService } from "../../services/abstractions/state.service";
|
import { StateService } from "../../services/abstractions/state.service";
|
||||||
|
import { VaultFilterService } from "../../services/vaultFilter.service";
|
||||||
import { PopupUtilsService } from "../services/popup-utils.service";
|
import { PopupUtilsService } from "../services/popup-utils.service";
|
||||||
|
|
||||||
const ComponentId = "CiphersComponent";
|
const ComponentId = "CiphersComponent";
|
||||||
|
@ -38,6 +41,11 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
|
||||||
nestedFolders: TreeNode<FolderView>[];
|
nestedFolders: TreeNode<FolderView>[];
|
||||||
nestedCollections: TreeNode<CollectionView>[];
|
nestedCollections: TreeNode<CollectionView>[];
|
||||||
searchTypeSearch = false;
|
searchTypeSearch = false;
|
||||||
|
showOrganizations = false;
|
||||||
|
vaultFilter: VaultFilter;
|
||||||
|
deleted = true;
|
||||||
|
noneFolder = false;
|
||||||
|
showVaultFilter = false;
|
||||||
|
|
||||||
private selectedTimeout: number;
|
private selectedTimeout: number;
|
||||||
private preventSelected = false;
|
private preventSelected = false;
|
||||||
|
@ -46,6 +54,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
searchService: SearchService,
|
searchService: SearchService,
|
||||||
|
private organizationService: OrganizationService,
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
private router: Router,
|
private router: Router,
|
||||||
private location: Location,
|
private location: Location,
|
||||||
|
@ -58,7 +67,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
|
||||||
private folderService: FolderService,
|
private folderService: FolderService,
|
||||||
private collectionService: CollectionService,
|
private collectionService: CollectionService,
|
||||||
private platformUtilsService: PlatformUtilsService,
|
private platformUtilsService: PlatformUtilsService,
|
||||||
private cipherService: CipherService
|
private cipherService: CipherService,
|
||||||
|
private vaultFilterService: VaultFilterService
|
||||||
) {
|
) {
|
||||||
super(searchService);
|
super(searchService);
|
||||||
this.applySavedState =
|
this.applySavedState =
|
||||||
|
@ -68,6 +78,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
|
||||||
|
|
||||||
async ngOnInit() {
|
async ngOnInit() {
|
||||||
this.searchTypeSearch = !this.platformUtilsService.isSafari();
|
this.searchTypeSearch = !this.platformUtilsService.isSafari();
|
||||||
|
this.showOrganizations = await this.organizationService.hasOrganizations();
|
||||||
|
this.vaultFilter = this.vaultFilterService.getVaultFilter();
|
||||||
this.route.queryParams.pipe(first()).subscribe(async (params) => {
|
this.route.queryParams.pipe(first()).subscribe(async (params) => {
|
||||||
if (this.applySavedState) {
|
if (this.applySavedState) {
|
||||||
this.state = await this.stateService.getBrowserCipherComponentState();
|
this.state = await this.stateService.getBrowserCipherComponentState();
|
||||||
|
@ -77,10 +89,12 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
|
||||||
}
|
}
|
||||||
|
|
||||||
if (params.deleted) {
|
if (params.deleted) {
|
||||||
|
this.showVaultFilter = true;
|
||||||
this.groupingTitle = this.i18nService.t("trash");
|
this.groupingTitle = this.i18nService.t("trash");
|
||||||
this.searchPlaceholder = this.i18nService.t("searchTrash");
|
this.searchPlaceholder = this.i18nService.t("searchTrash");
|
||||||
await this.load(null, true);
|
await this.load(this.buildFilter(), true);
|
||||||
} else if (params.type) {
|
} else if (params.type) {
|
||||||
|
this.showVaultFilter = true;
|
||||||
this.searchPlaceholder = this.i18nService.t("searchType");
|
this.searchPlaceholder = this.i18nService.t("searchType");
|
||||||
this.type = parseInt(params.type, null);
|
this.type = parseInt(params.type, null);
|
||||||
switch (this.type) {
|
switch (this.type) {
|
||||||
|
@ -99,11 +113,13 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
await this.load((c) => c.type === this.type);
|
await this.load(this.buildFilter());
|
||||||
} else if (params.folderId) {
|
} else if (params.folderId) {
|
||||||
|
this.showVaultFilter = false;
|
||||||
this.folderId = params.folderId === "none" ? null : params.folderId;
|
this.folderId = params.folderId === "none" ? null : params.folderId;
|
||||||
this.searchPlaceholder = this.i18nService.t("searchFolder");
|
this.searchPlaceholder = this.i18nService.t("searchFolder");
|
||||||
if (this.folderId != null) {
|
if (this.folderId != null) {
|
||||||
|
this.showOrganizations = false;
|
||||||
const folderNode = await this.folderService.getNested(this.folderId);
|
const folderNode = await this.folderService.getNested(this.folderId);
|
||||||
if (folderNode != null && folderNode.node != null) {
|
if (folderNode != null && folderNode.node != null) {
|
||||||
this.groupingTitle = folderNode.node.name;
|
this.groupingTitle = folderNode.node.name;
|
||||||
|
@ -113,10 +129,12 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
|
||||||
: null;
|
: null;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
this.noneFolder = true;
|
||||||
this.groupingTitle = this.i18nService.t("noneFolder");
|
this.groupingTitle = this.i18nService.t("noneFolder");
|
||||||
}
|
}
|
||||||
await this.load((c) => c.folderId === this.folderId);
|
await this.load(this.buildFilter());
|
||||||
} else if (params.collectionId) {
|
} else if (params.collectionId) {
|
||||||
|
this.showVaultFilter = false;
|
||||||
this.collectionId = params.collectionId;
|
this.collectionId = params.collectionId;
|
||||||
this.searchPlaceholder = this.i18nService.t("searchCollection");
|
this.searchPlaceholder = this.i18nService.t("searchCollection");
|
||||||
const collectionNode = await this.collectionService.getNested(this.collectionId);
|
const collectionNode = await this.collectionService.getNested(this.collectionId);
|
||||||
|
@ -131,8 +149,9 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
|
||||||
(c) => c.collectionIds != null && c.collectionIds.indexOf(this.collectionId) > -1
|
(c) => c.collectionIds != null && c.collectionIds.indexOf(this.collectionId) > -1
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
|
this.showVaultFilter = true;
|
||||||
this.groupingTitle = this.i18nService.t("allItems");
|
this.groupingTitle = this.i18nService.t("allItems");
|
||||||
await this.load();
|
await this.load(this.buildFilter());
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.applySavedState && this.state != null) {
|
if (this.applySavedState && this.state != null) {
|
||||||
|
@ -232,6 +251,40 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async changeVaultSelection() {
|
||||||
|
this.vaultFilter = this.vaultFilterService.getVaultFilter();
|
||||||
|
await this.load(this.buildFilter(), this.deleted);
|
||||||
|
}
|
||||||
|
|
||||||
|
private buildFilter(): (cipher: CipherView) => boolean {
|
||||||
|
return (cipher) => {
|
||||||
|
let cipherPassesFilter = true;
|
||||||
|
if (this.deleted && cipherPassesFilter) {
|
||||||
|
cipherPassesFilter = cipher.isDeleted;
|
||||||
|
}
|
||||||
|
if (this.type != null && cipherPassesFilter) {
|
||||||
|
cipherPassesFilter = cipher.type === this.type;
|
||||||
|
}
|
||||||
|
if (this.folderId != null && this.folderId != "none" && cipherPassesFilter) {
|
||||||
|
cipherPassesFilter = cipher.folderId === this.folderId;
|
||||||
|
}
|
||||||
|
if (this.noneFolder) {
|
||||||
|
cipherPassesFilter = cipher.folderId == null;
|
||||||
|
}
|
||||||
|
if (this.collectionId != null && cipherPassesFilter) {
|
||||||
|
cipherPassesFilter =
|
||||||
|
cipher.collectionIds != null && cipher.collectionIds.indexOf(this.collectionId) > -1;
|
||||||
|
}
|
||||||
|
if (this.vaultFilter.selectedOrganizationId != null && cipherPassesFilter) {
|
||||||
|
cipherPassesFilter = cipher.organizationId === this.vaultFilter.selectedOrganizationId;
|
||||||
|
}
|
||||||
|
if (this.vaultFilter.myVaultOnly && cipherPassesFilter) {
|
||||||
|
cipherPassesFilter = cipher.organizationId === null;
|
||||||
|
}
|
||||||
|
return cipherPassesFilter;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
private async saveState() {
|
private async saveState() {
|
||||||
this.state = {
|
this.state = {
|
||||||
scrollY: this.popupUtils.getContentScrollY(window, this.scrollingContainer),
|
scrollY: this.popupUtils.getContentScrollY(window, this.scrollingContainer),
|
||||||
|
|
|
@ -35,6 +35,7 @@
|
||||||
<i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
|
<i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
|
||||||
</div>
|
</div>
|
||||||
<ng-container *ngIf="loaded">
|
<ng-container *ngIf="loaded">
|
||||||
|
<app-vault-select (onVaultSelectionChanged)="load()"></app-vault-select>
|
||||||
<div class="box list" *ngIf="loginCiphers">
|
<div class="box list" *ngIf="loginCiphers">
|
||||||
<h2 class="box-header">
|
<h2 class="box-header">
|
||||||
{{ "typeLogins" | i18n }}
|
{{ "typeLogins" | i18n }}
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { Router } from "@angular/router";
|
||||||
import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
|
import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
|
||||||
import { CipherService } from "jslib-common/abstractions/cipher.service";
|
import { CipherService } from "jslib-common/abstractions/cipher.service";
|
||||||
import { I18nService } from "jslib-common/abstractions/i18n.service";
|
import { I18nService } from "jslib-common/abstractions/i18n.service";
|
||||||
|
import { OrganizationService } from "jslib-common/abstractions/organization.service";
|
||||||
import { PasswordRepromptService } from "jslib-common/abstractions/passwordReprompt.service";
|
import { PasswordRepromptService } from "jslib-common/abstractions/passwordReprompt.service";
|
||||||
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
|
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
|
||||||
import { SearchService } from "jslib-common/abstractions/search.service";
|
import { SearchService } from "jslib-common/abstractions/search.service";
|
||||||
|
@ -16,6 +17,7 @@ import { CipherView } from "jslib-common/models/view/cipherView";
|
||||||
|
|
||||||
import { BrowserApi } from "../../browser/browserApi";
|
import { BrowserApi } from "../../browser/browserApi";
|
||||||
import { AutofillService } from "../../services/abstractions/autofill.service";
|
import { AutofillService } from "../../services/abstractions/autofill.service";
|
||||||
|
import { VaultFilterService } from "../../services/vaultFilter.service";
|
||||||
import { PopupUtilsService } from "../services/popup-utils.service";
|
import { PopupUtilsService } from "../services/popup-utils.service";
|
||||||
|
|
||||||
const BroadcasterSubscriptionId = "CurrentTabComponent";
|
const BroadcasterSubscriptionId = "CurrentTabComponent";
|
||||||
|
@ -35,6 +37,7 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
|
||||||
inSidebar = false;
|
inSidebar = false;
|
||||||
searchTypeSearch = false;
|
searchTypeSearch = false;
|
||||||
loaded = false;
|
loaded = false;
|
||||||
|
showOrganizations = false;
|
||||||
|
|
||||||
private totpCode: string;
|
private totpCode: string;
|
||||||
private totpTimeout: number;
|
private totpTimeout: number;
|
||||||
|
@ -54,7 +57,9 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
|
||||||
private syncService: SyncService,
|
private syncService: SyncService,
|
||||||
private searchService: SearchService,
|
private searchService: SearchService,
|
||||||
private stateService: StateService,
|
private stateService: StateService,
|
||||||
private passwordRepromptService: PasswordRepromptService
|
private passwordRepromptService: PasswordRepromptService,
|
||||||
|
private organizationService: OrganizationService,
|
||||||
|
private vaultFilterService: VaultFilterService
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
async ngOnInit() {
|
async ngOnInit() {
|
||||||
|
@ -184,6 +189,7 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
|
||||||
}
|
}
|
||||||
|
|
||||||
private async load() {
|
private async load() {
|
||||||
|
this.loaded = false;
|
||||||
const tab = await BrowserApi.getTabFromCurrentWindow();
|
const tab = await BrowserApi.getTabFromCurrentWindow();
|
||||||
if (tab != null) {
|
if (tab != null) {
|
||||||
this.url = tab.url;
|
this.url = tab.url;
|
||||||
|
@ -204,6 +210,7 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
|
||||||
const otherTypes: CipherType[] = [];
|
const otherTypes: CipherType[] = [];
|
||||||
const dontShowCards = await this.stateService.getDontShowCardsCurrentTab();
|
const dontShowCards = await this.stateService.getDontShowCardsCurrentTab();
|
||||||
const dontShowIdentities = await this.stateService.getDontShowIdentitiesCurrentTab();
|
const dontShowIdentities = await this.stateService.getDontShowIdentitiesCurrentTab();
|
||||||
|
this.showOrganizations = await this.organizationService.hasOrganizations();
|
||||||
if (!dontShowCards) {
|
if (!dontShowCards) {
|
||||||
otherTypes.push(CipherType.Card);
|
otherTypes.push(CipherType.Card);
|
||||||
}
|
}
|
||||||
|
@ -221,18 +228,20 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
|
||||||
this.identityCiphers = [];
|
this.identityCiphers = [];
|
||||||
|
|
||||||
ciphers.forEach((c) => {
|
ciphers.forEach((c) => {
|
||||||
switch (c.type) {
|
if (!this.vaultFilterService.filterCipherForSelectedVault(c)) {
|
||||||
case CipherType.Login:
|
switch (c.type) {
|
||||||
this.loginCiphers.push(c);
|
case CipherType.Login:
|
||||||
break;
|
this.loginCiphers.push(c);
|
||||||
case CipherType.Card:
|
break;
|
||||||
this.cardCiphers.push(c);
|
case CipherType.Card:
|
||||||
break;
|
this.cardCiphers.push(c);
|
||||||
case CipherType.Identity:
|
break;
|
||||||
this.identityCiphers.push(c);
|
case CipherType.Identity:
|
||||||
break;
|
this.identityCiphers.push(c);
|
||||||
default:
|
break;
|
||||||
break;
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -33,6 +33,7 @@
|
||||||
</button>
|
</button>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
|
<app-vault-select (onVaultSelectionChanged)="vaultFilterChanged()"></app-vault-select>
|
||||||
<ng-container *ngIf="ciphers && ciphers.length && !showSearching()">
|
<ng-container *ngIf="ciphers && ciphers.length && !showSearching()">
|
||||||
<div class="box list" *ngIf="favoriteCiphers">
|
<div class="box list" *ngIf="favoriteCiphers">
|
||||||
<h2 class="box-header">
|
<h2 class="box-header">
|
||||||
|
@ -114,7 +115,7 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box list" *ngIf="nestedFolders?.length">
|
<div class="box list" *ngIf="!selectedOrganization && nestedFolders?.length">
|
||||||
<h2 class="box-header">
|
<h2 class="box-header">
|
||||||
{{ "folders" | i18n }}
|
{{ "folders" | i18n }}
|
||||||
<span class="flex-right">{{ folderCount }}</span>
|
<span class="flex-right">{{ folderCount }}</span>
|
||||||
|
@ -139,7 +140,7 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box list" *ngIf="nestedCollections && nestedCollections.length">
|
<div class="box list" *ngIf="showCollections && nestedCollections && nestedCollections.length">
|
||||||
<h2 class="box-header">
|
<h2 class="box-header">
|
||||||
{{ "collections" | i18n }}
|
{{ "collections" | i18n }}
|
||||||
<span class="flex-right">{{ nestedCollections.length }}</span>
|
<span class="flex-right">{{ nestedCollections.length }}</span>
|
|
@ -3,15 +3,14 @@ import { ChangeDetectorRef, Component, NgZone, OnDestroy, OnInit } from "@angula
|
||||||
import { ActivatedRoute, Router } from "@angular/router";
|
import { ActivatedRoute, Router } from "@angular/router";
|
||||||
import { first } from "rxjs/operators";
|
import { first } from "rxjs/operators";
|
||||||
|
|
||||||
import { GroupingsComponent as BaseGroupingsComponent } from "jslib-angular/components/groupings.component";
|
import { VaultFilter } from "jslib-angular/modules/vault-filter/models/vault-filter.model";
|
||||||
import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
|
import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
|
||||||
import { CipherService } from "jslib-common/abstractions/cipher.service";
|
import { CipherService } from "jslib-common/abstractions/cipher.service";
|
||||||
import { CollectionService } from "jslib-common/abstractions/collection.service";
|
|
||||||
import { FolderService } from "jslib-common/abstractions/folder.service";
|
|
||||||
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
|
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
|
||||||
import { SearchService } from "jslib-common/abstractions/search.service";
|
import { SearchService } from "jslib-common/abstractions/search.service";
|
||||||
import { SyncService } from "jslib-common/abstractions/sync.service";
|
import { SyncService } from "jslib-common/abstractions/sync.service";
|
||||||
import { CipherType } from "jslib-common/enums/cipherType";
|
import { CipherType } from "jslib-common/enums/cipherType";
|
||||||
|
import { TreeNode } from "jslib-common/models/domain/treeNode";
|
||||||
import { CipherView } from "jslib-common/models/view/cipherView";
|
import { CipherView } from "jslib-common/models/view/cipherView";
|
||||||
import { CollectionView } from "jslib-common/models/view/collectionView";
|
import { CollectionView } from "jslib-common/models/view/collectionView";
|
||||||
import { FolderView } from "jslib-common/models/view/folderView";
|
import { FolderView } from "jslib-common/models/view/folderView";
|
||||||
|
@ -20,15 +19,16 @@ import { BrowserGroupingsComponentState } from "src/models/browserGroupingsCompo
|
||||||
|
|
||||||
import { BrowserApi } from "../../browser/browserApi";
|
import { BrowserApi } from "../../browser/browserApi";
|
||||||
import { StateService } from "../../services/abstractions/state.service";
|
import { StateService } from "../../services/abstractions/state.service";
|
||||||
|
import { VaultFilterService } from "../../services/vaultFilter.service";
|
||||||
import { PopupUtilsService } from "../services/popup-utils.service";
|
import { PopupUtilsService } from "../services/popup-utils.service";
|
||||||
|
|
||||||
const ComponentId = "GroupingsComponent";
|
const ComponentId = "VaultComponent";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: "app-vault-groupings",
|
selector: "app-vault-filter",
|
||||||
templateUrl: "groupings.component.html",
|
templateUrl: "vault-filter.component.html",
|
||||||
})
|
})
|
||||||
export class GroupingsComponent extends BaseGroupingsComponent implements OnInit, OnDestroy {
|
export class VaultFilterComponent implements OnInit, OnDestroy {
|
||||||
get showNoFolderCiphers(): boolean {
|
get showNoFolderCiphers(): boolean {
|
||||||
return (
|
return (
|
||||||
this.noFolderCiphers != null &&
|
this.noFolderCiphers != null &&
|
||||||
|
@ -40,6 +40,12 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
|
||||||
get folderCount(): number {
|
get folderCount(): number {
|
||||||
return this.nestedFolders.length - (this.showNoFolderCiphers ? 0 : 1);
|
return this.nestedFolders.length - (this.showNoFolderCiphers ? 0 : 1);
|
||||||
}
|
}
|
||||||
|
folders: FolderView[];
|
||||||
|
nestedFolders: TreeNode<FolderView>[];
|
||||||
|
collections: CollectionView[];
|
||||||
|
nestedCollections: TreeNode<CollectionView>[];
|
||||||
|
loaded = false;
|
||||||
|
cipherType = CipherType;
|
||||||
ciphers: CipherView[];
|
ciphers: CipherView[];
|
||||||
favoriteCiphers: CipherView[];
|
favoriteCiphers: CipherView[];
|
||||||
noFolderCiphers: CipherView[];
|
noFolderCiphers: CipherView[];
|
||||||
|
@ -52,6 +58,9 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
|
||||||
searchPending = false;
|
searchPending = false;
|
||||||
searchTypeSearch = false;
|
searchTypeSearch = false;
|
||||||
deletedCount = 0;
|
deletedCount = 0;
|
||||||
|
vaultFilter: VaultFilter;
|
||||||
|
selectedOrganization: string = null;
|
||||||
|
showCollections = true;
|
||||||
|
|
||||||
private loadedTimeout: number;
|
private loadedTimeout: number;
|
||||||
private selectedTimeout: number;
|
private selectedTimeout: number;
|
||||||
|
@ -63,8 +72,6 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
|
||||||
private allCiphers: CipherView[] = null;
|
private allCiphers: CipherView[] = null;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
collectionService: CollectionService,
|
|
||||||
folderService: FolderService,
|
|
||||||
private cipherService: CipherService,
|
private cipherService: CipherService,
|
||||||
private router: Router,
|
private router: Router,
|
||||||
private ngZone: NgZone,
|
private ngZone: NgZone,
|
||||||
|
@ -76,9 +83,9 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
|
||||||
private platformUtilsService: PlatformUtilsService,
|
private platformUtilsService: PlatformUtilsService,
|
||||||
private searchService: SearchService,
|
private searchService: SearchService,
|
||||||
private location: Location,
|
private location: Location,
|
||||||
private browserStateService: StateService
|
private browserStateService: StateService,
|
||||||
|
private vaultFilterService: VaultFilterService
|
||||||
) {
|
) {
|
||||||
super(collectionService, folderService, browserStateService);
|
|
||||||
this.noFolderListSize = 100;
|
this.noFolderListSize = 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -143,14 +150,18 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
|
||||||
}
|
}
|
||||||
|
|
||||||
async load() {
|
async load() {
|
||||||
await super.load(false);
|
this.vaultFilter = this.vaultFilterService.getVaultFilter();
|
||||||
|
|
||||||
|
this.updateSelectedOrg();
|
||||||
|
await this.loadCollectionsAndFolders();
|
||||||
await this.loadCiphers();
|
await this.loadCiphers();
|
||||||
|
|
||||||
if (this.showNoFolderCiphers && this.nestedFolders.length > 0) {
|
if (this.showNoFolderCiphers && this.nestedFolders.length > 0) {
|
||||||
// Remove "No Folder" from folder listing
|
// Remove "No Folder" from folder listing
|
||||||
this.nestedFolders = this.nestedFolders.slice(0, this.nestedFolders.length - 1);
|
this.nestedFolders = this.nestedFolders.slice(0, this.nestedFolders.length - 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
super.loaded = true;
|
this.loaded = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
async loadCiphers() {
|
async loadCiphers() {
|
||||||
|
@ -158,60 +169,20 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
|
||||||
if (!this.hasLoadedAllCiphers) {
|
if (!this.hasLoadedAllCiphers) {
|
||||||
this.hasLoadedAllCiphers = !this.searchService.isSearchable(this.searchText);
|
this.hasLoadedAllCiphers = !this.searchService.isSearchable(this.searchText);
|
||||||
}
|
}
|
||||||
this.deletedCount = this.allCiphers.filter((c) => c.isDeleted).length;
|
|
||||||
await this.search(null);
|
await this.search(null);
|
||||||
let favoriteCiphers: CipherView[] = null;
|
this.getCounts();
|
||||||
let noFolderCiphers: CipherView[] = null;
|
}
|
||||||
const folderCounts = new Map<string, number>();
|
|
||||||
const collectionCounts = new Map<string, number>();
|
|
||||||
const typeCounts = new Map<CipherType, number>();
|
|
||||||
|
|
||||||
this.ciphers.forEach((c) => {
|
async loadCollections() {
|
||||||
if (c.isDeleted) {
|
const allCollections = await this.vaultFilterService.buildCollections();
|
||||||
return;
|
this.collections = allCollections.fullList;
|
||||||
}
|
this.nestedCollections = allCollections.nestedList;
|
||||||
if (c.favorite) {
|
}
|
||||||
if (favoriteCiphers == null) {
|
|
||||||
favoriteCiphers = [];
|
|
||||||
}
|
|
||||||
favoriteCiphers.push(c);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (c.folderId == null) {
|
async loadFolders() {
|
||||||
if (noFolderCiphers == null) {
|
const allFolders = await this.vaultFilterService.buildFolders(this.selectedOrganization);
|
||||||
noFolderCiphers = [];
|
this.folders = allFolders.fullList;
|
||||||
}
|
this.nestedFolders = await allFolders.nestedList;
|
||||||
noFolderCiphers.push(c);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeCounts.has(c.type)) {
|
|
||||||
typeCounts.set(c.type, typeCounts.get(c.type) + 1);
|
|
||||||
} else {
|
|
||||||
typeCounts.set(c.type, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (folderCounts.has(c.folderId)) {
|
|
||||||
folderCounts.set(c.folderId, folderCounts.get(c.folderId) + 1);
|
|
||||||
} else {
|
|
||||||
folderCounts.set(c.folderId, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (c.collectionIds != null) {
|
|
||||||
c.collectionIds.forEach((colId) => {
|
|
||||||
if (collectionCounts.has(colId)) {
|
|
||||||
collectionCounts.set(colId, collectionCounts.get(colId) + 1);
|
|
||||||
} else {
|
|
||||||
collectionCounts.set(colId, 1);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.favoriteCiphers = favoriteCiphers;
|
|
||||||
this.noFolderCiphers = noFolderCiphers;
|
|
||||||
this.typeCounts = typeCounts;
|
|
||||||
this.folderCounts = folderCounts;
|
|
||||||
this.collectionCounts = collectionCounts;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async search(timeout: number = null) {
|
async search(timeout: number = null) {
|
||||||
|
@ -227,6 +198,9 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
|
||||||
filterDeleted,
|
filterDeleted,
|
||||||
this.allCiphers
|
this.allCiphers
|
||||||
);
|
);
|
||||||
|
this.ciphers = this.ciphers.filter(
|
||||||
|
(c) => !this.vaultFilterService.filterCipherForSelectedVault(c)
|
||||||
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.searchPending = true;
|
this.searchPending = true;
|
||||||
|
@ -241,27 +215,26 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
|
||||||
this.allCiphers
|
this.allCiphers
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
this.ciphers = this.ciphers.filter(
|
||||||
|
(c) => !this.vaultFilterService.filterCipherForSelectedVault(c)
|
||||||
|
);
|
||||||
this.searchPending = false;
|
this.searchPending = false;
|
||||||
}, timeout);
|
}, timeout);
|
||||||
}
|
}
|
||||||
|
|
||||||
async selectType(type: CipherType) {
|
async selectType(type: CipherType) {
|
||||||
super.selectType(type);
|
|
||||||
this.router.navigate(["/ciphers"], { queryParams: { type: type } });
|
this.router.navigate(["/ciphers"], { queryParams: { type: type } });
|
||||||
}
|
}
|
||||||
|
|
||||||
async selectFolder(folder: FolderView) {
|
async selectFolder(folder: FolderView) {
|
||||||
super.selectFolder(folder);
|
|
||||||
this.router.navigate(["/ciphers"], { queryParams: { folderId: folder.id || "none" } });
|
this.router.navigate(["/ciphers"], { queryParams: { folderId: folder.id || "none" } });
|
||||||
}
|
}
|
||||||
|
|
||||||
async selectCollection(collection: CollectionView) {
|
async selectCollection(collection: CollectionView) {
|
||||||
super.selectCollection(collection);
|
|
||||||
this.router.navigate(["/ciphers"], { queryParams: { collectionId: collection.id } });
|
this.router.navigate(["/ciphers"], { queryParams: { collectionId: collection.id } });
|
||||||
}
|
}
|
||||||
|
|
||||||
async selectTrash() {
|
async selectTrash() {
|
||||||
super.selectTrash();
|
|
||||||
this.router.navigate(["/ciphers"], { queryParams: { deleted: true } });
|
this.router.navigate(["/ciphers"], { queryParams: { deleted: true } });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -294,6 +267,85 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
|
||||||
this.router.navigate(["/add-cipher"]);
|
this.router.navigate(["/add-cipher"]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async vaultFilterChanged() {
|
||||||
|
if (this.showSearching) {
|
||||||
|
await this.search();
|
||||||
|
}
|
||||||
|
this.updateSelectedOrg();
|
||||||
|
await this.loadCollectionsAndFolders();
|
||||||
|
this.getCounts();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateSelectedOrg() {
|
||||||
|
this.vaultFilter = this.vaultFilterService.getVaultFilter();
|
||||||
|
if (this.vaultFilter.selectedOrganizationId != null) {
|
||||||
|
this.selectedOrganization = this.vaultFilter.selectedOrganizationId;
|
||||||
|
} else {
|
||||||
|
this.selectedOrganization = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getCounts() {
|
||||||
|
let favoriteCiphers: CipherView[] = null;
|
||||||
|
let noFolderCiphers: CipherView[] = null;
|
||||||
|
const folderCounts = new Map<string, number>();
|
||||||
|
const collectionCounts = new Map<string, number>();
|
||||||
|
const typeCounts = new Map<CipherType, number>();
|
||||||
|
|
||||||
|
this.deletedCount = this.allCiphers.filter(
|
||||||
|
(c) => c.isDeleted && !this.vaultFilterService.filterCipherForSelectedVault(c)
|
||||||
|
).length;
|
||||||
|
|
||||||
|
this.ciphers?.forEach((c) => {
|
||||||
|
if (!this.vaultFilterService.filterCipherForSelectedVault(c)) {
|
||||||
|
if (c.isDeleted) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (c.favorite) {
|
||||||
|
if (favoriteCiphers == null) {
|
||||||
|
favoriteCiphers = [];
|
||||||
|
}
|
||||||
|
favoriteCiphers.push(c);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (c.folderId == null) {
|
||||||
|
if (noFolderCiphers == null) {
|
||||||
|
noFolderCiphers = [];
|
||||||
|
}
|
||||||
|
noFolderCiphers.push(c);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeCounts.has(c.type)) {
|
||||||
|
typeCounts.set(c.type, typeCounts.get(c.type) + 1);
|
||||||
|
} else {
|
||||||
|
typeCounts.set(c.type, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (folderCounts.has(c.folderId)) {
|
||||||
|
folderCounts.set(c.folderId, folderCounts.get(c.folderId) + 1);
|
||||||
|
} else {
|
||||||
|
folderCounts.set(c.folderId, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (c.collectionIds != null) {
|
||||||
|
c.collectionIds.forEach((colId) => {
|
||||||
|
if (collectionCounts.has(colId)) {
|
||||||
|
collectionCounts.set(colId, collectionCounts.get(colId) + 1);
|
||||||
|
} else {
|
||||||
|
collectionCounts.set(colId, 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.favoriteCiphers = favoriteCiphers;
|
||||||
|
this.noFolderCiphers = noFolderCiphers;
|
||||||
|
this.typeCounts = typeCounts;
|
||||||
|
this.folderCounts = folderCounts;
|
||||||
|
this.collectionCounts = collectionCounts;
|
||||||
|
}
|
||||||
|
|
||||||
showSearching() {
|
showSearching() {
|
||||||
return (
|
return (
|
||||||
this.hasSearched || (!this.searchPending && this.searchService.isSearchable(this.searchText))
|
this.hasSearched || (!this.searchPending && this.searchService.isSearchable(this.searchText))
|
||||||
|
@ -307,6 +359,12 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private async loadCollectionsAndFolders() {
|
||||||
|
this.showCollections = !this.vaultFilter.myVaultOnly;
|
||||||
|
await this.loadFolders();
|
||||||
|
await this.loadCollections();
|
||||||
|
}
|
||||||
|
|
||||||
private async saveState() {
|
private async saveState() {
|
||||||
this.state = {
|
this.state = {
|
||||||
scrollY: this.popupUtils.getContentScrollY(window),
|
scrollY: this.popupUtils.getContentScrollY(window),
|
|
@ -0,0 +1,74 @@
|
||||||
|
<div class="content org-filter-content" *ngIf="loaded && showOrganizations">
|
||||||
|
<button
|
||||||
|
class="org-filter"
|
||||||
|
(click)="toggle()"
|
||||||
|
cdkOverlayOrigin
|
||||||
|
#trigger="cdkOverlayOrigin"
|
||||||
|
aria-haspopup="menu"
|
||||||
|
aria-controls="cdk-overlay-container"
|
||||||
|
[attr.aria-expanded]="isOpen"
|
||||||
|
>
|
||||||
|
<span>{{ vaultFilterDisplay }} </span>
|
||||||
|
<i
|
||||||
|
class="bwi bwi-sm"
|
||||||
|
aria-hidden="true"
|
||||||
|
[ngClass]="{ 'bwi-angle-down': !isOpen, 'bwi-chevron-up': isOpen }"
|
||||||
|
></i>
|
||||||
|
</button>
|
||||||
|
<ng-template
|
||||||
|
cdkConnectedOverlay
|
||||||
|
[cdkConnectedOverlayOrigin]="trigger"
|
||||||
|
[cdkConnectedOverlayHasBackdrop]="true"
|
||||||
|
[cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
|
||||||
|
[cdkConnectedOverlayOpen]="isOpen"
|
||||||
|
[cdkConnectedOverlayPositions]="overlayPostition"
|
||||||
|
(backdropClick)="close()"
|
||||||
|
(detach)="close()"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="vault-select"
|
||||||
|
[@transformPanel]="'open'"
|
||||||
|
cdkTrapFocus
|
||||||
|
cdkTrapFocusAutoCapture
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
appStopClick
|
||||||
|
appBlurClick
|
||||||
|
(click)="selectAllVaults()"
|
||||||
|
[ngClass]="{ active: !myVaultOnly && !selectOrganizationId }"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>
|
||||||
|
{{ "allVaults" | i18n }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
*ngIf="!enforcePersonalOwnwership"
|
||||||
|
appStopClick
|
||||||
|
appBlurClick
|
||||||
|
(click)="selectMyVault()"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
|
||||||
|
{{ "myVault" | i18n }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
*ngFor="let organization of organizations"
|
||||||
|
appStopClick
|
||||||
|
appBlurClick
|
||||||
|
(click)="selectOrganization(organization)"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
*ngIf="organization.planProductType !== 1"
|
||||||
|
class="bwi bwi-fw bwi-business"
|
||||||
|
aria-hidden="true"
|
||||||
|
></i>
|
||||||
|
<i
|
||||||
|
*ngIf="organization.planProductType === 1"
|
||||||
|
class="bwi bwi-fw bwi-family"
|
||||||
|
aria-hidden="true"
|
||||||
|
></i>
|
||||||
|
<span> {{ organization.name | ellipsis: 23:true }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
</div>
|
|
@ -0,0 +1,113 @@
|
||||||
|
import { animate, state, style, transition, trigger } from "@angular/animations";
|
||||||
|
import { ConnectedPosition } from "@angular/cdk/overlay";
|
||||||
|
import { Component, EventEmitter, OnInit, Output } from "@angular/core";
|
||||||
|
|
||||||
|
import { VaultFilter } from "jslib-angular/modules/vault-filter/models/vault-filter.model";
|
||||||
|
import { I18nService } from "jslib-common/abstractions/i18n.service";
|
||||||
|
import { Organization } from "jslib-common/models/domain/organization";
|
||||||
|
|
||||||
|
import { VaultFilterService } from "../../services/vaultFilter.service";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "app-vault-select",
|
||||||
|
templateUrl: "vault-select.component.html",
|
||||||
|
animations: [
|
||||||
|
trigger("transformPanel", [
|
||||||
|
state(
|
||||||
|
"void",
|
||||||
|
style({
|
||||||
|
opacity: 0,
|
||||||
|
})
|
||||||
|
),
|
||||||
|
transition(
|
||||||
|
"void => open",
|
||||||
|
animate(
|
||||||
|
"100ms linear",
|
||||||
|
style({
|
||||||
|
opacity: 1,
|
||||||
|
})
|
||||||
|
)
|
||||||
|
),
|
||||||
|
transition("* => void", animate("100ms linear", style({ opacity: 0 }))),
|
||||||
|
]),
|
||||||
|
],
|
||||||
|
})
|
||||||
|
export class VaultSelectComponent implements OnInit {
|
||||||
|
@Output() onVaultSelectionChanged = new EventEmitter();
|
||||||
|
|
||||||
|
isOpen = false;
|
||||||
|
loaded = false;
|
||||||
|
showOrganizations = false;
|
||||||
|
organizations: Organization[];
|
||||||
|
vaultFilter: VaultFilter = new VaultFilter();
|
||||||
|
vaultFilterDisplay = "";
|
||||||
|
enforcePersonalOwnwership = false;
|
||||||
|
overlayPostition: ConnectedPosition[] = [
|
||||||
|
{
|
||||||
|
originX: "start",
|
||||||
|
originY: "bottom",
|
||||||
|
overlayX: "start",
|
||||||
|
overlayY: "top",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
constructor(private vaultFilterService: VaultFilterService, private i18nService: I18nService) {}
|
||||||
|
|
||||||
|
async ngOnInit() {
|
||||||
|
this.vaultFilter = this.vaultFilterService.getVaultFilter();
|
||||||
|
this.organizations = await this.vaultFilterService.buildOrganizations();
|
||||||
|
this.enforcePersonalOwnwership =
|
||||||
|
await this.vaultFilterService.checkForPersonalOwnershipPolicy();
|
||||||
|
|
||||||
|
if (
|
||||||
|
(!this.enforcePersonalOwnwership && this.organizations.length > 0) ||
|
||||||
|
(this.enforcePersonalOwnwership && this.organizations.length > 1)
|
||||||
|
) {
|
||||||
|
this.showOrganizations = true;
|
||||||
|
|
||||||
|
if (this.enforcePersonalOwnwership && !this.vaultFilter.myVaultOnly) {
|
||||||
|
this.vaultFilterService.setVaultFilter(this.organizations[0].id);
|
||||||
|
this.vaultFilter.selectedOrganizationId = this.organizations[0].id;
|
||||||
|
this.vaultFilterDisplay = this.organizations.find(
|
||||||
|
(o) => o.id === this.vaultFilter.selectedOrganizationId
|
||||||
|
).name;
|
||||||
|
} else if (this.vaultFilter.myVaultOnly) {
|
||||||
|
this.vaultFilterDisplay = this.i18nService.t(this.vaultFilterService.myVault);
|
||||||
|
} else if (this.vaultFilter.selectedOrganizationId != null) {
|
||||||
|
this.vaultFilterDisplay = this.organizations.find(
|
||||||
|
(o) => o.id === this.vaultFilter.selectedOrganizationId
|
||||||
|
).name;
|
||||||
|
} else {
|
||||||
|
this.vaultFilterDisplay = this.i18nService.t(this.vaultFilterService.allVaults);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.loaded = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle() {
|
||||||
|
this.isOpen = !this.isOpen;
|
||||||
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.isOpen = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
selectOrganization(organization: Organization) {
|
||||||
|
this.vaultFilterDisplay = organization.name;
|
||||||
|
this.vaultFilterService.setVaultFilter(organization.id);
|
||||||
|
this.onVaultSelectionChanged.emit();
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
selectAllVaults() {
|
||||||
|
this.vaultFilterDisplay = this.i18nService.t(this.vaultFilterService.allVaults);
|
||||||
|
this.vaultFilterService.setVaultFilter(this.vaultFilterService.allVaults);
|
||||||
|
this.onVaultSelectionChanged.emit();
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
selectMyVault() {
|
||||||
|
this.vaultFilterDisplay = this.i18nService.t(this.vaultFilterService.myVault);
|
||||||
|
this.vaultFilterService.setVaultFilter(this.vaultFilterService.myVault);
|
||||||
|
this.onVaultSelectionChanged.emit();
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,73 @@
|
||||||
|
import { VaultFilter } from "jslib-angular/modules/vault-filter/models/vault-filter.model";
|
||||||
|
import { VaultFilterService as BaseVaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
|
||||||
|
import { CipherService } from "jslib-common/abstractions/cipher.service";
|
||||||
|
import { CollectionService } from "jslib-common/abstractions/collection.service";
|
||||||
|
import { FolderService } from "jslib-common/abstractions/folder.service";
|
||||||
|
import { OrganizationService } from "jslib-common/abstractions/organization.service";
|
||||||
|
import { PolicyService } from "jslib-common/abstractions/policy.service";
|
||||||
|
import { StateService } from "jslib-common/abstractions/state.service";
|
||||||
|
import { CipherView } from "jslib-common/models/view/cipherView";
|
||||||
|
|
||||||
|
export class VaultFilterService extends BaseVaultFilterService {
|
||||||
|
vaultFilter: VaultFilter = new VaultFilter();
|
||||||
|
|
||||||
|
allVaults = "allVaults";
|
||||||
|
myVault = "myVault";
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
stateService: StateService,
|
||||||
|
organizationService: OrganizationService,
|
||||||
|
folderService: FolderService,
|
||||||
|
cipherService: CipherService,
|
||||||
|
collectionService: CollectionService,
|
||||||
|
policyService: PolicyService
|
||||||
|
) {
|
||||||
|
super(
|
||||||
|
stateService,
|
||||||
|
organizationService,
|
||||||
|
folderService,
|
||||||
|
cipherService,
|
||||||
|
collectionService,
|
||||||
|
policyService
|
||||||
|
);
|
||||||
|
this.vaultFilter.myVaultOnly = false;
|
||||||
|
this.vaultFilter.selectedOrganizationId = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
getVaultFilter() {
|
||||||
|
return this.vaultFilter;
|
||||||
|
}
|
||||||
|
|
||||||
|
setVaultFilter(filter: string) {
|
||||||
|
if (filter === this.allVaults) {
|
||||||
|
this.vaultFilter.myVaultOnly = false;
|
||||||
|
this.vaultFilter.selectedOrganizationId = null;
|
||||||
|
} else if (filter === this.myVault) {
|
||||||
|
this.vaultFilter.myVaultOnly = true;
|
||||||
|
this.vaultFilter.selectedOrganizationId = null;
|
||||||
|
} else {
|
||||||
|
this.vaultFilter.myVaultOnly = false;
|
||||||
|
this.vaultFilter.selectedOrganizationId = filter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
clear() {
|
||||||
|
this.setVaultFilter(this.allVaults);
|
||||||
|
}
|
||||||
|
|
||||||
|
filterCipherForSelectedVault(cipher: CipherView) {
|
||||||
|
if (!this.vaultFilter.selectedOrganizationId && !this.vaultFilter.myVaultOnly) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (this.vaultFilter.selectedOrganizationId) {
|
||||||
|
if (cipher.organizationId === this.vaultFilter.selectedOrganizationId) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} else if (this.vaultFilter.myVaultOnly) {
|
||||||
|
if (!cipher.organizationId) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1 +1 @@
|
||||||
Subproject commit 80c834b52a8b00f88250a47a9bbd40c269fc2cba
|
Subproject commit 141ade3c381cb9ec8e89f15061b92330cb32d403
|
|
@ -1,10 +1,8 @@
|
||||||
import { NgModule } from "@angular/core";
|
import { NgModule } from "@angular/core";
|
||||||
import { RouterModule, Routes } from "@angular/router";
|
import { RouterModule, Routes } from "@angular/router";
|
||||||
|
|
||||||
import { AuthGuardService } from "jslib-angular/services/auth-guard.service";
|
import { AuthGuard } from "jslib-angular/guards/auth.guard";
|
||||||
import { LockGuardService } from "jslib-angular/services/lock-guard.service";
|
import { LockGuard } from "jslib-angular/guards/lock.guard";
|
||||||
|
|
||||||
import { LoginGuardService } from "../services/loginGuard.service";
|
|
||||||
|
|
||||||
import { HintComponent } from "./accounts/hint.component";
|
import { HintComponent } from "./accounts/hint.component";
|
||||||
import { LockComponent } from "./accounts/lock.component";
|
import { LockComponent } from "./accounts/lock.component";
|
||||||
|
@ -15,6 +13,7 @@ import { SetPasswordComponent } from "./accounts/set-password.component";
|
||||||
import { SsoComponent } from "./accounts/sso.component";
|
import { SsoComponent } from "./accounts/sso.component";
|
||||||
import { TwoFactorComponent } from "./accounts/two-factor.component";
|
import { TwoFactorComponent } from "./accounts/two-factor.component";
|
||||||
import { UpdateTempPasswordComponent } from "./accounts/update-temp-password.component";
|
import { UpdateTempPasswordComponent } from "./accounts/update-temp-password.component";
|
||||||
|
import { LoginGuard } from "./guards/login.guard";
|
||||||
import { SendComponent } from "./send/send.component";
|
import { SendComponent } from "./send/send.component";
|
||||||
import { VaultComponent } from "./vault/vault.component";
|
import { VaultComponent } from "./vault/vault.component";
|
||||||
|
|
||||||
|
@ -23,19 +22,19 @@ const routes: Routes = [
|
||||||
{
|
{
|
||||||
path: "lock",
|
path: "lock",
|
||||||
component: LockComponent,
|
component: LockComponent,
|
||||||
canActivate: [LockGuardService],
|
canActivate: [LockGuard],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "login",
|
path: "login",
|
||||||
component: LoginComponent,
|
component: LoginComponent,
|
||||||
canActivate: [LoginGuardService],
|
canActivate: [LoginGuard],
|
||||||
},
|
},
|
||||||
{ path: "2fa", component: TwoFactorComponent },
|
{ path: "2fa", component: TwoFactorComponent },
|
||||||
{ path: "register", component: RegisterComponent },
|
{ path: "register", component: RegisterComponent },
|
||||||
{
|
{
|
||||||
path: "vault",
|
path: "vault",
|
||||||
component: VaultComponent,
|
component: VaultComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
},
|
},
|
||||||
{ path: "hint", component: HintComponent },
|
{ path: "hint", component: HintComponent },
|
||||||
{ path: "set-password", component: SetPasswordComponent },
|
{ path: "set-password", component: SetPasswordComponent },
|
||||||
|
@ -43,17 +42,17 @@ const routes: Routes = [
|
||||||
{
|
{
|
||||||
path: "send",
|
path: "send",
|
||||||
component: SendComponent,
|
component: SendComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "update-temp-password",
|
path: "update-temp-password",
|
||||||
component: UpdateTempPasswordComponent,
|
component: UpdateTempPasswordComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "remove-password",
|
path: "remove-password",
|
||||||
component: RemovePasswordComponent,
|
component: RemovePasswordComponent,
|
||||||
canActivate: [AuthGuardService],
|
canActivate: [AuthGuard],
|
||||||
data: { titleId: "removeMasterPassword" },
|
data: { titleId: "removeMasterPassword" },
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
@ -1,10 +1,6 @@
|
||||||
import "zone.js/dist/zone";
|
import "zone.js/dist/zone";
|
||||||
|
|
||||||
import { A11yModule } from "@angular/cdk/a11y";
|
import { registerLocaleData } from "@angular/common";
|
||||||
import { DragDropModule } from "@angular/cdk/drag-drop";
|
|
||||||
import { OverlayModule } from "@angular/cdk/overlay";
|
|
||||||
import { ScrollingModule } from "@angular/cdk/scrolling";
|
|
||||||
import { DatePipe, registerLocaleData } from "@angular/common";
|
|
||||||
import localeAf from "@angular/common/locales/af";
|
import localeAf from "@angular/common/locales/af";
|
||||||
import localeAz from "@angular/common/locales/az";
|
import localeAz from "@angular/common/locales/az";
|
||||||
import localeBe from "@angular/common/locales/be";
|
import localeBe from "@angular/common/locales/be";
|
||||||
|
@ -59,11 +55,6 @@ import localeVi from "@angular/common/locales/vi";
|
||||||
import localeZhCn from "@angular/common/locales/zh-Hans";
|
import localeZhCn from "@angular/common/locales/zh-Hans";
|
||||||
import localeZhTw from "@angular/common/locales/zh-Hant";
|
import localeZhTw from "@angular/common/locales/zh-Hant";
|
||||||
import { NgModule } from "@angular/core";
|
import { NgModule } from "@angular/core";
|
||||||
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
|
|
||||||
import { BrowserModule } from "@angular/platform-browser";
|
|
||||||
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
|
|
||||||
|
|
||||||
import { JslibModule } from "jslib-angular/jslib.module";
|
|
||||||
|
|
||||||
import { EnvironmentComponent } from "./accounts/environment.component";
|
import { EnvironmentComponent } from "./accounts/environment.component";
|
||||||
import { HintComponent } from "./accounts/hint.component";
|
import { HintComponent } from "./accounts/hint.component";
|
||||||
|
@ -88,10 +79,11 @@ import { AccountSwitcherComponent } from "./layout/account-switcher.component";
|
||||||
import { HeaderComponent } from "./layout/header.component";
|
import { HeaderComponent } from "./layout/header.component";
|
||||||
import { NavComponent } from "./layout/nav.component";
|
import { NavComponent } from "./layout/nav.component";
|
||||||
import { SearchComponent } from "./layout/search/search.component";
|
import { SearchComponent } from "./layout/search/search.component";
|
||||||
|
import { SharedModule } from "./modules/shared.module";
|
||||||
|
import { VaultFilterModule } from "./modules/vault-filter/vault-filter.module";
|
||||||
import { AddEditComponent as SendAddEditComponent } from "./send/add-edit.component";
|
import { AddEditComponent as SendAddEditComponent } from "./send/add-edit.component";
|
||||||
import { EffluxDatesComponent as SendEffluxDatesComponent } from "./send/efflux-dates.component";
|
import { EffluxDatesComponent as SendEffluxDatesComponent } from "./send/efflux-dates.component";
|
||||||
import { SendComponent } from "./send/send.component";
|
import { SendComponent } from "./send/send.component";
|
||||||
import { ServicesModule } from "./services/services.module";
|
|
||||||
import { AddEditCustomFieldsComponent } from "./vault/add-edit-custom-fields.component";
|
import { AddEditCustomFieldsComponent } from "./vault/add-edit-custom-fields.component";
|
||||||
import { AddEditComponent } from "./vault/add-edit.component";
|
import { AddEditComponent } from "./vault/add-edit.component";
|
||||||
import { AttachmentsComponent } from "./vault/attachments.component";
|
import { AttachmentsComponent } from "./vault/attachments.component";
|
||||||
|
@ -100,7 +92,6 @@ import { CollectionsComponent } from "./vault/collections.component";
|
||||||
import { ExportComponent } from "./vault/export.component";
|
import { ExportComponent } from "./vault/export.component";
|
||||||
import { FolderAddEditComponent } from "./vault/folder-add-edit.component";
|
import { FolderAddEditComponent } from "./vault/folder-add-edit.component";
|
||||||
import { GeneratorComponent } from "./vault/generator.component";
|
import { GeneratorComponent } from "./vault/generator.component";
|
||||||
import { GroupingsComponent } from "./vault/groupings.component";
|
|
||||||
import { PasswordGeneratorHistoryComponent } from "./vault/password-generator-history.component";
|
import { PasswordGeneratorHistoryComponent } from "./vault/password-generator-history.component";
|
||||||
import { PasswordHistoryComponent } from "./vault/password-history.component";
|
import { PasswordHistoryComponent } from "./vault/password-history.component";
|
||||||
import { ShareComponent } from "./vault/share.component";
|
import { ShareComponent } from "./vault/share.component";
|
||||||
|
@ -163,19 +154,7 @@ registerLocaleData(localeZhCn, "zh-CN");
|
||||||
registerLocaleData(localeZhTw, "zh-TW");
|
registerLocaleData(localeZhTw, "zh-TW");
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [SharedModule, AppRoutingModule, VaultFilterModule],
|
||||||
A11yModule,
|
|
||||||
AppRoutingModule,
|
|
||||||
BrowserAnimationsModule,
|
|
||||||
BrowserModule,
|
|
||||||
DragDropModule,
|
|
||||||
FormsModule,
|
|
||||||
JslibModule,
|
|
||||||
OverlayModule,
|
|
||||||
ReactiveFormsModule,
|
|
||||||
ScrollingModule,
|
|
||||||
ServicesModule,
|
|
||||||
],
|
|
||||||
declarations: [
|
declarations: [
|
||||||
AccountSwitcherComponent,
|
AccountSwitcherComponent,
|
||||||
AddEditComponent,
|
AddEditComponent,
|
||||||
|
@ -187,7 +166,6 @@ registerLocaleData(localeZhTw, "zh-TW");
|
||||||
EnvironmentComponent,
|
EnvironmentComponent,
|
||||||
ExportComponent,
|
ExportComponent,
|
||||||
FolderAddEditComponent,
|
FolderAddEditComponent,
|
||||||
GroupingsComponent,
|
|
||||||
HeaderComponent,
|
HeaderComponent,
|
||||||
HintComponent,
|
HintComponent,
|
||||||
LockComponent,
|
LockComponent,
|
||||||
|
@ -218,7 +196,6 @@ registerLocaleData(localeZhTw, "zh-TW");
|
||||||
ViewComponent,
|
ViewComponent,
|
||||||
ViewCustomFieldsComponent,
|
ViewCustomFieldsComponent,
|
||||||
],
|
],
|
||||||
providers: [DatePipe],
|
|
||||||
bootstrap: [AppComponent],
|
bootstrap: [AppComponent],
|
||||||
})
|
})
|
||||||
export class AppModule {}
|
export class AppModule {}
|
||||||
|
|
|
@ -8,7 +8,7 @@ import { StateService } from "jslib-common/abstractions/state.service";
|
||||||
const maxAllowedAccounts = 5;
|
const maxAllowedAccounts = 5;
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class LoginGuardService implements CanActivate {
|
export class LoginGuard implements CanActivate {
|
||||||
protected homepage = "vault";
|
protected homepage = "vault";
|
||||||
constructor(
|
constructor(
|
||||||
private stateService: StateService,
|
private stateService: StateService,
|
|
@ -0,0 +1,43 @@
|
||||||
|
import { A11yModule } from "@angular/cdk/a11y";
|
||||||
|
import { DragDropModule } from "@angular/cdk/drag-drop";
|
||||||
|
import { OverlayModule } from "@angular/cdk/overlay";
|
||||||
|
import { ScrollingModule } from "@angular/cdk/scrolling";
|
||||||
|
import { DatePipe } from "@angular/common";
|
||||||
|
import { NgModule } from "@angular/core";
|
||||||
|
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
|
||||||
|
import { BrowserModule } from "@angular/platform-browser";
|
||||||
|
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
|
||||||
|
|
||||||
|
import { JslibModule } from "jslib-angular/jslib.module";
|
||||||
|
|
||||||
|
import { ServicesModule } from "../services/services.module";
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
A11yModule,
|
||||||
|
BrowserAnimationsModule,
|
||||||
|
BrowserModule,
|
||||||
|
DragDropModule,
|
||||||
|
FormsModule,
|
||||||
|
JslibModule,
|
||||||
|
OverlayModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
|
ScrollingModule,
|
||||||
|
ServicesModule,
|
||||||
|
],
|
||||||
|
exports: [
|
||||||
|
A11yModule,
|
||||||
|
BrowserAnimationsModule,
|
||||||
|
BrowserModule,
|
||||||
|
DatePipe,
|
||||||
|
DragDropModule,
|
||||||
|
FormsModule,
|
||||||
|
JslibModule,
|
||||||
|
OverlayModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
|
ScrollingModule,
|
||||||
|
ServicesModule,
|
||||||
|
],
|
||||||
|
providers: [DatePipe],
|
||||||
|
})
|
||||||
|
export class SharedModule {}
|
|
@ -0,0 +1,76 @@
|
||||||
|
<ng-container *ngIf="show">
|
||||||
|
<div class="filter-heading">
|
||||||
|
<button
|
||||||
|
class="no-btn"
|
||||||
|
[attr.aria-expanded]="!isCollapsed(collectionsGrouping)"
|
||||||
|
aria-controls="collection-filters"
|
||||||
|
(click)="toggleCollapse(collectionsGrouping)"
|
||||||
|
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="bwi bwi-fw"
|
||||||
|
aria-hidden="true"
|
||||||
|
[ngClass]="{
|
||||||
|
'bwi-angle-right': isCollapsed(collectionsGrouping),
|
||||||
|
'bwi-angle-down': !isCollapsed(collectionsGrouping)
|
||||||
|
}"
|
||||||
|
></i>
|
||||||
|
</button>
|
||||||
|
<h2> {{ collectionsGrouping.name | i18n }}</h2>
|
||||||
|
</div>
|
||||||
|
<ul id="collection-filters" *ngIf="!isCollapsed(collectionsGrouping)" class="filter-options">
|
||||||
|
<ng-template #recursiveCollections let-collections>
|
||||||
|
<li
|
||||||
|
class="filter-option"
|
||||||
|
*ngFor="let c of collections"
|
||||||
|
[ngClass]="{ active: c.node.id === activeFilter.selectedCollectionId }"
|
||||||
|
>
|
||||||
|
<span class="filter-buttons">
|
||||||
|
<button
|
||||||
|
*ngIf="c.children.length"
|
||||||
|
class="toggle-button"
|
||||||
|
[attr.aria-expanded]="!isCollapsed(c.node)"
|
||||||
|
[attr.aria-controls]="c.node.name + '_children'"
|
||||||
|
(click)="toggleCollapse(c.node)"
|
||||||
|
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="bwi bwi-fw"
|
||||||
|
aria-hidden="true"
|
||||||
|
[ngClass]="{
|
||||||
|
'bwi-angle-right': isCollapsed(c.node),
|
||||||
|
'bwi-angle-down': !isCollapsed(c.node)
|
||||||
|
}"
|
||||||
|
></i>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="applyFilter(c.node)"
|
||||||
|
[attr.aria-pressed]="c.node.id === activeFilter.selectedCollectionId"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
*ngIf="c.children.length === 0"
|
||||||
|
class="bwi bwi-fw bwi-collection"
|
||||||
|
aria-hidden="true"
|
||||||
|
></i>
|
||||||
|
{{ c.node.name }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
<ul
|
||||||
|
[id]="c.node.name + '_children'"
|
||||||
|
class="nested-filter-options"
|
||||||
|
*ngIf="c.children.length && !isCollapsed(c.node)"
|
||||||
|
>
|
||||||
|
<ng-container
|
||||||
|
*ngTemplateOutlet="recursiveCollections; context: { $implicit: c.children }"
|
||||||
|
>
|
||||||
|
</ng-container>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ng-template>
|
||||||
|
<ng-container
|
||||||
|
*ngTemplateOutlet="recursiveCollections; context: { $implicit: nestedCollections }"
|
||||||
|
>
|
||||||
|
</ng-container>
|
||||||
|
</ul>
|
||||||
|
</ng-container>
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { Component } from "@angular/core";
|
||||||
|
|
||||||
|
import { CollectionFilterComponent as BaseCollectionFilterComponent } from "jslib-angular/modules/vault-filter/components/collection-filter.component";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "app-collection-filter",
|
||||||
|
templateUrl: "collection-filter.component.html",
|
||||||
|
})
|
||||||
|
export class CollectionFilterComponent extends BaseCollectionFilterComponent {}
|
|
@ -0,0 +1,84 @@
|
||||||
|
<ng-container *ngIf="!hide">
|
||||||
|
<div class="filter-heading">
|
||||||
|
<button
|
||||||
|
class="toggle-button"
|
||||||
|
[attr.aria-expanded]="!isCollapsed(foldersGrouping)"
|
||||||
|
aria-controls="folder-filters"
|
||||||
|
(click)="toggleCollapse(foldersGrouping)"
|
||||||
|
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="bwi bwi-fw"
|
||||||
|
aria-hidden="true"
|
||||||
|
[ngClass]="{
|
||||||
|
'bwi-angle-right': isCollapsed(foldersGrouping),
|
||||||
|
'bwi-angle-down': !isCollapsed(foldersGrouping)
|
||||||
|
}"
|
||||||
|
></i>
|
||||||
|
</button>
|
||||||
|
<h2> {{ foldersGrouping.name | i18n }}</h2>
|
||||||
|
<button class="add-button" (click)="addFolder()" appA11yTitle="{{ 'addFolder' | i18n }}">
|
||||||
|
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<ul id="folder-filters" class="filter-options" *ngIf="!isCollapsed(foldersGrouping)">
|
||||||
|
<ng-template #recursiveFolders let-folders>
|
||||||
|
<li
|
||||||
|
*ngFor="let f of folders"
|
||||||
|
[ngClass]="{
|
||||||
|
active: f.node.id === activeFilter.selectedFolderId && activeFilter.selectedFolder
|
||||||
|
}"
|
||||||
|
class="filter-option"
|
||||||
|
>
|
||||||
|
<span class="filter-buttons">
|
||||||
|
<button
|
||||||
|
class="toggle-button"
|
||||||
|
*ngIf="f.children.length"
|
||||||
|
(click)="toggleCollapse(f.node)"
|
||||||
|
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
||||||
|
[attr.aria-expanded]="!isCollapsed(f.node)"
|
||||||
|
[attr.aria-controls]="f.node.name + '_children'"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="bwi bwi-fw"
|
||||||
|
aria-hidden="true"
|
||||||
|
[ngClass]="{
|
||||||
|
'bwi-angle-right': isCollapsed(f.node),
|
||||||
|
'bwi-angle-down': !isCollapsed(f.node)
|
||||||
|
}"
|
||||||
|
></i>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="applyFilter(f.node)"
|
||||||
|
[attr.aria-pressed]="
|
||||||
|
activeFilter.selectedFolder && f.node.id === activeFilter.selectedFolderId
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<i *ngIf="f.children.length === 0" class="bwi bwi-fw bwi-folder" aria-hidden="true"></i>
|
||||||
|
{{ f.node.name }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="edit-button"
|
||||||
|
*ngIf="f.node.id"
|
||||||
|
(click)="editFolder(f.node)"
|
||||||
|
appA11yTitle="{{ 'editFolder' | i18n }}"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-pencil bwi-fw" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
<ul
|
||||||
|
[id]="f.node.name + '_children'"
|
||||||
|
class="nested-filter-options"
|
||||||
|
*ngIf="f.children.length && !isCollapsed(f.node)"
|
||||||
|
>
|
||||||
|
<ng-container *ngTemplateOutlet="recursiveFolders; context: { $implicit: f.children }">
|
||||||
|
</ng-container>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ng-template>
|
||||||
|
<ng-container
|
||||||
|
*ngTemplateOutlet="recursiveFolders; context: { $implicit: nestedFolders }"
|
||||||
|
></ng-container>
|
||||||
|
</ul>
|
||||||
|
</ng-container>
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { Component } from "@angular/core";
|
||||||
|
|
||||||
|
import { FolderFilterComponent as BaseFolderFilterComponent } from "jslib-angular/modules/vault-filter/components/folder-filter.component";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "app-folder-filter",
|
||||||
|
templateUrl: "folder-filter.component.html",
|
||||||
|
})
|
||||||
|
export class FolderFilterComponent extends BaseFolderFilterComponent {}
|
|
@ -0,0 +1,102 @@
|
||||||
|
<ng-container *ngIf="show">
|
||||||
|
<ng-container [ngSwitch]="displayMode">
|
||||||
|
<ng-container *ngSwitchCase="'personalOwnershipPolicy'">
|
||||||
|
<div class="filter-heading" [ngClass]="{ active: !hasActiveFilter }">
|
||||||
|
<button
|
||||||
|
class="toggle-button"
|
||||||
|
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
||||||
|
(click)="toggleCollapse()"
|
||||||
|
[attr.aria-expanded]="!isCollapsed"
|
||||||
|
aria-controls="organization-filters"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="bwi bwi-fw"
|
||||||
|
aria-hidden="true"
|
||||||
|
[ngClass]="{
|
||||||
|
'bwi-angle-right': isCollapsed,
|
||||||
|
'bwi-angle-down': !isCollapsed
|
||||||
|
}"
|
||||||
|
></i>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="clearFilter()"
|
||||||
|
[attr.aria-pressed]="!hasActiveFilter"
|
||||||
|
>
|
||||||
|
<h2> {{ organizationGrouping.name | i18n }}</h2>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options no-margin">
|
||||||
|
<li
|
||||||
|
class="filter-option"
|
||||||
|
*ngFor="let organization of organizations"
|
||||||
|
[ngClass]="{ active: organization.id === activeFilter.selectedOrganizationId }"
|
||||||
|
>
|
||||||
|
<span class="filter-buttons">
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="applyOrganizationFilter(organization)"
|
||||||
|
[attr.aria-pressed]="activeFilter.myVaultOnly"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
|
||||||
|
{{ organization.name }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngSwitchCase="'organizationMember'">
|
||||||
|
<div class="filter-heading" [ngClass]="{ active: !hasActiveFilter }">
|
||||||
|
<button
|
||||||
|
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
||||||
|
(click)="toggleCollapse()"
|
||||||
|
[attr.aria-expanded]="!isCollapsed"
|
||||||
|
aria-controls="organization-filters"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="bwi bwi-fw"
|
||||||
|
aria-hidden="true"
|
||||||
|
[ngClass]="{
|
||||||
|
'bwi-angle-right': isCollapsed,
|
||||||
|
'bwi-angle-down': !isCollapsed
|
||||||
|
}"
|
||||||
|
></i>
|
||||||
|
</button>
|
||||||
|
<button class="filter-button" (click)="clearFilter()">
|
||||||
|
<h2> {{ organizationGrouping.name | i18n }}</h2>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options no-margin">
|
||||||
|
<li class="filter-option" [ngClass]="{ active: activeFilter.myVaultOnly }">
|
||||||
|
<span class="filter-buttons">
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="applyMyVaultFilter()"
|
||||||
|
[attr.aria-pressed]="activeFilter.myVaultOnly"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
|
||||||
|
{{ "myVault" | i18n }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="filter-option"
|
||||||
|
*ngFor="let organization of organizations"
|
||||||
|
[ngClass]="{ active: organization.id === activeFilter.selectedOrganizationId }"
|
||||||
|
>
|
||||||
|
<span class="filter-buttons">
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="applyOrganizationFilter(organization)"
|
||||||
|
[attr.aria-pressed]="activeFilter.selectedOrganizationId === organization.id"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
|
||||||
|
{{ organization.name }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
<hr />
|
||||||
|
</ng-container>
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { Component } from "@angular/core";
|
||||||
|
|
||||||
|
import { OrganizationFilterComponent as BaseOrganizationFilterComponent } from "jslib-angular/modules/vault-filter/components/organization-filter.component";
|
||||||
|
import { DisplayMode } from "jslib-angular/modules/vault-filter/models/display-mode";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "app-organization-filter",
|
||||||
|
templateUrl: "organization-filter.component.html",
|
||||||
|
})
|
||||||
|
export class OrganizationFilterComponent extends BaseOrganizationFilterComponent {
|
||||||
|
get show() {
|
||||||
|
const hiddenDisplayModes: DisplayMode[] = ["singleOrganizationAndPersonalOwnershipPolicies"];
|
||||||
|
return (
|
||||||
|
!this.hide &&
|
||||||
|
this.organizations.length > 0 &&
|
||||||
|
hiddenDisplayModes.indexOf(this.displayMode) === -1
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,46 @@
|
||||||
|
<ng-container *ngIf="show">
|
||||||
|
<h2 class="sr-only">{{ "filters" | i18n }}</h2>
|
||||||
|
<ul class="filter-options">
|
||||||
|
<li class="filter-option" [ngClass]="{ active: activeFilter.status === 'all' }">
|
||||||
|
<span class="filter-buttons">
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="applyFilter('all')"
|
||||||
|
[attr.aria-pressed]="activeFilter.status === 'all'"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i> {{ "allItems" | i18n }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="filter-option"
|
||||||
|
*ngIf="!hideFavorites"
|
||||||
|
[ngClass]="{ active: activeFilter.status === 'favorites' }"
|
||||||
|
>
|
||||||
|
<span class="filter-buttons">
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="applyFilter('favorites')"
|
||||||
|
[attr.aria-pressed]="activeFilter.status === 'favorites'"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-fw bwi-star" aria-hidden="true"></i> {{ "favorites" | i18n }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="filter-option"
|
||||||
|
*ngIf="!hideTrash"
|
||||||
|
[ngClass]="{ active: activeFilter.status === 'trash' }"
|
||||||
|
>
|
||||||
|
<span class="filter-buttons">
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="applyFilter('trash')"
|
||||||
|
[attr.aria-pressed]="activeFilter.status === 'trash'"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i> {{ "trash" | i18n }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</ng-container>
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { Component } from "@angular/core";
|
||||||
|
|
||||||
|
import { StatusFilterComponent as BaseStatusFilterComponent } from "jslib-angular/modules/vault-filter/components/status-filter.component";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "app-status-filter",
|
||||||
|
templateUrl: "status-filter.component.html",
|
||||||
|
})
|
||||||
|
export class StatusFilterComponent extends BaseStatusFilterComponent {}
|
|
@ -0,0 +1,76 @@
|
||||||
|
<div class="filter-heading">
|
||||||
|
<button
|
||||||
|
class="no-btn"
|
||||||
|
(click)="toggleCollapse()"
|
||||||
|
aria-expanded="!isCollapsed"
|
||||||
|
aria-controls="type-filters"
|
||||||
|
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="bwi bwi-fw"
|
||||||
|
aria-hidden="true"
|
||||||
|
[ngClass]="{
|
||||||
|
'bwi-angle-right': isCollapsed,
|
||||||
|
'bwi-angle-down': !isCollapsed
|
||||||
|
}"
|
||||||
|
></i>
|
||||||
|
</button>
|
||||||
|
<h2> {{ typesNode.name | i18n }}</h2>
|
||||||
|
</div>
|
||||||
|
<ul id="type-filters" *ngIf="!isCollapsed" class="filter-options">
|
||||||
|
<li
|
||||||
|
class="filter-option"
|
||||||
|
[ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Login }"
|
||||||
|
>
|
||||||
|
<span class="filter-buttons">
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="applyFilter(cipherTypeEnum.Login)"
|
||||||
|
[attr.aria-pressed]="activeFilter.selectedType === cipherTypeEnum.Login"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i> {{ "typeLogin" | i18n }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li class="filter-option" [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Card }">
|
||||||
|
<span class="filter-buttons">
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="applyFilter(cipherTypeEnum.Card)"
|
||||||
|
[attr.aria-pressed]="activeFilter.selectedType === cipherTypeEnum.Card"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i> {{ "typeCard" | i18n }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="filter-option"
|
||||||
|
[ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Identity }"
|
||||||
|
>
|
||||||
|
<span class="filter-buttons">
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="applyFilter(cipherTypeEnum.Identity)"
|
||||||
|
[attr.aria-pressed]="activeFilter.selectedType === cipherTypeEnum.Identity"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i> {{ "typeIdentity" | i18n }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="filter-option"
|
||||||
|
[ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.SecureNote }"
|
||||||
|
>
|
||||||
|
<span class="filter-buttons">
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="applyFilter(cipherTypeEnum.SecureNote)"
|
||||||
|
[attr.aria-pressed]="activeFilter.selectedType === cipherTypeEnum.SecureNote"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i> {{
|
||||||
|
"typeSecureNote" | i18n
|
||||||
|
}}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { Component } from "@angular/core";
|
||||||
|
|
||||||
|
import { TypeFilterComponent as BaseTypeFilterComponent } from "jslib-angular/modules/vault-filter/components/type-filter.component";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "app-type-filter",
|
||||||
|
templateUrl: "type-filter.component.html",
|
||||||
|
})
|
||||||
|
export class TypeFilterComponent extends BaseTypeFilterComponent {}
|
|
@ -0,0 +1,50 @@
|
||||||
|
<div class="container loading-spinner" *ngIf="!isLoaded">
|
||||||
|
<i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
|
||||||
|
</div>
|
||||||
|
<ng-container *ngIf="isLoaded">
|
||||||
|
<app-organization-filter
|
||||||
|
class="filter"
|
||||||
|
[hide]="hideOrganizations"
|
||||||
|
[activeFilter]="activeFilter"
|
||||||
|
[collapsedFilterNodes]="collapsedFilterNodes"
|
||||||
|
[organizations]="organizations"
|
||||||
|
[activePersonalOwnershipPolicy]="activePersonalOwnershipPolicy"
|
||||||
|
[activeSingleOrganizationPolicy]="activeSingleOrganizationPolicy"
|
||||||
|
(onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
|
||||||
|
(onFilterChange)="applyFilter($event)"
|
||||||
|
></app-organization-filter>
|
||||||
|
<app-status-filter
|
||||||
|
class="filter"
|
||||||
|
[hideFavorites]="hideFavorites"
|
||||||
|
[hideTrash]="hideTrash"
|
||||||
|
[activeFilter]="activeFilter"
|
||||||
|
(onFilterChange)="applyFilter($event)"
|
||||||
|
></app-status-filter>
|
||||||
|
<app-type-filter
|
||||||
|
class="filter"
|
||||||
|
[activeFilter]="activeFilter"
|
||||||
|
[collapsedFilterNodes]="collapsedFilterNodes"
|
||||||
|
(onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
|
||||||
|
(onFilterChange)="applyFilter($event)"
|
||||||
|
></app-type-filter>
|
||||||
|
<app-folder-filter
|
||||||
|
class="filter"
|
||||||
|
[hide]="hideFolders"
|
||||||
|
[activeFilter]="activeFilter"
|
||||||
|
[collapsedFilterNodes]="collapsedFilterNodes"
|
||||||
|
[folderNodes]="folders"
|
||||||
|
(onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
|
||||||
|
(onFilterChange)="applyFilter($event)"
|
||||||
|
(onAddFolder)="addFolder()"
|
||||||
|
(onEditFolder)="editFolder($event)"
|
||||||
|
></app-folder-filter>
|
||||||
|
<app-collection-filter
|
||||||
|
class="filter"
|
||||||
|
[hide]="hideCollections"
|
||||||
|
[activeFilter]="activeFilter"
|
||||||
|
[collapsedFilterNodes]="collapsedFilterNodes"
|
||||||
|
[collectionNodes]="collections"
|
||||||
|
(onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
|
||||||
|
(onFilterChange)="applyFilter($event)"
|
||||||
|
></app-collection-filter>
|
||||||
|
</ng-container>
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { Component } from "@angular/core";
|
||||||
|
|
||||||
|
import { VaultFilterComponent as BaseVaultFilterComponent } from "jslib-angular/modules/vault-filter/vault-filter.component";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "app-vault-filter",
|
||||||
|
templateUrl: "vault-filter.component.html",
|
||||||
|
})
|
||||||
|
export class VaultFilterComponent extends BaseVaultFilterComponent {}
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { NgModule } from "@angular/core";
|
||||||
|
import { BrowserModule } from "@angular/platform-browser";
|
||||||
|
|
||||||
|
import { JslibModule } from "jslib-angular/jslib.module";
|
||||||
|
import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
|
||||||
|
|
||||||
|
import { CollectionFilterComponent } from "./components/collection-filter.component";
|
||||||
|
import { FolderFilterComponent } from "./components/folder-filter.component";
|
||||||
|
import { OrganizationFilterComponent } from "./components/organization-filter.component";
|
||||||
|
import { StatusFilterComponent } from "./components/status-filter.component";
|
||||||
|
import { TypeFilterComponent } from "./components/type-filter.component";
|
||||||
|
import { VaultFilterComponent } from "./vault-filter.component";
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [BrowserModule, JslibModule],
|
||||||
|
declarations: [
|
||||||
|
VaultFilterComponent,
|
||||||
|
CollectionFilterComponent,
|
||||||
|
FolderFilterComponent,
|
||||||
|
OrganizationFilterComponent,
|
||||||
|
StatusFilterComponent,
|
||||||
|
TypeFilterComponent,
|
||||||
|
],
|
||||||
|
exports: [VaultFilterComponent],
|
||||||
|
providers: [VaultFilterService],
|
||||||
|
})
|
||||||
|
export class VaultFilterModule {}
|
|
@ -1,52 +1,55 @@
|
||||||
<div id="sends" class="vault">
|
<div id="sends" class="vault">
|
||||||
<div class="groupings">
|
<div class="left-nav">
|
||||||
<div class="content">
|
<div class="vault-filters">
|
||||||
<div class="inner-content">
|
<h2 class="sr-only">{{ "filters" | i18n }}</h2>
|
||||||
<h2 class="sr-only">{{ "filters" | i18n }}</h2>
|
<div class="filter">
|
||||||
<ul>
|
<ul class="filter-options">
|
||||||
<li [ngClass]="{ active: selectedAll }">
|
<li class="filter-option" [ngClass]="{ active: selectedAll }">
|
||||||
<button
|
<span class="filter-buttons">
|
||||||
type="button"
|
<button class="filter-button" (click)="selectAll()" [attr.aria-pressed]="selectedAll">
|
||||||
appStopClick
|
<i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i> {{
|
||||||
(click)="selectAll()"
|
"allSends" | i18n
|
||||||
[attr.aria-pressed]="selectedAll"
|
}}
|
||||||
>
|
</button>
|
||||||
<i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i> {{ "allSends" | i18n }}
|
</span>
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h2>{{ "types" | i18n }}</h2>
|
|
||||||
<ul>
|
|
||||||
<li [ngClass]="{ active: selectedType === sendType.Text }">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
appStopClick
|
|
||||||
(click)="selectType(sendType.Text)"
|
|
||||||
[attr.aria-pressed]="selectedType === sendType.Text"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i> {{
|
|
||||||
"sendTypeText" | i18n
|
|
||||||
}}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li [ngClass]="{ active: selectedType === sendType.File }">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
appStopClick
|
|
||||||
(click)="selectType(sendType.File)"
|
|
||||||
[attr.aria-pressed]="selectedType === sendType.File"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-fw bwi-file" aria-hidden="true"></i> {{
|
|
||||||
"sendTypeFile" | i18n
|
|
||||||
}}
|
|
||||||
</button>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="filter">
|
||||||
<app-nav class="nav"></app-nav>
|
<div class="filter-heading">
|
||||||
|
<h2>{{ "types" | i18n }}</h2>
|
||||||
|
</div>
|
||||||
|
<ul class="filter-options">
|
||||||
|
<li class="filter-option" [ngClass]="{ active: selectedType === sendType.Text }">
|
||||||
|
<span class="filter-buttons">
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="selectType(sendType.Text)"
|
||||||
|
[attr.aria-pressed]="selectedType === sendType.Text"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i> {{
|
||||||
|
"sendTypeText" | i18n
|
||||||
|
}}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li class="filter-option" [ngClass]="{ active: selectedType === sendType.File }">
|
||||||
|
<span class="filter-buttons">
|
||||||
|
<button
|
||||||
|
class="filter-button"
|
||||||
|
(click)="selectType(sendType.File)"
|
||||||
|
[attr.aria-pressed]="selectedType === sendType.File"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-fw bwi-file" aria-hidden="true"></i> {{
|
||||||
|
"sendTypeFile" | i18n
|
||||||
|
}}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<app-nav class="nav"></app-nav>
|
||||||
</div>
|
</div>
|
||||||
<div id="items" class="items">
|
<div id="items" class="items">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
|
|
@ -37,10 +37,10 @@ import { ElectronRendererStorageService } from "jslib-electron/services/electron
|
||||||
|
|
||||||
import { Account } from "../../models/account";
|
import { Account } from "../../models/account";
|
||||||
import { I18nService } from "../../services/i18n.service";
|
import { I18nService } from "../../services/i18n.service";
|
||||||
import { LoginGuardService } from "../../services/loginGuard.service";
|
|
||||||
import { NativeMessagingService } from "../../services/nativeMessaging.service";
|
import { NativeMessagingService } from "../../services/nativeMessaging.service";
|
||||||
import { PasswordRepromptService } from "../../services/passwordReprompt.service";
|
import { PasswordRepromptService } from "../../services/passwordReprompt.service";
|
||||||
import { StateService } from "../../services/state.service";
|
import { StateService } from "../../services/state.service";
|
||||||
|
import { LoginGuard } from "../guards/login.guard";
|
||||||
import { SearchBarService } from "../layout/search/search-bar.service";
|
import { SearchBarService } from "../layout/search/search-bar.service";
|
||||||
|
|
||||||
import { InitService } from "./init.service";
|
import { InitService } from "./init.service";
|
||||||
|
@ -54,7 +54,7 @@ const RELOAD_CALLBACK = new InjectionToken<() => any>("RELOAD_CALLBACK");
|
||||||
InitService,
|
InitService,
|
||||||
NativeMessagingService,
|
NativeMessagingService,
|
||||||
SearchBarService,
|
SearchBarService,
|
||||||
LoginGuardService,
|
LoginGuard,
|
||||||
{
|
{
|
||||||
provide: APP_INITIALIZER,
|
provide: APP_INITIALIZER,
|
||||||
useFactory: (initService: InitService) => initService.init(),
|
useFactory: (initService: InitService) => initService.init(),
|
||||||
|
|
|
@ -1,65 +1,67 @@
|
||||||
<div class="content">
|
<div class="container loading-spinner" *ngIf="!loaded">
|
||||||
<cdk-virtual-scroll-viewport
|
<i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
|
||||||
itemSize="42"
|
</div>
|
||||||
minBufferPx="400"
|
<ng-container *ngIf="loaded">
|
||||||
maxBufferPx="600"
|
<div class="content">
|
||||||
*ngIf="ciphers.length"
|
<cdk-virtual-scroll-viewport
|
||||||
>
|
itemSize="42"
|
||||||
<div class="list">
|
minBufferPx="400"
|
||||||
<button
|
maxBufferPx="600"
|
||||||
type="button"
|
*ngIf="ciphers.length"
|
||||||
*cdkVirtualFor="let c of ciphers; trackBy: trackByFn"
|
>
|
||||||
appStopClick
|
<div class="list">
|
||||||
(click)="selectCipher(c)"
|
<button
|
||||||
(contextmenu)="rightClickCipher(c)"
|
type="button"
|
||||||
title="{{ 'viewItem' | i18n }}"
|
*cdkVirtualFor="let c of ciphers; trackBy: trackByFn"
|
||||||
[ngClass]="{ active: c.id === activeCipherId }"
|
appStopClick
|
||||||
[attr.aria-pressed]="c.id === activeCipherId"
|
(click)="selectCipher(c)"
|
||||||
class="flex-list-item virtual-scroll-item"
|
(contextmenu)="rightClickCipher(c)"
|
||||||
>
|
title="{{ 'viewItem' | i18n }}"
|
||||||
<app-vault-icon [cipher]="c"></app-vault-icon>
|
[ngClass]="{ active: c.id === activeCipherId }"
|
||||||
<div class="flex-cipher-list-item">
|
[attr.aria-pressed]="c.id === activeCipherId"
|
||||||
<span class="text">
|
class="flex-list-item virtual-scroll-item"
|
||||||
{{ c.name }}
|
>
|
||||||
<ng-container *ngIf="c.organizationId">
|
<app-vault-icon [cipher]="c"></app-vault-icon>
|
||||||
<i
|
<div class="flex-cipher-list-item">
|
||||||
class="bwi bwi-collection text-muted"
|
<span class="text">
|
||||||
title="{{ 'shared' | i18n }}"
|
{{ c.name }}
|
||||||
aria-hidden="true"
|
<ng-container *ngIf="c.organizationId">
|
||||||
></i>
|
<i
|
||||||
<span class="sr-only">{{ "shared" | i18n }}</span>
|
class="bwi bwi-collection text-muted"
|
||||||
</ng-container>
|
title="{{ 'shared' | i18n }}"
|
||||||
<ng-container *ngIf="c.hasAttachments">
|
aria-hidden="true"
|
||||||
<i
|
></i>
|
||||||
class="bwi bwi-paperclip text-muted"
|
<span class="sr-only">{{ "shared" | i18n }}</span>
|
||||||
title="{{ 'attachments' | i18n }}"
|
</ng-container>
|
||||||
aria-hidden="true"
|
<ng-container *ngIf="c.hasAttachments">
|
||||||
></i>
|
<i
|
||||||
<span class="sr-only">{{ "attachments" | i18n }}</span>
|
class="bwi bwi-paperclip text-muted"
|
||||||
</ng-container>
|
title="{{ 'attachments' | i18n }}"
|
||||||
</span>
|
aria-hidden="true"
|
||||||
<span *ngIf="c.subTitle" class="detail">{{ c.subTitle }}</span>
|
></i>
|
||||||
</div>
|
<span class="sr-only">{{ "attachments" | i18n }}</span>
|
||||||
</button>
|
</ng-container>
|
||||||
</div>
|
</span>
|
||||||
</cdk-virtual-scroll-viewport>
|
<span *ngIf="c.subTitle" class="detail">{{ c.subTitle }}</span>
|
||||||
<div class="no-items" *ngIf="!ciphers.length">
|
</div>
|
||||||
<i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded" aria-hidden="true"></i>
|
</button>
|
||||||
<ng-container *ngIf="loaded">
|
</div>
|
||||||
|
</cdk-virtual-scroll-viewport>
|
||||||
|
<div class="no-items" *ngIf="!ciphers.length">
|
||||||
<img class="no-items-image" aria-hidden="true" />
|
<img class="no-items-image" aria-hidden="true" />
|
||||||
<p>{{ "noItemsInList" | i18n }}</p>
|
<p>{{ "noItemsInList" | i18n }}</p>
|
||||||
<button (click)="addCipher()" class="btn block primary link">{{ "addItem" | i18n }}</button>
|
<button (click)="addCipher()" class="btn block primary link">{{ "addItem" | i18n }}</button>
|
||||||
</ng-container>
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<button
|
||||||
|
(click)="addCipher()"
|
||||||
|
(contextmenu)="addCipherOptions()"
|
||||||
|
class="block primary"
|
||||||
|
appA11yTitle="{{ 'addItem' | i18n }}"
|
||||||
|
[disabled]="deleted"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-plus bwi-lg" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ng-container>
|
||||||
<div class="footer">
|
|
||||||
<button
|
|
||||||
(click)="addCipher()"
|
|
||||||
(contextmenu)="addCipherOptions()"
|
|
||||||
class="block primary"
|
|
||||||
appA11yTitle="{{ 'addItem' | i18n }}"
|
|
||||||
[disabled]="deleted"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-plus bwi-lg" aria-hidden="true"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
|
@ -1,190 +0,0 @@
|
||||||
<div class="content">
|
|
||||||
<div class="inner-content">
|
|
||||||
<h2 class="sr-only">{{ "filters" | i18n }}</h2>
|
|
||||||
<ul>
|
|
||||||
<li [ngClass]="{ active: selectedAll }">
|
|
||||||
<button type="button" [attr.aria-pressed]="selectedAll" appStopClick (click)="selectAll()">
|
|
||||||
<i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i> {{ "allItems" | i18n }}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li [ngClass]="{ active: selectedFavorites }">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
[attr.aria-pressed]="selectedFavorites"
|
|
||||||
appStopClick
|
|
||||||
(click)="selectFavorites()"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-fw bwi-star" aria-hidden="true"></i> {{ "favorites" | i18n }}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li [ngClass]="{ active: selectedTrash }">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
[attr.aria-pressed]="selectedTrash"
|
|
||||||
appStopClick
|
|
||||||
(click)="selectTrash()"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i> {{ "trash" | i18n }}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h2>{{ "types" | i18n }}</h2>
|
|
||||||
<ul>
|
|
||||||
<li [ngClass]="{ active: selectedType === cipherType.Login }">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
[attr.aria-pressed]="selectedType === cipherType.Login"
|
|
||||||
appStopClick
|
|
||||||
(click)="selectType(cipherType.Login)"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i> {{ "typeLogin" | i18n }}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li [ngClass]="{ active: selectedType === cipherType.Card }">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
[attr.aria-pressed]="selectedType === cipherType.Card"
|
|
||||||
appStopClick
|
|
||||||
(click)="selectType(cipherType.Card)"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i> {{ "typeCard" | i18n }}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li [ngClass]="{ active: selectedType === cipherType.Identity }">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
[attr.aria-pressed]="selectedType === cipherType.Identity"
|
|
||||||
appStopClick
|
|
||||||
(click)="selectType(cipherType.Identity)"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i> {{ "typeIdentity" | i18n }}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li [ngClass]="{ active: selectedType === cipherType.SecureNote }">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
[attr.aria-pressed]="selectedType === cipherType.SecureNote"
|
|
||||||
appStopClick
|
|
||||||
(click)="selectType(cipherType.SecureNote)"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i> {{
|
|
||||||
"typeSecureNote" | i18n
|
|
||||||
}}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<p *ngIf="!loaded" class="text-muted">{{ "loading" | i18n }}</p>
|
|
||||||
<ng-container *ngIf="loaded">
|
|
||||||
<div class="heading">
|
|
||||||
<h2>{{ "folders" | i18n }}</h2>
|
|
||||||
<button (click)="addFolder()" appA11yTitle="{{ 'addFolder' | i18n }}">
|
|
||||||
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<ng-template #recursiveFolders let-folders>
|
|
||||||
<li
|
|
||||||
*ngFor="let f of folders"
|
|
||||||
[ngClass]="{ active: selectedFolder && f.node.id === selectedFolderId }"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
[attr.aria-pressed]="selectedFolder && f.node.id === selectedFolderId"
|
|
||||||
appStopClick
|
|
||||||
(click)="selectFolder(f.node)"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
*ngIf="f.children.length"
|
|
||||||
class="bwi bwi-fw"
|
|
||||||
title="{{ 'toggleCollapse' | i18n }}"
|
|
||||||
aria-hidden="true"
|
|
||||||
[ngClass]="{
|
|
||||||
'bwi-angle-right': isCollapsed(f.node),
|
|
||||||
'bwi-angle-down': !isCollapsed(f.node)
|
|
||||||
}"
|
|
||||||
(click)="collapse(f.node)"
|
|
||||||
appStopProp
|
|
||||||
></i>
|
|
||||||
<i
|
|
||||||
*ngIf="f.children.length === 0"
|
|
||||||
class="bwi bwi-fw bwi-folder"
|
|
||||||
aria-hidden="true"
|
|
||||||
></i>
|
|
||||||
{{ f.node.name }}
|
|
||||||
<span
|
|
||||||
appStopProp
|
|
||||||
appStopClick
|
|
||||||
(click)="editFolder(f.node)"
|
|
||||||
role="button"
|
|
||||||
appA11yTitle="{{ 'editFolder' | i18n }}"
|
|
||||||
*ngIf="f.node.id"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-pencil bwi-fw" aria-hidden="true"></i>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<ul class="bwi-ul" *ngIf="f.children.length && !isCollapsed(f.node)">
|
|
||||||
<ng-container
|
|
||||||
*ngTemplateOutlet="recursiveFolders; context: { $implicit: f.children }"
|
|
||||||
>
|
|
||||||
</ng-container>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ng-template>
|
|
||||||
<ng-container
|
|
||||||
*ngTemplateOutlet="recursiveFolders; context: { $implicit: nestedFolders }"
|
|
||||||
></ng-container>
|
|
||||||
</ul>
|
|
||||||
<div *ngIf="collections && collections.length">
|
|
||||||
<h2>{{ "collections" | i18n }}</h2>
|
|
||||||
<ul>
|
|
||||||
<ng-template #recursiveCollections let-collections>
|
|
||||||
<li
|
|
||||||
*ngFor="let c of collections"
|
|
||||||
[ngClass]="{ active: c.node.id === selectedCollectionId }"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
*ngIf="c.children.length == 0"
|
|
||||||
type="button"
|
|
||||||
[attr.aria-pressed]="c.node.id === selectedCollectionId"
|
|
||||||
appStopClick
|
|
||||||
(click)="selectCollection(c.node)"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
*ngIf="c.children.length"
|
|
||||||
class="bwi bwi-fw"
|
|
||||||
title="{{ 'toggleCollapse' | i18n }}"
|
|
||||||
aria-hidden="true"
|
|
||||||
[ngClass]="{
|
|
||||||
'bwi-angle-right': isCollapsed(c.node),
|
|
||||||
'bwi-angle-down': !isCollapsed(c.node)
|
|
||||||
}"
|
|
||||||
(click)="collapse(c.node)"
|
|
||||||
appStopProp
|
|
||||||
></i>
|
|
||||||
<i
|
|
||||||
*ngIf="c.children.length === 0"
|
|
||||||
class="bwi bwi-fw bwi-collection"
|
|
||||||
aria-hidden="true"
|
|
||||||
></i>
|
|
||||||
{{ c.node.name }}
|
|
||||||
</button>
|
|
||||||
<ul class="bwi-ul" *ngIf="c.children.length && !isCollapsed(c.node)">
|
|
||||||
<ng-container
|
|
||||||
*ngTemplateOutlet="recursiveCollections; context: { $implicit: c.children }"
|
|
||||||
>
|
|
||||||
</ng-container>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ng-template>
|
|
||||||
<ng-container
|
|
||||||
*ngTemplateOutlet="recursiveCollections; context: { $implicit: nestedCollections }"
|
|
||||||
>
|
|
||||||
</ng-container>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
</div>
|
|
||||||
<div class="footer">
|
|
||||||
<app-nav class="nav"></app-nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
|
@ -1,20 +0,0 @@
|
||||||
import { Component } from "@angular/core";
|
|
||||||
|
|
||||||
import { GroupingsComponent as BaseGroupingsComponent } from "jslib-angular/components/groupings.component";
|
|
||||||
import { CollectionService } from "jslib-common/abstractions/collection.service";
|
|
||||||
import { FolderService } from "jslib-common/abstractions/folder.service";
|
|
||||||
import { StateService } from "jslib-common/abstractions/state.service";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: "app-vault-groupings",
|
|
||||||
templateUrl: "groupings.component.html",
|
|
||||||
})
|
|
||||||
export class GroupingsComponent extends BaseGroupingsComponent {
|
|
||||||
constructor(
|
|
||||||
collectionService: CollectionService,
|
|
||||||
folderService: FolderService,
|
|
||||||
stateService: StateService
|
|
||||||
) {
|
|
||||||
super(collectionService, folderService, stateService);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -52,19 +52,16 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<app-vault-groupings
|
<div class="left-nav">
|
||||||
id="groupings"
|
<app-vault-filter
|
||||||
class="groupings"
|
class="vault-filters"
|
||||||
(onAllClicked)="clearGroupingFilters()"
|
[activeFilter]="activeFilter"
|
||||||
(onFavoritesClicked)="filterFavorites()"
|
(onFilterChange)="applyVaultFilter($event)"
|
||||||
(onCipherTypeClicked)="filterCipherType($event)"
|
(onAddFolder)="addFolder()"
|
||||||
(onFolderClicked)="filterFolder($event.id)"
|
(onEditFolder)="editFolder($event.id)"
|
||||||
(onAddFolder)="addFolder()"
|
></app-vault-filter>
|
||||||
(onEditFolder)="editFolder($event.id)"
|
<app-nav class="nav"></app-nav>
|
||||||
(onCollectionClicked)="filterCollection($event.id)"
|
</div>
|
||||||
(onTrashClicked)="filterDeleted()"
|
|
||||||
>
|
|
||||||
</app-vault-groupings>
|
|
||||||
</div>
|
</div>
|
||||||
<ng-template #generator></ng-template>
|
<ng-template #generator></ng-template>
|
||||||
<ng-template #attachments></ng-template>
|
<ng-template #attachments></ng-template>
|
||||||
|
|
|
@ -11,6 +11,7 @@ import { ActivatedRoute, Router } from "@angular/router";
|
||||||
import { first } from "rxjs/operators";
|
import { first } from "rxjs/operators";
|
||||||
|
|
||||||
import { ModalRef } from "jslib-angular/components/modal/modal.ref";
|
import { ModalRef } from "jslib-angular/components/modal/modal.ref";
|
||||||
|
import { VaultFilter } from "jslib-angular/modules/vault-filter/models/vault-filter.model";
|
||||||
import { ModalService } from "jslib-angular/services/modal.service";
|
import { ModalService } from "jslib-angular/services/modal.service";
|
||||||
import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
|
import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
|
||||||
import { EventService } from "jslib-common/abstractions/event.service";
|
import { EventService } from "jslib-common/abstractions/event.service";
|
||||||
|
@ -29,6 +30,7 @@ import { FolderView } from "jslib-common/models/view/folderView";
|
||||||
import { invokeMenu, RendererMenuItem } from "jslib-electron/utils";
|
import { invokeMenu, RendererMenuItem } from "jslib-electron/utils";
|
||||||
|
|
||||||
import { SearchBarService } from "../layout/search/search-bar.service";
|
import { SearchBarService } from "../layout/search/search-bar.service";
|
||||||
|
import { VaultFilterComponent } from "../modules/vault-filter/vault-filter.component";
|
||||||
|
|
||||||
import { AddEditComponent } from "./add-edit.component";
|
import { AddEditComponent } from "./add-edit.component";
|
||||||
import { AttachmentsComponent } from "./attachments.component";
|
import { AttachmentsComponent } from "./attachments.component";
|
||||||
|
@ -36,7 +38,6 @@ import { CiphersComponent } from "./ciphers.component";
|
||||||
import { CollectionsComponent } from "./collections.component";
|
import { CollectionsComponent } from "./collections.component";
|
||||||
import { FolderAddEditComponent } from "./folder-add-edit.component";
|
import { FolderAddEditComponent } from "./folder-add-edit.component";
|
||||||
import { GeneratorComponent } from "./generator.component";
|
import { GeneratorComponent } from "./generator.component";
|
||||||
import { GroupingsComponent } from "./groupings.component";
|
|
||||||
import { PasswordHistoryComponent } from "./password-history.component";
|
import { PasswordHistoryComponent } from "./password-history.component";
|
||||||
import { ShareComponent } from "./share.component";
|
import { ShareComponent } from "./share.component";
|
||||||
import { ViewComponent } from "./view.component";
|
import { ViewComponent } from "./view.component";
|
||||||
|
@ -51,9 +52,9 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
@ViewChild(ViewComponent) viewComponent: ViewComponent;
|
@ViewChild(ViewComponent) viewComponent: ViewComponent;
|
||||||
@ViewChild(AddEditComponent) addEditComponent: AddEditComponent;
|
@ViewChild(AddEditComponent) addEditComponent: AddEditComponent;
|
||||||
@ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
|
@ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
|
||||||
@ViewChild(GroupingsComponent, { static: true }) groupingsComponent: GroupingsComponent;
|
|
||||||
@ViewChild("generator", { read: ViewContainerRef, static: true })
|
@ViewChild("generator", { read: ViewContainerRef, static: true })
|
||||||
generatorModalRef: ViewContainerRef;
|
generatorModalRef: ViewContainerRef;
|
||||||
|
@ViewChild(VaultFilterComponent, { static: true }) vaultFilterComponent: VaultFilterComponent;
|
||||||
@ViewChild("attachments", { read: ViewContainerRef, static: true })
|
@ViewChild("attachments", { read: ViewContainerRef, static: true })
|
||||||
attachmentsModalRef: ViewContainerRef;
|
attachmentsModalRef: ViewContainerRef;
|
||||||
@ViewChild("passwordHistory", { read: ViewContainerRef, static: true })
|
@ViewChild("passwordHistory", { read: ViewContainerRef, static: true })
|
||||||
|
@ -70,12 +71,15 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
type: CipherType = null;
|
type: CipherType = null;
|
||||||
folderId: string = null;
|
folderId: string = null;
|
||||||
collectionId: string = null;
|
collectionId: string = null;
|
||||||
|
organizationId: string = null;
|
||||||
|
myVaultOnly = false;
|
||||||
addType: CipherType = null;
|
addType: CipherType = null;
|
||||||
addOrganizationId: string = null;
|
addOrganizationId: string = null;
|
||||||
addCollectionIds: string[] = null;
|
addCollectionIds: string[] = null;
|
||||||
showingModal = false;
|
showingModal = false;
|
||||||
deleted = false;
|
deleted = false;
|
||||||
userHasPremiumAccess = false;
|
userHasPremiumAccess = false;
|
||||||
|
activeFilter: VaultFilter = new VaultFilter();
|
||||||
|
|
||||||
private modal: ModalRef = null;
|
private modal: ModalRef = null;
|
||||||
|
|
||||||
|
@ -125,6 +129,7 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
break;
|
break;
|
||||||
case "syncCompleted":
|
case "syncCompleted":
|
||||||
await this.load();
|
await this.load();
|
||||||
|
await this.vaultFilterComponent.reloadCollectionsAndFolders(this.activeFilter);
|
||||||
break;
|
break;
|
||||||
case "refreshCiphers":
|
case "refreshCiphers":
|
||||||
this.ciphersComponent.refresh();
|
this.ciphersComponent.refresh();
|
||||||
|
@ -211,49 +216,31 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
async load() {
|
async load() {
|
||||||
this.route.queryParams.pipe(first()).subscribe(async (params) => {
|
this.route.queryParams.pipe(first()).subscribe(async (params) => {
|
||||||
await this.groupingsComponent.load();
|
if (params.cipherId) {
|
||||||
|
const cipherView = new CipherView();
|
||||||
if (params == null) {
|
cipherView.id = params.cipherId;
|
||||||
this.groupingsComponent.selectedAll = true;
|
if (params.action === "clone") {
|
||||||
await this.ciphersComponent.reload();
|
await this.cloneCipher(cipherView);
|
||||||
} else {
|
} else if (params.action === "edit") {
|
||||||
if (params.cipherId) {
|
await this.editCipher(cipherView);
|
||||||
const cipherView = new CipherView();
|
|
||||||
cipherView.id = params.cipherId;
|
|
||||||
if (params.action === "clone") {
|
|
||||||
await this.cloneCipher(cipherView);
|
|
||||||
} else if (params.action === "edit") {
|
|
||||||
await this.editCipher(cipherView);
|
|
||||||
} else {
|
|
||||||
await this.viewCipher(cipherView);
|
|
||||||
}
|
|
||||||
} else if (params.action === "add") {
|
|
||||||
this.addType = Number(params.addType);
|
|
||||||
this.addCipher(this.addType);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (params.deleted) {
|
|
||||||
this.groupingsComponent.selectedTrash = true;
|
|
||||||
await this.filterDeleted();
|
|
||||||
} else if (params.favorites) {
|
|
||||||
this.groupingsComponent.selectedFavorites = true;
|
|
||||||
await this.filterFavorites();
|
|
||||||
} else if (params.type && params.action !== "add") {
|
|
||||||
const t = parseInt(params.type, null);
|
|
||||||
this.groupingsComponent.selectedType = t;
|
|
||||||
await this.filterCipherType(t);
|
|
||||||
} else if (params.folderId) {
|
|
||||||
this.groupingsComponent.selectedFolder = true;
|
|
||||||
this.groupingsComponent.selectedFolderId = params.folderId;
|
|
||||||
await this.filterFolder(params.folderId);
|
|
||||||
} else if (params.collectionId) {
|
|
||||||
this.groupingsComponent.selectedCollectionId = params.collectionId;
|
|
||||||
await this.filterCollection(params.collectionId);
|
|
||||||
} else {
|
} else {
|
||||||
this.groupingsComponent.selectedAll = true;
|
await this.viewCipher(cipherView);
|
||||||
await this.ciphersComponent.reload();
|
|
||||||
}
|
}
|
||||||
|
} else if (params.action === "add") {
|
||||||
|
this.addType = Number(params.addType);
|
||||||
|
this.addCipher(this.addType);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.activeFilter = new VaultFilter({
|
||||||
|
status: params.deleted ? "trash" : params.favorites ? "favorites" : "all",
|
||||||
|
cipherType:
|
||||||
|
params.action === "add" || params.type == null ? null : parseInt(params.type, null),
|
||||||
|
selectedFolderId: params.folderId,
|
||||||
|
selectedCollectionId: params.selectedCollectionId,
|
||||||
|
selectedOrganizationId: params.selectedOrganizationId,
|
||||||
|
myVaultOnly: params.myVaultOnly ?? false,
|
||||||
|
});
|
||||||
|
await this.ciphersComponent.reload(this.buildFilter());
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -547,58 +534,75 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
this.go();
|
this.go();
|
||||||
}
|
}
|
||||||
|
|
||||||
async clearGroupingFilters() {
|
async applyVaultFilter(vaultFilter: VaultFilter) {
|
||||||
this.searchBarService.setPlaceholderText(this.i18nService.t("searchVault"));
|
this.searchBarService.setPlaceholderText(
|
||||||
await this.ciphersComponent.reload();
|
this.i18nService.t(this.calculateSearchBarLocalizationString(vaultFilter))
|
||||||
this.clearFilters();
|
|
||||||
this.go();
|
|
||||||
}
|
|
||||||
|
|
||||||
async filterFavorites() {
|
|
||||||
this.searchBarService.setPlaceholderText(this.i18nService.t("searchFavorites"));
|
|
||||||
await this.ciphersComponent.reload((c) => c.favorite);
|
|
||||||
this.clearFilters();
|
|
||||||
this.favorites = true;
|
|
||||||
this.go();
|
|
||||||
}
|
|
||||||
|
|
||||||
async filterDeleted() {
|
|
||||||
this.searchBarService.setPlaceholderText(this.i18nService.t("searchTrash"));
|
|
||||||
this.ciphersComponent.deleted = true;
|
|
||||||
await this.ciphersComponent.reload(null, true);
|
|
||||||
this.clearFilters();
|
|
||||||
this.deleted = true;
|
|
||||||
this.go();
|
|
||||||
}
|
|
||||||
|
|
||||||
async filterCipherType(type: CipherType) {
|
|
||||||
this.searchBarService.setPlaceholderText(this.i18nService.t("searchType"));
|
|
||||||
await this.ciphersComponent.reload((c) => c.type === type);
|
|
||||||
this.clearFilters();
|
|
||||||
this.type = type;
|
|
||||||
this.go();
|
|
||||||
}
|
|
||||||
|
|
||||||
async filterFolder(folderId: string) {
|
|
||||||
folderId = folderId === "none" ? null : folderId;
|
|
||||||
this.searchBarService.setPlaceholderText(this.i18nService.t("searchFolder"));
|
|
||||||
await this.ciphersComponent.reload((c) => c.folderId === folderId);
|
|
||||||
this.clearFilters();
|
|
||||||
this.folderId = folderId == null ? "none" : folderId;
|
|
||||||
this.go();
|
|
||||||
}
|
|
||||||
|
|
||||||
async filterCollection(collectionId: string) {
|
|
||||||
this.searchBarService.setPlaceholderText(this.i18nService.t("searchCollection"));
|
|
||||||
await this.ciphersComponent.reload(
|
|
||||||
(c) => c.collectionIds != null && c.collectionIds.indexOf(collectionId) > -1
|
|
||||||
);
|
);
|
||||||
this.clearFilters();
|
this.activeFilter = vaultFilter;
|
||||||
this.collectionId = collectionId;
|
await this.ciphersComponent.reload(this.buildFilter());
|
||||||
this.updateCollectionProperties();
|
|
||||||
this.go();
|
this.go();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private calculateSearchBarLocalizationString(vaultFilter: VaultFilter): string {
|
||||||
|
if (vaultFilter.status === "favorites") {
|
||||||
|
return "searchFavorites";
|
||||||
|
}
|
||||||
|
if (vaultFilter.status === "trash") {
|
||||||
|
return "searchTrash";
|
||||||
|
}
|
||||||
|
if (vaultFilter.cipherType != null) {
|
||||||
|
return "searchType";
|
||||||
|
}
|
||||||
|
if (vaultFilter.selectedFolderId != null && vaultFilter.selectedFolderId != "none") {
|
||||||
|
return "searchFolder";
|
||||||
|
}
|
||||||
|
if (vaultFilter.selectedCollectionId != null) {
|
||||||
|
return "searchCollection";
|
||||||
|
}
|
||||||
|
if (vaultFilter.selectedOrganizationId != null) {
|
||||||
|
return "searchOrganization";
|
||||||
|
}
|
||||||
|
if (vaultFilter.myVaultOnly) {
|
||||||
|
return "searchMyVault";
|
||||||
|
}
|
||||||
|
|
||||||
|
return "searchVault";
|
||||||
|
}
|
||||||
|
|
||||||
|
private buildFilter(): (cipher: CipherView) => boolean {
|
||||||
|
return (cipher) => {
|
||||||
|
let cipherPassesFilter = true;
|
||||||
|
if (this.activeFilter.status === "favorites" && cipherPassesFilter) {
|
||||||
|
cipherPassesFilter = cipher.favorite;
|
||||||
|
}
|
||||||
|
if (this.activeFilter.status === "trash" && cipherPassesFilter) {
|
||||||
|
cipherPassesFilter = cipher.isDeleted;
|
||||||
|
}
|
||||||
|
if (this.activeFilter.cipherType != null && cipherPassesFilter) {
|
||||||
|
cipherPassesFilter = cipher.type === this.activeFilter.cipherType;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
this.activeFilter.selectedFolderId != null &&
|
||||||
|
this.activeFilter.selectedFolderId != "none" &&
|
||||||
|
cipherPassesFilter
|
||||||
|
) {
|
||||||
|
cipherPassesFilter = cipher.folderId === this.activeFilter.selectedFolderId;
|
||||||
|
}
|
||||||
|
if (this.activeFilter.selectedCollectionId != null && cipherPassesFilter) {
|
||||||
|
cipherPassesFilter =
|
||||||
|
cipher.collectionIds != null &&
|
||||||
|
cipher.collectionIds.indexOf(this.activeFilter.selectedCollectionId) > -1;
|
||||||
|
}
|
||||||
|
if (this.activeFilter.selectedOrganizationId != null && cipherPassesFilter) {
|
||||||
|
cipherPassesFilter = cipher.organizationId === this.activeFilter.selectedOrganizationId;
|
||||||
|
}
|
||||||
|
if (this.activeFilter.myVaultOnly && cipherPassesFilter) {
|
||||||
|
cipherPassesFilter = cipher.organizationId === null;
|
||||||
|
}
|
||||||
|
return cipherPassesFilter;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
async openGenerator(comingFromAddEdit: boolean, passwordType = true) {
|
async openGenerator(comingFromAddEdit: boolean, passwordType = true) {
|
||||||
if (this.modal != null) {
|
if (this.modal != null) {
|
||||||
this.modal.close();
|
this.modal.close();
|
||||||
|
@ -657,11 +661,11 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
childComponent.onSavedFolder.subscribe(async (folder: FolderView) => {
|
childComponent.onSavedFolder.subscribe(async (folder: FolderView) => {
|
||||||
this.modal.close();
|
this.modal.close();
|
||||||
await this.groupingsComponent.loadFolders();
|
await this.vaultFilterComponent.reloadCollectionsAndFolders(this.activeFilter);
|
||||||
});
|
});
|
||||||
childComponent.onDeletedFolder.subscribe(async (folder: FolderView) => {
|
childComponent.onDeletedFolder.subscribe(async (folder: FolderView) => {
|
||||||
this.modal.close();
|
this.modal.close();
|
||||||
await this.groupingsComponent.loadFolders();
|
await this.vaultFilterComponent.reloadCollectionsAndFolders(this.activeFilter);
|
||||||
});
|
});
|
||||||
|
|
||||||
this.modal.onClosed.subscribe(() => {
|
this.modal.onClosed.subscribe(() => {
|
||||||
|
@ -687,17 +691,6 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
return !confirmed;
|
return !confirmed;
|
||||||
}
|
}
|
||||||
|
|
||||||
private clearFilters() {
|
|
||||||
this.folderId = null;
|
|
||||||
this.collectionId = null;
|
|
||||||
this.favorites = false;
|
|
||||||
this.type = null;
|
|
||||||
this.addCollectionIds = null;
|
|
||||||
this.addType = null;
|
|
||||||
this.addOrganizationId = null;
|
|
||||||
this.deleted = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
private go(queryParams: any = null) {
|
private go(queryParams: any = null) {
|
||||||
if (queryParams == null) {
|
if (queryParams == null) {
|
||||||
queryParams = {
|
queryParams = {
|
||||||
|
@ -708,6 +701,8 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
folderId: this.folderId,
|
folderId: this.folderId,
|
||||||
collectionId: this.collectionId,
|
collectionId: this.collectionId,
|
||||||
deleted: this.deleted ? true : null,
|
deleted: this.deleted ? true : null,
|
||||||
|
organizationId: this.organizationId,
|
||||||
|
myVaultOnly: this.myVaultOnly,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -753,10 +748,10 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
private updateCollectionProperties() {
|
private updateCollectionProperties() {
|
||||||
if (this.collectionId != null) {
|
if (this.collectionId != null) {
|
||||||
const collection = this.groupingsComponent.collections.filter(
|
const collection = this.vaultFilterComponent.collections?.fullList?.filter(
|
||||||
(c) => c.id === this.collectionId
|
(c) => c.id === this.collectionId
|
||||||
);
|
);
|
||||||
if (collection.length > 0) {
|
if (collection != null && collection.length > 0) {
|
||||||
this.addOrganizationId = collection[0].organizationId;
|
this.addOrganizationId = collection[0].organizationId;
|
||||||
this.addCollectionIds = [this.collectionId];
|
this.addCollectionIds = [this.collectionId];
|
||||||
return;
|
return;
|
||||||
|
|
|
@ -1420,7 +1420,7 @@
|
||||||
"description": "Noun: a special folder to hold deleted items"
|
"description": "Noun: a special folder to hold deleted items"
|
||||||
},
|
},
|
||||||
"searchTrash": {
|
"searchTrash": {
|
||||||
"message": "Search trash"
|
"message": "Search Trash"
|
||||||
},
|
},
|
||||||
"permanentlyDeleteItem": {
|
"permanentlyDeleteItem": {
|
||||||
"message": "Permanently Delete Item"
|
"message": "Permanently Delete Item"
|
||||||
|
@ -1902,6 +1902,15 @@
|
||||||
"service": {
|
"service": {
|
||||||
"message": "Service"
|
"message": "Service"
|
||||||
},
|
},
|
||||||
|
"allVaults": {
|
||||||
|
"message": "All Vaults"
|
||||||
|
},
|
||||||
|
"searchOrganization": {
|
||||||
|
"message": "Search Organization"
|
||||||
|
},
|
||||||
|
"searchMyVault": {
|
||||||
|
"message": "Search My Vault"
|
||||||
|
},
|
||||||
"forwardedEmail": {
|
"forwardedEmail": {
|
||||||
"message": "Forwarded Email Alias"
|
"message": "Forwarded Email Alias"
|
||||||
},
|
},
|
||||||
|
|
|
@ -168,3 +168,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button.no-btn {
|
||||||
|
@extend a;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
@include themify($themes) {
|
||||||
|
color: themed("textColor");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,196 @@
|
||||||
|
.left-nav {
|
||||||
|
order: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 22%;
|
||||||
|
min-width: 175px;
|
||||||
|
max-width: 250px;
|
||||||
|
border-right: 1px solid #000000;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
@include themify($themes) {
|
||||||
|
background-color: themed("backgroundColorAlt");
|
||||||
|
border-right-color: themed("borderColor");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vault-filters {
|
||||||
|
user-select: none;
|
||||||
|
scrollbar-gutter: stable;
|
||||||
|
padding: 10px 15px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.filter {
|
||||||
|
hr {
|
||||||
|
margin: 1em 0 1em 0;
|
||||||
|
@include themify($themes) {
|
||||||
|
border-color: themed("hrColor");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-heading {
|
||||||
|
display: flex;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@include themify($themes) {
|
||||||
|
color: themed("headingColor");
|
||||||
|
}
|
||||||
|
font-size: $font-size-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
@extend .no-btn;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
@include themify($themes) {
|
||||||
|
color: themed("headingButtonColor");
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
@include themify($themes) {
|
||||||
|
color: themed("headingButtonHoverColor");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.add-button {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.filter-button {
|
||||||
|
h2 {
|
||||||
|
@include themify($themes) {
|
||||||
|
color: themed("primaryColor");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-button {
|
||||||
|
&:hover {
|
||||||
|
h2 {
|
||||||
|
@include themify($themes) {
|
||||||
|
color: themed("primaryColor");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-options {
|
||||||
|
word-break: break-all;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 0 15px 0;
|
||||||
|
.nested-filter-options {
|
||||||
|
list-style: none;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
padding-left: 0.85em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-option {
|
||||||
|
top: 8px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@include themify($themes) {
|
||||||
|
color: themed("textColor");
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
> .filter-buttons {
|
||||||
|
.filter-button {
|
||||||
|
@include themify($themes) {
|
||||||
|
color: themed("primaryColor");
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-button {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-buttons {
|
||||||
|
padding: 5px 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
.filter-button {
|
||||||
|
@include themify($themes) {
|
||||||
|
color: themed("primaryColor");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
@extend .no-btn;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-button,
|
||||||
|
.toggle-button {
|
||||||
|
@include themify($themes) {
|
||||||
|
color: themed("headingButtonColor");
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
@include themify($themes) {
|
||||||
|
color: themed("headingButtonHoverColor");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-button {
|
||||||
|
visibility: hidden;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
height: 55px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
font-size: $font-size-base * 0.8;
|
||||||
|
flex: 1;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
|
||||||
|
&:not(.active) {
|
||||||
|
@include themify($themes) {
|
||||||
|
background-color: themed("backgroundColorAlt");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: $font-size-base * 1.5;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,10 @@
|
||||||
|
.container {
|
||||||
|
&.loading-spinner {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
|
@ -14,4 +14,6 @@
|
||||||
@import "plugins.scss";
|
@import "plugins.scss";
|
||||||
@import "environment.scss";
|
@import "environment.scss";
|
||||||
@import "header.scss";
|
@import "header.scss";
|
||||||
|
@import "left-nav.scss";
|
||||||
|
@import "loading.scss";
|
||||||
@import "../../jslib/angular/src/scss/icons.scss";
|
@import "../../jslib/angular/src/scss/icons.scss";
|
||||||
|
|
|
@ -93,6 +93,7 @@ $themes: (
|
||||||
accountSwitcherBackgroundColor: $background-color,
|
accountSwitcherBackgroundColor: $background-color,
|
||||||
accountSwitcherTextColor: #ffffff,
|
accountSwitcherTextColor: #ffffff,
|
||||||
svgSuffix: "-light.svg",
|
svgSuffix: "-light.svg",
|
||||||
|
hrColor: #eeeeee,
|
||||||
),
|
),
|
||||||
dark: (
|
dark: (
|
||||||
textColor: #ffffff,
|
textColor: #ffffff,
|
||||||
|
@ -146,6 +147,7 @@ $themes: (
|
||||||
accountSwitcherBackgroundColor: #2f2f2f,
|
accountSwitcherBackgroundColor: #2f2f2f,
|
||||||
accountSwitcherTextColor: #ffffff,
|
accountSwitcherTextColor: #ffffff,
|
||||||
svgSuffix: "-dark.svg",
|
svgSuffix: "-dark.svg",
|
||||||
|
hrColor: #a3a3a3,
|
||||||
),
|
),
|
||||||
nord: (
|
nord: (
|
||||||
textColor: $nord5,
|
textColor: $nord5,
|
||||||
|
@ -199,6 +201,7 @@ $themes: (
|
||||||
accountSwitcherBackgroundColor: $nord0,
|
accountSwitcherBackgroundColor: $nord0,
|
||||||
accountSwitcherTextColor: $nord5,
|
accountSwitcherTextColor: $nord5,
|
||||||
svgSuffix: "-dark.svg",
|
svgSuffix: "-dark.svg",
|
||||||
|
hrColor: $nord4,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,6 @@ app-root {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
> .groupings,
|
|
||||||
> .items,
|
> .items,
|
||||||
> .details,
|
> .details,
|
||||||
> .logo {
|
> .logo {
|
||||||
|
@ -29,275 +28,6 @@ app-root {
|
||||||
|
|
||||||
> .items {
|
> .items {
|
||||||
order: 2;
|
order: 2;
|
||||||
}
|
|
||||||
|
|
||||||
> .details {
|
|
||||||
order: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .logo {
|
|
||||||
order: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .groupings {
|
|
||||||
order: 1;
|
|
||||||
width: 22%;
|
|
||||||
min-width: 175px;
|
|
||||||
max-width: 600px;
|
|
||||||
border-right: 1px solid #000000;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("backgroundColorAlt");
|
|
||||||
border-right-color: themed("borderColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-grow: 1;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inner-content {
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-right: 5px;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
> ul,
|
|
||||||
> div > ul {
|
|
||||||
margin: 0 0 15px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: $font-size-base;
|
|
||||||
font-weight: normal;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("headingColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.heading {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
button {
|
|
||||||
margin-left: auto;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("headingButtonColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("headingButtonHoverColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul:not(.bwi-ul) {
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.bwi-ul {
|
|
||||||
li {
|
|
||||||
word-break: break-all;
|
|
||||||
|
|
||||||
.bwi-li {
|
|
||||||
top: 8px;
|
|
||||||
width: 1.1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Nested indentions
|
|
||||||
ul.bwi-ul {
|
|
||||||
// Level 1
|
|
||||||
li {
|
|
||||||
> button {
|
|
||||||
padding-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bwi-li {
|
|
||||||
left: -4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active > button .bwi-li {
|
|
||||||
left: 11px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Level 2
|
|
||||||
ul li {
|
|
||||||
> button {
|
|
||||||
padding-left: 23px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bwi-li {
|
|
||||||
left: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active > button .bwi-li {
|
|
||||||
left: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Level 3
|
|
||||||
ul ul li {
|
|
||||||
> button {
|
|
||||||
padding-left: 34px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bwi-li {
|
|
||||||
left: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active > button .bwi-li {
|
|
||||||
left: 33px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Level 4
|
|
||||||
ul ul ul li {
|
|
||||||
> button {
|
|
||||||
padding-left: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bwi-li {
|
|
||||||
left: 29px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active > button .bwi-li {
|
|
||||||
left: 44px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Level 5
|
|
||||||
ul ul ul ul li {
|
|
||||||
> button {
|
|
||||||
padding-left: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bwi-li {
|
|
||||||
left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active > button .bwi-li {
|
|
||||||
left: 55px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Level 6
|
|
||||||
ul ul ul ul ul li {
|
|
||||||
> button {
|
|
||||||
padding-left: 67px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bwi-li {
|
|
||||||
left: 51px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active > button .bwi-li {
|
|
||||||
left: 66px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Level 7
|
|
||||||
ul ul ul ul ul ul li {
|
|
||||||
> button {
|
|
||||||
padding-left: 78px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bwi-li {
|
|
||||||
left: 62px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active > button .bwi-li {
|
|
||||||
left: 77px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
button {
|
|
||||||
padding: 5px 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("textColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
visibility: hidden;
|
|
||||||
margin-left: auto;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("headingButtonColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
@include themify($themes) {
|
|
||||||
color: themed("headingButtonHoverColor");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
span {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
margin-left: -15px;
|
|
||||||
margin-right: -5px;
|
|
||||||
padding-left: 15px;
|
|
||||||
padding-right: 5px;
|
|
||||||
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("groupingsActiveColor");
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("backgroundColorAlt");
|
|
||||||
}
|
|
||||||
|
|
||||||
margin-left: -15px;
|
|
||||||
margin-right: -5px;
|
|
||||||
padding-left: 15px;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .items {
|
|
||||||
width: 28%;
|
width: 28%;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
max-width: 350px;
|
max-width: 350px;
|
||||||
|
@ -336,6 +66,7 @@ app-root {
|
||||||
> .details {
|
> .details {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
order: 3;
|
||||||
|
|
||||||
@include themify($themes) {
|
@include themify($themes) {
|
||||||
background-color: themed("backgroundColorAlt2");
|
background-color: themed("backgroundColorAlt2");
|
||||||
|
@ -378,6 +109,7 @@ app-root {
|
||||||
> .logo {
|
> .logo {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
order: 3;
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
|
@ -429,31 +161,4 @@ app-root {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
.btn {
|
|
||||||
width: 100%;
|
|
||||||
font-size: $font-size-base * 0.8;
|
|
||||||
flex: 1;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
|
|
||||||
&:not(.active) {
|
|
||||||
@include themify($themes) {
|
|
||||||
background-color: themed("backgroundColorAlt");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
font-size: $font-size-base * 1.5;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue