Routing/menü fejlesztés, SPA fix

- Logout hozzáadva
- Read only lista kijelentkezve

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

@@ -1,34 +1,37 @@
-import { NgModule } from '@angular/core';
+import { inject, NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { AuthCheck } from './auth-check';
 import { ProductListComponent } from './product-list/product-list.component';
 import { LoginComponent } from './login/login.component';
 import { UserListComponent } from './user-list/user-list.component';
 import { ProductEditComponent } from './product-edit/product-edit.component';
+import { UserService } from './services/user.service';
+import { RegisterComponent } from './register/register.component';
 
 const routes: Routes = [
   {
     path: '',
-    canActivate: [AuthCheck],
+    canMatch: [() => !!inject(UserService).user],
     children: [
       {
         path: 'users',
         component: UserListComponent
       },
-      {
-        path: '',
-        component: ProductListComponent
-      },
       {
         path: ':id',
         component: ProductEditComponent
+      },
+      {
+        path: '',
+        component: ProductListComponent
       }
     ]
   },
   {
     path: '',
     children: [
-      {path: '', component: LoginComponent}
+      {path: 'login', component: LoginComponent},
+      {path: 'register', component: RegisterComponent},
+      {path: '', component: ProductListComponent}
     ]
   }
 ];
@@ -39,5 +42,3 @@ const routes: Routes = [
 })
 export class AppRoutingModule {
 }
-
-export type RouteData = { title: string; };

client/src/app/app.component.css

@@ -3,3 +3,7 @@
   flex-direction: column;
   align-items: flex-start;
 }
+
+.loginbox {
+  margin: 20px;
+}

client/src/app/app.component.html

@@ -1,24 +1,14 @@
-<div *ngIf="userService.user; else login" class="loginbox" style="margin: 20px">
+<div *ngIf="userService.user; else login" class="loginbox">
   Üdv {{ userService.user.username }}
-  <div>
-    <button mat-button class="mat-primary" (click)="router.navigate(['/'])">Termékek</button>
-    <button mat-button class="mat-primary" (click)="router.navigate(['/users'])">Felhasználók</button>
-  </div>
+  <button mat-button class="mat-primary" (click)="router.navigate(['/'])">Termékek</button>
+  <button mat-button class="mat-primary" (click)="router.navigate(['/users'])">Felhasználók</button>
+  <button mat-button (click)="logout()">Kijelentkezés</button>
 </div>
 <ng-template #login>
   <div class="loginbox">
-    <form [formGroup]="loginForm">
-      <mat-form-field appearance="fill">
-        <mat-label>Felhasználónév</mat-label>
-        <input matInput formControlName="username">
-      </mat-form-field>
-      <mat-form-field appearance="fill">
-        <mat-label>Jelszó</mat-label>
-        <input matInput type="password" formControlName="password">
-      </mat-form-field>
-      <button mat-button class="mat-primary" (click)="doLogin()">Bejelentkezés</button>
-      <button mat-button (click)="doRegister()">Regisztráció</button>
-    </form>
+    <button mat-button class="mat-primary" (click)="router.navigate(['/'])">Termékek</button>
+    <button routerLink="/login" mat-button class="mat-primary">Bejelentkezés</button>
+    <button routerLink="/register" mat-button>Regisztráció</button>
   </div>
 </ng-template>
 <router-outlet></router-outlet>

client/src/app/app.component.ts

@@ -9,11 +9,6 @@ import { Router } from '@angular/router';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
-  loginForm = new FormGroup({
-    username: new FormControl(),
-    password: new FormControl()
-  });
-
   toggle = false;
 
   constructor(public userService: UserService, public router: Router) {
@@ -25,15 +20,9 @@ export class AppComponent implements OnInit {
     }
   }
 
-  async doLogin() {
-    try {
-      await this.userService.login(this.loginForm.value.username, this.loginForm.value.password);
-    } catch (e: any) {
-      console.log("Hiba:", e);
-      alert("Hiba: " + (e?.error?.error ?? JSON.stringify(e)));
+  async logout() {
+    if (await this.userService.logout()) {
+      await this.router.navigate(['/']);
     }
   }
-
-  async doRegister() {
-  }
 }

client/src/app/app.module.ts

@@ -15,7 +15,6 @@ import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 import { LoginComponent } from './login/login.component';
 import { UserListComponent } from './user-list/user-list.component';
-import { AuthCheck } from './auth-check';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { RegisterComponent } from './register/register.component';
 import { ProductEditComponent } from './product-edit/product-edit.component';
@@ -44,7 +43,6 @@ import { ProductEditComponent } from './product-edit/product-edit.component';
     MatSlideToggleModule
   ],
   providers: [
-    AuthCheck
   ],
   bootstrap: [AppComponent]
 })

client/src/app/auth-check.ts

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

client/src/app/login/login.component.html

@@ -1 +1,14 @@
-<h1>Jelentkezz be</h1>
+<div class="loginbox">
+  <form [formGroup]="loginForm">
+    <mat-form-field appearance="fill">
+      <mat-label>Felhasználónév</mat-label>
+      <input matInput formControlName="username">
+    </mat-form-field>
+    <mat-form-field appearance="fill">
+      <mat-label>Jelszó</mat-label>
+      <input matInput type="password" formControlName="password">
+    </mat-form-field>
+    <button mat-button class="mat-primary" (click)="doLogin()">Bejelentkezés</button>
+    <button mat-button [routerLink]="'/register'">Regisztráció</button>
+  </form>
+</div>

client/src/app/login/login.component.ts

@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { UserService } from '../services/user.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-login',
@@ -6,5 +9,22 @@ import { Component } from '@angular/core';
   styleUrls: ['./login.component.css']
 })
 export class LoginComponent {
+  loginForm = new FormGroup({
+    username: new FormControl(),
+    password: new FormControl()
+  });
 
+  constructor(public userService: UserService, private router: Router) {
+  }
+
+
+  async doLogin() {
+    try {
+      await this.userService.login(this.loginForm.value.username, this.loginForm.value.password);
+      await this.router.navigate(['/']);
+    } catch (e: any) {
+      console.log("Hiba:", e);
+      alert("Hiba: " + (e?.error?.error ?? JSON.stringify(e)));
+    }
+  }
 }

client/src/app/product-edit/product-edit.component.ts

@@ -17,7 +17,7 @@ export class ProductEditComponent {
   })
 
   constructor(private service: ProductService, route: ActivatedRoute) {
-    service.get(route.snapshot.params['id']).subscribe(value => this.form.patchValue(value));
+    service.get(route.snapshot.params['id']).subscribe((value: Product) => this.form.patchValue(value));
   }
 
   save() {

client/src/app/product-list/product-list.component.ts

@@ -7,6 +7,7 @@ import { Product } from '../model/product.model';
 import { map } from 'rxjs/operators';
 import { Observable } from 'rxjs';
 import { FormControl, FormGroup } from '@angular/forms';
+import { UserService } from '../services/user.service';
 
 @Component({
   selector: 'app-product-list',
@@ -23,11 +24,14 @@ export class ProductListComponent implements AfterViewInit {
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'description', 'price', 'actions'];
 
-  constructor(private service: ProductService) {
+  constructor(private service: ProductService, public userService: UserService) {
     this.products = service.getList().pipe(map(value => value as Product[]));
   }
 
   ngAfterViewInit(): void {
     this.table.dataSource = this.products;
+    if (!this.userService.user) {
+      this.displayedColumns.pop(); // Műveletek elrejtése, ha nincs bejelentkezve
+    }
   }
 }

client/src/app/services/user.service.ts

@@ -26,13 +26,24 @@ export class UserService {
       const user = await firstValueFrom(this.http.get('/api/users/status'));
       this._user = user as User;
     } catch (e: any) {
-      if (e?.error?.error?.status !== 'NOTOK') {
+      if (e?.error?.status !== 'NOTOK') {
         console.log("Failed to get user:", e);
       }
       this._user = undefined;
     }
   }
 
+  async logout() {
+    try {
+      await firstValueFrom(this.http.post('/api/users/logout', {}));
+      this._user = undefined;
+      return true;
+    } catch (e: any) {
+      console.log("Failed to log out:", e);
+      return false;
+    }
+  }
+
   getList() {
     return this.http.get('/api/users')
   }

server/index.js

@@ -25,6 +25,7 @@ require('./db/bootstrapper')();
 const bodyParser = require('body-parser');
 const cookieParser = require('cookie-parser');
 const {mongo} = require("mongoose");
+const path = require("path");
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(cookieParser());
@@ -58,11 +59,12 @@ app.use(passport.session({}));
 app.use('/api/users', require('./usersRouter'))
 app.use('/api/products', require('./productsRouter'))
 
-app.use(function (req, _, next) {
+app.use(function (req, res, next) {
 	if (!req.url.startsWith('/api') && req.url.indexOf('.') === -1) {
-		req.url = '/';
+		res.sendFile(path.resolve('public', 'index.html'));
+	} else {
+		next();
 	}
-	next();
 })
 
 app.use('', express.static('public'))

server/productsRouter.js

@@ -24,9 +24,6 @@ async function getProduct(req, res, next) {
 
 // GET /products - összes termék lekérdezése
 router.get('/', async (req, res) => {
-	if (!req.isAuthenticated()) {
-		return res.status(403).json({ message: "Unauthenticated" });
-	}
 	try {
 		const products = await Product.find();
 		res.status(200).json(products.map(product => getProductData(product)));

server/usersRouter.js

@@ -31,10 +31,10 @@ router.route('/logout').post((req, res) => {
 				console.log('Hiba a kijelentkezés során');
 				return res.status(500).send(err)
 			}
-			return res.status(200).send('Kijelentkezes sikeres');
+			return res.status(200).json({status: 'OK'});
 		});
 	} else {
-		return res.status(403).send('Nem is volt bejelentkezve');
+		return res.status(403).json({status: 'NOTOK'});
 	}
 })