attachments modal

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

@@ -185,9 +185,10 @@
                     <label for="favorite">{{'favorite' | i18n}}</label>
                     <input id="favorite" type="checkbox" name="Favorite" [(ngModel)]="cipher.favorite">
                 </div>
-                <a class="box-content-row" href="#" appStopClick (click)="attachments()" *ngIf="editMode">
-                    {{'attachments' | i18n}}
-                    <i class="fa fa-chevron-right icon-right"></i>
+                <a class="box-content-row box-content-row-flex" href="#" appStopClick appBlurClick
+                   (click)="attachments()" *ngIf="editMode">
+                    <div class="row-main">{{'attachments' | i18n}}</div>
+                    <i class="fa fa-chevron-right row-sub-icon"></i>
                 </a>
             </div>
         </div>

src/app/vault/attachments.component.html

@@ -0,0 +1,49 @@
+<div class="modal fade">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-body">
+                <div class="box" *ngIf="cipher">
+                    <div class="box-header">
+                        {{'attachments' | i18n}}
+                    </div>
+                    <div class="box-content">
+                        <div *ngIf="cipher.hasAttachments">
+                            <div class="box-content-row box-content-row-flex" *ngFor="let a of cipher.attachments">
+                                <div class="row-main">
+                                    {{a.fileName}}
+                                </div>
+                                <small class="row-sub-label">{{a.sizeName}}</small>
+                                <div class="action-buttons no-pad">
+                                    <a class="row-btn" href="#" appStopClick appBlurClick title="{{'delete' | i18n}}"
+                                       (click)="delete(a)">
+                                        <i class="fa fa-lg fa-trash-o"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="box">
+                    <div class="box-header">
+                        {{'newAttachment' | i18n}}
+                    </div>
+                    <div class="box-content">
+                        <div class="box-content-row">
+                            <label for="file">{{'file' | i18n}}</label>
+                            <input type="file" id="file" name="file">
+                        </div>
+                    </div>
+                    <div class="box-footer">
+                        {{'maxFileSize' | i18n}}
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="primary" appBlurClick (click)="save()">
+                    <i class="fa fa-lg fa-save"></i> {{'save' | i18n}}
+                </button>
+                <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
+            </div>
+        </div>
+    </div>
+</div>

src/app/vault/attachments.component.ts

@@ -0,0 +1,102 @@
+import * as template from './attachments.component.html';
+
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { Angulartics2 } from 'angulartics2';
+import { ToasterService } from 'angular2-toaster';
+
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { TokenService } from 'jslib/abstractions/token.service';
+
+import { Cipher } from 'jslib/models/domain/cipher';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+import { AttachmentView } from 'jslib/models/view/attachmentView';
+
+@Component({
+    selector: 'app-vault-attachments',
+    template: template,
+})
+export class AttachmentsComponent implements OnInit {
+    @Input() cipherId: string;
+
+    cipher: CipherView;
+    cipherDomain: Cipher;
+    hasUpdatedKey: boolean;
+    canAccessAttachments: boolean;
+
+    constructor(private cipherService: CipherService, private analytics: Angulartics2,
+        private toasterService: ToasterService, private i18nService: I18nService,
+        private cryptoService: CryptoService, private tokenService: TokenService) { }
+
+    async ngOnInit() {
+        this.cipherDomain = await this.cipherService.get(this.cipherId);
+        this.cipher = await this.cipherDomain.decrypt();
+
+        const key = await this.cryptoService.getEncKey();
+        this.hasUpdatedKey = key != null;
+        const isPremium = this.tokenService.getPremium();
+        this.canAccessAttachments = isPremium || this.cipher.organizationId != null;
+
+        if (!this.canAccessAttachments) {
+            alert(this.i18nService.t('premiumRequiredDesc'));
+        } else if (!this.hasUpdatedKey) {
+            alert(this.i18nService.t('updateKey'));
+        }
+    }
+
+    async save() {
+        if (!this.hasUpdatedKey) {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('updateKey'));
+            return;
+        }
+
+        const fileEl = document.getElementById('file') as HTMLInputElement;
+        const files = fileEl.files;
+        if (files == null || files.length === 0) {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('selectFile'));
+            return;
+        }
+
+        if (files[0].size > 104857600) { // 100 MB
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('maxFileSize'));
+            return;
+        }
+
+        this.cipherDomain = await this.cipherService.saveAttachmentWithServer(this.cipherDomain, files[0]);
+        this.cipher = await this.cipherDomain.decrypt();
+        this.analytics.eventTrack.next({ action: 'Added Attachment' });
+        this.toasterService.popAsync('success', null, this.i18nService.t('attachmentSaved'));
+
+        // reset file input
+        // ref: https://stackoverflow.com/a/20552042
+        fileEl.type = '';
+        fileEl.type = 'file';
+        fileEl.value = '';
+    }
+
+    async delete(attachment: AttachmentView) {
+        if (!confirm(this.i18nService.t('deleteAttachmentConfirmation'))) {
+            return;
+        }
+
+        await this.cipherService.deleteAttachmentWithServer(this.cipher.id, attachment.id);
+        this.analytics.eventTrack.next({ action: 'Deleted Attachment' });
+        this.toasterService.popAsync('success', null, this.i18nService.t('deletedAttachment'));
+        const i = this.cipher.attachments.indexOf(attachment);
+        if (i > -1) {
+            this.cipher.attachments.splice(i, 1);
+        }
+    }
+}

src/app/vault/vault.component.html

@@ -27,4 +27,5 @@
                         (onGeneratePassword)="openPasswordGenerator()">
     </app-vault-add-edit>
     <ng-template #passwordGenerator></ng-template>
+    <ng-template #attachments></ng-template>
 </div>

src/app/vault/vault.component.ts

@@ -15,6 +15,7 @@ import {
 
 import { Location } from '@angular/common';
 
+import { AttachmentsComponent } from './attachments.component';
 import { AddEditComponent } from './add-edit.component';
 import { CiphersComponent } from './ciphers.component';
 import { GroupingsComponent } from './groupings.component';
@@ -38,6 +39,7 @@ export class VaultComponent implements OnInit {
     @ViewChild(CiphersComponent) ciphersComponent: CiphersComponent;
     @ViewChild(GroupingsComponent) groupingsComponent: GroupingsComponent;
     @ViewChild('passwordGenerator', { read: ViewContainerRef }) passwordGeneratorModal: ViewContainerRef;
+    @ViewChild('attachments', { read: ViewContainerRef }) attachmentsModal: ViewContainerRef;
 
     action: string;
     cipherId: string = null;
@@ -130,7 +132,11 @@ export class VaultComponent implements OnInit {
     }
 
     editCipherAttachments(cipher: CipherView) {
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        const modal = this.attachmentsModal.createComponent(factory).instance;
+        const childComponent = modal.show<AttachmentsComponent>(AttachmentsComponent, this.attachmentsModal);
 
+        childComponent.cipherId = cipher.id;
     }
 
     cancelledAddEdit(cipher: CipherView) {
@@ -180,10 +186,9 @@ export class VaultComponent implements OnInit {
     }
 
     async openPasswordGenerator() {
-        let factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        let componentRef = this.passwordGeneratorModal.createComponent(factory);
-        let modal = componentRef.instance as ModalComponent;
-        let childComponent = modal.show<PasswordGeneratorComponent>(PasswordGeneratorComponent,
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        const modal = this.passwordGeneratorModal.createComponent(factory).instance;
+        const childComponent = modal.show<PasswordGeneratorComponent>(PasswordGeneratorComponent,
             this.passwordGeneratorModal);
 
         childComponent.showSelect = true;

src/app/vault/view.component.html

@@ -219,12 +219,12 @@
                 {{'attachments' | i18n}}
             </div>
             <div class="box-content">
-                <a class="box-content-row" *ngFor="let attachment of cipher.attachments" href="#" appStopClick
-                   (click)="downloadAttachment(attachment)">
-                    <i class="right-icon fa fa-download fa-fw" *ngIf="!attachment.downloading"></i>
-                    <i class="right-icon fa fa-spinner fa-fw fa-spin" *ngIf="attachment.downloading"></i>
+                <a class="box-content-row box-content-row-flex" *ngFor="let attachment of cipher.attachments"
+                   href="#" appStopClick appBlurCLick (click)="downloadAttachment(attachment)">
+                    <span class="row-main">{{attachment.fileName}}</span>
                     <small class="row-sub-label">{{attachment.sizeName}}</small>
-                    {{attachment.fileName}}
+                    <i class="fa fa-download fa-fw row-sub-icon" *ngIf="!attachment.downloading"></i>
+                    <i class="fa fa-spinner fa-fw fa-spin row-sub-icon" *ngIf="attachment.downloading"></i>
                 </a>
             </div>
         </div>