Proper home page with customizable message

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

@@ -9,8 +9,13 @@
 	</div>
 	<router-outlet *ngIf="showRouterOutlet()"></router-outlet>
 	<div *ngIf="showLoginBlock()">
-		Not authenticated
-		<button type="button" (click)="login()">Login</button>
+		<p-messages severity="warn">
+			<ng-template pTemplate>
+				Not authenticated &nbsp; <button type="button" (click)="login()">Login</button>
+			</ng-template>
+		</p-messages>
+
+		<app-home-page></app-home-page>
 	</div>
 	<div *ngIf="showPermissionBlock()">
 		Your account has not yet been granted the necessary permissions to use this application, please contact your administrator.

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

@@ -1,14 +1,25 @@
-<div>
-	<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>
-</div>
+<h1>Welcome to RunnersMeet</h1>
+<p-messages severity="info">
+    <ng-template pTemplate>
+        <div class="description-text">{{ message }}</div>
+    </ng-template>
+</p-messages>
+<p>
+	RunnersMeet is an open and self-hostable platform for planning and coordinating running (and similar) events.
+</p>
+<h2>Q & A</h2>
+<p>
+	<strong>Why do I need an account?</strong><br>
+	So that we can keep out the spammers and trolls. Additionally, all the tracks, events and registrations are linked to a specific account.
+</p>
+<p>
+	<strong>Do I need to provide a proper email?</strong><br>
+	No, you don't. The email is only needed because that is the primary key for Auth0 accounts. It is not verified and not used in any way by this application.
+</p>
+<p>
+	<strong>What is Auth0 and dev-2ls6voifhbt37usw.eu.auth0.com?</strong><br>
+	<a href="https://auth0.com/">Auth0</a> is an authentication and authorization platform that provides authentication as a service. It is only used to
+	authenticate users in the loosest way possible. No personal information is required or stored with Auth0 and its only job is to check your login. It also
+	provides the added benefit of supporting social logins like Google OAuth and Github. dev-2ls6voifhbt37usw.eu.auth0.com is the specific Auth0 subdomain
+	associated with <strong>this</strong> application.
+</p>

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

@@ -7,8 +7,15 @@ import { AuthService } from '@auth0/auth0-angular';
 	styleUrls: ['./home-page.component.scss']
 })
 export class HomePageComponent {
+	public message: string = '';
+
 	public constructor(
 		public readonly authService: AuthService
 	) {
+		fetch('./assets/message.txt')
+			.then(response => response.text())
+			.then(msg => {
+				this.message = msg;
+			});
 	}
 }

src/RunnersMeet.Client/src/app/shell/main-menu/main-menu.component.ts

@@ -51,19 +51,21 @@ export class MainMenuComponent {
 		];
 
 		this.permissionService.userProfile.then(profile => {
-			this.menuItems = this.menuItems.concat([{
-				label: 'My Profile',
-				items: [
-					{
-						label: 'Details',
-						routerLink: ['/profile']
-					},
-					{
-						label: 'Logout',
-						command: () => this.logout()
-					}
-				]
-			}]);
+			if (profile) {
+				this.menuItems = this.menuItems.concat([{
+					label: 'My Profile',
+					items: [
+						{
+							label: 'Details',
+							routerLink: ['/profile']
+						},
+						{
+							label: 'Logout',
+							command: () => this.logout()
+						}
+					]
+				}]);
+			}
 		});
 	}
 

src/RunnersMeet.Client/src/app/ui-library.module.ts

@@ -9,6 +9,7 @@ import { DynamicDialogModule } from 'primeng/dynamicdialog';
 import { TableModule } from 'primeng/table';
 import { PanelModule } from 'primeng/panel';
 import { SelectButtonModule } from 'primeng/selectbutton';
+import { MessagesModule } from 'primeng/messages';
 import { NgModule, Type } from '@angular/core';
 
 const primeNgModules: Array<Type<any>> = [
@@ -23,6 +24,7 @@ const primeNgModules: Array<Type<any>> = [
 	TableModule,
 	PanelModule,
 	SelectButtonModule,
+	MessagesModule,
 ];
 
 @NgModule({

src/RunnersMeet.Client/src/assets/message.txt

@@ -0,0 +1,3 @@
+Welcome to the OPEN BETA for RunnersMeet.
+
+During the OPEN BETA, it is likely that at some points the data stored here will be wiped and of course things are going to change as more features are added. Feel free to share this link with your private running friends but please do not share it publicly yet. At this point, anybody can register and create an account and I would like to keep it small for now.

src/RunnersMeet.Client/src/styles.scss

@@ -106,7 +106,7 @@ dl.pivot-table {
 }
 
 .description-text {
-	white-space: pre;
+	white-space: pre-wrap;
 }
 
 ///////////////////