From 437e737e5bbec3b9b409388de8cb4598ea112f6c Mon Sep 17 00:00:00 2001 From: Pim Merks Date: Tue, 2 Jun 2020 12:10:08 +0200 Subject: [PATCH 1/6] Removed header component and put it back in app component --- src/app/app.component.html | 22 ++++++++++++-- src/app/app.component.ts | 6 ++++ .../components/header/header.component.html | 29 ------------------- .../header/header.component.spec.ts | 29 ------------------- .../components/header/header.component.ts | 16 ---------- src/app/shared/shared.module.ts | 6 ++-- 6 files changed, 29 insertions(+), 79 deletions(-) delete mode 100644 src/app/shared/components/header/header.component.html delete mode 100644 src/app/shared/components/header/header.component.spec.ts delete mode 100644 src/app/shared/components/header/header.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index bcf3f73..a9b69bd 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,13 +1,31 @@ - +
+ + + clarity-bootstrap + +
+
+ Home +
+ +
+ + Login + + + Register + +
+
-
\ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ead0de4..f89c0f7 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,8 +1,14 @@ import { Component } from '@angular/core'; +import { AuthenticationService } from '@services/authentication/authentication.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { + constructor( + public readonly authService: AuthenticationService + ) { } + + public isAuthenticated$ = this.authService.isAuthenticated$; } diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html deleted file mode 100644 index bbcdbf0..0000000 --- a/src/app/shared/components/header/header.component.html +++ /dev/null @@ -1,29 +0,0 @@ -
- - - clarity-bootstrap - -
-
- Home -
- -
- - Login - - - Register - -
- - -
- - Login - - - Register - -
- \ No newline at end of file diff --git a/src/app/shared/components/header/header.component.spec.ts b/src/app/shared/components/header/header.component.spec.ts deleted file mode 100644 index 71f983d..0000000 --- a/src/app/shared/components/header/header.component.spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HeaderComponent } from './header.component'; -import { HttpClientModule } from '@angular/common/http'; - -describe('HeaderComponent', () => { - let component: HeaderComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ HeaderComponent ], - imports: [ - HttpClientModule - ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(HeaderComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts deleted file mode 100644 index e31c974..0000000 --- a/src/app/shared/components/header/header.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { AuthenticationService } from '@services/authentication/authentication.service'; - -@Component({ - selector: 'app-header', - templateUrl: './header.component.html', -}) -export class HeaderComponent { - - constructor( - public readonly authService: AuthenticationService - ) { } - - public isAuthenticated$ = this.authService.isAuthenticated$; - -} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 7a3ef93..2775577 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -1,16 +1,16 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { HeaderComponent } from './components/header/header.component'; import { ClarityModule } from '@clr/angular'; import { RouterModule } from '@angular/router'; import { WithLoadingPipe } from './pipes/with-loading.pipe'; import { ErrorAlertComponent } from './components/error-alert/error-alert.component'; +import { CenterCardComponent } from './components/center-card/center-card.component'; @NgModule({ declarations: [ - HeaderComponent, WithLoadingPipe, ErrorAlertComponent, + CenterCardComponent, ], imports: [ CommonModule, @@ -18,9 +18,9 @@ import { ErrorAlertComponent } from './components/error-alert/error-alert.compon RouterModule, ], exports: [ - HeaderComponent, WithLoadingPipe, ErrorAlertComponent, + CenterCardComponent, ] }) export class SharedModule { } From a142651f77853f9ecb40e9b5756d00ce5453f3cf Mon Sep 17 00:00:00 2001 From: Pim Merks Date: Tue, 2 Jun 2020 12:11:22 +0200 Subject: [PATCH 2/6] Implemented auth guard --- src/app/app-routing.module.ts | 5 +++- src/app/helpers/guards/auth/auth.guard.ts | 29 ++++++++++++++++--- .../auth/components/login/login.component.ts | 13 ++++----- .../components/register/register.component.ts | 15 +++++----- .../authentication/authentication.service.ts | 6 +++- 5 files changed, 47 insertions(+), 21 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index c055bbc..69097d3 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,9 +1,12 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; +import { AuthGuard } from '@helpers/guards/auth/auth.guard'; const routes: Routes = [ - { path: 'home', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) }, + { path: 'home', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule), + canActivate: [AuthGuard], canActivateChild: [AuthGuard] }, + { path: 'auth', loadChildren: () => import('./pages/auth/auth.module').then(m => m.AuthModule) }, ]; diff --git a/src/app/helpers/guards/auth/auth.guard.ts b/src/app/helpers/guards/auth/auth.guard.ts index acf637d..9a0e008 100644 --- a/src/app/helpers/guards/auth/auth.guard.ts +++ b/src/app/helpers/guards/auth/auth.guard.ts @@ -1,24 +1,45 @@ import { Injectable } from '@angular/core'; -import { CanActivate, CanActivateChild, CanLoad, Route, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router'; +import { CanActivate, CanActivateChild, CanLoad, Route, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router'; import { Observable } from 'rxjs'; +import { AuthenticationService } from '@services/authentication/authentication.service'; @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate, CanActivateChild, CanLoad { + constructor( + private readonly authService: AuthenticationService, + private readonly router: Router + ) { } + public canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree { - return true; + if (!this.authService.isAuthenticated) { + const redirect = this.router.parseUrl('/auth/login'); + redirect.queryParams = { returnUrl: state.url }; + return redirect; + } + + return true; } + public canActivateChild( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree { - return true; + if (!this.authService.isAuthenticated) { + const redirect = this.router.parseUrl('/auth/login'); + redirect.queryParams = { returnUrl: state.url }; + return redirect; + } + + return true; } + public canLoad( route: Route, segments: UrlSegment[]): Observable | Promise | boolean { - return true; + return this.authService.isAuthenticated; } + } diff --git a/src/app/pages/auth/components/login/login.component.ts b/src/app/pages/auth/components/login/login.component.ts index bb0be73..0138cab 100644 --- a/src/app/pages/auth/components/login/login.component.ts +++ b/src/app/pages/auth/components/login/login.component.ts @@ -40,13 +40,12 @@ export class LoginComponent { flatMap(_ => this.returnUrl$), flatMap(returnUrl => from(this.router.navigateByUrl(returnUrl)))) .subscribe(token => { - this.loginBtnState = ClrLoadingState.SUCCESS; - }, - (error: IError) => { - console.warn('error:', error); - this.error = error; - this.loginBtnState = ClrLoadingState.ERROR; - }); + this.loginBtnState = ClrLoadingState.SUCCESS; + }, (error: IError) => { + console.warn('error:', error); + this.error = error; + this.loginBtnState = ClrLoadingState.ERROR; + }); } } diff --git a/src/app/pages/auth/components/register/register.component.ts b/src/app/pages/auth/components/register/register.component.ts index 06e5c7f..60d9d5e 100644 --- a/src/app/pages/auth/components/register/register.component.ts +++ b/src/app/pages/auth/components/register/register.component.ts @@ -41,13 +41,12 @@ export class RegisterComponent { flatMap(_ => this.returnUrl$), flatMap(returnUrl => from(this.router.navigateByUrl(returnUrl)))) .subscribe(token => { - this.registerBtnState = ClrLoadingState.SUCCESS; - }, - (error: IError) => { - console.warn('error:', error); - this.error = error; - this.registerBtnState = ClrLoadingState.ERROR; - }); + this.registerBtnState = ClrLoadingState.SUCCESS; + }, + (error: IError) => { + console.warn('error:', error); + this.error = error; + this.registerBtnState = ClrLoadingState.ERROR; + }); } - } diff --git a/src/app/services/authentication/authentication.service.ts b/src/app/services/authentication/authentication.service.ts index 624823e..82485b1 100644 --- a/src/app/services/authentication/authentication.service.ts +++ b/src/app/services/authentication/authentication.service.ts @@ -3,7 +3,7 @@ import { JwtTokenService } from '@services/jwt-token/jwt-token.service'; import { BehaviorSubject, Observable, of } from 'rxjs'; import { BaseClientService } from '@services/base-client/base-client.service'; import { IToken } from '@models/token.model'; -import { map, tap } from 'rxjs/operators'; +import { map, tap, take } from 'rxjs/operators'; @Injectable({ providedIn: 'root' @@ -23,6 +23,10 @@ export class AuthenticationService { return this.authSubject.asObservable(); } + public get isAuthenticated() { + return this.authSubject.value; + } + public login(email: string, password: string): Observable { return this.http.post('auth/login', { email, password }) .pipe( From 1885575ffbdaad70cca4ba60af45e0050c554309 Mon Sep 17 00:00:00 2001 From: Pim Merks Date: Tue, 2 Jun 2020 12:11:51 +0200 Subject: [PATCH 3/6] Implemented center-card component --- .../components/login/login.component.html | 48 ++++++++++-------- .../register/register.component.html | 50 ++++++++++--------- .../center-card/center-card.component.html | 13 +++++ .../center-card/center-card.component.spec.ts | 25 ++++++++++ .../center-card/center-card.component.ts | 12 +++++ 5 files changed, 102 insertions(+), 46 deletions(-) create mode 100644 src/app/shared/components/center-card/center-card.component.html create mode 100644 src/app/shared/components/center-card/center-card.component.spec.ts create mode 100644 src/app/shared/components/center-card/center-card.component.ts diff --git a/src/app/pages/auth/components/login/login.component.html b/src/app/pages/auth/components/login/login.component.html index e64a316..c624853 100644 --- a/src/app/pages/auth/components/login/login.component.html +++ b/src/app/pages/auth/components/login/login.component.html @@ -1,24 +1,28 @@ -
-
- -

Login

- - - -
- - - - Please provide an email address. - - - - - Please provide a password. - -
- -
+ +
+
+ +

Login

+ + + +
+ + + + Please provide an email address. + + + + + Please provide a password. + +
+ +
+ +
-
\ No newline at end of file + + \ No newline at end of file diff --git a/src/app/pages/auth/components/register/register.component.html b/src/app/pages/auth/components/register/register.component.html index aa03d2b..7131ce0 100644 --- a/src/app/pages/auth/components/register/register.component.html +++ b/src/app/pages/auth/components/register/register.component.html @@ -1,31 +1,33 @@ -
-
+ +
+
-

Register

+

Register

- + -
- - - - Please provide an email address. - + + + + + Please provide an email address. + - - - - Please provide a name. - + + + + Please provide a name. + - - - - Please provide a password. - -
- -
+ + + + Please provide a password. + +
+ + +
-
\ No newline at end of file + \ No newline at end of file diff --git a/src/app/shared/components/center-card/center-card.component.html b/src/app/shared/components/center-card/center-card.component.html new file mode 100644 index 0000000..0450eb9 --- /dev/null +++ b/src/app/shared/components/center-card/center-card.component.html @@ -0,0 +1,13 @@ +
+ +
+ + +
+ +
+ + + diff --git a/src/app/shared/components/center-card/center-card.component.spec.ts b/src/app/shared/components/center-card/center-card.component.spec.ts new file mode 100644 index 0000000..59a6dd7 --- /dev/null +++ b/src/app/shared/components/center-card/center-card.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CenterCardComponent } from './center-card.component'; + +describe('CenterCardComponent', () => { + let component: CenterCardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CenterCardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CenterCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/center-card/center-card.component.ts b/src/app/shared/components/center-card/center-card.component.ts new file mode 100644 index 0000000..552d189 --- /dev/null +++ b/src/app/shared/components/center-card/center-card.component.ts @@ -0,0 +1,12 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; + +@Component({ + selector: 'app-center-card', + templateUrl: './center-card.component.html', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class CenterCardComponent { + + constructor() { } + +} From b9a263970b92fb4682887cfd06206808e9da49e0 Mon Sep 17 00:00:00 2001 From: Pim Merks Date: Tue, 2 Jun 2020 12:14:56 +0200 Subject: [PATCH 4/6] Fixed linting error --- src/app/app.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index a9b69bd..6b68f5c 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -10,7 +10,7 @@ Home
-
+
Login @@ -28,4 +28,4 @@
- \ No newline at end of file + From 0b244c875c997733be84b4ae3af5395a414ab98f Mon Sep 17 00:00:00 2001 From: Pim Merks Date: Tue, 2 Jun 2020 12:35:42 +0200 Subject: [PATCH 5/6] Fixed testing --- src/app/helpers/guards/auth/auth.guard.spec.ts | 10 +++++++++- .../auth/components/login/login.component.spec.ts | 2 ++ .../components/register/register.component.spec.ts | 2 ++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/app/helpers/guards/auth/auth.guard.spec.ts b/src/app/helpers/guards/auth/auth.guard.spec.ts index 68889d2..bc999b1 100644 --- a/src/app/helpers/guards/auth/auth.guard.spec.ts +++ b/src/app/helpers/guards/auth/auth.guard.spec.ts @@ -1,12 +1,20 @@ import { TestBed } from '@angular/core/testing'; import { AuthGuard } from './auth.guard'; +import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; +import { RouterTestingModule } from '@angular/router/testing'; describe('AuthGuard', () => { let guard: AuthGuard; beforeEach(() => { - TestBed.configureTestingModule({}); + TestBed.configureTestingModule({ + imports: [ + HttpClientModule, + RouterTestingModule, + ] + }); guard = TestBed.inject(AuthGuard); }); diff --git a/src/app/pages/auth/components/login/login.component.spec.ts b/src/app/pages/auth/components/login/login.component.spec.ts index 62ebcaa..d29e769 100644 --- a/src/app/pages/auth/components/login/login.component.spec.ts +++ b/src/app/pages/auth/components/login/login.component.spec.ts @@ -5,6 +5,7 @@ import { RouterTestingModule } from '@angular/router/testing'; import { HttpClientModule } from '@angular/common/http'; import { ClarityModule } from '@clr/angular'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { SharedModule } from '@shared/shared.module'; describe('LoginComponent', () => { let component: LoginComponent; @@ -17,6 +18,7 @@ describe('LoginComponent', () => { RouterTestingModule, HttpClientModule, ClarityModule, + SharedModule, ], declarations: [ LoginComponent, diff --git a/src/app/pages/auth/components/register/register.component.spec.ts b/src/app/pages/auth/components/register/register.component.spec.ts index a23e135..5dfc701 100644 --- a/src/app/pages/auth/components/register/register.component.spec.ts +++ b/src/app/pages/auth/components/register/register.component.spec.ts @@ -5,6 +5,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { RouterTestingModule } from '@angular/router/testing'; import { HttpClientModule } from '@angular/common/http'; import { ClarityModule } from '@clr/angular'; +import { SharedModule } from '@shared/shared.module'; describe('RegisterComponent', () => { let component: RegisterComponent; @@ -17,6 +18,7 @@ describe('RegisterComponent', () => { RouterTestingModule, HttpClientModule, ClarityModule, + SharedModule, ], declarations: [ RegisterComponent ] }) From 3a0663d30383f951d91e90bd27a49894931a9919 Mon Sep 17 00:00:00 2001 From: Pim Merks Date: Tue, 2 Jun 2020 12:40:40 +0200 Subject: [PATCH 6/6] Updated cache workflow to v2 --- .github/workflows/main.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 064a14f..84c4bcf 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -21,7 +21,7 @@ jobs: - uses: actions/setup-node@v1.1.0 # Caches npm packages - - uses: actions/cache@v1 + - uses: actions/cache@v2 with: path: ~/.npm key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}