From 211087ebeb506f29ae378f4698bd31d6777a26b9 Mon Sep 17 00:00:00 2001
From: Quildra <Quildra@gmail.com>
Date: Wed, 17 Jul 2024 21:37:21 +0100
Subject: [PATCH] Basic Login / Register

---
 angular.json                                |  3 ++
 src/app/app.config.ts                       | 11 ++++++-
 src/app/app.routes.ts                       |  8 ++++-
 src/app/auth.service.spec.ts                | 16 ++++++++++
 src/app/auth.service.ts                     | 21 +++++++++++++
 src/app/login/login.component.css           |  0
 src/app/login/login.component.html          | 11 +++++++
 src/app/login/login.component.spec.ts       | 23 ++++++++++++++
 src/app/login/login.component.ts            | 33 +++++++++++++++++++++
 src/app/register/register.component.css     |  0
 src/app/register/register.component.html    | 14 +++++++++
 src/app/register/register.component.spec.ts | 23 ++++++++++++++
 src/app/register/register.component.ts      | 33 +++++++++++++++++++++
 13 files changed, 194 insertions(+), 2 deletions(-)
 create mode 100644 src/app/auth.service.spec.ts
 create mode 100644 src/app/auth.service.ts
 create mode 100644 src/app/login/login.component.css
 create mode 100644 src/app/login/login.component.html
 create mode 100644 src/app/login/login.component.spec.ts
 create mode 100644 src/app/login/login.component.ts
 create mode 100644 src/app/register/register.component.css
 create mode 100644 src/app/register/register.component.html
 create mode 100644 src/app/register/register.component.spec.ts
 create mode 100644 src/app/register/register.component.ts

diff --git a/angular.json b/angular.json
index a49058a..a6eb968 100644
--- a/angular.json
+++ b/angular.json
@@ -97,5 +97,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "2d127db3-3867-46fa-9894-c2ddfea27aee"
   }
 }
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 52cd710..72baea3 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,9 +1,18 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi, withFetch } from '@angular/common/http';
 
 import { routes } from './app.routes';
 import { provideClientHydration } from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration()]
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(
+      withInterceptorsFromDi(),
+      withFetch()
+    ),
+    provideClientHydration()
+  ]
 };
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index dc39edb..3ba51a9 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,3 +1,9 @@
 import { Routes } from '@angular/router';
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    { path: 'login', component: LoginComponent },
+    { path: 'register', component: RegisterComponent },
+    // Add other routes here
+  ];
diff --git a/src/app/auth.service.spec.ts b/src/app/auth.service.spec.ts
new file mode 100644
index 0000000..a761949
--- /dev/null
+++ b/src/app/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();
+  });
+});
diff --git a/src/app/auth.service.ts b/src/app/auth.service.ts
new file mode 100644
index 0000000..6cdd7db
--- /dev/null
+++ b/src/app/auth.service.ts
@@ -0,0 +1,21 @@
+// src/app/auth.service.ts
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private apiUrl = 'http://localhost:3000/auth';
+
+  constructor(private http: HttpClient) {}
+
+  login(email: string, password: string): Observable<any> {
+    return this.http.post<any>(`${this.apiUrl}/login`, { email, password });
+  }
+
+  register(name: string, email: string, password: string): Observable<any> {
+    return this.http.post<any>(`${this.apiUrl}/register`, { name, email, password });
+  }
+}
diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
new file mode 100644
index 0000000..a384b03
--- /dev/null
+++ b/src/app/login/login.component.html
@@ -0,0 +1,11 @@
+<!-- src/app/login/login.component.html -->
+<h2>Login</h2>
+<form (ngSubmit)="login()">
+  <label for="email">Email:</label>
+  <input type="email" [(ngModel)]="email" name="email" required>
+  
+  <label for="password">Password:</label>
+  <input type="password" [(ngModel)]="password" name="password" required>
+  
+  <button type="submit">Login</button>
+</form>
diff --git a/src/app/login/login.component.spec.ts b/src/app/login/login.component.spec.ts
new file mode 100644
index 0000000..62c788d
--- /dev/null
+++ b/src/app/login/login.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
new file mode 100644
index 0000000..67d4c44
--- /dev/null
+++ b/src/app/login/login.component.ts
@@ -0,0 +1,33 @@
+// src/app/login/login.component.ts
+import { Component } from '@angular/core';
+import { AuthService } from '../auth.service';
+import { Router } from '@angular/router';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    FormsModule
+  ],
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent {
+  email!: string;
+  password!: string;
+
+  constructor(private authService: AuthService, private router: Router) {}
+
+  login() {
+    this.authService.login(this.email, this.password).subscribe(
+      res => {
+        localStorage.setItem('token', res.access_token);
+        this.router.navigate(['/']);
+      },
+      err => console.error(err)
+    );
+  }
+}
diff --git a/src/app/register/register.component.css b/src/app/register/register.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/register/register.component.html b/src/app/register/register.component.html
new file mode 100644
index 0000000..ec0032c
--- /dev/null
+++ b/src/app/register/register.component.html
@@ -0,0 +1,14 @@
+<!-- src/app/register/register.component.html -->
+<h2>Register</h2>
+<form (ngSubmit)="register()">
+  <label for="name">Name:</label>
+  <input type="text" [(ngModel)]="name" name="name" required>
+  
+  <label for="email">Email:</label>
+  <input type="email" [(ngModel)]="email" name="email" required>
+  
+  <label for="password">Password:</label>
+  <input type="password" [(ngModel)]="password" name="password" required>
+  
+  <button type="submit">Register</button>
+</form>
diff --git a/src/app/register/register.component.spec.ts b/src/app/register/register.component.spec.ts
new file mode 100644
index 0000000..5172586
--- /dev/null
+++ b/src/app/register/register.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RegisterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/register/register.component.ts b/src/app/register/register.component.ts
new file mode 100644
index 0000000..4806da3
--- /dev/null
+++ b/src/app/register/register.component.ts
@@ -0,0 +1,33 @@
+// src/app/register/register.component.ts
+import { Component } from '@angular/core';
+import { AuthService } from '../auth.service';
+import { Router } from '@angular/router';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-register',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    FormsModule
+  ],
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.css']
+})
+export class RegisterComponent {
+  name!: string;
+  email!: string;
+  password!: string;
+
+  constructor(private authService: AuthService, private router: Router) {}
+
+  register() {
+    this.authService.register(this.name, this.email, this.password).subscribe(
+      res => {
+        this.router.navigate(['/login']);
+      },
+      err => console.error(err)
+    );
+  }
+}