changed app structure to pure router-outlet and added login and register to routing

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)],

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

src/app/app.component.html

@@ -1,20 +1,3 @@
-<div class="chat">
+<div class="router">
-  <app-chat></app-chat>
-</div>
-
-<div>
-  <div class="card-container">
-    <div class="card card-small" (click)="onClickSocket()" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-
-      <span>Send test message</span>
-    </div>
-
-    <div class="card card-small" (click)="onClickApi()" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-
-      <span>Call rest api</span>
-    </div>
-  </div>
-</div>
   <router-outlet></router-outlet>
+</div>

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,
+  constructor(private accountService: AccountService,
-              private httpService: HttpClient) { }
+              private socketService: SocketService,
+              ) { }
 
 }

src/app/app.module.ts

@@ -1,30 +1,45 @@
 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 { LoginComponent } from './account/login/login.component';
-import {MatInputModule} from '@angular/material/input';
+import { TestComponent } from './test/test.component';
+import { RegisterComponent } from './account/register/register.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     ChatComponent,
     EntryComponent,
-    InputComponent
+    InputComponent,
+    LoginComponent,
+    TestComponent,
+    RegisterComponent
   ],
   imports: [
-        BrowserModule,
     HttpClientModule,
-        AppRoutingModule,
+    BrowserModule,
     BrowserAnimationsModule,
+    FlexLayoutModule,
+    MatButtonModule,
     MatCardModule,
-        MatInputModule
+    MatIconModule,
+    MatInputModule,
+    ReactiveFormsModule,
+    AppRoutingModule,
   ],
   providers: [],
   bootstrap: [AppComponent]