Add register function and logout

This commit is contained in:
2023-05-05 10:26:30 +02:00
parent 3a87d41068
commit 6f72e3e6e7
5 changed files with 54 additions and 40 deletions

View File

@@ -1 +1,2 @@
<button (click)="clearAllCookies()">Logout</button>
<router-outlet></router-outlet> <router-outlet></router-outlet>

View File

@@ -1,4 +1,6 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {CookieService} from "ngx-cookie-service";
import {Router} from "@angular/router";
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@@ -7,4 +9,19 @@ import { Component } from '@angular/core';
}) })
export class AppComponent { export class AppComponent {
title = 'm-152'; title = 'm-152';
constructor(
private cookieService: CookieService,
private router: Router,
) {
}
clearAllCookies() {
const allCookies = this.cookieService.getAll();
for (const cookieName in allCookies) {
this.cookieService.delete(cookieName);
}
this.router.navigate(['/login']);
}
} }

View File

@@ -1,57 +1,44 @@
<div class="h-screen w-screen flex items-center justify-center"> <div class="h-screen w-screen flex items-center justify-center">
<div class="max-w-md py-12"> <div class="max-w-md py-12">
<div class="bg-white px-6 py-8 rounded-lg shadow-md w-[400px]" *ngIf="login"> <div class="bg-white px-6 py-8 rounded-lg shadow-md w-[400px]">
<h2 class="text-center text-2xl font-bold mb-8">Accedi</h2> <h2 *ngIf="login" class="text-center text-2xl font-bold mb-8">Accedi</h2>
<h2 *ngIf="!login" class="text-center text-2xl font-bold mb-8">Registrati</h2>
<form> <form (submit)="submit()">
<div class="mb-4"> <div class="mb-4">
<label for="email" class="block text-gray-700 font-bold mb-2">Email:</label> <label for="email" class="block text-gray-700 font-bold mb-2">Username</label>
<input type="email" id="email" name="email" placeholder="Inserisci username" <input type="text" id="email" name="email" placeholder="Inserisci username"
class="w-full px-4 py-2 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"> class="w-full px-4 py-2 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
[(ngModel)]="newUser.username">
</div> </div>
<div class="mb-4"> <div class="mb-4">
<label for="password" class="block text-gray-700 font-bold mb-2">Password:</label> <label for="password" class="block text-gray-700 font-bold mb-2">Password:</label>
<input type="password" id="password" name="password" placeholder="Inserisci la tua password" <input type="password" id="password" name="password" placeholder="Inserisci la tua password"
class="w-full px-4 py-2 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"> class="w-full px-4 py-2 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
[(ngModel)]="newUser.password">
</div> </div>
<div class="mb-4"> <div class="mb-4">
<button type="submit" class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary py-2 w-full">Accedi</button> <button type="submit" class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary py-2 w-full">
<span *ngIf="login">Accedi</span>
<span *ngIf="!login">Registrati</span>
</button>
</div> </div>
</form> </form>
</div>
<div class="bg-white px-6 py-8 rounded-lg shadow-md w-[400px]" *ngIf="!login"> <a (click)="switch()">
<span *ngIf="login">Register</span>
<h2 class="text-center text-2xl font-bold mb-8">Registrati</h2> <span *ngIf="!login">Login</span>
</a>
<form>
<div class="mb-4">
<label for="emails" class="block text-gray-700 font-bold mb-2">Email:</label>
<input type="emails" id="emails" name="email" placeholder="Inserisci username"
class="w-full px-4 py-2 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent">
</div>
<div class="mb-4">
<label for="passwords" class="block text-gray-700 font-bold mb-2">Password:</label>
<input type="passwords" id="passwords" name="password" placeholder="Inserisci la tua password"
class="w-full px-4 py-2 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent">
</div>
<div class="mb-4">
<button type="submit" class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary py-2 w-full">Accedi</button>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -30,23 +30,22 @@ export class LoginComponent implements OnInit {
} }
ngOnInit(): void { ngOnInit(): void {
if (this.cookieService.getUsername() != null) {
this.router.navigate(['/home']);
}
} }
createNewUser(username: string, password: string) { createNewUser(createUser: UserEntity) {
console.log(createUser.username+" "+createUser.password);
this.userService.getUsers().subscribe(users => { this.userService.getUsers().subscribe(users => {
this.users = users; this.users = users;
for (let i = 0; i < this.users.length; i++) { for (let i = 0; i < this.users.length; i++) {
if (this.users[i].username == username) { if (this.users[i].username == createUser.username) {
this.errorCreateUser = true; this.errorCreateUser = true;
} }
} }
this.newUser.username = username; this.newUser.username = createUser.username;
this.newUser.password = password; this.newUser.password = createUser.password;
this.userService.createUser(this.newUser).subscribe(user => { this.userService.createUser(this.newUser).subscribe(user => {
this.cookieService.setUsername(username); this.cookieService.setUsername(createUser.username);
this.router.navigate(['/management']); this.router.navigate(['/management']);
}); });
}); });
@@ -63,6 +62,14 @@ export class LoginComponent implements OnInit {
}); });
} }
submit() {
if (this.login) {
this.loginFunction(this.newUser.username, this.newUser.password);
} else {
this.createNewUser(this.newUser);
}
}
switch() { switch() {
if (this.login) { if (this.login) {
this.login = false; this.login = false;

View File

@@ -30,7 +30,9 @@ export class UserService {
} }
createUser(user: UserEntity) { createUser(user: UserEntity) {
console.log("create "+user);
return this.http.post<UserEntity>(USER, user); return this.http.post<UserEntity>(USER, user);
} }
updateUser(user: UserEntity, id: number) { updateUser(user: UserEntity, id: number) {