Moved auth and new user list component to separate modules

frontend/src/app/api.service.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {environment} from '../environments/environment';
-import {LoginService} from './shared/login.service';
+import {LoginService} from './auth/login.service';
 
 @Injectable({
   providedIn: 'root'

frontend/src/app/app-routing.module.ts

@@ -1,11 +1,21 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-import {LoginComponent} from './login/login.component';
-import {RegisterComponent} from './register/register.component';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthCheck } from './auth-check';
 
 const routes: Routes = [
-  {path: 'login', component: LoginComponent},
-  {path: 'register', component: RegisterComponent}
+  {
+    path: '',
+    children: [
+      {path: 'auth', loadChildren: async () => (await import('./auth/auth.module')).AuthModule}
+    ]
+  },
+  {
+    path: '',
+    canActivate: [AuthCheck],
+    children: [
+      {path: 'users', loadChildren: async () => (await import('./users/users.module')).UsersModule}
+    ]
+  }
 ];
 
 @NgModule({

frontend/src/app/app.component.html

@@ -26,8 +26,8 @@
         <a mat-button (click)="logout()">Kijelentkezés</a>
       </span>
       <span *ngIf="!loginService.token">
-        <a mat-button routerLink="/register">Regisztráció</a>
-        <a mat-button routerLink="/login">
+        <a mat-button routerLink="/auth/register">Regisztráció</a>
+        <a mat-button routerLink="/auth/login">
           Bejelentkezés
           <mat-icon aria-hidden="false" aria-label="Bejelentkezés">login</mat-icon>
         </a>

frontend/src/app/app.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 import {Observable} from 'rxjs';
 import {map, shareReplay} from 'rxjs/operators';
-import {LoginService} from './shared/login.service';
+import {LoginService} from './auth/login.service';
 import {Router} from '@angular/router';
 import {ApiService} from './api.service';
 import {UserRole} from './model/user.model';

frontend/src/app/app.module.ts

@@ -1,29 +1,26 @@
-import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
 
-import {AppComponent} from './app.component';
-import {LoginComponent} from './login/login.component';
-import {AppRoutingModule} from './app-routing.module';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatSliderModule} from '@angular/material/slider';
-import {LayoutModule} from '@angular/cdk/layout';
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatButtonModule} from '@angular/material/button';
-import {MatSidenavModule} from '@angular/material/sidenav';
-import {MatIconModule} from '@angular/material/icon';
-import {MatListModule} from '@angular/material/list';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
-import {RegisterComponent} from './register/register.component';
-import {LoginService} from './shared/login.service';
-import {HttpClientModule} from '@angular/common/http';
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatSliderModule } from '@angular/material/slider';
+import { LayoutModule } from '@angular/cdk/layout';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { LoginService } from './auth/login.service';
+import { HttpClientModule } from '@angular/common/http';
+import { AuthCheck } from './auth-check';
 
 @NgModule({
   declarations: [
-    AppComponent,
-    LoginComponent,
-    RegisterComponent
+    AppComponent
   ],
   imports: [
     BrowserModule,
@@ -43,7 +40,8 @@ import {HttpClientModule} from '@angular/common/http';
     HttpClientModule
   ],
   providers: [
-    LoginService
+    LoginService,
+    AuthCheck
   ],
   bootstrap: [AppComponent]
 })

frontend/src/app/auth-check.ts

@@ -0,0 +1,13 @@
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
+import { Injectable } from '@angular/core';
+import { LoginService } from './auth/login.service';
+
+@Injectable()
+export class AuthCheck implements CanActivate {
+  constructor(private userService: LoginService) {
+  }
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    return this.userService.token && this.userService.user && true;
+  }
+}

frontend/src/app/auth/auth.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {path: 'login', component: LoginComponent},
+  {path: 'register', component: RegisterComponent}
+];
+
+@NgModule({
+  declarations: [
+    LoginComponent,
+    RegisterComponent
+  ],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    FormsModule,
+    RouterModule.forChild(routes)
+  ]
+})
+export class AuthModule {
+}

frontend/src/app/auth/login/login.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
-import {LoginService} from '../shared/login.service';
-import {FormErrorStateMatcher} from '../utility/form-error-state-matcher';
+import {LoginService} from '../login.service';
+import {FormErrorStateMatcher} from '../../utility/form-error-state-matcher';
 import {FormControl} from '@angular/forms';
 
 @Component({

frontend/src/app/auth/register/register.component.ts

@@ -1,8 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {AbstractControl, FormControl, ValidationErrors, Validators} from '@angular/forms';
-import {LoginService} from '../shared/login.service';
+import {LoginService} from '../login.service';
 import {Router} from '@angular/router';
-import {FormErrorStateMatcher} from '../utility/form-error-state-matcher';
+import {FormErrorStateMatcher} from '../../utility/form-error-state-matcher';
 
 @Component({
   selector: 'app-register',

frontend/src/app/users/user-list/user-list.component.html

@@ -0,0 +1 @@
+<p>user-list works!</p>

frontend/src/app/users/user-list/user-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserListComponent } from './user-list.component';
+
+describe('UserListComponent', () => {
+  let component: UserListComponent;
+  let fixture: ComponentFixture<UserListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UserListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/users/user-list/user-list.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-user-list',
+  templateUrl: './user-list.component.html',
+  styleUrls: ['./user-list.component.css']
+})
+export class UserListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/users/users.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UserListComponent } from './user-list/user-list.component';
+
+
+
+@NgModule({
+  declarations: [UserListComponent],
+  imports: [
+    CommonModule
+  ]
+})
+export class UsersModule { }