.oxfmtrc.json

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

src/app/app.config.ts

@@ -2,13 +2,7 @@ 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: [
+  providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)],
-    provideBrowserGlobalErrorListeners(),
-    provideRouter(routes),
-    provideHttpClient(withFetch(), withInterceptors([authInterceptor])),
-  ],
 };

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

@@ -1,17 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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 routerLink="/login" class="block h-full w-full" href="">Login</a></li>
+    <li><a 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,9 +1,8 @@
 import { Component } from "@angular/core";
 import { LucideAngularModule, User, ShoppingCart, Search } from "lucide-angular";
-import { RouterLink } from "@angular/router";
 @Component({
   selector: "app-header",
-  imports: [LucideAngularModule, RouterLink],
+  imports: [LucideAngularModule],
   templateUrl: "./header.html",
   styleUrl: "./header.css",
 })

src/app/core/models/user.model.ts

@@ -1,4 +1,4 @@
-export interface RegisterUserRequest {
+export interface RegisterUserRequest{
   name: string | null;
   email: string | null;
   mobile_number: string | null;

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

@@ -1,12 +1,7 @@
 import { InjectionToken } from "@angular/core";
-import { environment } from "../../../environments/environment";
+import {environment} from '../../../environments/environment';
 
-export const API_URL = new InjectionToken<string>("API_URL", {
+export const API_URL = new InjectionToken<string>('API_URL', {
   providedIn: "root",
-  factory: () => environment.apiUrl,
+  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

@@ -1,11 +1,4 @@
-@if (successMessage) {
+<section class="my-10 sm:my-20 flex justify-center items-center">
-<div
-  class="px-4 py-3 mb-8 bg-teal-100 rounded-lg text-teal-800 text-sm mt-10 max-w-11/12 sm:max-w-8/12 mx-auto"
->
-  <p>{{successMessage}}</p>
-</div>
-}
-<section class="my-5 sm:my-10 flex justify-center items-center">
   <article class="card max-w-11/12 sm:max-w-8/12 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
     <div class="md:col-span-1 lg:col-span-2">
       <img
@@ -20,25 +13,21 @@
 
       <h2 class="text-xl text-gray-600">Get access to your Orders, Wishlist and Recommendations</h2>
 
-      <form [formGroup]="loginForm" (ngSubmit)="loginUser()" class="flex flex-col space-y-5">
+      <form class="flex flex-col space-y-5">
         <fieldset class="fieldset">
           <legend class="fieldset-legend">Email</legend>
-          <input formControlName="email" type="text" class="input" placeholder="Enter email here" />
+          <input 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 formControlName="password" type="password" class="input" placeholder="Type here" />
+          <input 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>
       </form>
-      <a
+      <a href="" class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
-        routerLink="/register"
-        class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
         >New User ? Sign Up</a
       >
     </article>

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

@@ -1,38 +1,9 @@
-import { Component, inject } from "@angular/core";
+import { Component } 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, ReactiveFormsModule, Error],
+  imports: [],
   templateUrl: "./login.html",
   styleUrl: "./login.css",
 })
-export class Login {
+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/components/register/register.html

@@ -1,82 +1,44 @@
-<section
+<section class="my-10 sm:my-30 flex flex-col sm:flex-row space-x-20 justify-center items-center">
-  class="my-10 md:my-30 flex flex-col md:flex-row space-x-20 space-y-10 justify-center items-center"
->
   <article class="space-y-6">
     <h1 class="text-3xl text-gray-800 font-space font-bold">Register</h1>
     <h2 class="text-xl text-gray-600">Sign up with your<br />email address to get started</h2>
-    <div class="text-xs text-red-600 space-y-2">
-      @for (error of errors(); track error) {
-      <p>{{ error }}</p>
-      }
-    </div>
   </article>
 
-  <form
+  <form [formGroup]="registerForm" (ngSubmit)="registerUser()" class="card max-w-11/12 sm:max-w-8/12 grid md:grid-cols-2 gap-4">
-    [formGroup]="registerForm"
+    <article class="space-y-4">
-    (ngSubmit)="registerUser()"
-    class="card max-w-11/12 sm:max-w-8/12 grid md:grid-cols-2 gap-4"
-  >
       <fieldset class="fieldset">
-      <legend class="fieldset-legend">Name*</legend>
+        <legend class="fieldset-legend">Name</legend>
-      <input type="text" name="name" class="input" formControlName="name" placeholder="Jhon Doe" />
+        <input type="text" class="input" formControlName="name"  placeholder="Jhon Doe" />
-      <app-error fieldName="name" [control]="registerForm.get('name')" />
       </fieldset>
-
       <fieldset class="fieldset">
-      <legend class="fieldset-legend">Mobile Number*</legend>
+        <legend class="fieldset-legend">Mobile Number</legend>
-      <input
+        <input type="text" class="input" formControlName="mobile_number" placeholder="+X1 XXXXXXXXXX" />
-        type="text"
-        name="mobile_number"
-        class="input"
-        formControlName="mobile_number"
-        placeholder="+X1 XXXXXXXXXX"
-      />
-      <app-error fieldName="mobile number" [control]="registerForm.get('mobile_number')" />
       </fieldset>
-
       <fieldset class="fieldset">
-      <legend class="fieldset-legend">Email*</legend>
+        <legend class="fieldset-legend">Email</legend>
         <input type="text" class="input" formControlName="email" placeholder="Enter email here" />
         <p class="label">your-email-address@email.com</p>
-      <app-error fieldName="email" [control]="registerForm.get('email')" />
       </fieldset>
-
+    </article>
+    <article class="space-y-4">
       <fieldset class="fieldset">
-      <legend class="fieldset-legend">City*</legend>
+        <legend class="fieldset-legend">Password</legend>
-      <input
-        type="text"
-        name="city"
-        class="input"
-        formControlName="city"
-        placeholder="Your city name"
-      />
-      <app-error fieldName="city" [control]="registerForm.get('city')" />
-    </fieldset>
-
-    <fieldset class="fieldset">
-      <legend class="fieldset-legend">Password*</legend>
         <input type="password" class="input" formControlName="password" placeholder="Type here" />
-      <app-error fieldName="password" [control]="registerForm.get('password')" />
       </fieldset>
 
       <fieldset class="fieldset">
-      <legend class="fieldset-legend">Confirm Password*</legend>
+        <legend class="fieldset-legend">Confirm Password</legend>
-      <input
+        <input type="text" class="input" formControlName="password_confirmation" placeholder="Type here" />
-        type="text"
-        class="input"
-        formControlName="password_confirmation"
-        placeholder="Type here"
-      />
-      <app-error [control]="registerForm.get('password_confirmation')" />
       </fieldset>
 
+      <fieldset class="fieldset">
+        <legend class="fieldset-legend">City</legend>
+        <input type="text" class="input" formControlName="city" placeholder="Your city name" />
+      </fieldset>
+    </article>
     <div class="flex flex-col col-span-2 gap-y-2">
-      <button type="submit" [disabled]="registerForm.invalid" class="btn btn-black py-2 w-full">
+      <button type="submit" class="btn btn-black py-2 w-full">Register</button>
-        Register
+      <a href="" class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
-      </button>
-      <a
-        routerLink="/login"
-        class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
         >Already have an account ? Login</a
       >
     </div>

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

@@ -1,45 +1,30 @@
-import { Component, inject, signal } from "@angular/core";
+import { Component, inject } from "@angular/core";
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
 import { AuthService } from "../../services/auth-service";
 import { RegisterUserRequest } from "../../../../core/models/user.model";
-import { Error } from "../../../../shared/components/error/error";
-import { Router, RouterLink } from "@angular/router";
 
 @Component({
   selector: "app-register",
-  imports: [ReactiveFormsModule, Error, RouterLink],
+  imports: [ReactiveFormsModule],
   templateUrl: "./register.html",
   styleUrl: "./register.css",
 })
 export class Register {
+
   authService = inject(AuthService);
-  router = inject(Router);
-  errors = signal<string[]>([]);
 
   registerForm = new FormGroup({
-    name: new FormControl("", { validators: [Validators.required] }),
+    name :new FormControl(''),
-    email: new FormControl("", { validators: [Validators.required, Validators.email] }),
+    email :new FormControl(''),
-    mobile_number: new FormControl("", { validators: [Validators.required] }),
+    mobile_number : new FormControl(''),
-    password: new FormControl("", { validators: [Validators.required] }),
+    password : new FormControl(''),
-    password_confirmation: new FormControl("", { validators: [Validators.required] }),
+    password_confirmation : new FormControl(''),
-    city: new FormControl("", { validators: [Validators.required] }),
+    city : new FormControl(''),
   });
 
   registerUser() {
-    // validation errors if user submit early
+    this.authService.register(this.registerForm.value as RegisterUserRequest)
-    if (this.registerForm.invalid) {
+      .subscribe();
-      this.registerForm.markAllAsTouched();
-      return;
   }
 
-    this.authService.register(this.registerForm.value as RegisterUserRequest).subscribe({
-      next: () =>
-        this.router.navigate(["/login"], { state: { message: "Registration successful!" } }),
-      error: (error) => {
-        const errors: Record<number, string[]> = error?.error?.errors || {};
-        const errorMessages: string[] = Object.values(errors).flat();
-        this.errors.set(errorMessages);
-      },
-    });
-  }
 }

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

@@ -1,8 +1,8 @@
-import { TestBed } from "@angular/core/testing";
+import { TestBed } from '@angular/core/testing';
 
-import { AuthService } from "./auth-service";
+import { AuthService } from './auth-service';
 
-describe("AuthService", () => {
+describe('AuthService', () => {
   let service: AuthService;
 
   beforeEach(() => {
@@ -10,7 +10,7 @@ describe("AuthService", () => {
     service = TestBed.inject(AuthService);
   });
 
-  it("should be created", () => {
+  it('should be created', () => {
     expect(service).toBeTruthy();
   });
 });

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

@@ -1,31 +1,19 @@
-import { Injectable, inject } from "@angular/core";
+import { Injectable, inject } from '@angular/core';
-import { RegisterUserRequest } from "../../../core/models/user.model";
+import { RegisterUserRequest } from '../../../core/models/user.model';
-import { HttpClient } from "@angular/common/http";
+import { HttpClient } from '@angular/common/http';
-import { API_URL, BACKEND_URL } from "../../../core/tokens/api-url-tokens";
+import { API_URL } from '../../../core/tokens/api-url-tokens';
-import { switchMap } from "rxjs";
 
 @Injectable({
-  providedIn: "root",
+  providedIn: 'root',
 })
 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/app/shared/components/error/error.ts

@@ -1,47 +0,0 @@
-import { Component, Input } from "@angular/core";
-import { AbstractControl } from "@angular/forms";
-import { UpperCaseFirstPipe } from "../../pipes/upper-case-first-pipe";
-
-@Component({
-  selector: "app-error",
-  imports: [UpperCaseFirstPipe],
-  template: `
-    @if (this.control && this.control.touched) {
-      @for (error of getErrorMessages(); track error) {
-        <p class="ml-2 text-xs text-red-400">{{ error | upperCaseFirst }}</p>
-      }
-    }
-  `,
-})
-export class Error {
-  @Input() control!: AbstractControl | null;
-  @Input() fieldName = "This field";
-
-  getErrorMessages() {
-    const messages: string[] = [];
-
-    if (this.control && this.control.errors) {
-      const errors = this.control.errors;
-
-      if (errors["required"]) {
-        messages.push(`${this.fieldName} is required.`);
-      }
-      if (errors["email"]) {
-        messages.push(`Please enter a valid email address.`);
-      }
-      if (errors["minlength"]) {
-        messages.push(
-          `${this.fieldName} must be at least ${errors["minlength"].requiredLength} characters.`,
-        );
-      }
-      if (errors["pattern"]) {
-        messages.push(`${this.fieldName} is formatted incorrectly.`);
-      }
-      if (errors["serverError"]) {
-        messages.push(errors["serverError"]);
-      }
-    }
-
-    return messages;
-  }
-}

src/app/shared/pipes/upper-case-first-pipe.spec.ts

@@ -1,8 +0,0 @@
-import { UpperCaseFirstPipe } from "./upper-case-first-pipe";
-
-describe("UpperCaseFirstPipe", () => {
-  it("create an instance", () => {
-    const pipe = new UpperCaseFirstPipe();
-    expect(pipe).toBeTruthy();
-  });
-});

src/app/shared/pipes/upper-case-first-pipe.ts

@@ -1,10 +0,0 @@
-import { Pipe, PipeTransform } from "@angular/core";
-
-@Pipe({
-  name: "upperCaseFirst",
-})
-export class UpperCaseFirstPipe implements PipeTransform {
-  transform(value: string): unknown {
-    return value.charAt(0).toUpperCase() + value.slice(1);
-  }
-}

src/environments/environment.development.ts

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

src/environments/environment.ts

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

src/styles.css

@@ -21,7 +21,7 @@ body {
 }
 
 .btn {
-  @apply rounded-full transition-all duration-200 font-medium ease-out flex justify-center active:translate-y-px disabled:opacity-50 disabled:cursor-not-allowed;
+  @apply rounded-full transition-all duration-200 font-medium ease-out flex justify-center active:translate-y-[1px];
 }
 
 .btn-ghost {