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

src/_locales/en/messages.json

@@ -548,6 +548,12 @@
   "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?"
   },
+  "shareItem": {
+    "message": "Share Item"
+  },
+  "sharedItem": {
+    "message": "Shared Item"
+  },
   "learnMore": {
     "message": "Learn more"
   },

src/popup/app-routing.module.ts

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

src/popup/app.module.ts

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

src/popup/vault/add-edit.component.html

@@ -316,6 +316,20 @@
                 </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-content single-line">
                 <a class="box-content-row" href="#" appStopClick appBlurClick

src/popup/vault/add-edit.component.ts

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

src/popup/vault/share.component.html

@@ -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>

src/popup/vault/share.component.ts

@@ -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;
+    }
+}