From 110118e01d9be30aaedd385640b6905d74267dbd Mon Sep 17 00:00:00 2001 From: Daniel Lukats Date: Tue, 21 Jul 2020 08:47:33 +0200 Subject: [PATCH] changed app structure to pure router-outlet and added login and register to routing --- src/app/app-routing.module.ts | 11 +++++- src/app/app.component.css | 67 +++-------------------------------- src/app/app.component.html | 21 ++--------- src/app/app.component.ts | 18 +++------- src/app/app.module.ts | 41 ++++++++++++++------- 5 files changed, 49 insertions(+), 109 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 06c7342..148695f 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,8 +1,17 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; +import { AppComponent } from './app.component'; +import { AuthGuard } from './account/auth.guard'; +import { LoginComponent } from './account/login/login.component'; +import {RegisterComponent} from './account/register/register.component'; -const routes: Routes = []; +const routes: Routes = [ + { path: '', component: AppComponent, canActivate: [AuthGuard] }, + { path: 'login', component: LoginComponent }, + { path: 'register', component: RegisterComponent }, + { path: '**', redirectTo: '' }, +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.component.css b/src/app/app.component.css index e32d84b..7ca0330 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -16,69 +16,6 @@ svg.material-icons:not(:last-child) { margin-right: 8px; } -.card svg.material-icons path { - fill: #888; -} - -.card-container { - display: flex; - flex-wrap: wrap; - justify-content: center; - /* margin-top: 16px; */ -} - -.card { - border-radius: 4px; - border: 1px solid #eee; - background-color: #fafafa; - height: 40px; - width: 200px; - margin: 0 8px 16px; - padding: 16px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - transition: all 0.2s ease-in-out; - line-height: 24px; -} - -.card-container .card:not(:last-child) { - margin-right: 0; -} - -.card.card-small { - height: 16px; - width: 168px; -} - -.card-container .card:not(.highlight-card) { - cursor: pointer; -} - -.card-container .card:not(.highlight-card):hover { - transform: translateY(-3px); - box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35); -} - -.card-container .card:not(.highlight-card):hover .material-icons path { - fill: rgb(105, 103, 103); -} - -.card.highlight-card { - background-color: #1976d2; - color: white; - font-weight: 600; - border: none; - width: auto; - min-width: 30%; - position: relative; -} - -.card.card.highlight-card span { - margin-left: 60px; -} - /* Responsive Styles */ @media screen and (max-width: 767px) { @@ -93,6 +30,10 @@ svg.material-icons:not(:last-child) { } +.router { + height: 100%; +} + .chat { float: right; height: 100%; diff --git a/src/app/app.component.html b/src/app/app.component.html index 9d689f5..ae41dd8 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,20 +1,3 @@ -
- +
+
- -
-
-
- - - Send test message -
- -
- - - Call rest api -
-
-
- diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ab75af0..f34dff4 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { SocketService } from './socket/socket.service'; -import { HttpClient } from '@angular/common/http'; +import { AccountService } from './account/account.service'; @Component({ selector: 'app-root', @@ -10,22 +10,14 @@ import { HttpClient } from '@angular/common/http'; export class AppComponent { title = 'rona-frontend'; - onClickSocket() { - this.socketService.send('test', {'user': 'USERNAME', 'payload': 'PAYLOAD TEST'}) - } - - onClickApi() { - this.httpService.get('http://localhost:5005/').subscribe(response => { - console.log('REST API call returned: ', response); - }); - } /** * + * @param accountService * @param socketService - * @param httpService */ - constructor(private socketService: SocketService, - private httpService: HttpClient) { } + constructor(private accountService: AccountService, + private socketService: SocketService, + ) { } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9d7f9ad..04c53cc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,31 +1,46 @@ import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { ReactiveFormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ChatComponent } from './chat/chat.component'; import { EntryComponent } from './chat/entry/entry.component'; import { InputComponent } from './chat/input/input.component'; -import {MatCardModule} from '@angular/material/card'; -import {MatInputModule} from '@angular/material/input'; +import { LoginComponent } from './account/login/login.component'; +import { TestComponent } from './test/test.component'; +import { RegisterComponent } from './account/register/register.component'; @NgModule({ declarations: [ AppComponent, ChatComponent, EntryComponent, - InputComponent + InputComponent, + LoginComponent, + TestComponent, + RegisterComponent + ], + imports: [ + HttpClientModule, + BrowserModule, + BrowserAnimationsModule, + FlexLayoutModule, + MatButtonModule, + MatCardModule, + MatIconModule, + MatInputModule, + ReactiveFormsModule, + AppRoutingModule, ], - imports: [ - BrowserModule, - HttpClientModule, - AppRoutingModule, - BrowserAnimationsModule, - MatCardModule, - MatInputModule - ], providers: [], bootstrap: [AppComponent] })