@ichgamer999/wmctest 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ichgamer999/wmctest",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Minimalist Angular authentication template with signals, JWT token handling, and HTTP interceptors",
   "keywords": [
     "angular",

package/src/app-expenses/app.component.css

@@ -0,0 +1,23 @@
+.layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+.sidebar {
+  width: 180px;
+  padding: 8px;
+  background: #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.content {
+  flex: 1;
+  padding: 8px;
+}
+
+button {
+  width: 100%;
+}
+

package/src/app-expenses/app.component.html

@@ -0,0 +1,19 @@
+<div class="layout">
+  <div class="sidebar">
+    @if (auth.isAuthenticated()) {
+      <div>{{ auth.getUserName() }}</div>
+    }
+
+    <a href="/expenses">Expenses</a>
+
+    @if (!auth.isAuthenticated()) {
+      <button (click)="login()">Login</button>
+    } @else {
+      <button (click)="logout()">LogOut</button>
+    }
+  </div>
+
+  <div class="content">
+    <router-outlet></router-outlet>
+  </div>
+</div>

package/src/app-expenses/app.component.ts

@@ -0,0 +1,26 @@
+import {Component, inject} from '@angular/core';
+import {LoginComponent} from "./components/login/login.component";
+import {Router, RouterOutlet} from "@angular/router";
+import {AuthService} from "./services/auth.service";
+import {HttpServiceService} from "./services/http-service.service";
+
+@Component({
+    selector: 'app-root',
+  imports: [
+    RouterOutlet
+  ],
+    templateUrl: './app.component.html',
+    styleUrl: './app.component.css'
+})
+export class AppComponent {
+  auth = inject(AuthService)
+  router = inject(Router);
+  http = inject(HttpServiceService)
+  login(){
+    this.router.navigate(['/login']);
+  }
+
+  logout(){
+    this.http.logout()
+  }
+}

package/src/app-expenses/app.config.ts

@@ -0,0 +1,12 @@
+import {ApplicationConfig, provideZonelessChangeDetection} from '@angular/core';
+import {provideRouter} from '@angular/router';
+
+import {routes} from './app.routes';
+import {provideHttpClient, withInterceptors} from "@angular/common/http";
+import {authInterceptor} from "./interceptor/auth.interceptor";
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideZonelessChangeDetection(),
+    provideHttpClient(withInterceptors([ authInterceptor])),
+    provideRouter(routes)]
+};

package/src/app-expenses/app.routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+import {LoginComponent} from "./components/login/login.component";
+import {ExpenseComponent} from "./components/expense/expense.component";
+
+export const routes: Routes = [
+  { path: '', redirectTo: 'login', pathMatch: 'full' },
+  { path: 'login', component: LoginComponent },
+  { path: 'expenses', component: ExpenseComponent}
+];

package/src/app-expenses/components/expense/expense.component.css

@@ -0,0 +1,8 @@
+.expense-row {
+  border: 1px solid #aaa;
+  padding: 6px;
+  margin-bottom: 6px;
+}
+
+
+

package/src/app-expenses/components/expense/expense.component.html

@@ -0,0 +1,42 @@
+<h2>My Expenses</h2>
+
+@if (editingExpense(); as expenseToEdit) {
+  <form (ngSubmit)="saveEdit()">
+    <h3>Edit Expense</h3>
+    <div>
+      <label for="type">Type</label>
+      <input id="type" name="type" [(ngModel)]="expenseToEdit.type" />
+    </div>
+    <div>
+      <label for="description">Description</label>
+      <input id="description" name="description" [(ngModel)]="expenseToEdit.description" />
+    </div>
+    <div>
+      <label for="amount">Amount</label>
+      <input id="amount" name="amount" type="number" [(ngModel)]="expenseToEdit.amount" />
+    </div>
+    <div>
+      <label for="expenseDate">Date</label>
+      <input id="expenseDate" name="expenseDate" type="date" [(ngModel)]="expenseToEdit.expenseDate" />
+    </div>
+    <div>
+      <button type="submit">Save</button>
+      <button type="button" (click)="cancelEdit()">Cancel</button>
+    </div>
+  </form>
+}
+
+@for (expense of this.expenses(); track expense.clientId ?? $index) {
+  <div class="expense-row">
+
+
+    <div [style.color]="isFoodType(expense.type)">{{ expense.type }}</div>
+    <div>{{ expense.description }}</div>
+    <div>${{ expense.amount }}</div>
+    <div>{{ expense.expenseDate }}</div>
+    <div>
+      <button type="button" (click)="startEdit(expense)">Edit</button>
+      <button type="button" (click)="deleteExpense(expense)">Delete</button>
+    </div>
+  </div>
+}

package/src/app-expenses/components/expense/expense.component.ts

@@ -0,0 +1,97 @@
+import {Component, inject, OnInit, signal} from '@angular/core';
+import {AuthService} from "../../services/auth.service";
+import {HttpServiceService} from "../../services/http-service.service";
+import {Expense} from "../../types/Expense";
+import {FormsModule} from "@angular/forms";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-expense',
+  imports: [
+    FormsModule
+  ],
+  templateUrl: './expense.component.html',
+  styleUrl: './expense.component.css',
+})
+export class ExpenseComponent implements OnInit {
+
+  authService = inject(AuthService)
+  http = inject(HttpServiceService)
+  expenses = signal<Expense[]>([])
+  editingExpense = signal<Expense | null>(null)
+  editingExpenseId = signal<number | null>(null)
+  private nextClientId = 0;
+  router = inject(Router);
+
+  ngOnInit(): void {
+    if (this.authService.isAuthenticated()) {
+        this.http.getAllExpenses().subscribe(
+          value => {
+            this.expenses.set(
+              value.map(expense => ({
+                ...expense,
+                clientId: this.nextClientId++,
+              }))
+            )
+          }
+        )
+    } else {
+      this.router.navigate(["/login"])
+    }
+  }
+
+  startEdit(expense: Expense) {
+    this.editingExpenseId.set(expense.clientId ?? null)
+    this.editingExpense.set({ ...expense })
+  }
+
+  saveEdit() {
+    const expenseId = this.editingExpenseId()
+    const expense = this.editingExpense()
+
+    if (expenseId === null || !expense) {
+      return
+    }
+
+    this.expenses.update(currentExpenses =>
+      currentExpenses.map(currentExpense =>
+        currentExpense.clientId === expenseId ? { ...currentExpense, ...expense, clientId: expenseId } : currentExpense
+      )
+    )
+
+    this.cancelEdit()
+  }
+
+  deleteExpense(expense: Expense) {
+    const expenseId = expense.clientId
+
+    if (expenseId === undefined) {
+      return
+    }
+
+    const confirmed = window.confirm(`Möchtest du ${expense.type} wirklich löschen?`)
+
+    if (!confirmed) {
+      return
+    }
+
+    this.expenses.update(currentExpenses => currentExpenses.filter(currentExpense => currentExpense.clientId !== expenseId))
+
+    if (this.editingExpenseId() === expenseId) {
+      this.cancelEdit()
+    }
+  }
+
+  cancelEdit() {
+    this.editingExpenseId.set(null)
+    this.editingExpense.set(null)
+  }
+
+  isFoodType(type: string | undefined) {
+    if (type?.toLowerCase() == 'food') {
+      return 'green'
+    }
+    else return 'blue'
+  }
+
+}

package/src/app-expenses/components/login/login.component.css

@@ -0,0 +1,24 @@
+form {
+  max-width: 320px;
+  margin: 16px 0;
+  padding: 8px;
+  border: 1px solid #999;
+}
+
+label {
+  display: block;
+  margin-bottom: 8px;
+}
+
+input {
+  width: 100%;
+  margin-top: 2px;
+  margin-bottom: 8px;
+  border: 1px solid #999;
+}
+
+button {
+  width: 100%;
+  border: 1px solid #666;
+  background: #d9d9d9;
+}

package/src/app-expenses/components/login/login.component.html

@@ -0,0 +1,13 @@
+<form [formGroup]="loginModel" (ngSubmit)="onSubmit()">
+
+  <label>
+    Username
+    <input type="text" formControlName="username" />
+  </label>
+  <label>
+    Password
+    <input type="password" formControlName="password" />
+  </label>
+  <button type="submit" [disabled]="loginModel.invalid">Login</button>
+
+</form>

package/src/app-expenses/components/login/login.component.ts

@@ -0,0 +1,34 @@
+import {Component, inject, signal} from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
+import {HttpServiceService} from "../../services/http-service.service";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-login',
+  imports: [
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css',
+})
+export class LoginComponent {
+    http = inject(HttpServiceService);
+    router = inject(Router);
+    loginModel = new FormGroup({
+      'username': new FormControl('', Validators.required),
+      'password': new FormControl('', Validators.required),
+    })
+
+    onSubmit() {
+      if (this.loginModel.valid) {
+        const {username, password} = this.loginModel.value;
+
+        if (username && password) {
+          this.http.login(username, password).subscribe({
+            next: () => this.router.navigate(['/expenses']),
+          });
+        }
+      }
+    }
+}

package/src/app-expenses/interceptor/auth.interceptor.ts

@@ -0,0 +1,14 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+import {inject} from "@angular/core";
+import {AuthService} from "../services/auth.service";
+
+export const authInterceptor: HttpInterceptorFn = (req, next) => {
+  const authService = inject(AuthService)
+  if(!authService.isAuthenticated()){
+    return next(req);
+  }
+  let clone = req.clone({
+    headers: req.headers.set('Authorization', `Bearer ${authService.getToken()}`)
+  });
+  return next(clone);
+};

package/src/app-expenses/services/auth.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  private is_authenticated = "";
+
+  constructor() {
+    const savedUser = localStorage.getItem("userName");
+    if (savedUser) {
+      this.is_authenticated = savedUser;
+    }
+  }
+
+  isAuthenticated(){
+    return this.is_authenticated != "";
+  }
+
+  setAuthenticated(newState: string){
+    this.is_authenticated = newState;
+  }
+
+  getUserName(){
+    return this.is_authenticated
+  }
+
+  getToken(){
+    return localStorage.getItem('secretAuthToken');
+  }
+}

package/src/app-expenses/services/http-service.service.ts

@@ -0,0 +1,48 @@
+import {inject, Injectable} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {AuthService} from "./auth.service";
+import {Router} from "@angular/router";
+import {Observable, tap} from "rxjs";
+import {Expense} from "../types/Expense";
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HttpServiceService {
+  http = inject(HttpClient);
+  authService = inject(AuthService);
+  router = inject(Router);
+  private baseURL = "http://localhost:8080/api";
+
+  login(username: string, password: string){
+    return this.http
+      .post<{ token: string }>(`${this.baseURL}/token`,
+        { username: username, password: password })
+      .pipe(
+        tap(response => {
+          localStorage.setItem('secretAuthToken', response.token);
+          localStorage.setItem("userName", username)
+          this.authService.setAuthenticated(username);
+        })
+      );
+  }
+
+  getAllExpenses(): Observable<Expense[]> {
+    return this.http.get<Expense[]>(`${this.baseURL}/expenses`);
+  }
+
+  updateExpense(expenseId: number, expense: Expense): Observable<Expense> {
+    return this.http.put<Expense>(`${this.baseURL}/expenses/${expenseId}`, expense);
+  }
+
+  deleteExpense(expenseId: number): Observable<void> {
+    return this.http.delete<void>(`${this.baseURL}/expenses/${expenseId}`);
+  }
+
+  logout(){
+    localStorage.removeItem('secretAuthToken');
+    this.authService.setAuthenticated("");
+    this.router.navigate(['/login']);
+  }
+
+}

package/src/app-expenses/types/Expense.ts

@@ -0,0 +1,18 @@
+export class Expense {
+  id?: number
+  clientId?: number
+  type: string
+  amount: number
+  expenseDate: string
+  description: string
+
+
+  constructor(type: string, amount: number, expenseDate: string, description: string, id?: number, clientId?: number) {
+    this.id = id;
+    this.clientId = clientId;
+    this.type = type;
+    this.amount = amount;
+    this.expenseDate = expenseDate;
+    this.description = description;
+  }
+}