Move share from edit to view. Fix animations (#1497)

* Move share from edit to view. Fix animations

Editing and Sharing a cipher simultaneously results in lost edits. Move
share button to the view page to resolve this confusion.

Previous routing caused the share form to be animated again on
submition, resulting in a stuttering page load. This method correctly
animates all transitions with the concession that the share page
always takes you back to the view page. This is not necessarily the current
behavior, but it is the most likely behavior in the current scheme

* Update jslib reference

src/popup/app-routing.animations.ts

@@ -150,6 +150,9 @@ export const routerTransition = trigger('routerTransition', [
     transition('view-cipher => clone-cipher', inSlideUp),
     transition('clone-cipher => view-cipher, clone-cipher => tabs', outSlideDown),
 
+    transition('view-cipher => share-cipher', inSlideUp),
+    transition('share-cipher => view-cipher', outSlideDown),
+
     transition('tabs => add-cipher', inSlideUp),
     transition('add-cipher => tabs', outSlideDown),
 
@@ -159,9 +162,6 @@ export const routerTransition = trigger('routerTransition', [
     transition('add-cipher => generator, edit-cipher => generator, clone-cipher => generator', inSlideUp),
     transition('generator => add-cipher, generator => edit-cipher, generator => clone-cipher', outSlideDown),
 
-    transition('edit-cipher => share-cipher', inSlideUp),
-    transition('share-cipher => edit-cipher, share-cipher => view-cipher', outSlideDown),
-
     transition('edit-cipher => attachments, edit-cipher => collections', inSlideLeft),
     transition('attachments => edit-cipher, collections => edit-cipher', outSlideRight),
 

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

@@ -374,15 +374,6 @@
         </div>
         <div class="box list" *ngIf="editMode && !cloneMode">
             <div class="box-content single-line">
-                <a class="box-content-row" href="#" appStopClick appBlurClick (click)="share()"
-                    *ngIf="!cipher.organizationId">
-                    <div class="row-main text-primary">
-                        <div class="icon text-primary" aria-hidden="true">
-                            <i class="fa fa-share-alt fa-lg fa-fw"></i>
-                        </div>
-                        <span>{{'shareItem' | i18n}}</span>
-                    </div>
-                </a>
                 <a class="box-content-row" href="#" appStopClick appBlurClick (click)="delete()"
                     [appApiAction]="deletePromise" #deleteBtn>
                     <div class="row-main text-danger">

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

@@ -118,12 +118,6 @@ export class AddEditComponent extends BaseAddEditComponent {
         this.router.navigate(['/attachments'], { queryParams: { cipherId: this.cipher.id } });
     }
 
-    share() {
-        super.share();
-        if (this.cipher.organizationId == null) {
-            this.router.navigate(['/share-cipher'], { queryParams: { cipherId: this.cipher.id } });
-        }
-    }
 
     editCollections() {
         super.editCollections();

src/popup/vault/share.component.ts

@@ -41,14 +41,12 @@ export class ShareComponent extends BaseShareComponent {
     async submit(): Promise<boolean> {
         const success = await super.submit();
         if (success) {
-            window.setTimeout(() => {
-                this.location.back();
-            }, 200);
+            this.cancel();
         }
         return success;
     }
 
     cancel() {
-        this.location.back();
+        this.router.navigate(['/view-cipher'], { replaceUrl: true, queryParams: { cipherId: this.cipher.id } });
     }
 }

src/popup/vault/view.component.html

@@ -295,6 +295,14 @@
                     <span>{{'cloneItem' | i18n}}</span>
                 </div>
             </a>
+            <a class="box-content-row" href="#" appStopClick appBlurClick (click)="share()" *ngIf="!cipher.organizationId">
+                <div class="row-main text-primary">
+                    <div class="icon text-primary" aria-hidden="true">
+                        <i class="fa fa-share-alt fa-lg fa-fw"></i>
+                    </div>
+                    <span>{{'shareItem' | i18n}}</span>
+                </div>
+            </a>
             <a class="box-content-row" href="#" appStopClick appBlurClick (click)="restore()" *ngIf="cipher.isDeleted">
                 <div class="row-main text-primary">
                     <div class="icon text-primary" aria-hidden="true">

src/popup/vault/view.component.ts

@@ -129,6 +129,13 @@ export class ViewComponent extends BaseViewComponent {
         });
     }
 
+    share() {
+        super.share();
+        if (this.cipher.organizationId == null) {
+            this.router.navigate(['/share-cipher'], { replaceUrl: true, queryParams: { cipherId: this.cipher.id } });
+        }
+    }
+
     async fillCipher() {
         const didAutofill = await this.doAutofill();
         if (didAutofill) {