sharing

src/app/accounts/two-factor-options.component.html

@@ -3,7 +3,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h2 class="modal-title">{{'twoStepOptions' | i18n}}</h2>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>

src/app/app.module.ts

@@ -39,6 +39,7 @@ import { CiphersComponent } from './vault/ciphers.component';
 import { FolderAddEditComponent } from './vault/folder-add-edit.component';
 import { GroupingsComponent } from './vault/groupings.component';
 import { OrganizationsComponent } from './vault/organizations.component';
+import { ShareComponent } from './vault/share.component';
 import { VaultComponent } from './vault/vault.component';
 
 import { IconComponent } from 'jslib/angular/components/icon.component';
@@ -99,6 +100,7 @@ import { Folder } from 'jslib/models/domain';
         OrganizationLayoutComponent,
         RegisterComponent,
         SearchCiphersPipe,
+        ShareComponent,
         StopClickDirective,
         StopPropDirective,
         ToolsComponent,
@@ -113,6 +115,7 @@ import { Folder } from 'jslib/models/domain';
         AttachmentsComponent,
         FolderAddEditComponent,
         ModalComponent,
+        ShareComponent,
         TwoFactorOptionsComponent,
     ],
     providers: [],

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

@@ -3,7 +3,7 @@
         <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" aria-label="Close">
+                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>

src/app/vault/attachments.component.html

@@ -6,7 +6,7 @@
                     {{'attachments' | i18n}}
                     <small *ngIf="cipher">{{cipher.name}}</small>
                 </h2>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>

src/app/vault/ciphers.component.ts

@@ -23,6 +23,8 @@ import { CipherView } from 'jslib/models/view/cipherView';
 })
 export class CiphersComponent extends BaseCiphersComponent {
     @Output() onAttachmentsClicked = new EventEmitter<CipherView>();
+    @Output() onShareClicked = new EventEmitter<CipherView>();
+    @Output() onCollectionsClicked = new EventEmitter<CipherView>();
     cipherType = CipherType;
 
     constructor(cipherService: CipherService, private analytics: Angulartics2,
@@ -40,11 +42,11 @@ export class CiphersComponent extends BaseCiphersComponent {
     }
 
     share(c: CipherView) {
-        //
+        this.onShareClicked.emit(c);
     }
 
     collections(c: CipherView) {
-        //
+        this.onCollectionsClicked.emit(c);
     }
 
     delete(c: CipherView) {

src/app/vault/folder-add-edit.component.html

@@ -3,7 +3,7 @@
         <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" aria-label="Close">
+                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>

src/app/vault/share.component.html

@@ -0,0 +1,54 @@
+<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">
+                    {{'share' | i18n}}
+                    <small *ngIf="cipher">{{cipher.name}}</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">
+                <p>{{'shareDesc' | i18n}}</p>
+                <div class="form-group">
+                    <label for="organization">{{'organization' | i18n}}</label>
+                    <select id="organization" name="OrganizationId" [(ngModel)]="organizationId" class="form-control" (change)="filterCollections()">
+                        <option *ngFor="let o of organizations" [ngValue]="o.id">{{o.name}}</option>
+                    </select>
+                </div>
+                <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">
+                            {{'selectAll' | i18n}}
+                        </button>
+                        <button type="button" appBlurClick (click)="unselectAll()" class="btn btn-link btn-sm py-0">
+                            {{'unselectAll' | i18n}}
+                        </button>
+                    </small>
+                </div>
+                <table class="table table-hover table-list mb-0" *ngIf="collections">
+                    <tbody>
+                        <tr *ngFor="let c of collections; let i = index" (click)="check(c)">
+                            <td class="table-list-checkbox">
+                                <input type="checkbox" [(ngModel)]="c.checked" name="Collection[{{i}}].Checked">
+                            </td>
+                            <td>
+                                <span appStopProp>{{c.name}}</span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="modal-footer">
+                <button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
+                    <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
+                    <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
+                </button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
+            </div>
+        </form>
+    </div>
+</div>

src/app/vault/share.component.ts

@@ -0,0 +1,113 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnDestroy,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+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 { 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 {
+    @Input() cipherId: string;
+    @Input() organizationId: string;
+    @Output() onSharedCipher = new EventEmitter();
+
+    formPromise: Promise<any>;
+    cipher: CipherView;
+    collections: CollectionView[] = [];
+    organizations: Organization[] = [];
+
+    private writeableCollections: CollectionView[] = [];
+
+    constructor(private collectionService: CollectionService, private analytics: Angulartics2,
+        private toasterService: ToasterService, private i18nService: I18nService,
+        private userService: UserService, private cipherService: CipherService) { }
+
+    async ngOnInit() {
+        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() {
+        this.unselectAll();
+    }
+
+    filterCollections() {
+        this.unselectAll();
+        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);
+            }
+        }
+
+        cipherView.organizationId = this.organizationId;
+        cipherView.collectionIds = [];
+        for (const collection of this.collections) {
+            if ((collection as any).checked) {
+                cipherView.collectionIds.push(collection.id);
+            }
+        }
+
+        this.formPromise = Promise.all(attachmentPromises).then(async () => {
+            const encCipher = await this.cipherService.encrypt(cipherView);
+            await this.cipherService.shareWithServer(encCipher);
+            this.onSharedCipher.emit();
+            this.analytics.eventTrack.next({ action: 'Shared Cipher' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('sharedItem'));
+        });
+        await this.formPromise;
+    }
+
+    check(c: CollectionView) {
+        (c as any).checked = !(c as any).checked;
+    }
+
+    selectAll() {
+        for (const c of this.collections) {
+            (c as any).checked = true;
+        }
+    }
+
+    unselectAll() {
+        for (const c of this.writeableCollections) {
+            (c as any).checked = false;
+        }
+    }
+}

src/app/vault/vault.component.html

@@ -44,7 +44,8 @@
                     </button>
                 </div>
             </div>
-            <app-vault-ciphers (onCipherClicked)="editCipher($event)" (onAttachmentsClicked)="editCipherAttachments($event)" (onAddCipher)="addCipher()">
+            <app-vault-ciphers (onCipherClicked)="editCipher($event)" (onAttachmentsClicked)="editCipherAttachments($event)" (onAddCipher)="addCipher()"
+                (onShareClicked)="shareCipher($event)">
             </app-vault-ciphers>
         </div>
         <div class="col-3">
@@ -68,3 +69,5 @@
 <ng-template #attachments></ng-template>
 <ng-template #folderAddEdit></ng-template>
 <ng-template #cipherAddEdit></ng-template>
+<ng-template #share></ng-template>
+<ng-template #collections></ng-template>

src/app/vault/vault.component.ts

@@ -27,6 +27,7 @@ import { OrganizationsComponent } from './organizations.component';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { SyncService } from 'jslib/abstractions/sync.service';
+import { ShareComponent } from './share.component';
 
 @Component({
     selector: 'app-vault',
@@ -38,7 +39,9 @@ export class VaultComponent implements OnInit {
     @ViewChild(OrganizationsComponent) organizationsComponent: OrganizationsComponent;
     @ViewChild('attachments', { read: ViewContainerRef }) attachmentsModalRef: ViewContainerRef;
     @ViewChild('folderAddEdit', { read: ViewContainerRef }) folderAddEditModalRef: ViewContainerRef;
-    @ViewChild('cipherAddEdit', { read: ViewContainerRef }) cipherAddEditRef: ViewContainerRef;
+    @ViewChild('cipherAddEdit', { read: ViewContainerRef }) cipherAddEditModalRef: ViewContainerRef;
+    @ViewChild('share', { read: ViewContainerRef }) shareModalRef: ViewContainerRef;
+    @ViewChild('collections', { read: ViewContainerRef }) collectionsModalRef: ViewContainerRef;
 
     cipherId: string = null;
     favorites: boolean = false;
@@ -154,6 +157,26 @@ export class VaultComponent implements OnInit {
         });
     }
 
+    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 addFolder() {
         if (this.modal != null) {
             this.modal.close();
@@ -212,9 +235,9 @@ export class VaultComponent implements OnInit {
         }
 
         const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.cipherAddEditRef.createComponent(factory).instance;
+        this.modal = this.cipherAddEditModalRef.createComponent(factory).instance;
         const childComponent = this.modal.show<AddEditComponent>(
-            AddEditComponent, this.cipherAddEditRef);
+            AddEditComponent, this.cipherAddEditModalRef);
 
         childComponent.cipherId = cipher == null ? null : cipher.id;
         childComponent.onSavedCipher.subscribe(async (c: CipherView) => {