SES-87 defined default style, created LoginUI component

This commit is contained in:
Natalia Gawron 2020-12-11 21:57:52 +01:00
parent cd1a0af239
commit 012c8828e1
10 changed files with 857 additions and 618 deletions

View File

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

View File

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

View File

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

View File

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

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

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>

View File

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({ @Component({
selector: 'app-sign-in', selector: 'app-sign-in',
@ -8,6 +9,29 @@ import { Component } from '@angular/core';
export class SignInComponent { export class SignInComponent {
isExpanded = false; 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() { collapse() {
this.isExpanded = false; this.isExpanded = false;
} }

View File

@ -1,22 +1,67 @@
@import "@angular/material/prebuilt-themes/deeppurple-amber.css"; @import "@angular/material/prebuilt-themes/deeppurple-amber.css";
a {
color: #0366d6;
}
code {
color: #e01a76;
}
.btn-primary { .btn-primary {
color: #fff; 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, html,
body { body {
height: 100%; height: 100%;
background-color: #102028;
color: #e9cca7;
} }
body { body {
margin: 0; margin: 0;

View File

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