git init v2

src/app/pages/login/login.component.ts

@@ -0,0 +1,57 @@
+import {Component} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {Router} from '@angular/router';
+import {TuiAppearance, TuiButton, TuiError, TuiTextfield,} from '@taiga-ui/core';
+import {TuiCardLarge, TuiForm, TuiHeader} from '@taiga-ui/layout';
+import {AuthService} from '../../services/auth.service';
+import {UserDto} from '../../models/user-dto';
+import {HttpErrorResponse} from '@angular/common/http';
+import {TuiValidationError} from '@taiga-ui/cdk';
+
+@Component({
+  selector: 'app-login',
+  imports: [
+    ReactiveFormsModule,
+    TuiAppearance,
+    TuiButton,
+    TuiCardLarge,
+    TuiForm,
+    TuiHeader,
+    TuiTextfield,
+    TuiError,
+  ],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.scss'
+})
+export class LoginComponent {
+  form: FormGroup;
+  protected enabled = false;
+
+  protected error = new TuiValidationError('Ongeldige gebruikersnaam of wachtwoord.');
+
+  protected get computedError(): TuiValidationError | null {
+    return this.enabled ? this.error : null;
+  }
+
+  constructor(private router: Router, private authService: AuthService) {
+    this.form = new FormGroup({
+      username: new FormControl('', Validators.required),
+      password: new FormControl('', Validators.required)
+    });
+  }
+
+
+  login() {
+    this.authService.login(this.form.get('username').value, this.form.get('password').value).subscribe({
+      next: (user: UserDto) => {
+        localStorage.setItem('token', user.token);
+        this.router.navigate(['/home/agenda']);
+      },
+      error: (err: HttpErrorResponse) => {
+        if (err.status === 401) {
+          this.enabled = true;
+        }
+      },
+    });
+  }
+}