Final project - ASP-Web-API-Angular-4-6

Angular 4/6 Frontend - &BackEnd Asp.Net Web API Car Rental

Image upload and some other small issues are not finalized....

Login

       localStorage.setItem(this.TOKEN_KEY, authResponse.token)
         localStorage.setItem(this.NAME_KEY, authResponse.userName )
         localStorage.setItem(this.ADMIN_Key, authResponse.userTypeID)
        this.router.navigate(['/']);
     }
     private handleError(error) {
        console.error(error);
        this.toastr.error(error, 'close');
    }
    C#
    namespace CarRental_BackEnd.Controllers

{ public class JwtPacket { public string Token { get; set; } public string UserName { get; set; } }

public class LoginData
{
    public string UserName { get; set; }
    public string Password { get; set; }
}

[EnableCors("*", "*", "*")]
[RoutePrefix("api/auth")]
public class AccController : ApiController
{
    private readonly CarRentalEntities db = new CarRentalEntities();
    //UserManager um = new UserManager();
    [HttpPost]
    [Route("register")]
    public JwtPacket Register([FromBody]User user)
    {
        User newuser = db.Users.Where(a => a.UserName == user.UserName).FirstOrDefault();
        if (newuser != null)
        {
            throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.NotFound));
        }
        var jwt = new JwtSecurityToken();
        var encodedJwt = new JwtSecurityTokenHandler().WriteToken(jwt);
        //var x = um.AddUser(user);
        db.Users.Add(user);
        db.SaveChanges();

        return CreateJwtPacket(user);
        //return new JwtPacket() { Token = encodedJwt, UserName=user.UserName};
    }
    [HttpPost]
    [Route("login")]
    public IHttpActionResult Login([FromBody] LoginData loginData)
    {
        User user = db.Users.SingleOrDefault(u => u.UserName == loginData.UserName && u.Password == loginData.Password);

        if (user == null)
            return Content(HttpStatusCode.NotFound, "email or password incorrect");

        return Ok(CreateJwtPacket(user));
    }
    JwtPacket CreateJwtPacket(User user)
    {
        var signingKey = new SymmetricSecurityKey(Encoding.ASCII.GetBytes("this is the secret phrase"));

        var signingCredentials = new SigningCredentials(signingKey, SecurityAlgorithms.HmacSha256);

        var claims = new Claim[]
          {
            new Claim(JwtRegisteredClaimNames.Sub, user.UserName)
          };
        var jwt = new JwtSecurityToken(claims: claims, signingCredentials: signingCredentials);

        //var jwt = new JwtSecurityToken();
        var encodedJwt = new JwtSecurityTokenHandler().WriteToken(jwt);

        return new JwtPacket() { Token = encodedJwt, UserName = user.UserName};

    }
}

Pipe search

 transform(items: any[], field:string): any[] {
    if (!field || !field) {
        return items;
    }
    return items.filter(singleItem =>singleItem.model.toLowerCase().indexOf(field.toLowerCase())!==-1);  }

#Using Router-

viewDetail(id){ this.router.navigate(['order-list', id]); }

#To mirror selected car detail to a form

showForEdit(car: Cars){ this.carService.selectedCar=Object.assign({}, car); }

Show for Edit & Delete

Add Users, Branchs, Cars..

Using: import { ToastrService } from 'ngx-toastr'

onDelete(id, car:Cars){
    var ans = confirm("Are you sure to delete car with Id: " + id);
    if(ans){
      this.carService.deleteCars(id)
          .subscribe(  data=> {
            var index = this.cars.findIndex(x=>x.id == car.carID);
            this.cars.splice(index, 1);
            this.toastr.warning("Deleted Successfully");
            this.carService.getCarList();
          }, error=> this.errorMessage = error )
    }
  }