Added share functionality to cipher add-edit component (#758)

This commit is contained in:
Cory 2018-10-23 06:25:44 -07:00 committed by Kyle Spearrin
parent 22f887a81d
commit ce7930bcc4
7 changed files with 219 additions and 0 deletions

View File

@ -548,6 +548,12 @@
"shareVaultConfirmation": { "shareVaultConfirmation": {
"message": "Bitwarden allows you to share your vault with others by using an organization account. Would you like to visit the bitwarden.com website to learn more?" "message": "Bitwarden allows you to share your vault with others by using an organization account. Would you like to visit the bitwarden.com website to learn more?"
}, },
"shareItem": {
"message": "Share Item"
},
"sharedItem": {
"message": "Shared Item"
},
"learnMore": { "learnMore": {
"message": "Learn more" "message": "Learn more"
}, },

View File

@ -29,6 +29,7 @@ import { SyncComponent } from './settings/sync.component';
import { TabsComponent } from './tabs.component'; import { TabsComponent } from './tabs.component';
import { AddEditComponent } from './vault/add-edit.component'; import { AddEditComponent } from './vault/add-edit.component';
import { AttachmentsComponent } from './vault/attachments.component'; import { AttachmentsComponent } from './vault/attachments.component';
import { ShareComponent } from './vault/share.component';
import { CiphersComponent } from './vault/ciphers.component'; import { CiphersComponent } from './vault/ciphers.component';
import { CurrentTabComponent } from './vault/current-tab.component'; import { CurrentTabComponent } from './vault/current-tab.component';
import { GroupingsComponent } from './vault/groupings.component'; import { GroupingsComponent } from './vault/groupings.component';
@ -123,6 +124,12 @@ const routes: Routes = [
canActivate: [AuthGuardService], canActivate: [AuthGuardService],
data: { state: 'edit-cipher' }, data: { state: 'edit-cipher' },
}, },
{
path: 'share',
component: ShareComponent,
canActivate: [AuthGuardService],
data: { state: 'share' },
},
{ {
path: 'attachments', path: 'attachments',
component: AttachmentsComponent, component: AttachmentsComponent,

View File

@ -36,6 +36,7 @@ import { SyncComponent } from './settings/sync.component';
import { TabsComponent } from './tabs.component'; import { TabsComponent } from './tabs.component';
import { AddEditComponent } from './vault/add-edit.component'; import { AddEditComponent } from './vault/add-edit.component';
import { AttachmentsComponent } from './vault/attachments.component'; import { AttachmentsComponent } from './vault/attachments.component';
import { ShareComponent } from './vault/share.component';
import { CiphersComponent } from './vault/ciphers.component'; import { CiphersComponent } from './vault/ciphers.component';
import { CurrentTabComponent } from './vault/current-tab.component'; import { CurrentTabComponent } from './vault/current-tab.component';
import { GroupingsComponent } from './vault/groupings.component'; import { GroupingsComponent } from './vault/groupings.component';
@ -177,6 +178,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
RegisterComponent, RegisterComponent,
SearchCiphersPipe, SearchCiphersPipe,
SettingsComponent, SettingsComponent,
ShareComponent,
StopClickDirective, StopClickDirective,
StopPropDirective, StopPropDirective,
SyncComponent, SyncComponent,

View File

@ -316,6 +316,20 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box list" *ngIf="editMode">
<div class="box-content single-line">
<a class="box-content-row" href="#" appStopClick appBlurClick
(click)="share()" #shareBtn>
<div class="row-main">
<div class="icon">
<i class="fa fa-share fa-lg fa-fw" [hidden]="shareBtn.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!shareBtn.loading"></i>
</div>
<span>{{'shareItem' | i18n}}</span>
</div>
</a>
</div>
</div>
<div class="box list" *ngIf="editMode"> <div class="box list" *ngIf="editMode">
<div class="box-content single-line"> <div class="box-content single-line">
<a class="box-content-row" href="#" appStopClick appBlurClick <a class="box-content-row" href="#" appStopClick appBlurClick

View File

@ -83,6 +83,10 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit {
this.router.navigate(['/attachments'], { queryParams: { cipherId: this.cipher.id } }); this.router.navigate(['/attachments'], { queryParams: { cipherId: this.cipher.id } });
} }
share() {
this.router.navigate(['/share'], { queryParams: { cipherId: this.cipher.id } });
}
cancel() { cancel() {
super.cancel(); super.cancel();
this.location.back(); this.location.back();

View File

@ -0,0 +1,63 @@
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<header>
<div class="left">
<button type="button" appBlurClick (click)="cancel()">{{'cancel' | i18n}}</button>
</div>
<div class="center">
<span class="title">{{'share' | i18n}}</span>
</div>
<div class="right">
<button type="submit" appBlurClick [disabled]="form.loading || !canSave" *ngIf="organizations && organizations.length">
<span [hidden]="form.loading">{{'save' | i18n}}</span>
<i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading"></i>
</button>
</div>
</header>
<content *ngIf="cipher">
<div class="box">
<div class="box-header">
{{'itemInformation' | i18n}}
</div>
<div class="box-content">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="name">{{'name' | i18n}}</label>
<input id="name" type="text" name="Name" [(ngModel)]="cipher.name">
</div>
</div>
</div>
</div>
<div class="box">
<div class="box-header">
{{'organization' | i18n}}
</div>
<div class="box-content" *ngIf="!organizations || !organizations.length">
{{'noOrganizationsList' | i18n}}
</div>
<div class="box-content" *ngIf="organizations && organizations.length">
<p>{{'shareDesc' | i18n}}</p>
<div class="box-content-row" appBoxRow>
<select id="organization" name="OrganizationId" [(ngModel)]="organizationId" (change)="filterCollections()">
<option *ngFor="let o of organizations" [ngValue]="o.id">{{o.name}}</option>
</select>
</div>
</div>
</div>
<div class="box">
<div class="box-header">
{{'collections' | i18n}}
</div>
<div class="box-content" *ngIf="!collections || !collections.length">
{{'noCollectionsInList' | i18n}}
</div>
<div class="box-content" *ngIf="collections && collections.length">
<div *ngFor="let c of collections; let i = index" (click)="check(c)">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="collection">{{c.name}}</label>
<input id="collection" type="checkbox" [(ngModel)]="c.checked" name="Collection[{{i}}].Checked">
</div>
</div>
</div>
</div>
</content>
</form>

View File

@ -0,0 +1,123 @@
import { Location } from '@angular/common';
import {
Component,
EventEmitter,
Input,
OnDestroy,
OnInit,
Output,
} from '@angular/core';
import {
ActivatedRoute,
Router,
} from '@angular/router';
import { ToasterService } from 'angular2-toaster';
import { Angulartics2 } from 'angulartics2';
import { CipherService } from 'jslib/abstractions/cipher.service';
import { CollectionService } from 'jslib/abstractions/collection.service';
import { I18nService } from 'jslib/abstractions/i18n.service';
import { UserService } from 'jslib/abstractions/user.service';
import { AuditService } from 'jslib/abstractions/audit.service';
import { FolderService } from 'jslib/abstractions/folder.service';
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
import { StateService } from 'jslib/abstractions/state.service';
import { Organization } from 'jslib/models/domain/organization';
import { CipherView } from 'jslib/models/view/cipherView';
import { CollectionView } from 'jslib/models/view/collectionView';
@Component({
selector: 'app-vault-share',
templateUrl: 'share.component.html',
})
export class ShareComponent implements OnInit, OnDestroy {
formPromise: Promise<any>;
cipher: CipherView;
cipherId: string;
organizationId: string;
collections: CollectionView[] = [];
organizations: Organization[] = [];
private writeableCollections: CollectionView[] = [];
constructor(private cipherService: CipherService, private collectionService: CollectionService,
private userService: UserService, private i18nService: I18nService,
private route: ActivatedRoute, private location: Location,
private toasterService: ToasterService, private analytics: Angulartics2) {
}
async ngOnInit() {
this.route.queryParams.subscribe(async (params) => {
if (params.cipherId) {
this.cipherId = params.cipherId;
}
});
const cipherDomain = await this.cipherService.get(this.cipherId);
this.cipher = await cipherDomain.decrypt();
const allCollections = await this.collectionService.getAllDecrypted();
this.writeableCollections = allCollections.filter((c) => !c.readOnly);
this.organizations = await this.userService.getAllOrganizations();
if (this.organizationId == null && this.organizations.length > 0) {
this.organizationId = this.organizations[0].id;
}
this.filterCollections();
}
ngOnDestroy() {
}
filterCollections() {
if (this.organizationId == null || this.writeableCollections.length === 0) {
this.collections = [];
} else {
this.collections = this.writeableCollections.filter((c) => c.organizationId === this.organizationId);
}
}
async submit() {
const cipherDomain = await this.cipherService.get(this.cipherId);
const cipherView = await cipherDomain.decrypt();
const attachmentPromises: Array<Promise<any>> = [];
if (cipherView.attachments != null) {
for (const attachment of cipherView.attachments) {
const promise = this.cipherService.shareAttachmentWithServer(attachment,
cipherView.id, this.organizationId);
attachmentPromises.push(promise);
}
}
const checkedCollectionIds = this.collections.filter((c) => (c as any).checked).map((c) => c.id);
try {
this.formPromise = Promise.all(attachmentPromises).then(async () => {
await this.cipherService.shareWithServer(cipherView, this.organizationId, checkedCollectionIds);
this.analytics.eventTrack.next({ action: 'Shared Cipher' });
this.toasterService.popAsync('success', null, this.i18nService.t('sharedItem'));
});
await this.formPromise;
} catch { }
}
cancel() {
this.location.back();
}
check(c: CollectionView, select?: boolean) {
(c as any).checked = select == null ? !(c as any).checked : select;
}
get canSave() {
if (this.collections != null) {
for (let i = 0; i < this.collections.length; i++) {
if ((this.collections[i] as any).checked) {
return true;
}
}
}
return false;
}
}