Ciao ragazzi,
ho un problema con un progetto collegato ad una database SQL. Ho una home page con un form di login. Dopo aver inserito le credenziali (username/password presenti nel DB) e aver premuto il pulsante login, il sito dovrebbe mostrare la pagina di benvenuto (ma in realtà questo non avviene). In alto però l'URL viene cambiato
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML Login Page with Bootstrap Example</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Muli'>
<link rel="stylesheet" href="./styles.css">
</head>
<body background="assets/images/teatro.png">
<div class="pt-5">
<div class="container">
<div class="row">
<div class="col-md-5 mx-auto">
<div class="card card-body">
<form id="f" action="/login" data-parsley-validate="" data-parsley-errors-messages-disabled="true" novalidate="" _lpchecked="1"><input type="hidden" name="_csrf" value="7635eb83-1f95-4b32-8788-abec2724a9a4">
<div class="form-group required">
<lSabel for="username">USERNAME</lSabel>
<input type="text" class="form-control text-lowercase" id="username" required="" name="username" value="" placeholder="username">
</div>
<div class="form-group required">
<label class="d-flex flex-row align-items-center" for="password">PASSWORD</label>
<a class="ml-auto border-link small-xl"></a></label>
<input type="password" class="form-control" required="" id="password" name="password" value="" placeholder="password">
</div>
<div class="form-group pt-1">
<button type="submit" (click)="login(f)">Login</button>
<button type="submit">Sign Up</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
admin.dashboard-component.html
Questa sotto è la pagina che dovrebbe mostrare
<div class= "container">
<h1 style="text-align: center">Benvenuto {{user.username}}</h1>
<p>
Benvenuto utente
</p>
</div>
login.component.html
<div class="pt-5">
<div class="container">
<div class="row">
<div class="col-md-5 mx-auto">
<div class="card card-body">
<form id="submitForm" action="/login" data-parsley-validate="" data-parsley-errors-messages-disabled="true" novalidate="" _lpchecked="1"><input type="hidden" name="_csrf" value="7635eb83-1f95-4b32-8788-abec2724a9a4">
<div class="form-group required">
<lSabel for="username">USERNAME</lSabel>
<input type="text" class="form-control text-lowercase" id="username" required="" name="username" value="" placeholder="username">
</div>
<div class="form-group required">
<label class="d-flex flex-row align-items-center" for="password">PASSWORD</label>
<a class="ml-auto border-link small-xl"></a></label>
<input type="password" class="form-control" required="" id="password" name="password" value="" placeholder="password">
</div>
<div class="form-group pt-1">
<button type="submit" (click)="login(f)">Login</button>
<button type="submit">Sign Up</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
login.component.ts
import { Component, OnInit } from '@angular/core';
import { LoginDTO } from 'src/dto/logindto';
import { NgForm } from '@angular/forms';
import { UserService } from 'src/service/user.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
loginDTO: LoginDTO;
constructor(private service: UserService, private router: Router) { }
ngOnInit() {
}
login(f: NgForm): void {
this.loginDTO = new LoginDTO(f.value.username, f.value.password);
this.service.login(this.loginDTO).subscribe((user) => {
if (user != null) {
localStorage.setItem('currentUser', JSON.stringify(user));
switch (user.usertype.toString()) {
case 'ADMIN': {
this.router.navigate(['/admin-dashboard']);
break;
}
case 'USER': {
this.router.navigate(['/user-dashboard']);
break;
}
default:
this.router.navigate(['/login']);
}
}
});
}
}