Add support for viewing attachments in emergency access (#814)

src/app/app.module.ts

@@ -114,6 +114,7 @@ import { DeauthorizeSessionsComponent } from './settings/deauthorize-sessions.co
 import { DeleteAccountComponent } from './settings/delete-account.component';
 import { DomainRulesComponent } from './settings/domain-rules.component';
 import { EmergencyAccessAddEditComponent } from './settings/emergency-access-add-edit.component';
+import { EmergencyAccessAttachmentsComponent } from './settings/emergency-access-attachments.component';
 import { EmergencyAccessComponent } from './settings/emergency-access.component';
 import { EmergencyAccessConfirmComponent } from './settings/emergency-access-confirm.component';
 import { EmergencyAccessTakeoverComponent } from './settings/emergency-access-takeover.component';
@@ -304,6 +305,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         DomainRulesComponent,
         DownloadLicenseComponent,
         EmergencyAccessAddEditComponent,
+        EmergencyAccessAttachmentsComponent,
         EmergencyAccessComponent,
         EmergencyAccessConfirmComponent,
         EmergencyAccessTakeoverComponent,
@@ -424,6 +426,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         DeleteAccountComponent,
         DeleteOrganizationComponent,
         EmergencyAccessAddEditComponent,
+        EmergencyAccessAttachmentsComponent,
         EmergencyAccessConfirmComponent,
         EmergencyAccessTakeoverComponent,
         EmergencyAddEditComponent,

src/app/organizations/vault/attachments.component.ts

@@ -20,6 +20,7 @@ import { AttachmentsComponent as BaseAttachmentsComponent } from '../../vault/at
     templateUrl: '../../vault/attachments.component.html',
 })
 export class AttachmentsComponent extends BaseAttachmentsComponent {
+    viewOnly = false;
     organization: Organization;
 
     constructor(cipherService: CipherService, i18nService: I18nService,

src/app/settings/emergency-access-attachments.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+
+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 { UserService } from 'jslib/abstractions/user.service';
+
+import { AttachmentView } from 'jslib/models/view/attachmentView';
+
+import { AttachmentsComponent as BaseAttachmentsComponent } from 'jslib/angular/components/attachments.component';
+
+@Component({
+    selector: 'emergency-access-attachments',
+    templateUrl: '../vault/attachments.component.html',
+})
+export class EmergencyAccessAttachmentsComponent extends BaseAttachmentsComponent {
+    viewOnly = true;
+    canAccessAttachments = true;
+
+    constructor(cipherService: CipherService, i18nService: I18nService,
+        cryptoService: CryptoService, userService: UserService,
+        platformUtilsService: PlatformUtilsService) {
+        super(cipherService, i18nService, cryptoService, userService, platformUtilsService, window);
+    }
+
+    protected async init() {
+        // Do nothing since cipher is already decoded
+    }
+
+    protected showFixOldAttachments(attachment: AttachmentView) {
+        return false;
+    }
+}

src/app/settings/emergency-access-view.component.html

@@ -23,9 +23,25 @@
                         <br>
                         <small>{{c.subTitle}}</small>
                     </td>
+                    <td class="table-list-options">
+                        <div class="dropdown" appListDropdown *ngIf="c.hasAttachments">
+                            <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
+                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                                appA11yTitle="{{'options' | i18n}}">
+                                <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+                            </button>
+                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                <a class="dropdown-item" href="#" appStopClick (click)="viewAttachments(c)">
+                                    <i class="fa fa-fw fa-paperclip" aria-hidden="true"></i>
+                                    {{'attachments' | i18n}}
+                                </a>
+                            </div>
+                        </div>
+                    </td>
                 </tr>
             </tbody>
         </table>
     </ng-container>
 </div>
 <ng-template #cipherAddEdit></ng-template>
+<ng-template #attachments></ng-template>

src/app/settings/emergency-access-view.component.ts

@@ -18,6 +18,7 @@ import { CipherView } from 'jslib/models/view/cipherView';
 
 import { ModalComponent } from '../modal.component';
 
+import { EmergencyAccessAttachmentsComponent } from './emergency-access-attachments.component';
 import { EmergencyAddEditComponent } from './emergency-add-edit.component';
 
 @Component({
@@ -26,6 +27,7 @@ import { EmergencyAddEditComponent } from './emergency-add-edit.component';
 })
 export class EmergencyAccessViewComponent implements OnInit {
     @ViewChild('cipherAddEdit', { read: ViewContainerRef, static: true }) cipherAddEditModalRef: ViewContainerRef;
+    @ViewChild('attachments', { read: ViewContainerRef, static: true }) attachmentsModalRef: ViewContainerRef;
 
     id: string;
     ciphers: CipherView[] = [];
@@ -72,6 +74,22 @@ export class EmergencyAccessViewComponent implements OnInit {
         this.ciphers = await this.getAllCiphers(response);
     }
 
+    async viewAttachments(cipher: CipherView) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.attachmentsModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<EmergencyAccessAttachmentsComponent>(EmergencyAccessAttachmentsComponent, this.attachmentsModalRef);
+
+        childComponent.cipher = cipher;
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
+        });
+    }
+
     protected async getAllCiphers(response: EmergencyAccessViewResponse): Promise<CipherView[]> {
         const ciphers = response.ciphers;
 

src/app/vault/attachments.component.html

@@ -35,7 +35,7 @@
                                 </div>
                                 <small>{{a.sizeName}}</small>
                             </td>
-                            <td class="table-list-options">
+                            <td class="table-list-options" *ngIf="!viewOnly">
                                 <button class="btn btn-outline-danger" type="button" appStopClick
                                     appA11yTitle="{{'delete' | i18n}}" (click)="delete(a)" #deleteBtn
                                     [appApiAction]="deletePromises[a.id]" [disabled]="deleteBtn.loading">
@@ -48,13 +48,15 @@
                         </tr>
                     </tbody>
                 </table>
-                <h3>{{'newAttachment' | i18n}}</h3>
-                <label for="file" class="sr-only">{{'file' | i18n}}</label>
-                <input type="file" id="file" class="form-control-file" name="file" required>
-                <small class="form-text text-muted">{{'maxFileSize' | i18n}}</small>
+                <div *ngIf="!viewOnly">
+                    <h3>{{'newAttachment' | i18n}}</h3>
+                    <label for="file" class="sr-only">{{'file' | i18n}}</label>
+                    <input type="file" id="file" class="form-control-file" name="file" required>
+                    <small class="form-text text-muted">{{'maxFileSize' | i18n}}</small>
+                </div>
             </div>
             <div class="modal-footer">
-                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading" *ngIf="!viewOnly">
                     <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>

src/app/vault/attachments.component.ts

@@ -15,6 +15,8 @@ import { AttachmentsComponent as BaseAttachmentsComponent } from 'jslib/angular/
     templateUrl: 'attachments.component.html',
 })
 export class AttachmentsComponent extends BaseAttachmentsComponent {
+    viewOnly = false;
+
     constructor(cipherService: CipherService, i18nService: I18nService,
         cryptoService: CryptoService, userService: UserService,
         platformUtilsService: PlatformUtilsService) {