From: Kai Moritz <kai@juplo.de>
Date: Mon, 13 Oct 2025 20:19:41 +0000 (+0200)
Subject: feat: `user.component` handels errors
X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=9cb5713fe4cea693806297bfb8bce3289ff61037;p=demos%2Fkafka%2Fchat

feat: `user.component` handels errors
---

diff --git a/src/app/user/user.component.html b/src/app/user/user.component.html
index 721d7023..91e91234 100644
--- a/src/app/user/user.component.html
+++ b/src/app/user/user.component.html
@@ -3,16 +3,21 @@
   <div class="container card-body form-inline">
     <div class="row form-group">
       <div class="col input-group input-group-primary">
-        <button type="submit" class="btn btn-primary" (click)="createUserId()">Create a new user-ID</button>
+        <button type="submit" class="btn btn-primary" (click)="createUserId()" [disabled]="loading">Create a new user-ID</button>
       </div>
       <div class="col input-group input-group-primary">
         <label for="id" class="input-group-text">User-ID</label>
         <input id="id" type="text" class="form-control" placeholder="Enter your user-ID" [formControl]="useridForm">
-        <button type="submit" class="btn btn-primary" (click)="updateUserId()" [disabled]="useridForm.invalid">Send</button>
+        <button type="submit" class="btn btn-primary" (click)="updateUserId()" [disabled]="useridForm.invalid || loading">Send</button>
       </div>
     </div>
   </div>
   <div class="container card-footer">
+    @if (error) {
+    <div class="row">
+      <div class="col alert alert-primary" role="alert">{{ error }}</div>
+    </div>
+    }
     <div class="row">
       <div class="col">Value: {{ useridForm.value }}</div>
       <div class="col">Form Status: {{ useridForm.status }}</div>
diff --git a/src/app/user/user.component.ts b/src/app/user/user.component.ts
index 027261c2..ffec960e 100644
--- a/src/app/user/user.component.ts
+++ b/src/app/user/user.component.ts
@@ -1,13 +1,7 @@
-import { Component } from '@angular/core';
-import {
-  FormControl,
-  ReactiveFormsModule,
-  Validators,
-  ValidationErrors,
-} from '@angular/forms';
+import { Component, inject } from '@angular/core';
+import { FormControl, ReactiveFormsModule, ValidationErrors, Validators, } from '@angular/forms';
 import { Router } from "@angular/router";
 import { UserService } from "./index";
-import { UUID_V4_FORMAT } from '@pact-foundation/pact/src/dsl/matchers';
 
 
 const UUID_FORMAT = "^[0-9a-f]{8}(-[0-9a-f]{4}){3}-[0-9a-f]{12}$";
@@ -20,6 +14,8 @@ const UUID_FORMAT = "^[0-9a-f]{8}(-[0-9a-f]{4}){3}-[0-9a-f]{12}$";
 })
 export class UserComponent {
 
+  private userService = inject(UserService);
+  private router = inject(Router);
 
   useridForm = new FormControl(
     '',
@@ -29,25 +25,50 @@ export class UserComponent {
       Validators.pattern(UUID_FORMAT)
     ]);
 
-  updateUserId(): void {
+  error?: string;
+  loading = false;
+
+
+  async updateUserId() {
+    this.error = undefined;
+    this.loading = true;
+
     let input = this.useridForm.getRawValue();
+
     if (input !== null) {
-      this.userService.setUser(input.trim());
-      this.router.navigate(['chatrooms'])
+      try {
+        await this.userService.setUser(input.trim());
+        this.router.navigate(['chatrooms'])
+      }
+      catch (error) {
+        const message = (error as any)?.message ?? (error as any)?.error?.message ?? String(error);
+        this.error = 'Fehler beim laden des Benutzers: ' + message;
+      }
+      finally {
+        this.loading = false;
+      }
     }
   }
 
-  createUserId(): void {
-    this.userService.createUser();
+  async createUserId() {
+    this.error = undefined;
+    this.loading = true;
+
+    try {
+      await this.userService.createUser();
+    }
+    catch (error) {
+      const message = (error as any)?.message ?? (error as any)?.error?.message ?? String(error);
+      this.error = 'Fehler beim erzeugen des Benutzers: ' + message;
+    }
+    finally {
+      this.loading = false;
+    }
   }
 
-  noWhitespaceValidator(control: FormControl) : ValidationErrors {
+  private noWhitespaceValidator(control: FormControl) : ValidationErrors {
     const isWhitespace = (control.value || '').trim().length === 0;
     const isValid = !isWhitespace;
     return isValid ? {} : { 'whitespace': true };
   }
-
-  constructor(
-    private userService: UserService,
-    private router: Router) {}
 }