Skip to content

Commit 83d5408

Browse files
atarix83atarix83
committed
Merged in task/dspace-cris-2023_02_x/DSC-2201 (pull request DSpace#2841)
[DSC-2201] Show loading icon during SSR in order to fix issue with cloudfront
2 parents e47c540 + a84cbc6 commit 83d5408

3 files changed

Lines changed: 102 additions & 47 deletions

File tree

‎src/app/login-page/login-page.component.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
<div class="container w-100 h-100">
22
<div class="text-center mt-5 row justify-content-center">
3-
<div>
3+
<div *ngIf="isPlatformBrowser else loading" data-test="login">
44
<img class="mb-4 login-logo" src="assets/images/dspace-logo.svg" [alt]="'repository.image.logo' | translate">
55
<h1 class="h3 mb-0 font-weight-normal">{{"login.form.header" | translate}}</h1>
66
<ds-themed-log-in
77
[isStandalonePage]="true"></ds-themed-log-in>
88
</div>
99
</div>
1010
</div>
11+
12+
<ng-template #loading>
13+
<ds-themed-loading [showMessage]="false" data-test="loading"></ds-themed-loading>
14+
</ng-template>

‎src/app/login-page/login-page.component.spec.ts‎

Lines changed: 59 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NO_ERRORS_SCHEMA } from '@angular/core';
1+
import { NO_ERRORS_SCHEMA, PLATFORM_ID } from '@angular/core';
22
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
33
import { ActivatedRoute } from '@angular/router';
44

@@ -9,6 +9,7 @@ import { of as observableOf } from 'rxjs';
99
import { XSRFService } from '../core/xsrf/xsrf.service';
1010
import { LoginPageComponent } from './login-page.component';
1111
import { ActivatedRouteStub } from '../shared/testing/active-router.stub';
12+
import { By } from '@angular/platform-browser';
1213

1314
describe('LoginPageComponent', () => {
1415
let comp: LoginPageComponent;
@@ -24,29 +25,65 @@ describe('LoginPageComponent', () => {
2425
select: observableOf(true)
2526
});
2627

27-
beforeEach(waitForAsync(() => {
28-
TestBed.configureTestingModule({
29-
imports: [
30-
TranslateModule.forRoot()
31-
],
32-
declarations: [LoginPageComponent],
33-
providers: [
34-
{ provide: ActivatedRoute, useValue: activatedRouteStub },
35-
{ provide: Store, useValue: store },
36-
{ provide: XSRFService, useValue: {} },
37-
],
38-
schemas: [NO_ERRORS_SCHEMA]
39-
}).compileComponents();
40-
}));
41-
42-
beforeEach(() => {
43-
fixture = TestBed.createComponent(LoginPageComponent);
44-
comp = fixture.componentInstance; // SearchPageComponent test instance
45-
fixture.detectChanges();
28+
describe('when platform is browser', () => {
29+
beforeEach(waitForAsync(() => {
30+
TestBed.configureTestingModule({
31+
imports: [
32+
TranslateModule.forRoot()
33+
],
34+
declarations: [LoginPageComponent],
35+
providers: [
36+
{ provide: ActivatedRoute, useValue: activatedRouteStub },
37+
{ provide: Store, useValue: store },
38+
{ provide: XSRFService, useValue: {} },
39+
{ provide: PLATFORM_ID, useValue: 'browser' }
40+
],
41+
schemas: [NO_ERRORS_SCHEMA]
42+
}).compileComponents();
43+
}));
44+
45+
beforeEach(() => {
46+
fixture = TestBed.createComponent(LoginPageComponent);
47+
comp = fixture.componentInstance; // SearchPageComponent test instance
48+
fixture.detectChanges();
49+
});
50+
51+
it('should create instance', () => {
52+
const login = fixture.debugElement.query(By.css('[data-test="login"]'));
53+
const loading = fixture.debugElement.query(By.css('[data-test="loading"]'));
54+
expect(login).toBeTruthy();
55+
expect(loading).toBeFalsy();
56+
});
4657
});
4758

48-
it('should create instance', () => {
49-
expect(comp).toBeDefined();
59+
describe('when platform is browser', () => {
60+
beforeEach(waitForAsync(() => {
61+
TestBed.configureTestingModule({
62+
imports: [
63+
TranslateModule.forRoot()
64+
],
65+
declarations: [LoginPageComponent],
66+
providers: [
67+
{ provide: ActivatedRoute, useValue: activatedRouteStub },
68+
{ provide: Store, useValue: store },
69+
{ provide: PLATFORM_ID, useValue: 'server' }
70+
],
71+
schemas: [NO_ERRORS_SCHEMA]
72+
}).compileComponents();
73+
}));
74+
75+
beforeEach(() => {
76+
fixture = TestBed.createComponent(LoginPageComponent);
77+
comp = fixture.componentInstance; // SearchPageComponent test instance
78+
fixture.detectChanges();
79+
});
80+
81+
it('should create instance', () => {
82+
const login = fixture.debugElement.query(By.css('[data-test="login"]'));
83+
const loading = fixture.debugElement.query(By.css('[data-test="loading"]'));
84+
expect(login).toBeFalsy();
85+
expect(loading).toBeTruthy();
86+
});
5087
});
5188

5289
});

‎src/app/login-page/login-page.component.ts‎

Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Component, OnDestroy, OnInit } from '@angular/core';
1+
import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
2+
import { isPlatformBrowser } from '@angular/common';
23
import { ActivatedRoute } from '@angular/router';
34

45
import { combineLatest as observableCombineLatest, Subscription } from 'rxjs';
@@ -27,6 +28,11 @@ import { isAuthenticated } from '../core/auth/selectors';
2728
})
2829
export class LoginPageComponent implements OnDestroy, OnInit {
2930

31+
/**
32+
* Whether a platform id represents a browser platform.
33+
*/
34+
isPlatformBrowser: boolean;
35+
3036
/**
3137
* Subscription to unsubscribe onDestroy
3238
* @type {Subscription}
@@ -36,38 +42,46 @@ export class LoginPageComponent implements OnDestroy, OnInit {
3642
/**
3743
* Initialize instance variables
3844
*
45+
* @param {PLATFORM_ID} platformId
3946
* @param {ActivatedRoute} route
4047
* @param {Store<AppState>} store
4148
*/
42-
constructor(private route: ActivatedRoute,
43-
private store: Store<AppState>) {}
49+
constructor(
50+
@Inject(PLATFORM_ID) protected platformId: string,
51+
private route: ActivatedRoute,
52+
private store: Store<AppState>,
53+
) {
54+
this.isPlatformBrowser = isPlatformBrowser(this.platformId);
55+
}
4456

4557
/**
4658
* Initialize instance variables
4759
*/
4860
ngOnInit() {
49-
const queryParamsObs = this.route.queryParams;
50-
const authenticated = this.store.select(isAuthenticated);
51-
this.sub = observableCombineLatest(queryParamsObs, authenticated).pipe(
52-
filter(([params, auth]) => isNotEmpty(params.token) || isNotEmpty(params.expired)),
53-
take(1)
54-
).subscribe(([params, auth]) => {
55-
const token = params.token;
56-
let authToken: AuthTokenInfo;
57-
if (!auth) {
58-
if (isNotEmpty(token)) {
59-
authToken = new AuthTokenInfo(token);
60-
this.store.dispatch(new AuthenticatedAction(authToken));
61-
} else if (isNotEmpty(params.expired)) {
62-
this.store.dispatch(new AddAuthenticationMessageAction('auth.messages.expired'));
63-
}
64-
} else {
65-
if (isNotEmpty(token)) {
66-
authToken = new AuthTokenInfo(token);
67-
this.store.dispatch(new AuthenticationSuccessAction(authToken));
61+
if (this.isPlatformBrowser) {
62+
const queryParamsObs = this.route.queryParams;
63+
const authenticated = this.store.select(isAuthenticated);
64+
this.sub = observableCombineLatest([queryParamsObs, authenticated]).pipe(
65+
filter(([params, auth]) => isNotEmpty(params.token) || isNotEmpty(params.expired)),
66+
take(1)
67+
).subscribe(([params, auth]) => {
68+
const token = params.token;
69+
let authToken: AuthTokenInfo;
70+
if (!auth) {
71+
if (isNotEmpty(token)) {
72+
authToken = new AuthTokenInfo(token);
73+
this.store.dispatch(new AuthenticatedAction(authToken));
74+
} else if (isNotEmpty(params.expired)) {
75+
this.store.dispatch(new AddAuthenticationMessageAction('auth.messages.expired'));
76+
}
77+
} else {
78+
if (isNotEmpty(token)) {
79+
authToken = new AuthTokenInfo(token);
80+
this.store.dispatch(new AuthenticationSuccessAction(authToken));
81+
}
6882
}
69-
}
70-
});
83+
});
84+
}
7185
}
7286

7387
/**

0 commit comments

Comments
 (0)