Basic Login / Register

angular.json

@@ -97,5 +97,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "2d127db3-3867-46fa-9894-c2ddfea27aee"
   }
 }

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()
+  ]
 };

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
+  ];

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();
+  });
+});

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 });
+  }
+}

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>

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();
+  });
+});

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)
+    );
+  }
+}

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>

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();
+  });
+});

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)
+    );
+  }
+}