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.

diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 147cfc4f8f814706025c8e9a855dacc3eaa0f40c..ae88858962ca1093400dc9061754d8f7af77d18e 100644 (file)
--- 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 30c71eea5a87a472082751ec37aa218afc571996..babaff628d8a9a77e0e419206ce67baf4db80b5d 100644 (file)
--- 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));