From 5f9d60d3328afd6b2a598818cc95cc387ab4860f Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 14 May 2025 09:53:17 +0200
Subject: [PATCH 1/2] refactor: immediately display login error

---
 .../feature/auth/login/login.component.html   | 40 ++++++++++---------
 .../app/feature/auth/login/login.component.ts | 24 +++++------
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/frontend/src/app/feature/auth/login/login.component.html b/frontend/src/app/feature/auth/login/login.component.html
index c10b232..40fc3e6 100644
--- a/frontend/src/app/feature/auth/login/login.component.html
+++ b/frontend/src/app/feature/auth/login/login.component.html
@@ -2,9 +2,11 @@
   <div class="modal-card max-w-md w-full">
     <h2 class="modal-heading text-center">Anmelden</h2>
 
-    <div *ngIf="errorMessage" class="bg-accent-red text-white p-4 rounded mb-4">
-      {{ errorMessage }}
-    </div>
+    @if (errorMessage()) {
+      <div class="bg-accent-red text-white p-4 rounded mb-4">
+        {{ errorMessage() }}
+      </div>
+    }
 
     <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-4">
       <div>
@@ -19,14 +21,13 @@
           placeholder="Gib deinen Benutzernamen oder E-Mail ein"
         />
 
-        <div
-          *ngIf="form['usernameOrEmail'].touched && form['usernameOrEmail'].errors"
-          class="text-accent-red mt-1 text-sm"
-        >
-          <span *ngIf="form['usernameOrEmail'].errors?.['required']">
-            Benutzername oder E-Mail ist erforderlich
-          </span>
-        </div>
+        @if (form['usernameOrEmail'].touched && form['usernameOrEmail'].errors) {
+          <div class="text-accent-red mt-1 text-sm">
+            @if (form['usernameOrEmail'].errors['required']) {
+              <span>Benutzername oder E-Mail ist erforderlich</span>
+            }
+          </div>
+        }
       </div>
 
       <div>
@@ -41,21 +42,22 @@
           placeholder="Gib dein Passwort ein"
         />
 
-        <div
-          *ngIf="form['password'].touched && form['password'].errors"
-          class="text-accent-red mt-1 text-sm"
-        >
-          <span *ngIf="form['password'].errors?.['required']">Passwort ist erforderlich</span>
-        </div>
+        @if (form['password'].touched && form['password'].errors) {
+          <div class="text-accent-red mt-1 text-sm">
+            @if (form['password'].errors['required']) {
+              <span>Passwort ist erforderlich</span>
+            }
+          </div>
+        }
       </div>
 
       <div class="pt-2">
         <button
           type="submit"
-          [disabled]="loginForm.invalid || isLoading"
+          [disabled]="loginForm.invalid || isLoading()"
           class="button-primary w-full py-2.5 rounded"
         >
-          {{ isLoading ? 'Anmeldung läuft...' : 'Anmelden' }}
+          {{ isLoading() ? 'Anmeldung läuft...' : 'Anmelden' }}
         </button>
       </div>
     </form>
diff --git a/frontend/src/app/feature/auth/login/login.component.ts b/frontend/src/app/feature/auth/login/login.component.ts
index 1ed3537..8143e15 100644
--- a/frontend/src/app/feature/auth/login/login.component.ts
+++ b/frontend/src/app/feature/auth/login/login.component.ts
@@ -1,9 +1,9 @@
-import { Component } from '@angular/core';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { Router, RouterLink } from '@angular/router';
-import { LoginRequest } from '../../../model/auth/LoginRequest';
-import { AuthService } from '../../../service/auth.service';
-import { CommonModule } from '@angular/common';
+import {Component, signal} from '@angular/core';
+import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {Router, RouterLink} from '@angular/router';
+import {LoginRequest} from '../../../model/auth/LoginRequest';
+import {AuthService} from '@service/auth.service';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'app-login',
@@ -13,8 +13,8 @@ import { CommonModule } from '@angular/common';
 })
 export class LoginComponent {
   loginForm: FormGroup;
-  errorMessage = '';
-  isLoading = false;
+  errorMessage = signal('');
+  isLoading = signal(false);
 
   constructor(
     private fb: FormBuilder,
@@ -36,8 +36,8 @@ export class LoginComponent {
       return;
     }
 
-    this.isLoading = true;
-    this.errorMessage = '';
+    this.isLoading.set(true);
+    this.errorMessage.set('');
 
     const loginRequest: LoginRequest = {
       usernameOrEmail: this.form['usernameOrEmail'].value,
@@ -49,8 +49,8 @@ export class LoginComponent {
         this.router.navigate(['/home']);
       },
       error: (err) => {
-        this.isLoading = false;
-        this.errorMessage = err.error?.message || 'Failed to login. Please check your credentials.';
+        this.isLoading.set(false);
+        this.errorMessage.set(err.error?.message || 'Failed to login. Please check your credentials.');
       },
     });
   }
-- 
2.47.2


From 64b2e28566aa4cdc94f8f1544498e630fde76ae2 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 14 May 2025 09:54:12 +0200
Subject: [PATCH 2/2] style: run quality tools

---
 .../app/feature/auth/login/login.component.ts    | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/feature/auth/login/login.component.ts b/frontend/src/app/feature/auth/login/login.component.ts
index 8143e15..8874dbc 100644
--- a/frontend/src/app/feature/auth/login/login.component.ts
+++ b/frontend/src/app/feature/auth/login/login.component.ts
@@ -1,9 +1,9 @@
-import {Component, signal} from '@angular/core';
-import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
-import {Router, RouterLink} from '@angular/router';
-import {LoginRequest} from '../../../model/auth/LoginRequest';
-import {AuthService} from '@service/auth.service';
-import {CommonModule} from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { LoginRequest } from '../../../model/auth/LoginRequest';
+import { AuthService } from '@service/auth.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-login',
@@ -50,7 +50,9 @@ export class LoginComponent {
       },
       error: (err) => {
         this.isLoading.set(false);
-        this.errorMessage.set(err.error?.message || 'Failed to login. Please check your credentials.');
+        this.errorMessage.set(
+          err.error?.message || 'Failed to login. Please check your credentials.'
+        );
       },
     });
   }
-- 
2.47.2