From: Kai Moritz <kai@juplo.de>
Date: Sun, 29 Jun 2025 13:53:01 +0000 (+0200)
Subject: Adopted the implementation of the article for the component
X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=4fc79fe4ec1671b8ff0c819d3a6e270d9f40f45a;p=demos%2Fangular%2Fstored-login

Adopted the implementation of the article for the component

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

diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index b5029f2..30c71ee 100644
--- 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 }));
+  }
 }