feat:

- api service conected
- method post in login component
- login and response interfaces

burguer-queen/src/app/app.module.ts

@@ -5,6 +5,7 @@ import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
 import { MenuComponent } from './menu/menu.component';
 import { ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http'
 
 @NgModule({
   declarations: [
@@ -16,6 +17,7 @@ import { ReactiveFormsModule } from '@angular/forms';
     BrowserModule,
     AppRoutingModule,
     ReactiveFormsModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

burguer-queen/src/app/interfaces/login.interface.ts

@@ -0,0 +1,4 @@
+export interface LoginI {
+  email: string;
+  password: string;
+}

burguer-queen/src/app/interfaces/response.interface.ts

@@ -0,0 +1,4 @@
+export interface ResponseI {
+  status: string;
+  response: string;
+}

burguer-queen/src/app/login/login.component.html

@@ -5,12 +5,13 @@
     </div>
 
     <div class="col-md-6 col-lg-6" style="margin-top: 80px;">
-      <form [formGroup]="formLogin"
+      <!-- Cómo colocarlo sin necesidad de definir parámetro -->
+      <form [formGroup]="formLogin" (ngSubmit)="onClickLogin(formLogin.value)"
         style="background-color: #EA8D6F; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.3);" class="p-3">
         <img src="../assets/images/bienvenido.png" alt="Welcome Image" class="img-fluid mx-auto d-block">
         <div class="form-group mt-3">
           <label for="exampleInputEmail1">Email</label>
-          <input type="email" class="form-control" formControlName="email" id="exampleInputEmail1"
+          <input type="email" class="form-control" formControlName="email" id="email" name="email"
             aria-describedby="emailHelp" placeholder="[email protected]" style="width: 100%; margin-left: 5px;">
 
           <div class="alert alert-danger mt-3 p-1" [hidden]="email.valid">
@@ -19,14 +20,14 @@
         </div>
         <div class="form-group mt-3">
           <label for="exampleInputPassword1">Contraseña</label>
-          <input type="password" class="form-control" formControlName="password" id="exampleInputPassword1"
+          <input type="password" class="form-control" formControlName="password" id="password" name="password"
             placeholder="********" style="width: 100%; margin-left: 5px;">
 
           <div class="alert alert-danger mt-3 p-1"
             [hidden]="password.valid || password.pristine"> El campo debe estar
             lleno. </div>
         </div>
-        <button type="submit" class="btn btn-warning mx-auto d-block mt-3" [disabled]="formLogin.invalid" style="background-color: #FDE293;" (click)="onClickLogin()">INICIAR
+        <button type="submit" class="btn btn-warning mx-auto d-block mt-3" [disabled]="formLogin.invalid" style="background-color: #FDE293;">INICIAR
           SESIÓN</button>
       </form>
     </div>

burguer-queen/src/app/login/login.component.ts

@@ -1,14 +1,27 @@
 import { Component } from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { LoginI } from '../interfaces/login.interface';
+import { ApiBQService } from '../services/api-bq.service';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
 export class LoginComponent {
-  onClickLogin(){
-    console.log("onClickLogin")
+
+  formLogin = new FormGroup({
+    email : new FormControl('', Validators.email),
+    password : new FormControl('',Validators.required)
+  })
+
+  constructor( private api:ApiBQService) {}
+
+  onClickLogin(form:any){ // Cómo colocarlo sin necesidad de definir parámetro
+    this.api.loginByEmail(form).subscribe(data =>{
+      console.log(data);
+
+    })
   }
 
   get email(){
@@ -18,10 +31,7 @@ export class LoginComponent {
   get password(){
     return this.formLogin.get('password') as FormControl;
   }
-formLogin = new FormGroup({
-  'email' : new FormControl('', Validators.email),
-  'password' : new FormControl('',Validators.required)
-})
+
 
 
 }

burguer-queen/src/app/services/api-bq.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiBQService } from '../services/api-bq.service';
+
+describe('ApiBQService', () => {
+  let service: ApiBQService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ApiBQService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

burguer-queen/src/app/services/api-bq.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { LoginI } from '../interfaces/login.interface';
+import { ResponseI } from '../interfaces/response.interface';
+import { HttpClient, HttpHeaders } from '@angular/common/http'
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiBQService {
+
+  url:string = "http://localhost:8080/";
+
+  constructor(private http:HttpClient) { }
+
+  loginByEmail(form: LoginI):Observable<ResponseI>{
+    let authUrl = this.url + 'login'
+    return this.http.post<ResponseI>(authUrl, form)
+  }
+}