devol
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

Add show/hide button to password prompt (#1034)

This commit is contained in:
Oscar Hinton 2021-08-27 14:50:58 +02:00 committed by GitHub
parent 7c8e95d408
commit fa4e5250b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
41 changed files with 697 additions and 1234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
bitwarden_license/src/app/providers/clients/clients.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
ViewChild,
ViewContainerRef
@ -15,18 +14,17 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
import { SearchService } from 'jslib-common/abstractions/search.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { ValidationService } from 'jslib-angular/services/validation.service';
import { PlanType } from 'jslib-common/enums/planType';
import { ProviderUserType } from 'jslib-common/enums/providerUserType';
import { ValidationService } from 'jslib-angular/services/validation.service';
import { Organization } from 'jslib-common/models/domain/organization';
import {
ProviderOrganizationOrganizationDetailsResponse
} from 'jslib-common/models/response/provider/providerOrganizationResponse';
import { ModalComponent } from 'src/app/modal.component';
import { ProviderService } from '../services/provider.service';
import { AddOrganizationComponent } from './add-organization.component';
@ -49,7 +47,6 @@ export class ClientsComponent implements OnInit {
clients: ProviderOrganizationOrganizationDetailsResponse[];
pagedClients: ProviderOrganizationOrganizationDetailsResponse[];
modal: ModalComponent;
protected didScroll = false;
protected pageSize = 100;
@ -60,8 +57,8 @@ export class ClientsComponent implements OnInit {
private apiService: ApiService, private searchService: SearchService,
private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
private toasterService: ToasterService, private validationService: ValidationService,
private providerService: ProviderService, private componentFactoryResolver: ComponentFactoryResolver,
private logService: LogService) { }
private providerService: ProviderService, private logService: LogService,
private modalService: ModalService) { }
async ngOnInit() {
this.route.parent.params.subscribe(async params => {
@ -126,24 +123,18 @@ export class ClientsComponent implements OnInit {
this.didScroll = this.pagedClients.length > this.pageSize;
}
addExistingOrganization() {
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.addModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<AddOrganizationComponent>(AddOrganizationComponent, this.addModalRef);
childComponent.providerId = this.providerId;
childComponent.organizations = this.addableOrganizations;
childComponent.onAddedOrganization.subscribe(async () => {
try {
await this.load();
this.modal.close();
} catch (e) {
this.logService.error(`Handled exception: ${e}`);
}
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
async addExistingOrganization() {
const [modal, childComponent] = await this.modalService.openViewRef(AddOrganizationComponent, this.addModalRef, comp => {
comp.providerId = this.providerId;
comp.organizations = this.addableOrganizations;
comp.onAddedOrganization.subscribe(async () => {
try {
await this.load();
modal.close();
} catch (e) {
this.logService.error(`Handled exception: ${e}`);
}
});
});
}

130
bitwarden_license/src/app/providers/manage/people.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
ViewChild,
ViewContainerRef
@ -17,6 +16,7 @@ import { SearchService } from 'jslib-common/abstractions/search.service';
import { StorageService } from 'jslib-common/abstractions/storage.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { ValidationService } from 'jslib-angular/services/validation.service';
import { ProviderUserStatusType } from 'jslib-common/enums/providerUserStatusType';
@ -33,7 +33,6 @@ import { ProviderUserConfirmRequest } from 'jslib-common/models/request/provider
import { ProviderUserBulkResponse } from 'jslib-common/models/response/provider/providerUserBulkResponse';
import { BasePeopleComponent } from 'src/app/common/base.people.component';
import { ModalComponent } from 'src/app/modal.component';
import { BulkStatusComponent } from 'src/app/organizations/manage/bulk/bulk-status.component';
import { EntityEventsComponent } from 'src/app/organizations/manage/entity-events.component';
import { BulkConfirmComponent } from './bulk/bulk-confirm.component';
@ -59,13 +58,13 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
accessEvents = false;
constructor(apiService: ApiService, private route: ActivatedRoute,
i18nService: I18nService, componentFactoryResolver: ComponentFactoryResolver,
i18nService: I18nService, modalService: ModalService,
platformUtilsService: PlatformUtilsService, toasterService: ToasterService,
cryptoService: CryptoService, private userService: UserService, private router: Router,
storageService: StorageService, searchService: SearchService, validationService: ValidationService,
logService: LogService, searchPipe: SearchPipe, userNamePipe: UserNamePipe) {
super(apiService, searchService, i18nService, platformUtilsService, toasterService, cryptoService,
storageService, validationService, componentFactoryResolver, logService, searchPipe, userNamePipe);
storageService, validationService, modalService, logService, searchPipe, userNamePipe);
}
ngOnInit() {
@ -117,51 +116,29 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
await this.apiService.postProviderUserConfirm(this.providerId, user.id, request);
}
edit(user: ProviderUserUserDetailsResponse) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.addEditModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<UserAddEditComponent>(
UserAddEditComponent, this.addEditModalRef);
childComponent.name = this.userNamePipe.transform(user);
childComponent.providerId = this.providerId;
childComponent.providerUserId = user != null ? user.id : null;
childComponent.onSavedUser.subscribe(() => {
this.modal.close();
this.load();
});
childComponent.onDeletedUser.subscribe(() => {
this.modal.close();
this.removeUser(user);
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
async edit(user: ProviderUserUserDetailsResponse) {
const [modal] = await this.modalService.openViewRef(UserAddEditComponent, this.addEditModalRef, comp => {
comp.name = this.userNamePipe.transform(user);
comp.providerId = this.providerId;
comp.providerUserId = user != null ? user.id : null;
comp.onSavedUser.subscribe(() => {
modal.close();
this.load();
});
comp.onDeletedUser.subscribe(() => {
modal.close();
this.removeUser(user);
});
});
}
async events(user: ProviderUserUserDetailsResponse) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.eventsModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<EntityEventsComponent>(
EntityEventsComponent, this.eventsModalRef);
childComponent.name = this.userNamePipe.transform(user);
childComponent.providerId = this.providerId;
childComponent.entityId = user.id;
childComponent.showUser = false;
childComponent.entity = 'user';
this.modal.onClosed.subscribe(() => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(EntityEventsComponent, this.eventsModalRef, comp => {
comp.name = this.userNamePipe.transform(user);
comp.providerId = this.providerId;
comp.entityId = user.id;
comp.showUser = false;
comp.entity = 'user';
});
}
@ -170,21 +147,13 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
return;
}
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.bulkRemoveModalRef.createComponent(factory).instance;
const childComponent = this.modal.show(BulkRemoveComponent, this.bulkRemoveModalRef);
childComponent.providerId = this.providerId;
childComponent.users = this.getCheckedUsers();
this.modal.onClosed.subscribe(async () => {
await this.load();
this.modal = null;
const [modal] = await this.modalService.openViewRef(BulkRemoveComponent, this.bulkRemoveModalRef, comp => {
comp.providerId = this.providerId;
comp.users = this.getCheckedUsers();
});
await modal.onClosedPromise();
await this.load();
}
async bulkReinvite() {
@ -216,49 +185,34 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
return;
}
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.bulkConfirmModalRef.createComponent(factory).instance;
const childComponent = this.modal.show(BulkConfirmComponent, this.bulkConfirmModalRef);
childComponent.providerId = this.providerId;
childComponent.users = this.getCheckedUsers();
this.modal.onClosed.subscribe(async () => {
await this.load();
this.modal = null;
const [modal] = await this.modalService.openViewRef(BulkConfirmComponent, this.bulkConfirmModalRef, comp => {
comp.providerId = this.providerId;
comp.users = this.getCheckedUsers();
});
await modal.onClosedPromise();
await this.load();
}
private async showBulkStatus(users: ProviderUserUserDetailsResponse[], filteredUsers: ProviderUserUserDetailsResponse[],
request: Promise<ListResponse<ProviderUserBulkResponse>>, successfullMessage: string) {
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.bulkStatusModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<BulkStatusComponent>(
BulkStatusComponent, this.bulkStatusModalRef);
childComponent.loading = true;
const [modal, childComponent] = await this.modalService.openViewRef(BulkStatusComponent, this.bulkStatusModalRef, comp => {
comp.loading = true;
});
// Workaround to handle closing the modal shortly after it has been opened
let close = false;
this.modal.onShown.subscribe(() => {
modal.onShown.subscribe(() => {
if (close) {
this.modal.close();
modal.close();
}
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
});
try {
const response = await request;
if (this.modal) {
if (modal) {
const keyedErrors: any = response.data.filter(r => r.error !== '').reduce((a, x) => ({ ...a, [x.id]: x.error }), {});
const keyedFilteredUsers: any = filteredUsers.reduce((a, x) => ({ ...a, [x.id]: x }), {});
@ -278,9 +232,7 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
}
} catch {
close = true;
if (this.modal) {
this.modal.close();
}
modal.close();
}
}
}

2
jslib

@ -1 +1 @@
Subproject commit add4b2f3e9d85a4a68d67a0da09be14cefe9a6b3
Subproject commit daa4f6f9a6dc84d6cd9a937be6b5392d2cf51eca

38
src/app/accounts/two-factor.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
ViewChild,
ViewContainerRef,
} from '@angular/core';
@ -10,12 +9,6 @@ import {
Router,
} from '@angular/router';
import { TwoFactorOptionsComponent } from './two-factor-options.component';
import { ModalComponent } from '../modal.component';
import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
import { ApiService } from 'jslib-common/abstractions/api.service';
import { AuthService } from 'jslib-common/abstractions/auth.service';
import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
@ -24,8 +17,14 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
import { StateService } from 'jslib-common/abstractions/state.service';
import { StorageService } from 'jslib-common/abstractions/storage.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib-angular/components/two-factor.component';
import { TwoFactorOptionsComponent } from './two-factor-options.component';
@Component({
selector: 'app-two-factor',
templateUrl: 'two-factor.component.html',
@ -36,26 +35,23 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
constructor(authService: AuthService, router: Router,
i18nService: I18nService, apiService: ApiService,
platformUtilsService: PlatformUtilsService, stateService: StateService,
environmentService: EnvironmentService, private componentFactoryResolver: ComponentFactoryResolver,
environmentService: EnvironmentService, private modalService: ModalService,
storageService: StorageService, route: ActivatedRoute) {
super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService,
stateService, storageService, route);
this.onSuccessfulLoginNavigate = this.goAfterLogIn;
}
anotherMethod() {
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
const modal = this.twoFactorOptionsModal.createComponent(factory).instance;
const childComponent = modal.show<TwoFactorOptionsComponent>(TwoFactorOptionsComponent,
this.twoFactorOptionsModal);
childComponent.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
modal.close();
this.selectedProviderType = provider;
await this.init();
});
childComponent.onRecoverSelected.subscribe(() => {
modal.close();
async anotherMethod() {
const [modal] = await this.modalService.openViewRef(TwoFactorOptionsComponent, this.twoFactorOptionsModal, comp => {
comp.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
modal.close();
this.selectedProviderType = provider;
await this.init();
});
comp.onRecoverSelected.subscribe(() => {
modal.close();
});
});
}

42
src/app/common/base.people.component.ts
View File

@ -1,5 +1,4 @@
import {
ComponentFactoryResolver,
Directive,
ViewChild,
ViewContainerRef
@ -17,6 +16,8 @@ import { StorageService } from 'jslib-common/abstractions/storage.service';
import { ConstantsService } from 'jslib-common/services/constants.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { SearchPipe } from 'jslib-angular/pipes/search.pipe';
import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
@ -31,7 +32,6 @@ import { ProviderUserUserDetailsResponse } from 'jslib-common/models/response/pr
import { Utils } from 'jslib-common/misc/utils';
import { ModalComponent } from '../modal.component';
import { UserConfirmComponent } from '../organizations/manage/user-confirm.component';
type StatusType = OrganizationUserStatusType | ProviderUserStatusType;
@ -86,7 +86,6 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
protected didScroll = false;
protected pageSize = 100;
protected modal: ModalComponent = null;
private pagedUsersCount = 0;
@ -94,7 +93,7 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
protected i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
protected toasterService: ToasterService, protected cryptoService: CryptoService,
private storageService: StorageService, protected validationService: ValidationService,
protected componentFactoryResolver: ComponentFactoryResolver, private logService: LogService,
protected modalService: ModalService, private logService: LogService,
private searchPipe: SearchPipe, protected userNamePipe: UserNamePipe) { }
abstract edit(user: UserType): void;
@ -248,29 +247,18 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
const autoConfirm = await this.storageService.get<boolean>(ConstantsService.autoConfirmFingerprints);
if (autoConfirm == null || !autoConfirm) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.confirmModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<UserConfirmComponent>(
UserConfirmComponent, this.confirmModalRef);
childComponent.name = this.userNamePipe.transform(user);
childComponent.userId = user != null ? user.userId : null;
childComponent.publicKey = publicKey;
childComponent.onConfirmedUser.subscribe(async () => {
try {
await confirmUser(publicKey);
this.modal.close();
} catch (e) {
this.logService.error(`Handled exception: ${e}`);
}
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(UserConfirmComponent, this.confirmModalRef, comp => {
comp.name = this.userNamePipe.transform(user);
comp.userId = user != null ? user.userId : null;
comp.publicKey = publicKey;
comp.onConfirmedUser.subscribe(async () => {
try {
await confirmUser(publicKey);
modal.close();
} catch (e) {
this.logService.error(`Handled exception: ${e}`);
}
});
});
return;
}

39
src/app/components/password-reprompt.component.html Normal file
View File

@ -0,0 +1,39 @@
<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<form class="modal-content" #form (ngSubmit)="submit()">
<div class="modal-header">
<h2 class="modal-title" id="confirmUserTitle">
{{'passwordConfirmation' | i18n}}
</h2>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
{{'passwordConfirmationDesc' | i18n}}
<div class="form-group">
<label for="masterPassword">{{'masterPass' | i18n}}</label>
<div class="d-flex">
<input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
name="MasterPassword" class="text-monospace form-control" [(ngModel)]="masterPassword"
required appAutofocus appInputVerbatim>
<button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
(click)="togglePassword()">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-submit" appBlurClick>
<span>{{'ok' | i18n}}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
{{'cancel' | i18n}}
</button>
</div>
</form>
</div>
</div>

8
src/app/components/password-reprompt.component.ts Normal file
View File

@ -0,0 +1,8 @@
import { Component } from '@angular/core';
import { PasswordRepromptComponent as BasePasswordRepromptComponent } from 'jslib-angular/components/password-reprompt.component';
@Component({
templateUrl: 'password-reprompt.component.html',
})
export class PasswordRepromptComponent extends BasePasswordRepromptComponent {}

76
src/app/modal.component.ts
View File

@ -1,76 +0,0 @@
import * as jq from 'jquery';
import {
Component,
ComponentFactoryResolver,
Type,
ViewContainerRef,
} from '@angular/core';
import { ModalComponent as BaseModalComponent } from 'jslib-angular/components/modal.component';
import { Utils } from 'jslib-common/misc/utils';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
@Component({
selector: 'app-modal',
template: `<ng-template #container></ng-template>`,
})
export class ModalComponent extends BaseModalComponent {
el: any = null;
constructor(componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService) {
super(componentFactoryResolver, messagingService);
}
ngOnDestroy() { /* Nothing */ }
show<T>(type: Type<T>, parentContainer: ViewContainerRef, fade: boolean = true,
setComponentParameters: (component: T) => void = null): T {
this.parentContainer = parentContainer;
this.fade = fade;
const factory = this.componentFactoryResolver.resolveComponentFactory<T>(type);
const componentRef = this.container.createComponent<T>(factory);
if (setComponentParameters != null) {
setComponentParameters(componentRef.instance);
}
const modals = Array.from(document.querySelectorAll('.modal'));
if (modals.length > 0) {
this.el = jq(modals[0]);
this.el.modal('show');
this.el.on('show.bs.modal', () => {
this.onShow.emit();
this.messagingService.send('modalShow');
});
this.el.on('shown.bs.modal', () => {
this.onShown.emit();
this.messagingService.send('modalShown');
if (!Utils.isMobileBrowser) {
this.el.find('*[appAutoFocus]').focus();
}
});
this.el.on('hide.bs.modal', () => {
this.onClose.emit();
this.messagingService.send('modalClose');
});
this.el.on('hidden.bs.modal', () => {
this.onClosed.emit();
this.messagingService.send('modalClosed');
if (this.parentContainer != null) {
this.parentContainer.clear();
}
});
}
return componentRef.instance;
}
close() {
if (this.el != null) {
this.el.modal('hide');
}
}
}

73
src/app/organizations/manage/collections.component.ts
View File

@ -1,12 +1,10 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
ViewChild,
ViewContainerRef,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ToasterService } from 'angular2-toaster';
import { ApiService } from 'jslib-common/abstractions/api.service';
@ -16,6 +14,8 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
import { SearchService } from 'jslib-common/abstractions/search.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { CollectionData } from 'jslib-common/models/data/collectionData';
import { Collection } from 'jslib-common/models/domain/collection';
import {
@ -25,7 +25,6 @@ import {
import { ListResponse } from 'jslib-common/models/response/listResponse';
import { CollectionView } from 'jslib-common/models/view/collectionView';
import { ModalComponent } from '../../modal.component';
import { CollectionAddEditComponent } from './collection-add-edit.component';
import { EntityUsersComponent } from './entity-users.component';
@ -47,10 +46,9 @@ export class CollectionsComponent implements OnInit {
protected pageSize = 100;
private pagedCollectionsCount = 0;
private modal: ModalComponent = null;
constructor(private apiService: ApiService, private route: ActivatedRoute,
private collectionService: CollectionService, private componentFactoryResolver: ComponentFactoryResolver,
private collectionService: CollectionService, private modalService: ModalService,
private toasterService: ToasterService, private i18nService: I18nService,
private platformUtilsService: PlatformUtilsService, private userService: UserService,
private searchService: SearchService) { }
@ -100,29 +98,18 @@ export class CollectionsComponent implements OnInit {
this.didScroll = this.pagedCollections.length > this.pageSize;
}
edit(collection: CollectionView) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.addEditModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<CollectionAddEditComponent>(
CollectionAddEditComponent, this.addEditModalRef);
childComponent.organizationId = this.organizationId;
childComponent.collectionId = collection != null ? collection.id : null;
childComponent.onSavedCollection.subscribe(() => {
this.modal.close();
this.load();
});
childComponent.onDeletedCollection.subscribe(() => {
this.modal.close();
this.removeCollection(collection);
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
async edit(collection: CollectionView) {
const [modal] = await this.modalService.openViewRef(CollectionAddEditComponent, this.addEditModalRef, comp => {
comp.organizationId = this.organizationId;
comp.collectionId = collection != null ? collection.id : null;
comp.onSavedCollection.subscribe(() => {
modal.close();
this.load();
});
comp.onDeletedCollection.subscribe(() => {
modal.close();
this.removeCollection(collection);
});
});
}
@ -145,27 +132,17 @@ export class CollectionsComponent implements OnInit {
} catch { }
}
users(collection: CollectionView) {
if (this.modal != null) {
this.modal.close();
}
async users(collection: CollectionView) {
const [modal] = await this.modalService.openViewRef(EntityUsersComponent, this.usersModalRef, comp => {
comp.organizationId = this.organizationId;
comp.entity = 'collection';
comp.entityId = collection.id;
comp.entityName = collection.name;
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.usersModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<EntityUsersComponent>(
EntityUsersComponent, this.usersModalRef);
childComponent.organizationId = this.organizationId;
childComponent.entity = 'collection';
childComponent.entityId = collection.id;
childComponent.entityName = collection.name;
childComponent.onEditedUsers.subscribe(() => {
this.load();
this.modal.close();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
comp.onEditedUsers.subscribe(() => {
this.load();
modal.close();
});
});
}

70
src/app/organizations/manage/groups.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
ViewChild,
ViewContainerRef,
@ -18,11 +17,12 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
import { SearchService } from 'jslib-common/abstractions/search.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { GroupResponse } from 'jslib-common/models/response/groupResponse';
import { Utils } from 'jslib-common/misc/utils';
import { ModalComponent } from '../../modal.component';
import { EntityUsersComponent } from './entity-users.component';
import { GroupAddEditComponent } from './group-add-edit.component';
@ -44,10 +44,9 @@ export class GroupsComponent implements OnInit {
protected pageSize = 100;
private pagedGroupsCount = 0;
private modal: ModalComponent = null;
constructor(private apiService: ApiService, private route: ActivatedRoute,
private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
private i18nService: I18nService, private modalService: ModalService,
private toasterService: ToasterService, private platformUtilsService: PlatformUtilsService,
private userService: UserService, private router: Router,
private searchService: SearchService) { }
@ -95,29 +94,18 @@ export class GroupsComponent implements OnInit {
this.didScroll = this.pagedGroups.length > this.pageSize;
}
edit(group: GroupResponse) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.addEditModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<GroupAddEditComponent>(
GroupAddEditComponent, this.addEditModalRef);
childComponent.organizationId = this.organizationId;
childComponent.groupId = group != null ? group.id : null;
childComponent.onSavedGroup.subscribe(() => {
this.modal.close();
this.load();
});
childComponent.onDeletedGroup.subscribe(() => {
this.modal.close();
this.removeGroup(group);
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
async edit(group: GroupResponse) {
const [modal] = await this.modalService.openViewRef(GroupAddEditComponent, this.addEditModalRef, comp => {
comp.organizationId = this.organizationId;
comp.groupId = group != null ? group.id : null;
comp.onSavedGroup.subscribe(() => {
modal.close();
this.load();
});
comp.onDeletedGroup.subscribe(() => {
modal.close();
this.removeGroup(group);
});
});
}
@ -140,26 +128,16 @@ export class GroupsComponent implements OnInit {
} catch { }
}
users(group: GroupResponse) {
if (this.modal != null) {
this.modal.close();
}
async users(group: GroupResponse) {
const [modal] = await this.modalService.openViewRef(EntityUsersComponent, this.usersModalRef, comp => {
comp.organizationId = this.organizationId;
comp.entity = 'group';
comp.entityId = group.id;
comp.entityName = group.name;
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.usersModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<EntityUsersComponent>(
EntityUsersComponent, this.usersModalRef);
childComponent.organizationId = this.organizationId;
childComponent.entity = 'group';
childComponent.entityId = group.id;
childComponent.entityName = group.name;
childComponent.onEditedUsers.subscribe(() => {
this.modal.close();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
comp.onEditedUsers.subscribe(() => {
modal.close();
});
});
}

189
src/app/organizations/manage/people.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
ViewChild,
ViewContainerRef,
@ -26,6 +25,8 @@ import { StorageService } from 'jslib-common/abstractions/storage.service';
import { SyncService } from 'jslib-common/abstractions/sync.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { OrganizationKeysRequest } from 'jslib-common/models/request/organizationKeysRequest';
import { OrganizationUserBulkRequest } from 'jslib-common/models/request/organizationUserBulkRequest';
import { OrganizationUserConfirmRequest } from 'jslib-common/models/request/organizationUserConfirmRequest';
@ -37,13 +38,11 @@ import { OrganizationUserUserDetailsResponse } from 'jslib-common/models/respons
import { OrganizationUserStatusType } from 'jslib-common/enums/organizationUserStatusType';
import { OrganizationUserType } from 'jslib-common/enums/organizationUserType';
import { PolicyType } from 'jslib-common/enums/policyType';
import { ProviderUserType } from 'jslib-common/enums/providerUserType';
import { SearchPipe } from 'jslib-angular/pipes/search.pipe';
import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
import { BasePeopleComponent } from '../../common/base.people.component';
import { ModalComponent } from '../../modal.component';
import { BulkConfirmComponent } from './bulk/bulk-confirm.component';
import { BulkRemoveComponent } from './bulk/bulk-remove.component';
import { BulkStatusComponent } from './bulk/bulk-status.component';
@ -80,14 +79,14 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
callingUserType: OrganizationUserType = null;
constructor(apiService: ApiService, private route: ActivatedRoute,
i18nService: I18nService, componentFactoryResolver: ComponentFactoryResolver,
i18nService: I18nService, modalService: ModalService,
platformUtilsService: PlatformUtilsService, toasterService: ToasterService,
cryptoService: CryptoService, private userService: UserService, private router: Router,
storageService: StorageService, searchService: SearchService,
validationService: ValidationService, private policyService: PolicyService,
logService: LogService, searchPipe: SearchPipe, userNamePipe: UserNamePipe, private syncService: SyncService) {
super(apiService, searchService, i18nService, platformUtilsService, toasterService, cryptoService,
storageService, validationService, componentFactoryResolver, logService, searchPipe, userNamePipe);
storageService, validationService, modalService, logService, searchPipe, userNamePipe);
}
async ngOnInit() {
@ -189,52 +188,30 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
return this.orgUseResetPassword && orgUser.resetPasswordEnrolled && this.orgResetPasswordPolicyEnabled;
}
edit(user: OrganizationUserUserDetailsResponse) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.addEditModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<UserAddEditComponent>(
UserAddEditComponent, this.addEditModalRef);
childComponent.name = this.userNamePipe.transform(user);
childComponent.organizationId = this.organizationId;
childComponent.organizationUserId = user != null ? user.id : null;
childComponent.onSavedUser.subscribe(() => {
this.modal.close();
this.load();
});
childComponent.onDeletedUser.subscribe(() => {
this.modal.close();
this.removeUser(user);
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
async edit(user: OrganizationUserUserDetailsResponse) {
const [modal] = await this.modalService.openViewRef(UserAddEditComponent, this.addEditModalRef, comp => {
comp.name = this.userNamePipe.transform(user);
comp.organizationId = this.organizationId;
comp.organizationUserId = user != null ? user.id : null;
comp.onSavedUser.subscribe(() => {
modal.close();
this.load();
});
comp.onDeletedUser.subscribe(() => {
modal.close();
this.removeUser(user);
});
});
}
groups(user: OrganizationUserUserDetailsResponse) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.groupsModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<UserGroupsComponent>(
UserGroupsComponent, this.groupsModalRef);
childComponent.name = this.userNamePipe.transform(user);
childComponent.organizationId = this.organizationId;
childComponent.organizationUserId = user != null ? user.id : null;
childComponent.onSavedUser.subscribe(() => {
this.modal.close();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
async groups(user: OrganizationUserUserDetailsResponse) {
const [modal] = await this.modalService.openViewRef(UserGroupsComponent, this.groupsModalRef, comp => {
comp.name = this.userNamePipe.transform(user);
comp.organizationId = this.organizationId;
comp.organizationUserId = user != null ? user.id : null;
comp.onSavedUser.subscribe(() => {
modal.close();
});
});
}
@ -243,21 +220,13 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
return;
}
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.bulkRemoveModalRef.createComponent(factory).instance;
const childComponent = this.modal.show(BulkRemoveComponent, this.bulkRemoveModalRef);
childComponent.organizationId = this.organizationId;
childComponent.users = this.getCheckedUsers();
this.modal.onClosed.subscribe(async () => {
await this.load();
this.modal = null;
const [modal] = await this.modalService.openViewRef(BulkRemoveComponent, this.bulkRemoveModalRef, comp => {
comp.organizationId = this.organizationId;
comp.users = this.getCheckedUsers();
});
await modal.onClosedPromise();
await this.load();
}
async bulkReinvite() {
@ -274,7 +243,6 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
return;
}
try {
const request = new OrganizationUserBulkRequest(filteredUsers.map(user => user.id));
const response = this.apiService.postManyOrganizationUserReinvite(this.organizationId, request);
@ -290,95 +258,58 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
return;
}
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.bulkConfirmModalRef.createComponent(factory).instance;
const childComponent = this.modal.show(BulkConfirmComponent, this.bulkConfirmModalRef);
childComponent.organizationId = this.organizationId;
childComponent.users = this.getCheckedUsers();
this.modal.onClosed.subscribe(async () => {
await this.load();
this.modal = null;
const [modal] = await this.modalService.openViewRef(BulkConfirmComponent, this.bulkConfirmModalRef, comp => {
comp.organizationId = this.organizationId;
comp.users = this.getCheckedUsers();
});
await modal.onClosedPromise();
await this.load();
}
async events(user: OrganizationUserUserDetailsResponse) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.eventsModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<EntityEventsComponent>(
EntityEventsComponent, this.eventsModalRef);
childComponent.name = this.userNamePipe.transform(user);
childComponent.organizationId = this.organizationId;
childComponent.entityId = user.id;
childComponent.showUser = false;
childComponent.entity = 'user';
this.modal.onClosed.subscribe(() => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(EntityEventsComponent, this.eventsModalRef, comp => {
comp.name = this.userNamePipe.transform(user);
comp.organizationId = this.organizationId;
comp.entityId = user.id;
comp.showUser = false;
comp.entity = 'user';
});
}
async resetPassword(user: OrganizationUserUserDetailsResponse) {
if (this.modal != null) {
this.modal.close();
}
const [modal] = await this.modalService.openViewRef(ResetPasswordComponent, this.resetPasswordModalRef, comp => {
comp.name = this.userNamePipe.transform(user);
comp.email = user != null ? user.email : null;
comp.organizationId = this.organizationId;
comp.id = user != null ? user.id : null;
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.resetPasswordModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<ResetPasswordComponent>(
ResetPasswordComponent, this.resetPasswordModalRef);
childComponent.name = this.userNamePipe.transform(user);
childComponent.email = user != null ? user.email : null;
childComponent.organizationId = this.organizationId;
childComponent.id = user != null ? user.id : null;
childComponent.onPasswordReset.subscribe(() => {
this.modal.close();
this.load();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
comp.onPasswordReset.subscribe(() => {
modal.close();
this.load();
});
});
}
private async showBulkStatus(users: OrganizationUserUserDetailsResponse[], filteredUsers: OrganizationUserUserDetailsResponse[],
request: Promise<ListResponse<OrganizationUserBulkResponse>>, successfullMessage: string) {
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.bulkStatusModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<BulkStatusComponent>(
BulkStatusComponent, this.bulkStatusModalRef);
childComponent.loading = true;
const [modal, childComponent] = await this.modalService.openViewRef(BulkStatusComponent, this.bulkStatusModalRef, comp => {
comp.loading = true;
});
// Workaround to handle closing the modal shortly after it has been opened
let close = false;
this.modal.onShown.subscribe(() => {
modal.onShown.subscribe(() => {
if (close) {
this.modal.close();
modal.close();
}
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
});
try {
const response = await request;
if (this.modal) {
if (modal) {
const keyedErrors: any = response.data.filter(r => r.error !== '').reduce((a, x) => ({ ...a, [x.id]: x.error }), {});
const keyedFilteredUsers: any = filteredUsers.reduce((a, x) => ({ ...a, [x.id]: x }), {});
@ -398,9 +329,7 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
}
} catch {
close = true;
if (this.modal) {
this.modal.close();
}
modal.close();
}
}
}

38
src/app/organizations/manage/policies.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
ViewChild,
ViewContainerRef,
@ -18,9 +17,9 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { PolicyResponse } from 'jslib-common/models/response/policyResponse';
import { ModalService } from 'jslib-angular/services/modal.service';
import { ModalComponent } from '../../modal.component';
import { PolicyResponse } from 'jslib-common/models/response/policyResponse';
import { Organization } from 'jslib-common/models/domain/organization';
@ -46,12 +45,11 @@ export class PoliciesComponent implements OnInit {
private enterpriseUrl: string;
private modal: ModalComponent = null;
private orgPolicies: PolicyResponse[];
private policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
constructor(private apiService: ApiService, private route: ActivatedRoute,
private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
private i18nService: I18nService, private modalService: ModalService,
private platformUtilsService: PlatformUtilsService, private userService: UserService,
private policyListService: PolicyListService, private router: Router,
private environmentService: EnvironmentService) { }
@ -106,30 +104,18 @@ export class PoliciesComponent implements OnInit {
this.loading = false;
}
edit(policy: BasePolicy) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.editModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<PolicyEditComponent>(
PolicyEditComponent, this.editModalRef);
childComponent.policy = policy;
childComponent.organizationId = this.organizationId;
childComponent.policiesEnabledMap = this.policiesEnabledMap;
childComponent.onSavedPolicy.subscribe(() => {
this.modal.close();
this.load();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
async edit(policy: BasePolicy) {
const [modal] = await this.modalService.openViewRef(PolicyEditComponent, this.editModalRef, comp => {
comp.policy = policy;
comp.organizationId = this.organizationId;
comp.policiesEnabledMap = this.policiesEnabledMap;
comp.onSavedPolicy.subscribe(() => {
modal.close();
this.load();
});
});
}
// Remove when removing deprecation warning
async goToEnterprisePortal() {
if (this.enterpriseTokenPromise != null) {

98
src/app/organizations/settings/account.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
ViewChild,
ViewContainerRef,
} from '@angular/core';
@ -8,6 +7,7 @@ import {
import { ActivatedRoute } from '@angular/router';
import { ToasterService } from 'angular2-toaster';
import { ModalService } from 'jslib-angular/services/modal.service';
import { ApiService } from 'jslib-common/abstractions/api.service';
import { CryptoService } from 'jslib-common/abstractions/crypto.service';
@ -20,8 +20,6 @@ import { OrganizationUpdateRequest } from 'jslib-common/models/request/organizat
import { OrganizationResponse } from 'jslib-common/models/response/organizationResponse';
import { ModalComponent } from '../../modal.component';
import { ApiKeyComponent } from '../../settings/api-key.component';
import { PurgeVaultComponent } from '../../settings/purge-vault.component';
import { TaxInfoComponent } from '../../settings/tax-info.component';
@ -47,9 +45,8 @@ export class AccountComponent {
taxFormPromise: Promise<any>;
private organizationId: string;
private modal: ModalComponent = null;
constructor(private componentFactoryResolver: ComponentFactoryResolver,
constructor(private modalService: ModalService,
private apiService: ApiService, private i18nService: I18nService,
private toasterService: ToasterService, private route: ActivatedRoute,
private syncService: SyncService, private platformUtilsService: PlatformUtilsService,
@ -96,79 +93,42 @@ export class AccountComponent {
this.toasterService.popAsync('success', null, this.i18nService.t('taxInfoUpdated'));
}
deleteOrganization() {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.deleteModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<DeleteOrganizationComponent>(
DeleteOrganizationComponent, this.deleteModalRef);
childComponent.organizationId = this.organizationId;
this.modal.onClosed.subscribe(async () => {
this.modal = null;
async deleteOrganization() {
await this.modalService.openViewRef(DeleteOrganizationComponent, this.deleteModalRef, comp => {
comp.organizationId = this.organizationId;
});
}
purgeVault() {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.purgeModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<PurgeVaultComponent>(PurgeVaultComponent, this.purgeModalRef);
childComponent.organizationId = this.organizationId;
this.modal.onClosed.subscribe(async () => {
this.modal = null;
async purgeVault() {
await this.modalService.openViewRef(PurgeVaultComponent, this.purgeModalRef, comp => {
comp.organizationId = this.organizationId;
});
}
viewApiKey() {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.apiKeyModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.apiKeyModalRef);
childComponent.keyType = 'organization';
childComponent.entityId = this.organizationId;
childComponent.postKey = this.apiService.postOrganizationApiKey.bind(this.apiService);
childComponent.scope = 'api.organization';
childComponent.grantType = 'client_credentials';
childComponent.apiKeyTitle = 'apiKey';
childComponent.apiKeyWarning = 'apiKeyWarning';
childComponent.apiKeyDescription = 'apiKeyDesc';
this.modal.onClosed.subscribe(async () => {
this.modal = null;
async viewApiKey() {
await this.modalService.openViewRef(ApiKeyComponent, this.apiKeyModalRef, comp => {
comp.keyType = 'organization';
comp.entityId = this.organizationId;
comp.postKey = this.apiService.postOrganizationApiKey.bind(this.apiService);
comp.scope = 'api.organization';
comp.grantType = 'client_credentials';
comp.apiKeyTitle = 'apiKey';
comp.apiKeyWarning = 'apiKeyWarning';
comp.apiKeyDescription = 'apiKeyDesc';
});
}
rotateApiKey() {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.rotateApiKeyModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.rotateApiKeyModalRef);
childComponent.keyType = 'organization';
childComponent.isRotation = true;
childComponent.entityId = this.organizationId;
childComponent.postKey = this.apiService.postOrganizationRotateApiKey.bind(this.apiService);
childComponent.scope = 'api.organization';
childComponent.grantType = 'client_credentials';
childComponent.apiKeyTitle = 'apiKey';
childComponent.apiKeyWarning = 'apiKeyWarning';
childComponent.apiKeyDescription = 'apiKeyRotateDesc';
this.modal.onClosed.subscribe(async () => {
this.modal = null;
async rotateApiKey() {
await this.modalService.openViewRef(ApiKeyComponent, this.rotateApiKeyModalRef, comp => {
comp.keyType = 'organization';
comp.isRotation = true;
comp.entityId = this.organizationId;
comp.postKey = this.apiService.postOrganizationRotateApiKey.bind(this.apiService);
comp.scope = 'api.organization';
comp.grantType = 'client_credentials';
comp.apiKeyTitle = 'apiKey';
comp.apiKeyWarning = 'apiKeyWarning';
comp.apiKeyDescription = 'apiKeyRotateDesc';
});
}
}

15
src/app/organizations/settings/two-factor-setup.component.ts
View File

@ -1,7 +1,4 @@
import {
Component,
ComponentFactoryResolver,
} from '@angular/core';
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApiService } from 'jslib-common/abstractions/api.service';
@ -9,6 +6,8 @@ import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { PolicyService } from 'jslib-common/abstractions/policy.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
import { TwoFactorDuoComponent } from '../../settings/two-factor-duo.component';
@ -20,9 +19,9 @@ import { TwoFactorSetupComponent as BaseTwoFactorSetupComponent } from '../../se
})
export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
constructor(apiService: ApiService, userService: UserService,
componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
modalService: ModalService, messagingService: MessagingService,
policyService: PolicyService, private route: ActivatedRoute) {
super(apiService, userService, componentFactoryResolver, messagingService, policyService);
super(apiService, userService, modalService, messagingService, policyService);
}
async ngOnInit() {
@ -32,10 +31,10 @@ export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
});
}
manage(type: TwoFactorProviderType) {
async manage(type: TwoFactorProviderType) {
switch (type) {
case TwoFactorProviderType.OrganizationDuo:
const duoComp = this.openModal(this.duoModalRef, TwoFactorDuoComponent);
const duoComp = await this.openModal(this.duoModalRef, TwoFactorDuoComponent);
duoComp.type = TwoFactorProviderType.OrganizationDuo;
duoComp.organizationId = this.organizationId;
duoComp.onUpdated.subscribe((enabled: boolean) => {

11
src/app/organizations/tools/exposed-passwords-report.component.ts
View File

@ -1,7 +1,4 @@
import {
Component,
ComponentFactoryResolver,
} from '@angular/core';
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AuditService } from 'jslib-common/abstractions/audit.service';
@ -9,6 +6,8 @@ import { CipherService } from 'jslib-common/abstractions/cipher.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import {
ExposedPasswordsReportComponent as BaseExposedPasswordsReportComponent,
} from '../../tools/exposed-passwords-report.component';
@ -24,9 +23,9 @@ export class ExposedPasswordsReportComponent extends BaseExposedPasswordsReportC
manageableCiphers: Cipher[];
constructor(cipherService: CipherService, auditService: AuditService,
componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
modalService: ModalService, messagingService: MessagingService,
userService: UserService, private route: ActivatedRoute) {
super(cipherService, auditService, componentFactoryResolver, messagingService, userService);
super(cipherService, auditService, modalService, messagingService, userService);
}
ngOnInit() {

11
src/app/organizations/tools/inactive-two-factor-report.component.ts
View File

@ -1,13 +1,12 @@
import {
Component,
ComponentFactoryResolver,
} from '@angular/core';
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CipherService } from 'jslib-common/abstractions/cipher.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import {
InactiveTwoFactorReportComponent as BaseInactiveTwoFactorReportComponent,
} from '../../tools/inactive-two-factor-report.component';
@ -19,10 +18,10 @@ import { CipherView } from 'jslib-common/models/view/cipherView';
templateUrl: '../../tools/inactive-two-factor-report.component.html',
})
export class InactiveTwoFactorReportComponent extends BaseInactiveTwoFactorReportComponent {
constructor(cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
constructor(cipherService: CipherService, modalService: ModalService,
messagingService: MessagingService, userService: UserService,
private route: ActivatedRoute) {
super(cipherService, componentFactoryResolver, messagingService, userService);
super(cipherService, modalService, messagingService, userService);
}
async ngOnInit() {

11
src/app/organizations/tools/reused-passwords-report.component.ts
View File

@ -1,13 +1,12 @@
import {
Component,
ComponentFactoryResolver,
} from '@angular/core';
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CipherService } from 'jslib-common/abstractions/cipher.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { Cipher } from 'jslib-common/models/domain/cipher';
import { CipherView } from 'jslib-common/models/view/cipherView';
@ -23,10 +22,10 @@ import {
export class ReusedPasswordsReportComponent extends BaseReusedPasswordsReportComponent {
manageableCiphers: Cipher[];
constructor(cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
constructor(cipherService: CipherService, modalService: ModalService,
messagingService: MessagingService, userService: UserService,
private route: ActivatedRoute) {
super(cipherService, componentFactoryResolver, messagingService, userService);
super(cipherService, modalService, messagingService, userService);
}
async ngOnInit() {

11
src/app/organizations/tools/unsecured-websites-report.component.ts
View File

@ -1,13 +1,12 @@
import {
Component,
ComponentFactoryResolver,
} from '@angular/core';
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CipherService } from 'jslib-common/abstractions/cipher.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import {
UnsecuredWebsitesReportComponent as BaseUnsecuredWebsitesReportComponent,
} from '../../tools/unsecured-websites-report.component';
@ -19,10 +18,10 @@ import { CipherView } from 'jslib-common/models/view/cipherView';
templateUrl: '../../tools/unsecured-websites-report.component.html',
})
export class UnsecuredWebsitesReportComponent extends BaseUnsecuredWebsitesReportComponent {
constructor(cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
constructor(cipherService: CipherService, modalService: ModalService,
messagingService: MessagingService, userService: UserService,
private route: ActivatedRoute) {
super(cipherService, componentFactoryResolver, messagingService, userService);
super(cipherService, modalService, messagingService, userService);
}
async ngOnInit() {

11
src/app/organizations/tools/weak-passwords-report.component.ts
View File

@ -1,7 +1,4 @@
import {
Component,
ComponentFactoryResolver,
} from '@angular/core';
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CipherService } from 'jslib-common/abstractions/cipher.service';
@ -9,6 +6,8 @@ import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { Cipher } from 'jslib-common/models/domain/cipher';
import { CipherView } from 'jslib-common/models/view/cipherView';
@ -25,9 +24,9 @@ export class WeakPasswordsReportComponent extends BaseWeakPasswordsReportCompone
manageableCiphers: Cipher[];
constructor(cipherService: CipherService, passwordGenerationService: PasswordGenerationService,
componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
modalService: ModalService, messagingService: MessagingService,
userService: UserService, private route: ActivatedRoute) {
super(cipherService, passwordGenerationService, componentFactoryResolver, messagingService, userService);
super(cipherService, passwordGenerationService, modalService, messagingService, userService);
}
async ngOnInit() {

2
src/app/organizations/vault/vault.component.html
View File

@ -20,7 +20,7 @@
</small>
</h1>
<div class="ml-auto d-flex">
<app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [modal]="modal" [deleted]="deleted"
<app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [deleted]="deleted"
[organization]="organization">
</app-vault-bulk-actions>
<button type="button" class="btn btn-outline-primary btn-sm ml-auto" (click)="addCipher()"

139
src/app/organizations/vault/vault.component.ts
View File

@ -1,7 +1,6 @@
import {
ChangeDetectorRef,
Component,
ComponentFactoryResolver,
NgZone,
OnDestroy,
OnInit,
@ -20,14 +19,13 @@ import { SyncService } from 'jslib-common/abstractions/sync.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { Organization } from 'jslib-common/models/domain/organization';
import { CipherView } from 'jslib-common/models/view/cipherView';
import { CipherType } from 'jslib-common/enums/cipherType';
import { ModalComponent } from '../../modal.component';
import { EntityEventsComponent } from '../manage/entity-events.component';
import { AddEditComponent } from './add-edit.component';
import { AttachmentsComponent } from './attachments.component';
@ -55,12 +53,10 @@ export class VaultComponent implements OnInit, OnDestroy {
deleted: boolean = false;
trashCleanupWarning: string = null;
modal: ModalComponent = null;
constructor(private route: ActivatedRoute, private userService: UserService,
private router: Router, private changeDetectorRef: ChangeDetectorRef,
private syncService: SyncService, private i18nService: I18nService,
private componentFactoryResolver: ComponentFactoryResolver, private messagingService: MessagingService,
private modalService: ModalService, private messagingService: MessagingService,
private broadcasterService: BroadcasterService, private ngZone: NgZone,
private platformUtilsService: PlatformUtilsService) { }
@ -202,28 +198,22 @@ export class VaultComponent implements OnInit, OnDestroy {
this.ciphersComponent.search(200);
}
editCipherAttachments(cipher: CipherView) {
async editCipherAttachments(cipher: CipherView) {
if (this.organization.maxStorageGb == null || this.organization.maxStorageGb === 0) {
this.messagingService.send('upgradeOrganization', { organizationId: cipher.organizationId });
return;
}
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.attachmentsModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<AttachmentsComponent>(AttachmentsComponent, this.attachmentsModalRef);
childComponent.organization = this.organization;
childComponent.cipherId = cipher.id;
let madeAttachmentChanges = false;
childComponent.onUploadedAttachment.subscribe(() => madeAttachmentChanges = true);
childComponent.onDeletedAttachment.subscribe(() => madeAttachmentChanges = true);
this.modal.onClosed.subscribe(async () => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(AttachmentsComponent, this.attachmentsModalRef, comp => {
comp.organization = this.organization;
comp.cipherId = cipher.id;
comp.onUploadedAttachment.subscribe(() => madeAttachmentChanges = true);
comp.onDeletedAttachment.subscribe(() => madeAttachmentChanges = true);
});
modal.onClosed.subscribe(async () => {
if (madeAttachmentChanges) {
await this.ciphersComponent.refresh();
}
@ -231,33 +221,23 @@ export class VaultComponent implements OnInit, OnDestroy {
});
}
editCipherCollections(cipher: CipherView) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.collectionsModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<CollectionsComponent>(CollectionsComponent, this.collectionsModalRef);
if (this.organization.canManageAllCollections) {
childComponent.collectionIds = cipher.collectionIds;
childComponent.collections = this.groupingsComponent.collections.filter(c => !c.readOnly);
}
childComponent.organization = this.organization;
childComponent.cipherId = cipher.id;
childComponent.onSavedCollections.subscribe(async () => {
this.modal.close();
await this.ciphersComponent.refresh();
});
this.modal.onClosed.subscribe(async () => {
this.modal = null;
async editCipherCollections(cipher: CipherView) {
const [modal] = await this.modalService.openViewRef(CollectionsComponent, this.collectionsModalRef, comp => {
if (this.organization.canManageAllCollections) {
comp.collectionIds = cipher.collectionIds;
comp.collections = this.groupingsComponent.collections.filter(c => !c.readOnly);
}
comp.organization = this.organization;
comp.cipherId = cipher.id;
comp.onSavedCollections.subscribe(async () => {
modal.close();
await this.ciphersComponent.refresh();
});
});
}
addCipher() {
const component = this.editCipher(null);
async addCipher() {
const component = await this.editCipher(null);
component.organizationId = this.organization.id;
component.type = this.type;
if (this.organization.canManageAllCollections) {
@ -268,39 +248,29 @@ export class VaultComponent implements OnInit, OnDestroy {
}
}
editCipher(cipher: CipherView) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.cipherAddEditModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<AddEditComponent>(AddEditComponent, this.cipherAddEditModalRef);
childComponent.organization = this.organization;
childComponent.cipherId = cipher == null ? null : cipher.id;
childComponent.onSavedCipher.subscribe(async (c: CipherView) => {
this.modal.close();
await this.ciphersComponent.refresh();
});
childComponent.onDeletedCipher.subscribe(async (c: CipherView) => {
this.modal.close();
await this.ciphersComponent.refresh();
});
childComponent.onRestoredCipher.subscribe(async (c: CipherView) => {
this.modal.close();
await this.ciphersComponent.refresh();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
async editCipher(cipher: CipherView) {
const [modal, childComponent] = await this.modalService.openViewRef(AddEditComponent, this.cipherAddEditModalRef, comp => {
comp.organization = this.organization;
comp.cipherId = cipher == null ? null : cipher.id;
comp.onSavedCipher.subscribe(async (c: CipherView) => {
modal.close();
await this.ciphersComponent.refresh();
});
comp.onDeletedCipher.subscribe(async (c: CipherView) => {
modal.close();
await this.ciphersComponent.refresh();
});
comp.onRestoredCipher.subscribe(async (c: CipherView) => {
modal.close();
await this.ciphersComponent.refresh();
});
});
return childComponent;
}
cloneCipher(cipher: CipherView) {
const component = this.editCipher(cipher);
async cloneCipher(cipher: CipherView) {
const component = await this.editCipher(cipher);
component.cloneMode = true;
component.organizationId = this.organization.id;
if (this.organization.canManageAllCollections) {
@ -312,23 +282,12 @@ export class VaultComponent implements OnInit, OnDestroy {
}
async viewEvents(cipher: CipherView) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.eventsModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<EntityEventsComponent>(
EntityEventsComponent, this.eventsModalRef);
childComponent.name = cipher.name;
childComponent.organizationId = this.organization.id;
childComponent.entityId = cipher.id;
childComponent.showUser = true;
childComponent.entity = 'cipher';
this.modal.onClosed.subscribe(() => {
this.modal = null;
await this.modalService.openViewRef(EntityEventsComponent, this.eventsModalRef, comp => {
comp.name = cipher.name;
comp.organizationId = this.organization.id;
comp.entityId = cipher.id;
comp.showUser = true;
comp.entity = 'cipher';
});
}

5
src/app/oss.module.ts
View File

@ -12,9 +12,9 @@ import { ToasterModule } from 'angular2-toaster';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { AppComponent } from './app.component';
import { ModalComponent } from './modal.component';
import { AvatarComponent } from './components/avatar.component';
import { PasswordRepromptComponent } from './components/password-reprompt.component';
import { PasswordStrengthComponent } from './components/password-strength.component';
import { FooterComponent } from './layouts/footer.component';
@ -356,7 +356,6 @@ registerLocaleData(localeZhTw, 'zh-TW');
LinkSsoComponent,
LockComponent,
LoginComponent,
ModalComponent,
NavbarComponent,
OptionsComponent,
OrgAccountComponent,
@ -402,6 +401,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
PasswordGeneratorComponent,
PasswordGeneratorHistoryComponent,
PasswordStrengthComponent,
PasswordRepromptComponent,
PaymentComponent,
PremiumComponent,
ProfileComponent,
@ -468,7 +468,6 @@ registerLocaleData(localeZhTw, 'zh-TW');
I18nPipe,
SearchPipe,
UserNamePipe,
ModalComponent,
NavbarComponent,
FooterComponent,
OrganizationPlansComponent,

45
src/app/send/send.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
NgZone,
ViewChild,
ViewContainerRef,
@ -12,8 +11,6 @@ import { SendComponent as BaseSendComponent } from 'jslib-angular/components/sen
import { AddEditComponent } from './add-edit.component';
import { ModalComponent } from '../modal.component';
import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
@ -23,6 +20,7 @@ import { SendService } from 'jslib-common/abstractions/send.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';
import { ModalService } from 'jslib-angular/services/modal.service';
const BroadcasterSubscriptionId = 'SendComponent';
@ -33,12 +31,10 @@ const BroadcasterSubscriptionId = 'SendComponent';
export class SendComponent extends BaseSendComponent {
@ViewChild('sendAddEdit', { read: ViewContainerRef, static: true }) sendAddEditModalRef: ViewContainerRef;
modal: ModalComponent = null;
constructor(sendService: SendService, i18nService: I18nService,
platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService,
ngZone: NgZone, searchService: SearchService, policyService: PolicyService, userService: UserService,
private componentFactoryResolver: ComponentFactoryResolver, private broadcasterService: BroadcasterService) {
private modalService: ModalService, private broadcasterService: BroadcasterService) {
super(sendService, i18nService, platformUtilsService, environmentService, ngZone, searchService,
policyService, userService);
}
@ -65,37 +61,26 @@ export class SendComponent extends BaseSendComponent {
this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
}
addSend() {
async addSend() {
if (this.disableSend) {
return;
}
const component = this.editSend(null);
const component = await this.editSend(null);
component.type = this.type;
}
editSend(send: SendView) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.sendAddEditModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<AddEditComponent>(
AddEditComponent, this.sendAddEditModalRef);
childComponent.sendId = send == null ? null : send.id;
childComponent.onSavedSend.subscribe(async (s: SendView) => {
this.modal.close();
await this.load();
});
childComponent.onDeletedSend.subscribe(async (s: SendView) => {
this.modal.close();
await this.load();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
async editSend(send: SendView) {
const [modal, childComponent] = await this.modalService.openViewRef(AddEditComponent, this.sendAddEditModalRef, comp => {
childComponent.sendId = send == null ? null : send.id;
comp.onSavedSend.subscribe(async (s: SendView) => {
modal.close();
await this.load();
});
comp.onDeletedSend.subscribe(async (s: SendView) => {
modal.close();
await this.load();
});
});
return childComponent;

61
src/app/services/modal.service.ts Normal file
View File

@ -0,0 +1,61 @@
import {
ApplicationRef,
ComponentFactoryResolver,
Injectable,
Injector,
} from '@angular/core';
import * as jq from 'jquery';
import { first } from 'rxjs/operators';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { ModalRef } from 'jslib-angular/components/modal/modal.ref';
import { ModalService as BaseModalService } from 'jslib-angular/services/modal.service';
import { Utils } from 'jslib-common/misc/utils';
@Injectable()
export class ModalService extends BaseModalService {
el: any = null;
modalOpen: boolean = false;
constructor(componentFactoryResolver: ComponentFactoryResolver, applicationRef: ApplicationRef,
injector: Injector, private messagingService: MessagingService) {
super(componentFactoryResolver, applicationRef, injector);
}
protected setupHandlers(modalRef: ModalRef) {
modalRef.onCreated.pipe(first()).subscribe(() => {
const modals = Array.from(document.querySelectorAll('.modal'));
if (modals.length > 0) {
this.el = jq(modals[0]);
this.el.modal('show');
this.el.on('show.bs.modal', () => {
modalRef.show();
this.messagingService.send('modalShow');
});
this.el.on('shown.bs.modal', () => {
modalRef.shown();
this.messagingService.send('modalShown');
if (!Utils.isMobileBrowser) {
this.el.find('*[appAutoFocus]').focus();
}
});
this.el.on('hide.bs.modal', () => {
this.messagingService.send('modalClose');
});
this.el.on('hidden.bs.modal', () => {
modalRef.closed();
this.messagingService.send('modalClosed');
});
}
});
modalRef.onClose.pipe(first()).subscribe(() => {
if (this.el != null) {
this.el.modal('hide');
}
});
}
}

8
src/app/services/services.module.ts
View File

@ -10,6 +10,7 @@ import { BroadcasterMessagingService } from '../../services/broadcasterMessaging
import { HtmlStorageService } from '../../services/htmlStorage.service';
import { I18nService } from '../../services/i18n.service';
import { MemoryStorageService } from '../../services/memoryStorage.service';
import { PasswordRepromptService } from '../../services/passwordReprompt.service';
import { WebPlatformUtilsService } from '../../services/webPlatformUtils.service';
import { EventService } from './event.service';
@ -21,6 +22,7 @@ import { RouterService } from './router.service';
import { AuthGuardService } from 'jslib-angular/services/auth-guard.service';
import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';
import { LockGuardService } from 'jslib-angular/services/lock-guard.service';
import { ModalService as ModalServiceAbstraction } from 'jslib-angular/services/modal.service';
import { UnauthGuardService } from 'jslib-angular/services/unauth-guard.service';
import { ValidationService } from 'jslib-angular/services/validation.service';
@ -42,7 +44,6 @@ import { FolderService } from 'jslib-common/services/folder.service';
import { ImportService } from 'jslib-common/services/import.service';
import { NotificationsService } from 'jslib-common/services/notifications.service';
import { PasswordGenerationService } from 'jslib-common/services/passwordGeneration.service';
import { PasswordRepromptService } from 'jslib-common/services/passwordReprompt.service';
import { PolicyService } from 'jslib-common/services/policy.service';
import { SearchService } from 'jslib-common/services/search.service';
import { SendService } from 'jslib-common/services/send.service';
@ -88,6 +89,7 @@ import { TokenService as TokenServiceAbstraction } from 'jslib-common/abstractio
import { TotpService as TotpServiceAbstraction } from 'jslib-common/abstractions/totp.service';
import { UserService as UserServiceAbstraction } from 'jslib-common/abstractions/user.service';
import { VaultTimeoutService as VaultTimeoutServiceAbstraction } from 'jslib-common/abstractions/vaultTimeout.service';
import { ModalService } from './modal.service';
const i18nService = new I18nService(window.navigator.language, 'locales');
const stateService = new StateService();
@ -139,7 +141,6 @@ const notificationsService = new NotificationsService(userService, syncService,
environmentService, async () => messagingService.send('logout', { expired: true }), consoleLogService);
const auditService = new AuditService(cryptoFunctionService, apiService);
const eventLoggingService = new EventLoggingService(storageService, apiService, userService, cipherService);
const passwordRepromptService = new PasswordRepromptService(i18nService, cryptoService, platformUtilsService);
containerService.attachToWindow(window);
@ -186,6 +187,7 @@ export function initFactory(): Function {
EventService,
LockGuardService,
PolicyListService,
{ provide: ModalServiceAbstraction, useClass: ModalService },
{ provide: AuditServiceAbstraction, useValue: auditService },
{ provide: AuthServiceAbstraction, useValue: authService },
{ provide: CipherServiceAbstraction, useValue: cipherService },
@ -217,7 +219,7 @@ export function initFactory(): Function {
{ provide: EventLoggingServiceAbstraction, useValue: eventLoggingService },
{ provide: PolicyServiceAbstraction, useValue: policyService },
{ provide: SendServiceAbstraction, useValue: sendService },
{ provide: PasswordRepromptServiceAbstraction, useValue: passwordRepromptService },
{ provide: PasswordRepromptServiceAbstraction, useClass: PasswordRepromptService },
{ provide: LogService, useValue: consoleLogService },
{
provide: APP_INITIALIZER,

108
src/app/settings/account.component.ts
View File

@ -1,11 +1,9 @@
import {
Component,
ComponentFactoryResolver,
ViewChild,
ViewContainerRef,
} from '@angular/core';
import { ModalComponent } from '../modal.component';
import { ApiKeyComponent } from './api-key.component';
import { DeauthorizeSessionsComponent } from './deauthorize-sessions.component';
import { DeleteAccountComponent } from './delete-account.component';
@ -14,6 +12,8 @@ import { PurgeVaultComponent } from './purge-vault.component';
import { ApiService } from 'jslib-common/abstractions/api.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
@Component({
selector: 'app-account',
templateUrl: 'account.component.html',
@ -25,95 +25,47 @@ export class AccountComponent {
@ViewChild('viewUserApiKeyTemplate', { read: ViewContainerRef, static: true }) viewUserApiKeyModalRef: ViewContainerRef;
@ViewChild('rotateUserApiKeyTemplate', { read: ViewContainerRef, static: true }) rotateUserApiKeyModalRef: ViewContainerRef;
private modal: ModalComponent = null;
constructor(private componentFactoryResolver: ComponentFactoryResolver, private apiService: ApiService,
constructor(private modalService: ModalService, private apiService: ApiService,
private userService: UserService) { }
deauthorizeSessions() {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.deauthModalRef.createComponent(factory).instance;
this.modal.show<DeauthorizeSessionsComponent>(DeauthorizeSessionsComponent, this.deauthModalRef);
this.modal.onClosed.subscribe(async () => {
this.modal = null;
});
async deauthorizeSessions() {
await this.modalService.openViewRef(DeauthorizeSessionsComponent, this.deauthModalRef);
}
purgeVault() {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.purgeModalRef.createComponent(factory).instance;
this.modal.show<PurgeVaultComponent>(PurgeVaultComponent, this.purgeModalRef);
this.modal.onClosed.subscribe(async () => {
this.modal = null;
});
async purgeVault() {
await this.modalService.openViewRef(PurgeVaultComponent, this.purgeModalRef);
}
deleteAccount() {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.deleteModalRef.createComponent(factory).instance;
this.modal.show<DeleteAccountComponent>(DeleteAccountComponent, this.deleteModalRef);
this.modal.onClosed.subscribe(async () => {
this.modal = null;
});
async deleteAccount() {
await this.modalService.openViewRef(DeleteAccountComponent, this.deleteModalRef);
}
async viewUserApiKey() {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.viewUserApiKeyModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.viewUserApiKeyModalRef);
childComponent.keyType = 'user';
childComponent.entityId = await this.userService.getUserId();
childComponent.postKey = this.apiService.postUserApiKey.bind(this.apiService);
childComponent.scope = 'api';
childComponent.grantType = 'client_credentials';
childComponent.apiKeyTitle = 'apiKey';
childComponent.apiKeyWarning = 'userApiKeyWarning';
childComponent.apiKeyDescription = 'userApiKeyDesc';
this.modal.onClosed.subscribe(async () => {
this.modal = null;
const entityId = await this.userService.getUserId();
await this.modalService.openViewRef(ApiKeyComponent, this.viewUserApiKeyModalRef, comp => {
comp.keyType = 'user';
comp.entityId = entityId;
comp.postKey = this.apiService.postUserApiKey.bind(this.apiService);
comp.scope = 'api';
comp.grantType = 'client_credentials';
comp.apiKeyTitle = 'apiKey';
comp.apiKeyWarning = 'userApiKeyWarning';
comp.apiKeyDescription = 'userApiKeyDesc';
});
}
async rotateUserApiKey() {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.rotateUserApiKeyModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.rotateUserApiKeyModalRef);
childComponent.keyType = 'user';
childComponent.isRotation = true;
childComponent.entityId = await this.userService.getUserId();
childComponent.postKey = this.apiService.postUserRotateApiKey.bind(this.apiService);
childComponent.scope = 'api';
childComponent.grantType = 'client_credentials';
childComponent.apiKeyTitle = 'apiKey';
childComponent.apiKeyWarning = 'userApiKeyWarning';
childComponent.apiKeyDescription = 'apiKeyRotateDesc';
this.modal.onClosed.subscribe(async () => {
this.modal = null;
const entityId = await this.userService.getUserId();
await this.modalService.openViewRef(ApiKeyComponent, this.rotateUserApiKeyModalRef, comp => {
comp.keyType = 'user';
comp.isRotation = true;
comp.entityId = entityId;
comp.postKey = this.apiService.postUserRotateApiKey.bind(this.apiService);
comp.scope = 'api';
comp.grantType = 'client_credentials';
comp.apiKeyTitle = 'apiKey';
comp.apiKeyWarning = 'userApiKeyWarning';
comp.apiKeyDescription = 'apiKeyRotateDesc';
});
}
}

43
src/app/settings/emergency-access-view.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
ViewChild,
ViewContainerRef,
@ -11,13 +10,13 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
import { CipherService } from 'jslib-common/abstractions/cipher.service';
import { CryptoService } from 'jslib-common/abstractions/crypto.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { CipherData } from 'jslib-common/models/data';
import { Cipher, SymmetricCryptoKey } from 'jslib-common/models/domain';
import { EmergencyAccessViewResponse } from 'jslib-common/models/response/emergencyAccessResponse';
import { CipherView } from 'jslib-common/models/view/cipherView';
import { ModalComponent } from '../modal.component';
import { EmergencyAccessAttachmentsComponent } from './emergency-access-attachments.component';
import { EmergencyAddEditComponent } from './emergency-add-edit.component';
@ -32,10 +31,8 @@ export class EmergencyAccessViewComponent implements OnInit {
id: string;
ciphers: CipherView[] = [];
private modal: ModalComponent = null;
constructor(private cipherService: CipherService, private cryptoService: CryptoService,
private componentFactoryResolver: ComponentFactoryResolver, private router: Router,
private modalService: ModalService, private router: Router,
private route: ActivatedRoute, private apiService: ApiService) { }
ngOnInit() {
@ -50,20 +47,10 @@ export class EmergencyAccessViewComponent implements OnInit {
});
}
selectCipher(cipher: CipherView) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.cipherAddEditModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<EmergencyAddEditComponent>(EmergencyAddEditComponent, this.cipherAddEditModalRef);
childComponent.cipherId = cipher == null ? null : cipher.id;
childComponent.cipher = cipher;
this.modal.onClosed.subscribe(() => {
this.modal = null;
async selectCipher(cipher: CipherView) {
const [_, childComponent] = await this.modalService.openViewRef(EmergencyAddEditComponent, this.cipherAddEditModalRef, comp => {
comp.cipherId = cipher == null ? null : cipher.id;
comp.cipher = cipher;
});
return childComponent;
@ -75,19 +62,9 @@ export class EmergencyAccessViewComponent implements OnInit {
}
async viewAttachments(cipher: CipherView) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.attachmentsModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<EmergencyAccessAttachmentsComponent>(EmergencyAccessAttachmentsComponent, this.attachmentsModalRef);
childComponent.cipher = cipher;
childComponent.emergencyAccessId = this.id;
this.modal.onClosed.subscribe(async () => {
this.modal = null;
await this.modalService.openViewRef(EmergencyAccessAttachmentsComponent, this.attachmentsModalRef, comp => {
comp.cipher = cipher;
comp.emergencyAccessId = this.id;
});
}

112
src/app/settings/emergency-access.component.ts
View File

@ -1,4 +1,9 @@
import { Component, ComponentFactoryResolver, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import {
Component,
OnInit,
ViewChild,
ViewContainerRef
} from '@angular/core';
import { ToasterService } from 'angular2-toaster';
import { ApiService } from 'jslib-common/abstractions/api.service';
@ -18,11 +23,12 @@ import { ConstantsService } from 'jslib-common/services/constants.service';
import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
import { ModalComponent } from '../modal.component';
import { EmergencyAccessAddEditComponent } from './emergency-access-add-edit.component';
import { EmergencyAccessConfirmComponent } from './emergency-access-confirm.component';
import { EmergencyAccessTakeoverComponent } from './emergency-access-takeover.component';
import { ModalService } from 'jslib-angular/services/modal.service';
@Component({
selector: 'emergency-access',
templateUrl: 'emergency-access.component.html',
@ -40,11 +46,8 @@ export class EmergencyAccessComponent implements OnInit {
actionPromise: Promise<any>;
isOrganizationOwner: boolean;
private modal: ModalComponent = null;
constructor(private apiService: ApiService, private i18nService: I18nService,
private componentFactoryResolver: ComponentFactoryResolver,
private platformUtilsService: PlatformUtilsService,
private modalService: ModalService, private platformUtilsService: PlatformUtilsService,
private toasterService: ToasterService, private cryptoService: CryptoService,
private storageService: StorageService, private userService: UserService,
private messagingService: MessagingService, private userNamePipe: UserNamePipe) { }
@ -68,30 +71,19 @@ export class EmergencyAccessComponent implements OnInit {
}
}
edit(details: EmergencyAccessGranteeDetailsResponse) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.addEditModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<EmergencyAccessAddEditComponent>(
EmergencyAccessAddEditComponent, this.addEditModalRef);
childComponent.name = this.userNamePipe.transform(details);
childComponent.emergencyAccessId = details?.id;
childComponent.readOnly = !this.canAccessPremium;
childComponent.onSaved.subscribe(() => {
this.modal.close();
this.load();
});
childComponent.onDeleted.subscribe(() => {
this.modal.close();
this.remove(details);
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
async edit(details: EmergencyAccessGranteeDetailsResponse) {
const [modal] = await this.modalService.openViewRef(EmergencyAccessAddEditComponent, this.addEditModalRef, comp => {
comp.name = this.userNamePipe.transform(details);
comp.emergencyAccessId = details?.id;
comp.readOnly = !this.canAccessPremium;
comp.onSaved.subscribe(() => {
modal.close();
this.load();
});
comp.onDeleted.subscribe(() => {
modal.close();
this.remove(details);
});
});
}
@ -120,30 +112,19 @@ export class EmergencyAccessComponent implements OnInit {
const autoConfirm = await this.storageService.get<boolean>(ConstantsService.autoConfirmFingerprints);
if (autoConfirm == null || !autoConfirm) {
if (this.modal != null) {
this.modal.close();
}
const [modal] = await this.modalService.openViewRef(EmergencyAccessConfirmComponent, this.confirmModalRef, comp => {
comp.name = this.userNamePipe.transform(contact);
comp.emergencyAccessId = contact.id;
comp.userId = contact?.granteeId;
comp.onConfirmed.subscribe(async () => {
modal.close();
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.confirmModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<EmergencyAccessConfirmComponent>(
EmergencyAccessConfirmComponent, this.confirmModalRef);
comp.formPromise = this.doConfirmation(contact);
await comp.formPromise;
childComponent.name = this.userNamePipe.transform(contact);
childComponent.emergencyAccessId = contact.id;
childComponent.userId = contact?.granteeId;
childComponent.onConfirmed.subscribe(async () => {
this.modal.close();
childComponent.formPromise = this.doConfirmation(contact);
await childComponent.formPromise;
updateUser();
this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', this.userNamePipe.transform(contact)));
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
updateUser();
this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', this.userNamePipe.transform(contact)));
});
});
return;
}
@ -224,26 +205,15 @@ export class EmergencyAccessComponent implements OnInit {
}
async takeover(details: EmergencyAccessGrantorDetailsResponse) {
if (this.modal != null) {
this.modal.close();
}
const [modal] = await this.modalService.openViewRef(EmergencyAccessTakeoverComponent, this.takeoverModalRef, comp => {
comp.name = this.userNamePipe.transform(details);
comp.email = details.email;
comp.emergencyAccessId = details != null ? details.id : null;
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.addEditModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<EmergencyAccessTakeoverComponent>(
EmergencyAccessTakeoverComponent, this.takeoverModalRef);
childComponent.name = this.userNamePipe.transform(details);
childComponent.email = details.email;
childComponent.emergencyAccessId = details != null ? details.id : null;
childComponent.onDone.subscribe(() => {
this.modal.close();
this.toasterService.popAsync('success', null, this.i18nService.t('passwordResetFor', this.userNamePipe.transform(details)));
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
comp.onDone.subscribe(() => {
modal.close();
this.toasterService.popAsync('success', null, this.i18nService.t('passwordResetFor', this.userNamePipe.transform(details)));
});
});
}

38
src/app/settings/two-factor-setup.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
Type,
ViewChild,
@ -14,11 +13,13 @@ import { UserService } from 'jslib-common/abstractions/user.service';
import { TwoFactorProviders } from 'jslib-common/services/auth.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { ModalRef } from 'jslib-angular/components/modal/modal.ref';
import { PolicyType } from 'jslib-common/enums/policyType';
import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
import { ModalComponent } from '../modal.component';
import { TwoFactorAuthenticatorComponent } from './two-factor-authenticator.component';
import { TwoFactorDuoComponent } from './two-factor-duo.component';
import { TwoFactorEmailComponent } from './two-factor-email.component';
@ -43,11 +44,10 @@ export class TwoFactorSetupComponent implements OnInit {
canAccessPremium: boolean;
showPolicyWarning = false;
loading = true;
private modal: ModalComponent = null;
modal: ModalRef;
constructor(protected apiService: ApiService, protected userService: UserService,
protected componentFactoryResolver: ComponentFactoryResolver, protected messagingService: MessagingService,
protected modalService: ModalService, protected messagingService: MessagingService,
protected policyService: PolicyService) { }
async ngOnInit() {
@ -91,34 +91,34 @@ export class TwoFactorSetupComponent implements OnInit {
this.loading = false;
}
manage(type: TwoFactorProviderType) {
async manage(type: TwoFactorProviderType) {
switch (type) {
case TwoFactorProviderType.Authenticator:
const authComp = this.openModal(this.authenticatorModalRef, TwoFactorAuthenticatorComponent);
const authComp = await this.openModal(this.authenticatorModalRef, TwoFactorAuthenticatorComponent);
authComp.onUpdated.subscribe((enabled: boolean) => {
this.updateStatus(enabled, TwoFactorProviderType.Authenticator);
});
break;
case TwoFactorProviderType.Yubikey:
const yubiComp = this.openModal(this.yubikeyModalRef, TwoFactorYubiKeyComponent);
const yubiComp = await this.openModal(this.yubikeyModalRef, TwoFactorYubiKeyComponent);
yubiComp.onUpdated.subscribe((enabled: boolean) => {
this.updateStatus(enabled, TwoFactorProviderType.Yubikey);
});
break;
case TwoFactorProviderType.Duo:
const duoComp = this.openModal(this.duoModalRef, TwoFactorDuoComponent);
const duoComp = await this.openModal(this.duoModalRef, TwoFactorDuoComponent);
duoComp.onUpdated.subscribe((enabled: boolean) => {
this.updateStatus(enabled, TwoFactorProviderType.Duo);
});
break;
case TwoFactorProviderType.Email:
const emailComp = this.openModal(this.emailModalRef, TwoFactorEmailComponent);
const emailComp = await this.openModal(this.emailModalRef, TwoFactorEmailComponent);
emailComp.onUpdated.subscribe((enabled: boolean) => {
this.updateStatus(enabled, TwoFactorProviderType.Email);
});
break;
case TwoFactorProviderType.WebAuthn:
const webAuthnComp = this.openModal(this.webAuthnModalRef, TwoFactorWebAuthnComponent);
const webAuthnComp = await this.openModal(this.webAuthnModalRef, TwoFactorWebAuthnComponent);
webAuthnComp.onUpdated.subscribe((enabled: boolean) => {
this.updateStatus(enabled, TwoFactorProviderType.WebAuthn);
});
@ -147,18 +147,10 @@ export class TwoFactorSetupComponent implements OnInit {
return type === TwoFactorProviderType.OrganizationDuo;
}
protected openModal<T>(ref: ViewContainerRef, type: Type<T>): T {
if (this.modal != null) {
this.modal.close();
}
protected async openModal<T>(ref: ViewContainerRef, type: Type<T>): Promise<T> {
const [modal, childComponent] = await this.modalService.openViewRef(type, ref);
this.modal = modal;
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = ref.createComponent(factory).instance;
const childComponent = this.modal.show<T>(type, ref);
this.modal.onClosed.subscribe(() => {
this.modal = null;
});
return childComponent;
}

59
src/app/tools/cipher-report.component.ts
View File

@ -1,5 +1,4 @@
import {
ComponentFactoryResolver,
Directive,
ViewChild,
ViewContainerRef,
@ -9,13 +8,14 @@ import { CipherView } from 'jslib-common/models/view/cipherView';
import { Organization } from 'jslib-common/models/domain/organization';
import { ModalComponent } from '../modal.component';
import { AddEditComponent as OrgAddEditComponent } from '../organizations/vault/add-edit.component';
import { AddEditComponent } from '../vault/add-edit.component';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
@Directive()
export class CipherReportComponent {
@ViewChild('cipherAddEdit', { read: ViewContainerRef, static: true }) cipherAddEditModalRef: ViewContainerRef;
@ -25,9 +25,7 @@ export class CipherReportComponent {
ciphers: CipherView[] = [];
organization: Organization;
private modal: ModalComponent = null;
constructor(private componentFactoryResolver: ComponentFactoryResolver, protected userService: UserService,
constructor(private modalService: ModalService, protected userService: UserService,
protected messagingService: MessagingService, public requiresPaid: boolean) { }
async load() {
@ -37,40 +35,29 @@ export class CipherReportComponent {
this.hasLoaded = true;
}
selectCipher(cipher: CipherView) {
if (this.modal != null) {
this.modal.close();
}
async selectCipher(cipher: CipherView) {
const type = this.organization != null ? OrgAddEditComponent : AddEditComponent;
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.cipherAddEditModalRef.createComponent(factory).instance;
let childComponent: OrgAddEditComponent | AddEditComponent;
if (this.organization != null) {
childComponent = this.modal.show<OrgAddEditComponent>(OrgAddEditComponent, this.cipherAddEditModalRef);
(childComponent as OrgAddEditComponent).organization = this.organization;
} else {
childComponent = this.modal.show<AddEditComponent>(AddEditComponent, this.cipherAddEditModalRef);
}
const [modal, childComponent] = await this.modalService.openViewRef(type, this.cipherAddEditModalRef, (comp: OrgAddEditComponent | AddEditComponent) => {
if (this.organization != null) {
(comp as OrgAddEditComponent).organization = this.organization;
comp.organizationId = this.organization.id;
}
childComponent.cipherId = cipher == null ? null : cipher.id;
if (this.organization != null) {
childComponent.organizationId = this.organization.id;
}
childComponent.onSavedCipher.subscribe(async (c: CipherView) => {
this.modal.close();
await this.load();
});
childComponent.onDeletedCipher.subscribe(async (c: CipherView) => {
this.modal.close();
await this.load();
});
childComponent.onRestoredCipher.subscribe(async (c: CipherView) => {
this.modal.close();
await this.load();
});
comp.cipherId = cipher == null ? null : cipher.id;
comp.onSavedCipher.subscribe(async (c: CipherView) => {
modal.close();
await this.load();
});
comp.onDeletedCipher.subscribe(async (c: CipherView) => {
modal.close();
await this.load();
});
comp.onRestoredCipher.subscribe(async (c: CipherView) => {
modal.close();
await this.load();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
});
return childComponent;

7
src/app/tools/exposed-passwords-report.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
} from '@angular/core';
@ -9,6 +8,8 @@ import { CipherService } from 'jslib-common/abstractions/cipher.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { CipherView } from 'jslib-common/models/view/cipherView';
import { CipherType } from 'jslib-common/enums/cipherType';
@ -23,9 +24,9 @@ export class ExposedPasswordsReportComponent extends CipherReportComponent imple
exposedPasswordMap = new Map<string, number>();
constructor(protected cipherService: CipherService, protected auditService: AuditService,
componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
modalService: ModalService, messagingService: MessagingService,
userService: UserService) {
super(componentFactoryResolver, userService, messagingService, true);
super(modalService, userService, messagingService, true);
}
ngOnInit() {

7
src/app/tools/inactive-two-factor-report.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
} from '@angular/core';
@ -8,6 +7,8 @@ import { CipherService } from 'jslib-common/abstractions/cipher.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { CipherView } from 'jslib-common/models/view/cipherView';
import { CipherType } from 'jslib-common/enums/cipherType';
@ -24,9 +25,9 @@ export class InactiveTwoFactorReportComponent extends CipherReportComponent impl
services = new Map<string, string>();
cipherDocs = new Map<string, string>();
constructor(protected cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
constructor(protected cipherService: CipherService, modalService: ModalService,
messagingService: MessagingService, userService: UserService) {
super(componentFactoryResolver, userService, messagingService, true);
super(modalService, userService, messagingService, true);
}
async ngOnInit() {

21
src/app/tools/password-generator.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
ViewChild,
ViewContainerRef,
} from '@angular/core';
@ -13,7 +12,7 @@ import {
PasswordGeneratorComponent as BasePasswordGeneratorComponent,
} from 'jslib-angular/components/password-generator.component';
import { ModalComponent } from '../modal.component';
import { ModalService } from 'jslib-angular/services/modal.service';
import { PasswordGeneratorHistoryComponent } from './password-generator-history.component';
@Component({
@ -23,25 +22,13 @@ import { PasswordGeneratorHistoryComponent } from './password-generator-history.
export class PasswordGeneratorComponent extends BasePasswordGeneratorComponent {
@ViewChild('historyTemplate', { read: ViewContainerRef, static: true }) historyModalRef: ViewContainerRef;
private modal: ModalComponent = null;
constructor(passwordGenerationService: PasswordGenerationService, platformUtilsService: PlatformUtilsService,
i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver) {
i18nService: I18nService, private modalService: ModalService) {
super(passwordGenerationService, platformUtilsService, i18nService, window);
}
history() {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.historyModalRef.createComponent(factory).instance;
this.modal.show<PasswordGeneratorHistoryComponent>(PasswordGeneratorHistoryComponent, this.historyModalRef);
this.modal.onClosed.subscribe(async () => {
this.modal = null;
});
async history() {
await this.modalService.openViewRef(PasswordGeneratorHistoryComponent, this.historyModalRef);
}
lengthChanged() {

7
src/app/tools/reused-passwords-report.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
} from '@angular/core';
@ -8,6 +7,8 @@ import { CipherService } from 'jslib-common/abstractions/cipher.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { CipherView } from 'jslib-common/models/view/cipherView';
import { CipherType } from 'jslib-common/enums/cipherType';
@ -21,9 +22,9 @@ import { CipherReportComponent } from './cipher-report.component';
export class ReusedPasswordsReportComponent extends CipherReportComponent implements OnInit {
passwordUseMap: Map<string, number>;
constructor(protected cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
constructor(protected cipherService: CipherService, modalService: ModalService,
messagingService: MessagingService, userService: UserService) {
super(componentFactoryResolver, userService, messagingService, true);
super(modalService, userService, messagingService, true);
}
async ngOnInit() {

7
src/app/tools/unsecured-websites-report.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
} from '@angular/core';
@ -8,6 +7,8 @@ import { CipherService } from 'jslib-common/abstractions/cipher.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { CipherType } from 'jslib-common/enums/cipherType';
import { CipherView } from 'jslib-common/models/view/cipherView';
@ -19,9 +20,9 @@ import { CipherReportComponent } from './cipher-report.component';
templateUrl: 'unsecured-websites-report.component.html',
})
export class UnsecuredWebsitesReportComponent extends CipherReportComponent implements OnInit {
constructor(protected cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
constructor(protected cipherService: CipherService, modalService: ModalService,
messagingService: MessagingService, userService: UserService) {
super(componentFactoryResolver, userService, messagingService, true);
super(modalService, userService, messagingService, true);
}
async ngOnInit() {

7
src/app/tools/weak-passwords-report.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
} from '@angular/core';
@ -9,6 +8,8 @@ import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ModalService } from 'jslib-angular/services/modal.service';
import { CipherView } from 'jslib-common/models/view/cipherView';
import { CipherType } from 'jslib-common/enums/cipherType';
@ -26,9 +27,9 @@ export class WeakPasswordsReportComponent extends CipherReportComponent implemen
private passwordStrengthCache = new Map<string, number>();
constructor(protected cipherService: CipherService, protected passwordGenerationService: PasswordGenerationService,
componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
modalService: ModalService, messagingService: MessagingService,
userService: UserService) {
super(componentFactoryResolver, userService, messagingService, true);
super(modalService, userService, messagingService, true);
}
async ngOnInit() {

104
src/app/vault/bulk-actions.component.ts
View File

@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
Input,
ViewChild,
ViewContainerRef,
@ -11,9 +10,9 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
import { CipherRepromptType } from 'jslib-common/enums/cipherRepromptType';
import { Organization } from 'jslib-common/models/domain/organization';
import { ModalService } from 'jslib-angular/services/modal.service';
import { ModalComponent } from '../modal.component';
import { Organization } from 'jslib-common/models/domain/organization';
import { BulkDeleteComponent } from './bulk-delete.component';
import { BulkMoveComponent } from './bulk-move.component';
@ -27,7 +26,6 @@ import { CiphersComponent } from './ciphers.component';
})
export class BulkActionsComponent {
@Input() ciphersComponent: CiphersComponent;
@Input() modal: ModalComponent;
@Input() deleted: boolean;
@Input() organization: Organization;
@ -36,10 +34,8 @@ export class BulkActionsComponent {
@ViewChild('bulkMoveTemplate', { read: ViewContainerRef, static: true }) bulkMoveModalRef: ViewContainerRef;
@ViewChild('bulkShareTemplate', { read: ViewContainerRef, static: true }) bulkShareModalRef: ViewContainerRef;
constructor(private toasterService: ToasterService,
private i18nService: I18nService,
private componentFactoryResolver: ComponentFactoryResolver,
private passwordRepromptService: PasswordRepromptService) { }
constructor(private toasterService: ToasterService, private i18nService: I18nService,
private modalService: ModalService, private passwordRepromptService: PasswordRepromptService) { }
async bulkDelete() {
if (!await this.promptPassword()) {
@ -53,24 +49,14 @@ export class BulkActionsComponent {
return;
}
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.bulkDeleteModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<BulkDeleteComponent>(BulkDeleteComponent, this.bulkDeleteModalRef);
childComponent.permanent = this.deleted;
childComponent.cipherIds = selectedIds;
childComponent.organization = this.organization;
childComponent.onDeleted.subscribe(async () => {
this.modal.close();
await this.ciphersComponent.refresh();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(BulkDeleteComponent, this.bulkDeleteModalRef, comp => {
comp.permanent = this.deleted;
comp.cipherIds = selectedIds;
comp.organization = this.organization;
comp.onDeleted.subscribe(async () => {
modal.close();
await this.ciphersComponent.refresh();
});
});
}
@ -86,22 +72,12 @@ export class BulkActionsComponent {
return;
}
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.bulkRestoreModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<BulkRestoreComponent>(BulkRestoreComponent, this.bulkRestoreModalRef);
childComponent.cipherIds = selectedIds;
childComponent.onRestored.subscribe(async () => {
this.modal.close();
await this.ciphersComponent.refresh();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(BulkRestoreComponent, this.bulkRestoreModalRef, comp => {
comp.cipherIds = selectedIds;
comp.onRestored.subscribe(async () => {
modal.close();
await this.ciphersComponent.refresh();
});
});
}
@ -117,22 +93,12 @@ export class BulkActionsComponent {
return;
}
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.bulkShareModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<BulkShareComponent>(BulkShareComponent, this.bulkShareModalRef);
childComponent.ciphers = selectedCiphers;
childComponent.onShared.subscribe(async () => {
this.modal.close();
await this.ciphersComponent.refresh();
});
this.modal.onClosed.subscribe(async () => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(BulkShareComponent, this.bulkShareModalRef, comp => {
comp.ciphers = selectedCiphers;
comp.onShared.subscribe(async () => {
modal.close();
await this.ciphersComponent.refresh();
});
});
}
@ -148,22 +114,12 @@ export class BulkActionsComponent {
return;
}
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.bulkMoveModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<BulkMoveComponent>(BulkMoveComponent, this.bulkMoveModalRef);
childComponent.cipherIds = selectedIds;
childComponent.onMoved.subscribe(async () => {
this.modal.close();
await this.ciphersComponent.refresh();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(BulkMoveComponent, this.bulkMoveModalRef, comp => {
comp.cipherIds = selectedIds;
comp.onMoved.subscribe(async () => {
modal.close();
await this.ciphersComponent.refresh();
});
});
}

2
src/app/vault/vault.component.html
View File

@ -21,7 +21,7 @@
</small>
</h1>
<div class="ml-auto d-flex">
<app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [modal]="modal" [deleted]="deleted">
<app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [deleted]="deleted">
</app-vault-bulk-actions>
<button type="button" class="btn btn-outline-primary btn-sm" (click)="addCipher()" *ngIf="!deleted">
<i class="fa fa-plus fa-fw" aria-hidden="true"></i>{{'addItem' | i18n}}

198
src/app/vault/vault.component.ts
View File

@ -1,7 +1,6 @@
import {
ChangeDetectorRef,
Component,
ComponentFactoryResolver,
NgZone,
OnDestroy,
OnInit,
@ -17,8 +16,6 @@ import { CipherType } from 'jslib-common/enums/cipherType';
import { CipherView } from 'jslib-common/models/view/cipherView';
import { ModalComponent } from '../modal.component';
import { OrganizationsComponent } from '../settings/organizations.component';
import { UpdateKeyComponent } from '../settings/update-key.component';
import { AddEditComponent } from './add-edit.component';
@ -38,6 +35,7 @@ import { TokenService } from 'jslib-common/abstractions/token.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';
import { ModalService } from 'jslib-angular/services/modal.service';
const BroadcasterSubscriptionId = 'VaultComponent';
@ -68,11 +66,9 @@ export class VaultComponent implements OnInit, OnDestroy {
deleted: boolean = false;
trashCleanupWarning: string = null;
modal: ModalComponent = null;
constructor(private syncService: SyncService, private route: ActivatedRoute,
private router: Router, private changeDetectorRef: ChangeDetectorRef,
private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
private i18nService: I18nService, private modalService: ModalService,
private tokenService: TokenService, private cryptoService: CryptoService,
private messagingService: MessagingService, private userService: UserService,
private platformUtilsService: PlatformUtilsService, private broadcasterService: BroadcasterService,
@ -232,22 +228,15 @@ export class VaultComponent implements OnInit, OnDestroy {
}
}
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.attachmentsModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<AttachmentsComponent>(AttachmentsComponent, this.attachmentsModalRef);
childComponent.cipherId = cipher.id;
let madeAttachmentChanges = false;
childComponent.onUploadedAttachment.subscribe(() => madeAttachmentChanges = true);
childComponent.onDeletedAttachment.subscribe(() => madeAttachmentChanges = true);
childComponent.onReuploadedAttachment.subscribe(() => madeAttachmentChanges = true);
const [modal] = await this.modalService.openViewRef(AttachmentsComponent, this.attachmentsModalRef, comp => {
comp.cipherId = cipher.id;
comp.onUploadedAttachment.subscribe(() => madeAttachmentChanges = true);
comp.onDeletedAttachment.subscribe(() => madeAttachmentChanges = true);
comp.onReuploadedAttachment.subscribe(() => madeAttachmentChanges = true);
});
this.modal.onClosed.subscribe(async () => {
this.modal = null;
modal.onClosed.subscribe(async () => {
if (madeAttachmentChanges) {
await this.ciphersComponent.refresh();
}
@ -255,96 +244,54 @@ export class VaultComponent implements OnInit, OnDestroy {
});
}
shareCipher(cipher: CipherView) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.shareModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<ShareComponent>(ShareComponent, this.shareModalRef);
childComponent.cipherId = cipher.id;
childComponent.onSharedCipher.subscribe(async () => {
this.modal.close();
await this.ciphersComponent.refresh();
});
this.modal.onClosed.subscribe(async () => {
this.modal = null;
async shareCipher(cipher: CipherView) {
const [modal] = await this.modalService.openViewRef(ShareComponent, this.shareModalRef, comp => {
comp.cipherId = cipher.id;
comp.onSharedCipher.subscribe(async () => {
modal.close();
await this.ciphersComponent.refresh();
});
});
}
editCipherCollections(cipher: CipherView) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.collectionsModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<CollectionsComponent>(CollectionsComponent, this.collectionsModalRef);
childComponent.cipherId = cipher.id;
childComponent.onSavedCollections.subscribe(async () => {
this.modal.close();
await this.ciphersComponent.refresh();
});
this.modal.onClosed.subscribe(async () => {
this.modal = null;
async editCipherCollections(cipher: CipherView) {
const [modal] = await this.modalService.openViewRef(CollectionsComponent, this.collectionsModalRef, comp => {
comp.cipherId = cipher.id;
comp.onSavedCollections.subscribe(async () => {
modal.close();
await this.ciphersComponent.refresh();
});
});
}
async addFolder() {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.folderAddEditModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<FolderAddEditComponent>(
FolderAddEditComponent, this.folderAddEditModalRef);
childComponent.folderId = null;
childComponent.onSavedFolder.subscribe(async () => {
this.modal.close();
await this.groupingsComponent.loadFolders();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(FolderAddEditComponent, this.folderAddEditModalRef, comp => {
comp.folderId = null;
comp.onSavedFolder.subscribe(async () => {
modal.close();
await this.groupingsComponent.loadFolders();
});
});
}
async editFolder(folderId: string) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.folderAddEditModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<FolderAddEditComponent>(
FolderAddEditComponent, this.folderAddEditModalRef);
childComponent.folderId = folderId;
childComponent.onSavedFolder.subscribe(async () => {
this.modal.close();
await this.groupingsComponent.loadFolders();
});
childComponent.onDeletedFolder.subscribe(async () => {
this.modal.close();
await this.groupingsComponent.loadFolders();
await this.filterFolder('none');
this.groupingsComponent.selectedFolderId = null;
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(FolderAddEditComponent, this.folderAddEditModalRef, comp => {
comp.folderId = folderId;
comp.onSavedFolder.subscribe(async () => {
modal.close();
await this.groupingsComponent.loadFolders();
});
comp.onDeletedFolder.subscribe(async () => {
modal.close();
await this.groupingsComponent.loadFolders();
await this.filterFolder('none');
this.groupingsComponent.selectedFolderId = null;
});
});
}
addCipher() {
const component = this.editCipher(null);
async addCipher() {
const component = await this.editCipher(null);
component.type = this.type;
component.folderId = this.folderId === 'none' ? null : this.folderId;
if (this.collectionId != null) {
@ -356,54 +303,33 @@ export class VaultComponent implements OnInit, OnDestroy {
}
}
editCipher(cipher: CipherView) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.cipherAddEditModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<AddEditComponent>(
AddEditComponent, this.cipherAddEditModalRef);
childComponent.cipherId = cipher == null ? null : cipher.id;
childComponent.onSavedCipher.subscribe(async (c: CipherView) => {
this.modal.close();
await this.ciphersComponent.refresh();
});
childComponent.onDeletedCipher.subscribe(async (c: CipherView) => {
this.modal.close();
await this.ciphersComponent.refresh();
});
childComponent.onRestoredCipher.subscribe(async (c: CipherView) => {
this.modal.close();
await this.ciphersComponent.refresh();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
async editCipher(cipher: CipherView) {
const [modal, childComponent] = await this.modalService.openViewRef(AddEditComponent, this.cipherAddEditModalRef, comp => {
comp.cipherId = cipher == null ? null : cipher.id;
comp.onSavedCipher.subscribe(async (c: CipherView) => {
modal.close();
await this.ciphersComponent.refresh();
});
comp.onDeletedCipher.subscribe(async (c: CipherView) => {
modal.close();
await this.ciphersComponent.refresh();
});
comp.onRestoredCipher.subscribe(async (c: CipherView) => {
modal.close();
await this.ciphersComponent.refresh();
});
});
return childComponent;
}
cloneCipher(cipher: CipherView) {
const component = this.editCipher(cipher);
async cloneCipher(cipher: CipherView) {
const component = await this.editCipher(cipher);
component.cloneMode = true;
}
updateKey() {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.updateKeyModalRef.createComponent(factory).instance;
this.modal.show<UpdateKeyComponent>(UpdateKeyComponent, this.updateKeyModalRef);
this.modal.onClosed.subscribe(() => {
this.modal = null;
});
async updateKey() {
await this.modalService.openViewRef(UpdateKeyComponent, this.updateKeyModalRef);
}
private clearFilters() {

9
src/services/passwordReprompt.service.ts Normal file
View File

@ -0,0 +1,9 @@
import { Injectable } from '@angular/core';
import { PasswordRepromptService as BasePasswordRepromptService } from 'jslib-angular/services/passwordReprompt.service';
import { PasswordRepromptComponent } from '../app/components/password-reprompt.component';
@Injectable()
export class PasswordRepromptService extends BasePasswordRepromptService {
component = PasswordRepromptComponent;
}

26
src/services/webPlatformUtils.service.ts
View File

@ -222,32 +222,6 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
return confirmed.value;
}
async showPasswordDialog(title: string, body: string, passwordValidation: (value: string) => Promise<boolean>):
Promise<boolean> {
const result = await Swal.fire({
heightAuto: false,
titleText: title,
input: 'password',
text: body,
confirmButtonText: this.i18nService.t('ok'),
showCancelButton: true,
cancelButtonText: this.i18nService.t('cancel'),
inputAttributes: {
autocapitalize: 'off',
autocorrect: 'off',
},
inputValidator: async (value: string): Promise<any> => {
if (await passwordValidation(value)) {
return false;
}
return this.i18nService.t('invalidMasterPassword');
},
});
return result.isConfirmed;
}
isDev(): boolean {
return process.env.NODE_ENV === 'development';
}