SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts

@@ -1,5 +1,6 @@
 import { RouterModule, Routes } from '@angular/router';
 import { SelectRoleComponent } from './app/components/select-role/select-role.component';
+import { SignInComponent } from './app/components/sign-in/sign-in.component';
 
 const routes: Routes = [
   {
@@ -7,6 +8,11 @@ const routes: Routes = [
     component: SelectRoleComponent,
     pathMatch: 'full'
   },
+  {
+    path: 'login',
+    component: SignInComponent,
+    pathMatch: 'full'
+  },
 ];
 
 export  const appRoutingModule = RouterModule.forRoot(routes);

SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts

@@ -8,14 +8,16 @@ import { appRoutingModule } from '../app.routing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { SignInComponent } from './components/sign-in/sign-in.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     SelectRoleComponent,
+    SignInComponent
   ],
   imports: [
-  BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
+BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
     HttpClientModule,
     FormsModule,
     appRoutingModule,

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.html

@@ -1,4 +1,4 @@
 <div class="container font">
-  <button id="player-button" class="button font">Player</button>
+  <button (click)="SignInWithRole()" id="player-button" class="button font">Player</button>
-  <button id="game-master-button" class="button font">Game Master</button>
+  <button (click)="SignInWithRole()" id="game-master-button" class="button font">Game Master</button>
 </div>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { SignInComponent } from './../sign-in/sign-in.component';
 
 @Component({
   selector: 'app-select-role',
@@ -8,10 +10,16 @@ import { Component } from '@angular/core';
 export class SelectRoleComponent {
   isExpanded = false;
 
+  constructor(private router: Router) {}
+  
   collapse() {
     this.isExpanded = false;
   }
 
+  SignInWithRole() {
+    this.router.navigate(['login'])
+  }
+
   toggle() {
     this.isExpanded = !this.isExpanded;
   }

SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html

@@ -0,0 +1 @@
+<p>Sign in</p>

SessionCompanion/SessionCompanion/package-lock.json

@@ -0,0 +1,19 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "@ngrx/store": {
+      "version": "10.1.0",
+      "resolved": "https://artifactory.platform.vwfs.io/artifactory/api/npm/vwfs-du-cp-npm-virtual/@ngrx/store/-/store-10.1.0.tgz",
+      "integrity": "sha1-N5qjhUP//T5ByoYiQ0oXH+cO1vg=",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "tslib": {
+      "version": "2.0.3",
+      "resolved": "https://artifactory.platform.vwfs.io/artifactory/api/npm/vwfs-du-cp-npm-virtual/tslib/-/tslib-2.0.3.tgz",
+      "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
+    }
+  }
+}