Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-15 10:35:20 +01:00
Code Issues Projects Releases Wiki Activity

group add/edit/delete

Browse Source
This commit is contained in:
Kyle Spearrin 2018-07-09 16:27:54 -04:00
parent b774091b83
commit ecfecd295a
13 changed files with 383 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jslib

@ -1 +1 @@
Subproject commit 0a46513e38297c49aebbbfb71e73e20aaa752780
Subproject commit 89e71d7c16d95fd7cc9634d46e0db1d77e6fcae6

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

@ -34,6 +34,7 @@ import { TwoFactorComponent } from './accounts/two-factor.component';
import { CollectionsComponent as OrgManageCollectionsComponent } from './organizations/manage/collections.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';
import { ManageComponent as OrgManageComponent } from './organizations/manage/manage.component';
import { PeopleComponent as OrgPeopleComponent } from './organizations/manage/people.component';
@ -173,6 +174,7 @@ import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
OrgEventsComponent,
OrgExportComponent,
OrgImportComponent,
OrgGroupAddEditComponent,
OrgGroupingsComponent,
OrgGroupsComponent,
OrgManageCollectionsComponent,
@ -226,6 +228,7 @@ import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
OrgAddEditComponent,
OrgAttachmentsComponent,
OrgCollectionsComponent,
OrgGroupAddEditComponent,
PasswordGeneratorHistoryComponent,
PurgeVaultComponent,
ShareComponent,

90
src/app/organizations/manage/group-add-edit.component.html Normal file
View File

@ -0,0 +1,90 @@
<div class="modal fade">
<div class="modal-dialog">
<form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<div class="modal-header">
<h2 class="modal-title">{{title}}</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">
<div class="form-group">
<label for="name">{{'name' | i18n}}</label>
<input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name">
</div>
<div class="form-group">
<label for="externalId">{{'externalId' | i18n}}</label>
<input id="externalId" class="form-control" type="text" name="ExternalId" [(ngModel)]="externalId">
</div>
<h3 class="mt-4">{{'accessControl' | i18n}}</h3>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="access" id="accessAll" value="all" [(ngModel)]="access">
<label class="form-check-label" for="accessAll">
{{'groupAccessAllItems' | i18n}}
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="access" id="accessSelected" value="selected" [(ngModel)]="access">
<label class="form-check-label" for="accessSelected">
{{'groupAccessSelectedCollections' | i18n}}
</label>
</div>
</div>
<ng-container *ngIf="access === 'selected'">
<div *ngIf="!collections || !collections.length">
{{'noCollectionsInList' | i18n}}
</div>
<ng-container *ngIf="collections && collections.length">
<hr>
<button type="button" appBlurClick (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
{{'selectAll' | i18n}}
</button>
<button type="button" appBlurClick (click)="selectAll(false)" class="btn btn-link btn-sm py-0">
{{'unselectAll' | i18n}}
</button>
<table class="table table-hover table-list mb-0">
<thead>
<tr>
<th>&nbsp;</th>
<th>{{'collection' | i18n}}</th>
<th width="100" class="text-center">{{'readOnly' | i18n}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of collections; let i = index">
<td class="table-list-checkbox" (click)="check(c)">
<input type="checkbox" [(ngModel)]="c.checked" name="Collection[{{i}}].Checked">
</td>
<td (click)="check(c)">
<span appStopProp>{{c.name}}</span>
</td>
<td class="text-center">
<input type="checkbox" [(ngModel)]="c.readOnly" name="Collection[{{i}}].ReadOnly" [disabled]="!c.checked">
</td>
</tr>
</tbody>
</table>
</ng-container>
</ng-container>
</div>
<div class="modal-footer">
<button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
<i class="fa fa-spinner fa-spin"></i>
<span>{{'save' | i18n}}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'cancel' | i18n}}</button>
<div class="ml-auto">
<button #deleteBtn appBlurClick type="button" (click)="delete()" class="btn btn-outline-danger" title="{{'delete' | i18n}}"
*ngIf="editMode" [disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
<i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
</button>
</div>
</div>
</form>
</div>
</div>

141
src/app/organizations/manage/group-add-edit.component.ts Normal file
View File

@ -0,0 +1,141 @@
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 { CollectionService } from 'jslib/abstractions/collection.service';
import { I18nService } from 'jslib/abstractions/i18n.service';
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
import { CollectionData } from 'jslib/models/data/collectionData';
import { Collection } from 'jslib/models/domain/collection';
import { GroupRequest } from 'jslib/models/request/groupRequest';
import { SelectionReadOnlyRequest } from 'jslib/models/request/selectionReadOnlyRequest';
import { CollectionDetailsResponse } from 'jslib/models/response/collectionResponse';
import { CollectionView } from 'jslib/models/view/collectionView';
@Component({
selector: 'app-group-add-edit',
templateUrl: 'group-add-edit.component.html',
})
export class GroupAddEditComponent implements OnInit {
@Input() groupId: string;
@Input() organizationId: string;
@Output() onSavedGroup = new EventEmitter();
@Output() onDeletedGroup = new EventEmitter();
loading = true;
editMode: boolean = false;
title: string;
name: string;
externalId: string;
access: 'all' | 'selected' = 'all';
collections: CollectionView[] = [];
formPromise: Promise<any>;
deletePromise: Promise<any>;
constructor(private apiService: ApiService, private i18nService: I18nService,
private analytics: Angulartics2, private toasterService: ToasterService,
private collectionService: CollectionService, private platformUtilsService: PlatformUtilsService) { }
async ngOnInit() {
this.editMode = this.loading = this.groupId != null;
await this.loadCollections();
if (this.editMode) {
this.editMode = true;
this.title = this.i18nService.t('editGroup');
try {
const group = await this.apiService.getGroupDetails(this.organizationId, this.groupId);
this.access = group.accessAll ? 'all' : 'selected';
this.name = group.name;
this.externalId = group.externalId;
if (group.collections != null && this.collections != null) {
group.collections.forEach((s) => {
const collection = this.collections.filter((c) => c.id === s.id);
if (collection != null && collection.length > 0) {
(collection[0] as any).checked = true;
collection[0].readOnly = s.readOnly;
}
});
}
} catch { }
} else {
this.title = this.i18nService.t('addGroup');
}
this.loading = false;
}
async loadCollections() {
const response = await this.apiService.getCollections(this.organizationId);
const collections = response.data.map((r) =>
new Collection(new CollectionData(r as CollectionDetailsResponse)));
this.collections = await this.collectionService.decryptMany(collections);
}
check(c: CollectionView, select?: boolean) {
(c as any).checked = select == null ? !(c as any).checked : select;
if (!(c as any).checked) {
c.readOnly = false;
}
}
selectAll(select: boolean) {
this.collections.forEach((c) => this.check(c, select));
}
async submit() {
const request = new GroupRequest();
request.name = this.name;
request.externalId = this.externalId;
request.accessAll = this.access === 'all';
if (!request.accessAll) {
request.collections = this.collections.filter((c) => (c as any).checked)
.map((c) => new SelectionReadOnlyRequest(c.id, !!c.readOnly));
}
try {
if (this.editMode) {
this.formPromise = this.apiService.putGroup(this.organizationId, this.groupId, request);
} else {
this.formPromise = this.apiService.postGroup(this.organizationId, request);
}
await this.formPromise;
this.analytics.eventTrack.next({ action: this.editMode ? 'Edited Group' : 'Created Group' });
this.toasterService.popAsync('success', null,
this.i18nService.t(this.editMode ? 'editedThing' : 'createdThing',
this.i18nService.t('group').toLocaleLowerCase(), this.name));
this.onSavedGroup.emit();
} catch { }
}
async delete() {
if (!this.editMode) {
return;
}
const confirmed = await this.platformUtilsService.showDialog(
this.i18nService.t('deleteGroupConfirmation'), this.name,
this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
if (!confirmed) {
return false;
}
try {
this.deletePromise = this.apiService.deleteGroup(this.organizationId, this.groupId);
await this.deletePromise;
this.analytics.eventTrack.next({ action: 'Deleted Group' });
this.toasterService.popAsync('success', null,
this.i18nService.t('deletedThing', this.i18nService.t('group').toLocaleLowerCase(), this.name));
this.onDeletedGroup.emit();
} catch { }
}
}

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

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

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

@ -1,28 +1,44 @@
import {
Component,
ComponentFactoryResolver,
OnInit,
ViewChild,
ViewContainerRef,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
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 { GroupResponse } from 'jslib/models/response/groupResponse';
import { Utils } from 'jslib/misc/utils';
import { ModalComponent } from '../../modal.component';
import { GroupAddEditComponent } from './group-add-edit.component';
@Component({
selector: 'app-org-groups',
templateUrl: 'groups.component.html',
})
export class GroupsComponent implements OnInit {
@ViewChild('addEdit', { read: ViewContainerRef }) addEditModalRef: ViewContainerRef;
loading = true;
organizationId: string;
groups: GroupResponse[];
searchText: string;
private modal: ModalComponent = null;
constructor(private apiService: ApiService, private route: ActivatedRoute,
private i18nService: I18nService) { }
private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
private analytics: Angulartics2, private toasterService: ToasterService,
private platformUtilsService: PlatformUtilsService) { }
async ngOnInit() {
this.route.parent.parent.params.subscribe(async (params) => {
@ -38,4 +54,51 @@ export class GroupsComponent implements OnInit {
this.groups = groups;
this.loading = false;
}
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.load();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
});
}
add() {
this.edit(null);
}
async delete(group: GroupResponse) {
const confirmed = await this.platformUtilsService.showDialog(
this.i18nService.t('deleteGroupConfirmation'), group.name,
this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
if (!confirmed) {
return false;
}
try {
await this.apiService.deleteGroup(this.organizationId, group.id);
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();
} catch { }
}
}

10
src/app/vault/bulk-share.component.ts
View File

@ -75,14 +75,12 @@ export class BulkShareComponent implements OnInit {
this.toasterService.popAsync('success', null, this.i18nService.t('sharedItems'));
}
check(c: CollectionView) {
(c as any).checked = !(c as any).checked;
check(c: CollectionView, select?: boolean) {
(c as any).checked = select == null ? !(c as any).checked : select;
}
selectAll(select: false) {
selectAll(select: boolean) {
const collections = select ? this.collections : this.writeableCollections;
for (const c of collections) {
(c as any).checked = select;
}
collections.forEach((c) => this.check(c, select));
}
}

6
src/app/vault/ciphers.component.ts
View File

@ -38,8 +38,8 @@ export class CiphersComponent extends BaseCiphersComponent {
super(cipherService);
}
checkCipher(c: CipherView) {
(c as any).checked = !(c as any).checked;
checkCipher(c: CipherView, select?: boolean) {
(c as any).checked = select == null ? !(c as any).checked : select;
}
selectAll(select: boolean) {
@ -48,7 +48,7 @@ export class CiphersComponent extends BaseCiphersComponent {
}
const selectCount = select && this.ciphers.length > MaxCheckedCount ? MaxCheckedCount : this.ciphers.length;
for (let i = 0; i < selectCount; i++) {
(this.ciphers[i] as any).checked = select;
this.checkCipher(this.ciphers[i], select);
}
}

4
src/app/vault/collections.component.html
View File

@ -15,10 +15,10 @@
<div class="d-flex">
<h3>{{'collections' | i18n}}</h3>
<small class="ml-auto d-flex">
<button type="button" appBlurClick (click)="selectAll()" class="btn btn-link btn-sm py-0">
<button type="button" appBlurClick (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
{{'selectAll' | i18n}}
</button>
<button type="button" appBlurClick (click)="unselectAll()" class="btn btn-link btn-sm py-0">
<button type="button" appBlurClick (click)="selectAll(false)" class="btn btn-link btn-sm py-0">
{{'unselectAll' | i18n}}
</button>
</small>

20
src/app/vault/collections.component.ts
View File

@ -44,7 +44,7 @@ export class CollectionsComponent implements OnInit, OnDestroy {
this.cipher = await this.cipherDomain.decrypt();
this.collections = await this.loadCollections();
this.unselectAll();
this.selectAll(false);
if (this.collectionIds != null) {
this.collections.forEach((c) => {
(c as any).checked = this.collectionIds.indexOf(c.id) > -1;
@ -53,7 +53,7 @@ export class CollectionsComponent implements OnInit, OnDestroy {
}
ngOnDestroy() {
this.unselectAll();
this.selectAll(false);
}
async submit() {
@ -67,20 +67,12 @@ export class CollectionsComponent implements OnInit, OnDestroy {
this.toasterService.popAsync('success', null, this.i18nService.t('editedItem'));
}
check(c: CollectionView) {
(c as any).checked = !(c as any).checked;
check(c: CollectionView, select?: boolean) {
(c as any).checked = select == null ? !(c as any).checked : select;
}
selectAll() {
for (const c of this.collections) {
(c as any).checked = true;
}
}
unselectAll() {
for (const c of this.collections) {
(c as any).checked = false;
}
selectAll(select: boolean) {
this.collections.forEach((c) => this.check(c, select));
}
protected loadCipher() {

8
src/app/vault/share.component.ts
View File

@ -87,14 +87,12 @@ export class ShareComponent implements OnInit, OnDestroy {
await this.formPromise;
}
check(c: CollectionView) {
(c as any).checked = !(c as any).checked;
check(c: CollectionView, select?: boolean) {
(c as any).checked = select == null ? !(c as any).checked : select;
}
selectAll(select: false) {
const collections = select ? this.collections : this.writeableCollections;
for (const c of collections) {
(c as any).checked = select;
}
collections.forEach((c) => this.check(c, select));
}
}

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

@ -591,6 +591,15 @@
"noItemsInList": {
"message": "There are no items to list."
},
"noCollectionsInList": {
"message": "There are no collections to list."
},
"noGroupsInList": {
"message": "There are no collections to list."
},
"noUsersInList": {
"message": "There are no users to list."
},
"newOrganization": {
"message": "New Organization"
},
@ -1703,12 +1712,48 @@
"newGroup": {
"message": "New Group"
},
"addGroup": {
"message": "Add Group"
},
"editGroup": {
"message": "Edit Group"
},
"deleteGroupConfirmation": {
"message": "Are you sure you want to delete this group?"
},
"externalId": {
"message": "External Id"
},
"accessControl": {
"message": "Access Control"
},
"groupAccessAllItems": {
"message": "This group can access and modify all items."
},
"groupAccessSelectedCollections": {
"message": "This group can access only the selected collections."
},
"readOnly": {
"message": "Read Only"
},
"newCollection": {
"message": "New Collection"
},
"addCollection": {
"message": "Add Collection"
},
"editCollection": {
"message": "Edit Collection"
},
"inviteUser": {
"message": "Invite User"
},
"userAccessAllItems": {
"message": "This user can access and modify all items."
},
"userAccessSelectedCollections": {
"message": "This user can access only the selected collections."
},
"search": {
"message": "Search"
},
@ -1789,7 +1834,7 @@
},
"createdThing": {
"message": "Created $THING$ $ID$.",
"description": "Created item abe89f32.",
"description": "Created item 'Google'.",
"placeholders": {
"thing": {
"content": "$1",
@ -1797,13 +1842,13 @@
},
"id": {
"content": "$2",
"example": "abe89f32"
"example": "Google"
}
}
},
"editedThing": {
"message": "Edited $THING$ $ID$.",
"description": "Edited item abe89f32.",
"description": "Edited item 'Google'.",
"placeholders": {
"thing": {
"content": "$1",
@ -1811,13 +1856,13 @@
},
"id": {
"content": "$2",
"example": "abe89f32"
"example": "Google"
}
}
},
"deletedThing": {
"message": "Deleted $THING$ $ID$.",
"description": "Deleted item abe89f32.",
"description": "Deleted item 'Google'.",
"placeholders": {
"thing": {
"content": "$1",
@ -1825,12 +1870,13 @@
},
"id": {
"content": "$2",
"example": "abe89f32"
"example": "Google"
}
}
},
"sharedThing": {
"message": "Shared $THING$ $ID$.",
"description": "Shared item 'Google'.",
"placeholders": {
"thing": {
"content": "$1",
@ -1838,12 +1884,13 @@
},
"id": {
"content": "$2",
"example": "abe89f32"
"example": "'Google'"
}
}
},
"removedThing": {
"message": "Removed $THING$ $ID$.",
"description": "Shared item 'Google'.",
"placeholders": {
"thing": {
"content": "$1",
@ -1851,7 +1898,7 @@
},
"id": {
"content": "$2",
"example": "abe89f32"
"example": "Google"
}
}
},
@ -1860,7 +1907,7 @@
"placeholders": {
"id": {
"content": "$1",
"example": "abe89f32"
"example": "Google"
}
}
},
@ -1869,7 +1916,7 @@
"placeholders": {
"id": {
"content": "$1",
"example": "abe89f32"
"example": "Google"
}
}
},
@ -1878,7 +1925,7 @@
"placeholders": {
"id": {
"content": "$1",
"example": "abe89f32"
"example": "Google"
}
}
},
@ -1887,7 +1934,7 @@
"placeholders": {
"id": {
"content": "$1",
"example": "abe89f32"
"example": "John Smith"
}
}
},
@ -1896,7 +1943,7 @@
"placeholders": {
"id": {
"content": "$1",
"example": "abe89f32"
"example": "John Smith"
}
}
},
@ -1905,7 +1952,7 @@
"placeholders": {
"id": {
"content": "$1",
"example": "abe89f32"
"example": "John Smith"
}
}
},

4
src/scss/styles.scss
View File

@ -265,6 +265,10 @@ label:not(.form-check-label):not(.btn) {
}
.table.table-list {
thead th {
border-top: none;
}
tr:first-child {
td {
border: none;