Moved login to new home page component

src/RunnersMeet.Client/src/app/app-routing.module.ts

@@ -1,7 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { HomePageComponent } from './pages/home-page/home-page.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+	{
+		path: '',
+		component: HomePageComponent
+	}
+];
 
 @NgModule({
 	imports: [RouterModule.forRoot(routes)],

src/RunnersMeet.Client/src/app/app.component.html

@@ -1,23 +1,2 @@
 <h1>{{title}}</h1>
 <router-outlet></router-outlet>
-<ng-container *ngIf="!(authService.isLoading$ | async)">
-	<div *ngIf="authService.isAuthenticated$ | async">
-		<dl>
-			<dt>isLoading</dt>
-			<dd>{{ authService.isLoading$ | async | json }}</dd>
-			<dt>isAuthenticated</dt>
-			<dd>{{ authService.isAuthenticated$ | async | json }}</dd>
-			<dt>user</dt>
-			<dd><pre><code>{{ authService.user$ | async | json }}</code></pre></dd>
-			<dt>User Display Name</dt>
-			<dd>{{ (authService.user$ | async)?.nickname }}</dd>
-			<dt>User ID</dt>
-			<dd>{{ (authService.user$ | async)?.sub }}</dd>
-		</dl>
-		<button type="button" (click)="logout()">Logout</button>
-	</div>
-	<div *ngIf="!(authService.isAuthenticated$ | async)">
-		Not authenticated
-		<button type="button" (click)="login()">Login</button>
-	</div>
-</ng-container>

src/RunnersMeet.Client/src/app/app.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { AuthService } from '@auth0/auth0-angular';
 
 @Component({
 	selector: 'app-root',
@@ -9,16 +8,6 @@ import { AuthService } from '@auth0/auth0-angular';
 export class AppComponent {
 	public title = 'RunnersMeet';
 
-	public constructor(
-		public readonly authService: AuthService
-	) {
-	}
-
-	public login(): void {
-		this.authService.loginWithRedirect();
-	}
-
-	public logout(): void {
-		this.authService.logout();
+	public constructor() {
 	}
 }

src/RunnersMeet.Client/src/app/app.module.ts

@@ -5,10 +5,12 @@ import { AuthModule } from '@auth0/auth0-angular';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { environment } from '../env/environment';
+import { HomePageComponent } from './pages/home-page/home-page.component';
 
 @NgModule({
 	declarations: [
-		AppComponent
+		AppComponent,
+		HomePageComponent,
 	],
 	imports: [
 		BrowserModule,

src/RunnersMeet.Client/src/app/pages/home-page/home-page.component.html

@@ -0,0 +1,19 @@
+<div *ngIf="authService.isAuthenticated$ | async">
+	<dl>
+		<dt>isLoading</dt>
+		<dd>{{ authService.isLoading$ | async | json }}</dd>
+		<dt>isAuthenticated</dt>
+		<dd>{{ authService.isAuthenticated$ | async | json }}</dd>
+		<dt>user</dt>
+		<dd><pre><code>{{ authService.user$ | async | json }}</code></pre></dd>
+		<dt>User Display Name</dt>
+		<dd>{{ (authService.user$ | async)?.nickname }}</dd>
+		<dt>User ID</dt>
+		<dd>{{ (authService.user$ | async)?.sub }}</dd>
+	</dl>
+	<button type="button" (click)="logout()">Logout</button>
+</div>
+<div *ngIf="!(authService.isAuthenticated$ | async)">
+	Not authenticated
+	<button type="button" (click)="login()">Login</button>
+</div>

src/RunnersMeet.Client/src/app/pages/home-page/home-page.component.spec.ts

@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Auth0ClientService } from '@auth0/auth0-angular';
+import { AppRoutingModule } from 'src/app/app-routing.module';
+
+import { HomePageComponent } from './home-page.component';
+
+describe('HomePageComponent', () => {
+	let component: HomePageComponent;
+	let fixture: ComponentFixture<HomePageComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			declarations: [HomePageComponent],
+			imports: [AppRoutingModule],
+			providers: [
+				{
+					provide: Auth0ClientService,
+					useValue: {}
+				}
+			]
+		})
+			.compileComponents();
+
+		fixture = TestBed.createComponent(HomePageComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/RunnersMeet.Client/src/app/pages/home-page/home-page.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { AuthService } from '@auth0/auth0-angular';
+
+@Component({
+	selector: 'app-home-page',
+	templateUrl: './home-page.component.html',
+	styleUrls: ['./home-page.component.scss']
+})
+export class HomePageComponent {
+	public constructor(
+		public readonly authService: AuthService
+	) {
+	}
+
+	public login(): void {
+		this.authService.loginWithRedirect();
+	}
+
+	public logout(): void {
+		this.authService.logout();
+	}
+}