Adding personal item cloning capability (#371)

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

@@ -350,11 +350,11 @@
         </button>
         <div class="right">
             <button appBlurClick type="button" (click)="share()" appA11yTitle="{{'shareItem' | i18n}}"
-                *ngIf="editMode && cipher && !cipher.organizationId">
+                *ngIf="editMode && cipher && !cipher.organizationId && !cloneMode">
                 <i class="fa fa-share-alt fa-lg fa-fw" aria-hidden="true"></i>
             </button>
             <button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger"
-                appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode && !cloneMode" [disabled]="deleteBtn.loading"
                 [appApiAction]="deletePromise">
                 <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
                 <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading" aria-hidden="true"></i>

src/app/vault/vault.component.html

@@ -9,19 +9,21 @@
         (onAddCipherOptions)="addCipherOptions()">
     </app-vault-ciphers>
     <app-vault-view id="details" *ngIf="cipherId && action === 'view'" [cipherId]="cipherId"
-        (onEditCipher)="editCipher($event)" (onViewCipherPasswordHistory)="viewCipherPasswordHistory($event)">
+        (onCloneCipher)="cloneCipher($event)" (onEditCipher)="editCipher($event)" 
+        (onViewCipherPasswordHistory)="viewCipherPasswordHistory($event)">
     </app-vault-view>
-    <app-vault-add-edit id="details" *ngIf="action === 'add' || action === 'edit'"
+    <app-vault-add-edit id="details" *ngIf="action === 'add' || action === 'edit' || action === 'clone'"
+        [cloneMode]="action === 'clone'"
         [folderId]="action === 'add' && folderId !== 'none' ? folderId : null"
         [organizationId]="action === 'add' ? addOrganizationId : null"
         [collectionIds]="action === 'add' ? addCollectionIds : null"
-        [type]="action === 'add' ? (addType ? addType : type) : null" [cipherId]="action === 'edit' ? cipherId : null"
+        [type]="action === 'add' ? (addType ? addType : type) : null" [cipherId]="(action === 'edit' || action === 'clone') ? cipherId : null"
         (onSavedCipher)="savedCipher($event)" (onDeletedCipher)="deletedCipher($event)"
         (onEditAttachments)="editCipherAttachments($event)" (onCancelled)="cancelledAddEdit($event)"
         (onShareCipher)="shareCipher($event)" (onEditCollections)="cipherCollections($event)"
         (onGeneratePassword)="openPasswordGenerator(true)">
     </app-vault-add-edit>
-    <div id="logo" *ngIf="action !== 'add' && action !== 'edit' && action !== 'view'">
+    <div id="logo" *ngIf="action !== 'add' && action !== 'edit' && action !== 'view' && action !== 'clone'">
         <div class="content">
             <div class="inner-content">
                 <img class="logo-image" alt="Bitwarden" aria-hidden="true" />

src/app/vault/vault.component.ts

@@ -189,7 +189,9 @@ export class VaultComponent implements OnInit, OnDestroy {
                 if (params.cipherId) {
                     const cipherView = new CipherView();
                     cipherView.id = params.cipherId;
-                    if (params.action === 'edit') {
+                    if (params.action === 'clone') {
+                        await this.cloneCipher(cipherView);
+                    } else if (params.action === 'edit') {
                         await this.editCipher(cipherView);
                     } else {
                         await this.viewCipher(cipherView);
@@ -249,6 +251,12 @@ export class VaultComponent implements OnInit, OnDestroy {
                 this.editCipher(cipher);
             }),
         }));
+        menu.append(new remote.MenuItem({
+            label: this.i18nService.t('clone'),
+            click: () => this.functionWithChangeDetection(() => {
+                this.cloneCipher(cipher);
+            }),
+        }));
 
         switch (cipher.type) {
             case CipherType.Login:
@@ -315,6 +323,18 @@ export class VaultComponent implements OnInit, OnDestroy {
         this.go();
     }
 
+    async cloneCipher(cipher: CipherView) {
+        if (this.action === 'clone' && this.cipherId === cipher.id) {
+            return;
+        } else if (this.dirtyInput() && await this.wantsToSaveChanges()) {
+            return;
+        }
+
+        this.cipherId = cipher.id;
+        this.action = 'clone';
+        this.go();
+    }
+
     async addCipher(type: CipherType = null) {
         if (this.action === 'add') {
             return;

src/app/vault/view.component.html

@@ -276,4 +276,7 @@
     <button appBlurClick class="primary" (click)="edit()" appA11yTitle="{{'edit' | i18n}}">
         <i class="fa fa-pencil fa-fw fa-lg" aria-hidden="true"></i>
     </button>
+    <button appBlurClick class="primary" *ngIf="!cipher?.organizationId" (click)="clone()" appA11yTitle="{{'clone' | i18n}}">
+        <i class="fa fa-clone fa-fw fa-lg" aria-hidden="true"></i>
+    </button>
 </div>

src/locales/en/messages.json

@@ -1273,5 +1273,8 @@
   },
   "unsavedChangesTitle": {
     "message": "Unsaved Changes"
+  },
+  "clone": {
+    "message": "Clone"
   }
 }