feature: user can login to backend

.oxfmtrc.json

@@ -0,0 +1,3 @@
+{
+  "ignorePatterns": ["backend/**", "*.min.js"]
+}

src/app/app.config.ts

@@ -2,7 +2,13 @@ import { ApplicationConfig, provideBrowserGlobalErrorListeners } from "@angular/
 import { provideRouter } from "@angular/router";
 
 import { routes } from "./app.routes";
+import { provideHttpClient, withFetch, withInterceptors } from "@angular/common/http";
+import { authInterceptor } from "./core/interceptors/auth-interceptor";
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)],
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes),
+    provideHttpClient(withFetch(), withInterceptors([authInterceptor])),
+  ],
 };

src/app/core/interceptors/auth-interceptor.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from "@angular/core/testing";
+import { HttpInterceptorFn } from "@angular/common/http";
+
+import { authInterceptor } from "./auth-interceptor";
+
+describe("authInterceptor", () => {
+  const interceptor: HttpInterceptorFn = (req, next) =>
+    TestBed.runInInjectionContext(() => authInterceptor(req, next));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it("should be created", () => {
+    expect(interceptor).toBeTruthy();
+  });
+});

src/app/core/interceptors/auth-interceptor.ts

@@ -0,0 +1,20 @@
+import { HttpInterceptorFn } from "@angular/common/http";
+
+export const authInterceptor: HttpInterceptorFn = (req, next) => {
+  const getCookie = (name: string): string | null => {
+    const match = document.cookie.match(new RegExp("(^|;\\s*)(" + name + ")=([^;]*)"));
+    return match ? decodeURIComponent(match[3]) : null;
+  };
+
+  let headers = req.headers.set("Accept", "application/json");
+  const xsrfToken = getCookie("XSRF-TOKEN");
+  if (xsrfToken) {
+    headers = headers.set("X-XSRF-TOKEN", xsrfToken);
+  }
+  const clonedRequest = req.clone({
+    withCredentials: true,
+    headers: headers,
+  });
+
+  return next(clonedRequest);
+};

src/app/core/layouts/header/header.html

@@ -33,7 +33,7 @@
     </div>
   </nav>
   <ul class="dropdown" popover id="popover-1" style="position-anchor: --anchor-1">
-    <li><a class="block h-full w-full" href="">Login</a></li>
+    <li><a routerLink="/login" class="block h-full w-full" href="">Login</a></li>
     <li><a class="block h-full w-full" href="">My Account</a></li>
     <li><a class="block h-full w-full" href="">Orders</a></li>
     <li><a class="block h-full w-full" href="">Wishlist</a></li>

src/app/core/layouts/header/header.ts

@@ -1,8 +1,9 @@
 import { Component } from "@angular/core";
 import { LucideAngularModule, User, ShoppingCart, Search } from "lucide-angular";
+import { RouterLink } from "@angular/router";
 @Component({
   selector: "app-header",
-  imports: [LucideAngularModule],
+  imports: [LucideAngularModule, RouterLink],
   templateUrl: "./header.html",
   styleUrl: "./header.css",
 })

src/app/core/tokens/api-url-tokens.ts

@@ -5,3 +5,8 @@ export const API_URL = new InjectionToken<string>("API_URL", {
   providedIn: "root",
   factory: () => environment.apiUrl,
 });
+
+export const BACKEND_URL = new InjectionToken<string>("API_URL", {
+  providedIn: "root",
+  factory: () => environment.backendUrl,
+});

src/app/features/auth/components/login/login.html

@@ -20,16 +20,18 @@
 
       <h2 class="text-xl text-gray-600">Get access to your Orders, Wishlist and Recommendations</h2>
 
-      <form class="flex flex-col space-y-5">
+      <form [formGroup]="loginForm" (ngSubmit)="loginUser()" class="flex flex-col space-y-5">
         <fieldset class="fieldset">
           <legend class="fieldset-legend">Email</legend>
-          <input type="text" class="input" placeholder="Enter email here" />
+          <input formControlName="email" type="text" class="input" placeholder="Enter email here" />
           <p class="label">your-email-address@email.com</p>
+          <app-error fieldName="email" [control]="loginForm.get('email')" />
         </fieldset>
 
         <fieldset class="fieldset">
           <legend class="fieldset-legend">Password</legend>
-          <input type="password" class="input" placeholder="Type here" />
+          <input formControlName="password" type="password" class="input" placeholder="Type here" />
+          <app-error fieldName="password" [control]="loginForm.get('password')" />
         </fieldset>
 
         <button type="submit" class="btn btn-black py-2">Login</button>

src/app/features/auth/components/login/login.ts

@@ -1,18 +1,38 @@
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { Router, RouterLink } from "@angular/router";
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import { AuthService } from "../../services/auth-service";
+import { Error } from "../../../../shared/components/error/error";
 
 @Component({
   selector: "app-login",
-  imports: [RouterLink],
+  imports: [RouterLink, ReactiveFormsModule, Error],
   templateUrl: "./login.html",
   styleUrl: "./login.css",
 })
 export class Login {
   successMessage: string | undefined;
+  authService = inject(AuthService);
+
+  loginForm = new FormGroup({
+    email: new FormControl("", { validators: [Validators.required, Validators.email] }),
+    password: new FormControl("", { validators: [Validators.required] }),
+  });
 
   constructor(private router: Router) {
     const navigator = this.router.currentNavigation();
     const state = navigator?.extras.state as { message?: string };
     this.successMessage = state?.message;
   }
+
+  loginUser() {
+    if (this.loginForm.invalid) {
+      this.loginForm.markAllAsTouched();
+      return;
+    }
+
+    this.authService.login(this.loginForm.value as { email: string; password: string }).subscribe({
+      next: () => console.log("success"),
+    });
+  }
 }

src/app/features/auth/services/auth-service.ts

@@ -1,7 +1,8 @@
 import { Injectable, inject } from "@angular/core";
 import { RegisterUserRequest } from "../../../core/models/user.model";
 import { HttpClient } from "@angular/common/http";
-import { API_URL } from "../../../core/tokens/api-url-tokens";
+import { API_URL, BACKEND_URL } from "../../../core/tokens/api-url-tokens";
+import { switchMap } from "rxjs";
 
 @Injectable({
   providedIn: "root",
@@ -9,9 +10,22 @@ import { API_URL } from "../../../core/tokens/api-url-tokens";
 export class AuthService {
   private http: HttpClient = inject(HttpClient);
   private apiUrl = inject(API_URL);
+  private backendURL = inject(BACKEND_URL);
 
   register(userRequest: RegisterUserRequest) {
     console.log(this.apiUrl);
     return this.http.post(`${this.apiUrl}/register`, userRequest);
   }
+
+  login(credentials: { email: string; password: string }) {
+    return this.getCsrfCookie().pipe(
+      switchMap(() =>
+        this.http.post(`${this.backendURL}/login`, credentials, { observe: "response" }),
+      ),
+    );
+  }
+
+  getCsrfCookie() {
+    return this.http.get(`${this.backendURL}/sanctum/csrf-cookie`);
+  }
 }

src/environments/environment.development.ts

@@ -1,4 +1,5 @@
 export const environment = {
   production: false,
   apiUrl: "http://localhost:8000/api",
+  backendUrl: "http://localhost:8000",
 };

src/environments/environment.ts

@@ -1,4 +1,5 @@
 export const environment = {
   production: false,
   apiUrl: "http://my-dev-url",
+  backendUrl: "http://my-dev-url",
 };