Upstream
/
bitwarden-browser
mirror of https://github.com/bitwarden/browser.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

entity users component

This commit is contained in:
Kyle Spearrin 2018-07-09 23:48:26 -04:00
parent a27357213a
commit 1cb396dc51
9 changed files with 222 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jslib

@ -1 +1 @@
Subproject commit 89e71d7c16d95fd7cc9634d46e0db1d77e6fcae6
Subproject commit 049e129f3647ee807bdc68a3d0a38854b4ba0256

3
src/app/app.module.ts
View File

@ -33,6 +33,7 @@ import { TwoFactorOptionsComponent } from './accounts/two-factor-options.compone
import { TwoFactorComponent } from './accounts/two-factor.component';
import { CollectionsComponent as OrgManageCollectionsComponent } from './organizations/manage/collections.component';
import { EntityUsersComponent as OrgEntityUsersComponent } from './organizations/manage/entity-users.component';
import { EventsComponent as OrgEventsComponent } from './organizations/manage/events.component';
import { GroupAddEditComponent as OrgGroupAddEditComponent } from './organizations/manage/group-add-edit.component';
import { GroupsComponent as OrgGroupsComponent } from './organizations/manage/groups.component';
@ -171,6 +172,7 @@ import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
OrgAttachmentsComponent,
OrgCiphersComponent,
OrgCollectionsComponent,
OrgEntityUsersComponent,
OrgEventsComponent,
OrgExportComponent,
OrgImportComponent,
@ -228,6 +230,7 @@ import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
OrgAddEditComponent,
OrgAttachmentsComponent,
OrgCollectionsComponent,
OrgEntityUsersComponent,
OrgGroupAddEditComponent,
PasswordGeneratorHistoryComponent,
PurgeVaultComponent,

2
src/app/organizations/manage/collections.component.html
View File

@ -41,3 +41,5 @@
</tbody>
</table>
</ng-container>
<ng-template #addEdit></ng-template>
<ng-template #usersTemplate></ng-template>

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

@ -1,6 +1,9 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
ViewChild,
ViewContainerRef,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@ -12,18 +15,26 @@ import { Collection } from 'jslib/models/domain/collection';
import { CollectionDetailsResponse } from 'jslib/models/response/collectionResponse';
import { CollectionView } from 'jslib/models/view/collectionView';
import { ModalComponent } from '../../modal.component';
import { EntityUsersComponent } from './entity-users.component';
@Component({
selector: 'app-org-manage-collections',
templateUrl: 'collections.component.html',
})
export class CollectionsComponent implements OnInit {
@ViewChild('addEdit', { read: ViewContainerRef }) addEditModalRef: ViewContainerRef;
@ViewChild('usersTemplate', { read: ViewContainerRef }) usersModalRef: ViewContainerRef;
loading = true;
organizationId: string;
collections: CollectionView[];
searchText: string;
private modal: ModalComponent = null;
constructor(private apiService: ApiService, private route: ActivatedRoute,
private collectionService: CollectionService) { }
private collectionService: CollectionService, private componentFactoryResolver: ComponentFactoryResolver) { }
async ngOnInit() {
this.route.parent.parent.params.subscribe(async (params) => {
@ -51,4 +62,24 @@ export class CollectionsComponent implements OnInit {
async delete(collection: CollectionView) {
//
}
users(collection: CollectionView) {
if (this.modal != null) {
this.modal.close();
}
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;
this.modal.onClosed.subscribe(() => {
this.modal = null;
});
}
}

57
src/app/organizations/manage/entity-users.component.html Normal file
View File

@ -0,0 +1,57 @@
<div class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">
{{'userAccess' | i18n}}
<small>{{entityName}}</small>
</h2>
<button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" *ngIf="loading">
<i class="fa fa-spinner fa-spin text-muted"></i>
</div>
<div class="modal-body" *ngIf="!loading">
<ng-container *ngIf="!users || !users.length">
{{'noUsersInList' | i18n}}
</ng-container>
<table class="table table-hover table-list mb-0" *ngIf="users && users.length">
<tbody>
<tr *ngFor="let u of users">
<td width="30">
<app-avatar [data]="u.name || u.email" width="25" height="25" [circle]="true" [fontSize]="14"></app-avatar>
</td>
<td>
{{u.email}}
<span class="badge badge-secondary" *ngIf="u.status === organizationUserStatusType.Invited">{{'invited' | i18n}}</span>
<span class="badge badge-warning" *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted' | i18n}}</span>
<small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
</td>
<td *ngIf="entity === 'collection'">
<i class="fa fa-th" *ngIf="u.accessAll" title="{{'userAccessAllItems' | i18n}}"></i>
<i class="fa fa-eye" *ngIf="u.readOnly" title="{{'readOnly' | i18n}}"></i>
</td>
<td>
<span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
<span *ngIf="u.type === organizationUserType.Admin">{{'admin' | i18n}}</span>
<span *ngIf="u.type === organizationUserType.User">{{'user' | i18n}}</span>
</td>
<td class="table-list-options">
<button type="button" class="btn btn-outline-danger" (click)="remove(u)" #removeBtn appBlurClick [disabled]="removeBtn.loading"
[appApiAction]="actionPromise" title="{{'remove' | i18n}}" *ngIf="!u.accessAll">
<i class="fa fa-remove fa-lg fa-fw" [hidden]="removeBtn.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!removeBtn.loading"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
</div>
</div>
</div>
</div>

94
src/app/organizations/manage/entity-users.component.ts Normal file
View File

@ -0,0 +1,94 @@
import {
Component,
EventEmitter,
Input,
OnInit,
Output,
} from '@angular/core';
import { ToasterService } from 'angular2-toaster';
import { Angulartics2 } from 'angulartics2';
import { ApiService } from 'jslib/abstractions/api.service';
import { I18nService } from 'jslib/abstractions/i18n.service';
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
import { OrganizationUserStatusType } from 'jslib/enums/organizationUserStatusType';
import { OrganizationUserType } from 'jslib/enums/organizationUserType';
import { Utils } from 'jslib/misc/utils';
@Component({
selector: 'app-entity-users',
templateUrl: 'entity-users.component.html',
})
export class EntityUsersComponent implements OnInit {
@Input() entity: 'group' | 'collection';
@Input() entityId: string;
@Input() entityName: string;
@Input() organizationId: string;
@Output() onRemovedUser = new EventEmitter();
organizationUserType = OrganizationUserType;
organizationUserStatusType = OrganizationUserStatusType;
loading = true;
users: any[] = [];
actionPromise: Promise<any>;
constructor(private apiService: ApiService, private i18nService: I18nService,
private analytics: Angulartics2, private toasterService: ToasterService,
private platformUtilsService: PlatformUtilsService) { }
async ngOnInit() {
await this.loadUsers();
this.loading = false;
}
async loadUsers() {
let users: any[] = [];
if (this.entity === 'group') {
const response = await this.apiService.getGroupUsers(this.organizationId, this.entityId);
users = response.data.map((r) => r);
} else if (this.entity === 'collection') {
const response = await this.apiService.getCollectionUsers(this.organizationId, this.entityId);
users = response.data.map((r) => r);
}
users.sort(Utils.getSortFunction(this.i18nService, 'email'));
this.users = users;
}
async remove(user: any) {
if (this.actionPromise != null || user.accessAll) {
return;
}
const confirmed = await this.platformUtilsService.showDialog(
this.i18nService.t('removeUserConfirmation'), user.email,
this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
if (!confirmed) {
return false;
}
try {
if (this.entity === 'group') {
this.actionPromise = this.apiService.deleteGroupUser(this.organizationId, this.entityId,
user.organizationUserId);
await this.actionPromise;
this.analytics.eventTrack.next({ action: 'Removed User From Group' });
} else if (this.entity === 'collection') {
this.actionPromise = this.apiService.deleteCollectionUser(this.organizationId, this.entityId,
user.organizationUserId);
await this.actionPromise;
this.analytics.eventTrack.next({ action: 'Removed User From Collection' });
}
this.toasterService.popAsync('success', null,
this.i18nService.t('removedThing', this.i18nService.t('user').toLocaleLowerCase(), user.email));
this.onRemovedUser.emit();
const index = this.users.indexOf(user);
if (index > -1) {
this.users.splice(index, 1);
}
} catch { }
}
}

1
src/app/organizations/manage/groups.component.html
View File

@ -42,3 +42,4 @@
</table>
</ng-container>
<ng-template #addEdit></ng-template>
<ng-template #usersTemplate></ng-template>

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

@ -19,6 +19,7 @@ import { GroupResponse } from 'jslib/models/response/groupResponse';
import { Utils } from 'jslib/misc/utils';
import { ModalComponent } from '../../modal.component';
import { EntityUsersComponent } from './entity-users.component';
import { GroupAddEditComponent } from './group-add-edit.component';
@Component({
@ -27,6 +28,7 @@ import { GroupAddEditComponent } from './group-add-edit.component';
})
export class GroupsComponent implements OnInit {
@ViewChild('addEdit', { read: ViewContainerRef }) addEditModalRef: ViewContainerRef;
@ViewChild('usersTemplate', { read: ViewContainerRef }) usersModalRef: ViewContainerRef;
loading = true;
organizationId: string;
@ -98,7 +100,30 @@ export class GroupsComponent implements OnInit {
this.analytics.eventTrack.next({ action: 'Deleted Group' });
this.toasterService.popAsync('success', null,
this.i18nService.t('deletedThing', this.i18nService.t('group').toLocaleLowerCase(), group.name));
await this.load();
const index = this.groups.indexOf(group);
if (index > -1) {
this.groups.splice(index, 1);
}
} catch { }
}
users(group: GroupResponse) {
if (this.modal != null) {
this.modal.close();
}
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;
this.modal.onClosed.subscribe(() => {
this.modal = null;
});
}
}

6
src/locales/en/messages.json
View File

@ -1721,6 +1721,9 @@
"deleteGroupConfirmation": {
"message": "Are you sure you want to delete this group?"
},
"removeUserConfirmation": {
"message": "Are you sure you want to remove this user?"
},
"externalId": {
"message": "External Id"
},
@ -1985,5 +1988,8 @@
},
"errorOccurred": {
"message": "An error has occurred."
},
"userAccess": {
"message": "User Access"
}
}