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

jslib

@@ -1 +1 @@
-Subproject commit ceb78d054ccbd362459bca60bb4b05c16f164ffa
+Subproject commit f9042408f44b299a7cdd1286490b70f5fd2db999

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/components/action-buttons.component.ts

@@ -43,7 +43,7 @@ export class ActionButtonsComponent {
     async ngOnInit() {
         this.userHasPremiumAccess = await this.userService.canAccessPremium();
     }
-    
+
     launch() {
         if (this.cipher.type !== CipherType.Login || !this.cipher.login.canLaunch) {
             return;

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) {