diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts index 9cd0f60..1e4d223 100644 --- a/client/src/app/app-routing.module.ts +++ b/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; }; diff --git a/client/src/app/app.component.css b/client/src/app/app.component.css index 7af9c72..4a8083c 100644 --- a/client/src/app/app.component.css +++ b/client/src/app/app.component.css @@ -3,3 +3,7 @@ flex-direction: column; align-items: flex-start; } + +.loginbox { + margin: 20px; +} diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index 5c7a084..d130a01 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -1,24 +1,14 @@ -
+
Üdv {{ userService.user.username }} -
- - -
+ + +
-
- - Felhasználónév - - - - Jelszó - - - - -
+ + +
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 294d699..65789ab 100644 --- a/client/src/app/app.component.ts +++ b/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() { - } } diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 669674a..450df8e 100644 --- a/client/src/app/app.module.ts +++ b/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] }) diff --git a/client/src/app/auth-check.ts b/client/src/app/auth-check.ts deleted file mode 100644 index 6cc568c..0000000 --- a/client/src/app/auth-check.ts +++ /dev/null @@ -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; - } -} diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html index ef9f337..49430ee 100644 --- a/client/src/app/login/login.component.html +++ b/client/src/app/login/login.component.html @@ -1 +1,14 @@ -

Jelentkezz be

+
+
+ + Felhasználónév + + + + Jelszó + + + + +
+
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts index 80a60e8..d08992f 100644 --- a/client/src/app/login/login.component.ts +++ b/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))); + } + } } diff --git a/client/src/app/product-edit/product-edit.component.ts b/client/src/app/product-edit/product-edit.component.ts index 62c336c..b4eeb03 100644 --- a/client/src/app/product-edit/product-edit.component.ts +++ b/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() { diff --git a/client/src/app/product-list/product-list.component.ts b/client/src/app/product-list/product-list.component.ts index 90bf51f..2f866cc 100644 --- a/client/src/app/product-list/product-list.component.ts +++ b/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 + } } } diff --git a/client/src/app/services/user.service.ts b/client/src/app/services/user.service.ts index b8ca3de..885fae9 100644 --- a/client/src/app/services/user.service.ts +++ b/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') } diff --git a/server/index.js b/server/index.js index 59e53d0..b00598e 100644 --- a/server/index.js +++ b/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')) diff --git a/server/productsRouter.js b/server/productsRouter.js index a06b50c..608c67d 100644 --- a/server/productsRouter.js +++ b/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))); diff --git a/server/usersRouter.js b/server/usersRouter.js index a9eb1d3..fb79a53 100644 --- a/server/usersRouter.js +++ b/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'}); } })