Moved isAuthenticated and isLoading to container

src/app/shared/log-in/log-in.component.html

@@ -1,5 +1,7 @@
 <ds-loading *ngIf="(loading | async) || (isAuthenticated | async)" class="m-5"></ds-loading>
+<div *ngIf="!(loading | async) && !(isAuthenticated | async)" class="form-login px-4 py-3">
 <ng-container *ngFor="let authMethodModel of injectedAuthMethods">
   <ds-login-container
     [authMethodModel]="authMethodModel"></ds-login-container>
 </ng-container>
+</div>

src/app/shared/log-in/log-in.component.ts

@@ -5,6 +5,8 @@ import { select, Store } from '@ngrx/store';
 import { getAuthenticationMethods, isAuthenticated, isAuthenticationLoading } from '../../core/auth/selectors';
 import { CoreState } from '../../core/core.reducers';
 import { InjectedAuthMethodModel } from './injectedAuthMethodModel/injectedAuthMethodModel';
+import { filter, takeWhile } from 'rxjs/operators';
+import { AuthService } from '../../core/auth/auth.service';
 
 @Component({
   selector: 'ds-log-in',
@@ -35,9 +37,17 @@ export class LogInComponent implements OnInit, OnDestroy {
    * @type {boolean}
    */
   public loading: Observable<boolean>;
+
+  /**
+   * Component state.
+   * @type {boolean}
+   */
+  private alive = true;
+
   private subscription: Subscription;
 
-  constructor(private store: Store<CoreState>) {
+  constructor(private store: Store<CoreState>,
+              private authService: AuthService,) {
   }
 
   ngOnInit(): void {
@@ -56,10 +66,22 @@ export class LogInComponent implements OnInit, OnDestroy {
 
     // set isAuthenticated
     this.isAuthenticated = this.store.pipe(select(isAuthenticated));
+
+    // subscribe to success
+    this.store.pipe(
+      select(isAuthenticated),
+      takeWhile(() => this.alive),
+      filter((authenticated) => authenticated))
+      .subscribe(() => {
+          this.authService.redirectAfterLoginSuccess(this.isStandalonePage);
+        }
+      );
+
   }
 
   ngOnDestroy(): void {
     this.subscription.unsubscribe();
+    this.alive = false;
   }
 
 }

src/app/shared/log-in/methods/password/log-in-password.component.html

@@ -1,4 +1,5 @@
-<form *ngIf="!(loading | async) && !(isAuthenticated | async)" class="form-login px-4 py-3" (ngSubmit)="submit()"
+<!--*ngIf="!(loading | async) && !(isAuthenticated | async)" class="form-login px-4 py-3"-->
+<form  (ngSubmit)="submit()"
       [formGroup]="form" novalidate>
   <label for="inputEmail" class="sr-only">{{"login.form.email" | translate}}</label>
   <input id="inputEmail"

src/app/shared/log-in/methods/password/log-in-password.component.ts

@@ -36,7 +36,7 @@ import { InjectedAuthMethodModel } from '../../injectedAuthMethodModel/injectedA
   animations: [fadeOut]
 })
 @renderAuthMethodFor(AuthMethodType.Password)
-export class LogInPasswordComponent implements OnDestroy, OnInit {
+export class LogInPasswordComponent implements OnInit {
 
   /**
    * The error if authentication fails.
@@ -66,13 +66,15 @@ export class LogInPasswordComponent implements OnDestroy, OnInit {
    * Whether user is authenticated.
    * @type {Observable<string>}
    */
-  public isAuthenticated: Observable<boolean>;
+/*  public isAuthenticated: Observable<boolean>;*/
 
   /**
    * True if the authentication is loading.
    * @type {boolean}
    */
+/*
   public loading: Observable<boolean>;
+*/
 
   /**
    * The authentication form.
@@ -80,11 +82,11 @@ export class LogInPasswordComponent implements OnDestroy, OnInit {
    */
   public form: FormGroup;
 
-  /**
+/*  /!**
    * Component state.
    * @type {boolean}
-   */
+   *!/
-  private alive = true;
+  private alive = true;*/
 
   @Input() authMethodModel: InjectedAuthMethodModel;
 
@@ -96,7 +98,7 @@ export class LogInPasswordComponent implements OnDestroy, OnInit {
    */
   constructor(
     @Inject('authMethodModelProvider') public injectedAuthMethodModel: InjectedAuthMethodModel,
-    private authService: AuthService,
+   /* private authService: AuthService,*/
     private formBuilder: FormBuilder,
     private store: Store<CoreState>
   ) {
@@ -109,7 +111,7 @@ export class LogInPasswordComponent implements OnDestroy, OnInit {
    */
   public ngOnInit() {
     // set isAuthenticated
-    this.isAuthenticated = this.store.pipe(select(isAuthenticated));
+/*    this.isAuthenticated = this.store.pipe(select(isAuthenticated));*/
 
     // set formGroup
     this.form = this.formBuilder.group({
@@ -135,7 +137,7 @@ export class LogInPasswordComponent implements OnDestroy, OnInit {
       })
     );
 
-    // set loading
+/*    // set loading
     this.loading = this.store.pipe(select(isAuthenticationLoading));
 
     // subscribe to success
@@ -146,7 +148,7 @@ export class LogInPasswordComponent implements OnDestroy, OnInit {
       .subscribe(() => {
           this.authService.redirectAfterLoginSuccess(this.authMethodModel.isStandalonePage);
         }
-      );
+      );*/
 
   }
 
@@ -154,9 +156,9 @@ export class LogInPasswordComponent implements OnDestroy, OnInit {
    *  Lifecycle hook that is called when a directive, pipe or service is destroyed.
    * @method ngOnDestroy
    */
-  public ngOnDestroy() {
+/*  public ngOnDestroy() {
     this.alive = false;
-  }
+  }*/
 
   /**
    * Reset error or message.