package com.central.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import com.central.model.Users;
import com.central.repository.UsersRepository;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

@RestController
public class WebController
    {
    private static final String NULL = null;
    @Autowired
        UsersRepository userRepo;

        @CrossOrigin(origins = "http://localhost:4200")
        @RequestMapping("/checkUsers")
        public String checkLogin() throws JsonProcessingException {

            ObjectMapper mapper = new ObjectMapper();
            List<Users> useObj = (List<Users>) userRepo.findAll();
            return(mapper.writeValueAsString(useObj));
        }

        @CrossOrigin(origins = "http://localhost:4200")
        @RequestMapping(value = "/checkByCredential", method = RequestMethod.POST)
        public String checkLoginByName(@RequestBody Users user) throws Exception{

            ObjectMapper mapper = new ObjectMapper();
            Users useObj1 = userRepo.findByUsernameAndPassword(user.username,user.password);
            return(mapper.writeValueAsString(useObj1));
        }}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { BasicService } from './basic.service';


@NgModule({

  declarations  : [ AppComponent],
  imports       : [BrowserModule,HttpModule,FormsModule ],
  providers     : [BasicService],
  bootstrap     : [AppComponent]

})

export class AppModule { }

import { Component } from '@angular/core';
import { BasicService } from './basic.service';

@Component({
  selector: 'app-root',
  template: `<h1>{{ title }}</h1>
            <div style="margin-left:50px; height: 200px; overflow: auto;">
             <table>
                 <tr><td>Username</td>&emsp;&emsp;<td>Password</td></tr>
                 <tr *ngFor= " let item of data">
             <td>{{ item.username }}</td>&emsp;&emsp;<td>{{ item.password }}</td>
             </tr>
             </table>
            </div>


  <h2>Login</h2>
    <form role="form">
      <div ng-control-group="credentials">
        <label for="username">Username</label>
        <input
          type="text"
          #username
          id="username"
          ng-control="username"
          required>

        <label for="password">Password</label>
        <input
          type="password"
          #password
          id="password"
          ng-control="password"
          required>
      </div>
      <button (click)="checkByCredential(username,password)">Login</button>
    </form>`
})


export class AppComponent {
  title :string;
  data:any;


  constructor(private MyService: BasicService){
  this.title="Angular Service";

  this.MyService.GetUsers()
 .subscribe(users => {this.data=users });
 }

 checkByCredential(username: string, password: string) {
 this.MyService.checkByCredential(username, password).subscribe(users => {this.data=users });
  }
}

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class BasicService {
constructor(private http:Http) { }


GetUsers(){
  return this.http.get('http://localhost:8080/checkUsers')
    .map(result => result.json());
           }


 checkByCredential(username: string, password: string) {
 const user = { username: username, password: password };
 return this.http
    .post('http://localhost:8080/checkByCredential', user)
    .map(result => result.json());
  } }