From 9c41f51820483bb7986ca87c10a53e5325173c63 Mon Sep 17 00:00:00 2001
From: Natalia Gawron <natgaw1@st.amu.edu.pl>
Date: Fri, 22 Jan 2021 19:46:09 +0100
Subject: [PATCH 1/4] SES-156 added routing for creating character

---
 .../ClientApp/src/app.routing.ts              |  6 +++++
 .../ClientApp/src/app/app.module.ts           |  3 +++
 .../create-character.component.css            |  1 +
 .../create-character.component.html           |  8 ++++++
 .../create-character.component.spec.ts        | 25 +++++++++++++++++++
 .../create-character.component.ts             | 19 ++++++++++++++
 .../select-character.component.css            |  5 ++++
 .../select-character.component.html           | 19 +++++++++++---
 .../select-character.component.ts             |  4 +++
 9 files changed, 86 insertions(+), 4 deletions(-)
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.spec.ts
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts
index 934f5a4..947a2cb 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts
@@ -5,6 +5,7 @@ import { RegistrationComponent } from './app/components/registration/registratio
 import {GameMasterDashboardComponent} from './app/components/game-master-dashboard/game-master-dashboard.component';
 import {PlayerDashboardComponent} from './app/components/player-dashboard/player-dashboard.component';
 import { SelectCharacterComponent } from './app/components/select-character/select-character.component';
+import {CreateCharacterComponent} from "./app/components/create-character/create-character.component";
 
 const routes: Routes = [
   {
@@ -37,6 +38,11 @@ const routes: Routes = [
     component: SelectCharacterComponent,
     pathMatch: 'full'
   },
+  {
+    path: 'create-character',
+    component: CreateCharacterComponent,
+    pathMatch: 'full'
+  },
 ];
 
 export  const appRoutingModule = RouterModule.forRoot(routes);
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
index 9324316..1a90e4b 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
@@ -62,6 +62,7 @@ import { MessageDialogComponent } from './shared/message-dialog/message-dialog.c
 import { GameMasterTurntrackerComponent } from './components/game-master-turntracker/game-master-turntracker.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog/choose-monster-dialog.component';
+import { CreateCharacterComponent } from './components/create-character/create-character.component';
 
 @NgModule({
   declarations: [
@@ -90,6 +91,7 @@ import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog
     MessageDialogComponent,
     GameMasterTurntrackerComponent,
     ChooseMonsterDialogComponent,
+    CreateCharacterComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -151,6 +153,7 @@ import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog
     MessageDialogComponent,
     GameMasterTurntrackerComponent,
     ChooseMonsterDialogComponent,
+    CreateCharacterComponent,
   ],
 })
 export class AppModule {}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css
new file mode 100644
index 0000000..46fa919
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css
@@ -0,0 +1 @@
+@import "../../../styles.css";
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html
new file mode 100644
index 0000000..ba6d2cd
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html
@@ -0,0 +1,8 @@
+<p>create-character works!</p>
+<button
+  id="create-character-submit-button"
+  mat-raised-button
+  class="btn-primary form-container"
+  (click)="onCreateCharacterButton()">
+  CONTINUE
+</button>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.spec.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.spec.ts
new file mode 100644
index 0000000..5e30ca7
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateCharacterComponent } from './create-character.component';
+
+describe('CreateCharacterComponent', () => {
+  let component: CreateCharacterComponent;
+  let fixture: ComponentFixture<CreateCharacterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateCharacterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateCharacterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts
new file mode 100644
index 0000000..d4be4ba
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-create-character',
+  templateUrl: './create-character.component.html',
+  styleUrls: ['./create-character.component.css']
+})
+export class CreateCharacterComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+
+  onCreateCharacterButton() {
+    this.router.navigate(['select-character']);
+  }
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.css
index 41aa481..725318b 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.css
@@ -69,3 +69,8 @@ input {
     padding-top: 5%;
   }
 }
+
+.mat-divider--custom-style {
+  background-color: #9e8b6e;
+  box-shadow: 0 1px 0 0 #d8d8d8;
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html
index 5eae2cc..ae3a7f7 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html
@@ -1,15 +1,26 @@
 <div class="container">
   <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
-  <div class="primary-text header">Select character</div>
+  <div *ngFor="let character of charactersList" class="primary-text header">Select character</div>
+  <mat-divider *ngFor="let character of charactersList" class="mat-divider--custom-style"></mat-divider>
   <mat-list>
-    <mat-divider></mat-divider>
     <mat-list-item *ngFor="let character of charactersList">
       <mat-icon mat-list-icon>account_circle</mat-icon>
-      <div mat-line>{{character.name}}</div>
+      <div mat-line (click)="onCharacterClick(character.id)">{{character.name}}</div>
       <mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick(character.id)">arrow_forward</mat-icon>
       <div mat-line> {{character.className}} level: {{character.level}}</div>
-      <mat-divider></mat-divider>
+      <mat-divider class="mat-divider--custom-style"></mat-divider>
     </mat-list-item>
   </mat-list>
+  <div *ngFor="let character of charactersList" class="primary-text header">or</div>
+  <div class="primary-text header">Create character</div>
+  <mat-divider class="mat-divider--custom-style"></mat-divider>
+  <mat-list>
+    <mat-list-item>
+      <mat-icon mat-list-icon>account_circle</mat-icon>
+      <div mat-line>Create character</div>
+      <mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCreateCharacter()">arrow_forward</mat-icon>
+    </mat-list-item>
+  </mat-list>
+  <mat-divider class="mat-divider--custom-style"></mat-divider>
 </div>
 
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts
index bb796df..1c725a1 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts
@@ -46,4 +46,8 @@ export class SelectCharacterComponent implements OnInit {
     this.store.dispatch(new ClearUserId());
     this.router.navigate(['login']);
   }
+
+  onCreateCharacter() {
+    this.router.navigate(['create-character']);
+  }
 }

From 706b2aa0fadfde52459036cc6e1a6ce8922fe798 Mon Sep 17 00:00:00 2001
From: Natalia Gawron <natgaw1@st.amu.edu.pl>
Date: Fri, 22 Jan 2021 21:27:37 +0100
Subject: [PATCH 2/4] SES-156 displaying template list, created basic UI, fixed
 backend service

---
 .../create-character.component.css            | 78 ++++++++++++++++++-
 .../create-character.component.html           | 29 +++++--
 .../create-character.component.ts             | 37 ++++++++-
 .../registration/registration.component.css   | 11 +++
 .../select-role/select-role.component.css     |  8 +-
 .../components/sign-in/sign-in.component.css  | 11 +++
 .../src/app/store/actions/player.action.ts    | 13 +++-
 .../src/app/store/reducers/player.reducer.ts  |  2 +
 .../src/services/character.service.ts         | 14 +++-
 .../SessionCompanion/ClientApp/src/styles.css |  4 +
 .../CharacterFromTemplatesViewModel.ts        |  6 ++
 .../Controllers/CharacterController.cs        |  4 +-
 12 files changed, 201 insertions(+), 16 deletions(-)
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel.ts

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css
index 46fa919..6f087b8 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css
@@ -1 +1,77 @@
-@import "../../../styles.css";
+@import '../../../styles.css';
+
+mat-form-field {
+  color: #df7c0f;
+}
+
+:host {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+input {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.container {
+  margin: 5%;
+  display: flex;
+  flex-direction: column;
+}
+.container h1 {
+  margin-bottom: 1rem;
+}
+
+.form-container {
+  padding: 10px;
+  margin: 5px;
+}
+
+.primary-text {
+  height: 100px;
+  color: #df7c0f;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1%;
+  margin: 1%;
+}
+
+.header {
+  font-size: 20px;
+}
+
+.mat-divider--custom-style {
+  background-color: #9e8b6e;
+  box-shadow: 0 1px 0 0 #d8d8d8;
+}
+
+@media (max-width: 400px) {
+  .container {
+    margin-left: 0%;
+    width: 300px;
+    padding-top: 5%;
+  }
+}
+
+@media (min-width: 401px) {
+  .container {
+    margin-left: 1%;
+    width: 450px;
+    padding-top: 10%;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    width: 550px;
+    padding-top: 5%;
+  }
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html
index ba6d2cd..3320806 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html
@@ -1,8 +1,21 @@
-<p>create-character works!</p>
-<button
-  id="create-character-submit-button"
-  mat-raised-button
-  class="btn-primary form-container"
-  (click)="onCreateCharacterButton()">
-  CONTINUE
-</button>
+<div class="container">
+  <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
+  <div class="primary-text header">Create character from Template</div>
+  <mat-divider class="mat-divider--custom-style"></mat-divider>
+  <mat-list>
+    <mat-list-item *ngFor="let character of charactersTemplateList">
+      <mat-icon mat-list-icon>account_circle</mat-icon>
+      <div mat-line (click)="onCharacterClick()">{{character.name}}</div>
+      <mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick()">arrow_forward</mat-icon>
+      <div mat-line> {{character.class}}, {{character.race}}</div>
+      <mat-divider class="mat-divider--custom-style"></mat-divider>
+    </mat-list-item>
+  </mat-list>
+  <!--<button
+    id="create-character-submit-button"
+    mat-raised-button
+    class="btn-primary form-container"
+    (click)="onCreateCharacterButton()">
+    CONTINUE
+  </button>-->
+</div>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts
index d4be4ba..f32890a 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts
@@ -1,5 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '../../store/models/app-state.model';
+import { first } from 'rxjs/operators';
+import { ErrorResponse } from '../../../types/ErrorResponse';
+import { HttpErrorResponse } from '@angular/common/http';
+import { CharacterFromTemplatesViewModel } from '../../../types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel';
+import {CharacterService } from '../../../services/character.service';
+import {AddCharacterId, CreateCharacterFromTemplate} from "../../store/actions/player.action";
 
 @Component({
   selector: 'app-create-character',
@@ -7,13 +15,40 @@ import { Router } from '@angular/router';
   styleUrls: ['./create-character.component.css']
 })
 export class CreateCharacterComponent implements OnInit {
+  charactersTemplateList: CharacterFromTemplatesViewModel[];
 
-  constructor(private router: Router) { }
+  constructor(private router: Router, private store: Store<AppState>, private characterService: CharacterService) { }
 
   ngOnInit() {
+    this.getTemplateCharacters();
   }
 
   onCreateCharacterButton() {
     this.router.navigate(['select-character']);
   }
+
+  onArrowBackClick() {
+    this.router.navigate(['select-character']);
+  }
+
+  onCharacterClick() {
+    this.store.dispatch(new CreateCharacterFromTemplate);
+  }
+
+  getTemplateCharacters() {
+    this.characterService
+      .getTemplateCharacters()
+      .pipe(first())
+      .subscribe(
+        (charactersTemplateList) => {
+          this.charactersTemplateList = charactersTemplateList;
+        },
+        (error: ErrorResponse | HttpErrorResponse) => {
+          if (error instanceof HttpErrorResponse) {
+            error = error.error as ErrorResponse;
+          }
+          console.error(error.message);
+        }
+      );
+  }
 }
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css
index 41aa481..1db5afb 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css
@@ -64,6 +64,17 @@ input {
 }
 
 @media (min-width: 768px) {
+  .container {
+    width: 550px;
+    padding-top: 0;
+  }
+  .form-container {
+    padding: 10px;
+    margin: 0px;
+  }
+}
+
+@media (min-width: 1800px) {
   .container {
     width: 550px;
     padding-top: 5%;
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css
index 9eaea08..e8be538 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css
@@ -47,7 +47,7 @@
 
 @media (min-width: 768px) {
   .container {
-    padding-top: 10%;
+    padding-top: 6%;
   }
   .button {
     margin: 20px;
@@ -59,3 +59,9 @@
     font-size: 40px;
   }
 }
+
+@media (min-width: 1800px) {
+  .container {
+    padding-top: 10%;
+  }
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css
index 41aa481..1db5afb 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css
@@ -64,6 +64,17 @@ input {
 }
 
 @media (min-width: 768px) {
+  .container {
+    width: 550px;
+    padding-top: 0;
+  }
+  .form-container {
+    padding: 10px;
+    margin: 0px;
+  }
+}
+
+@media (min-width: 1800px) {
   .container {
     width: 550px;
     padding-top: 5%;
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/player.action.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/player.action.ts
index 690c305..7626a13 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/player.action.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/player.action.ts
@@ -2,7 +2,8 @@ import {Action} from '@ngrx/store';
 
 export enum PlayerActionTypes {
   ADD_CHARACTER_ID= '[PLAYER] Add character id',
-  CLEAR_CHARACTER_ID = '[PLAYER] Clear character id'
+  CLEAR_CHARACTER_ID = '[PLAYER] Clear character id',
+  CREATED_CHARACTER_FROM_TEMPLATE = '[PLAYER] Created character from template'
 }
 
 export class AddCharacterId implements Action {
@@ -21,4 +22,12 @@ export class ClearCharacterId implements Action {
   }
 }
 
-export type PlayerAction = AddCharacterId | ClearCharacterId;
+export class CreateCharacterFromTemplate implements Action {
+  readonly type = PlayerActionTypes.CREATED_CHARACTER_FROM_TEMPLATE;
+
+  constructor() {
+
+  }
+}
+
+export type PlayerAction = AddCharacterId | ClearCharacterId | CreateCharacterFromTemplate;
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/player.reducer.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/player.reducer.ts
index 9a12b52..634ea87 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/player.reducer.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/player.reducer.ts
@@ -9,6 +9,8 @@ export function PlayerReducer(state: PlayerStoreModel = initialState, action: Pl
   switch (action.type) {
     case PlayerActionTypes.ADD_CHARACTER_ID:
       return {...state, characterId: action.payload.characterId};
+    case PlayerActionTypes.CREATED_CHARACTER_FROM_TEMPLATE:
+      return {...state};
     case PlayerActionTypes.CLEAR_CHARACTER_ID:
       return { characterId: null};
     default:
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts b/SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts
index db70675..123c10e 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts
@@ -6,7 +6,8 @@ import {Either} from '../types/Either';
 import {CharacterForLoginViewModel} from '../types/viewmodels/character-viewmodels/CharacterForLoginViewModel';
 import {switchMap, retry} from 'rxjs/operators';
 import {LoggedCharactersViewModel} from '../types/viewmodels/character-viewmodels/LoggedCharactersViewModel';
-import {CharacterStatsViewModel} from "../types/viewmodels/character-viewmodels/CharacterStatsViewModel";
+import {CharacterStatsViewModel} from '../types/viewmodels/character-viewmodels/CharacterStatsViewModel';
+import {CharacterFromTemplatesViewModel} from '../types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel';
 
 Injectable({
   providedIn: 'root'
@@ -56,4 +57,15 @@ export class CharacterService {
     );
   }
 
+  getTemplateCharacters(): Observable<CharacterFromTemplatesViewModel[]> {
+    return this.http.get<Either<CharacterFromTemplatesViewModel[], ErrorResponse>>(this.baseUrl + 'getTemplateCharacters').pipe(
+      switchMap(response => {
+        if (response.isLeft) {
+          return of(response.left);
+        } else {
+          return throwError(response.right);
+        }
+      }));
+  }
+
 }
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/styles.css b/SessionCompanion/SessionCompanion/ClientApp/src/styles.css
index cbfb6da..32aa9dc 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/styles.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/styles.css
@@ -41,6 +41,10 @@
   opacity: 0.5;
 }
 
+.arrow-forward:hover {
+  opacity: 0.5;
+}
+
 /* icon in mat-form-field*/
 ::ng-deep mat-form-field {
   color: #df7c0f !important;
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel.ts b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel.ts
new file mode 100644
index 0000000..cbc7927
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel.ts
@@ -0,0 +1,6 @@
+export interface CharacterFromTemplatesViewModel {
+  id: number;
+  name: string;
+  race: string;
+  class: number;
+}
diff --git a/SessionCompanion/SessionCompanion/Controllers/CharacterController.cs b/SessionCompanion/SessionCompanion/Controllers/CharacterController.cs
index 1b03b8b..23def0e 100644
--- a/SessionCompanion/SessionCompanion/Controllers/CharacterController.cs
+++ b/SessionCompanion/SessionCompanion/Controllers/CharacterController.cs
@@ -116,7 +116,7 @@ namespace SessionCompanion.Controllers
         /// </summary>
         /// <returns>liste podstawowych informacji o postaciach z templatki</returns>
         [HttpGet("getTemplateCharacters")]
-        public async Task<Either<ErrorResponse, List<CharacterFromTemplatesSimpleViewModel>>> GetTemplateCharacters()
+        public async Task<Either<List<CharacterFromTemplatesSimpleViewModel>, ErrorResponse>> GetTemplateCharacters()
         {
             var races = _raceService.Get().ToList();
             var classes = _classService.Get().ToList();
@@ -159,4 +159,4 @@ namespace SessionCompanion.Controllers
             }
         }
     }
-}
\ No newline at end of file
+}

From 4ede197d83d62794ef863baf0bfc7c609165fa7c Mon Sep 17 00:00:00 2001
From: Natalia Gawron <natgaw1@st.amu.edu.pl>
Date: Fri, 22 Jan 2021 22:09:41 +0100
Subject: [PATCH 3/4] SES-156 WIP - step 2 - creating character

---
 .../ClientApp/src/app.routing.ts              |  8 +-
 .../ClientApp/src/app/app.module.ts           |  3 +
 .../create-character.component.html           | 10 +--
 .../create-character.component.ts             |  9 +--
 .../personalize-template.component.css        | 77 +++++++++++++++++++
 .../personalize-template.component.html       | 12 +++
 .../personalize-template.component.spec.ts    | 25 ++++++
 .../personalize-template.component.ts         | 24 ++++++
 .../select-character.component.ts             |  2 +-
 9 files changed, 154 insertions(+), 16 deletions(-)
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.css
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.html
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.spec.ts
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.ts

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts
index 947a2cb..b202ed5 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts
@@ -6,6 +6,7 @@ import {GameMasterDashboardComponent} from './app/components/game-master-dashboa
 import {PlayerDashboardComponent} from './app/components/player-dashboard/player-dashboard.component';
 import { SelectCharacterComponent } from './app/components/select-character/select-character.component';
 import {CreateCharacterComponent} from "./app/components/create-character/create-character.component";
+import {PersonalizeTemplateComponent} from "./app/components/personalize-template/personalize-template.component";
 
 const routes: Routes = [
   {
@@ -39,10 +40,15 @@ const routes: Routes = [
     pathMatch: 'full'
   },
   {
-    path: 'create-character',
+    path: 'create-character-step-1',
     component: CreateCharacterComponent,
     pathMatch: 'full'
   },
+  {
+    path: 'create-character-step-2',
+    component: PersonalizeTemplateComponent,
+    pathMatch: 'full'
+  }
 ];
 
 export  const appRoutingModule = RouterModule.forRoot(routes);
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
index 1a90e4b..bd0048f 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
@@ -63,6 +63,7 @@ import { GameMasterTurntrackerComponent } from './components/game-master-turntra
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog/choose-monster-dialog.component';
 import { CreateCharacterComponent } from './components/create-character/create-character.component';
+import { PersonalizeTemplateComponent } from './components/personalize-template/personalize-template.component';
 
 @NgModule({
   declarations: [
@@ -92,6 +93,7 @@ import { CreateCharacterComponent } from './components/create-character/create-c
     GameMasterTurntrackerComponent,
     ChooseMonsterDialogComponent,
     CreateCharacterComponent,
+    PersonalizeTemplateComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -154,6 +156,7 @@ import { CreateCharacterComponent } from './components/create-character/create-c
     GameMasterTurntrackerComponent,
     ChooseMonsterDialogComponent,
     CreateCharacterComponent,
+    PersonalizeTemplateComponent,
   ],
 })
 export class AppModule {}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html
index 3320806..dc1f3d8 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html
@@ -1,6 +1,7 @@
 <div class="container">
   <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
-  <div class="primary-text header">Create character from Template</div>
+  <div class="primary-text header">Create character</div>
+  <div class="primary-text header">Step 1 - Choose one of template</div>
   <mat-divider class="mat-divider--custom-style"></mat-divider>
   <mat-list>
     <mat-list-item *ngFor="let character of charactersTemplateList">
@@ -11,11 +12,4 @@
       <mat-divider class="mat-divider--custom-style"></mat-divider>
     </mat-list-item>
   </mat-list>
-  <!--<button
-    id="create-character-submit-button"
-    mat-raised-button
-    class="btn-primary form-container"
-    (click)="onCreateCharacterButton()">
-    CONTINUE
-  </button>-->
 </div>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts
index f32890a..1c821b2 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts
@@ -6,8 +6,8 @@ import { first } from 'rxjs/operators';
 import { ErrorResponse } from '../../../types/ErrorResponse';
 import { HttpErrorResponse } from '@angular/common/http';
 import { CharacterFromTemplatesViewModel } from '../../../types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel';
-import {CharacterService } from '../../../services/character.service';
-import {AddCharacterId, CreateCharacterFromTemplate} from "../../store/actions/player.action";
+import { CharacterService } from '../../../services/character.service';
+import { CreateCharacterFromTemplate } from '../../store/actions/player.action';
 
 @Component({
   selector: 'app-create-character',
@@ -23,16 +23,13 @@ export class CreateCharacterComponent implements OnInit {
     this.getTemplateCharacters();
   }
 
-  onCreateCharacterButton() {
-    this.router.navigate(['select-character']);
-  }
-
   onArrowBackClick() {
     this.router.navigate(['select-character']);
   }
 
   onCharacterClick() {
     this.store.dispatch(new CreateCharacterFromTemplate);
+    this.router.navigate(['create-character-step-2']);
   }
 
   getTemplateCharacters() {
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.css
new file mode 100644
index 0000000..6f087b8
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.css
@@ -0,0 +1,77 @@
+@import '../../../styles.css';
+
+mat-form-field {
+  color: #df7c0f;
+}
+
+:host {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+input {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.container {
+  margin: 5%;
+  display: flex;
+  flex-direction: column;
+}
+.container h1 {
+  margin-bottom: 1rem;
+}
+
+.form-container {
+  padding: 10px;
+  margin: 5px;
+}
+
+.primary-text {
+  height: 100px;
+  color: #df7c0f;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1%;
+  margin: 1%;
+}
+
+.header {
+  font-size: 20px;
+}
+
+.mat-divider--custom-style {
+  background-color: #9e8b6e;
+  box-shadow: 0 1px 0 0 #d8d8d8;
+}
+
+@media (max-width: 400px) {
+  .container {
+    margin-left: 0%;
+    width: 300px;
+    padding-top: 5%;
+  }
+}
+
+@media (min-width: 401px) {
+  .container {
+    margin-left: 1%;
+    width: 450px;
+    padding-top: 10%;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    width: 550px;
+    padding-top: 5%;
+  }
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.html
new file mode 100644
index 0000000..3da7f72
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.html
@@ -0,0 +1,12 @@
+<div class="container">
+  <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
+  <div class="primary-text header">Create character</div>
+  <div class="primary-text header">Step 2 - Personalize template</div>
+  <button
+    id="create-character-submit-button"
+    mat-raised-button
+    class="btn-primary form-container"
+    (click)="onCreateCharacterButton()">
+    CONTINUE
+  </button>
+</div>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.spec.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.spec.ts
new file mode 100644
index 0000000..2bf6574
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PersonalizeTemplateComponent } from './personalize-template.component';
+
+describe('PersonalizeTemplateComponent', () => {
+  let component: PersonalizeTemplateComponent;
+  let fixture: ComponentFixture<PersonalizeTemplateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PersonalizeTemplateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PersonalizeTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.ts
new file mode 100644
index 0000000..7d854ea
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-personalize-template',
+  templateUrl: './personalize-template.component.html',
+  styleUrls: ['./personalize-template.component.css']
+})
+export class PersonalizeTemplateComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+
+  onCreateCharacterButton() {
+    this.router.navigate(['select-character']);
+  }
+
+  onArrowBackClick() {
+    this.router.navigate(['create-character-step-1']);
+  }
+
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts
index 1c725a1..5d22813 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts
@@ -48,6 +48,6 @@ export class SelectCharacterComponent implements OnInit {
   }
 
   onCreateCharacter() {
-    this.router.navigate(['create-character']);
+    this.router.navigate(['create-character-step-1']);
   }
 }

From 4f94e86a7c4fa39f28ca2ed6d5191b33f812a511 Mon Sep 17 00:00:00 2001
From: Natalia Gawron <natgaw1@st.amu.edu.pl>
Date: Sat, 23 Jan 2021 20:39:42 +0100
Subject: [PATCH 4/4] SES-156 create character from template

---
 .../create-character.component.css            |   8 +
 .../create-character.component.html           |   4 +-
 .../create-character.component.ts             |  27 +++-
 .../personalize-template.component.html       |  18 ++-
 .../personalize-template.component.ts         |  61 ++++++-
 .../player-weapons-table.component.ts         |  16 +-
 .../registration/registration.component.html  |   3 +-
 .../select-character.component.html           |   8 +-
 .../select-character.component.ts             |  59 ++++---
 .../components/sign-in/sign-in.component.html |   4 +-
 .../src/app/store/actions/player.action.ts    |  11 +-
 .../src/app/store/reducers/player.reducer.ts  |   2 +
 .../src/services/character.service.ts         | 153 ++++++++++++------
 13 files changed, 268 insertions(+), 106 deletions(-)

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css
index 6f087b8..ec7cb8f 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css
@@ -61,6 +61,14 @@ input {
   }
 }
 
+@media (max-width: 400px) {
+  .container {
+    margin-left: 0%;
+    width: 300px;
+    padding-top: 5%;
+  }
+}
+
 @media (min-width: 401px) {
   .container {
     margin-left: 1%;
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html
index dc1f3d8..24b8003 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html
@@ -6,8 +6,8 @@
   <mat-list>
     <mat-list-item *ngFor="let character of charactersTemplateList">
       <mat-icon mat-list-icon>account_circle</mat-icon>
-      <div mat-line (click)="onCharacterClick()">{{character.name}}</div>
-      <mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick()">arrow_forward</mat-icon>
+      <div mat-line (click)="onCharacterClick(character.id)">{{character.name}}</div>
+      <mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick(character.id)">arrow_forward</mat-icon>
       <div mat-line> {{character.class}}, {{character.race}}</div>
       <mat-divider class="mat-divider--custom-style"></mat-divider>
     </mat-list-item>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts
index 1c821b2..7b1256f 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts
@@ -7,28 +7,43 @@ import { ErrorResponse } from '../../../types/ErrorResponse';
 import { HttpErrorResponse } from '@angular/common/http';
 import { CharacterFromTemplatesViewModel } from '../../../types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel';
 import { CharacterService } from '../../../services/character.service';
-import { CreateCharacterFromTemplate } from '../../store/actions/player.action';
+import {
+  ChooseTemplateToCreateCharacter,
+  ClearCharacterId,
+} from '../../store/actions/player.action';
 
 @Component({
   selector: 'app-create-character',
   templateUrl: './create-character.component.html',
-  styleUrls: ['./create-character.component.css']
+  styleUrls: ['./create-character.component.css'],
 })
 export class CreateCharacterComponent implements OnInit {
   charactersTemplateList: CharacterFromTemplatesViewModel[];
 
-  constructor(private router: Router, private store: Store<AppState>, private characterService: CharacterService) { }
+  constructor(
+    private router: Router,
+    private store: Store<AppState>,
+    private characterService: CharacterService
+  ) {}
 
   ngOnInit() {
     this.getTemplateCharacters();
   }
 
   onArrowBackClick() {
-    this.router.navigate(['select-character']);
+    this.store
+      .select((s) => s.playerStore.characterId)
+      .pipe(first())
+      .subscribe((characterId) => {
+        if (characterId !== null) {
+          this.store.dispatch(new ClearCharacterId());
+        }
+        this.router.navigate(['select-character']);
+      });
   }
 
-  onCharacterClick() {
-    this.store.dispatch(new CreateCharacterFromTemplate);
+  onCharacterClick(characterId: number) {
+    this.store.dispatch(new ChooseTemplateToCreateCharacter({ characterId }));
     this.router.navigate(['create-character-step-2']);
   }
 
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.html
index 3da7f72..bc60759 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.html
@@ -1,7 +1,23 @@
-<div class="container">
+<div [formGroup]="personalizeTemplateFormGroup" class="container">
   <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
   <div class="primary-text header">Create character</div>
   <div class="primary-text header">Step 2 - Personalize template</div>
+  <mat-form-field class="form-container">
+    <input
+      id="newName"
+      matInput
+      formControlName="newName"
+      placeholder="New character name"
+      type="text"
+      name="newName">
+    <mat-error *ngIf="personalizeTemplateFormGroup?.get('newName').hasError('required')">
+      If the field is left blank, your character will have the default name
+    </mat-error>
+    <mat-icon matSuffix>person</mat-icon>
+  </mat-form-field>
+  <mat-error *ngIf="apiError">
+    {{apiErrorMessage}}
+  </mat-error>
   <button
     id="create-character-submit-button"
     mat-raised-button
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.ts
index 7d854ea..ce59398 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.ts
@@ -1,24 +1,71 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { CharacterService } from '../../../services/character.service';
+import { ErrorResponse } from '../../../types/ErrorResponse';
+import { HttpErrorResponse } from '@angular/common/http';
+import { AppState } from '../../store/models/app-state.model';
+import { Store } from '@ngrx/store';
+import { first } from 'rxjs/operators';
 
 @Component({
   selector: 'app-personalize-template',
   templateUrl: './personalize-template.component.html',
-  styleUrls: ['./personalize-template.component.css']
+  styleUrls: ['./personalize-template.component.css'],
 })
 export class PersonalizeTemplateComponent implements OnInit {
+  allSubscriptions = new Subscription();
+  apiError = false;
+  apiErrorMessage = '';
 
-  constructor(private router: Router) { }
+  constructor(
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private characterService: CharacterService,
+    private store: Store<AppState>
+  ) {}
 
-  ngOnInit() {
-  }
+  public personalizeTemplateFormGroup: FormGroup = this.formBuilder.group({
+    newName: ['', [Validators.required]],
+  });
+
+  ngOnInit() {}
 
   onCreateCharacterButton() {
-    this.router.navigate(['select-character']);
+    this.store
+      .select((s) => {
+        return {
+          userId: s.appStore.userId,
+          characterId: s.playerStore.characterId,
+        };
+      })
+      .pipe(first())
+      .subscribe((result) => {
+        this.characterService
+          .createCharacterFromTemplate(
+            result.characterId,
+            result.userId,
+            this.personalizeTemplateFormGroup.value['newName']
+          )
+          .pipe(first())
+          .subscribe(
+            () => {
+              this.router.navigate(['select-character']);
+            },
+            (error: ErrorResponse | HttpErrorResponse) => {
+              console.error(error);
+              if (error instanceof HttpErrorResponse) {
+                error = error.error as ErrorResponse;
+              }
+              this.apiError = true;
+              this.apiErrorMessage = error.message;
+            }
+          );
+      });
   }
 
   onArrowBackClick() {
     this.router.navigate(['create-character-step-1']);
   }
-
 }
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts
index 89d454a..b9db9f7 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts
@@ -13,22 +13,20 @@ import { AppState } from '../../store/models/app-state.model';
 @Component({
   selector: 'app-player-weapons-table',
   templateUrl: './player-weapons-table.component.html',
-  styleUrls: ['./player-weapons-table.component.css']
+  styleUrls: ['./player-weapons-table.component.css'],
 })
 export class PlayerWeaponsTableComponent implements OnInit {
   weapons: WeaponViewModel[];
-  displayedColumns: string[] = [
-    'name',
-    'weaponType',
-    'weight',
-    'cost',
-  ];
+  displayedColumns: string[] = ['name', 'weaponType', 'weight', 'cost'];
   dataSource: MatTableDataSource<WeaponViewModel>;
 
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
-  constructor(private store: Store<AppState>, private equipmentService: EquipmentService) {}
+  constructor(
+    private store: Store<AppState>,
+    private equipmentService: EquipmentService
+  ) {}
 
   ngOnInit() {
     this.getCharacterWeapons();
@@ -40,7 +38,7 @@ export class PlayerWeaponsTableComponent implements OnInit {
       .pipe(first())
       .subscribe((characterId) => {
         this.equipmentService
-          .getCharacterWeapons(1)
+          .getCharacterWeapons(characterId)
           .pipe(first())
           .subscribe(
             (result) => {
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html
index 9f07043..b7ab5c5 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html
@@ -38,7 +38,8 @@
           required
           placeholder="Confirm Password"
           type="password"
-          name="confirmPassword"/>
+          name="confirmPassword"
+          (keyup.enter)="Register()"/>
         <mat-icon matSuffix >lock</mat-icon>
         <mat-error *ngIf="signUpFormGroup?.get('newAccount')['controls']?.confirmPassword?.hasError('required')">
           Confirm your password
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html
index ae3a7f7..fca5add 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html
@@ -1,7 +1,8 @@
 <div class="container">
   <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
-  <div *ngFor="let character of charactersList" class="primary-text header">Select character</div>
-  <mat-divider *ngFor="let character of charactersList" class="mat-divider--custom-style"></mat-divider>
+  <div *ngIf="charactersList != null && charactersList.length > 0">
+  <div class="primary-text header">Select character</div>
+  <mat-divider class="mat-divider--custom-style"></mat-divider>
   <mat-list>
     <mat-list-item *ngFor="let character of charactersList">
       <mat-icon mat-list-icon>account_circle</mat-icon>
@@ -11,7 +12,8 @@
       <mat-divider class="mat-divider--custom-style"></mat-divider>
     </mat-list-item>
   </mat-list>
-  <div *ngFor="let character of charactersList" class="primary-text header">or</div>
+  <div class="primary-text header">or</div>
+  </div>
   <div class="primary-text header">Create character</div>
   <mat-divider class="mat-divider--custom-style"></mat-divider>
   <mat-list>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts
index 5d22813..bd411ee 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts
@@ -1,44 +1,57 @@
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import {first} from 'rxjs/operators';
-import {ClearUserId} from '../../store/actions/app.actions';
-import {ErrorResponse} from '../../../types/ErrorResponse';
-import {HttpErrorResponse} from '@angular/common/http';
-import {Store} from '@ngrx/store';
-import {AppState} from '../../store/models/app-state.model';
-import {CharacterService} from '../../../services/character.service';
-import {CharacterForLoginViewModel} from '../../../types/viewmodels/character-viewmodels/CharacterForLoginViewModel';
-import {AddCharacterId} from '../../store/actions/player.action';
+import { first } from 'rxjs/operators';
+import { ClearUserId } from '../../store/actions/app.actions';
+import { ErrorResponse } from '../../../types/ErrorResponse';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Store } from '@ngrx/store';
+import { AppState } from '../../store/models/app-state.model';
+import { CharacterService } from '../../../services/character.service';
+import { CharacterForLoginViewModel } from '../../../types/viewmodels/character-viewmodels/CharacterForLoginViewModel';
+import { AddCharacterId } from '../../store/actions/player.action';
 
 @Component({
   selector: 'app-select-character',
   templateUrl: './select-character.component.html',
-  styleUrls: ['./select-character.component.css']
+  styleUrls: ['./select-character.component.css'],
 })
 export class SelectCharacterComponent implements OnInit {
   charactersList: CharacterForLoginViewModel[];
 
-  constructor(private router: Router, private store: Store<AppState>, private characterService: CharacterService) {}
+  constructor(
+    private router: Router,
+    private store: Store<AppState>,
+    private characterService: CharacterService
+  ) {}
 
   ngOnInit() {
     this.getUserCharactersList();
   }
 
   getUserCharactersList() {
-    this.store.select(s => s.appStore.userId).pipe(first()).subscribe((userId) => {
-      this.characterService.getUserCharactersList(userId).pipe(first()).subscribe((charactersList) => {
-        this.charactersList =  charactersList;
-      }, (error: ErrorResponse | HttpErrorResponse) => {
-        if (error instanceof HttpErrorResponse) {
-          error = error.error as ErrorResponse;
-        }
-        console.error(error.message);
-      } );
-    });
+    this.store
+      .select((s) => s.appStore.userId)
+      .pipe(first())
+      .subscribe((userId) => {
+        this.characterService
+          .getUserCharactersList(userId)
+          .pipe(first())
+          .subscribe(
+            (charactersList) => {
+              this.charactersList = charactersList;
+            },
+            (error: ErrorResponse | HttpErrorResponse) => {
+              if (error instanceof HttpErrorResponse) {
+                error = error.error as ErrorResponse;
+              }
+              console.error(error.message);
+            }
+          );
+      });
   }
 
   onCharacterClick(characterId: number) {
-    this.store.dispatch(new AddCharacterId({characterId}));
+    this.store.dispatch(new AddCharacterId({ characterId }));
     this.router.navigate(['player']);
   }
 
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html
index 6eede7b..ce59bc5 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html
@@ -26,7 +26,9 @@
           required
           placeholder="Password"
           type="password"
-          name="password"/>
+          name="password"
+          (keyup.enter)="onLoginButtonClick()"
+          />
         <mat-icon matSuffix>lock</mat-icon>
         <mat-error *ngIf="signInFormGroup?.get('signIn')['controls']?.password?.hasError('required')">
           Password is required
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/player.action.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/player.action.ts
index 7626a13..47b872c 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/player.action.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/player.action.ts
@@ -3,6 +3,7 @@ import {Action} from '@ngrx/store';
 export enum PlayerActionTypes {
   ADD_CHARACTER_ID= '[PLAYER] Add character id',
   CLEAR_CHARACTER_ID = '[PLAYER] Clear character id',
+  CHOOSE_TEMPLATE_TO_CREATE_CHARACTER = '[PLAYER] Choose template to create character',
   CREATED_CHARACTER_FROM_TEMPLATE = '[PLAYER] Created character from template'
 }
 
@@ -22,6 +23,14 @@ export class ClearCharacterId implements Action {
   }
 }
 
+export class ChooseTemplateToCreateCharacter implements Action {
+  readonly type = PlayerActionTypes.CHOOSE_TEMPLATE_TO_CREATE_CHARACTER;
+
+  constructor(public payload: {characterId: number}) {
+
+  }
+}
+
 export class CreateCharacterFromTemplate implements Action {
   readonly type = PlayerActionTypes.CREATED_CHARACTER_FROM_TEMPLATE;
 
@@ -30,4 +39,4 @@ export class CreateCharacterFromTemplate implements Action {
   }
 }
 
-export type PlayerAction = AddCharacterId | ClearCharacterId | CreateCharacterFromTemplate;
+export type PlayerAction = AddCharacterId | ClearCharacterId | ChooseTemplateToCreateCharacter | CreateCharacterFromTemplate;
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/player.reducer.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/player.reducer.ts
index 634ea87..2d63ac3 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/player.reducer.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/player.reducer.ts
@@ -9,6 +9,8 @@ export function PlayerReducer(state: PlayerStoreModel = initialState, action: Pl
   switch (action.type) {
     case PlayerActionTypes.ADD_CHARACTER_ID:
       return {...state, characterId: action.payload.characterId};
+    case PlayerActionTypes.CHOOSE_TEMPLATE_TO_CREATE_CHARACTER:
+      return {...state, characterId: action.payload.characterId};
     case PlayerActionTypes.CREATED_CHARACTER_FROM_TEMPLATE:
       return {...state};
     case PlayerActionTypes.CLEAR_CHARACTER_ID:
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts b/SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts
index 123c10e..f457055 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts
@@ -1,17 +1,18 @@
-import {Inject, Injectable} from '@angular/core';
-import {HttpClient, HttpParams} from '@angular/common/http';
-import {Observable, of, throwError} from 'rxjs';
-import {ErrorResponse} from '../types/ErrorResponse';
-import {Either} from '../types/Either';
-import {CharacterForLoginViewModel} from '../types/viewmodels/character-viewmodels/CharacterForLoginViewModel';
-import {switchMap, retry} from 'rxjs/operators';
-import {LoggedCharactersViewModel} from '../types/viewmodels/character-viewmodels/LoggedCharactersViewModel';
-import {CharacterStatsViewModel} from '../types/viewmodels/character-viewmodels/CharacterStatsViewModel';
-import {CharacterFromTemplatesViewModel} from '../types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel';
+import { Inject, Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable, of, throwError } from 'rxjs';
+import { ErrorResponse } from '../types/ErrorResponse';
+import { Either } from '../types/Either';
+import { CharacterForLoginViewModel } from '../types/viewmodels/character-viewmodels/CharacterForLoginViewModel';
+import { switchMap, retry } from 'rxjs/operators';
+import { LoggedCharactersViewModel } from '../types/viewmodels/character-viewmodels/LoggedCharactersViewModel';
+import { CharacterStatsViewModel } from '../types/viewmodels/character-viewmodels/CharacterStatsViewModel';
+import { CharacterFromTemplatesViewModel } from '../types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel';
+import { SuccessResponse } from '../types/SuccessResponse';
 
 Injectable({
-  providedIn: 'root'
-})
+  providedIn: 'root',
+});
 export class CharacterService {
   private baseUrl = 'api/character/';
   constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
@@ -19,53 +20,101 @@ export class CharacterService {
   }
 
   getLoggedCharacters(): Observable<LoggedCharactersViewModel[]> {
-    return this.http.get<Either<LoggedCharactersViewModel[], ErrorResponse>>(this.baseUrl + 'loggedCharacters').pipe(
-      switchMap(response => {
-        if (response.isLeft) {
-          return of(response.left);
-        } else {
-          return throwError(response.right);
-        }
-      }),
-      retry(3)
-    );
+    return this.http
+      .get<Either<LoggedCharactersViewModel[], ErrorResponse>>(
+        this.baseUrl + 'loggedCharacters'
+      )
+      .pipe(
+        switchMap((response) => {
+          if (response.isLeft) {
+            return of(response.left);
+          } else {
+            return throwError(response.right);
+          }
+        }),
+        retry(3)
+      );
   }
 
-  getUserCharactersList(userId: number): Observable<CharacterForLoginViewModel[]> {
-    const params = new HttpParams().set('userId', userId.toString())
-    return this.http.get<Either<CharacterForLoginViewModel[], ErrorResponse>>(this.baseUrl + 'userCharactersList', {params}).pipe(
-      switchMap(response => {
-        if (response.isLeft) {
-          return of(response.left);
-        } else {
-          return throwError(response.right);
-        }
-      })
-    );
+  getUserCharactersList(
+    userId: number
+  ): Observable<CharacterForLoginViewModel[]> {
+    const params = new HttpParams().set('userId', userId.toString());
+    return this.http
+      .get<Either<CharacterForLoginViewModel[], ErrorResponse>>(
+        this.baseUrl + 'userCharactersList',
+        { params }
+      )
+      .pipe(
+        switchMap((response) => {
+          if (response.isLeft) {
+            return of(response.left);
+          } else {
+            return throwError(response.right);
+          }
+        })
+      );
   }
 
-  getCharacterStats(characterId: number): Observable<CharacterStatsViewModel[]> {
-    const params = new HttpParams().set('characterId', characterId.toString())
-    return this.http.get<Either<CharacterStatsViewModel[], ErrorResponse>>( this.baseUrl + 'characterStats', {params}).pipe(
-      switchMap( response => {
-        if (response.isLeft) {
-          return of(response.left);
-        } else {
-          return throwError(response.right);
-        }
-      })
-    );
+  getCharacterStats(
+    characterId: number
+  ): Observable<CharacterStatsViewModel[]> {
+    const params = new HttpParams().set('characterId', characterId.toString());
+    return this.http
+      .get<Either<CharacterStatsViewModel[], ErrorResponse>>(
+        this.baseUrl + 'characterStats',
+        { params }
+      )
+      .pipe(
+        switchMap((response) => {
+          if (response.isLeft) {
+            return of(response.left);
+          } else {
+            return throwError(response.right);
+          }
+        })
+      );
   }
 
   getTemplateCharacters(): Observable<CharacterFromTemplatesViewModel[]> {
-    return this.http.get<Either<CharacterFromTemplatesViewModel[], ErrorResponse>>(this.baseUrl + 'getTemplateCharacters').pipe(
-      switchMap(response => {
-        if (response.isLeft) {
-          return of(response.left);
-        } else {
-          return throwError(response.right);
-        }
-      }));
+    return this.http
+      .get<Either<CharacterFromTemplatesViewModel[], ErrorResponse>>(
+        this.baseUrl + 'getTemplateCharacters'
+      )
+      .pipe(
+        switchMap((response) => {
+          if (response.isLeft) {
+            return of(response.left);
+          } else {
+            return throwError(response.right);
+          }
+        })
+      );
   }
 
+  createCharacterFromTemplate(
+    characterId: number,
+    userId: number,
+    newName: string
+  ): Observable<SuccessResponse> {
+    const params = new HttpParams()
+      .set('characterId', characterId.toString())
+      .set('userId', userId.toString())
+      .set('newName', newName);
+    return this.http
+      .post<Either<SuccessResponse, ErrorResponse>>(
+        this.baseUrl + 'createCharacterFromTemplate',
+        null,
+        { params }
+      )
+      .pipe(
+        switchMap((response) => {
+          if (response.isLeft) {
+            return of(response.left);
+          } else {
+            return throwError(response.right);
+          }
+        })
+      );
+  }
 }