Commit df34f2ba authored by Christopher Fullarton's avatar Christopher Fullarton

Adds loading spinner in the login component. Fixes quiz results test

parent 4c2b1b33
Pipeline #34483 passed with stages
in 15 minutes and 21 seconds
......@@ -147,7 +147,7 @@ describe('QuizResultsComponent', () => {
expect(component.showStopCountdownButton).toBeFalsy();
}));
it(`#showStartQuizButton`, inject([QuizService, AttendeeService], (quizService: QuizService, attendeeService: AttendeeService) => {
it(`#showStartQuizButton`, inject([QuizService], (quizService: QuizService) => {
quizService['_isOwner'] = true;
quizService.readingConfirmationRequested = true;
......@@ -169,7 +169,7 @@ describe('QuizResultsComponent', () => {
currentQuizName: '',
responses: [
{
value: 0,
value: '0',
confidence: 20,
readingConfirmation: true,
responseTime: 10,
......@@ -197,7 +197,7 @@ describe('QuizResultsComponent', () => {
currentQuizName: '',
responses: [
{
value: 0,
value: '0',
confidence: 20,
readingConfirmation: true,
responseTime: 10,
......@@ -224,7 +224,7 @@ describe('QuizResultsComponent', () => {
currentQuizName: '',
responses: [
{
value: 0,
value: '0',
confidence: 20,
readingConfirmation: true,
responseTime: 10,
......@@ -250,7 +250,7 @@ describe('QuizResultsComponent', () => {
currentQuizName: '',
responses: [
{
value: 0,
value: '0',
confidence: 20,
readingConfirmation: true,
responseTime: 10,
......
......@@ -4,14 +4,14 @@
<div *ngIf="hasUsernamePasswordLogin"
class="input-group">
<input (keydown.enter)="login()"
<input (keydown.enter)="login('password')"
[(ngModel)]="username"
[placeholder]="'component.login.username' | translate"
class="form-control my-2 my-sm-0"
name="username"
type="text"/>
<input (keydown.enter)="login()"
<input (keydown.enter)="login('password')"
[(ngModel)]="password"
[placeholder]="'component.login.password' | translate"
class="form-control my-2 my-sm-0"
......@@ -20,8 +20,14 @@
<div class="input-group-append">
<button (click)="login()"
class="btn btn-light">{{'component.login.login' | translate}}
<button (click)="login('password')"
[disabled]="isLoggingIn"
class="btn btn-light">
<fa-icon *ngIf="isLoggingIn === 'password'"
[icon]="'spinner'"
[spin]="true"
class="mr-2"></fa-icon>
<span>{{'component.login.login' | translate}}</span>
</button>
</div>
......@@ -34,7 +40,7 @@
<div class="input-group">
<input (keydown.enter)="login()"
<input (keydown.enter)="login('token')"
[(ngModel)]="token"
[placeholder]="'component.login.token' | translate"
class="form-control my-2 my-sm-0"
......@@ -43,8 +49,14 @@
<div class="input-group-append">
<button (click)="login()"
class="btn btn-light">{{'component.login.login' | translate}}
<button (click)="login('token')"
[disabled]="isLoggingIn"
class="btn btn-light">
<fa-icon *ngIf="isLoggingIn === 'token'"
[icon]="'spinner'"
[spin]="true"
class="mr-2"></fa-icon>
<span>{{'component.login.login' | translate}}</span>
</button>
</div>
......
......@@ -5,6 +5,8 @@ import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { JWT_OPTIONS, JwtModule } from '@auth0/angular-jwt';
import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import { TranslateService } from '@ngx-translate/core';
import { RxStompService } from '@stomp/ng2-stompjs';
import { TranslatePipeMock } from '../../../_mocks/TranslatePipeMock';
......@@ -30,11 +32,10 @@ describe('LoginComponent', () => {
useFactory: jwtOptionsFactory,
deps: [PLATFORM_ID, StorageService],
},
}), FormsModule, RouterTestingModule, HttpClientTestingModule,
}), FormsModule, RouterTestingModule, HttpClientTestingModule, FontAwesomeModule,
],
providers: [
RxStompService,
{
RxStompService, {
provide: StorageService,
useClass: StorageServiceMock,
}, HeaderLabelService, FooterBarService, {
......@@ -55,6 +56,8 @@ describe('LoginComponent', () => {
}));
beforeEach(() => {
const library: FaIconLibrary = TestBed.get(FaIconLibrary);
library.addIcons(faSpinner);
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
......@@ -80,7 +83,7 @@ describe('LoginComponent', () => {
spyOn(userService, 'authenticateThroughLogin').and.returnValue(new Promise(resolve => resolve(true)));
spyOn(router, 'navigateByUrl').and.callFake(() => new Promise<boolean>(resolve => {resolve(); }));
await component.login();
await component.login('password');
expect(component['_authorizationFailed']).toBeFalsy();
}));
......@@ -96,7 +99,7 @@ describe('LoginComponent', () => {
spyOn(userService, 'authenticateThroughLogin').and.returnValue(new Promise(resolve => resolve(false)));
spyOn(router, 'navigateByUrl').and.callFake(() => new Promise<boolean>(resolve => {resolve(); }));
await component.login();
await component.login('token');
expect(component['_authorizationFailed']).toBeTruthy();
}));
});
......
......@@ -22,6 +22,7 @@ export class LoginComponent implements OnInit, OnDestroy {
public hasUsernamePasswordLogin: boolean = environment.loginMechanism.includes(LoginMechanism.UsernamePassword);
public hasTokenLogin: boolean = environment.loginMechanism.includes(LoginMechanism.Token);
public hasMultipleLoginMethods: boolean = environment.loginMechanism.length > 1;
public isLoggingIn: string;
private _authorizationFailed = false;
......@@ -66,25 +67,28 @@ export class LoginComponent implements OnInit, OnDestroy {
this._destroy.complete();
}
public async login(): Promise<void> {
public async login(method: string): Promise<void> {
this._authorizationFailed = false;
let isLoggedIn = false;
let authenticated = false;
this.isLoggingIn = method;
if (this.hasTokenLogin && this.token) {
const tokenHash = this.userService.hashToken(this.token);
isLoggedIn = await this.userService.authenticateThroughLoginToken(tokenHash);
authenticated = await this.userService.authenticateThroughLoginToken(tokenHash);
} else if (this.hasUsernamePasswordLogin && this.username && this.password) {
const passwordHash = this.userService.hashPassword(this.username, this.password);
isLoggedIn = await this.userService.authenticateThroughLogin(this.username.toLowerCase(), passwordHash);
authenticated = await this.userService.authenticateThroughLogin(this.username.toLowerCase(), passwordHash);
}
if (isLoggedIn) {
if (authenticated) {
this.storageServie.db.initialized.pipe(takeUntil(this._destroy)).subscribe(value => {
this.isLoggingIn = null;
this.router.navigateByUrl(this.return);
});
} else {
this._authorizationFailed = true;
this.isLoggingIn = null;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment