Regisztráció, termékszerkesztés fix, DB hook fix

README.md

@@ -12,10 +12,10 @@ A projekt alapértelmezetten localhost:27017 cimen csatlakozik a MongoDB-hez, a
 
 A projekt mappájában adjuk ki a következő parancsokat:
 ```bash
-cd frontend
+cd client
 npm install
 npm run build
-cd ../backend
+cd ../server
 npm install
 npm start
 ```
@@ -30,8 +30,8 @@ Bejelentkezés után választhatunk a terméklista és a felhasználólista köz
 Fontos pontok:
 * Statikus hosztolás: eleve jó helyre buildelődik a frontend
 * Adatbázis: órai felépités
-* Adatbázis hook: jelszótitkositás és termék ID generálás
+* Adatbázis hook: jelszótitkositás és termék azonositó generálás
 * Route-ok adottak
-* Van navigáció frontenden (terméklista/felhasználólista, termék szerkesztés)
+* Van navigáció frontenden (terméklista/felhasználólista, termék szerkesztés/login/register)
 * Service-eken keresztül kommunikál a backenddel
 * Van auth guard

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

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { ProductService } from '../services/product.service';
 import { Product } from '../model/product.model';
 import { ActivatedRoute } from '@angular/router';
-import { flatMap, mergeMap, Observable } from 'rxjs';
+import { firstValueFrom, flatMap, mergeMap, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { FormControl, FormGroup } from '@angular/forms';
 
@@ -14,13 +14,19 @@ import { FormControl, FormGroup } from '@angular/forms';
 export class ProductEditComponent {
   form = new FormGroup({
     name: new FormControl()
-  })
+  });
+
+  product: Product | undefined;
 
   constructor(private service: ProductService, route: ActivatedRoute) {
-    service.get(route.snapshot.params['id']).subscribe((value: Product) => this.form.patchValue(value));
+    service.get(route.snapshot.params['id']).subscribe((value: Product) => {
+      this.form.patchValue(value);
+      this.product = value;
+    });
   }
 
-  save() {
+  async save() {
-    this.service.edit(this.form.value as Product);
+    const product = await firstValueFrom(this.service.edit({...this.product, ...this.form.value} as Product));
+    console.log("Edited product:", product);
   }
 }

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

@@ -15,6 +15,11 @@
       <td mat-cell *matCellDef="let row">{{row.price}}</td>
     </ng-container>
 
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Azonositó</th>
+      <td mat-cell *matCellDef="let row">{{row.id}}</td>
+    </ng-container>
+
     <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>Műveletek</th>
       <td mat-cell *matCellDef="let row"><button mat-button [routerLink]="['/', row._id]">Szerkesztés</button></td>

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

@@ -22,7 +22,7 @@ export class ProductListComponent implements AfterViewInit {
   products: Observable<Product[]>
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['name', 'description', 'price', 'actions'];
+  displayedColumns = ['name', 'description', 'price', 'id', 'actions'];
 
   constructor(private service: ProductService, public userService: UserService) {
     this.products = service.getList().pipe(map(value => value as Product[]));

client/src/app/register/register.component.html

@@ -1 +1,15 @@
-<p>register works!</p>
+<form [formGroup]="form">
+  <mat-form-field>
+    <mat-label>Felhasználónév</mat-label>
+    <input matInput formControlName="username">
+  </mat-form-field>
+  <mat-form-field>
+    <mat-label>Jelszó</mat-label>
+    <input matInput type="password" formControlName="password">
+  </mat-form-field>
+  <mat-form-field>
+    <mat-label>Születési dátum</mat-label>
+    <input matInput formControlName="birthdate">
+  </mat-form-field>
+  <button mat-button class="mat-primary" (click)="doRegister()">Regisztráció</button>
+</form>

client/src/app/register/register.component.ts

@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { UserService } from '../services/user.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-register',
@@ -6,5 +9,18 @@ import { Component } from '@angular/core';
   styleUrls: ['./register.component.css']
 })
 export class RegisterComponent {
+  form = new FormGroup({
+    username: new FormControl(),
+    password: new FormControl(),
+    birthdate: new FormControl()
+  });
 
+  constructor(private userService: UserService, private router: Router) {
+  }
+
+  async doRegister() {
+    const val = this.form.value;
+    await this.userService.register(val.username, val.password, val.birthdate);
+    await this.router.navigate(['/']);
+  }
 }

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

@@ -15,7 +15,7 @@ export class ProductService {
   }
 
   edit(data: Product) {
-    return this.http.patch('/api/products/' + data.id, data);
+    return this.http.patch('/api/products/' + data._id, data);
   }
 
   get(id: string) {

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

@@ -44,6 +44,11 @@ export class UserService {
     }
   }
 
+  async register(username: string, password: string, birthdate: string) {
+    const user = await firstValueFrom(this.http.post('/api/users/register', {username, password, birthdate}));
+    console.log("Registered user:", user);
+  }
+
   getList() {
     return this.http.get('/api/users')
   }

server/.idea/vcs.xml

@@ -1,5 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="GitSharedSettings">
+    <option name="FORCE_PUSH_PROHIBITED_PATTERNS">
+      <list>
+        <option value="main" />
+      </list>
+    </option>
+  </component>
   <component name="VcsDirectoryMappings">
     <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
   </component>

server/db/productSchema.js

@@ -26,7 +26,7 @@ const productSchema = new mongoose.Schema({
 productSchema.pre('save', function(next) {
 	const product = this;
 	if(product.isModified('name')) {
-		product.name = product.name.replaceAll(/[ !?$.,-]/g, '');
+		product.id = product.name.replaceAll(/[ !?$.,-]/g, '').toLowerCase();
 	}
 	return next();
 });

server/usersRouter.js

@@ -36,7 +36,23 @@ router.route('/logout').post((req, res) => {
 	} else {
 		return res.status(403).json({status: 'NOTOK'});
 	}
-})
+});
+
+router.route('/register').post(async (req, res) => {
+	const user = new User({
+		username: req.body.username,
+		password: req.body.password,
+		accessLevel: 1,
+		birthdate: req.body.birthdate,
+	});
+
+	try {
+		const newUser = await user.save();
+		res.status(201).json(newUser);
+	} catch (error) {
+		res.status(400).json({ message: error.message });
+	}
+});
 
 router.route('/status').get((req, res) => {
 	if (req.isAuthenticated()) {