SES-87 defined default style, created LoginUI component #24
@ -9,6 +9,37 @@
|
|||||||
Identyfikator przynależności postaci
|
Identyfikator przynależności postaci
|
||||||
</summary>
|
</summary>
|
||||||
</member>
|
</member>
|
||||||
|
<member name="P:SessionCompanion.ViewModels.ApiResponses.ErrorResponse.StatusCode">
|
||||||
|
<summary>
|
||||||
|
Kod błędu
|
||||||
|
</summary>
|
||||||
|
</member>
|
||||||
|
<member name="P:SessionCompanion.ViewModels.ApiResponses.ErrorResponse.Message">
|
||||||
|
<summary>
|
||||||
|
Wiadomość błędu do pokazania
|
||||||
|
</summary>
|
||||||
|
</member>
|
||||||
|
<member name="T:SessionCompanion.ViewModels.ApiResponses.SuccessResponse">
|
||||||
|
<summary>
|
||||||
|
Wiadomość mówiąca o poprawnym wykonaniu zadania
|
||||||
|
</summary>
|
||||||
|
</member>
|
||||||
|
<member name="M:SessionCompanion.ViewModels.ApiResponses.SuccessResponse.#ctor(System.String)">
|
||||||
|
<summary>
|
||||||
|
Konstruktor obiektu
|
||||||
|
</summary>
|
||||||
|
<param name="message"> Wiadomość dotycząca operacji </param>
|
||||||
|
</member>
|
||||||
|
<member name="P:SessionCompanion.ViewModels.ApiResponses.SuccessResponse.SuccessCode">
|
||||||
|
<summary>
|
||||||
|
Kod odpowiedzi, domyślnie nadawany jest 200
|
||||||
|
</summary>
|
||||||
|
</member>
|
||||||
|
<member name="P:SessionCompanion.ViewModels.ApiResponses.SuccessResponse.SuccessMessage">
|
||||||
|
<summary>
|
||||||
|
Wiadomość dotycząca wykoanania operacji
|
||||||
|
</summary>
|
||||||
|
</member>
|
||||||
<member name="P:SessionCompanion.ViewModels.BackgroundViewModels.BackgroundViewModel.Id">
|
<member name="P:SessionCompanion.ViewModels.BackgroundViewModels.BackgroundViewModel.Id">
|
||||||
<summary>
|
<summary>
|
||||||
Identyfikator przeszłości postaci
|
Identyfikator przeszłości postaci
|
||||||
|
@ -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);
|
||||||
|
@ -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]
|
||||||
|
@ -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;
|
||||||
|
@ -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',
|
||||||
|
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
@ -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>
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user