Regisztráció, termékszerkesztés fix, DB hook fix
This commit is contained in:
parent
91f599645b
commit
2a472f66cd
11 changed files with 83 additions and 14 deletions
|
@ -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:
|
A projekt mappájában adjuk ki a következő parancsokat:
|
||||||
```bash
|
```bash
|
||||||
cd frontend
|
cd client
|
||||||
npm install
|
npm install
|
||||||
npm run build
|
npm run build
|
||||||
cd ../backend
|
cd ../server
|
||||||
npm install
|
npm install
|
||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
@ -30,8 +30,8 @@ Bejelentkezés után választhatunk a terméklista és a felhasználólista köz
|
||||||
Fontos pontok:
|
Fontos pontok:
|
||||||
* Statikus hosztolás: eleve jó helyre buildelődik a frontend
|
* Statikus hosztolás: eleve jó helyre buildelődik a frontend
|
||||||
* Adatbázis: órai felépités
|
* 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
|
* 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
|
* Service-eken keresztül kommunikál a backenddel
|
||||||
* Van auth guard
|
* Van auth guard
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { Component } from '@angular/core';
|
||||||
import { ProductService } from '../services/product.service';
|
import { ProductService } from '../services/product.service';
|
||||||
import { Product } from '../model/product.model';
|
import { Product } from '../model/product.model';
|
||||||
import { ActivatedRoute } from '@angular/router';
|
import { ActivatedRoute } from '@angular/router';
|
||||||
import { flatMap, mergeMap, Observable } from 'rxjs';
|
import { firstValueFrom, flatMap, mergeMap, Observable } from 'rxjs';
|
||||||
import { map } from 'rxjs/operators';
|
import { map } from 'rxjs/operators';
|
||||||
import { FormControl, FormGroup } from '@angular/forms';
|
import { FormControl, FormGroup } from '@angular/forms';
|
||||||
|
|
||||||
|
@ -14,13 +14,19 @@ import { FormControl, FormGroup } from '@angular/forms';
|
||||||
export class ProductEditComponent {
|
export class ProductEditComponent {
|
||||||
form = new FormGroup({
|
form = new FormGroup({
|
||||||
name: new FormControl()
|
name: new FormControl()
|
||||||
})
|
});
|
||||||
|
|
||||||
|
product: Product | undefined;
|
||||||
|
|
||||||
constructor(private service: ProductService, route: ActivatedRoute) {
|
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,6 +15,11 @@
|
||||||
<td mat-cell *matCellDef="let row">{{row.price}}</td>
|
<td mat-cell *matCellDef="let row">{{row.price}}</td>
|
||||||
</ng-container>
|
</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">
|
<ng-container matColumnDef="actions">
|
||||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Műveletek</th>
|
<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>
|
<td mat-cell *matCellDef="let row"><button mat-button [routerLink]="['/', row._id]">Szerkesztés</button></td>
|
||||||
|
|
|
@ -22,7 +22,7 @@ export class ProductListComponent implements AfterViewInit {
|
||||||
products: Observable<Product[]>
|
products: Observable<Product[]>
|
||||||
|
|
||||||
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
|
/** 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) {
|
constructor(private service: ProductService, public userService: UserService) {
|
||||||
this.products = service.getList().pipe(map(value => value as Product[]));
|
this.products = service.getList().pipe(map(value => value as Product[]));
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
import { FormControl, FormGroup } from '@angular/forms';
|
||||||
|
import { UserService } from '../services/user.service';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-register',
|
selector: 'app-register',
|
||||||
|
@ -6,5 +9,18 @@ import { Component } from '@angular/core';
|
||||||
styleUrls: ['./register.component.css']
|
styleUrls: ['./register.component.css']
|
||||||
})
|
})
|
||||||
export class RegisterComponent {
|
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(['/']);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,7 +15,7 @@ export class ProductService {
|
||||||
}
|
}
|
||||||
|
|
||||||
edit(data: Product) {
|
edit(data: Product) {
|
||||||
return this.http.patch('/api/products/' + data.id, data);
|
return this.http.patch('/api/products/' + data._id, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
get(id: string) {
|
get(id: string) {
|
||||||
|
|
|
@ -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() {
|
getList() {
|
||||||
return this.http.get('/api/users')
|
return this.http.get('/api/users')
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,12 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<project version="4">
|
<project version="4">
|
||||||
|
<component name="GitSharedSettings">
|
||||||
|
<option name="FORCE_PUSH_PROHIBITED_PATTERNS">
|
||||||
|
<list>
|
||||||
|
<option value="main" />
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
</component>
|
||||||
<component name="VcsDirectoryMappings">
|
<component name="VcsDirectoryMappings">
|
||||||
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
|
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
|
||||||
</component>
|
</component>
|
||||||
|
|
|
@ -26,7 +26,7 @@ const productSchema = new mongoose.Schema({
|
||||||
productSchema.pre('save', function(next) {
|
productSchema.pre('save', function(next) {
|
||||||
const product = this;
|
const product = this;
|
||||||
if(product.isModified('name')) {
|
if(product.isModified('name')) {
|
||||||
product.name = product.name.replaceAll(/[ !?$.,-]/g, '');
|
product.id = product.name.replaceAll(/[ !?$.,-]/g, '').toLowerCase();
|
||||||
}
|
}
|
||||||
return next();
|
return next();
|
||||||
});
|
});
|
||||||
|
|
|
@ -36,7 +36,23 @@ router.route('/logout').post((req, res) => {
|
||||||
} else {
|
} else {
|
||||||
return res.status(403).json({status: 'NOTOK'});
|
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) => {
|
router.route('/status').get((req, res) => {
|
||||||
if (req.isAuthenticated()) {
|
if (req.isAuthenticated()) {
|
||||||
|
|
Loading…
Reference in a new issue