cipher attachments

src/popup/app-routing.animations.ts

@@ -123,6 +123,9 @@ export const routerTransition = trigger('routerTransition', [
     transition('add-cipher => generator, edit-cipher => generator', inSlideUp),
     transition('generator => add-cipher, generator => edit-cipher', outSlideDown),
 
+    transition('edit-cipher => attachments', inSlideLeft),
+    transition('attachments => edit-cipher', outSlideRight),
+
     transition('tabs => export', inSlideLeft),
     transition('export => tabs', outSlideRight),
 

src/popup/app-routing.module.ts

@@ -22,6 +22,7 @@ import { ExportComponent } from './tools/export.component';
 import { PasswordGeneratorHistoryComponent } from './tools/password-generator-history.component';
 import { PasswordGeneratorComponent } from './tools/password-generator.component';
 import { AddEditComponent } from './vault/add-edit.component';
+import { AttachmentsComponent } from './vault/attachments.component';
 import { CiphersComponent } from './vault/ciphers.component';
 import { CurrentTabComponent } from './vault/current-tab.component';
 import { GroupingsComponent } from './vault/groupings.component';
@@ -109,6 +110,12 @@ const routes: Routes = [
         canActivate: [AuthGuardService],
         data: { state: 'edit-cipher' },
     },
+    {
+        path: 'attachments',
+        component: AttachmentsComponent,
+        canActivate: [AuthGuardService],
+        data: { state: 'attachments' },
+    },
     {
         path: 'generator',
         component: PasswordGeneratorComponent,

src/popup/app.module.ts

@@ -27,10 +27,10 @@ import { TwoFactorComponent } from './accounts/two-factor.component';
 import { SettingsComponent } from './settings/settings.component';
 import { TabsComponent } from './tabs.component';
 import { ExportComponent } from './tools/export.component';
-import { PasswordGeneratorComponent } from './tools/password-generator.component';
-// tslint:disable-next-line
 import { PasswordGeneratorHistoryComponent } from './tools/password-generator-history.component';
+import { PasswordGeneratorComponent } from './tools/password-generator.component';
 import { AddEditComponent } from './vault/add-edit.component';
+import { AttachmentsComponent } from './vault/attachments.component';
 import { CiphersComponent } from './vault/ciphers.component';
 import { CurrentTabComponent } from './vault/current-tab.component';
 import { GroupingsComponent } from './vault/groupings.component';
@@ -73,6 +73,7 @@ import { IconComponent } from 'jslib/angular/components/icon.component';
         AddEditComponent,
         ApiActionDirective,
         AppComponent,
+        AttachmentsComponent,
         AutofocusDirective,
         BlurClickDirective,
         BoxRowDirective,

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

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

src/popup/vault/attachments.component.html

@@ -0,0 +1,53 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+    <header>
+        <div class="left">
+            <button type="button" appBlurClick (click)="back()">
+                <span class="header-icon"><i class="fa fa-chevron-left"></i></span>
+                <span>{{'back' | i18n}}</span>
+            </button>
+        </div>
+        <div class="center">
+            <span class="title">{{'attachments' | i18n}}</span>
+        </div>
+        <div class="right">
+            <button type="submit" appBlurClick [disabled]="form.loading">
+                <span [hidden]="form.loading">{{'save' | i18n}}</span>
+                <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading"></i>
+            </button>
+        </div>
+    </header>
+    <content>
+        <div class="box" *ngIf="cipher && cipher.hasAttachments">
+            <div class="box-content no-hover">
+                <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">
+                        <button class="row-btn btn" type="button" appStopClick appBlurClick title="{{'delete' | i18n}}"
+                           (click)="delete(a)" #deleteBtn [appApiAction]="deletePromises[a.id]"
+                           [disabled]="deleteBtn.loading">
+                            <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>
+            </div>
+        </div>
+        <div class="box">
+            <div class="box-header">
+                {{'newAttachment' | i18n}}
+            </div>
+            <div class="box-content no-hover">
+                <div class="box-content-row">
+                    <label for="file">{{'file' | i18n}}</label>
+                    <input type="file" id="file" name="file" required>
+                </div>
+            </div>
+            <div class="box-footer">
+                {{'maxFileSize' | i18n}}
+            </div>
+        </div>
+    </content>
+</form>

src/popup/vault/attachments.component.ts

@@ -0,0 +1,40 @@
+import { Location } from '@angular/common';
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { TokenService } from 'jslib/abstractions/token.service';
+
+import { AttachmentsComponent as BaseAttachmentsComponent } from 'jslib/angular/components/attachments.component';
+
+@Component({
+    selector: 'app-vault-attachments',
+    templateUrl: 'attachments.component.html',
+})
+export class AttachmentsComponent extends BaseAttachmentsComponent {
+    constructor(cipherService: CipherService, analytics: Angulartics2,
+        toasterService: ToasterService, i18nService: I18nService,
+        cryptoService: CryptoService, tokenService: TokenService,
+        platformUtilsService: PlatformUtilsService, private location: Location,
+        private route: ActivatedRoute) {
+        super(cipherService, analytics, toasterService, i18nService, cryptoService, tokenService,
+            platformUtilsService);
+    }
+
+    async ngOnInit() {
+        this.route.queryParams.subscribe(async (params) => {
+            this.cipherId = params.cipherId;
+            await super.ngOnInit();
+        });
+    }
+
+    back() {
+        this.location.back();
+    }
+}