File

src/app/login/login.component.ts

Metadata

Index

Properties
Methods
Accessors

Constructor

constructor(http: HttpClient, authService: AuthService, router: Router)
Parameters :
Name Type Optional
http HttpClient No
authService AuthService No
router Router No

Methods

login
login()
Returns : void

Properties

Private _isLoggedIn
Type : boolean
Default value : false
password
Type : string | any
restaurants
Type : Restaurant[] | any
role
Type : string | any
userId
Type : string
username
Type : string | any

Accessors

isLoggedIn
getisLoggedIn()
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;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""