src/app/login/login.component.ts
selector | app-login |
styleUrls | ./login.component.css |
templateUrl | ./login.component.html |
Properties |
|
Methods |
Accessors |
constructor(http: HttpClient, authService: AuthService, router: Router)
|
||||||||||||
Defined in src/app/login/login.component.ts:29
|
||||||||||||
Parameters :
|
login |
login()
|
Defined in src/app/login/login.component.ts:47
|
Returns :
void
|
Private _isLoggedIn |
Type : boolean
|
Default value : false
|
Defined in src/app/login/login.component.ts:27
|
password |
Type : string | any
|
Defined in src/app/login/login.component.ts:21
|
restaurants |
Type : Restaurant[] | any
|
Defined in src/app/login/login.component.ts:29
|
role |
Type : string | any
|
Defined in src/app/login/login.component.ts:22
|
userId |
Type : string
|
Defined in src/app/login/login.component.ts:23
|
username |
Type : string | any
|
Defined in src/app/login/login.component.ts:20
|
isLoggedIn |
getisLoggedIn()
|
Defined in src/app/login/login.component.ts:141
|
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';
interface Restaurant {
_id: string;
name: string;
owner: string;
}
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
username: string |any;
password: string |any;
role: string |any;
userId!:string;
private _isLoggedIn: boolean = false; // private backing field for isLoggedIn
restaurants: Restaurant[]|any;
constructor(private http: HttpClient,private authService: AuthService,private router: Router) {
if (this.authService.isLoggedIn()) {
this._isLoggedIn = true;
this.authService.getRestaurants().subscribe(
(restaurants) => {
this.restaurants = restaurants;
},
(error) => {
console.log(error);
}
);
}
}
login() {
console.log(this.username);
console.log(this.role);
console.log(this.password);
this.authService.login(this.username, this.password, this.role).subscribe(
(response: any) => {
// set token received from server
this.authService.setToken(response.token);
localStorage.setItem('role', this.role); // store usertype in localStorage
localStorage.setItem('password', this.password); // store usertype in localStorage
localStorage.setItem('username', this.username); // store usertype in localStorage
this.userId = response.user._id; // Set the userId from the response
console.log('herrrrr',this.userId)
this._isLoggedIn = true; // modify the private backing field
this.authService.getRestaurants().subscribe(
(restaurants) => {
this.restaurants = restaurants;
},
(error) => {
console.log(error);
}
);
this.authService.setUserId(this.userId);
alert(`Welcome to HungryHub ${this.username}!`);
// location.href = "/";
this.router.navigate(['/']);
},
(error) => {
this.router.navigate(['/login']);
console.log(error);
alert('Invalid Username or Password or Usertype Failed!');
}
);
}
// login() {
// console.log(this.userId);
// console.log(this.username);
// console.log(this.role);
// console.log(this.password);
// this.authService.login(this.userId, this.username, this.password, this.role).subscribe(
// (response: any) => {
// // set token received from server
// this.authService.setToken(response.token);
// localStorage.setItem('role', this.role); // store usertype in localStorage
// localStorage.setItem('password', this.password); // store usertype in localStorage
// localStorage.setItem('username', this.username); // store usertype in localStorage
// this._isLoggedIn = true; // modify the private backing field
// this.authService.getRestaurants().subscribe(
// (restaurants) => {this.restaurants = restaurants;},
// (error) => {console.log(error);}
// );
// // window.location.reload();
// alert(`Welcome to HungryHub ${this.username}!`);
// location.href = "/";
// // this.router.navigate(['/']); // navigate to the jobs page
// },
// (error) => {
// this.router.navigate(['/login']);
// console.log(error);
// alert('Invalid Username or Password or Usertype Failed! ');
// }
// );
// // const userData = {
// // username: this.username,
// // password: this.password,
// // role: this.role
// // };
// // this.http.post<any>('http://localhost:3000/login', userData)
// // .subscribe(
// // response => {
// // // Handle successful login
// // console.log('Login successful:', response);
// // // You can store the user information or token in the local storage or a service for future use
// // },
// // error => {
// // // Handle login error
// // console.error('Login failed:', error);
// // }
// // );
// }
get isLoggedIn() {
return this._isLoggedIn; // return the private backing field
}
}
<div class="container d-flex align-items-center vh-100">
<div class="row justify-content-center">
<div class="col-md-6">
<img src="../../assets/undraw_barbecue_3x93.svg" alt="Image" class="img-fluid">
</div>
<div class="col-md-6">
<div class="login-container p-4">
<h2 class="stylish-heading">Login to HungryHub and experience food paradise!</h2>
<form (ngSubmit)="login()" class="mt-4">
<div class="form-group">
<label for="username"><i class="bi bi-person-fill"></i> Username</label>
<input type="text" id="username" name="username" [(ngModel)]="username" class="form-control" required>
</div>
<div class="form-group">
<label for="password"><i class="bi bi-lock-fill"></i> Password</label>
<input type="password" id="password" name="password" [(ngModel)]="password" class="form-control" required>
</div>
<div class="form-group">
<label for="role"><i class="bi bi-people-fill"></i> Role</label>
<select id="role" name="role" [(ngModel)]="role" class="form-control" required>
<option value="seller">Seller</option>
<option value="customer">Customer</option>
</select>
</div>
<button type="submit" class="btn btn-primary"><i class="bi bi-box-arrow-in-right"></i> Login</button>
</form>
</div>
</div>
</div>
</div>
./login.component.css
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-container h2 {
text-align: center;
margin-bottom: 20px;
}
.login-container form {
display: flex;
flex-direction: column;
}
.login-container .form-group {
margin-bottom: 20px;
}
.login-container label {
font-weight: bold;
}
.login-container input,
.login-container select {
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.login-container button[type="submit"] {
padding: 10px 20px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
.login-container button[type="submit"]:hover {
background-color: #0069d9;
}