Transition Group: Add enable disable functionallity. User component: Add condition to avoid double message for login.

login/user.component.html

@@ -52,7 +52,7 @@
                    <button (click)="login()" class=" uk-button uk-button-primary">Login</button>
                 </div>
            </form-->
-          <div *ngIf="errorCode == '1' || !loggedIn" class="uk-alert uk-alert-warning">
+          <div *ngIf="errorCode == '1' || (!loggedIn && errorCode != '3')" class="uk-alert uk-alert-warning">
             The requested page requires authentication.
             <span *ngIf="!loggedIn">Please  <a class="uk-link" (click)="logIn()"> sign in</a> to continue.
             </span>

utils/transition-group/transition-group.component.ts

@@ -1,7 +1,16 @@
 import {TransitionGroupItemDirective} from "./transition-group-item.directive";
 import {AfterViewInit, Component, ContentChildren, OnDestroy, QueryList, ViewEncapsulation} from "@angular/core";
 import {Subscription} from "rxjs";
+import {THREE} from "@angular/cdk/keycodes";
 
+/**
+ *  Transition Component for array changes
+ *
+ *  Call init() method if array is changed. e.g. (different array, insert, delete) and before swap action
+ *
+ *  If a change is triggered, but you want to avoid transition use disable() - (Your changes) - init() - enable()
+ *
+ * */
 @Component({
   selector: '[transition-group]',
   template: '<ng-content></ng-content>',
@@ -10,35 +19,38 @@ import {Subscription} from "rxjs";
 })
 export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
   @ContentChildren(TransitionGroupItemDirective) items: QueryList<TransitionGroupItemDirective>;
+  private disabled: boolean = false;
   private subscription: Subscription;
 
   ngAfterViewInit() {
     this.init();
     this.subscription = this.items.changes.subscribe(items => {
-      items.forEach(item => item.prevPos = item.newPos || item.prevPos);
+      if(!this.disabled) {
-      items.forEach(this.runCallback);
+        items.forEach(item => item.prevPos = item.newPos || item.prevPos);
-      this.refreshPosition('newPos');
+        items.forEach(this.runCallback);
-      items.forEach(item => item.prevPos = item.prevPos || item.newPos); // for new items
+        this.refreshPosition('newPos');
-
+        items.forEach(item => item.prevPos = item.prevPos || item.newPos); // for new items
-      const animate = () => {
+  
-        items.forEach(this.applyTranslation);
+        const animate = () => {
-        this['_forceReflow'] = document.body.offsetHeight; // force reflow to put everything in position
+          items.forEach(this.applyTranslation);
-        this.items.forEach(this.runTransition.bind(this));
+          this['_forceReflow'] = document.body.offsetHeight; // force reflow to put everything in position
-      }
+          this.items.forEach(this.runTransition.bind(this));
-
+        }
-      const willMoveSome = items.some((item) => {
+  
-        const dx = item.prevPos.left - item.newPos.left;
+        const willMoveSome = items.some((item) => {
-        const dy = item.prevPos.top - item.newPos.top;
+          const dx = item.prevPos.left - item.newPos.left;
-        return dx || dy;
+          const dy = item.prevPos.top - item.newPos.top;
-      });
+          return dx || dy;
-
+        });
-      if (willMoveSome) {
+  
-        animate();
+        if (willMoveSome) {
-      } else {
-        setTimeout(() => { // for removed items
-          this.refreshPosition('newPos');
           animate();
-        }, 0);
+        } else {
+          setTimeout(() => { // for removed items
+            this.refreshPosition('newPos');
+            animate();
+          }, 0);
+        }
       }
     });
   }
@@ -49,6 +61,10 @@ export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
     }
   }
 
+  /**
+   * Should be used in every array change e.g. (different array, insert, delete)
+   * and before swap action
+   * */
   init() {
     this.refreshPosition('prevPos');
     this.refreshPosition('newPos');
@@ -95,4 +111,20 @@ export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
       style.transitionDuration = '0s';
     }
   }
+  
+  /**
+   * Enable transition
+   *
+   * */
+  enable() {
+    this.disabled = false;
+  }
+  
+  /**
+   * Disable transition
+   *
+   * */
+  disable() {
+    this.disabled = true;
+  }
 }