SES-87 defined default style, created LoginUI component

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

@@ -1,6 +1,7 @@
 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';
+import { RegistrationComponent } from './app/components/registration/registration.component';
 
 const routes: Routes = [
   {
@@ -13,6 +14,11 @@ const routes: Routes = [
     component: SignInComponent,
     pathMatch: 'full'
   },
+  {
+    path: 'register',
+    component: RegistrationComponent,
+    pathMatch: 'full'
+  },
 ];
 
 export  const appRoutingModule = RouterModule.forRoot(routes);

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

@@ -6,15 +6,24 @@ import { AppComponent } from './app.component';
 import { SelectRoleComponent } from './components/select-role/select-role.component';
 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';
+import { RegistrationComponent } from './components/registration/registration.component';
+import {
+  MatCardModule,
+  MatTabsModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatButtonModule,
+  MatCheckboxModule,
+  MatIconModule
+} from '@angular/material';
 
 @NgModule({
   declarations: [
     AppComponent,
     SelectRoleComponent,
-    SignInComponent
+    SignInComponent,
+    RegistrationComponent,
   ],
   imports: [
 BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -22,8 +31,13 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
     FormsModule,
     appRoutingModule,
     BrowserAnimationsModule,
-    MatButtonModule,
+    MatInputModule,
     MatCardModule,
+    MatTabsModule,
+    MatFormFieldModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatIconModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -4,18 +4,24 @@
   align-items: center;
   flex-wrap: wrap;
   padding: 10%;
+  top: 50%;
 }
 
 .button {
   border-radius: 15px;
+  border: #e9cca7 1px solid;
+}
+
+.button:hover {
+  opacity: 0.5;
 }
 
 #player-button {
-  background-color: #2699fb;
+  background-color: #df7c0f;
 }
 
 #game-master-button {
-  background-color: #440505;
+  background-color: #291f28;
 }
 
 .font {
@@ -25,6 +31,9 @@
 }
 
 @media (max-width: 768px) {
+  .container {
+    padding-top: 70%;
+  }
   .button {
     margin: 10px;
     padding: 10px;
@@ -37,6 +46,9 @@
 }
 
 @media (min-width: 768px) {
+  .container {
+    padding-top: 20%;
+  }
   .button {
     margin: 20px;
     padding: 20px;

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

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { SignInComponent } from './../sign-in/sign-in.component';
 
 @Component({
   selector: 'app-select-role',

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

@@ -0,0 +1,57 @@
+@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%;
+}
+@media (max-width: 768px) {
+  .container {
+    width: 350px;
+    padding-top: 50%;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    width: 550px;
+    padding-top: 20%;
+  }
+}

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

@@ -1 +1,52 @@
-<p>Sign in</p>
+<div class="container">
+  <mat-icon matSuffix class="arrow-back" (click)="onArrowBackClick()">arrow_back</mat-icon>
+  <mat-form-field class="form-container">
+    <input
+      matInput
+      placeholder="Username"
+      type="text"
+      required
+      name="username"
+      ngModel
+      #username="ngModel">
+      <mat-error *ngIf="username.invalid">Username is required</mat-error>
+      <mat-icon matSuffix>person</mat-icon>
+  </mat-form-field>
+
+  <mat-form-field class="form-container">
+    <input
+      matInput
+      placeholder="Password"
+      type="password"
+      required
+      minlength="6"
+      name="password"
+      ngModel
+      #password="ngModel">
+      <mat-icon matSuffix>lock</mat-icon>
+      <mat-error
+        *ngIf="password.errors && password.errors.required">
+        Password is required
+      </mat-error>
+      <mat-error
+        *ngIf="password.errors && password.errors.minlength">
+        Password must be of length 6
+      </mat-error>
+  </mat-form-field>
+
+  <button
+    mat-raised-button
+    class="btn-primary form-container"
+    (click)="onLoginButtonClick()">
+    CONTINUE
+  </button>
+
+  <div class="primary-text">Not a member?</div>
+  <button
+  mat-raised-button
+  class="btn-secondary form-container"
+  (click)="onRegisterButtonClick()">
+  REGISTER
+  </button>
+</div>
+

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

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-sign-in',
@@ -8,6 +9,29 @@ import { Component } from '@angular/core';
 export class SignInComponent {
   isExpanded = false;
 
+  username = "";
+  password = "";
+  
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+  }
+
+  onLoginButtonClick(){
+    //TODO connect with backend and added router
+    console.log("Clicked Login");
+  }
+
+  onRegisterButtonClick(){
+    this.router.navigate(['register'])
+    //TODO connect with backend
+    console.log("Clicked Register");
+  }
+
+  onArrowBackClick(){
+    this.router.navigate([''])
+  }
+  
   collapse() {
     this.isExpanded = false;
   }

SessionCompanion/SessionCompanion/ClientApp/src/styles.css

@@ -1,22 +1,67 @@
 @import "@angular/material/prebuilt-themes/deeppurple-amber.css";
 
-a {
-  color: #0366d6;
-}
-
-code {
-  color: #e01a76;
-}
-
 .btn-primary {
   color: #fff;
-  background-color: #1b6ec2;
+  background-color: #df7c0f;
-  border-color: #1861ac;
+  border-color: #e9cca7 1px solid;
+  border-radius: 4px;
+  opacity: 1;
+}
+.btn-primary:hover {
+  opacity: 0.5;
+  color: #e9cca7;
+}
+
+.btn-secondary {
+  color: #e9cca7;
+  background-color: #102028;
+  border-color: #e9cca7 1px solid;
+  border-radius: 4px;
+  opacity: 1;
+}
+
+.btn-secondary:hover {
+  opacity: 0.5;
+  color: #df7c0f;
+}
+
+.input-basic {
+  border: #e9cca7 1px solid;
+}
+
+.arrow-back:hover {
+  opacity: 0.5;
+}
+
+/* icon in mat-form-field*/
+::ng-deep mat-form-field {
+  color: #df7c0f !important;
+}
+
+/* label of input in mat-form-field*/
+::ng-deep mat-form-field .mat-form-field-label {
+  color: #df7c0f !important;
+}
+
+/* default color of underline */
+::ng-deep mat-form-field .mat-form-field-underline {
+  background-color: #e9cca7 !important;
+}
+
+::ng-deep mat-form-field .mat-input-element {
+  caret-color: #ffffff !important;
+}
+
+/* color line when somebody is typing in input*/
+::ng-deep mat-form-field .mat-form-field-ripple {
+  background-color: #df7c0f !important;
 }
 
 html,
 body {
   height: 100%;
+  background-color: #102028;
+  color: #e9cca7;
 }
 body {
   margin: 0;

SessionCompanion/SessionCompanion/SessionCompanion.xml

@@ -1,47 +1,47 @@
-<?xml version="1.0"?>
+<?xml version="1.0"?>
-<doc>
+<doc>
-    <assembly>
+    <assembly>
-        <name>SessionCompanion</name>
+        <name>SessionCompanion</name>
-    </assembly>
+    </assembly>
-    <members>
+    <members>
-        <member name="M:SessionCompanion.Controllers.CharacterController.Get(System.Int32)">
+        <member name="M:SessionCompanion.Controllers.CharacterController.Get(System.Int32)">
-            <summary>
+            <summary>
-            Metoda zwraca postać ze wskazanym identyfikatorem
+            Metoda zwraca postać ze wskazanym identyfikatorem
-            </summary>
+            </summary>
-            <param name="id">Identyfikator postaci</param>
+            <param name="id">Identyfikator postaci</param>
-            <returns>ViewModel Postaci</returns>
+            <returns>ViewModel Postaci</returns>
-        </member>
+        </member>
-        <member name="F:SessionCompanion.Hubs.SessionHub.ConnectedCharacters">
+        <member name="F:SessionCompanion.Hubs.SessionHub.ConnectedCharacters">
-            <summary>
+            <summary>
-            Lista zalogowanych graczy i identyfikator wybranej postaci
+            Lista zalogowanych graczy i identyfikator wybranej postaci
-            </summary>
+            </summary>
-        </member>
+        </member>
-        <member name="F:SessionCompanion.Hubs.SessionHub.GameMasterConnected">
+        <member name="F:SessionCompanion.Hubs.SessionHub.GameMasterConnected">
-            <summary>
+            <summary>
-            Status, czy GM został już zalogowany
+            Status, czy GM został już zalogowany
-            </summary>
+            </summary>
-        </member>
+        </member>
-        <member name="M:SessionCompanion.Hubs.SessionHub.OnDisconnectedAsync(System.Exception)">
+        <member name="M:SessionCompanion.Hubs.SessionHub.OnDisconnectedAsync(System.Exception)">
-            <summary>
+            <summary>
-            Metoda nadpisuje istniejącą metodę wywoływaną na utratę połączenia.
+            Metoda nadpisuje istniejącą metodę wywoływaną na utratę połączenia.
-            Ma ona za zadanie usunąć odłączonego gracza z listy zalogowanych. 
+            Ma ona za zadanie usunąć odłączonego gracza z listy zalogowanych. 
-            Pozostałe ekrany zostają powiadomione wiadomością "GoodBye"
+            Pozostałe ekrany zostają powiadomione wiadomością "GoodBye"
-            </summary>
+            </summary>
-            <param name="exception">Błąd/przyczyna odłączenia</param>
+            <param name="exception">Błąd/przyczyna odłączenia</param>
-        </member>
+        </member>
-        <member name="M:SessionCompanion.Hubs.SessionHub.GameMasterLogin">
+        <member name="M:SessionCompanion.Hubs.SessionHub.GameMasterLogin">
-            <summary>
+            <summary>
-            Logowanie do Huba dla GM
+            Logowanie do Huba dla GM
-            Wysyła wiadomość "Welcome" do wszystkich zalogowanych użytkoników
+            Wysyła wiadomość "Welcome" do wszystkich zalogowanych użytkoników
-            </summary>
+            </summary>
-            <returns>Zwraca true - jeśli udało się zalogować, false - jesli ktoś zalogował się już jako GM</returns>
+            <returns>Zwraca true - jeśli udało się zalogować, false - jesli ktoś zalogował się już jako GM</returns>
-        </member>
+        </member>
-        <member name="M:SessionCompanion.Hubs.SessionHub.PlayerCharacterLogin(System.Int32)">
+        <member name="M:SessionCompanion.Hubs.SessionHub.PlayerCharacterLogin(System.Int32)">
-            <summary>
+            <summary>
-            Logowanie do Huba dla Gracza
+            Logowanie do Huba dla Gracza
-            </summary>
+            </summary>
-            <param name="characterId"> Identyfikator zalogowanego bohatera </param>
+            <param name="characterId"> Identyfikator zalogowanego bohatera </param>
-            <returns>Wysyła wiadomość "Welcome" do wszystkich zalogowanych użytkoników</returns>
+            <returns>Wysyła wiadomość "Welcome" do wszystkich zalogowanych użytkoników</returns>
-        </member>
+        </member>
-    </members>
+    </members>
-</doc>
+</doc>