Merge pull request 'refactor: immediately display login error' (!185) from refactor-login into main

Reviewed-on: #185
Reviewed-by: Constantin Simonis <constantin@simonis.lol>

.gitea/workflows/ci.yml

@@ -77,6 +77,7 @@ jobs:
   validate-docker-frontend:
     runs-on: ubuntu-latest
     name: Docker frontend validation
+    needs: changed_files
     if: ${{ needs.changed_files.outputs.frontend == 'true' || needs.changed_files.outputs.workflow == 'true' }}
     container:
       image: catthehacker/ubuntu:act-latest
@@ -93,6 +94,7 @@ jobs:
   validate-docker-backend:
     runs-on: ubuntu-latest
     name: Docker backend validation
+    needs: changed_files
     if: ${{ needs.changed_files.outputs.backend == 'true' || needs.changed_files.outputs.workflow == 'true' }}
     container:
       image: catthehacker/ubuntu:act-latest

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>

frontend/src/app/feature/auth/login/login.component.ts

@@ -1,8 +1,8 @@
-import { Component } from '@angular/core';
+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 { AuthService } from '@service/auth.service';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -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,10 @@ 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.'
+        );
       },
     });
   }