From 7b32ac413b41816750e532bf772d32903a599ba0 Mon Sep 17 00:00:00 2001
From: Kai Moritz <kai@juplo.de>
Date: Sat, 30 Aug 2025 11:19:17 +0200
Subject: [PATCH] adapted and refined the implementation of the component

- Adapted the implementation to the project structure.
- Adhered to best practices (`inject()` and `onNgInit()`).
- Moved the HTML code in a separate file.
---
 src/app/login/login.component.html | 16 +++++++++++++++-
 src/app/login/login.component.ts   | 29 +++++++++--------------------
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 147cfc4..ae88858 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1 +1,15 @@
-<p>login works!</p>
+<form (ngSubmit)="onSubmit()">
+  <label>
+    Username:
+    <input type="text" [(ngModel)]="username" name="username" required>
+  </label>
+  <br>
+  <label>
+    Password:
+    <input type="password" [(ngModel)]="password" name="password" required>
+  </label>
+  <br>
+  <button type="submit" [disabled]="isLoading">Login</button>
+</form>
+<div *ngIf="error">{{ error }}</div>
+<div *ngIf="token">Welcome, {{ username }}! Your token is {{ token }}</div>
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 30c71ee..babaff6 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,35 +1,24 @@
+import { Component, inject } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { login } from './store/login.actions';
-import { selectToken, selectError, selectIsLoading } from './store/login.selectors';
+import { login } from '../store/login.actions';
+import { selectError, selectIsLoading, selectToken } from '../store/login.selectors';
 
 @Component({
   selector: 'app-login',
-  template: `
-    <form (ngSubmit)="onSubmit()">
-      <label>
-        Username:
-        <input type="text" [(ngModel)]="username" name="username" required>
-      </label>
-      <br>
-      <label>
-        Password:
-        <input type="password" [(ngModel)]="password" name="password" required>
-      </label>
-      <br>
-      <button type="submit" [disabled]="isLoading">Login</button>
-    </form>
-    <div *ngIf="error">{{ error }}</div>
-    <div *ngIf="token">Welcome, {{ username }}! Your token is {{ token }}</div>
-  `
+  imports: [],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.less'
 })
 export class LoginComponent {
+  private store = inject(Store);
+
   username = '';
   password = '';
   token = '';
   error = '';
   isLoading = false;
 
-  constructor(private store: Store) {
+  ngOnInit() {
     this.store.select(selectToken).subscribe(token => (this.token = token));
     this.store.select(selectError).subscribe(error => (this.error = error));
     this.store.select(selectIsLoading).subscribe(isLoading => (this.isLoading = isLoading));
-- 
2.39.5