task Login

src/app/+login/data-access/Services/ApiService.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+
+  private apiUrl = 'http://localhost:3000/login';
+
+  constructor(private http: HttpClient) {}
+
+  login(username: string, password: string): Observable<any> {
+    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+    const body = { username, password };
+
+    return this.http.post<any>(this.apiUrl, body, { headers });
+  }
+}

src/app/+login/feature/login.component.html

+<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="tw-max-w-md tw-mx-auto tw-bg-white tw-p-8 tw-shadow-md tw-rounded-lg">
+  <div class="tw-text-50px tw-font-bold tw-pb-10 tw-mx-auto tw-text-center">Login</div>
+
+  <div class="tw-mb-4">
+    <label for="username" class="tw-block tw-text-gray-700 tw-font-bold tw-mb-2">Username</label>
+    <input id="username" type="text" formControlName="username" class="tw-shadow tw-appearance-none tw-border tw-rounded tw-w-full tw-py-2 tw-px-3 tw-text-gray-700 leading-tight focus:tw-outline-none">
+    <div *ngIf="loginForm.get('username')?.invalid && loginForm.get('username')?.touched"  class=" tw-text-xs tw-mt-2 text-error">
+      Username is required.
+    </div>
+  </div>
+
+  <div class="tw-mb-6">
+    <label for="password" class="tw-block tw-text-gray-700 tw-font-bold tw-mb-2">Password</label>
+    <input id="password" type="password" formControlName="password" class="tw-shadow tw-appearance-none tw-border tw-rounded tw-w-full tw-py-2 tw-px-3 tw-text-gray-700 leading-tight focus:tw-outline-none">
+    <div *ngIf="loginForm.get('password')?.invalid && loginForm.get('password')?.touched" class="tw-text-xs tw-mt-2 text-error">
+      Password must be at least 6 characters long.
+    </div>
+  </div>
+
+  <div class="tw-flex tw-items-center tw-justify-between tw-mb-4">
+    <a routerLink="/#" class="tw-inline-block tw-align-baseline tw-font-bold tw-text-sm tw-text-blue-500 hover:tw-text-blue-800">
+      Forgot password?
+    </a>
+  </div>
+
+  <div>
+    <button class="tw-bg-blue-500 tw-text-white tw-font-bold tw-py-2 tw-px-4 tw-rounded focus:tw-outline-none focus:tw-shadow-outline tw-w-full" type="submit" [disabled]="loginForm.invalid">Login</button>
+  </div>
+  <div class="tw-text-center tw-mt-4">
+    <a routerLink="/#" class="tw-text-sm tw-text-blue-500 hover:tw-text-blue-800">Register now!</a>
+  </div>
+
+</form>

src/app/+login/feature/login.component.scss

+.form-container {
+  max-width: 400px;
+  margin: auto;
+  padding: 20px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+button {
+  background-color: #1D4ED8; /* Tailwind's blue-500 */
+  color: white;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 4px;
+  width: 100%;
+  cursor: pointer;
+  font-size: 16px;
+}
+.error-message{
+  color: red;
+}

src/app/+login/feature/login.component.ts

 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { CommonModule } from '@angular/common';
-
+import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { catchError, Observable } from 'rxjs';
+import { AuthService } from '../data-access/Services/ApiService.service';
+import { response } from 'express';
 @Component({
   selector: 'meu-login',
   standalone: true,
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss'],
-  imports: [CommonModule],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoginComponent implements OnInit {
-  constructor() {}
-
+  loginForm: FormGroup;
+  constructor(private fb: FormBuilder, private authService: AuthService) {
+    this.loginForm = this.fb.group({
+      username: ['', [Validators.required]],
+      password: ['', [Validators.required]],
+    });
+  }
   ngOnInit() {}
+  onSubmit() {
+    const headers  = new HttpHeaders()
+    if (!this.loginForm.valid) {
+      alert('vui lòng nhập đầy đủ thông tin');
+      return;
+    }
+    console.log(this.loginForm.value.username, this.loginForm.value.password);
+
+    this.authService.login(this.loginForm.value.username, this.loginForm.value.password).pipe(
+      catchError((error) => {
+        console.log(error);
+        throw error;
+      })
+    ).subscribe(
+      response => {
+        alert(response.message);
+      }
+    );
+  }
 }