Adopted the implementation of the article for the component

link: https://medium.com/@tranan.aptech/building-a-secure-login-system-with-angular-and-ngrx-a-step-by-step-guide-b1987cdd5626[article

diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index b5029f2..30c71ee 100644 (file)
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,11 +1,41 @@
-import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { login } from './store/login.actions';
+import { selectToken, selectError, selectIsLoading } from './store/login.selectors';
 
 @Component({
   selector: 'app-login',
-  imports: [],
-  templateUrl: './login.component.html',
-  styleUrl: './login.component.less'
+  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>
+  `
 })
 export class LoginComponent {
+  username = '';
+  password = '';
+  token = '';
+  error = '';
+  isLoading = false;
 
+  constructor(private store: Store) {
+    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));
+  }
+
+  onSubmit() {
+    this.store.dispatch(login({ username: this.username, password: this.password }));
+  }
 }