Vorbereitung Release 0.2.0

kontor-angular/src/app/common/auth/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();
+  });
+});

kontor-angular/src/app/common/auth/auth-service.ts

@@ -0,0 +1,55 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { catchError, Observable, throwError } from 'rxjs';
+
+
+interface AuthResponseData {
+  kind: string;
+  idToken: string;
+  email: string;
+  refreshToken: string;
+  expiresIn: string;
+}
+
+export interface TokenData {
+  access_token: string;
+  token_type: string;
+}
+
+@Injectable({providedIn: 'root'})
+export class AuthService {
+  private http = inject(HttpClient);
+
+  signup(email: string, password: string) {
+    return this.http.post<TokenData>('http://localhost:8800/signup',
+      {
+        username: email,
+        password: password
+      }
+    ).pipe(catchError(errorRes => {
+      let errorMessage = 'An unknown error occurred!'; 
+      const err = Error(errorMessage);
+      if (!errorRes.error) {
+        return throwError(() => err);
+      }
+      switch(errorRes.statusText) {
+        case 'ERROR': 
+          errorMessage = 'Uups...';
+      }
+      return throwError(() => Error(errorMessage));
+    }));
+  }
+
+  login(email: string, password: string): Observable<TokenData> {
+    const params = new HttpParams()
+      .set('username', email)
+      .append('password', password);
+    return this.http.post<TokenData>('http://127.0.0.1:8800/api/login/token', params,
+      {
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        }
+      }
+    );
+  }
+}

kontor-angular/src/app/common/auth/auth.css

@@ -0,0 +1,8 @@
+
+button {
+  text-align: center;
+  padding: 10px;
+  border-radius: 10px;
+  margin-left: 14px;
+
+}

kontor-angular/src/app/common/auth/auth.html

@@ -0,0 +1,34 @@
+<div class="row">
+    <div style="margin-top: 16px;">
+        @if(error) {
+            <div class="alert alter-danger">
+                <p>{{ error }}</p>
+            </div>
+        }
+        @if(isLoading) {
+            <div style="text-align: center;">
+                <app-loading-spinner></app-loading-spinner>
+            </div>
+        }
+        @else {
+            <form (ngSubmit)="onSubmit(authForm)" #authForm="ngForm">
+                <div class="form-group" style="margin-bottom: 7px;">
+                    <label for="email">E-Mail</label>
+                    <input type="email" id="email" class="form-control" ngModel name="email"  required email=""/>
+                </div>
+                <div class="form-group" style="margin-bottom: 7px;">
+                    <label for="password">Password</label>
+                    <input type="password" id="password" class="form-control" ngModel name="password" required/>
+                </div>
+                <div>
+                    <button class="btn btn-primary" type="submit" [disabled]="!authForm.valid">
+                        {{ isLoginMode ? 'Login' : 'Sign Up' }}
+                    </button>
+                    <button class="btn btn-primary" (click)="onSwitchMode()" type="button">
+                        Switch to {{ isLoginMode ? 'Sign Up' : 'Login' }}
+                    </button>
+                </div>
+            </form>
+        }
+    </div>
+</div>

kontor-angular/src/app/common/auth/auth.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Auth } from './auth';
+
+describe('Auth', () => {
+  let component: Auth;
+  let fixture: ComponentFixture<Auth>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Auth]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Auth);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kontor-angular/src/app/common/auth/auth.ts

@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NgForm } from '@angular/forms';
+import { AuthService, TokenData } from './auth-service';
+import { LoadingSpinner } from "../../shared/loading-spinner/loading-spinner";
+import { Observable } from 'rxjs';
+import { HttpErrorResponse } from '@angular/common/http';
+
+@Component({
+  selector: 'app-auth',
+  imports: [FormsModule, LoadingSpinner],
+  templateUrl: './auth.html',
+  styleUrl: './auth.css'
+})
+export class Auth {
+  isLoginMode = true;
+  isLoading = false;
+  error: string | null = null;
+
+  constructor(private authService: AuthService) {}
+
+  onSwitchMode() {
+    this.isLoginMode =!this.isLoginMode;
+  }
+
+  onSubmit(form: NgForm) {
+    if (!form.valid) {
+      return;
+    }
+    const email = form.value.email;
+    const password = form.value.password;
+
+    let authObservable: Observable<TokenData>;
+
+    this.isLoading = true;
+    if (this.isLoginMode) {
+      authObservable = this.authService.login(email, password);
+    } else {
+      authObservable = this.authService.signup(email, password)
+    }
+
+    authObservable.subscribe({
+      next: token => {
+        console.log(token);
+        localStorage.setItem('userToken', JSON.stringify(token));
+        this.isLoading = false;
+      },
+      error: err => {
+        console.log(err);
+        this.isLoading = false;
+      }
+    });
+    form.reset();
+  }
+}