s426135/session-companion
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

SES-87 defined default style, created LoginUI component #24

Merged
s426134 merged 2 commits from SES-87 into master 2020-12-11 22:08:23 +01:00
Conversation 0 Commits 2 Files Changed 10 +857 -618
10 changed files with 857 additions and 618 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 012c8828e1 - Show all commits

1137
SessionCompanion/SessionCompanion.ViewModels/SessionCompanion.ViewModels.xml
View File

File diff suppressed because it is too large Load Diff

6
SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts
View File

@ -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);

22
SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
View File

@ -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]

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

@ -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;

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

@ -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',

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

@ -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%;
}
}

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

@ -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>

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

@ -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;
}

65
SessionCompanion/SessionCompanion/ClientApp/src/styles.css
View File

@ -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;
border-color: #1861ac;
background-color: #df7c0f;
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;

94
SessionCompanion/SessionCompanion/SessionCompanion.xml
View File

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