connect backend for user registration

.gitignore

@@ -42,3 +42,7 @@ __screenshots__/
 # System files
 .DS_Store
 Thumbs.db
+
+# Sensetive files
+.env
+.env.local

angular.json

@@ -45,7 +45,13 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"

src/app/app.ts

@@ -6,7 +6,7 @@ import { Header } from "./core/layouts/header/header";
 
 @Component({
   selector: "app-root",
-  imports: [RouterOutlet, Products, Footer, Header],
+  imports: [RouterOutlet, Footer, Header],
   templateUrl: "./app.html",
   styleUrl: "./app.css",
 })

src/app/core/layouts/footer/footer.ts

@@ -1,9 +1,8 @@
 import { Component } from "@angular/core";
-import { DatePipe } from "@angular/common";
 import { LucideAngularModule, Mail, Phone, MapPin } from "lucide-angular";
 @Component({
   selector: "app-footer",
-  imports: [DatePipe, LucideAngularModule],
+  imports: [LucideAngularModule],
   templateUrl: "./footer.html",
   styleUrl: "./footer.css",
 })

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

@@ -0,0 +1,8 @@
+export interface RegisterUserRequest{
+  name: string | null;
+  email: string | null;
+  mobile_number: string | null;
+  password: string | null;
+  password_confirmation: string | null;
+  city: string | null;
+}

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

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

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

@@ -4,36 +4,36 @@
     <h2 class="text-xl text-gray-600">Sign up with your<br />email address to get started</h2>
   </article>
 
-  <form class="card max-w-11/12 sm:max-w-8/12 grid md:grid-cols-2 gap-4">
+  <form [formGroup]="registerForm" (ngSubmit)="registerUser()" class="card max-w-11/12 sm:max-w-8/12 grid md:grid-cols-2 gap-4">
     <article class="space-y-4">
       <fieldset class="fieldset">
         <legend class="fieldset-legend">Name</legend>
-        <input type="text" class="input" placeholder="Jhon Doe" />
+        <input type="text" class="input" formControlName="name"  placeholder="Jhon Doe" />
       </fieldset>
       <fieldset class="fieldset">
         <legend class="fieldset-legend">Mobile Number</legend>
-        <input type="text" class="input" placeholder="+X1 XXXXXXXXXX" />
+        <input type="text" class="input" formControlName="mobile_number" placeholder="+X1 XXXXXXXXXX" />
       </fieldset>
       <fieldset class="fieldset">
         <legend class="fieldset-legend">Email</legend>
-        <input type="text" class="input" placeholder="Enter email here" />
+        <input type="text" class="input" formControlName="email" placeholder="Enter email here" />
         <p class="label">your-email-address@email.com</p>
       </fieldset>
     </article>
     <article class="space-y-4">
       <fieldset class="fieldset">
         <legend class="fieldset-legend">Password</legend>
-        <input type="password" class="input" placeholder="Type here" />
+        <input type="password" class="input" formControlName="password" placeholder="Type here" />
       </fieldset>
 
       <fieldset class="fieldset">
         <legend class="fieldset-legend">Confirm Password</legend>
-        <input type="text" class="input" placeholder="Type here" />
+        <input type="text" class="input" formControlName="password_confirmation" placeholder="Type here" />
       </fieldset>
 
       <fieldset class="fieldset">
         <legend class="fieldset-legend">City</legend>
-        <input type="text" class="input" placeholder="Your city name" />
+        <input type="text" class="input" formControlName="city" placeholder="Your city name" />
       </fieldset>
     </article>
     <div class="flex flex-col col-span-2 gap-y-2">

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

@@ -1,9 +1,30 @@
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
+import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
+import { AuthService } from "../../services/auth-service";
+import { RegisterUserRequest } from "../../../../core/models/user.model";
 
 @Component({
   selector: "app-register",
-  imports: [],
+  imports: [ReactiveFormsModule],
   templateUrl: "./register.html",
   styleUrl: "./register.css",
 })
-export class Register {}
+export class Register {
+
+  authService = inject(AuthService);
+
+  registerForm = new FormGroup({
+    name :new FormControl(''),
+    email :new FormControl(''),
+    mobile_number : new FormControl(''),
+    password : new FormControl(''),
+    password_confirmation : new FormControl(''),
+    city : new FormControl(''),
+  });
+
+  registerUser() {
+    this.authService.register(this.registerForm.value as RegisterUserRequest)
+      .subscribe();
+  }
+
+}

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

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

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

@@ -0,0 +1,19 @@
+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';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+
+  private http: HttpClient = inject(HttpClient);
+  private apiUrl = inject(API_URL);
+
+  register(userRequest: RegisterUserRequest) {
+    console.log(this.apiUrl);
+    return this.http.post(`${this.apiUrl}/register`, userRequest);
+  }
+
+}

src/environments/environment.development.ts

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

src/environments/environment.ts

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