fix old attachments by reuploading them

jslib

@@ -1 +1 @@
-Subproject commit 17e7ee4838071ea836867b06863a71ab047ed443
+Subproject commit f485fbb6870203b60ac27bcbc2e12bb45f24b538

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

@@ -11,6 +11,8 @@ import { CipherData } from 'jslib/models/data/cipherData';
 import { Cipher } from 'jslib/models/domain/cipher';
 import { Organization } from 'jslib/models/domain/organization';
 
+import { AttachmentView } from 'jslib/models/view/attachmentView';
+
 import { AttachmentsComponent as BaseAttachmentsComponent } from '../../vault/attachments.component';
 
 @Component({
@@ -26,6 +28,12 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
         super(cipherService, i18nService, cryptoService, userService, platformUtilsService);
     }
 
+    protected async reupload(attachment: AttachmentView) {
+        if (this.organization.isAdmin && this.showFixOldAttachments(attachment)) {
+            await super.reuploadCipherAttachment(attachment, true);
+        }
+    }
+
     protected async loadCipher() {
         if (!this.organization.isAdmin) {
             return await super.loadCipher();
@@ -44,4 +52,8 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
         }
         return this.apiService.deleteCipherAttachmentAdmin(this.cipherId, attachmentId);
     }
+
+    protected showFixOldAttachments(attachment: AttachmentView) {
+        return attachment.key == null && this.organization.isAdmin;
+    }
 }

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

@@ -103,4 +103,8 @@ export class CiphersComponent extends BaseCiphersComponent {
         }
         return this.apiService.deleteCipherAdmin(id);
     }
+
+    protected showFixOldAttachments(c: CipherView) {
+        return this.organization.isAdmin && c.hasOldAttachments;
+    }
 }

src/app/vault/attachments.component.html

@@ -19,13 +19,21 @@
                                 <i class="fa fa-spinner fa-lg fa-fw fa-spin" *ngIf="a.downloading"></i>
                             </td>
                             <td>
-                                <a href="#" appStopClick (click)="download(a)">{{a.fileName}}</a>
-                                <br>
+                                <div class="d-flex">
+                                    <a href="#" appStopClick (click)="download(a)">{{a.fileName}}</a>
+                                    <div *ngIf="showFixOldAttachments(a)" class="ml-2">
+                                        <a href="https://help.bitwarden.com/article/attachments/" target="_blank" rel="noopener">
+                                            <i class="fa fa-exclamation-triangle text-warning" title="{{'attachmentFixDesc' | i18n}}"></i></a>
+                                        <button type="button" class="btn btn-outline-primary btn-sm m-0 py-0 px-2"
+                                            (click)="reupload(a)" #reuploadBtn [appApiAction]="reuploadPromises[a.id]"
+                                            [disabled]="reuploadBtn.loading">{{'fix' | i18n}}</button>
+                                    </div>
+                                </div>
                                 <small>{{a.sizeName}}</small>
                             </td>
                             <td class="table-list-options">
-                                <button class="btn btn-outline-danger" type="button" appStopClick title="{{'delete' | i18n}}" (click)="delete(a)" #deleteBtn
-                                    [appApiAction]="deletePromises[a.id]" [disabled]="deleteBtn.loading">
+                                <button class="btn btn-outline-danger" type="button" appStopClick 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" title="{{'loading' | i18n}}"></i>
                                 </button>
@@ -43,7 +51,8 @@
                     <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'close' | i18n}}">{{'close' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'close' | i18n}}">{{'close'
+                    | i18n}}</button>
             </div>
         </form>
     </div>

src/app/vault/attachments.component.ts

@@ -6,6 +6,8 @@ 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({
@@ -18,4 +20,14 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
         platformUtilsService: PlatformUtilsService) {
         super(cipherService, i18nService, cryptoService, userService, platformUtilsService, window);
     }
+
+    protected async reupload(attachment: AttachmentView) {
+        if (this.showFixOldAttachments(attachment)) {
+            await this.reuploadCipherAttachment(attachment, false);
+        }
+    }
+
+    protected showFixOldAttachments(attachment: AttachmentView) {
+        return attachment.key == null && this.cipher.organizationId == null;
+    }
 }

src/app/vault/ciphers.component.html

@@ -11,7 +11,11 @@
                 <td (click)="checkCipher(c)" class="reduced-lh wrap">
                     <a href="#" appStopClick appStopProp (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
                     <i class="fa fa-share-alt" appStopProp *ngIf="!organization && c.organizationId" title="{{'shared' | i18n}}"></i>
-                    <i class="fa fa-paperclip" appStopProp *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
+                    <ng-container *ngIf="c.hasAttachments">
+                        <i class="fa fa-paperclip" appStopProp  title="{{'attachments' | i18n}}"></i>
+                        <i class="fa fa-exclamation-triangle text-warning" appStopProp *ngIf="showFixOldAttachments(c)"
+                            title="{{'attachmentsNeedFix' | i18n}}"></i>
+                    </ng-container>
                     <br>
                     <small appStopProp>{{c.subTitle}}</small>
                 </td>

src/app/vault/ciphers.component.ts

@@ -127,4 +127,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
     protected deleteCipher(id: string) {
         return this.cipherService.deleteWithServer(id);
     }
+
+    protected showFixOldAttachments(c: CipherView) {
+        return c.hasOldAttachments && c.organizationId == null;
+    }
 }

src/app/vault/vault.component.ts

@@ -225,6 +225,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         let madeAttachmentChanges = false;
         childComponent.onUploadedAttachment.subscribe(() => madeAttachmentChanges = true);
         childComponent.onDeletedAttachment.subscribe(() => madeAttachmentChanges = true);
+        childComponent.onReuploadedAttachment.subscribe(() => madeAttachmentChanges = true);
 
         this.modal.onClosed.subscribe(async () => {
             this.modal = null;

src/locales/en/messages.json

@@ -2539,5 +2539,14 @@
   },
   "rotateEncKeyConfirmation": {
     "message": "Are you sure you want to rotate your account's encryption key?"
+  },
+  "attachmentsNeedFix": {
+    "message": "This item has old attachments that need to be fixed."
+  },
+  "attachmentFixDesc": {
+    "message": "This is an old attachment the needs to be fixed. Click to learn more."
+  },
+  "fix": {
+    "message": "Fix"
   }
 }